From 3d2a53a6b248f57fe4d911953e579d796ae04e65 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 28 Sep 2025 20:00:06 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90crm?=
 =?UTF-8?q?=E3=80=91=E4=BA=A7=E5=93=81=E7=9A=84=20components=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/crm/business/modules/detail.vue |   2 +-
 .../src/views/crm/business/modules/form.vue   |   2 +-
 .../crm/contact/components/detail-list.vue    |   2 +-
 .../src/views/crm/contract/modules/detail.vue |   2 +-
 .../src/views/crm/contract/modules/form.vue   |   2 +-
 .../src/views/crm/product/components/data.ts  | 111 ++++++++++++++++++
 .../{modules => components}/detail-list.vue   |   8 +-
 .../edit-table.vue}                           |  17 ++-
 .../src/views/crm/product/components/index.ts |   9 ++
 apps/web-antd/src/views/crm/product/data.ts   |  80 ++++---------
 .../src/views/crm/product/detail/data.ts      |  51 --------
 .../src/views/crm/product/detail/index.vue    |   4 +-
 apps/web-antd/src/views/crm/product/index.ts  |  13 --
 13 files changed, 171 insertions(+), 132 deletions(-)
 create mode 100644 apps/web-antd/src/views/crm/product/components/data.ts
 rename apps/web-antd/src/views/crm/product/{modules => components}/detail-list.vue (88%)
 rename apps/web-antd/src/views/crm/product/{modules/product-table.vue => components/edit-table.vue} (92%)
 create mode 100644 apps/web-antd/src/views/crm/product/components/index.ts
 delete mode 100644 apps/web-antd/src/views/crm/product/index.ts

diff --git a/apps/web-antd/src/views/crm/business/modules/detail.vue b/apps/web-antd/src/views/crm/business/modules/detail.vue
index 7bbd08ee..ed661109 100644
--- a/apps/web-antd/src/views/crm/business/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/business/modules/detail.vue
@@ -24,7 +24,7 @@ import { ContactDetailsList } from '#/views/crm/contact/components';
 import { ContractDetailsList } from '#/views/crm/contract';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
-import { ProductDetailsList } from '#/views/crm/product';
+import { ProductDetailsList } from '#/views/crm/product/components';
 
 import { useDetailSchema } from './detail-data';
 
diff --git a/apps/web-antd/src/views/crm/business/modules/form.vue b/apps/web-antd/src/views/crm/business/modules/form.vue
index 5fb58d3c..4f04633f 100644
--- a/apps/web-antd/src/views/crm/business/modules/form.vue
+++ b/apps/web-antd/src/views/crm/business/modules/form.vue
@@ -16,7 +16,7 @@ import {
 } from '#/api/crm/business';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
-import { ProductEditTable } from '#/views/crm/product';
+import { ProductEditTable } from '#/views/crm/product/components';
 
 import { useFormSchema } from '../data';
 
diff --git a/apps/web-antd/src/views/crm/contact/components/detail-list.vue b/apps/web-antd/src/views/crm/contact/components/detail-list.vue
index 193e0bc5..a409d0a3 100644
--- a/apps/web-antd/src/views/crm/contact/components/detail-list.vue
+++ b/apps/web-antd/src/views/crm/contact/components/detail-list.vue
@@ -1,4 +1,4 @@
-<!-- 联系人列表：用于【联系人】【商机】详情种，展示它们关联的联系人列表 -->
+<!-- 联系人列表：用于【联系人】【商机】详情中，展示它们关联的联系人列表 -->
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmContactApi } from '#/api/crm/contact';
diff --git a/apps/web-antd/src/views/crm/contract/modules/detail.vue b/apps/web-antd/src/views/crm/contract/modules/detail.vue
index a546169c..418e1428 100644
--- a/apps/web-antd/src/views/crm/contract/modules/detail.vue
+++ b/apps/web-antd/src/views/crm/contract/modules/detail.vue
@@ -19,7 +19,7 @@ import { AsyncOperateLog } from '#/components/operate-log';
 import { ContractDetailsInfo, ContractForm } from '#/views/crm/contract';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
-import { ProductDetailsList } from '#/views/crm/product';
+import { ProductDetailsList } from '#/views/crm/product/components';
 import {
   ReceivableDetailsList,
   ReceivablePlanDetailsList,
diff --git a/apps/web-antd/src/views/crm/contract/modules/form.vue b/apps/web-antd/src/views/crm/contract/modules/form.vue
index 3517681b..117d62a5 100644
--- a/apps/web-antd/src/views/crm/contract/modules/form.vue
+++ b/apps/web-antd/src/views/crm/contract/modules/form.vue
@@ -15,7 +15,7 @@ import {
 } from '#/api/crm/contract';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
-import { ProductEditTable } from '#/views/crm/product';
+import { ProductEditTable } from '#/views/crm/product/components';
 
 import { useFormSchema } from '../data';
 
diff --git a/apps/web-antd/src/views/crm/product/components/data.ts b/apps/web-antd/src/views/crm/product/components/data.ts
new file mode 100644
index 00000000..385e6aa8
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/components/data.ts
@@ -0,0 +1,111 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 产品详情列表的列定义 */
+export function useDetailListColumns(
+  showBusinessPrice: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'productName',
+      title: '产品名称',
+    },
+    {
+      field: 'productNo',
+      title: '产品条码',
+    },
+    {
+      field: 'productUnit',
+      title: '产品单位',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
+      },
+    },
+    {
+      field: 'productPrice',
+      title: '产品价格（元）',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'businessPrice',
+      title: '商机价格（元）',
+      formatter: 'formatAmount2',
+      visible: showBusinessPrice,
+    },
+    {
+      field: 'contractPrice',
+      title: '合同价格（元）',
+      formatter: 'formatAmount2',
+      visible: !showBusinessPrice,
+    },
+    {
+      field: 'count',
+      title: '数量',
+      formatter: 'formatNumber',
+    },
+    {
+      field: 'totalPrice',
+      title: '合计金额（元）',
+      formatter: 'formatAmount2',
+    },
+  ];
+}
+
+/** 产品编辑表格的列定义 */
+export function useProductEditTableColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50 },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 100,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'productNo',
+      title: '条码',
+      minWidth: 150,
+    },
+    {
+      field: 'productUnit',
+      title: '单位',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
+      },
+    },
+    {
+      field: 'productPrice',
+      title: '价格（元）',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'sellingPrice',
+      title: '售价（元）',
+      minWidth: 100,
+      slots: { default: 'sellingPrice' },
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 100,
+      slots: { default: 'count' },
+    },
+    {
+      field: 'totalPrice',
+      title: '合计',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/crm/product/modules/detail-list.vue b/apps/web-antd/src/views/crm/product/components/detail-list.vue
similarity index 88%
rename from apps/web-antd/src/views/crm/product/modules/detail-list.vue
rename to apps/web-antd/src/views/crm/product/components/detail-list.vue
index 5111006c..5ce23bc0 100644
--- a/apps/web-antd/src/views/crm/product/modules/detail-list.vue
+++ b/apps/web-antd/src/views/crm/product/components/detail-list.vue
@@ -1,3 +1,4 @@
+<!-- 产品列表：用于【商机】【合同】详情中，展示它们关联的产品列表 -->
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmProductApi } from '#/api/crm/product';
@@ -11,16 +12,20 @@ import { getBusiness } from '#/api/crm/business';
 import { getContract } from '#/api/crm/contract';
 import { BizTypeEnum } from '#/api/crm/permission';
 
-import { useDetailListColumns } from '../detail/data';
+import { useDetailListColumns } from './data';
 
+/** 组件入参 */
 const props = defineProps<{
   bizId: number;
   bizType: BizTypeEnum;
 }>();
 
+/** 整单折扣 */
 const discountPercent = ref(0);
+/** 产品总金额 */
 const totalProductPrice = ref(0);
 
+/** 构建产品列表表格 */
 const [Grid] = useVbenVxeGrid({
   gridOptions: {
     columns: useDetailListColumns(props.bizType === BizTypeEnum.CRM_BUSINESS),
@@ -48,6 +53,7 @@ const [Grid] = useVbenVxeGrid({
     keepSource: true,
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
   } as VxeTableGridOptions<CrmProductApi.Product>,
 });
diff --git a/apps/web-antd/src/views/crm/product/modules/product-table.vue b/apps/web-antd/src/views/crm/product/components/edit-table.vue
similarity index 92%
rename from apps/web-antd/src/views/crm/product/modules/product-table.vue
rename to apps/web-antd/src/views/crm/product/components/edit-table.vue
index 4c8bb588..75ec8f98 100644
--- a/apps/web-antd/src/views/crm/product/modules/product-table.vue
+++ b/apps/web-antd/src/views/crm/product/components/edit-table.vue
@@ -12,8 +12,9 @@ import { InputNumber, Select } from 'ant-design-vue';
 import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { BizTypeEnum } from '#/api/crm/permission';
 import { getProductSimpleList } from '#/api/crm/product';
+import { $t } from '#/locales';
 
-import { useProductEditTableColumns } from '../data';
+import { useProductEditTableColumns } from './data';
 
 const props = defineProps<{
   bizType: BizTypeEnum;
@@ -24,16 +25,20 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:products']);
 
+/** 表格内部数据 */
 const tableData = ref<any[]>([]);
 
+/** 添加产品行 */
 function handleAdd() {
   gridApi.grid.insertAt(null, -1);
 }
 
+/** 删除产品行 */
 function handleDelete(row: CrmProductApi.Product) {
   gridApi.grid.remove(row);
 }
 
+/** 切换产品时同步基础信息 */
 function handleProductChange(productId: any, row: any) {
   const product = productOptions.value.find((p) => p.id === productId);
   if (!product) {
@@ -48,11 +53,13 @@ function handleProductChange(productId: any, row: any) {
   handleUpdateValue(row);
 }
 
+/** 金额变动时重新计算合计 */
 function handlePriceChange(row: any) {
   row.totalPrice = erpPriceMultiply(row.sellingPrice, row.count) ?? 0;
   handleUpdateValue(row);
 }
 
+/** 将最新数据写回并通知父组件 */
 function handleUpdateValue(row: any) {
   const index = tableData.value.findIndex((item) => item.id === row.id);
   if (props.bizType === BizTypeEnum.CRM_BUSINESS) {
@@ -69,7 +76,6 @@ function handleUpdateValue(row: any) {
   emit('update:products', [...tableData.value]);
 }
 
-/** 表格配置 */
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     editConfig: {
@@ -84,6 +90,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     keepSource: true,
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     pagerConfig: {
       enabled: false,
@@ -119,8 +126,10 @@ watch(
   },
 );
 
-/** 初始化 */
+/** 产品下拉选项 */
 const productOptions = ref<CrmProductApi.Product[]>([]);
+
+/** 初始化 */
 onMounted(async () => {
   productOptions.value = await getProductSimpleList();
 });
@@ -133,7 +142,7 @@ onMounted(async () => {
         v-model:value="row.productId"
         :options="productOptions"
         :field-names="{ label: 'name', value: 'id' }"
-        style="width: 100%"
+        class="w-full"
         @change="handleProductChange($event, row)"
       />
     </template>
diff --git a/apps/web-antd/src/views/crm/product/components/index.ts b/apps/web-antd/src/views/crm/product/components/index.ts
new file mode 100644
index 00000000..c0dab324
--- /dev/null
+++ b/apps/web-antd/src/views/crm/product/components/index.ts
@@ -0,0 +1,9 @@
+import { defineAsyncComponent } from 'vue';
+
+export const ProductDetailsList = defineAsyncComponent(
+  () => import('./detail-list.vue'),
+);
+
+export const ProductEditTable = defineAsyncComponent(
+  () => import('./edit-table.vue'),
+);
diff --git a/apps/web-antd/src/views/crm/product/data.ts b/apps/web-antd/src/views/crm/product/data.ts
index 180bfaf2..a1dbbca5 100644
--- a/apps/web-antd/src/views/crm/product/data.ts
+++ b/apps/web-antd/src/views/crm/product/data.ts
@@ -27,6 +27,10 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '产品名称',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入产品名称',
+        allowClear: true,
+      },
     },
     {
       component: 'ApiSelect',
@@ -39,6 +43,8 @@ export function useFormSchema(): VbenFormSchema[] {
           label: 'nickname',
           value: 'id',
         },
+        placeholder: '请选择负责人',
+        allowClear: true,
       },
       defaultValue: userStore.userInfo?.id,
     },
@@ -47,6 +53,10 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'no',
       label: '产品编码',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入产品编码',
+        allowClear: true,
+      },
     },
     {
       component: 'ApiTreeSelect',
@@ -59,6 +69,8 @@ export function useFormSchema(): VbenFormSchema[] {
           return handleTree(data);
         },
         fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择产品类型',
+        allowClear: true,
       },
     },
     {
@@ -67,6 +79,8 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.CRM_PRODUCT_UNIT, 'number'),
+        placeholder: '请选择产品单位',
+        allowClear: true,
       },
       rules: 'required',
     },
@@ -79,12 +93,17 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         precision: 2,
         step: 0.1,
+        placeholder: '请输入产品价格',
       },
     },
     {
       component: 'Textarea',
       fieldName: 'description',
       label: '产品描述',
+      componentProps: {
+        placeholder: '请输入产品描述',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'status',
@@ -107,6 +126,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '产品名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入产品名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'status',
@@ -114,6 +137,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         allowClear: true,
+        placeholder: '请选择上架状态',
         options: getDictOptions(DICT_TYPE.CRM_PRODUCT_STATUS, 'number'),
       },
     },
@@ -204,59 +228,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
   ];
 }
 
-/** 代码生成表格列定义 */
-export function useProductEditTableColumns(): VxeTableGridOptions['columns'] {
-  return [
-    { type: 'seq', title: '序号', minWidth: 50 },
-    {
-      field: 'productId',
-      title: '产品名称',
-      minWidth: 100,
-      slots: { default: 'productId' },
-    },
-    {
-      field: 'productNo',
-      title: '条码',
-      minWidth: 150,
-    },
-    {
-      field: 'productUnit',
-      title: '单位',
-      minWidth: 100,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
-      },
-    },
-    {
-      field: 'productPrice',
-      title: '价格（元）',
-      minWidth: 100,
-      formatter: 'formatAmount2',
-    },
-    {
-      field: 'sellingPrice',
-      title: '售价（元）',
-      minWidth: 100,
-      slots: { default: 'sellingPrice' },
-    },
-    {
-      field: 'count',
-      title: '数量',
-      minWidth: 100,
-      slots: { default: 'count' },
-    },
-    {
-      field: 'totalPrice',
-      title: '合计',
-      minWidth: 100,
-      formatter: 'formatAmount2',
-    },
-    {
-      title: '操作',
-      width: 80,
-      fixed: 'right',
-      slots: { default: 'actions' },
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/crm/product/detail/data.ts b/apps/web-antd/src/views/crm/product/detail/data.ts
index ac98ee1f..a43312dd 100644
--- a/apps/web-antd/src/views/crm/product/detail/data.ts
+++ b/apps/web-antd/src/views/crm/product/detail/data.ts
@@ -1,4 +1,3 @@
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -72,53 +71,3 @@ export function useDetailBaseSchema(): DescriptionItemSchema[] {
   ];
 }
 
-/** 详情列表的字段 */
-export function useDetailListColumns(
-  showBussinePrice: boolean,
-): VxeTableGridOptions['columns'] {
-  return [
-    {
-      field: 'productName',
-      title: '产品名称',
-    },
-    {
-      field: 'productNo',
-      title: '产品条码',
-    },
-    {
-      field: 'productUnit',
-      title: '产品单位',
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
-      },
-    },
-    {
-      field: 'productPrice',
-      title: '产品价格（元）',
-      formatter: 'formatAmount2',
-    },
-    {
-      field: 'businessPrice',
-      title: '商机价格（元）',
-      formatter: 'formatAmount2',
-      visible: showBussinePrice,
-    },
-    {
-      field: 'contractPrice',
-      title: '合同价格（元）',
-      formatter: 'formatAmount2',
-      visible: !showBussinePrice,
-    },
-    {
-      field: 'count',
-      title: '数量',
-      formatter: 'formatNumber',
-    },
-    {
-      field: 'totalPrice',
-      title: '合计金额（元）',
-      formatter: 'formatAmount2',
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/crm/product/detail/index.vue b/apps/web-antd/src/views/crm/product/detail/index.vue
index b389af0e..366f6278 100644
--- a/apps/web-antd/src/views/crm/product/detail/index.vue
+++ b/apps/web-antd/src/views/crm/product/detail/index.vue
@@ -15,9 +15,9 @@ import { BizTypeEnum } from '#/api/crm/permission';
 import { getProduct } from '#/api/crm/product';
 import { useDescription } from '#/components/description';
 import { AsyncOperateLog } from '#/components/operate-log';
-import { ProductDetailsInfo } from '#/views/crm/product';
 
 import { useDetailSchema } from './data';
+import Info from './modules/info.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -80,7 +80,7 @@ onMounted(() => {
     <Card class="mt-4 min-h-[60%]">
       <Tabs>
         <Tabs.TabPane tab="详细资料" key="1" :force-render="true">
-          <ProductDetailsInfo :product="product" />
+          <Info :product="product" />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="2" :force-render="true">
           <AsyncOperateLog :log-list="logList" />
diff --git a/apps/web-antd/src/views/crm/product/index.ts b/apps/web-antd/src/views/crm/product/index.ts
deleted file mode 100644
index 9efbddbd..00000000
--- a/apps/web-antd/src/views/crm/product/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { defineAsyncComponent } from 'vue';
-
-export const ProductDetailsInfo = defineAsyncComponent(
-  () => import('./detail/modules/info.vue'),
-);
-
-export const ProductDetailsList = defineAsyncComponent(
-  () => import('./modules/detail-list.vue'),
-);
-
-export const ProductEditTable = defineAsyncComponent(
-  () => import('./modules/product-table.vue'),
-);