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">
        <Button type="primary" style="margin-left: 10px" @click="clear"
          >清空筛选</Button
        >
      </div>

      <div class="date">
        <p>
          您正在为
          <span style="color: red">{{ date }}</span>
          创建
          <span> {{ "排水" }} </span>
          调令
        </p>
        <DatePicker
          :value="date"
          type="date"
          format="yyyy-MM-dd"
          :options="options"
          placeholder="日期选择"
          style="width: 160px; margin-left: 14px"
          @on-change="(e) => (date = e)"
        ></DatePicker>
      </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 { 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() {
    const _this = this;
    return {
      options: {
        shortcuts: [
          {
            text: "今天",
            onClick() {
              _this.date = _this.$moment().format("YYYY-MM-DD");
            },
          },
          {
            text: "明天",
            onClick() {
              _this.date = _this.$moment().add(1, "days").format("YYYY-MM-DD");
            },
          },
          {
            text: "一周后",
            onClick() {
              _this.date = _this.$moment().add(1, "weeks").format("YYYY-MM-DD");
            },
          },
          {
            text: "一个月后",
            onClick() {
              _this.date = _this
                .$moment()
                .add(1, "months")
                .format("YYYY-MM-DD");
            },
          },
        ],
      },
      areas: [],
      types: [],
      select: {
        area: [],
        type: [],
      },
      weather: [],
      copyOriginalData: [],
      date: this.$moment().format("YYYY-MM-DD"),
      data:
        this.equipmentList?.map((i) => ({
          equipment_id: i.id,
          start_time: "",
          end_time: "",
          content: "",
          level: 1,
        })) || [],
      columns: [
        // {
        //   width: 50,
        //   title: ' ',
        //   type: 'index',
        //   key: 'index'
        // },
        {
          title: "点位",
          width: 240,
          key: "equipment_id",
          align: "center",
          render: (h, { row, index }) => {
            let equipment = this.equipmentList.find(
              (i) => i.id === row.equipment_id
            );
            let text = equipment ? 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))
                  }
                }
              },'新增')
            ]);
          },
          // render: (h,{ row, index }) => {
          //   return h('div',{
          //     style: {
          //       display: 'flex',
          //       'justify-content': 'space-between'
          //     }
          //   },[
          //     h('Select',{
          //       style: {
          //         width: '140px'
          //       },
          //       props: {
          //         value: row.equipment_id,
          //         filterable: true,
          //         size: 'small',
          //         transfer: true,
          //         disabled: true
          //       },
          //       on: {
          //         ['on-select']:e => {
          //           row.equipment_id = e.value;
          //         }
          //       }
          //     },this.equipments().map(i => {
          //       return h('Option',{
          //         props: {
          //           value: i.id,
          //         }
          //       },i.name)
          //     })),
          //     h('Button',{
          //       props: {
          //         size: 'small',
          //         type: 'primary'
          //       },
          //       on: {
          //         ['click']:e => {
          //           this.data.splice(index,0,deepCopy(row))
          //         }
          //       }
          //     },'新增')
          //   ])
          // }
        },
        {
          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,
              },
              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,
              },
              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 }) => {
            return h(
              "Select",
              {
                props: {
                  value: row.level,
                  filterable: true,
                  size: "small",
                  transfer: true,
                },
                on: {
                  ["on-select"]: (e) => {
                    row.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_id: i.id,
          start_time: "",
          end_time: "",
          content: "",
          level: 1,
        })) || [];
    },

    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
      }

      let promiseAll = submitData.map(i => {
        delete i['equipment_id-span']
        delete i['_index']
        delete i['_rowKey']
        i.start_time = `${this.date} ${i.start_time}`;
        i.end_time = `${this.date} ${i.end_time}`;

        return 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}条调令`
        })
      }).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],
            };
          });
        }
      }
    },
    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],
            };
          });
        }
      }
    },
  },
  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_id: i.id,
          start_time: "",
          end_time: "",
          content: "",
          level: 1,
        })) || [];
    },
    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.id))
          }
          if (val.type.length > 0) {
            list2 = this.equipments().filter(i => val.type.find(j => j === i.id))
          }
          this.data = Array.from(new Set([...list1,...list2].map(JSON.stringify))).map(JSON.parse).map((i) => ({
            equipment_id: i.id,
            start_time: "",
            end_time: "",
            content: "",
            level: 1,
          })) || [];
        } else {
          this.data = this.equipments()?.map((i) => ({
            equipment_id: i.id,
            start_time: "",
            end_time: "",
            content: "",
            level: 1,
          })) || [];;
        }
      },
      deep: true
    }
  },
  mounted() {},
  created() {
    this.getArea();
    this.getType();
  },
};
</script>

<style scoped lang="scss">
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.select {
  &-item {
    display: flex;
    align-items: center;
    &__title {
      width: 50px;
      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>