feat: crm detail

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

@@ -247,3 +247,48 @@ 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: 'formatNumber',
+    },
+    {
+      field: 'businessPrice',
+      title: '商机价格（元）',
+      formatter: 'formatNumber',
+      visible: showBussinePrice,
+    },
+    {
+      field: 'count',
+      title: '数量',
+      formatter: 'formatNumber',
+    },
+    {
+      field: 'totalPrice',
+      title: '合计金额（元）',
+      formatter: 'formatNumber',
+    },
+  ];
+}

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

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { CrmBusinessApi } from '#/api/crm/business';
+import type { CrmContractApi } from '#/api/crm/contract';
+import type { CrmProductApi } from '#/api/crm/product';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { BizTypeEnum } from '#/api/crm/permission';
+import { erpPriceInputFormatter } from '#/utils';
+
+import { useDetailListColumns } from '../data';
+
+const props = defineProps<{
+  bizType: BizTypeEnum;
+  business?: CrmBusinessApi.Business; // 商机
+  contract?: CrmContractApi.Contract; // 合同
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDetailListColumns(props.bizType === BizTypeEnum.CRM_BUSINESS),
+    data:
+      props.bizType === BizTypeEnum.CRM_BUSINESS
+        ? props.business?.products
+        : props.contract?.products,
+    height: 600,
+    pagerConfig: {
+      enabled: false,
+    },
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+    },
+  } as VxeTableGridOptions<CrmProductApi.Product>,
+});
+</script>
+
+<template>
+  <div>
+    <Grid />
+    <div class="flex justify-end">
+      <span class="font-bold text-red-500">
+        整单折扣：{{
+          erpPriceInputFormatter(
+            business ? business.discountPercent : contract?.discountPercent,
+          )
+        }}%
+      </span>
+      <span class="ml-4 font-bold text-red-500">
+        产品总金额：{{
+          erpPriceInputFormatter(
+            business ? business.totalProductPrice : contract?.totalProductPrice,
+          )
+        }}
+        元
+      </span>
+    </div>
+  </div>
+</template>

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

@@ -63,10 +63,11 @@ function handleBack() {
   tabs.closeCurrentTab();
   router.push('/crm/product');
 }
+
 // 加载数据
-onMounted(async () => {
+onMounted(() => {
   productId.value = Number(route.params.id);
-  await loadProductDetail();
+  loadProductDetail();
 });
 </script>