CRM-合同：完善 TODO

(cherry picked from commit 6d0e242387)
2024-02-03 20:47:50 +08:00
parent ad987e9ef1
commit 1cbc8a29da
16 changed files with 194 additions and 80 deletions
--- a/src/views/crm/contract/detail/ContractDetailsHeader.vue
+++ b/src/views/crm/contract/detail/ContractDetailsHeader.vue
@ -1,4 +1,4 @@
-<!-- TODO @puhui999：这个组件的注释加下，方便大家打开就知道哈 -->
+<!-- 合同详情头部组件-->
 <template>
  <div>
    <div class="flex items-start justify-between">
@ -17,17 +17,20 @@
  </div>
  <ContentWrap class="mt-10px">
    <el-descriptions :column="5" direction="vertical">
-      <el-descriptions-item label="客户">
+      <el-descriptions-item label="客户名称">
        {{ contract.customerName }}
      </el-descriptions-item>
-      <el-descriptions-item label="客户签约人">
-        {{ contract.contactName }}
+      <el-descriptions-item label="合同金额（元）">
+        {{ floatToFixed2(contract.price) }}
      </el-descriptions-item>
-      <el-descriptions-item label="合同金额">
-        {{ contract.productPrice }}
+      <el-descriptions-item label="下单时间">
+        {{ contract.orderDate ? formatDate(contract.orderDate) : '空' }}
      </el-descriptions-item>
-      <el-descriptions-item label="创建时间">
-        {{ contract.createTime ? formatDate(contract.createTime) : '空' }}
+      <el-descriptions-item label="回款金额（元）">
+        {{ floatToFixed2(contract.price) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="负责人">
+        {{ contract.ownerUserName }}
      </el-descriptions-item>
    </el-descriptions>
  </ContentWrap>
@ -35,6 +38,7 @@
 <script lang="ts" setup>
 import * as ContractApi from '@/api/crm/contract'
 import { formatDate } from '@/utils/formatTime'
+import { floatToFixed2 } from '@/utils'

 defineOptions({ name: 'ContractDetailsHeader' })
 defineProps<{ contract: ContractApi.ContractVO }>()
--- a/src/views/crm/contract/detail/ContractDetailsInfo.vue
+++ b/src/views/crm/contract/detail/ContractDetailsInfo.vue
@ -1,4 +1,4 @@
-<!-- TODO @puhui999：这个组件的注释加下，方便大家打开就知道哈 -->
+<!-- 合同详情组件 -->
 <template>
  <ContentWrap>
    <el-collapse v-model="activeNames">
@ -6,14 +6,43 @@
        <template #title>
          <span class="text-base font-bold">基本信息</span>
        </template>
-        <!-- TODO puhui999: 先出详情样式后补全 -->
-        <el-descriptions :column="4">
+        <el-descriptions :column="3">
+          <el-descriptions-item label="合同编号">
+            {{ contract.no }}
+          </el-descriptions-item>
          <el-descriptions-item label="合同名称">
            {{ contract.name }}
          </el-descriptions-item>
+          <el-descriptions-item label="客户名称">
+            {{ contract.customerName }}
+          </el-descriptions-item>
+          <el-descriptions-item label="商机名称">
+            {{ contract.businessName }}
+          </el-descriptions-item>
+          <el-descriptions-item label="合同金额（元）">
+            {{ contract.price }}
+          </el-descriptions-item>
+          <el-descriptions-item label="下单时间">
+            {{ formatDate(contract.orderDate) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="开始时间">
+            {{ formatDate(contract.startTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="结束时间">
+            {{ formatDate(contract.endTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="客户签约人">
+            {{ contract.contactName }}
+          </el-descriptions-item>
+          <el-descriptions-item label="公司签约人">
+            {{ contract.signUserName }}
+          </el-descriptions-item>
          <el-descriptions-item label="备注">
            {{ contract.remark }}
          </el-descriptions-item>
+          <el-descriptions-item label="合同状态">
+            {{ contract.auditStatus }}
+          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item name="systemInfo">
--- a/src/views/crm/contract/detail/ContractProductList.vue
+++ b/src/views/crm/contract/detail/ContractProductList.vue
@ -0,0 +1,64 @@
+<template>
+  <el-table :data="list" :show-overflow-tooltip="true" :stripe="true">
+    <el-table-column align="center" label="产品名称" prop="name" width="160" />
+    <el-table-column align="center" label="产品类型" prop="categoryName" width="160" />
+    <el-table-column align="center" label="产品单位" prop="unit">
+      <template #default="scope">
+        <dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="scope.row.unit" />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="产品编码" prop="no" />
+    <el-table-column
+      :formatter="fenToYuanFormat"
+      align="center"
+      label="价格（元）"
+      prop="price"
+      width="100"
+    />
+    <el-table-column align="center" label="数量" prop="count" width="200" />
+    <el-table-column align="center" label="折扣(%)" prop="discountPercent" width="200" />
+    <el-table-column align="center" label="合计" prop="totalPrice" width="100">
+      <template #default="{ row }: { row: ProductApi.ProductExpandVO }">
+        {{ getTotalPrice(row) }}
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE } from '@/utils/dict'
+import { fenToYuanFormat } from '@/utils/formatter'
+import * as ProductApi from '@/api/crm/product'
+import { floatToFixed2, yuanToFen } from '@/utils'
+
+defineOptions({ name: 'ContractProductList' })
+const props = withDefaults(defineProps<{ modelValue: ProductApi.ProductExpandVO[] }>(), {
+  modelValue: () => []
+})
+const list = ref<ProductApi.ProductExpandVO[]>([]) // 列表数量
+/** 计算 totalPrice */
+const getTotalPrice = computed(() => (row: ProductApi.ProductExpandVO) => {
+  const totalPrice =
+    (Number(row.price) / 100) * Number(row.count) * (1 - Number(row.discountPercent) / 100)
+  row.totalPrice = isNaN(totalPrice) ? 0 : yuanToFen(totalPrice)
+  return isNaN(totalPrice) ? 0 : totalPrice.toFixed(2)
+})
+const isSetListValue = ref(false) // 判断是否已经给 list 赋值过，用于编辑表单商品回显
+// 编辑时合同商品回显
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!val || val.length === 0 || isSetListValue.value) {
+      return
+    }
+    list.value = [
+      ...props.modelValue.map((item) => {
+        item.totalPrice = floatToFixed2(item.totalPrice) as unknown as number
+        return item
+      })
+    ]
+    isSetListValue.value = true
+  },
+  { immediate: true, deep: true }
+)
+</script>
--- a/src/views/crm/contract/detail/index.vue
+++ b/src/views/crm/contract/detail/index.vue
@ -1,10 +1,10 @@
-<!-- TODO @puhui999：这个组件的注释加下，方便大家打开就知道哈 -->
+<!-- 合同详情页面组件-->
 <template>
  <ContractDetailsHeader v-loading="loading" :contract="contract">
    <el-button v-if="permissionListRef?.validateWrite" @click="openForm('update', contract.id)">
      编辑
    </el-button>
-    <el-button v-if="permissionListRef?.validateOwnerUser" type="primary" @click="transfer">
+    <el-button v-if="permissionListRef?.validateOwnerUser" type="primary" @click="transferContract">
      转移
    </el-button>
  </ContractDetailsHeader>
@ -13,6 +13,9 @@
      <el-tab-pane label="详细资料">
        <ContractDetailsInfo :contract="contract" />
      </el-tab-pane>
+      <el-tab-pane label="产品">
+        <ContractProductList v-model="contract.productItems" />
+      </el-tab-pane>
      <el-tab-pane label="操作日志">
        <OperateLogV2 :log-list="logList" />
      </el-tab-pane>
@ -25,18 +28,11 @@
          @quit-team="close"
        />
      </el-tab-pane>
-      <el-tab-pane label="商机" lazy>
-        <BusinessList
-          :biz-id="contract.id!"
-          :biz-type="BizTypeEnum.CRM_CONTRACT"
-          :customer-id="contract.customerId"
-        />
-      </el-tab-pane>
    </el-tabs>
  </el-col>
  <!-- 表单弹窗：添加/修改 -->
  <ContractForm ref="formRef" @success="getContractData" />
-  <CrmTransferForm ref="crmTransferFormRef" @success="close" />
+  <CrmTransferForm ref="transferFormRef" @success="close" />
 </template>
 <script lang="ts" setup>
 import { useTagsViewStore } from '@/store/modules/tagsView'
@ -44,12 +40,12 @@ import { OperateLogV2VO } from '@/api/system/operatelog'
 import * as ContractApi from '@/api/crm/contract'
 import ContractDetailsHeader from './ContractDetailsHeader.vue'
 import ContractDetailsInfo from './ContractDetailsInfo.vue'
+import ContractProductList from './ContractProductList.vue'
 import { BizTypeEnum } from '@/api/crm/permission'
 import { getOperateLogPage } from '@/api/crm/operateLog'
 import ContractForm from '@/views/crm/contract/ContractForm.vue'
 import CrmTransferForm from '@/views/crm/permission/components/TransferForm.vue'
 import PermissionList from '@/views/crm/permission/components/PermissionList.vue'
-import BusinessList from '@/views/crm/business/components/BusinessList.vue'

 defineOptions({ name: 'CrmContractDetail' })

@ -91,10 +87,9 @@ const getOperateLog = async (contractId: number) => {
 }

 /** 转移 */
-// TODO @puhui999：transferFormRef 简洁一点哈
-const crmTransferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 合同转移表单 ref
-const transfer = () => {
-  crmTransferFormRef.value?.open('合同转移', contract.value.id, ContractApi.transfer)
+const transferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 合同转移表单 ref
+const transferContract = () => {
+  transferFormRef.value?.open('合同转移', contract.value.id, ContractApi.transferContract)
 }

 /** 关闭 */