!334 feat: 客户配置 review 修改

* feat: 客户配置 review 修改 * feat: 客户配置 review 修改 * feat: 客户配置 review 修改 * feat: 客户配置 review 修改 * feat: 客户配置 review 修改 * feat: 客户配置 review 修改 * feat: 客户配置 review 修改 (cherry picked from commit 324d1e859e)
2023-11-26 12:02:08 +00:00 · 2023-11-26 12:02:08 +00:00 · 3853b763a0
parent 687ec00343
commit 3853b763a0
12 changed files with 181 additions and 144 deletions
--- a/src/api/crm/customerLimitConfig/index.ts
+++ b/src/api/crm/customerLimitConfig/index.ts
@ -9,6 +9,20 @@ export interface CustomerLimitConfigVO {
  dealCountEnabled?: boolean
 }

+/**
+ * 客户限制配置类型
+ */
+export enum LimitConfType {
+  /**
+   * 拥有客户数限制
+   */
+  CUSTOMER_QUANTITY_LIMIT = 1,
+  /**
+   * 锁定客户数限制
+   */
+  CUSTOMER_LOCK_LIMIT = 2
+}
+
 // 查询客户限制配置列表
 export const getCustomerLimitConfigPage = async (params) => {
  return await request.get({ url: `/crm/customer-limit-config/page`, params })
--- a/src/api/crm/customerPoolConfig/index.ts
+++ b/src/api/crm/customerPoolConfig/index.ts
@ -1,4 +1,5 @@
 import request from '@/config/axios'
+import { ConfigVO } from '@/api/infra/config'

 export interface CustomerPoolConfigVO {
  enabled?: boolean
@ -14,6 +15,6 @@ export const getCustomerPoolConfig = async () => {
 }

 // 更新客户公海规则设置
-export const updateCustomerPoolConfig = async (data: ConfigVO) => {
-  return await request.put({ url: `/crm/customer-pool-config/update`, data })
+export const saveCustomerPoolConfig = async (data: ConfigVO) => {
+  return await request.put({ url: `/crm/customer-pool-config/save`, data })
 }
--- a/src/views/crm/clue/ClueForm.vue
+++ b/src/views/crm/clue/ClueForm.vue
@ -10,9 +10,15 @@
      <el-form-item label="线索名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入线索名称" />
      </el-form-item>
-      <!-- TODO wanwan 客户选择 -->
      <el-form-item label="客户" prop="customerId">
-        <el-input v-model="formData.customerId" placeholder="请选择客户" />
+        <el-select v-model="formData.customerId" clearable placeholder="请选择客户">
+          <el-option
+            v-for="item in customerList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
      </el-form-item>
      <el-form-item label="下次联系时间" prop="contactNextTime">
        <el-date-picker
@ -47,6 +53,7 @@
 </template>
 <script setup lang="ts">
 import * as ClueApi from '@/api/crm/clue'
+import * as CustomerApi from '@/api/crm/customer'

 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@ -55,6 +62,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const customerList = ref([]) // 客户列表
 const formData = ref({
  id: undefined,
  name: undefined,
@ -79,6 +87,12 @@ const open = async (type: string, id?: number) => {
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
+  const customerData = await CustomerApi.getCustomerPage({
+    pageNo: 1,
+    pageSize: 100,
+    pool: false
+  })
+  customerList.value = customerData.list
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
--- a/src/views/crm/config/customerLimitConfig/CustomerLimitConfigForm.vue
+++ b/src/views/crm/config/customerLimitConfig/CustomerLimitConfigForm.vue
@ -57,11 +57,11 @@
 </template>
 <script setup lang="ts">
 import * as CustomerLimitConfigApi from '@/api/crm/customerLimitConfig'
-import { LimitConfType } from '@/views/crm/customerLimitConfig/customerLimitConf'
 import * as DeptApi from '@/api/system/dept'
 import { defaultProps, handleTree } from '@/utils/tree'
 import * as UserApi from '@/api/system/user'
 import { cloneDeep } from 'lodash-es'
+import { LimitConfType } from '@/api/crm/customerLimitConfig'

 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
--- a/src/views/crm/config/customerLimitConfig/CustomerLimitConfigList.vue
+++ b/src/views/crm/config/customerLimitConfig/CustomerLimitConfigList.vue
@ -19,8 +19,16 @@
  >
    <el-table-column label="编号" align="center" prop="id" />
    <el-table-column label="规则类型" align="center" prop="type" />
-    <el-table-column label="规则适用人群" align="center" prop="userNames" />
-    <el-table-column label="规则适用部门" align="center" prop="deptNames" />
+    <el-table-column
+      label="规则适用人群"
+      align="center"
+      :formatter="(row) => row.users?.map((user: any) => user.nickname).join('，')"
+    />
+    <el-table-column
+      label="规则适用部门"
+      align="center"
+      :formatter="(row) => row.depts?.map((dept: any) => dept.name).join('，')"
+    />
    <el-table-column
      :label="
        confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT ? '拥有客户数上限' : '锁定客户数上限'
@ -80,11 +88,11 @@
 <script setup lang="ts">
 import { dateFormatter } from '@/utils/formatTime'
 import * as CustomerLimitConfigApi from '@/api/crm/customerLimitConfig'
-import CustomerLimitConfigForm from '@/views/crm/customerLimitConfig/CustomerLimitConfigForm.vue'
-import { LimitConfType } from '@/views/crm/customerLimitConfig/customerLimitConf'
+import CustomerLimitConfigForm from '@/views/crm/config/customerLimitConfig/CustomerLimitConfigForm.vue'
 import { DICT_TYPE } from '@/utils/dict'
+import { LimitConfType } from '@/api/crm/customerLimitConfig'

-defineOptions({ name: 'CustomerLimitConfDetails' })
+defineOptions({ name: 'CustomerLimitConfigList' })

 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
--- a/src/views/crm/config/customerLimitConfig/customerLimitConfig.ts
+++ b/src/views/crm/config/customerLimitConfig/customerLimitConfig.ts
@ -0,0 +1,4 @@
+// TODO 可以挪到它对应的 api.ts 文件里哈
+/**
+ * 客户限制配置类型
+ */
--- a/src/views/crm/config/customerLimitConfig/index.vue
+++ b/src/views/crm/config/customerLimitConfig/index.vue
@ -0,0 +1,19 @@
+<template>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-tabs>
+      <el-tab-pane label="拥有客户数限制">
+        <CustomerLimitConfigList :confType="LimitConfType.CUSTOMER_QUANTITY_LIMIT" />
+      </el-tab-pane>
+      <el-tab-pane label="锁定客户数限制">
+        <CustomerLimitConfigList :confType="LimitConfType.CUSTOMER_LOCK_LIMIT" />
+      </el-tab-pane>
+    </el-tabs>
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import CustomerLimitConfigList from '@/views/crm/config/customerLimitConfig/CustomerLimitConfigList.vue'
+import { LimitConfType } from '@/api/crm/customerLimitConfig'
+
+defineOptions({ name: 'CrmCustomerLimitConfig' })
+</script>
--- a/src/views/crm/config/customerPoolConfig/index.vue
+++ b/src/views/crm/config/customerPoolConfig/index.vue
@ -23,7 +23,7 @@
        </template>
        <!-- 表单 -->
        <el-form-item label="客户公海规则设置" prop="enabled">
-          <el-radio-group v-model="formData.enabled" class="ml-4">
+          <el-radio-group v-model="formData.enabled" @change="changeEnable" class="ml-4">
            <el-radio :label="false" size="large">不启用</el-radio>
            <el-radio :label="true" size="large">启用</el-radio>
          </el-radio-group>
@ -36,7 +36,11 @@
            天未成交
          </el-form-item>
          <el-form-item label="提前提醒设置" prop="notifyEnabled">
-            <el-radio-group v-model="formData.notifyEnabled" class="ml-4">
+            <el-radio-group
+              v-model="formData.notifyEnabled"
+              @change="changeNotifyEnable"
+              class="ml-4"
+            >
              <el-radio :label="false" size="large">不提醒</el-radio>
              <el-radio :label="true" size="large">提醒</el-radio>
            </el-radio-group>
@ -52,11 +56,10 @@
  </ContentWrap>
 </template>
 <script setup lang="ts">
-import * as CustomerPoolConfApi from '@/api/crm/customerPoolConf'
+import * as CustomerPoolConfigApi from '@/api/crm/customerPoolConfig'
 import { CardTitle } from '@/components/Card'

-// TODO @wanwan：CustomerPoolConf =》 CustomerPoolConfig；另外，我们在 crm 目录下，新建一个 config 目录，然后把 customerPoolConfig 和 customerLimitConfig 都挪进
-defineOptions({ name: 'CustomerPoolConf' })
+defineOptions({ name: 'CrmCustomerPoolConfig' })

 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
@ -78,7 +81,7 @@ const formRef = ref() // 表单 Ref
 const getConfig = async () => {
  try {
    formLoading.value = true
-    const data = await CustomerPoolConfApi.getCustomerPoolConfig()
+    const data = await CustomerPoolConfigApi.getCustomerPoolConfig()
    if (data === null) {
      return
    }
@ -97,8 +100,8 @@ const onSubmit = async () => {
  // 提交请求
  formLoading.value = true
  try {
-    const data = formData.value as unknown as CustomerPoolConfApi.CustomerPoolConfigVO
-    await CustomerPoolConfApi.updateCustomerPoolConfig(data)
+    const data = formData.value as unknown as CustomerPoolConfigApi.CustomerPoolConfigVO
+    await CustomerPoolConfigApi.saveCustomerPoolConfig(data)
    message.success(t('common.updateSuccess'))
    await getConfig()
    formLoading.value = false
@ -107,27 +110,22 @@ const onSubmit = async () => {
  }
 }

-// TODO @wanwan：el-radio-group 选择后，触发会不会更好哈；
-watch(
-  () => formData.value.enabled,
-  (val: boolean) => {
-    if (!val) {
-      formData.value.contactExpireDays = undefined
-      formData.value.dealExpireDays = undefined
-      formData.value.notifyEnabled = false
-      formData.value.notifyDays = undefined
-    }
+/** 更改客户公海规则设置 */
+const changeEnable = () => {
+  if (!formData.value.enabled) {
+    formData.value.contactExpireDays = undefined
+    formData.value.dealExpireDays = undefined
+    formData.value.notifyEnabled = false
+    formData.value.notifyDays = undefined
  }
-)
-// TODO @wanwan：el-radio-group 选择后，触发会不会更好哈；
-watch(
-  () => formData.value.notifyEnabled,
-  (val: boolean) => {
-    if (!val) {
-      formData.value.notifyDays = undefined
-    }
+}
+
+/** 更改提前提醒设置 */
+const changeNotifyEnable = () => {
+  if (!formData.value.notifyEnabled) {
+    formData.value.notifyDays = undefined
  }
-)
+}

 onMounted(() => {
  getConfig()
--- a/src/views/crm/customer/detail/CustomerDetailsTop.vue
+++ b/src/views/crm/customer/detail/CustomerDetailsTop.vue
@ -0,0 +1,85 @@
+<template>
+  <div v-loading="loading">
+    <div class="flex items-start justify-between">
+      <div>
+        <!-- 左上：客户基本信息 -->
+        <CustomerBasicInfo :customer="customer" />
+      </div>
+      <div>
+        <!-- 右上：按钮 -->
+        <el-button v-hasPermi="['crm:customer:update']" @click="openForm('update', customer.id)">
+          编辑
+        </el-button>
+        <el-button>更改成交状态</el-button>
+      </div>
+    </div>
+    <el-row class="mt-10px">
+      <el-button>
+        <Icon class="mr-5px" icon="ph:calendar-fill" />
+        创建任务
+      </el-button>
+      <el-button>
+        <Icon class="mr-5px" icon="carbon:email" />
+        发送邮件
+      </el-button>
+      <el-button>
+        <Icon class="mr-5px" icon="system-uicons:contacts" />
+        创建联系人
+      </el-button>
+      <el-button>
+        <Icon class="mr-5px" icon="ep:opportunity" />
+        创建商机
+      </el-button>
+      <el-button>
+        <Icon class="mr-5px" icon="clarity:contract-line" />
+        创建合同
+      </el-button>
+      <el-button>
+        <Icon class="mr-5px" icon="icon-park:income-one" />
+        创建回款
+      </el-button>
+      <el-button>
+        <Icon class="mr-5px" icon="fluent:people-team-add-20-filled" />
+        添加团队成员
+      </el-button>
+    </el-row>
+  </div>
+  <ContentWrap class="mt-10px">
+    <el-descriptions :column="5" direction="vertical">
+      <el-descriptions-item label="客户级别">
+        <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
+      </el-descriptions-item>
+      <el-descriptions-item label="成交状态">
+        {{ customer.dealStatus ? '已成交' : '未成交' }}
+      </el-descriptions-item>
+      <el-descriptions-item label="负责人">
+        {{ customer.ownerUserName }}
+      </el-descriptions-item>
+      <!-- TODO wanwan 首要联系人? -->
+      <el-descriptions-item label="首要联系人" />
+      <!-- TODO wanwan 首要联系人电话? -->
+      <el-descriptions-item label="首要联系人电话">
+        {{ customer.mobile }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <CustomerForm ref="formRef" @success="emit('refresh')" />
+</template>
+<script setup lang="ts">
+import * as CustomerApi from '@/api/crm/customer'
+import { DICT_TYPE } from '@/utils/dict'
+import CustomerBasicInfo from '@/views/crm/customer/detail/CustomerBasicInfo.vue'
+import CustomerForm from '@/views/crm/customer/CustomerForm.vue'
+
+const { customer, loading } = defineProps<{ customer: CustomerApi.CustomerVO; loading: boolean }>()
+
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+const formRef = ref()
+
+const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
+</script>
--- a/src/views/crm/customer/detail/index.vue
+++ b/src/views/crm/customer/detail/index.vue
@ -1,69 +1,5 @@
 <template>
-  <!-- TODO @wanwan：要不要把上面这一整块，搞成一个组件，就是把 下面 + Details + BasitcInfo 合并成一个 -->
-  <div v-loading="loading">
-    <div class="flex items-start justify-between">
-      <div>
-        <!-- 左上：客户基本信息 -->
-        <CustomerBasicInfo :customer="customer" />
-      </div>
-      <div>
-        <!-- 右上：按钮 -->
-        <el-button v-hasPermi="['crm:customer:update']" @click="openForm('update', customer.id)">
-          编辑
-        </el-button>
-        <el-button>更改成交状态</el-button>
-      </div>
-    </div>
-    <el-row class="mt-10px">
-      <el-button>
-        <Icon class="mr-5px" icon="ph:calendar-fill" />
-        创建任务
-      </el-button>
-      <el-button>
-        <Icon class="mr-5px" icon="carbon:email" />
-        发送邮件
-      </el-button>
-      <el-button>
-        <Icon class="mr-5px" icon="system-uicons:contacts" />
-        创建联系人
-      </el-button>
-      <el-button>
-        <Icon class="mr-5px" icon="ep:opportunity" />
-        创建商机
-      </el-button>
-      <el-button>
-        <Icon class="mr-5px" icon="clarity:contract-line" />
-        创建合同
-      </el-button>
-      <el-button>
-        <Icon class="mr-5px" icon="icon-park:income-one" />
-        创建回款
-      </el-button>
-      <el-button>
-        <Icon class="mr-5px" icon="fluent:people-team-add-20-filled" />
-        添加团队成员
-      </el-button>
-    </el-row>
-  </div>
-  <ContentWrap class="mt-10px">
-    <el-descriptions :column="5" direction="vertical">
-      <el-descriptions-item label="客户级别">
-        <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
-      </el-descriptions-item>
-      <el-descriptions-item label="成交状态">
-        {{ customer.dealStatus ? '已成交' : '未成交' }}
-      </el-descriptions-item>
-      <el-descriptions-item label="负责人">
-        {{ customer.ownerUserName }}
-      </el-descriptions-item>
-      <!-- TODO wanwan 首要联系人? -->
-      <el-descriptions-item label="首要联系人" />
-      <!-- TODO wanwan 首要联系人电话? -->
-      <el-descriptions-item label="首要联系人电话">
-        {{ customer.mobile }}
-      </el-descriptions-item>
-    </el-descriptions>
-  </ContentWrap>
+  <CustomerDetailsTop :customer="customer" :loading="loading" @refresh="getCustomerData(id)" />
  <el-col>
    <el-tabs>
      <el-tab-pane label="详细资料">
@ -107,9 +43,6 @@
      <el-tab-pane label="发票" lazy> 发票</el-tab-pane>
    </el-tabs>
  </el-col>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <CustomerForm ref="formRef" @success="getCustomerData(id)" />
 </template>

 <script lang="ts" setup>
@ -145,11 +78,6 @@ const getCustomerData = async (id: number) => {
  }
 }

-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
 /**
 * 初始化
 */
--- a/src/views/crm/customerLimitConfig/customerLimitConf.ts
+++ b/src/views/crm/customerLimitConfig/customerLimitConf.ts
@ -1,14 +0,0 @@
-// TODO 可以挪到它对应的 api.ts 文件里哈
-/**
- * 客户限制配置类型
- */
-export enum LimitConfType {
-  /**
-   * 拥有客户数限制
-   */
-  CUSTOMER_QUANTITY_LIMIT = 1,
-  /**
-   * 锁定客户数限制
-   */
-  CUSTOMER_LOCK_LIMIT = 2
-}
--- a/src/views/crm/customerLimitConfig/index.vue
+++ b/src/views/crm/customerLimitConfig/index.vue
@ -1,20 +0,0 @@
-<template>
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-tabs>
-      <el-tab-pane label="拥有客户数限制">
-        <!-- TODO @wanwan：CustomerLimitConfigList，因为它是列表哈 -->
-        <CustomerLimitConfDetails :confType="LimitConfType.CUSTOMER_QUANTITY_LIMIT" />
-      </el-tab-pane>
-      <el-tab-pane label="锁定客户数限制">
-        <CustomerLimitConfDetails :confType="LimitConfType.CUSTOMER_LOCK_LIMIT" />
-      </el-tab-pane>
-    </el-tabs>
-  </ContentWrap>
-</template>
-<script setup lang="ts">
-import CustomerLimitConfDetails from '@/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue'
-import { LimitConfType } from '@/views/crm/customerLimitConfig/customerLimitConf'
-
-defineOptions({ name: 'CrmCustomerLimitConfig' })
-</script>