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="1" :tab="t('routes.spares.tableType.1')" />
        <a-tab-pane :key="2" :tab="t('routes.spares.tableType.2')" />
        <a-tab-pane :key="3" :tab="t('routes.spares.tableType.3')" />
        <a-tab-pane :key="4" :tab="t('routes.spares.tableType.4')" />
        <a-tab-pane :key="5" :tab="t('routes.spares.tableType.5')" />
        <a-tab-pane :key="6" :tab="t('routes.spares.tableType.6')" />
        <a-tab-pane :key="7" :tab="t('routes.spares.tableType.7')" />
        <a-tab-pane :key="8" :tab="t('routes.spares.tableType.8')" />
        <a-tab-pane :key="9" :tab="t('routes.spares.tableType.9')" />
        <a-tab-pane :key="10" :tab="t('routes.spares.tableType.10')" />
      </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: 'customerName',
          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',
              },
            ],
          },
        },{
          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: 1,
                key: '1',
              },{
                label: '待报价',
                value: 2,
                key: '2',
              },{
                label: '待确认',
                value: 3,
                key: '3',
              },{
                label: '已取消',
                value: 4,
                key: '4',
              },{
                label: '待备料',
                value: 5,
                key: '5',
              },{
                label: '维修中',
                value: 6,
                key: '6',
              },{
                label: '待回收',
                value: 7,
                key: '7',
              },{
                label: '待测试',
                value: 8,
                key: '8',
              },{
                label: '待支付',
                value: 9,
                key: '9',
              },{
                label: '待发货',
                value: 10,
                key: '10',
              },{
                label: '已发货',
                value: 11,
                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: 'customerName',
        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 || 0}`);
        },
      },
      {
        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 record.warrantyType == 0 ? '保修期内' : record.warrantyType == 1 ? '保修期外' : '非保修项目';
        },
      },{
        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>