feat：【antd】【crm】产品的列表、详情优化

apps/web-antd/src/router/routes/modules/crm.ts

@@ -82,7 +82,7 @@ const routes: RouteRecordRaw[] = [
           title: '产品详情',
           activePath: '/crm/product',
         },
-        component: () => import('#/views/crm/product/modules/detail.vue'),
+        component: () => import('#/views/crm/product/detail/index.vue'),
       },
     ],
   },

apps/web-antd/src/views/crm/clue/detail/index.vue

@@ -107,7 +107,7 @@ async function handleTransform(): Promise<boolean | undefined> {
 
 /** 加载数据 */
 onMounted(() => {
-  clueId.value = route.params.id as number;
+  clueId.value = Number(route.params.id);
   getClueDetail();
 });
 </script>

apps/web-antd/src/views/crm/contact/detail/index.vue

@@ -16,6 +16,7 @@ import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
 import { OperateLog } from '#/components/operate-log';
 import { ACTION_ICON, TableAction } from '#/components/table-action';
+import { $t } from '#/locales';
 import { BusinessDetailsList } from '#/views/crm/business';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
@@ -87,7 +88,7 @@ function handleTransfer() {
 
 /** 加载数据 */
 onMounted(() => {
-  contactId.value = route.params.id as number;
+  contactId.value = Number(route.params.id);
   getContactDetail();
 });
 </script>

apps/web-antd/src/views/crm/customer/detail/index.vue

@@ -22,6 +22,7 @@ import { BizTypeEnum } from '#/api/crm/permission';
 import { useDescription } from '#/components/description';
 import { AsyncOperateLog } from '#/components/operate-log';
 import { ACTION_ICON, TableAction } from '#/components/table-action';
+import { $t } from '#/locales';
 import { BusinessDetailsList } from '#/views/crm/business';
 import { ContactDetailsList } from '#/views/crm/contact/components';
 import { ContractDetailsList } from '#/views/crm/contract';
@@ -77,11 +78,11 @@ async function loadCustomerDetail() {
   try {
     customer.value = await getCustomer(customerId.value);
     // 操作日志
-    const logList = await getOperateLogPage({
+    const res = await getOperateLogPage({
       bizType: BizTypeEnum.CRM_CUSTOMER,
       bizId: customerId.value,
     });
-    logList.value = logList.list;
+    logList.value = res.list;
   } finally {
     loading.value = false;
   }
@@ -198,7 +199,7 @@ async function handleUpdateDealStatus(): Promise<boolean | undefined> {
 
 /** 加载数据 */
 onMounted(() => {
-  customerId.value = route.params.id as number;
+  customerId.value = Number(route.params.id);
   loadCustomerDetail();
 });
 </script>

apps/web-antd/src/views/crm/product/detail/index.vue

@@ -17,18 +17,16 @@ import { useDescription } from '#/components/description';
 import { AsyncOperateLog } from '#/components/operate-log';
 import { ProductDetailsInfo } from '#/views/crm/product';
 
-import { useDetailSchema } from './detail-data';
-
-const loading = ref(false);
+import { useDetailSchema } from './data';
 
 const route = useRoute();
 const router = useRouter();
 const tabs = useTabs();
 
-const productId = ref(0);
-
-const product = ref<CrmProductApi.Product>({} as CrmProductApi.Product);
-const productLogList = ref<SystemOperateLogApi.OperateLog[]>([]);
+const loading = ref(false); // 加载中
+const productId = ref(0); // 产品编号
+const product = ref<CrmProductApi.Product>({} as CrmProductApi.Product); // 产品详情
+const logList = ref<SystemOperateLogApi.OperateLog[]>([]); // 操作日志
 
 const [Descriptions] = useDescription({
   componentProps: {
@@ -40,15 +38,19 @@ const [Descriptions] = useDescription({
 });
 
 /** 加载详情 */
-async function loadProductDetail() {
+async function getProductDetail() {
   loading.value = true;
-  const data = await getProduct(productId.value);
-  const logList = await getOperateLogPage({
-    bizType: BizTypeEnum.CRM_PRODUCT,
-    bizId: productId.value,
-  });
-  productLogList.value = logList.list;
-  product.value = data;
+  try {
+    product.value = await getProduct(productId.value);
+    // 操作日志
+    const res = await getOperateLogPage({
+      bizType: BizTypeEnum.CRM_PRODUCT,
+      bizId: productId.value,
+    });
+    logList.value = res.list;
+  } finally {
+    loading.value = false;
+  }
   loading.value = false;
 }
 
@@ -58,10 +60,10 @@ function handleBack() {
   router.push('/crm/product');
 }
 
-// 加载数据
+/** 加载数据 */
 onMounted(() => {
   productId.value = Number(route.params.id);
-  loadProductDetail();
+  getProductDetail();
 });
 </script>
 
@@ -81,7 +83,7 @@ onMounted(() => {
           <ProductDetailsInfo :product="product" />
         </Tabs.TabPane>
         <Tabs.TabPane tab="操作日志" key="2" :force-render="true">
-          <AsyncOperateLog :log-list="productLogList" />
+          <AsyncOperateLog :log-list="logList" />
         </Tabs.TabPane>
       </Tabs>
     </Card>

apps/web-antd/src/views/crm/product/detail/modules/info.vue

@@ -3,7 +3,7 @@ import type { CrmProductApi } from '#/api/crm/product';
 
 import { useDescription } from '#/components/description';
 
-import { useDetailBaseSchema } from './detail-data';
+import { useDetailBaseSchema } from '../data';
 
 defineProps<{
   product: CrmProductApi.Product; // 产品信息

apps/web-antd/src/views/crm/product/index.ts

@@ -1,15 +1,7 @@
 import { defineAsyncComponent } from 'vue';
 
 export const ProductDetailsInfo = defineAsyncComponent(
-  () => import('./modules/detail-info.vue'),
-);
-
-export const ProductForm = defineAsyncComponent(
-  () => import('./modules/form.vue'),
-);
-
-export const ProductDetails = defineAsyncComponent(
-  () => import('./modules/detail.vue'),
+  () => import('./detail/modules/info.vue'),
 );
 
 export const ProductDetailsList = defineAsyncComponent(

apps/web-antd/src/views/crm/product/index.vue

@@ -28,7 +28,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -61,10 +61,8 @@ async function handleDelete(row: CrmProductApi.Product) {
   });
   try {
     await deleteProduct(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
-    onRefresh();
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -91,6 +89,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -102,7 +101,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid table-title="产品列表">
       <template #toolbar-tools>
         <TableAction

apps/web-antd/src/views/crm/product/modules/detail-list.vue

@@ -11,7 +11,7 @@ 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 '../detail/data';
 
 const props = defineProps<{
   bizId: number;

apps/web-antd/src/views/crm/product/modules/form.vue

@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>

apps/web-antd/src/views/crm/product/modules/product-table.vue

@@ -112,7 +112,7 @@ watch(
         item.sellingPrice = item.contractPrice;
       });
     }
-    gridApi.grid.reloadData(tableData.value);
+    await gridApi.grid.reloadData(tableData.value);
   },
   {
     immediate: true,