📖 CRM：code review 商机模块

Author: YunaiV

src/api/crm/contact/index.ts

@@ -25,11 +25,12 @@ export interface ContactVO {
   areaName: string
   ownerUserName: string
 }
-export interface ContactBusinessLinkVO {
-  id: number
+
+export interface ContactBusinessReqVO {
   contactId: number
-  businessId: number
+  businessIds: number[]
 }
+
 // 查询 CRM 联系人列表
 export const getContactPage = async (params) => {
   return await request.get({ url: `/crm/contact/page`, params })
@@ -70,12 +71,12 @@ export const getSimpleContactList = async () => {
   return await request.get({ url: `/crm/contact/simple-all-list` })
 }
 
-//批量新增联系人商机关联
-export const createContactBusinessLinkBatch = async (data: ContactBusinessLinkVO[]) => {
-  return await request.post({ url: `/crm/contact/create-batch-business`, data })
+// 批量新增联系人商机关联
+export const createContactBusinessList = async (data: ContactBusinessReqVO) => {
+  return await request.post({ url: `/crm/contact/create-business-list`, data })
 }
 
-//解除联系人商机关联
-export const deleteContactBusinessLink = async (data: ContactBusinessLinkVO) => {
-  return await request.delete({ url: `/crm/contact/delete-batch-business`, data })
-}
+// 解除联系人商机关联
+export const deleteContactBusinessList = async (data: ContactBusinessReqVO) => {
+  return await request.delete({ url: `/crm/contact/delete-business-list`, data })
+}

src/views/crm/business/BusinessForm.vue

@@ -62,12 +62,12 @@
           </el-row>
         </el-popover>
       </el-form-item>
+      <!-- TODO @ljlleo：idea 红色的报错，可以解决下 -->
       <el-form-item label="商机状态类型" prop="statusTypeId">
         <el-select
           v-model="formData.statusTypeId"
           placeholder="请选择商机状态类型"
           clearable
-          size="small"
           @change="changeBusinessStatusType"
         >
           <el-option
@@ -79,7 +79,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="商机状态" prop="statusId">
-        <el-select v-model="formData.statusId" placeholder="请选择商机状态" clearable size="small">
+        <el-select v-model="formData.statusId" placeholder="请选择商机状态" clearable>
           <el-option
             v-for="item in businessStatusList"
             :key="item.id"
@@ -243,7 +243,7 @@ const queryParams = reactive({
   industryId: null,
   level: null,
   source: null,
-  pool:false
+  pool: false
 })
 // 选择客户
 const showCustomer = ref(false)
@@ -252,12 +252,12 @@ const openCustomerSelect = () => {
   queryParams.pageNo = 1
   getCustomerList()
 }
+
 /** 查询客户列表 */
 const getCustomerList = async () => {
   loading.value = true
   try {
     const data = await CustomerApi.getCustomerPage(queryParams)
-    console.log(JSON.stringify(data))
     customerList.value = data.list
     total.value = data.total
   } finally {

src/views/crm/business/components/BusinessList.vue

@@ -5,11 +5,32 @@
       <Icon class="mr-5px" icon="ep:opportunity" />
       创建商机
     </el-button>
+    <el-button
+      @click="openBusinessModal"
+      v-hasPermi="['crm:contact:create-business']"
+      v-if="queryParams.contactId"
+    >
+      <Icon class="mr-5px" icon="ep:circle-plus" />关联
+    </el-button>
+    <el-button
+      @click="deleteContactBusinessList"
+      v-hasPermi="['crm:contact:delete-business']"
+      v-if="queryParams.contactId"
+    >
+      <Icon class="mr-5px" icon="ep:remove" />解除关联
+    </el-button>
   </el-row>
 
   <!-- 列表 -->
   <ContentWrap class="mt-10px">
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table
+      ref="businessRef"
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+    >
+      <el-table-column type="selection" width="55" v-if="queryParams.contactId" />
       <el-table-column label="商机名称" fixed="left" align="center" prop="name">
         <template #default="scope">
           <el-link type="primary" :underline="false" @click="openDetail(scope.row.id)">
@@ -33,18 +54,28 @@
 
   <!-- 表单弹窗：添加 -->
   <BusinessForm ref="formRef" @success="getList" />
+  <!-- 关联商机选择弹框 -->
+  <BusinessListModal
+    ref="businessModalRef"
+    :customer-id="props.customerId"
+    @success="createContactBusinessList"
+  />
 </template>
 <script setup lang="ts">
 import * as BusinessApi from '@/api/crm/business'
+import * as ContactApi from '@/api/crm/contact'
 import BusinessForm from './../BusinessForm.vue'
 import { BizTypeEnum } from '@/api/crm/permission'
 import { fenToYuanFormat } from '@/utils/formatter'
-import * as ContactApi from '@/api/crm/contact'
+import BusinessListModal from './BusinessListModal.vue'
+
+const message = useMessage() // 消息
 
 defineOptions({ name: 'CrmBusinessList' })
 const props = defineProps<{
   bizType: number // 业务类型
   bizId: number // 业务编号
+  customerId: number // 关联联系人与商机时，需要传入 customerId 进行筛选
 }>()
 
 const loading = ref(true) // 列表的加载中
@@ -53,7 +84,8 @@ const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  customerId: undefined as unknown // 允许 undefined + number
+  customerId: undefined as unknown, // 允许 undefined + number
+  contactId: undefined as unknown // 允许 undefined + number
 })
 
 /** 查询列表 */
@@ -62,21 +94,23 @@ const getList = async () => {
   try {
     // 置空参数
     queryParams.customerId = undefined
+    queryParams.contactId = undefined
     // 执行查询
     let data = { list: [], total: 0 }
     switch (props.bizType) {
       case BizTypeEnum.CRM_CUSTOMER:
         queryParams.customerId = props.bizId
         data = await BusinessApi.getBusinessPageByCustomer(queryParams)
-        
-        console.log(data)
+        break
+      case BizTypeEnum.CRM_CONTACT:
+        queryParams.contactId = props.bizId
+        data = await BusinessApi.getBusinessPageByContact(queryParams)
         break
       default:
         return
     }
     list.value = data.list
     total.value = data.total
-    console.log(list.value)
   } finally {
     loading.value = false
   }
@@ -100,6 +134,41 @@ const openDetail = (id: number) => {
   push({ name: 'CrmBusinessDetail', params: { id } })
 }
 
+/** 打开联系人与商机的关联弹窗 */
+const businessModalRef = ref()
+const openBusinessModal = () => {
+  businessModalRef.value.open()
+}
+const createContactBusinessList = async (businessIds: number[]) => {
+  const data = {
+    contactId: props.bizId,
+    businessIds: businessIds
+  } as ContactApi.ContactBusinessReqVO
+  businessRef.value.getSelectionRows().forEach((row: BusinessApi.BusinessVO) => {
+    data.businessIds.push(row.id)
+  })
+  await ContactApi.createContactBusinessList(data)
+  // 刷新列表
+  message.success('关联商机成功')
+  handleQuery()
+}
+
+/** 解除联系人与商机的关联 */
+const businessRef = ref()
+const deleteContactBusinessList = async () => {
+  const data = {
+    contactId: props.bizId,
+    businessIds: businessRef.value.getSelectionRows().map((row: BusinessApi.BusinessVO) => row.id)
+  } as ContactApi.ContactBusinessReqVO
+  if (data.businessIds.length === 0) {
+    return message.error('未选择商机')
+  }
+  await ContactApi.deleteContactBusinessList(data)
+  // 刷新列表
+  message.success('取关商机成功')
+  handleQuery()
+}
+
 /** 监听打开的 bizId + bizType，从而加载最新的列表 */
 watch(
   () => [props.bizId, props.bizType],