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

<template>
  <PageWrapper contentBackground>
    <template #footer>
      <a-tabs v-model:activeKey="tableType" @change="changeTable">
        <a-tab-pane :key="0" :tab="t('routes.spares.tableType.0')" />
        <a-tab-pane :key="1" :tab="t('routes.spares.tableType.21')" />
        <a-tab-pane :key="2" :tab="t('routes.spares.tableType.23')" /> </a-tabs
    ></template>
    <div class="desc-wrap-BasicTable">
      <BasicTable @register="registerTable">
        <template #toolbar>
          <a-button type="primary" @click="handleOrder" v-if="getCheckPerm('work_Add')">
            录单</a-button
          >
        </template>
        <template #action="{ record }">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: '详情',
                ifShow: getCheckPerm('work_detail'),
                onClick: handleDetail.bind(null, record),
              },
              {
                label: '接单',
                ifShow: getCheckPerm('work_orderTakers') && record.status == 0,
                onClick: handleRecover.bind(null, record),
              },
              {
                label: '报价',
                ifShow: getCheckPerm('work_quotedPrice') && record.status == 20,
                onClick: handleQuote.bind(null, record),
              },
              {
                label: '修改报价',
                ifShow: getCheckPerm('work_setPrice') && record.status == 30,
                onClick: handleQuote.bind(null, record),
              },
              {
                label: '确认报价',
                ifShow:
                  getCheckPerm('work_confirmPrice') &&
                  record.status == 30 &&
                  record.receiverType == 0,
                onClick: handleConfirmPrice.bind(null, record),
              },
              {
                label: '付款登记',
                ifShow:
                  getCheckPerm('work_payments') && (record.status == 80 || record.status == 40),
                onClick: handlePayLog.bind(null, record),
              },
              {
                label: '发货登记',
                ifShow: getCheckPerm('work_dispatched') && record.status == 100,
                onClick: handleDelivery.bind(null, record),
              },
              {
                label: '备注',
                ifShow: getCheckPerm('work_mark'),
                onClick: handleRemarks.bind(null, record),
              },
              {
                label: '开票信息',
                ifShow: getCheckPerm('work_mark') && record.status > 80 && record.warrantyType != 0 && record.warrantyType != 3 && record.payAmount != 0 && record.invoiceStatus == 0,
                onClick: handleInvoice.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
      <recoveryModal @update="reload" @register="registerRecovery" />
      <remarksModal @update="reload" @register="registerRemarks" />
      <takingOrdersModel @update="reload" @register="registerTakingOrders" />
      <quoteModel @update="reload" @register="registerQuote" />
      <deliveryModal @update="reload" @register="registerDelivery" />
      <payLogModal @update="reload" @register="registerPayLog" />
      <confirmPriceModal @update="reload" @register="registerConfirmPrice" />
      <invoiceModal @update="reload" @register="registerInvoice" />
      <!-- ifShow: getCheckPerm('device-out') && !Boolean(record.outType), -->
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, onMounted, onActivated, ref } 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 quoteModel from './quoteModel.vue';
  import deliveryModal from './deliveryModal.vue';
  import payLogModal from './payLogModal.vue';
  import invoiceModal from './invoiceModal.vue';
  import takingOrdersModel from './takingOrdersModel.vue';
  import remarksModal from '../spares/remarksModal.vue';
  import confirmPriceModal from './confirmPriceModal.vue';
  import { useModal } from '/@/components/Modal';
  import { useRouter } from 'vue-router';
  import { saleOrderList } from '/@/api/spares';
  export default defineComponent({
    name: '工单跟进',
    components: {
      BasicTable,
      TableAction,
      TableImg,
      recoveryModal,
      takingOrdersModel,
      remarksModal,
      deliveryModal,
      payLogModal,
      confirmPriceModal,
      quoteModel,
      invoiceModal,
      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>(0); //0看看 、1看见、2深时
      onMounted(() => {
        console.log(1);
      });
      const columns: BasicColumn[] = [
        {
          title: '报修日期',
          dataIndex: 'createTime',
          width: 180,
        },
        {
          title: '客户名称',
          dataIndex: 'companyName',
          width: 100,
        },
        {
          title: '产品类型',
          dataIndex: 'cameraType',
          width: 100,
          customRender: ({ record }) => {
            return t(`routes.scene.tableType.${record.cameraType}`);
          },
        },
        {
          title: '产品SN码',
          dataIndex: 'cameraSnCode',
          width: 120,
        },
        {
          title: '故障描述',
          dataIndex: 'faultMsg',
          width: 100,
        },
        {
          title: '送修方式',
          dataIndex: 'sendType',
          width: 100,
          customRender: ({ record }) => {
            return record.sendType == 0 ? '前台送修' : '快递寄送';
          },
        },
        {
          title: '快递单号',
          dataIndex: 'sendTrackingNum',
          width: 150,
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 100,
          customRender: ({ record }) => {
            return t(`routes.spares.tableType.${record.status || 0}`);
          },
        },
        {
          title: '工单号',
          dataIndex: 'repairId',
          width: 150,
        },
        {
          title: '需要开票',
          dataIndex: 'invoiceStatus',
          width: 80,
          customRender: ({ record }) => {
            return record.invoiceStatus == 0 ? '否' : '是';
          },
        },
        {
          title: t('common.operating'),
          dataIndex: 'action',
          slots: { customRender: 'action' },
          ifShow: true,
          fixed: 'right',
          flag: 'ACTION',
          width: 240,
        },
      ];
      const searchForm: Partial<FormProps> = {
        labelWidth: 120,
        autoAdvancedLine: 1,
        actionColOptions: {
          span: 24,
        },
        schemas: [
          {
            field: 'companyName',
            component: 'Input',
            label: '客户名称',
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
          {
            field: 'cameraSnCode',
            component: 'Input',
            label: t('routes.device.snCode'),
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
          {
            field: 'trackingNum',
            component: 'Input',
            label: '快递单号',
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
          {
            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: {
              xl: 7,
              xxl: 7,
            },
          },
        ],
      };
      const [registerRecovery, { openModal }] = useModal();
      const [registerQuote, { openModal: openQuoteModal }] = useModal();
      const [registerConfirmPrice, { openModal: openConfirmPriceModal }] = useModal();
      const [registerPayLog, { openModal: openPayLogModal }] = useModal();
      const [registerDelivery, { openModal: openDeliveryModal }] = useModal();
      const [registerTakingOrders, { openModal: openTakingOrders }] = useModal();
      const [registerRemarks, { openModal: openRemarksModal }] = useModal();
      const [registerInvoice, { openModal: openInvoiceModal }] = useModal();
      const [registerTable, { reload }] = useTable({
        api: saleOrderList,
        columns: columns,
        useSearchForm: true,
        searchInfo: { statusParam: tableType },
        formConfig: searchForm,
        showTableSetting: true,
        showIndexColumn: false,
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        canResize: false,
      });
      async function handleDetail(record: Recordable) {
        console.log('record', record);
        router.push({ path: `detail/${record.repairId || '20230215174919387'}` });
      }
      async function handleRecover(record: Recordable) {
        openTakingOrders(true, {
          ...record,
        });
      }
      function handleRemarks(record: Recordable) {
        openRemarksModal(true, record);
      }
      function handleInvoice(record: Recordable) {
        openInvoiceModal(true, record);
      }
      function handlePayLog(record: Recordable) {
        openPayLogModal(true, record);
      }
      function handleConfirmPrice(record: Recordable) {
        openConfirmPriceModal(true, record);
      }
      function handleDelivery(record: Recordable) {
        openDeliveryModal(true, record);
      }
      function handleOrder() {
        openModal(true, {});
      }
      function handleQuote(record: Recordable) {
        openQuoteModal(true, record);
      }
      function changeTable(val: string) {
        tableType.value = val;
        reload();
      }
      onActivated(() => {
        reload();
      });
      return {
        registerTable,
        reload,
        t,
        tableType,
        registerRemarks,
        registerPayLog,
        registerInvoice,
        registerDelivery,
        registerConfirmPrice,
        changeTable,
        handleOrder,
        getCheckPerm,
        handleDetail,
        handleQuote,
        registerTakingOrders,
        handleRecover,
        handleConfirmPrice,
        handlePayLog,
        handleDelivery,
        handleRemarks,
        handleInvoice,
        registerQuote,
        registerRecovery,
      };
    },
  });
</script>
<style lang="less" scoped>
  .desc-wrap-BasicTable {
    background-color: #f0f2f5;
    .vben-basic-table-form-container {
      padding: 0;
    }
  }
</style>