aftermarket-mp/src/views/work/query.vue

<template>
  <PageWrapper contentBackground>
    <template #footer>
      <a-tabs v-model:activeKey="tableType" @change="changeTable">
        <a-tab-pane :key="null" :tab="t('routes.spares.tableType.-1')" />
        <a-tab-pane :key="0" :tab="t('routes.spares.tableType.0')" />
        <a-tab-pane :key="10" :tab="t('routes.spares.tableType.10')" />
        <a-tab-pane :key="20" :tab="t('routes.spares.tableType.20')" />
        <a-tab-pane :key="30" :tab="t('routes.spares.tableType.30')" />
        <a-tab-pane :key="40" :tab="t('routes.spares.tableType.40')" />
        <a-tab-pane :key="41" :tab="t('routes.spares.tableType.41')" />
        <a-tab-pane :key="50" :tab="t('routes.spares.tableType.50')" />
        <a-tab-pane :key="60" :tab="t('routes.spares.tableType.60')" />
        <a-tab-pane :key="70" :tab="t('routes.spares.tableType.70')" />
        <a-tab-pane :key="80" :tab="t('routes.spares.tableType.80')" />
        <a-tab-pane :key="82" :tab="t('routes.spares.tableType.82')" />
        <a-tab-pane :key="90" :tab="t('routes.spares.tableType.90')" />
        <a-tab-pane :key="100" :tab="t('routes.spares.tableType.100')" /> </a-tabs
    ></template>
    <div class="desc-wrap-BasicTable">
      <BasicTable @register="registerTable" v-show="tableType == null">
        <template #action="{ record }">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: '详情',
                ifShow: getCheckPerm('work_detail'),
                onClick: handleDetail.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
      <BasicTable @register="registerTable1" v-show="tableType != null">
        <template #action="{ record }">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: '详情',
                ifShow: getCheckPerm('work_detail'),
                onClick: handleDetail.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
      <recoveryModal @update="reload" @register="registerRecovery" />
      <!-- ifShow: getCheckPerm('device-out') && !Boolean(record.outType), -->
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, onActivated } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    TableImg,
    FormProps,
  } from '/@/components/Table';
  import { Tabs } from 'ant-design-vue';
  import { operateSceneList } from '/@/api/operate';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { usePermissionStore } from '/@/store/modules/permission';
  import recoveryModal from './recoveryModal.vue';
  import { useModal } from '/@/components/Modal';
  import { useRouter } from 'vue-router';
  import { queryList, faultAllList, getByRoleType } from '/@/api/spares';
  export default defineComponent({
    name: '工单查询',
    components: {
      BasicTable,
      TableAction,
      TableImg,
      recoveryModal,
      PageWrapper,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane,
    },
    setup() {
      const { t } = useI18n();
      const permissionStore = usePermissionStore();
      const router = useRouter();
      const { getCheckPerm } = permissionStore;
      const tableType = ref<Recordable>(null); //0看看 、1看见、2深时
      onMounted(() => {
        // console.log(router.currentRoute.value.params.id);
      });

      const getSchemas = (status) => {
        return [
          {
            field: 'receiverType',
            component: 'Select',
            label: '报修方式',
            colProps: {
              span: 7,
            },
            componentProps: {
              options: [
                {
                  label: '后台录单',
                  value: 0,
                  key: '0',
                },
                {
                  label: '公众号报修',
                  value: 1,
                  key: '1',
                },
              ],
            },
          },
          {
            field: 'cameraType',
            component: 'Select',
            label: t('routes.device.deviceType'),
            colProps: {
              span: 7,
            },
            componentProps: {
              options: [
                {
                  label: t('routes.device.type.1'),
                  value: 0,
                  key: '0',
                },
                {
                  label: t('routes.device.type.2'),
                  value: 1,
                  key: '1',
                },
                {
                  label: t('routes.device.type.3'),
                  value: 2,
                  key: '2',
                },
              ],
            },
          },
          {
            field: 'cameraSnCode',
            component: 'Input',
            label: 'SN码',
            colProps: {
              span: 7,
            },
          },
          {
            field: 'companyName',
            component: 'Input',
            label: '客户名称',
            colProps: {
              span: 7,
            },
          },
          {
            field: 'warrantyType',
            component: 'Select',
            label: '保修类型',
            colProps: {
              span: 7,
            },
            componentProps: {
              options: [
                {
                  label: '保内维修',
                  value: 0,
                  key: '0',
                },
                {
                  label: '保内转保外',
                  value: 1,
                  key: '1',
                },
                {
                  label: '保外维修',
                  value: 2,
                  key: '2',
                },
                {
                  label: '保外转保内',
                  value: 3,
                  key: '3',
                },
              ],
            },
          },
          {
            field: 'faultId',
            component: 'ApiSelect',
            label: '故障类型',
            componentProps: {
              maxLength: 50,
              api: faultAllList,
              numberToString: true,
              labelField: 'faultMsg',
              valueField: 'faultId',
              immediate: true,
            },
            colProps: {
              span: 7,
            },
          },
          {
            field: 'saleId',
            label: '售后工程师',
            component: 'ApiSelect',
            componentProps: {
              api: getByRoleType,
              numberToString: true,
              labelField: 'nickName',
              valueField: 'id',
              immediate: true,
              params: {
                roleType: 2,
              },
            },
            colProps: {
              span: 7,
            },
          },
          {
            field: 'repairManId',
            label: '维修工程师',
            component: 'ApiSelect',
            componentProps: {
              api: getByRoleType,
              numberToString: true,
              labelField: 'nickName',
              valueField: 'id',
              immediate: true,
              params: {
                roleType: 3,
              },
            },
            colProps: {
              span: 7,
            },
          },
          {
            field: 'status',
            component: 'Select',
            label: '工单状态',
            ifShow: Boolean(status),
            colProps: {
              span: 7,
            },
            componentProps: {
              options: [
                {
                  label: '待接单',
                  value: 0,
                  key: '0',
                },
                {
                  label: '待检测',
                  value: 10,
                  key: '1',
                },
                {
                  label: '待报价',
                  value: 20,
                  key: '2',
                },
                {
                  label: '待确认',
                  value: 30,
                  key: '3',
                },
                {
                  label: '已取消',
                  value: 40,
                  key: '4',
                },
                {
                  label: '待发件',
                  value: 41,
                  key: '41',
                },
                {
                  label: '待备料',
                  value: 50,
                  key: '5',
                },
                {
                  label: '维修中',
                  value: 60,
                  key: '6',
                },
                {
                  label: '待测试',
                  value: 70,
                  key: '7',
                },
                {
                  label: '待支付',
                  value: 80,
                  key: '8',
                },
                {
                  label: '待核账',
                  value: 82,
                  key: '82',
                },
                {
                  label: '待回收',
                  value: 90,
                  key: '9',
                },
                {
                  label: '待发货',
                  value: 100,
                  key: '10',
                },
                {
                  label: '已发货',
                  value: 110,
                  key: '11',
                },
              ],
            },
          },
          {
            field: 'payStatus',
            component: 'Select',
            ifShow: Boolean(status),
            label: '支付状态',
            colProps: {
              span: 7,
            },
            componentProps: {
              options: [
                {
                  label: '待支付',
                  value: 0,
                  key: '0',
                },
                {
                  label: '已支付',
                  value: 1,
                  key: '1',
                },
              ],
            },
          },
          {
            field: 'commentStatus',
            component: 'Select',
            ifShow: Boolean(status),
            label: '评价状态',
            colProps: {
              span: 7,
            },
            componentProps: {
              options: [
                {
                  label: '未评论',
                  value: 0,
                  key: '0',
                },
                {
                  label: '已评论',
                  value: 1,
                  key: '1',
                },
              ],
            },
          },
          {
            field: 'repairId',
            component: 'Input',
            label: '工单号',
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
          {
            field: 'timeList',
            label: '报修日期',
            component: 'RangePicker',
            componentProps: {
              maxLength: 100,
              format: 'YYYY-MM-DD',
              valueFormat: 'YYYY-MM-DD',
              showTime: true,
            },
            colProps: {
              span: 7,
            },
          },
        ];
      };
      const columns: BasicColumn[] = [
        {
          title: '报修日期',
          dataIndex: 'createTime',
          width: 180,
        },
        {
          title: '客户名称',
          dataIndex: 'companyName',
          width: 80,
          // customRender: ({ record }) => {
          //   return t(`routes.equity.operation.${record.operationType || 0}`);
          // },
        },
        {
          title: '产品类型',
          dataIndex: 'cameraType',
          width: 80,
          customRender: ({ record }) => {
            return t(`routes.scene.tableType.${record.cameraType}`);
          },
        },
        {
          title: '产品SN码',
          dataIndex: 'cameraSnCode',
          width: 100,
        },
        {
          title: '报修方式',
          dataIndex: 'receiverType',
          width: 100,
          customRender: ({ record }) => {
            return record.receiverType == 0 ? '系统录单' : '公众号报修';
          },
        },
        {
          title: '保修类型',
          dataIndex: 'warrantyType',
          width: 100,
          customRender: ({ record }) => {
            return t(`routes.spares.warrantyType.${record.warrantyType}`);
          },
        },
        {
          title: '售后工程师',
          dataIndex: 'saleName',
          width: 100,
        },
        {
          title: '接单日期',
          dataIndex: 'orderReceivingTime',
          width: 150,
        },
        {
          title: '故障分析',
          dataIndex: 'checkResult',
          width: 100,
        },
        {
          title: '维修工程师',
          dataIndex: 'repairManName',
          width: 100,
        },
        {
          title: '维修完成日期',
          dataIndex: 'repairOverTime',
          width: 150,
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 100,
          customRender: ({ record }) => {
            return t(`routes.spares.tableType.${record.status || 0}`);
          },
        },
        {
          title: '维修单号',
          dataIndex: 'repairId',
          width: 180,
        },
        {
          title: t('common.operating'),
          dataIndex: 'action',
          slots: { customRender: 'action' },
          ifShow: true,
          fixed: 'right',
          flag: 'ACTION',
          width: 120,
        },
      ];
      const searchForm: Partial<FormProps> = {
        labelWidth: 120,
        autoAdvancedLine: 1,
        actionColOptions: {
          span: 24,
        },
        schemas: getSchemas(true),
      };

      const searchForm1: Partial<FormProps> = {
        labelWidth: 120,
        autoAdvancedLine: 1,
        actionColOptions: {
          span: 24,
        },
        schemas: getSchemas(false),
      };
      const [registerRecovery, { openModal }] = useModal();
      const [registerTable, { reload: reload0 }] = useTable({
        api: queryList,
        columns: columns,
        useSearchForm: true,
        // searchInfo: { status: tableType },
        formConfig: searchForm,
        showTableSetting: true,
        showIndexColumn: false,
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        canResize: false,
      });
      const [registerTable1, { reload: reload1 }] = useTable({
        api: queryList,
        columns: columns,
        useSearchForm: true,
        searchInfo: { status: tableType },
        formConfig: searchForm1,
        showTableSetting: true,
        showIndexColumn: false,
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        canResize: false,
      });
      onActivated(() => {
        reload();
      });
      const reload = () => {
        reload1();
        reload0();
      };
      async function handleDetail(record: Recordable) {
        console.log('record', record);
        router.push({ path: `detail/${record.repairId || '20230215174919387'}` });
      }
      async function handleRecover(record: Recordable) {
        openModal(true, {
          ...record,
        });
      }
      function changeTable(val: string) {
        tableType.value = val;
        reload();
      }
      return {
        registerTable,
        registerTable1,
        reload,
        t,
        tableType,
        changeTable,
        getCheckPerm,
        handleDetail,
        handleRecover,
        registerRecovery,
      };
    },
  });
</script>
<style lang="less" scoped>
  .desc-wrap-BasicTable {
    background-color: #f0f2f5;
    .vben-basic-table-form-container {
      padding: 0;
    }
  }
</style>