From cf7036d34b4a096fb952020e0c59a99ecfcb255b Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 22 Feb 2024 12:45:15 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20CRM=EF=BC=9A=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E5=95=86=E6=9C=BA=E4=BA=A7=E5=93=81=E7=9A=84=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crm/business/index.ts                 | 13 ++++
 .../business/detail/BusinessProductList.vue   | 66 +++++++++++++++++++
 src/views/crm/business/detail/index.vue       |  4 ++
 3 files changed, 83 insertions(+)
 create mode 100644 src/views/crm/business/detail/BusinessProductList.vue

diff --git a/src/api/crm/business/index.ts b/src/api/crm/business/index.ts
index 8dd06563..05b0d5cd 100644
--- a/src/api/crm/business/index.ts
+++ b/src/api/crm/business/index.ts
@@ -27,6 +27,19 @@ export interface BusinessVO {
   creatorName?: string // 创建人名称
   createTime: Date // 创建时间
   updateTime: Date // 更新时间
+  products?: [
+    {
+      id: number
+      productId: number
+      productName: string
+      productNo: string
+      productUnit: number
+      productPrice: number
+      businessPrice: number
+      count: number
+      totalPrice: number
+    }
+  ]
 }
 
 // 查询 CRM 商机列表
diff --git a/src/views/crm/business/detail/BusinessProductList.vue b/src/views/crm/business/detail/BusinessProductList.vue
new file mode 100644
index 00000000..f995f3e5
--- /dev/null
+++ b/src/views/crm/business/detail/BusinessProductList.vue
@@ -0,0 +1,66 @@
+<template>
+  <ContentWrap>
+    <el-table :data="business.products" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column
+        align="center"
+        label="产品名称"
+        fixed="left"
+        prop="productName"
+        min-width="160"
+      >
+        <template #default="scope">
+          {{ scope.row.productName }}
+        </template>
+      </el-table-column>
+      <el-table-column label="产品条码" align="center" prop="productNo" min-width="120" />
+      <el-table-column align="center" label="产品单位" prop="productUnit" min-width="160">
+        <template #default="{ row }">
+          <dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="row.productUnit" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="产品价格（元）"
+        align="center"
+        prop="productPrice"
+        min-width="140"
+        :formatter="erpPriceTableColumnFormatter"
+      />
+      <el-table-column
+        label="合同价格（元）"
+        align="center"
+        prop="businessPrice"
+        min-width="140"
+        :formatter="erpPriceTableColumnFormatter"
+      />
+      <el-table-column
+        align="center"
+        label="数量"
+        prop="count"
+        min-width="100px"
+        :formatter="erpPriceTableColumnFormatter"
+      />
+      <el-table-column
+        label="合计金额（元）"
+        align="center"
+        prop="totalPrice"
+        min-width="140"
+        :formatter="erpPriceTableColumnFormatter"
+      />
+    </el-table>
+    <el-row class="mt-10px" justify="end">
+      <el-col :span="3"> 整单折扣：{{ erpPriceInputFormatter(business.discountPercent) }}% </el-col>
+      <el-col :span="4">
+        产品总金额：{{ erpPriceInputFormatter(business.totalProductPrice) }} 元
+      </el-col>
+    </el-row>
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import * as BusinessApi from '@/api/crm/business'
+import { erpPriceInputFormatter, erpPriceTableColumnFormatter } from '@/utils'
+import { DICT_TYPE } from '@/utils/dict'
+
+const { business } = defineProps<{
+  business: BusinessApi.BusinessVO
+}>()
+</script>
diff --git a/src/views/crm/business/detail/index.vue b/src/views/crm/business/detail/index.vue
index dd8787c2..2d17f39d 100644
--- a/src/views/crm/business/detail/index.vue
+++ b/src/views/crm/business/detail/index.vue
@@ -23,6 +23,10 @@
           :customer-id="business.customerId"
         />
       </el-tab-pane>
+      <!-- TODO 合同 -->
+      <el-tab-pane label="产品">
+        <BusinessProductList :business="business" />
+      </el-tab-pane>
       <el-tab-pane label="操作日志">
         <OperateLogV2 :log-list="logList" />
       </el-tab-pane>