搜索框删除手机 增加客户状态 地区搜索

表格增加客户状态 主要联系人可以点击 下次联系时间超过今天标红

src/api/crm/customer/index.ts

@@ -12,7 +12,7 @@ export interface CustomerVO {
   ownerUserName?: string // 负责人的用户名称
   ownerUserDept?: string // 负责人的部门名称
   lockStatus?: boolean
-  dealStatus?: boolean
+  dealStatus?: number // 成交状态 0-未成交 1-谈判中 2-已成交
   mobile: string // 手机号
   telephone: string // 电话
   qq: string // QQ
@@ -24,7 +24,8 @@ export interface CustomerVO {
   industryId: number // 所属行业
   level: number // 客户等级
   source: number // 客户来源
-  primaryContact: string // 主要联系人
+  primaryContactName: string // 主要联系人名称
+  primaryContactId: number // 主要联系人编号
   remark: string // 备注
   creator: string // 创建人
   creatorName?: string // 创建人名称

src/utils/dict.ts

@@ -205,6 +205,7 @@ export enum DICT_TYPE {
   CRM_BUSINESS_END_STATUS_TYPE = 'crm_business_end_status_type', // CRM 商机结束状态类型
   CRM_RECEIVABLE_RETURN_TYPE = 'crm_receivable_return_type', // CRM 回款的还款方式
   CRM_CUSTOMER_INDUSTRY = 'crm_customer_industry', // CRM 客户所属行业
+  CRM_CUSTOMER_DEAL_STATUS = 'crm_customer_deal_status', // CRM 客户成交状态
   CRM_CUSTOMER_LEVEL = 'crm_customer_level', // CRM 客户级别
   CRM_CUSTOMER_SOURCE = 'crm_customer_source', // CRM 客户来源
   CRM_PRODUCT_STATUS = 'crm_product_status', // CRM 商品状态

src/views/crm/customer/index.vue

@@ -17,15 +17,6 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="手机" prop="mobile">
-        <el-input
-          v-model="queryParams.mobile"
-          class="!w-240px"
-          clearable
-          placeholder="请输入手机"
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="客户类别" prop="industryId">
         <el-select
           v-model="queryParams.industryId"
@@ -41,6 +32,32 @@
           />
         </el-select>
       </el-form-item>
+      <el-form-item label="地区" prop="areaId">
+        <el-cascader
+          v-model="queryParams.areaId"
+          :options="areaList"
+          :props="defaultProps"
+          class="!w-240px"
+          clearable
+          filterable
+          placeholder="请选择地区"
+        />
+      </el-form-item>
+      <el-form-item label="成交状态" prop="dealStatus">
+        <el-select
+          v-model="queryParams.dealStatus"
+          class="!w-240px"
+          clearable
+          placeholder="请选择成交状态"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_DEAL_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery">
           <Icon class="mr-5px" icon="ep:search" />
@@ -79,10 +96,14 @@
       <el-tab-pane label="我参与的" name="2" />
       <el-tab-pane label="下属负责的" name="3" />
     </el-tabs>
-    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+    <el-table v-loading="loading" 
+    :data="list" 
+    :show-overflow-tooltip="true" 
+    :stripe="true"
+    >
       <el-table-column align="center" fixed="left" label="地区" prop="areaId" width="200px" >
         <template #default="scope">
-          <span>{{ scope.row.areaName || '--' }}</span>
+          <span>{{ scope.row.areaName || '暂无' }}</span>
         </template>
       </el-table-column>
       <el-table-column align="center" label="客户名称" prop="name" width="400">
@@ -93,20 +114,39 @@
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="主要联系人" prop="primaryContact" width="150"/>
+      <el-table-column align="center" label="主要联系人" prop="primaryContactName" width="150">
+        <template #default="scope">
+          <el-link :underline="false" type="primary" @click="openPrimaryContactDetail(scope.row.primaryContactId)">
+            {{ scope.row.primaryContactName }}
+          </el-link>
+        </template>
+      </el-table-column>
     
       <el-table-column align="center" label="客户类别" prop="industryId" width="150">
         <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="dealStatus" width="100px">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_DEAL_STATUS" :value="scope.row.dealStatus" />
+        </template>
+      </el-table-column>
+
       <el-table-column
         :formatter="dateFormatter2"
         align="center"
         label="下次联系时间"
         prop="contactNextTime"
         width="180px"
-      />
+      >
+        <template #default="scope">
+          <span :style="scope.row.contactNextTime && Number(scope.row.contactNextTime) < Date.now() ? 'color: #f56c6c; font-weight: bold;' : ''">
+            {{ dateFormatter2(scope.row, scope.column, scope.row.contactNextTime) }}
+          </span>
+        </template>
+      </el-table-column>
       
       <el-table-column align="center" label="责任人" prop="ownerUserName" width="100px" />
     
@@ -150,8 +190,10 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter2 } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as CustomerApi from '@/api/crm/customer'
+import * as AreaApi from '@/api/system/area'
 import CustomerForm from './CustomerForm.vue'
 import CustomerImportForm from './CustomerImportForm.vue'
+import { defaultProps } from '@/utils/tree'
 import { TabsPaneContext } from 'element-plus'
 
 defineOptions({ name: 'CrmCustomer' })
@@ -169,6 +211,7 @@ const queryParams = reactive({
   name: '',
   mobile: '',
   areaId: undefined,
+  dealStatus: undefined,
   industryId: undefined,
   level: undefined,
   source: undefined,
@@ -177,6 +220,7 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 const activeName = ref('1') // 列表 tab
+const areaList = ref([])
 
 /** tab 切换 */
 const handleTabClick = (tab: TabsPaneContext) => {
@@ -214,6 +258,11 @@ const openDetail = (id: number) => {
   push({ name: 'CrmCustomerDetail', params: { id } })
 }
 
+/** 打开主要联系人详情 */
+const openPrimaryContactDetail = (id: number) => {
+  push({ name: 'CrmContactDetail', params: { id } })
+}
+
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
@@ -265,5 +314,8 @@ watch(
 /** 初始化 **/
 onMounted(() => {
   getList()
+  AreaApi.getAreaTree().then(res => {
+    areaList.value = res
+  })
 })
 </script>