|
|
@@ -20,7 +20,7 @@
|
|
|
<div class="center_panel">
|
|
|
<div class="page_content hide_scrollbar">
|
|
|
<SearchBlock :searchList="historyFollowSearchList" @searchChange="HandleSearchChange"></SearchBlock>
|
|
|
- <FollowCard v-if="finalRenderData?.length > 0" style="margin-top: 16px;" :cardList="finalRenderData">
|
|
|
+ <FollowCard v-if="historyFollowRecord?.length > 0" style="margin-top: 16px;" :cardList="historyFollowRecord">
|
|
|
<template #operation="{row}">
|
|
|
<i></i>
|
|
|
</template>
|
|
|
@@ -30,9 +30,13 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <Pagination :currentPage="currentPage"
|
|
|
+ <Pagination :showPageSize="true" :currentPage="currentPage"
|
|
|
:pageSize="pageSize" :totalNum="totalNum"
|
|
|
- @paginationChange="handlePaginationChange" />
|
|
|
+ @paginationChange="handlePaginationChange" >
|
|
|
+ <template #paginationDesc>
|
|
|
+ {{ `共 ${totalNum} 条数据` }}
|
|
|
+ </template>
|
|
|
+ </Pagination>
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧:跟进记录统计 -->
|
|
|
@@ -66,9 +70,8 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref,computed,onMounted } from 'vue';
|
|
|
+import { ref,onMounted } from 'vue';
|
|
|
import { useRoute } from 'vue-router';
|
|
|
-import { useStore } from 'vuex';
|
|
|
|
|
|
import SearchBlock from '@/baseComponents/SearchBlock.vue';
|
|
|
import { historyFollowSearchList } from './searchBlock';
|
|
|
@@ -86,80 +89,12 @@ interface ProductStatusItm {
|
|
|
}
|
|
|
|
|
|
const route = useRoute()
|
|
|
-const store = useStore()
|
|
|
|
|
|
// 左侧列表的跟进产品统计
|
|
|
const productDataList = ref<ProductStatusItm[]>([]);
|
|
|
|
|
|
-
|
|
|
// 历史跟进记录
|
|
|
-const historyFollowRecord = ref([
|
|
|
- {
|
|
|
- id:'1',
|
|
|
- followUpTime: '26-02-19 19:00',
|
|
|
- schoolName: '北京师达学校',
|
|
|
- followUpProduct: '大数据精准教学',
|
|
|
- followUpStatus: '赢单',
|
|
|
- audditStatus:'审核中',
|
|
|
- followUpUser: '张三',
|
|
|
- contactPerson: '严谨',
|
|
|
- jobTitle: '校长',
|
|
|
- followUpContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文'
|
|
|
- },
|
|
|
- {
|
|
|
- id:'2',
|
|
|
- followUpTime: '26-02-19 19:00',
|
|
|
- schoolName: '北京师达学校',
|
|
|
- followUpProduct: '大数据精准教学',
|
|
|
- followUpStatus: '方案演示',
|
|
|
- taskType:'预约',
|
|
|
- followUpUser: '张三',
|
|
|
- contactPerson: '严谨',
|
|
|
- jobTitle: '校长',
|
|
|
- followUpContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京\n文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号'
|
|
|
- },
|
|
|
- {
|
|
|
- id:'3',
|
|
|
- followUpTime: '26-02-19 19:00',
|
|
|
- schoolName: '北京师达学校',
|
|
|
- followUpProduct: '大数据精准教学',
|
|
|
- followUpStatus: '试用测试',
|
|
|
- taskType:'待办',
|
|
|
- followUpUser: '张三',
|
|
|
- contactPerson: '严谨',
|
|
|
- jobTitle: '校长',
|
|
|
- followUpContent: '跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京\n文案跟进文案跟进文案北京市东城区葱店西街56号跟进文案跟进文案跟进文案跟进文案跟进文案北京市东城区葱店西街56号'
|
|
|
- }
|
|
|
-])
|
|
|
-const finalRenderData = computed(()=>{
|
|
|
- return historyFollowRecord.value.map(item=>{
|
|
|
-
|
|
|
- let headerTags = []
|
|
|
- if(item.followUpStatus){
|
|
|
- headerTags.push(item.followUpStatus)
|
|
|
- }
|
|
|
- if(item.audditStatus){
|
|
|
- headerTags.push(item.audditStatus)
|
|
|
- }
|
|
|
- return {
|
|
|
- headerTitleList:[
|
|
|
- item.followUpTime,
|
|
|
- item.schoolName,
|
|
|
- item.followUpProduct
|
|
|
- ],
|
|
|
- headerTags,
|
|
|
- middleDesc:[
|
|
|
- `跟进人:${item.followUpUser}`,
|
|
|
- `联系人:${item.contactPerson}`,
|
|
|
- `职务:${item.jobTitle}`
|
|
|
- ],
|
|
|
- taskType:item.taskType,
|
|
|
- bottomDesc:`跟进内容:${item.followUpContent}`
|
|
|
- }
|
|
|
- })
|
|
|
-})
|
|
|
-
|
|
|
-
|
|
|
+const historyFollowRecord = ref([])
|
|
|
|
|
|
// 历史跟进 数据总览
|
|
|
const historyFollowData = ref({
|
|
|
@@ -169,109 +104,159 @@ const historyFollowData = ref({
|
|
|
})
|
|
|
|
|
|
|
|
|
-
|
|
|
-/**
|
|
|
- * 1. 筛选项列表有关的动态数据及操作
|
|
|
- */
|
|
|
-// 获取产品列表
|
|
|
-const GetProductOption = async()=>{
|
|
|
- await store.dispatch('updateProductList')
|
|
|
- let productOptions = store.state.productList
|
|
|
- historyFollowSearchList.value = historyFollowSearchList.value.map(item=>{
|
|
|
- if(item.key == 'product'){
|
|
|
- item.options = [
|
|
|
- {
|
|
|
- label:'全部',
|
|
|
- value:'all'
|
|
|
- },
|
|
|
- ...productOptions
|
|
|
- ]
|
|
|
- }
|
|
|
- return item
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 获取跟进状态列表
|
|
|
-const GetFollowUpOption = async()=>{
|
|
|
- await store.dispatch('updateFollowUpStatus')
|
|
|
- let followUpOption = store.state.followUpStatus
|
|
|
- historyFollowSearchList.value = historyFollowSearchList.value.map(item=>{
|
|
|
- if(item.key == 'status'){
|
|
|
- item.options = [
|
|
|
- {
|
|
|
- label:'全部',
|
|
|
- value:'all'
|
|
|
- },
|
|
|
- ...followUpOption
|
|
|
- ]
|
|
|
- }
|
|
|
- return item
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 筛选项变更触发的查询 —— 待完善
|
|
|
-const searchParams = ref({})
|
|
|
-const HandleSearchChange = (params,key)=>{
|
|
|
- searchParams.value = {
|
|
|
- ...searchParams.value,
|
|
|
- ...params,
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
/**
|
|
|
- * 2. 列表分页参数及相关操作 ——待完善
|
|
|
+ * 2. 列表分页参数及相关操作
|
|
|
*/
|
|
|
const currentPage = ref(1)
|
|
|
const pageSize = ref(20)
|
|
|
const totalNum = ref(0)
|
|
|
-const handlePaginationChange = (params)=>{
|
|
|
+const handlePaginationChange = async (params)=>{
|
|
|
const {type,val} = params
|
|
|
if(type == 'currentPage'){
|
|
|
currentPage.value = val
|
|
|
+ }else if(type == 'pageSize'){
|
|
|
+ pageSize.value = val
|
|
|
}
|
|
|
+ await GetHighSeasCustomerDetail()
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-// 获取联系人详情页面的有关数据———— 待完善
|
|
|
+// 跟进记录筛选条件
|
|
|
+const historyFollowSearchParams = ref({
|
|
|
+ member:'all',
|
|
|
+ product:'all',
|
|
|
+ followStatus:'all',
|
|
|
+})
|
|
|
+// 获取联系人详情页面的有关数据
|
|
|
const GetHighSeasCustomerDetail = async ()=>{
|
|
|
let params = {
|
|
|
- customerId: route.query.id, // 主id
|
|
|
- // "startDatetime": "", //信息概览 跟进记录筛选参数
|
|
|
- // "endDatetime": "", // 信息概览 跟进记录筛选参数
|
|
|
- "positionId": 0, // 信息概览 的筛选参数 —— 职位id
|
|
|
- "productId": 0, // 产品id —— 信息概览 的筛选参数
|
|
|
- "followId": 0,
|
|
|
- "userId": 0,
|
|
|
+ customerId: route.query.id,
|
|
|
+ productId: historyFollowSearchParams.value.product == 'all' ? '' : historyFollowSearchParams.value.product,
|
|
|
+ followUpStatus: historyFollowSearchParams.value.followStatus == 'all' ? '' : historyFollowSearchParams.value.followStatus,
|
|
|
+ followUpUser: historyFollowSearchParams.value.member == 'all' ? '' : historyFollowSearchParams.value.member,
|
|
|
pageNum:currentPage.value,
|
|
|
pageSize:pageSize.value
|
|
|
}
|
|
|
|
|
|
let res = await getHighSeasCustomerDetailApi(params)
|
|
|
if(res?.code == 200){
|
|
|
- const {followOverViewData,productData} = res?.data
|
|
|
+ const {followOverViewData,productOverviewData,
|
|
|
+ selectData,dataPageList
|
|
|
+ } = res?.data || {}
|
|
|
+ // 右侧 跟进记录
|
|
|
historyFollowData.value = {
|
|
|
hsitoryProductNum:followOverViewData.historyProductCount,
|
|
|
historyPeopleNum:followOverViewData.historyPersonCount,
|
|
|
followTimes:followOverViewData.historyFollowCount,
|
|
|
}
|
|
|
-
|
|
|
- productDataList.value = productData?.map(item=>{
|
|
|
+ // 左侧 产品列表
|
|
|
+ productDataList.value = productOverviewData?.map(item=>{
|
|
|
return {
|
|
|
productId:item.productId,
|
|
|
productName:item.productName,
|
|
|
count:item.count,
|
|
|
}
|
|
|
}) || []
|
|
|
+
|
|
|
+ // 中间 筛选项列表
|
|
|
+ const {memberData, productData, followData} = selectData || {}
|
|
|
+ let memberOptions = memberData?.map(item=>{
|
|
|
+ return {
|
|
|
+ label:item.username,
|
|
|
+ value:item.id,
|
|
|
+ }
|
|
|
+ }) || []
|
|
|
+ let productOptions = productData?.map(item=>{
|
|
|
+ return {
|
|
|
+ label:item.name,
|
|
|
+ value:item.id,
|
|
|
+ }
|
|
|
+ }) || []
|
|
|
+ let followOptions = followData?.map(item=>{
|
|
|
+ return {
|
|
|
+ label:item.name,
|
|
|
+ value:item.id,
|
|
|
+ }
|
|
|
+ }) || []
|
|
|
+ historyFollowSearchList.value = historyFollowSearchList.value.map(item=>{
|
|
|
+ switch(item.key){
|
|
|
+ case 'member':
|
|
|
+ item.options = [
|
|
|
+ {
|
|
|
+ label:'全部',
|
|
|
+ value:'all'
|
|
|
+ },
|
|
|
+ ...memberOptions
|
|
|
+ ]
|
|
|
+ break
|
|
|
+ case 'product':
|
|
|
+ item.options = [
|
|
|
+ {
|
|
|
+ label:'全部',
|
|
|
+ value:'all'
|
|
|
+ },
|
|
|
+ ...productOptions
|
|
|
+ ]
|
|
|
+ break
|
|
|
+ case 'followStatus':
|
|
|
+ item.options = [
|
|
|
+ {
|
|
|
+ label:'全部',
|
|
|
+ value:'all'
|
|
|
+ },
|
|
|
+ ...followOptions
|
|
|
+ ]
|
|
|
+ break
|
|
|
+ }
|
|
|
+ item.defaultValue = historyFollowSearchParams.value[item.key]
|
|
|
+ return item
|
|
|
+ })
|
|
|
+
|
|
|
+ // 中间历史跟进信息
|
|
|
+ totalNum.value = dataPageList.total
|
|
|
+ historyFollowRecord.value = dataPageList.records?.map(item=>{
|
|
|
+ let headerTags = []
|
|
|
+ if(item.followName){
|
|
|
+ headerTags.push(item.followName)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 审核状态:0-待审核,1-已通过,2-已驳回
|
|
|
+ if(item.auditStatus || item.auditStatus === 0){
|
|
|
+ headerTags.push(item.auditStatus === 0 ? '待审核' : (item.auditStatus === 1 ? '已通过' : '已驳回') )
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ headerTitleList:[
|
|
|
+ item.claimDatetime,
|
|
|
+ item.customerName,
|
|
|
+ item.productName
|
|
|
+ ],
|
|
|
+ headerTags,
|
|
|
+ middleDesc:[
|
|
|
+ `跟进人:${item.claimUserName}`,
|
|
|
+ `联系人:${item.customerPersonName}`,
|
|
|
+ `职务:${item.positionName}`
|
|
|
+ ],
|
|
|
+ // orderStatus 预约/待办状态,0-待开始,1-已结束,2-已取消(预约) null-已关闭(待办)
|
|
|
+ taskType:[0,1].includes(item.orderType) && [0,1].includes(item.orderStatus) ? (item.orderType === 0 ? '预约' : '待办') : '',
|
|
|
+ bottomDesc:`跟进内容:${item.followContent}`,
|
|
|
+ ...item,
|
|
|
+ }
|
|
|
+ }) || []
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 筛选项变更触发的查询
|
|
|
+const HandleSearchChange = async (params,key)=>{
|
|
|
+ historyFollowSearchParams.value = {
|
|
|
+ ...historyFollowSearchParams.value,
|
|
|
+ ...params,
|
|
|
}
|
|
|
+ await GetHighSeasCustomerDetail()
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
-onMounted(async ()=>{
|
|
|
- await GetProductOption()
|
|
|
- await GetFollowUpOption()
|
|
|
|
|
|
+onMounted(async ()=>{
|
|
|
await GetHighSeasCustomerDetail()
|
|
|
})
|
|
|
|