信息概览页接口渲染两侧数据和中间头部筛选栏数据

src/store/index.ts

@@ -9,7 +9,9 @@ interface RootState {
   count: number,
   managerHorizontalMenuItems:any[],
   siderNav:any[],
-  positionList:any[]
+  positionList:any[],  //职位列表
+  productList:any[],   //产品列表
+  followUpStatus:any[],  //跟进状态 列表
 }
 
 
@@ -54,6 +56,8 @@ const store = createStore<RootState>({
       },
     ],
     positionList:JSON.parse(sessionStorage.getItem('positionList') || '[]'),
+    productList:JSON.parse(sessionStorage.getItem('productList') || '[]'),
+    followUpStatus:JSON.parse(sessionStorage.getItem('followUpStatus') || '[]'),
   }),
   mutations: {
     increment(state: RootState) {
@@ -62,7 +66,15 @@ const store = createStore<RootState>({
     updatePositionList(state,data){
       sessionStorage.setItem('positionList',JSON.stringify(data))
       state.positionList = data
-    }
+    },
+    updateProductList(state,data){
+      sessionStorage.setItem('productList',JSON.stringify(data))
+      state.productList = data
+    },
+    updateFollowUpStatus(state,data){
+      sessionStorage.setItem('followUpStatus',JSON.stringify(data))
+      state.followUpStatus = data
+    },
   },
   actions: {
     increment({ commit }) {
@@ -92,7 +104,57 @@ const store = createStore<RootState>({
             commit('updatePositionList',[])
         }
       }
-    }
+    },
+    async updateProductList({commit,state},data){
+      if(data){
+        commit('updateProductList')
+      }else{
+        if(state.productList?.length > 0){
+          return
+        }
+        let productOption = []
+        let res = await getFieldListExcludeAreaApi(1)
+        if(res?.code == 200){
+            productOption = res.data?.map(item=>{
+                return{
+                    label:item.title,
+                    value:JSON.stringify({
+                        label:item.title,
+                        value:item.id
+                    })
+                }
+            }) || []
+            commit('updateProductList',productOption)
+        }else{
+            commit('updateProductList',[])
+        }
+      }
+    },
+    async updateFollowUpStatus({commit,state},data){
+      if(data){
+        commit('updateFollowUpStatus')
+      }else{
+        if(state.followUpStatus?.length > 0){
+          return
+        }
+        let followUpStatusOption = []
+        let res = await getFieldListExcludeAreaApi(3)
+        if(res?.code == 200){
+            followUpStatusOption = res.data?.map(item=>{
+                return{
+                    label:item.title,
+                    value:JSON.stringify({
+                        label:item.title,
+                        value:item.id
+                    })
+                }
+            }) || []
+            commit('updateFollowUpStatus',followUpStatusOption)
+        }else{
+            commit('updateFollowUpStatus',[])
+        }
+      }
+    },
   },
   getters: {
     count: (state: RootState) => state.count,

src/views/highSeasCustomer/highSeasCustomerDetail/customerStatusOverview/index.vue

@@ -2,21 +2,24 @@
     <div class="message_overview">
         <!-- 左侧：产品概览与最新状态 -->
         <div class="left_panel hide_scrollbar">
-            <div class="product_list">
-                <template v-for="(item,index) in productsStatus" :key="item.id" >
+            <div v-if="productDataList?.length > 0" class="product_list">
+                <template v-for="(item,index) in productDataList" :key="item.productId" >
                     <div class="list_item">
-                        <div class="item_title">{{item.name}}</div>
-                        <div class="item_info">跟进次数：{{item.followupTimes}}</div>
+                        <div class="item_title">{{item.productName}}</div>
+                        <div class="item_info">跟进次数：{{item.count}}</div>
                     </div>
-                    <div v-if="index !== (productsStatus?.length - 1)" class="page_solid_line" />
+                    <div v-if="index !== (productDataList?.length - 1)" class="page_solid_line" />
                 </template>
             </div>
+            <div v-else class="no_data_bg">
+                <span>暂无数据</span>
+            </div>
         </div>
 
         <!-- 中间：搜索与 我的跟进 -->
         <div class="center_panel">
             <div class="page_content hide_scrollbar"> 
-                <SearchBlock :searchList="ongoingFollowSearchList"></SearchBlock>
+                <SearchBlock :searchList="historyFollowSearchList" @searchChange="HandleSearchChange"></SearchBlock>
                 <FollowCard v-if="finalRenderData?.length > 0" style="margin-top: 16px;" :cardList="finalRenderData">
                     <template #operation="{row}">
                         <i></i>
@@ -63,39 +66,34 @@
 </template>
 
 <script setup lang="ts">
-import { ref,computed } from 'vue';
+import { ref,computed,onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+
 import SearchBlock from '@/baseComponents/SearchBlock.vue';
-import { ongoingFollowSearchList } from './searchBlock';
+import { historyFollowSearchList } from './searchBlock';
 import FollowCard from '@/components/FollowCard.vue';
 import Pagination from '@/baseComponents/Pagination.vue';
 
+import {
+    getHighSeasCustomerDetailApi,
+} from '@/api/highSeasCustomer'
 
 interface ProductStatusItm {
-    id:string,
-    name:string,
-    followupTimes:string
+    productId:string,
+    productName:string,
+    count:string
 }
-const productsStatus = ref<ProductStatusItm[]>([
-  {
-    id:'1',
-    name: '大数据精准教学',
-    followupTimes: '6次',
-  },
-  {
-    id:'2',
-    name: '智能判分系统',
-    followupTimes: '6次',
-  },
-  {
-    id:'3',
-    name: '材料采集系统',
-    followupTimes: '6次',
-  },
-]);
-
-
-// 进行中的跟进记录 
-const ongoingFollowRecord = ref([
+
+const route = useRoute()
+const store = useStore()
+
+// 左侧列表的跟进产品统计
+const productDataList = ref<ProductStatusItm[]>([]);
+
+
+// 历史跟进记录 
+const historyFollowRecord = ref([
     {
         id:'1',
         followUpTime: '26-02-19 19:00',
@@ -134,7 +132,7 @@ const ongoingFollowRecord = ref([
     }
 ])
 const finalRenderData = computed(()=>{
-    return   ongoingFollowRecord.value.map(item=>{
+    return   historyFollowRecord.value.map(item=>{
 
         let headerTags = []
         if(item.followUpStatus){
@@ -160,6 +158,70 @@ const finalRenderData = computed(()=>{
         }
     })
 })
+
+
+
+// 历史跟进 数据总览
+const historyFollowData = ref({
+    hsitoryProductNum:0,
+    historyPeopleNum:0,
+    followTimes:0,
+})
+
+
+
+/**
+ * 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. 列表分页参数及相关操作  ——待完善
+ */
 const currentPage = ref(1)
 const pageSize = ref(20)
 const totalNum = ref(0)
@@ -167,19 +229,51 @@ const handlePaginationChange = (params)=>{
     const {type,val} = params
     if(type == 'currentPage'){
         currentPage.value = val
-    }else if(type == 'pageSize'){
-        pageSize.value = val
     }
 }
 
 
-// 历史跟进 数据总览
-const historyFollowData = ref({
-    hsitoryProductNum:10,
-    historyPeopleNum:2,
-    followTimes:8,
-})
+// 获取联系人详情页面的有关数据———— 待完善
+const GetHighSeasCustomerDetail = async ()=>{
+    let params = {
+        customerId: route.query.id,     // 主id
+        // "startDatetime": "", //信息概览 跟进记录筛选参数
+        // "endDatetime": "",   //  信息概览 跟进记录筛选参数
+        "positionId": 0,     // 信息概览 的筛选参数 —— 职位id
+        "productId": 0,      // 产品id —— 信息概览 的筛选参数
+        "followId": 0,
+        "userId": 0,
+        pageNum:currentPage.value,
+        pageSize:pageSize.value
+    }
+
+    let res = await getHighSeasCustomerDetailApi(params)
+    if(res?.code == 200){
+        const {followOverViewData,productData} = res?.data
+        historyFollowData.value = {
+            hsitoryProductNum:followOverViewData.historyProductCount,
+            historyPeopleNum:followOverViewData.historyPersonCount,
+            followTimes:followOverViewData.historyFollowCount,
+        }
+
+        productDataList.value = productData?.map(item=>{
+            return {
+                productId:item.productId,
+                productName:item.productName,
+                count:item.count,
+            }
+        }) || []
+    }
+}
+
+
 
+onMounted(async ()=>{
+    await GetProductOption()
+    await GetFollowUpOption()
+
+    await GetHighSeasCustomerDetail()
+})
 
 </script>
 
@@ -236,6 +330,16 @@ const historyFollowData = ref({
                 }
             }
         }
+        .no_data_bg{
+            border: 1px solid #EBEEF5;
+            height: 150px;
+            background-position: 50% 10px;
+            background-size: 200px auto;
+            min-height: 150px;
+            span{
+                margin-top: 110px;
+            }
+        }
     }
 
     // 中间栏样式
@@ -275,10 +379,6 @@ const historyFollowData = ref({
     // 右侧栏样式
     .right_panel {
         width: 320px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        gap: 16px;
         .history_statistics{
             padding:16px 14px 12px 16px;
             background: #F8FAFE;
@@ -297,6 +397,7 @@ const historyFollowData = ref({
 
             .stat_numbers{
                 display: flex;
+                justify-content: space-between;
                 gap:10px;
                 align-items: center;
 
@@ -304,7 +405,9 @@ const historyFollowData = ref({
                     display: flex;
                     flex-direction: column;
                     align-items: center;
+                    gap:4px;
                     color: #666666;
+                    padding:0 12px;
 
                     .num{
                         font-weight: 600;

src/views/highSeasCustomer/highSeasCustomerDetail/customerStatusOverview/searchBlock.ts

@@ -1,64 +1,27 @@
 import { ref } from "vue"
 
-// 进行中的跟进 有关筛选条件
-export const ongoingFollowSearchList = ref([
+// 历史跟进 有关筛选条件
+export const historyFollowSearchList = ref([
   {
-    label: '时间',
-    key: 'time',
-    type: 'single', // 对应图片中顶部的一行独立选项
+    label: '人员',
+    key: 'member',
+    type: 'single', // 对应图片中第二行选项
     defaultValue: 'all',
-    options: [
-      { label: '全部', value: 'all' },
-      { label: '今天', value: 'today' },
-      { label: '昨天', value: 'yesterday' },
-      { label: '近3天', value: 'last_3_days' },
-      { label: '近1周', value: 'last_1_week' },
-      { label: '近1月', value: 'last_1_month' },
-      { label: '自定义', value: 'custom' }
-    ]
+    options: []
   },
   {
     label: '产品',
     key: 'product',
     type: 'single', // 对应图片中第二行选项
     defaultValue: 'all',
-    options: [
-      { label: '全部', value: 'all' },
-      { label: '大数据教学诊断', value: 'big_data_teaching' },
-      { label: '智能判分', value: 'smart_grading' },
-      { label: '材料采集', value: 'material_collection' },
-      { label: '校内通知', value: 'school_notification' },
-      { label: '校本研修', value: 'school_research' },
-      { label: '协同备课', value: 'collaborative_lesson_prep' }
-    ]
+    options: []
   },
   {
     label: '状态',
     key: 'status',
     type: 'single', // 对应图片中第三行选项
     defaultValue: 'all',
-    options: [
-      { label: '全部', value: 'all' },
-      { label: '线索建立', value: 'lead_establishment' },
-      { label: '需求调研', value: 'requirement_survey' },
-      { label: '方案演示', value: 'solution_demo' },
-      { label: '试用测试', value: 'trial_test' },
-      { label: '项目搁置', value: 'project_shelved' },
-      { label: '输单', value: 'lost_order' },
-      { label: '赢单', value: 'won_order' }
-    ]
+    options: []
   },
-  {
-    label: '职务',
-    key: 'job_title',
-    type: 'single', // 对应图片中第四行选项
-    defaultValue: 'all',
-    options: [
-      { label: '全部', value: 'all' },
-      { label: '校长', value: 'principal' },
-      { label: '副校长', value: 'vice_principal' },
-      { label: '信息主任', value: 'it_director' }
-    ]
-  }
 ])
 

src/views/highSeasCustomer/highSeasCustomerDetail/index.vue

@@ -99,7 +99,6 @@ import ConcactPeopleFormDialog from '@/components/ConcactPeopleFormDialog/index.
 
 
 import {
-    getHighSeasCustomerDetailApi,
     addContactPeopleApi,
     claimHighSeasCustomerApi,
     updateHighSeasCustomerApi,
@@ -243,7 +242,7 @@ const OpenSchoolFormDialog = ()=>{
 }
 
 
-/** 新增联系人有关数据  及操作 */
+/** 1. 新增联系人有关数据  及操作 */
 const concactPeopleVisible = ref(false)
 const concactPeopleDefaultFormData = ref({})
 const concactPeopleSubmitLoading = ref(false)
@@ -273,36 +272,12 @@ const HandleAddPeoplelConfirm = async (params:any)=>{
     }catch{}
     if(res?.code == 200){
         ElMessage.success(res?.msg)
-
         CloseConcactPeoplelFormDialog()
-        // 重新查询
-        await GetHighSeasCustomerDetail()
     }
 }
 
 
-
-// 获取联系人详情页面的有关数据————
-const GetHighSeasCustomerDetail = async ()=>{
-
-    let params = {
-        "startDatetime": "", //信息概览 跟进记录筛选参数
-        "endDatetime": "",   //  信息概览 跟进记录筛选参数
-        "customerId": route.query.id,     // 主id
-        "positionId": 0,     // 联系人/信息概览 的筛选参数 —— 职位id
-        "productId": 0,      // 产品id —— 信息概览 的筛选参数
-        "followId": 0,
-        "userId": 0,
-        "pageNum": 0,
-        "pageSize": 0
-    }
-
-    await getHighSeasCustomerDetailApi(params)
-}
-
-
 onMounted(async ()=>{
-    await GetHighSeasCustomerDetail()
 })
 
 </script>