water-dispatch-web/src/views/order/component/createDispatch.vue

<template>
  <div>
    <div class="select">

      <div class="select-item">
        <div class="select-item__title">选择范围</div>
        <el-checkbox-group size="small" v-model="select.area">
          <el-checkbox-button v-for="item in areas" :label="item.value">{{
            item.key
          }}</el-checkbox-button>
        </el-checkbox-group>
      </div>

      <div class="select-item">
        <div class="select-item__title">选择泵闸</div>
        <el-checkbox-group size="small" v-model="select.type">
          <el-checkbox-button v-for="item in types" :label="item.value">{{
            item.key
          }}</el-checkbox-button>
        </el-checkbox-group>
      </div>

      <div class="select-item">
        <div class="select-item__title">选择类别</div>
        <el-radio-group size="small" v-model="ability" @input="e => data.forEach(i => i.leibie = e)">
          <el-radio-button v-for="item in abilities" :label="item.value">{{
              item.key
            }}</el-radio-button>
        </el-radio-group>
      </div>

      <div class="select-item">
        <Button type="primary" style="margin-left: 10px" @click="clear"
          >清空筛选</Button
        >
      </div>

      <div class="date">
        <p>
          您正在为
          <span style="color: red">{{ date }}</span>
          创建
          <span style="color: red;"> {{ abilities.find(i => i.value === ability) ? abilities.find(i => i.value === ability).key : '' }} </span>
          调令
        </p>
<!--        <el-radio-group size="small" style="margin-left: 14px;" v-model="createType">-->
<!--          <el-radio-button :label="1">天</el-radio-button>-->
<!--          <el-radio-button :label="2">周</el-radio-button>-->
<!--        </el-radio-group>-->
        <el-date-picker
          size="small"
          v-model="date"
          :type="createType === 1 ? 'date' : 'week'"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          placeholder="日期选择"
          :format="createType === 1 ? 'yyyy-MM-dd' : 'yyyy第WW周'"
          style="width: 160px; margin-left: 14px"
          @input="pickDate"
        ></el-date-picker>
      </div>
    </div>

    <Table
      :columns="columns"
      :data="mergeData"
      stripe
      :span-method="objectSpanMethod"
    ></Table>

    <div class="btns">
      <Button type="primary" @click="submit">创建调令</Button>
      <Button type="primary" ghost @click="reset">重置列表</Button>
    </div>
  </div>
</template>

<script>
import { uuid } from "@/utils";
import { index, save } from "@/api/system/baseForm";
import { deepCopy } from "@/utils";
import { mergeTableRow } from "@/utils/mergeTableRow";
import { show } from "@/api/system/customFormField";
export default {
  inject: ["equipments"],
  props: {

  },
  data() {
    return {
      createType: 1,
      pickerOptions: {
        firstDayOfWeek: 1,
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '明天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '下周',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      areas: [],
      types: [],
      abilities: [],
      select: {
        area: [],
        type: [],
        leibie: [],
      },
      weather: [],
      copyOriginalData: [],
      date: this.$moment().format("YYYY-MM-DD"),
      ability: 1,
      data:
        this.equipmentList?.map((i) => ({
          equipment: i,
          equipment_id: i.id,
          start_time: "",
          end_time: "",
          content: "",
          level: 1,
          leibie: this.ability
        })) || [],
      columns: [
        // {
        //   width: 50,
        //   title: ' ',
        //   type: 'index',
        //   key: 'index'
        // },
        {
          title: "点位",
          width: 240,
          key: "equipment_id",
          align: "center",
          render: (h, { row, index }) => {
            let text = row.equipment ? row.equipment.name : "";
            return h("div", [
              h('span',text),
              h('Button',{
                props: {
                  size: 'small',
                  type: 'primary',
                  icon: 'ios-add'
                },
                style: {
                  'margin-left': '6px'
                },
                on: {
                  ['click']:e => {
                    this.data.splice(index,0,deepCopy(row))
                  }
                }
              },'新增')
            ]);
          },
        },
        {
          title: '机组运行状态',
          width: 200,
          render: (h,{ row }) => {
            const create = () => {
              let dom = [];
              for (let i = 0;i<=row._random;i++) {
                dom.push(h('div',{
                  style: {
                    width: '14px',
                    height: '14px',
                    background: i === row._random-1 ? 'red' : 'green',
                    'border-radius': '100%',
                    'margin-left': '6px'
                  }
                }))
              }
              return dom;
            }
            return h('div',{
              style: {
                display: 'flex'
              }
            },create())
          }
        },
        {
          title: '类别',
          key: 'yinpaishui',
          width: 100,
          align: 'center',
          render: (h,{ row }) => (h('span',this.abilities.find(i => i.value === row.leibie)?.key))
        },
        {
          title: "开启时间",
          width: 140,
          align: "center",
          key: "start_time",
          render: (h, { row, index }) => {
            return h("TimePicker", {
              props: {
                value: row.start_time,
                type: "time",
                size: "small",
                transfer: true,
                format: "HH:mm"
              },
              on: {
                ["on-change"]: (e) => (this.data[index].start_time = e),
              },
            });
          },
        },
        {
          title: "结束时间",
          width: 140,
          align: "center",
          key: "end_time",
          render: (h, { row, index }) => {
            return h("TimePicker", {
              props: {
                value: row.end_time,
                type: "time",
                size: "small",
                transfer: true,
                format: "HH:mm"
              },
              on: {
                ["on-change"]: (e) => (this.data[index].end_time = e),
              },
            });
          },
        },
        {
          title: "调令内容",
          minWidth: 200,
          key: "content",
          align: "center",
          render: (h, { row, index }) => {
            return h("Input", {
              style: {
                padding: "6px 0",
              },
              props: {
                size: "small",
                value: row.content,
                type: "textarea",
              },
              on: {
                ["input"]: (e) => (this.data[index].content = e),
              },
            });
          },
        },
        {
          title: "调令等级",
          width: 140,
          key: "level",
          align: "center",
          render: (h, { row, index }) => {
            return h(
              "Select",
              {
                props: {
                  value: row.level,
                  filterable: true,
                  size: "small",
                  transfer: true,
                },
                on: {
                  ["on-select"]: (e) => {
                    row.level = e.value;
                    this.data[index].level = e.value;
                  },
                },
              },
              [
                { label: "一般", value: 1 },
                { label: "紧急", value: 2 },
              ].map((i) => {
                return h(
                  "Option",
                  {
                    props: {
                      value: i.value,
                    },
                  },
                  i.label
                );
              })
            );
          },
        },
        {
          title: "操作",
          width: 140,
          key: "operate",
          render: (h, { row, index }) => {
            return h(
              "Poptip",
              {
                props: {
                  title: "确认要删除吗？",
                  confirm: true,
                  transfer: true,
                },
                on: {
                  ["on-ok"]: (e) => {
                    this.data.splice(index, 1);
                  },
                },
              },
              [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                    },
                  },
                  "删除"
                ),
              ]
            );
          },
        },
      ],
    };
  },
  methods: {
    clear () {
      this.select = {
        area: [],
        type: []
      };
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const span = column["key"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },

    reset () {
      this.clear();
      this.data =
        this.equipmentList?.map((i) => ({
          equipment: i,
          equipment_id: i.id,
          start_time: "",
          end_time: "",
          content: "",
          level: 1,
          leibie: this.ability
        })) || [];
    },

    submit () {
      let verify = true;
      const submitData = this.data.filter(i => (i.start_time || i.end_time || i.content));
      submitData.forEach(item => {
        if (!item.start_time || !item.end_time || !item.level) {
          verify = false;
        }
      })
      if (!verify) {
        this.$message({
          type: 'warning',
          message: '请填写完整信息'
        })
        return
      }

      const uid = uuid();
      let promiseAll = [];
      submitData.forEach(i => {
        delete i['equipment_id-span']
        delete i['_index']
        delete i['_rowKey']

        if (this.createType === 2) {
          const startDay = this.$moment(this.date).startOf('week')
          let weekArr = [];
          for(let a = 1;a <= 7;a++) {
            weekArr.push(this.$moment(startDay).add(a,'days').format('YYYY-MM-DD'))
          }
          weekArr.forEach(j => {
            promiseAll.push(save({
              ...i,
              table_name: 'transfers',
              start_time: `${j} ${i.start_time}`,
              end_time: `${j} ${i.end_time}`,
              no: uid,
              status: 1
            },false))
          })
        } else {
          i.start_time = `${this.date} ${i.start_time}`;
          i.end_time = `${this.date} ${i.end_time}`;
          i.no = uid;
          i.status = 1;
          promiseAll.push(save({
            table_name: 'transfers',
            ...i
          },false))
        }
      })
      let loadingInstance = this.$loading({
        lock:true,
        background:"rgba(0,0,0,0.4)",
        text:"正在加载中..."
      })
      Promise.all(promiseAll).then(res => {
        this.reset();
        loadingInstance.close();
        this.$message({
          type: 'success',
          message: `成功创建${res.length}条调令`
        })
        this.$bus.$emit('createdTransfer')
      }).catch(_ => {
        loadingInstance.close();
      })
    },

    async getArea() {
      const obj = (await show({ id: 4 }, false))?.select_item;
      if (obj && typeof obj === "object") {
        let keys = Object.keys(obj);
        if (keys.length > 0) {
          this.areas = keys.map((key) => {
            return {
              key,
              value: /^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],
            };
          });
        }
      }
      this.$bus.$emit('areas',this.areas)
    },
    async getType() {
      const obj = (await show({ id: 1 }, false))?.select_item;
      if (obj && typeof obj === "object") {
        let keys = Object.keys(obj);
        if (keys.length > 0) {
          this.types = keys.map((key) => {
            return {
              key,
              value: /^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],
            };
          });
        }
      }
    },
    async getAbility () {
      const obj = (await show({ id: 31 }, false))?.select_item;
      if (obj && typeof obj === "object") {
        let keys = Object.keys(obj);
        if (keys.length > 0) {
          this.abilities = keys.map((key) => {
            return {
              key,
              value: /^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],
            };
          });
        }
      }
      this.$bus.$emit('yinpaishui',this.abilities)
    },

    pickDate () {
      this.$bus.$emit('pickDate',this.date)
    }
  },
  computed: {
    mergeData() {
      return mergeTableRow({
        data: this.data.map((i) => {
          delete i["equipment_id-span"];
          return i;
        }),
        mergeColNames: ["equipment_id"], // 需要合并的列，默认合并列相同的数据
        firstMergeColNames: ["equipment_id"], // 受影响的列，只合并以firstMerge为首的同类型数据
        firstMerge: "equipment_id", // 以哪列为基础进行合并，一般为第一列
      });
    },
    equipmentList() {
      return this.equipments() || [];
    },
  },
  watch: {
    equipmentList(val) {
      this.data =
        val?.map((i) => ({
          equipment: i,
          equipment_id: i.id,
          start_time: "",
          end_time: "",
          content: "",
          level: 1,
          leibie: this.ability,
          _random: Math.round(Math.random() * 8)
        })) || [];
    },
    select: {
      handler: function (val) {
        if (val.area.length > 0 || val.type.length > 0) {
          let list1 = [];
          let list2 = [];
          if (val.area.length > 0) {
            list1 = this.equipments().filter(i => val.area.find(j => j === i.area))
          }
          if (val.type.length > 0) {
            list2 = this.equipments().filter(i => val.type.find(j => j === i.type))
          }
          this.data = Array.from(new Set([...list1,...list2].map(JSON.stringify))).map(JSON.parse).map((i) => ({
            equipment: i,
            equipment_id: i.id,
            start_time: "",
            end_time: "",
            content: "",
            level: 1,
            leibie: this.ability
          })) || [];
        } else {
          this.data = this.equipments()?.map((i) => ({
            equipment: i,
            equipment_id: i.id,
            start_time: "",
            end_time: "",
            content: "",
            level: 1,
            leibie: this.ability
          })) || [];
        }
      },
      deep: true
    }
  },
  mounted() {},
  created() {
    this.getArea();
    this.getType();
    this.getAbility();
  },
};
</script>

<style scoped lang="scss">
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.select {
  &-item {
    display: flex;
    align-items: center;
    &__title {
      width: 80px;
      flex-shrink: 0;
      font-weight: 600;
      text-align: center;
    }

    & + & {
      margin-top: 10px;
    }
  }

  .date {
    display: flex;
    align-items: center;

    padding: 10px;
  }
}
.btns {

  margin-top: 10px;
  padding-left: 10px;
}
</style>