feat：【antd】【crm】优化合同的整体代码风格

2025-09-29 09:16:16 +08:00
parent 876768e98d
commit a4aa2b7711
23 changed files with 120 additions and 215 deletions
--- a/apps/web-antd/src/views/crm/business/detail/index.vue
+++ b/apps/web-antd/src/views/crm/business/detail/index.vue
@@ -17,7 +17,7 @@ import { useDescription } from '#/components/description';
 import { OperateLog } from '#/components/operate-log';
 import { $t } from '#/locales';
 import { ContactDetailsList } from '#/views/crm/contact/components';
-import { ContractDetailsList } from '#/views/crm/contract';
+import { ContractDetailsList } from '#/views/crm/contract/components';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
 import { ProductDetailsList } from '#/views/crm/product/components';
--- a/apps/web-antd/src/views/crm/business/index.vue
+++ b/apps/web-antd/src/views/crm/business/index.vue
@@ -67,7 +67,7 @@ async function handleDelete(row: CrmBusinessApi.Business) {
    duration: 0,
  });
  try {
-    await deleteBusiness(row.id as number);
+    await deleteBusiness(row.id!);
    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
    handleRefresh();
  } finally {
--- a/apps/web-antd/src/views/crm/business/status/index.vue
+++ b/apps/web-antd/src/views/crm/business/status/index.vue
@@ -43,7 +43,7 @@ async function handleDelete(row: CrmBusinessStatusApi.BusinessStatus) {
    duration: 0,
  });
  try {
-    await deleteBusinessStatus(row.id as number);
+    await deleteBusinessStatus(row.id!);
    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
    handleRefresh();
  } catch {
--- a/apps/web-antd/src/views/crm/clue/index.vue
+++ b/apps/web-antd/src/views/crm/clue/index.vue
@@ -56,7 +56,7 @@ async function handleDelete(row: CrmClueApi.Clue) {
    duration: 0,
  });
  try {
-    await deleteClue(row.id as number);
+    await deleteClue(row.id!);
    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
    handleRefresh();
  } catch {
--- a/apps/web-antd/src/views/crm/contact/index.vue
+++ b/apps/web-antd/src/views/crm/contact/index.vue
@@ -67,7 +67,7 @@ async function handleDelete(row: CrmContactApi.Contact) {
    duration: 0,
  });
  try {
-    await deleteContact(row.id as number);
+    await deleteContact(row.id!);
    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
    handleRefresh();
  } finally {
--- a/apps/web-antd/src/views/crm/contract/components/detail-list.vue
+++ b/apps/web-antd/src/views/crm/contract/components/detail-list.vue
@@ -1,3 +1,4 @@
+<!-- 合同列表：用于【客户】【商机】【联系人】详情中，展示它们关联的合同列表 -->
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmContractApi } from '#/api/crm/contract';
@@ -17,8 +18,8 @@ import {
 import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';

-import { useDetailListColumns } from './data';
 import Form from '../modules/form.vue';
+import { useDetailListColumns } from './data';

 const props = defineProps<{
  bizId: number; // 业务编号
@@ -32,6 +33,7 @@ const [FormModal, formModalApi] = useVbenModal({
  destroyOnClose: true,
 });

+/** 已选择的合同 */
 const checkedRows = ref<CrmContractApi.Contract[]>();
 function setCheckedRows({ records }: { records: CrmContractApi.Contract[] }) {
  checkedRows.value = records;
@@ -90,6 +92,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
--- a/apps/web-antd/src/views/crm/contract/data.ts
+++ b/apps/web-antd/src/views/crm/contract/data.ts
@@ -282,73 +282,78 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      title: '合同编号',
      field: 'no',
-      minWidth: 150,
+      minWidth: 180,
      fixed: 'left',
    },
    {
      title: '合同名称',
      field: 'name',
-      minWidth: 220,
+      minWidth: 160,
      fixed: 'left',
      slots: { default: 'name' },
    },
    {
      title: '客户名称',
      field: 'customerName',
-      minWidth: 240,
+      minWidth: 120,
      slots: { default: 'customerName' },
    },
    {
      title: '商机名称',
      field: 'businessName',
-      minWidth: 220,
+      minWidth: 130,
      slots: { default: 'businessName' },
    },
    {
      title: '合同金额（元）',
      field: 'totalPrice',
-      minWidth: 150,
+      minWidth: 140,
      formatter: 'formatAmount2',
    },
    {
      title: '下单时间',
      field: 'orderDate',
-      minWidth: 150,
+      minWidth: 120,
      formatter: 'formatDateTime',
    },
    {
      title: '合同开始时间',
      field: 'startTime',
-      minWidth: 150,
+      minWidth: 120,
      formatter: 'formatDateTime',
    },
    {
      title: '合同结束时间',
      field: 'endTime',
-      minWidth: 150,
+      minWidth: 120,
      formatter: 'formatDateTime',
    },
    {
      title: '客户签约人',
      field: 'signContactName',
-      minWidth: 150,
+      minWidth: 130,
      slots: { default: 'signContactName' },
    },
    {
      title: '公司签约人',
      field: 'signUserName',
-      minWidth: 150,
+      minWidth: 130,
+    },
+    {
+      title: '备注',
+      field: 'remark',
+      minWidth: 200,
    },
    {
      title: '已回款金额（元）',
      field: 'totalReceivablePrice',
-      minWidth: 150,
+      minWidth: 140,
      formatter: 'formatAmount2',
    },
    {
      title: '未回款金额（元）',
-      field: 'unpaidPrice',
-      minWidth: 150,
+      field: 'totalReceivablePrice',
+      minWidth: 140,
      formatter: ({ row }) => {
        return erpPriceInputFormatter(
          row.totalPrice - row.totalReceivablePrice,
@@ -358,46 +363,41 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      title: '最后跟进时间',
      field: 'contactLastTime',
-      minWidth: 150,
+      minWidth: 180,
      formatter: 'formatDateTime',
    },
    {
      title: '负责人',
      field: 'ownerUserName',
-      minWidth: 150,
+      minWidth: 120,
    },
    {
      title: '所属部门',
      field: 'ownerUserDeptName',
-      minWidth: 150,
+      minWidth: 100,
    },
    {
      title: '更新时间',
      field: 'updateTime',
-      minWidth: 150,
+      minWidth: 180,
      formatter: 'formatDateTime',
    },
    {
      title: '创建时间',
      field: 'createTime',
-      minWidth: 150,
+      minWidth: 180,
      formatter: 'formatDateTime',
    },
    {
      title: '创建人',
      field: 'creatorName',
-      minWidth: 150,
-    },
-    {
-      title: '备注',
-      field: 'remark',
-      minWidth: 150,
+      minWidth: 120,
    },
    {
      title: '合同状态',
      field: 'auditStatus',
      fixed: 'right',
-      minWidth: 100,
+      minWidth: 120,
      cellRender: {
        name: 'CellDict',
        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
@@ -407,7 +407,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
      title: '操作',
      field: 'actions',
      fixed: 'right',
-      width: 130,
+      minWidth: 130,
      slots: { default: 'actions' },
    },
  ];
--- a/apps/web-antd/src/views/crm/contract/detail/data.ts
+++ b/apps/web-antd/src/views/crm/contract/detail/data.ts
@@ -1,4 +1,3 @@
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';

 import { h } from 'vue';
@@ -7,6 +6,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';

 import { DictTag } from '#/components/dict-tag';
+
 /** 详情头部的配置 */
 export function useDetailSchema(): DescriptionItemSchema[] {
  return [
@@ -99,91 +99,3 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
    },
  ];
 }
-
-export function useDetailListColumns(): VxeTableGridOptions['columns'] {
-  return [
-    {
-      title: '合同编号',
-      field: 'no',
-      minWidth: 150,
-      fixed: 'left',
-    },
-    {
-      title: '合同名称',
-      field: 'name',
-      minWidth: 150,
-      fixed: 'left',
-      slots: { default: 'name' },
-    },
-    {
-      title: '合同金额（元）',
-      field: 'totalPrice',
-      minWidth: 150,
-      formatter: 'formatAmount2',
-    },
-    {
-      title: '合同开始时间',
-      field: 'startTime',
-      minWidth: 150,
-      formatter: 'formatDateTime',
-    },
-    {
-      title: '合同结束时间',
-      field: 'endTime',
-      minWidth: 150,
-      formatter: 'formatDateTime',
-    },
-    {
-      title: '已回款金额（元）',
-      field: 'totalReceivablePrice',
-      minWidth: 150,
-      formatter: 'formatAmount2',
-    },
-    {
-      title: '未回款金额（元）',
-      field: 'unpaidPrice',
-      minWidth: 150,
-      formatter: ({ row }) => {
-        return erpPriceInputFormatter(
-          row.totalPrice - row.totalReceivablePrice,
-        );
-      },
-    },
-    {
-      title: '负责人',
-      field: 'ownerUserName',
-      minWidth: 150,
-    },
-    {
-      title: '所属部门',
-      field: 'ownerUserDeptName',
-      minWidth: 150,
-    },
-    {
-      title: '创建时间',
-      field: 'createTime',
-      minWidth: 150,
-      formatter: 'formatDateTime',
-    },
-    {
-      title: '创建人',
-      field: 'creatorName',
-      minWidth: 150,
-    },
-    {
-      title: '备注',
-      field: 'remark',
-      minWidth: 150,
-    },
-    {
-      title: '合同状态',
-      field: 'auditStatus',
-      fixed: 'right',
-      minWidth: 100,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_AUDIT_STATUS },
-      },
-    },
-  ];
-}
--- a/apps/web-antd/src/views/crm/contract/detail/index.vue
+++ b/apps/web-antd/src/views/crm/contract/detail/index.vue
@@ -2,22 +2,21 @@
 import type { CrmContractApi } from '#/api/crm/contract';
 import type { SystemOperateLogApi } from '#/api/system/operate-log';

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

 import { Page, useVbenModal } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
-import { ArrowLeft } from '@vben/icons';

-import { Button, Card, Tabs } from 'ant-design-vue';
+import { Card, Tabs } from 'ant-design-vue';

 import { getContract } from '#/api/crm/contract';
 import { getOperateLogPage } from '#/api/crm/operateLog';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
-import { AsyncOperateLog } from '#/components/operate-log';
-import ContractDetailsInfo from './modules/info.vue';
-import ContractForm from '../modules/form.vue';
+import { OperateLog } from '#/components/operate-log';
+import { ACTION_ICON, TableAction } from '#/components/table-action';
+import { $t } from '#/locales';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
 import { ProductDetailsList } from '#/views/crm/product/components';
@@ -26,26 +25,20 @@ import {
  ReceivablePlanDetailsList,
 } from '#/views/crm/receivable';

+import Form from '../modules/form.vue';
 import { useDetailSchema } from './data';
-
-const loading = ref(false);
+import ContractDetailsInfo from './modules/info.vue';

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

-const contractId = ref(0);
-
-const contract = ref<CrmContractApi.Contract>({} as CrmContractApi.Contract);
-const contractLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const loading = ref(false); // 加载中
+const contractId = ref(0); // 合同编号
+const contract = ref<CrmContractApi.Contract>({} as CrmContractApi.Contract); // 合同详情
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 const permissionListRef = ref<InstanceType<typeof PermissionList>>(); // 团队成员列表 Ref

-// 校验负责人权限和编辑权限
-const validateOwnerUser = computed(
-  () => permissionListRef.value?.validateOwnerUser,
-);
-const validateWrite = computed(() => permissionListRef.value?.validateWrite);
-
 const [Descriptions] = useDescription({
  componentProps: {
    bordered: false,
@@ -56,7 +49,7 @@ const [Descriptions] = useDescription({
 });

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

@@ -68,15 +61,17 @@ const [TransferModal, transferModalApi] = useVbenModal({
 /** 加载合同详情 */
 async function loadContractDetail() {
  loading.value = true;
-  const data = await getContract(contractId.value);
-  contract.value = data;
-  // 操作日志
-  const logList = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_CONTRACT,
-    bizId: contractId.value,
-  });
-  contractLogList.value = logList.list;
-  loading.value = false;
+  try {
+    contract.value = await getContract(contractId.value);
+    // 操作日志
+    const res = await getOperateLogPage({
+      bizType: BizTypeEnum.CRM_CONTRACT,
+      bizId: contractId.value,
+    });
+    logList.value = res.list;
+  } finally {
+    loading.value = false;
+  }
 }

 /** 返回列表页 */
@@ -85,17 +80,17 @@ function handleBack() {
  router.push('/crm/contract');
 }

-/** 编辑 */
+/** 编辑合同 */
 function handleEdit() {
  formModalApi.setData({ id: contractId.value }).open();
 }

-/** 转移 */
+/** 转移合同 */
 function handleTransfer() {
  transferModalApi.setData({ bizType: BizTypeEnum.CRM_CONTRACT }).open();
 }

-// 加载数据
+/** 加载数据 */
 onMounted(() => {
  contractId.value = Number(route.params.id);
  loadContractDetail();
@@ -107,42 +102,54 @@ onMounted(() => {
    <FormModal @success="loadContractDetail" />
    <TransferModal @success="loadContractDetail" />
    <template #extra>
-      <div class="flex items-center gap-2">
-        <Button @click="handleBack">
-          <ArrowLeft class="size-5" />
-          返回
-        </Button>
-        <Button
-          v-if="validateWrite"
-          type="primary"
-          @click="handleEdit"
-          v-access:code="['crm:contract:update']"
-        >
-          {{ $t('ui.actionTitle.edit') }}
-        </Button>
-        <Button v-if="validateOwnerUser" type="primary" @click="handleTransfer">
-          转移
-        </Button>
-      </div>
+      <TableAction
+        :actions="[
+          {
+            label: '返回',
+            type: 'default',
+            icon: 'lucide:arrow-left',
+            onClick: handleBack,
+          },
+          {
+            label: $t('ui.actionTitle.edit'),
+            type: 'primary',
+            icon: ACTION_ICON.EDIT,
+            auth: ['crm:contract:update'],
+            ifShow: permissionListRef?.validateWrite,
+            onClick: handleEdit,
+          },
+          {
+            label: '转移',
+            type: 'primary',
+            ifShow: permissionListRef?.validateOwnerUser,
+            onClick: handleTransfer,
+          },
+        ]"
+      />
    </template>
    <Card class="min-h-[10%]">
      <Descriptions :data="contract" />
    </Card>
    <Card class="mt-4 min-h-[60%]">
      <Tabs>
-        <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
-          <ContractDetailsInfo :contract="contract" />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="合同跟进" key="2" :force-render="true">
+        <Tabs.TabPane tab="合同跟进" key="1" :force-render="true">
          <FollowUp :biz-id="contractId" :biz-type="BizTypeEnum.CRM_CONTRACT" />
        </Tabs.TabPane>
+        <Tabs.TabPane tab="详细资料" key="2" :force-render="true">
+          <ContractDetailsInfo :contract="contract" />
+        </Tabs.TabPane>
        <Tabs.TabPane tab="产品" key="3" :force-render="true">
          <ProductDetailsList
            :biz-id="contractId"
            :biz-type="BizTypeEnum.CRM_CONTRACT"
          />
        </Tabs.TabPane>
-        <Tabs.TabPane tab="回款" key="4" :force-render="true">
+        <Tabs.TabPane
+          tab="回款"
+          key="4"
+          :force-render="true"
+          v-if="contract.customerId"
+        >
          <ReceivablePlanDetailsList
            :contract-id="contractId"
            :customer-id="contract.customerId"
@@ -162,7 +169,7 @@ onMounted(() => {
          />
        </Tabs.TabPane>
        <Tabs.TabPane tab="操作日志" key="6" :force-render="true">
-          <AsyncOperateLog :log-list="contractLogList" />
+          <OperateLog :log-list="logList" />
        </Tabs.TabPane>
      </Tabs>
    </Card>
--- a/apps/web-antd/src/views/crm/contract/index.ts
+++ b/apps/web-antd/src/views/crm/contract/index.ts
@@ -1,5 +0,0 @@
-import { defineAsyncComponent } from 'vue';
-
-export const ContractDetailsList = defineAsyncComponent(
-  () => import('./components/detail-list.vue'),
-);
--- a/apps/web-antd/src/views/crm/contract/index.vue
+++ b/apps/web-antd/src/views/crm/contract/index.vue
@@ -31,7 +31,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });

 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
  gridApi.query();
 }

@@ -68,11 +68,9 @@ async function handleDelete(row: CrmContractApi.Contract) {
    duration: 0,
  });
  try {
-    await deleteContract(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
-    onRefresh();
+    await deleteContract(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
  } finally {
    hideLoading();
  }
@@ -85,11 +83,9 @@ async function handleSubmit(row: CrmContractApi.Contract) {
    duration: 0,
  });
  try {
-    await submitContract(row.id as number);
-    message.success({
-      content: '提交审核成功',
-    });
-    onRefresh();
+    await submitContract(row.id!);
+    message.success('提交审核成功');
+    handleRefresh();
  } finally {
    hideLoading();
  }
@@ -145,6 +141,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
@@ -167,7 +164,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
      />
    </template>

-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
    <Grid>
      <template #top>
        <Tabs class="-mt-11" @change="handleChangeSceneType">
@@ -227,8 +224,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
              onClick: handleEdit.bind(null, row),
              ifShow: row.auditStatus === 0,
            },
-          ]"
-          :drop-down-actions="[
            {
              label: '提交审核',
              type: 'link',
@@ -243,12 +238,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
              onClick: handleProcessDetail.bind(null, row),
              ifShow: row.auditStatus !== 0,
            },
-            {
-              label: $t('common.detail'),
-              type: 'link',
-              auth: ['crm:contract:query'],
-              onClick: handleDetail.bind(null, row),
-            },
            {
              label: $t('common.delete'),
              type: 'link',
--- a/apps/web-antd/src/views/crm/contract/modules/form.vue
+++ b/apps/web-antd/src/views/crm/contract/modules/form.vue
@@ -27,6 +27,7 @@ const getTitle = computed(() => {
    : $t('ui.actionTitle.create', ['合同']);
 });

+/** 更新产品列表 */
 function handleUpdateProducts(products: any) {
  formData.value = modalApi.getData<CrmContractApi.Contract>();
  formData.value!.products = products;
@@ -89,8 +90,6 @@ const [Modal, modalApi] = useVbenModal({
    // 加载数据
    const data = modalApi.getData<CrmContractApi.Contract>();
    if (!data || !data.id) {
-      // 设置到 values
-      await formApi.setValues(data);
      return;
    }
    modalApi.lock();
--- a/apps/web-antd/src/views/crm/customer/detail/index.vue
+++ b/apps/web-antd/src/views/crm/customer/detail/index.vue
@@ -25,7 +25,7 @@ import { ACTION_ICON, TableAction } from '#/components/table-action';
 import { $t } from '#/locales';
 import { BusinessDetailsList } from '#/views/crm/business/components';
 import { ContactDetailsList } from '#/views/crm/contact/components';
-import { ContractDetailsList } from '#/views/crm/contract';
+import { ContractDetailsList } from '#/views/crm/contract/components';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
 import {
--- a/apps/web-antd/src/views/crm/customer/index.vue
+++ b/apps/web-antd/src/views/crm/customer/index.vue
@@ -78,7 +78,7 @@ async function handleDelete(row: CrmCustomerApi.Customer) {
    duration: 0,
  });
  try {
-    await deleteCustomer(row.id as number);
+    await deleteCustomer(row.id!);
    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
    handleRefresh();
  } finally {
--- a/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/index.vue
@@ -62,7 +62,7 @@ async function handleDelete(
    duration: 0,
  });
  try {
-    await deleteCustomerLimitConfig(row.id as number);
+    await deleteCustomerLimitConfig(row.id!);
    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
    handleRefresh();
  } finally {
--- a/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
+++ b/apps/web-antd/src/views/crm/permission/modules/permission-list.vue
@@ -101,7 +101,7 @@ function handleDelete() {
    })
      .then(async () => {
        const res = await deletePermissionBatch(
-          checkedRows.value.map((item) => item.id as number),
+          checkedRows.value.map((item) => item.id!),
        );
        if (res) {
          // 提示并返回成功
@@ -140,7 +140,7 @@ async function handleQuit() {
    message.warning('你不是团队成员！');
    return;
  }
-  await deleteSelfPermission(userPermission.id as number);
+  await deleteSelfPermission(userPermission.id!);
  message.success('退出团队成员成功！');
  emits('quitTeam');
 }
--- a/apps/web-antd/src/views/crm/product/category/index.vue
+++ b/apps/web-antd/src/views/crm/product/category/index.vue
@@ -57,7 +57,7 @@ async function handleDelete(row: CrmProductCategoryApi.ProductCategory) {
    duration: 0,
  });
  try {
-    await deleteProductCategory(row.id as number);
+    await deleteProductCategory(row.id!);
    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
    handleRefresh();
  } finally {
--- a/apps/web-antd/src/views/crm/product/index.vue
+++ b/apps/web-antd/src/views/crm/product/index.vue
@@ -60,7 +60,7 @@ async function handleDelete(row: CrmProductApi.Product) {
    duration: 0,
  });
  try {
-    await deleteProduct(row.id as number);
+    await deleteProduct(row.id!);
    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
    handleRefresh();
  } finally {
--- a/apps/web-antd/src/views/crm/receivable/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/index.vue
@@ -58,7 +58,7 @@ async function handleDelete(row: CrmReceivableApi.Receivable) {
    duration: 0,
  });
  try {
-    await deleteReceivable(row.id as number);
+    await deleteReceivable(row.id!);
    message.success({
      content: $t('ui.actionMessage.deleteSuccess', [row.no]),
    });
@@ -75,7 +75,7 @@ async function handleSubmit(row: CrmReceivableApi.Receivable) {
    duration: 0,
  });
  try {
-    await submitReceivable(row.id as number);
+    await submitReceivable(row.id!);
    message.success({
      content: '提交审核成功',
    });
--- a/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/receivable/modules/detail-list.vue
@@ -53,7 +53,7 @@ async function handleDelete(row: CrmReceivableApi.Receivable) {
    duration: 0,
  });
  try {
-    await deleteReceivable(row.id as number);
+    await deleteReceivable(row.id!);
    message.success({
      content: $t('ui.actionMessage.deleteSuccess', [row.no]),
    });
--- a/apps/web-antd/src/views/crm/receivable/modules/form.vue
+++ b/apps/web-antd/src/views/crm/receivable/modules/form.vue
@@ -73,7 +73,7 @@ const [Modal, modalApi] = useVbenModal({
    modalApi.lock();
    try {
      if (receivable) {
-        formData.value = await getReceivable(receivable.id as number);
+        formData.value = await getReceivable(receivable.id!);
      } else if (plan) {
        formData.value = plan.id
          ? {
--- a/apps/web-antd/src/views/crm/receivable/plan/index.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/index.vue
@@ -63,7 +63,7 @@ async function handleDelete(row: CrmReceivablePlanApi.Plan) {
    duration: 0,
  });
  try {
-    await deleteReceivablePlan(row.id as number);
+    await deleteReceivablePlan(row.id!);
    message.success({
      content: $t('ui.actionMessage.deleteSuccess', [row.period]),
    });
--- a/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/receivable/plan/modules/detail-list.vue
@@ -65,7 +65,7 @@ async function handleDelete(row: CrmReceivablePlanApi.Plan) {
    duration: 0,
  });
  try {
-    await deleteReceivablePlan(row.id as number);
+    await deleteReceivablePlan(row.id!);
    message.success({
      content: $t('ui.actionMessage.deleteSuccess', [row.period]),
    });