✨ CRM：完善回款在合同、客户的引入

Author: YunaiV

src/views/crm/contract/detail/index.vue

@@ -23,7 +23,7 @@
         <ReceivablePlanList
           :contract-id="contract.id!"
           :customer-id="contract.customerId"
-          @crate-receivable="crateReceivable"
+          @create-receivable="createReceivable"
         />
         <ReceivableList
           ref="receivableListRef"
@@ -108,8 +108,8 @@ const getOperateLog = async (contractId: number) => {
 
 /** 从回款计划创建回款 */
 const receivableListRef = ref<InstanceType<typeof ReceivableList>>() // 回款列表 Ref
-const crateReceivable = (planData: any) => {
-  receivableListRef.value?.crateReceivable(planData)
+const createReceivable = (planData: any) => {
+  receivableListRef.value?.createReceivable(planData)
 }
 
 /** 转移 */

src/views/crm/customer/detail/index.vue

@@ -64,7 +64,7 @@
         <ContractList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
       </el-tab-pane>
       <el-tab-pane label="回款" lazy>
-        <ReceivablePlanList :customer-id="customer.id!" @crate-receivable="crateReceivable" />
+        <ReceivablePlanList :customer-id="customer.id!" @create-receivable="createReceivable" />
         <ReceivableList ref="receivableListRef" :customer-id="customer.id!" />
       </el-tab-pane>
       <el-tab-pane label="操作日志">
@@ -199,8 +199,8 @@ const getOperateLog = async () => {
 
 /** 从回款计划创建回款 */
 const receivableListRef = ref<InstanceType<typeof ReceivableList>>() // 回款列表 Ref
-const crateReceivable = (planData: any) => {
-  receivableListRef.value?.crateReceivable(planData)
+const createReceivable = (planData: any) => {
+  receivableListRef.value?.createReceivable(planData)
 }
 
 const close = () => {

src/views/crm/receivable/ReceivableForm.vue

@@ -201,10 +201,14 @@ const open = async (
   // 从回款计划创建回款
   if (receivablePlan) {
     formData.value.customerId = receivablePlan.customerId
+    await handleCustomerChange(receivablePlan.customerId)
     formData.value.contractId = receivablePlan.contractId
-    formData.value.planId = receivablePlan.id
-    formData.value.price = receivablePlan.price
-    formData.value.returnType = receivablePlan.returnType
+    await handleContractChange(receivablePlan.contractId)
+    if (receivablePlan.id) {
+      formData.value.planId = receivablePlan.id
+      formData.value.price = receivablePlan.price
+      formData.value.returnType = receivablePlan.returnType
+    }
   }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗

src/views/crm/receivable/components/ReceivableList.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 操作栏 -->
   <el-row justify="end">
-    <el-button @click="openForm">
+    <el-button @click="openForm('create')">
       <Icon class="mr-5px" icon="icon-park:income-one" />
       创建回款
     </el-button>
@@ -12,7 +12,7 @@
     <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
       <el-table-column align="center" label="回款编号" prop="no" />
       <el-table-column align="center" label="客户" prop="customerName" />
-      <el-table-column align="center" label="合同" prop="contractName" />
+      <el-table-column align="center" label="合同" prop="contract.no" />
       <el-table-column
         :formatter="dateFormatter2"
         align="center"
@@ -25,7 +25,12 @@
           <dict-tag :type="DICT_TYPE.CRM_RECEIVABLE_RETURN_TYPE" :value="scope.row.returnType" />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="回款金额(元)" prop="price" />
+      <el-table-column
+        align="center"
+        label="回款金额(元)"
+        prop="price"
+        :formatter="erpPriceTableColumnFormatter"
+      />
       <el-table-column align="center" label="负责人" prop="ownerUserName" />
       <el-table-column align="center" label="备注" prop="remark" />
       <el-table-column align="center" fixed="right" label="操作" width="130px">
@@ -67,6 +72,7 @@ import * as ReceivableApi from '@/api/crm/receivable'
 import ReceivableForm from './../ReceivableForm.vue'
 import { dateFormatter2 } from '@/utils/formatTime'
 import { DICT_TYPE } from '@/utils/dict'
+import { erpPriceTableColumnFormatter } from '@/utils'
 
 defineOptions({ name: 'CrmReceivableList' })
 const props = defineProps<{
@@ -117,7 +123,10 @@ const handleQuery = () => {
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+  formRef.value.open(type, id, {
+    customerId: props.customerId,
+    contractId: props.contractId
+  })
 }
 
 /** 删除按钮操作 */
@@ -134,11 +143,12 @@ const handleDelete = async (id: number) => {
 }
 
 /** 从回款计划创建回款 */
-const crateReceivable = (planData: any) => {
+const createReceivable = (planData: any) => {
   const data = planData as unknown as ReceivablePlanApi.ReceivablePlanVO
   formRef.value.open('create', undefined, data)
 }
-defineExpose({ crateReceivable })
+defineExpose({ createReceivable })
+
 /** 监听打开的 customerId + contractId，从而加载最新的列表 */
 watch(
   () => [props.customerId, props.contractId],

src/views/crm/receivable/detail/index.vue

@@ -87,12 +87,13 @@ const close = () => {
 /** 初始化 */
 const { params } = useRoute()
 onMounted(async () => {
-  if (!params.id) {
+  const id = props.id || route.params.id
+  if (!id) {
     message.warning('参数错误，回款不能为空！')
     close()
     return
   }
-  receivableId.value = params.id as unknown as number
+  receivableId.value = id
   await getReceivable(receivableId.value)
 })
 </script>

src/views/crm/receivable/plan/ReceivablePlanForm.vue

@@ -136,6 +136,7 @@ import * as CustomerApi from '@/api/crm/customer'
 import * as ContractApi from '@/api/crm/contract'
 import { useUserStore } from '@/store/modules/user'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { aw } from '../../../../../dist-prod/assets/index-9eac537b'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -157,7 +158,7 @@ const customerList = ref<CustomerApi.CustomerVO[]>([]) // 客户列表
 const contractList = ref<ContractApi.ContractVO[]>([]) // 合同列表
 
 /** 打开弹窗 */
-const open = async (type: string, id?: number) => {
+const open = async (type: string, id?: number, customerId?: number, contractId?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
@@ -179,6 +180,14 @@ const open = async (type: string, id?: number) => {
   if (formType.value === 'create') {
     formData.value.ownerUserId = useUserStore().getUser.id
   }
+  // 设置 customerId 和 contractId 默认值
+  if (customerId) {
+    formData.value.customerId = customerId
+    await handleCustomerChange(customerId)
+  }
+  if (contractId) {
+    formData.value.contractId = contractId
+  }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 

src/views/crm/receivable/plan/components/ReceivablePlanList.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 操作栏 -->
   <el-row justify="end">
-    <el-button @click="openForm">
+    <el-button @click="openForm('create', undefined)">
       <Icon class="mr-5px" icon="icon-park:income" />
       创建回款计划
     </el-button>
@@ -13,7 +13,13 @@
       <el-table-column align="center" label="客户名称" prop="customerName" width="150px" />
       <el-table-column align="center" label="合同编号" prop="contractNo" width="200px" />
       <el-table-column align="center" label="期数" prop="period" />
-      <el-table-column align="center" label="计划回款(元)" prop="price" width="120" />
+      <el-table-column
+        align="center"
+        label="计划回款(元)"
+        prop="price"
+        width="120"
+        :formatter="erpPriceTableColumnFormatter"
+      />
       <el-table-column
         :formatter="dateFormatter2"
         align="center"
@@ -37,7 +43,8 @@
             v-hasPermi="['crm:receivable:create']"
             link
             type="primary"
-            @click="crateReceivable(scope.row)"
+            @click="createReceivable(scope.row)"
+            :disabled="scope.row.receivableId"
           >
             创建回款
           </el-button>
@@ -75,8 +82,8 @@
 <script lang="ts" setup>
 import * as ReceivablePlanApi from '@/api/crm/receivable/plan'
 import ReceivableForm from './../ReceivablePlanForm.vue'
-import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter2 } from '@/utils/formatTime'
+import { erpPriceTableColumnFormatter } from '@/utils'
 
 defineOptions({ name: 'CrmReceivablePlanList' })
 const props = defineProps<{
@@ -127,16 +134,15 @@ const handleQuery = () => {
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+  formRef.value.open(type, id, props.customerId, props.contractId)
 }
 
-// todo @puhui999：拼写错误
+/** 创建回款 */
 const emits = defineEmits<{
-  (e: 'crateReceivable', v: ReceivablePlanApi.ReceivablePlanVO)
+  (e: 'createReceivable', v: ReceivablePlanApi.ReceivablePlanVO)
 }>()
-/** 创建回款 */
-const crateReceivable = (row: ReceivablePlanApi.ReceivablePlanVO) => {
-  emits('crateReceivable', row)
+const createReceivable = (row: ReceivablePlanApi.ReceivablePlanVO) => {
+  emits('createReceivable', row)
 }
 
 /** 删除按钮操作 */