kd-aiot-frontend-eam/src/views/sparePartsApply/components/workList.vue

<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="true"
    :close-on-press-escape="false"
    append-to-body
    width="80vw"
    :fullscreen="fullscreen"
    class="fullscreen"
  >
    <template slot="title">
      <modalTitle
        title=""
        @setFullscreen="fullscreen = !fullscreen"
      ></modalTitle>
    </template>
    <div class="patrol">
      <div class="ele-body">
        <el-card shadow="never">
          <div class="switch">
            <div class="switch_left">
              <ul>
                <li
                  v-for="item in tabOptions"
                  :key="item.key"
                  :class="{ active: activeComp == item.key }"
                  @click="activeChange(item.key)"
                >
                  {{ item.name }}
                </li>
              </ul>
            </div>
          </div>
          <ele-pro-table
            ref="table"
            :columns="columns()"
            :datasource="datasource"
            :current.sync="current"
            highlight-current-row
            row-key="id"
          >
          </ele-pro-table>
        </el-card>
      </div>
    </div>
    <template v-slot:footer>
      <el-button @click="visible = false">取消</el-button>

      <el-button type="primary" @click="add"> 确认 </el-button>
    </template>
  </el-dialog>
</template>
<script>
  import modalTitle from '@/components/modalTitle.vue';
  import {
    getWorkOrderPage,
    getWordOrderDetail
  } from '@/api/maintenance/patrol_maintenance';
  import { getWorkOrderList } from '@/api/maintenance/repair';
  export default {
    components: { modalTitle },
    data() {
      return {
        fullscreen: false,
        visible: false,
        activeComp: '1',
        tabOptions: [
          { key: '1', name: '巡点检工单' },
          { key: '2', name: '保养工单' },
          { key: '3', name: '维修工单' }
        ],
        current: {},
        patrolColumns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            columnKey: 'code',
            slot: 'code',
            prop: 'code',
            label: '工单单号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'planCode',
            label: '计划单号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'planName',
            label: '巡点检名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'executeGroupName',
            label: '巡点检部门',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'executeUserName',
            label: '巡点检人员',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'ruleName',
            label: '规则名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '工单生成时间',
            align: 'center',
            // sortable: true,
            showOverflowTooltip: true,
            width: 170
          },
          {
            prop: 'acceptTime',
            label: '开工时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'finishTime',
            label: '报工时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            columnKey: 'orderHour',
            label: '实际工时(分钟)',
            align: 'center',
            resizable: false,
            showOverflowTooltip: true,
            minWidth: 120,
            formatter: (row) => {
              if (row.finishTime && row.acceptTime) {
                return parseInt(
                  (new Date(row.finishTime).getTime() -
                    new Date(row.acceptTime).getTime()) /
                    60000
                );
              }
            }
          },
          {
            prop: 'orderStatus',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (row) => {
              return {
                0: '待接收',
                1: '已接收',
                2: '执行中',
                3: '已完成'
              }[row.orderStatus];
            }
          },
          {
            prop: 'acceptanceStatus',
            label: '执行结果',
            align: 'center',
            showOverflowTooltip: true,
            formatter(row) {
              return { 0: '缺陷', 1: '正常' }[row.isAbnormal];
            }
          }
        ],
        equipmentColumns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            columnKey: 'code',
            slot: 'code',
            prop: 'code',
            label: '工单单号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'planCode',
            label: '计划单号',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'planCode',
            minWidth: 140
          },
          {
            prop: 'planName',
            label: '保养名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'executeGroupName',
            label: '保养部门',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'executeUserName',
            label: '保养人员',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'ruleName',
            label: '规则名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '工单生成时间',
            // sortable: true,
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 170
          },
          {
            prop: 'acceptTime',
            label: '开工时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'finishTime',
            label: '报工时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            columnKey: 'orderHour',
            label: '实际工时(分钟)',
            align: 'center',
            resizable: false,
            showOverflowTooltip: true,
            minWidth: 120,
            formatter: (row) => {
              if (row.finishTime && row.acceptTime) {
                return parseInt(
                  (new Date(row.finishTime).getTime() -
                    new Date(row.acceptTime).getTime()) /
                    60000
                );
              }
            }
          },
          {
            prop: 'orderStatus',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (row) => {
              return {
                0: '待接收',
                1: '已接收',
                2: '执行中',
                3: '已完成'
              }[row.orderStatus];
            }
          },
          {
            prop: 'executeResult',
            label: '执行结果',
            align: 'center',
            showOverflowTooltip: true,
            formatter(row) {
              return { 0: '缺陷', 1: '正常' }[row.isAbnormal];
            }
          }
        ],
        repairColumns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'code',
            slot: 'code',
            label: '工单编号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'planCode',
            // label: '关联单号',
            label: '计划单号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'planName',
            label: '维修名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'substanceDetailVO.name',
            label: '设备名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'substanceDetailVO.fixCode',
            label: '固资编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'substanceDetailVO.codeNumber',
            label: '设备编号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'executeUserName',
            label: '执行人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'acceptTime',
            label: '开始时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'finishTime',
            label: '结束时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'planFinishTime',
            label: '计划完成时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            columnKey: 'orderHour',
            label: '实际工时(分钟)',
            align: 'center',
            resizable: false,
            showOverflowTooltip: true,
            minWidth: 120,
            formatter: (row) => {
              if (row.finishTime && row.acceptTime) {
                return parseInt(
                  (new Date(row.finishTime).getTime() -
                    new Date(row.acceptTime).getTime()) /
                    60000
                );
              }
            }
          }
        ]
      };
    },
    methods: {
      async open() {
        this.visible = true;
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        where.type = this.activeComp;
        let api = this.activeComp == 3 ? getWorkOrderList : getWorkOrderPage;
        return api({
          pageNum: page,
          size: limit,
          ...where
        });
      },
      columns() {
        return this.activeComp == 1
          ? this.patrolColumns
          : this.activeComp == 2
          ? this.equipmentColumns
          : this.repairColumns;
      },
      activeChange(key) {
        this.activeComp = key;
        this.$refs.table.reload();
      },
      async add() {
        let data = null;
        let deviceList = [];
        if (!this.current.id) {
          this.$message.error('请至少选择一条数据');
          return;
        }
        if (this.activeComp == 3) {
          data = this.current;
          deviceList[0] = data.substanceDetailVO;
        } else {
          data = await getWordOrderDetail(this.current.id);
          deviceList = data.deviceList.map((item) => {
            return item.substance;
          });
        }
        data['deviceList'] = deviceList;
        this.$emit('open', data);
        this.visible = false;
      }
    }
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-card__body {
    padding-top: 0;
    padding-left: 0;
  }
  .main {
    padding-left: 17px;
    .plan {
      padding-top: 15px;
    }
  }
</style>