修改我的客户默认列表页筛选项变更逻辑

src/components/MyCustomerHeaderSearch/DefaultBlockSearch/searchBlock.ts

@@ -0,0 +1,83 @@
+// 我的客户默认列表页的有关筛选配置
+
+import { ref,computed } from "vue";
+
+import {
+    typeDataOption,
+    stageOption,
+    provinceOption,
+    cityOption,
+    groupDataOption,
+    memberConfigOption,
+    
+    defaultPageSearchParams,
+} from '../commonVar'
+
+// 默认列表头部筛选配置
+export const headerSearchList = computed(()=>[
+    {
+        label: '类型',
+        key: 'type',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            ...typeDataOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.type
+    },
+    {
+        label: '学段',
+        key: 'stage',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            ...stageOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.stage
+    },
+    {
+        label: '省份',
+        key: 'province',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            ...provinceOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.province
+    },
+    {
+        label: '地区',
+        key: 'city',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            ...cityOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.city,
+        hidden: defaultPageSearchParams.value.province == 'all' ? true : false
+    
+    },
+    {
+        label: '分组',
+        key: 'group',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            ...groupDataOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.group
+    },
+    {
+        label: '人员',
+        key: 'personnel',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            ...memberConfigOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.personnel
+    },
+]);
+
+
+

src/components/MyCustomerHeaderSearch/commonVar.ts

@@ -1,10 +1,38 @@
 import { ref } from "vue";
 
-
+/**
+ * 我的客户详情页的筛选项
+ */
 export const searchParams = ref({
     time:'all',
     product:'all',
     followStatus:'all',
     position:'all',
     startAndEndTime:[],
-})
+})
+
+
+/**
+ * 我的客户默认列表页
+ */
+// 我的客户默认列表页的筛选项
+export const defaultPageSearchParams = ref({
+    type:'all',
+    stage:'all',
+    province:'all',
+    city:'all',
+    group:'all',
+    personnel:'all',
+    queryStr:'',
+})
+
+// 我的客户筛选项的动态配置项
+export const  typeDataOption = ref([])
+export const  stageOption = ref([])
+export const  provinceOption = ref([])
+export const  cityOption = ref([])
+export const  groupDataOption = ref([])
+export const  memberConfigOption = ref([])
+// 全局固定项
+export const defaultProvinceOption = ref([])
+export const defaultMemberConfigOption = ref([])

src/views/myCustomer/index.vue

@@ -60,7 +60,10 @@
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import SearchBlock from '@/baseComponents/SearchBlock.vue';
-import {headerSearchList} from './searchBlock'
+
+import {headerSearchList} from '@/components/MyCustomerHeaderSearch/DefaultBlockSearch/searchBlock'
+
+
 import Table from '@/baseComponents/Table.vue';
 import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
 import {tableColumns} from './table'
@@ -73,24 +76,27 @@ import {
     updatePrivateCustomerApi,
 } from '@/api/myCustomer'
 
-const router = useRouter()
+
+// .默认列表 筛选项有关数据
+import {defaultPageSearchParams as searchParams,
+    typeDataOption,
+    stageOption,
+    provinceOption,
+    cityOption,
+    groupDataOption,
+    memberConfigOption,
+
+    defaultProvinceOption,
+    defaultMemberConfigOption,
+} from '@/components/MyCustomerHeaderSearch/commonVar'
 
 
 
+const router = useRouter()
+
 /**
  * 1.默认列表 筛选项有关数据
  */
-const searchParams = ref({
-    type:'all',
-    stage:'all',
-    province:'all',
-    city:'all',
-    group:'all',
-    personnel:'all',
-    queryStr:'',
-})
-const provinceConfig = ref([])  //省份的配置列表
-const memberConfigList = ref([]) //所有的人员配置列表
 
 
 // 获取头部筛选配置
@@ -98,19 +104,21 @@ const GetHeaderSearchOptions = async ()=>{
     let res = await getPrivateHeaderSearchParamsApi()
     if(res?.code == 200){
         const { groupData, memberData, regionData, stageData, typeData} = res.data
-        let typeDataOption = typeData?.map(item=>{
+        
+        // 动态筛选项赋值
+        typeDataOption.value = typeData?.map(item=>{
             return {
                 label:item.name,
                 value:item.id
             }
         }) || []
-        let stageOption = stageData?.map(item=>{
+        stageOption.value = stageData?.map(item=>{
             return {
                 label:item.name,
                 value:item.id
             }
         }) || []
-        provinceConfig.value = regionData?.map(item=>{
+        provinceOption.value = regionData?.map(item=>{
             return {
                 label:item.name,
                 value:item.id,
@@ -122,20 +130,28 @@ const GetHeaderSearchOptions = async ()=>{
                 }) || []
             }
         }) || []
-
-        let cityOption = provinceConfig.value.map(item=>{
+        defaultProvinceOption.value = regionData?.map(item=>{
+            return {
+                label:item.name,
+                value:item.id,
+                subData:item.subData?.map(city=>{
+                    return {
+                        label:city.name,
+                        value:city.id
+                    }
+                }) || []
+            }
+        }) || []
+        cityOption.value = defaultProvinceOption.value?.map(item=>{
             return item.subData
-        }).flat() || []
-
-
-        let groupDataOption = groupData?.map(item=>{
+        })?.flat() || []
+        groupDataOption.value = groupData?.map(item=>{
             return {
                 label:item.name,
                 value:item.id,
             }
         }) || []
-
-        memberConfigList.value =  memberData?.map(item=>{
+        memberConfigOption.value =  memberData?.map(item=>{
             return{
                 label:item.username,
                 value:item.id,
@@ -144,54 +160,14 @@ const GetHeaderSearchOptions = async ()=>{
                 provinceIds:item.provinceIds || []
             }
         })
-
-        headerSearchList.value = headerSearchList.value.map(item=>{
-            switch(item.key){
-                case 'type':
-                    item.options = [
-                        { label: '全部', value: 'all' },
-                        ...typeDataOption,
-                    ]
-                    item.defaultValue = searchParams.value[item.key]
-                    break
-                case 'stage':
-                    item.options = [
-                        { label: '全部', value: 'all' },
-                        ...stageOption,
-                    ]
-                    item.defaultValue = searchParams.value[item.key]
-                    break
-                case 'province':
-                    item.options = [
-                        { label: '全部', value: 'all' },
-                        ...provinceConfig.value,
-                    ]
-                    item.defaultValue = searchParams.value[item.key]
-                    break
-                case 'city':
-                    item.options = [
-                        { label: '全部', value: 'all' },
-                        ...cityOption,
-                    ]
-                    item.defaultValue = searchParams.value[item.key]
-                    item.hidden = searchParams.value.province == 'all' ? true : false
-                    break
-                case 'group':
-                    item.options = [
-                        { label: '全部', value: 'all' },
-                        ...groupDataOption,
-                    ]
-                    item.defaultValue = searchParams.value[item.key]
-                    break
-                case 'personnel':
-                    item.options = [
-                        { label: '全部', value: 'all' },
-                        ...memberConfigList.value,
-                    ]
-                    item.defaultValue = searchParams.value[item.key]
-                    break
+        defaultMemberConfigOption.value = memberData?.map(item=>{
+            return{
+                label:item.username,
+                value:item.id,
+                groupIds:item.groupIds || [],
+                cityIds:item.cityIds || [],
+                provinceIds:item.provinceIds || []
             }
-            return item
         })
     }
 }
@@ -203,98 +179,45 @@ const HandleBlockSearchChange = (params,key)=>{
         ...params
     }
     if(key == 'province'){
-        let cityOption = []  //市区配置
+        let cityOption1 = []  //市区配置
         let filterProvinceMemberOption = []  //人员配置
 
         if(searchParams.value.province !== 'all'){
             // 重新修改当前市区的 配置
-            cityOption = provinceConfig.value.find(item=>{
+            cityOption1 = defaultProvinceOption.value.find(item=>{
                 return item.value == params.province
             })?.subData || []
         }else{
-            cityOption = provinceConfig.value.map(item=>{
+            cityOption1 = defaultProvinceOption.value.map(item=>{
                 return item.subData
             }).flat() || []
         }
 
         // 过滤当前 省+分组 下的人员
-        filterProvinceMemberOption = memberConfigList.value.filter(item=>{
+        filterProvinceMemberOption = defaultMemberConfigOption.value.filter(item=>{
             return (params.group == 'all' ? 1 : item.groupIds.includes(params.group)) 
                 && (params.province == 'all' ? 1 : item.provinceIds.includes(params.province) )
         }) || []
 
-        headerSearchList.value = headerSearchList.value.map(item=>{
-            switch(item.key){
-                case 'city':
-                    item.options = [
-                        { label: '全部', value: 'all' },
-                        ...cityOption,
-                    ]
-                    item.defaultValue = 'all'
-                    item.hidden  = params.province == 'all' ? true : false
-                    break
-                case 'personnel':
-                    item.options = [
-                        { label: '全部', value: 'all' },
-                        ...filterProvinceMemberOption,
-                    ]
-                    item.defaultValue = 'all'
-                    break
-                default:
-                    item.defaultValue = searchParams.value[item.key]
-            }
-            return item
-        })
+        // 变更项赋值
         searchParams.value.city = 'all'
         searchParams.value.personnel = 'all'
-    }else if(key == 'city'){
-        let filterCityMemberOption = []  //人员配置
+        cityOption.value = [...cityOption1]
+        memberConfigOption.value = [...filterProvinceMemberOption]
+       
 
+    }else if(key == 'city' || key == 'group'){
+        let filterCityMemberOption = []  //人员配置
         // 过滤当前 省+地区+分组 下的人员
-        filterCityMemberOption = memberConfigList.value.filter(item=>{
+        filterCityMemberOption = defaultMemberConfigOption.value.filter(item=>{
             return  (params.group == 'all' ? 1 : item.groupIds.includes(params.group) )
                     && (params.province == 'all' ? 1 : item.provinceIds.includes(params.province) )
                     && (params.city == 'all' ? 1 :  item.cityIds.includes(params.city) )
         }) || []
 
-        headerSearchList.value = headerSearchList.value.map(item=>{
-            switch(item.key){
-                case 'personnel':
-                    item.options = [
-                        { label: '全部', value: 'all' },
-                        ...filterCityMemberOption,
-                    ]
-                    item.defaultValue = 'all'
-                    break
-                default:
-                    item.defaultValue = searchParams.value[item.key]
-            }
-            return item
-        })
-        searchParams.value.personnel = 'all'
-    }else if(key == 'group'){
-        let filterMemberOption = []
-
-        filterMemberOption = memberConfigList.value.filter(item=>{
-            return  (params.group == 'alll' ? 1 :  item.groupIds.includes(params.group))
-        }) || []
-        
-        // 这里边的 分组变更的时候，需要 过滤对应分组下的人员
-        headerSearchList.value = headerSearchList.value.map(item=>{
-            switch(item.key){
-                case 'personnel':
-                    item.options = [
-                        { label: '全部', value: 'all' },
-                        ...filterMemberOption,
-                    ]
-                    item.defaultValue = 'all'
-                    break
-                default:
-                    item.defaultValue = searchParams.value[item.key]
-            }
-            return item
-        })
+        // 变更项赋值
         searchParams.value.personnel = 'all'
+        memberConfigOption.value = [...filterCityMemberOption]
     }
     GetCustomerList()
 }

src/views/myCustomer/searchBlock.ts

@@ -1,50 +0,0 @@
-import { ref } from "vue";
-
-// 默认列表头部筛选配置
-export const headerSearchList = ref([
-    {
-        label: '类型',
-        key: 'type',
-        type: 'single',
-        options: [],
-        defaultValue: 'all'
-    },
-    {
-        label: '学段',
-        key: 'stage',
-        type: 'single',
-        options: [],
-        defaultValue: 'all'
-    },
-    {
-        label: '省份',
-        key: 'province',
-        type: 'single',
-        options: [],
-        defaultValue: 'all'
-    },
-    {
-        label: '地区',
-        key: 'city',
-        type: 'single',
-        options: [],
-        defaultValue: 'all'
-    },
-    {
-        label: '分组',
-        key: 'group',
-        type: 'single',
-        options: [],
-        defaultValue: 'all'
-    },
-    {
-        label: '人员',
-        key: 'personnel',
-        type: 'single',
-        options: [],
-        defaultValue: 'all'
-    },
-]);
-
-
-