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

<template>
  <div>
    <div class="select-content">
      <Select clearable v-model="select.filter[2].value" placeholder="请选择类别" style="width: 140px;">
        <Option v-for="item in abilities" :value="item.value">{{ item.key }}</Option>
      </Select>
      <Select clearable v-model="select.filter[1].value" placeholder="请选择范围" style="width: 140px;margin-left: 6px;">
        <Option v-for="item in areas" :value="item.value">{{ item.key }}</Option>
      </Select>
      <Input style="width: 140px;margin-left: 6px;" clearable v-model="select.filter[0].value" placeholder="搜索内容"/>
      <Button style="margin-left: 6px;" type="primary" @click="getDispatches">搜索</Button>
    </div>

    <Table
      style="margin-top: 16px;"
      border
      :loading="loading"
      :columns="columns"
      :data="mergeData"
      stripe
      :span-method="objectSpanMethod"
    ></Table>

    <el-pagination
      class="pagination"
      @size-change="e => {
        select.page_size = e;
        select.page = 1;
        getDispatches();
      }"
      @current-change="e => {
        select.page = e;
        getDispatches();
      }"
      :current-page="select.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="select.page_size"
      layout="total, prev, pager, next, jumper, sizes"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { deepCopy } from "@/utils";
import { index,destroy } from "@/api/system/baseForm";
import { mergeTableRow }  from "@/utils/mergeTableRow";

export default {
  inject: ["equipments"],
  data() {
    return {
      loading: false,
      areas: [],
      abilities: [],
      select: {
        table_name: 'transfers',
        page: 1,
        page_size: 10,
        sort_name: 'equipment_id',
        filter: [
          {
            key: "content",
            op: "like",
            value: ""
          },
          {
            key: "area",
            op: "eq",
            value: ""
          },
          {
            key: "leibie",
            op: "eq",
            value: ""
          }
        ]
      },
      total: 0,
      data: [],
      columns: [
        {
          title: "点位",
          width: 240,
          key: "equipment_id",
          align: "center",
          render: (h, { row, index }) => {
            let text = row.equipment_id_equipments_id_relation ? row.equipment_id_equipments_id_relation.name : "";
            return h('span',text);
          },
        },
        {
          title: "范围",
          width: 140,
          key: "area",
          align: "center",
          render: (h, { row, index }) => {
            let area = row.equipment_id_equipments_id_relation ? row.equipment_id_equipments_id_relation.area : "";
            let text = this.areas.find(i => i.value === area)?.key
            return h('span',text)
          }
        },
        {
          title: '类别',
          width: 100,
          key: 'leibie',
          align: 'center',
          render: (h,{ row }) => h('span', (this.abilities.find(i => i.value === row.leibie))?.key)
        },
        {
          title: "开启时间",
          width: 180,
          align: "center",
          key: "start_time",
        },
        {
          title: "结束时间",
          width: 180,
          align: "center",
          key: "end_time",
        },
        {
          title: "调令内容",
          minWidth: 200,
          key: "content",
          align: "left",
        },
        {
          title: "调令等级",
          width: 140,
          key: "level",
          align: "center",
          render: (h, { row }) => {
            let type = new Map([
              [1,'一般'],
              [2,'紧急']
            ])
            return h('span',type.get(row.level));
          },
        },
        {
          title: "操作",
          width: 140,
          key: "operate",
          render: (h, { row, index }) => {
            return h(
              "Poptip",
              {
                props: {
                  title: "确认要删除吗？",
                  confirm: true,
                  transfer: true,
                },
                on: {
                  ["on-ok"]: (e) => {
                    destroy({
                      table_name: 'transfers',
                      id: row.id
                    }).then(res => {
                      this.$message({
                        type: 'success',
                        message: '删除成功'
                      })
                      this.getDispatches();
                    })
                  },
                },
              },
              [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                    },
                  },
                  "删除"
                ),
              ]
            );
          },
        },
      ]
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const span = column["key"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },

    async getDispatches () {
      try {
        this.loading = true;
        const res = await index(this.select);
        this.data = res.data;
        this.total = res.total;
        this.loading = false;
      } catch (e) {
        this.loading = false;
      }
    }
  },
  computed: {
    mergeData() {
      return mergeTableRow({
        data: this.data.map((i) => {
          delete i["equipment_id-span"];
          delete i["area-span"]
          return i;
        }),
        mergeColNames: ["equipment_id","area"], // 需要合并的列，默认合并列相同的数据
        firstMergeColNames: ["equipment_id"], // 受影响的列，只合并以firstMerge为首的同类型数据
        firstMerge: "equipment_id", // 以哪列为基础进行合并，一般为第一列
      });
    },
    equipmentList() {
      return this.equipments() || [];
    },
  },
  watch: {
  },
  created() {
    this.getDispatches()
    this.$bus.$on('yinpaishui',e => (this.abilities = e))
    this.$bus.$on('areas',e => (this.areas = e))
    this.$bus.$on('createdTransfer',_ => (this.getDispatches()))
  },
  destroyed() {
    this.$bus.$off('areas')
    this.$bus.$off('yinpaishui')
    this.$bus.$off('createdTransfer')
  }
}
</script>

<style scoped lang="scss">
.select-content {
  width: 100%;
}
.pagination {
  display: flex;
  justify-content: center;

  padding: 20px 0;
}
</style>