refactor(components): 重构多个组件以提升代码质量和可维护性

云

2026-08-06 d1cf2e1b5d3f56d14e5d75024ce2d054f9142b2e

 src/views/erp/sale/order/index.vue

@@ -2,8 +2,8 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { ErpSaleOrderApi } from '#/api/erp/sale/order';

import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
@@ -19,18 +19,26 @@
  getSaleOrderPage,
  updateSaleOrderStatus,
} from '#/api/erp/sale/order';
import { generateFromSaleOrder } from '#/api/mes/wm/salesnotice';
import { $t } from '#/locales';

import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import SalesNoticeForm from '#/views/wls/salesnotice/modules/form.vue';

/** ERP 销售订单列表 */
defineOptions({ name: 'ErpSaleOrder' });

const router = useRouter();
const route = useRoute();

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
});

const [SalesNoticeFormModal, salesNoticeFormModalApi] = useVbenModal({
  connectedComponent: SalesNoticeForm,
  destroyOnClose: true,
});

@@ -136,9 +144,23 @@
function handleViewContract(row: ErpSaleOrderApi.SaleOrder) {
  if (row.contractId) {
    router.push({
      path: '/crm/contract/detail',
      query: { id: row.contractId },
      path: `/crm/contract/detail/${row.contractId}`,
    });
  }
}

/** 生成发货通知单 */
async function handleGenerateNotice(row: ErpSaleOrderApi.SaleOrder) {
  try {
    const noticeId = await generateFromSaleOrder(row.id!);
    message.success('生成发货通知单成功');
    handleRefresh();
    // 直接打开发货通知单详情弹框
    salesNoticeFormModalApi
      .setData({ formType: 'detail', id: noticeId })
      .open();
  } catch (e) {
    console.error(e);
  }
}

@@ -153,10 +175,19 @@
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          // 生产状态搜索参数转换：-1(无需生产) → needProduction=0
          const { productionStatus, ...rest } = formValues;
          const params: Record<string, any> = { ...rest };
          if (productionStatus === -1) {
            params.needProduction = 0;
          } else if (productionStatus != null) {
            params.productionStatus = productionStatus;
            params.needProduction = 1;
          }
          return await getSaleOrderPage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
            ...params,
          });
        },
      },
@@ -175,10 +206,20 @@
    checkboxChange: handleRowCheckboxChange,
  },
});

/** 处理从合同跳转过来的查询参数 */
onMounted(() => {
  const orderId = route.query.id;
  if (orderId) {
    formModalApi.setData({ formType: 'detail', id: Number(orderId) }).open();
  }
});
</script>

<template>
  <Page auto-content-height><FormModal @success="handleRefresh" />
  <Page auto-content-height>
    <FormModal @success="handleRefresh" />
    <SalesNoticeFormModal />
    <Grid table-title="销售订单列表">
      <template #toolbar-tools>
        <TableAction
@@ -232,6 +273,25 @@
        <Tag v-if="row.status === 10" color="warning">未审核</Tag>
        <Tag v-if="row.status === 20" color="success">已审核</Tag>
        <Tag v-if="row.status === 30" color="error">已作废</Tag>
      </template>
      <template #needProduction="{ row }">
        <Tag v-if="row.needProduction === 1" color="success">是</Tag>
        <Tag v-else color="default">否</Tag>
      </template>
      <template #outStatus="{ row }">
        <Tag v-if="row.outStatus === 0" color="default">未出库</Tag>
        <Tag v-else-if="row.outStatus === 1" color="processing">已预留</Tag>
        <Tag v-else-if="row.outStatus === 2" color="warning">部分出库</Tag>
        <Tag v-else-if="row.outStatus === 3" color="success">全部出库</Tag>
      </template>
      <template #productionStatus="{ row }">
        <template v-if="row.needProduction !== 1">
          <Tag color="default">无需生产</Tag>
        </template>
        <template v-else>
          <Tag v-if="row.productionStatus === 0" color="warning">未完成</Tag>
          <Tag v-else-if="row.productionStatus === 1" color="success">已完成</Tag>
        </template>
      </template>
      <template #actions="{ row }">
        <TableAction
@@ -296,6 +356,14 @@
              },
            },
            {
              label: '生成发货通知单',
              type: 'link',
              icon: 'ant-design:file-protect-outlined',
              auth: ['mes:wm-sales-notice:create'],
              ifShow: () => row.status === 20 && row.canCreateSalesNotice,
              onClick: handleGenerateNotice.bind(null, row),
            },
            {
              label: $t('common.delete'),
              type: 'link',
              danger: true,