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

<template>
  <div>
    <Table
      :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 } from "@/api/system/baseForm";
import {mergeTableRow} from "@/utils/mergeTableRow";

export default {
  inject: ["equipments"],
  data() {
    return {
      select: {
        table_name: 'transfers',
        page: 1,
        page_size: 10,
        sort_name: 'equipment_id'
      },
      total: 0,
      data: [],
      columns: [
        {
          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('span',text);
          },
        },
        {
          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) => {
                    this.data.splice(index, 1);
                  },
                },
              },
              [
                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 () {
      const res = await index(this.select);
      this.data = res.data;
      this.total = res.total;
    }
  },
  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: {
  },
  created() {
    this.getDispatches()
  }
}
</script>

<style scoped lang="scss">
.pagination {
  display: flex;
  justify-content: center;

  padding: 20px 0;
}
</style>