kd-aiot-frontend-eom/src/views/salesServiceManagement/accessory/components/workOrderList.vue

<template>
  <el-dialog
    title="选择工单"
    custom-class="ele-dialog-form long-dialog-form"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    top="5vh"
    :close-on-press-escape="false"
    append-to-body
    width="70%"
  >
    <el-card shadow="never">
      <workSearch @search="reload"></workSearch>

      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        row-key="id"
        height="calc(100vh - 460px)"
        class="dict-table"
        @cell-click="cellClick"
      >
        <!-- 表头工具栏 -->
        <template v-slot:action="{ row }">
          <el-radio class="radio" v-model="radio" :label="row.id">
            <i></i>
          </el-radio>
        </template>
      </ele-pro-table>
    </el-card>

    <div slot="footer">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getSalesWorkOrder } from '@/api/salesServiceManagement/index';
  import workSearch from './workSearch.vue';
  // import AssetTree from '@/components/AssetTree';

  export default {
    components: {
      workSearch
      // AssetTree
    },
    props: {
      classType: {
        type: Number | String,
        default: 1
      }
    },
    data() {
      return {
        visible: false,
        workOrderStatus: [
          { code: 0, label: '待接收' },
          { code: 1, label: '已接收' },
          { code: 2, label: '执行中' },
          { code: 3, label: '待验收' },
          { code: 4, label: '待评价' },
          { code: 5, label: '已完成' },
          { code: 6, label: '验收不通过' }
        ],
        columns: [
          {
            action: 'action',
            slot: 'action',
            align: 'center',
            label: '选择'
          },
          {
            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: '计划单号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'planName',
            label: '计划名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'executeUserName',
            label: '报工人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'accepterUserName',
            label: '验收人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'accepterTime',
            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: 'inFactDuration',
            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 this.workOrderStatus.find(
                (item) => item.code == row.orderStatus
              )?.label;
            }
          }
        ],
        radio: null,
        current: {}
      };
    },

    watch: {},
    methods: {
      open(item) {
        if (item) {
          this.radio = item.id;
          this.current = item;
        }
        this.visible = true;
      },

      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return getSalesWorkOrder({
          pageNum: page,
          size: limit,
          // orderStatus: 5,
          ...where
        });
      },

      /* 刷新表格 */
      reload(where) {
        where = {
          ...where,
        };
        this.$refs.table.reload({ page: 1, where });
      },

      // 单击获取id
      cellClick(row) {
        this.current = row;
        this.radio = row.id;
      },
      handleClose() {
        this.visible = false;
        this.current = null;
        this.radio = '';
      },

      selected() {
        if (!this.current) {
          return this.$message.warning('请选择工单');
        }
        this.$emit('changeSelect', this.current);
        this.handleClose();
      }
    }
  };
</script>

<style lang="scss" scoped></style>