kd-aiot-frontend-eom/src/views/saleManage/contact/components/darwerComponents/saleOderAftersalesList.vue

<template>
  <div class="ele-body" style="width: 100%">
    <ele-pro-table
      ref="table"
      style="width: 100%"
      :columns="columns"
      :datasource="datasource"
      cache-key="systemRoleTable"
      :pageSize="20"
      :initLoad="false"
    >
    </ele-pro-table>
  </div>
</template>

<script>
  import {
    getSalesWorkOrder,
    getSalesWorkOrderById
  } from '@/api/salesServiceManagement/index';
  import { getByCode } from '@/api/system/dictionary-data';
import { init } from 'echarts';

  export default {
    props: {
      contactData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        columns: [
          {
            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
          },
          {
            slot: 'faultLevel',
            prop: 'faultLevel',
            label: '故障等级',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (row) => this.levelData[row.faultLevel] || ''
          },
          {
            prop: 'contactName',
            label: '客户名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'categoryName',
            label: '设备名称',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true,
            formatter: (row) => {
              if (!row.deviceDetails) return '';
              let str = '';
              row.deviceDetails.map((el, idx) => {
                str +=
                  idx + 1 === row.deviceDetails.length
                    ? el.categoryName
                    : `${el.categoryName},`;
              });
              return str;
            }
          },
          {
            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
          },
          {
            prop: 'totalCost',
            label: '费用( 元 )',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            columnKey: 'inFactDuration',
            label: '工时',
            align: 'center',
            resizable: false,
            showOverflowTooltip: true,
            minWidth: 120,
            formatter: (row) => {
              if (row.inFactDuration || row.inFactDuration === 0) {
                return `${((row.inFactDuration - 0) / 60).toFixed(1)} 小时`;
              }
            }
          },
          {
            prop: 'orderStatus',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (row) => {
              return this.workOrderStatus.find(
                (item) => item.code === row.orderStatus
              )?.label;
            }
          }
        ],
        workOrderStatus: [
          { code: 0, label: '待执行' },
          { code: 1, label: '已接收' },
          { code: 2, label: '执行中' },
          { code: 3, label: '待验收' },
          { code: 4, label: '待评价' },
          { code: 5, label: '已完成' },
          { code: 6, label: '验收不通过' }
        ],
        levelData: {}
      };
    },
    created() {
      this.getLevelCode('fault_level');
    },
    methods: {
       init(){
          this.$refs.table.reload({ page: 1 });
       },
      async getLevelCode(code) {
        const res = await getByCode(code);
        if (res?.code === '0') {
          const obj = {};
          res.data.forEach((el) => {
            const key = Object.keys(el)[0];
            const value = Object.values(el)[0];
            obj[key] = value;
          });
          this.levelData = obj;
        }
      },
      datasource({ page, limit, where, order }) {
        console.log('where', this.contactData.id);
        // let isDispatch = '1';
        return getSalesWorkOrder({
          pageNum: page,
          size: limit,
          ...where,
          contactId: this.contactData.id
        });
      }
      // async declarationForm(row, type) {
      //   if (type === 'view') {
      //     const detailRes = await getSalesWorkOrderById(row.id);
      //     console.log('工单详情数据：', detailRes);
      //   }
      // }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .ele-pro-table {
    .el-link {
      cursor: pointer;
    }
  }
</style>