📖 CRM：线索 clue 新增/修改的完善

src/api/crm/clue/index.ts

@@ -2,22 +2,33 @@ import request from '@/config/axios'
 import { TransferReqVO } from '@/api/crm/customer'
 
 export interface ClueVO {
-  id: number
-  transformStatus: boolean
-  followUpStatus: boolean
-  name: string
-  customerId: number
-  contactNextTime: Date
-  telephone: string
-  mobile: string
-  address: string
-  ownerUserId: number
-  contactLastTime: Date
-  remark: string
+  id: number // 编号
+  name: string // 线索名称
+  followUpStatus: boolean // 跟进状态
+  contactLastTime: Date // 最后跟进时间
+  contactLastContent: string // 最后跟进内容
+  contactNextTime: Date // 下次联系时间
+  ownerUserId: number // 负责人的用户编号
+  ownerUserName?: string // 负责人的用户名称
+  ownerUserDept?: string // 负责人的部门名称
+  transformStatus: boolean // 转化状态
+  customerId: number // 客户编号
+  customerName?: string // 客户名称
+  mobile: string // 手机号
+  telephone: string // 电话
+  qq: string // QQ
+  wechat: string // wechat
+  email: string // email
+  areaId: number // 所在地
+  detailAddress: string // 详细地址
+  industryId: number // 所属行业
+  level: number // 客户等级
+  source: number // 客户来源
+  remark: string // 备注
 }
 
 // 查询线索列表
-export const getCluePage = async (params) => {
+export const getCluePage = async (params: any) => {
   return await request.get({ url: `/crm/clue/page`, params })
 }
 

src/views/crm/backlog/tables/FollowCustomer.vue

@@ -51,7 +51,7 @@
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="scope.row.industryId" />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="客户等级" prop="level" width="120">
+      <el-table-column align="center" label="客户级别" prop="level" width="120">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
         </template>

src/views/crm/backlog/tables/PutInPoolRemind.vue

@@ -49,7 +49,7 @@
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="scope.row.industryId" />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="客户等级" prop="level" width="120">
+      <el-table-column align="center" label="客户级别" prop="level" width="120">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
         </template>

src/views/crm/backlog/tables/TodayCustomer.vue

@@ -63,7 +63,7 @@
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="scope.row.industryId" />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="客户等级" prop="level" width="120">
+      <el-table-column align="center" label="客户级别" prop="level" width="120">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
         </template>

src/views/crm/business/BusinessForm.vue

@@ -36,7 +36,7 @@
                 <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="scope.row.source" />
               </template>
             </el-table-column>
-            <el-table-column label="客户等级" align="center" prop="level" width="120">
+            <el-table-column label="客户级别" align="center" prop="level" width="120">
               <template #default="scope">
                 <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
               </template>

src/views/crm/clue/ClueForm.vue

@@ -1,74 +1,178 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
     <el-form
       ref="formRef"
+      v-loading="formLoading"
       :model="formData"
       :rules="formRules"
       label-width="100px"
-      v-loading="formLoading"
     >
-      <el-form-item label="线索名称" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入线索名称" />
-      </el-form-item>
-      <el-form-item label="下次联系时间" prop="contactNextTime">
-        <el-date-picker
-          v-model="formData.contactNextTime"
-          type="date"
-          value-format="x"
-          placeholder="选择下次联系时间"
-        />
-      </el-form-item>
-      <el-form-item label="电话" prop="telephone">
-        <el-input v-model="formData.telephone" placeholder="请输入电话" />
-      </el-form-item>
-      <el-form-item label="手机号" prop="mobile">
-        <el-input v-model="formData.mobile" placeholder="请输入手机号" />
-      </el-form-item>
-      <el-form-item label="地址" prop="address">
-        <el-input v-model="formData.address" placeholder="请输入地址" />
-      </el-form-item>
-      <el-form-item v-if="formType === 'create'" label="负责人" prop="userIds" span="24">
-        <el-select v-model="formData.ownerUserId">
-          <el-option
-              v-for="item in userOptions"
-              :key="item.id"
-              :label="item.nickname"
-              :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input v-model="formData.remark" placeholder="请输入备注" />
-      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="线索名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入线索名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="客户来源" prop="source">
+            <el-select v-model="formData.source" placeholder="请选择客户来源" class="w-1/1">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="手机" prop="mobile">
+            <el-input v-model="formData.mobile" placeholder="请输入手机" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="负责人" prop="ownerUserId">
+            <el-select
+              v-model="formData.ownerUserId"
+              :disabled="formType !== 'create'"
+              class="w-1/1"
+            >
+              <el-option
+                v-for="item in userOptions"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="电话" prop="telephone">
+            <el-input v-model="formData.telephone" placeholder="请输入电话" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="formData.email" placeholder="请输入邮箱" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="微信" prop="wechat">
+            <el-input v-model="formData.wechat" placeholder="请输入微信" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="QQ" prop="qq">
+            <el-input v-model="formData.qq" placeholder="请输入 QQ" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="客户行业" prop="industryId">
+            <el-select v-model="formData.industryId" placeholder="请选择客户行业" class="w-1/1">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="客户级别" prop="level">
+            <el-select v-model="formData.level" placeholder="请选择客户级别" class="w-1/1">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="地址" prop="areaId">
+            <el-tree-select
+              v-model="formData.areaId"
+              :data="areaList"
+              :props="defaultProps"
+              :render-after-expand="true"
+              class="w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="详细地址" prop="detailAddress">
+            <el-input v-model="formData.detailAddress" placeholder="请输入详细地址" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="下次联系时间" prop="contactNextTime">
+            <el-date-picker
+              v-model="formData.contactNextTime"
+              placeholder="选择下次联系时间"
+              type="datetime"
+              value-format="x"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-col :span="24">
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-col>
     </el-form>
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as ClueApi from '@/api/crm/clue'
-import {CACHE_KEY, useCache} from "@/hooks/web/useCache";
-import * as UserApi from "@/api/system/user";
+import * as AreaApi from '@/api/system/area'
+import { defaultProps } from '@/utils/tree'
+import * as UserApi from '@/api/system/user'
+import { useUserStore } from '@/store/modules/user'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const areaList = ref([]) // 地区列表
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 const formData = ref({
   id: undefined,
   name: undefined,
   contactNextTime: undefined,
-  telephone: undefined,
+  ownerUserId: 0,
   mobile: undefined,
-  address: undefined,
-  ownerUserId: undefined,
-  contactLastTime: undefined,
+  telephone: undefined,
+  qq: undefined,
+  wechat: undefined,
+  email: undefined,
+  areaId: undefined,
+  detailAddress: undefined,
+  industryId: undefined,
+  level: undefined,
+  source: undefined,
   remark: undefined
 })
 const formRules = reactive({
@@ -92,13 +196,13 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
+  // 获得地区列表
+  areaList.value = await AreaApi.getAreaTree()
   // 获得用户列表
   userOptions.value = await UserApi.getSimpleUserList()
-  // 新建时负责人默认为登录人
+  // 默认新建时选中自己
   if (formType.value === 'create') {
-    const { wsCache } = useCache()
-    const user = wsCache.get(CACHE_KEY.USER).user
-    formData.value.ownerUserId = user.id
+    formData.value.ownerUserId = useUserStore().getUser.id
   }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@@ -135,11 +239,17 @@ const resetForm = () => {
     id: undefined,
     name: undefined,
     contactNextTime: undefined,
-    telephone: undefined,
+    ownerUserId: 0,
     mobile: undefined,
-    address: undefined,
-    ownerUserId: undefined,
-    contactLastTime: undefined,
+    telephone: undefined,
+    qq: undefined,
+    wechat: undefined,
+    email: undefined,
+    areaId: undefined,
+    detailAddress: undefined,
+    industryId: undefined,
+    level: undefined,
+    source: undefined,
     remark: undefined
   }
   formRef.value?.resetFields()

src/views/crm/clue/index.vue

@@ -67,13 +67,13 @@
       <el-table-column label="手机号" align="center" prop="mobile" width="120" />
       <el-table-column label="电话" align="center" prop="telephone" width="130" />
       <el-table-column label="邮箱" align="center" prop="email" width="180" />
-      <el-table-column label="地址" align="center" prop="address" width="180" />
+      <el-table-column label="地址" align="center" prop="detailAddress" width="180" />
       <el-table-column align="center" label="客户行业" prop="industryId" width="100">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="scope.row.industryId" />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="客户等级" prop="level" width="130">
+      <el-table-column align="center" label="客户级别" prop="level" width="135">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
         </template>

src/views/crm/customer/CustomerForm.vue

@@ -40,8 +40,8 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="客户等级" prop="level">
-            <el-select v-model="formData.level" placeholder="请选择客户等级">
+          <el-form-item label="客户级别" prop="level">
+            <el-select v-model="formData.level" placeholder="请选择客户级别">
               <el-option
                 v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL)"
                 :key="dict.value"

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

@@ -15,7 +15,7 @@
           <el-descriptions-item label="客户来源">
             <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="customer.source" />
           </el-descriptions-item>
-          <el-descriptions-item label="客户等级">
+          <el-descriptions-item label="客户级别">
             <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
           </el-descriptions-item>
           <el-descriptions-item label="手机">{{ customer.mobile }}</el-descriptions-item>

src/views/crm/customer/index.vue

@@ -41,12 +41,12 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="客户等级" prop="level">
+      <el-form-item label="客户级别" prop="level">
         <el-select
           v-model="queryParams.level"
           class="!w-240px"
           clearable
-          placeholder="请选择客户等级"
+          placeholder="请选择客户级别"
         >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL)"
@@ -130,7 +130,7 @@
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="scope.row.industryId" />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="客户等级" prop="level" width="130">
+      <el-table-column align="center" label="客户级别" prop="level" width="130">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
         </template>

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

@@ -41,12 +41,12 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="客户等级" prop="level">
+      <el-form-item label="客户级别" prop="level">
         <el-select
           v-model="queryParams.level"
           class="!w-240px"
           clearable
-          placeholder="请选择客户等级"
+          placeholder="请选择客户级别"
         >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL)"
@@ -117,7 +117,7 @@
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="scope.row.industryId" />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="客户等级" prop="level" width="120">
+      <el-table-column align="center" label="客户级别" prop="level" width="120">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
         </template>