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

src/components/CustomerFollowUpHeaderSearch/DefaultBlockSearch/formSearchGroup.ts

@@ -0,0 +1,13 @@
+import { computed } from "vue"
+
+import {defaultPageSearchParams} from '../commonVar'
+
+
+export const formSearchList = computed(()=>[
+    {
+        key:'queryStr',
+        type:'input',
+        placeholder:'请输入关键字搜索',
+        defaultValue:defaultPageSearchParams.value.queryStr,
+    },
+])

src/components/CustomerFollowUpHeaderSearch/DefaultBlockSearch/index.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <div class="page_search">
+            <div class="search_content">
+                <div class="content_left">
+                    <SearchBlock :searchList="headerSearchList"  @searchChange="HandleBlockSearchChange">
+                        <template #rowItem-time>
+                            <el-date-picker
+                                v-if="defaultPageSearchParams.time == 'custom'"
+                                style="height: 28px;flex-grow: 0;width: 225px;"
+                                v-model="defaultPageSearchParams.startAndEndTime"
+                                type="datetimerange"
+                                range-separator="至"
+                                start-placeholder="开始时间"
+                                end-placeholder="结束时间"
+                                size="default"
+                                @change="(val)=>HandleBlockSearchChange({startAndEndTime:val},'startAndEndTime')"
+                            />
+                        </template>
+                    </SearchBlock>
+                </div>
+                <slot></slot>
+            </div>
+        </div>
+        <FormSearchGroup style="margin-top: 16px;" :searchList="formSearchList" @searchChange="HandleBlockSearchChange"/>
+    </div>
+</template>
+
+<script setup lang="ts">
+import SearchBlock from '@/baseComponents/SearchBlock.vue';
+import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
+
+import {headerSearchList} from './searchBlock'
+import {formSearchList} from './formSearchGroup'
+
+import {defaultPageSearchParams} from '../commonVar'
+
+const emit = defineEmits(['searchChange'])
+const HandleBlockSearchChange = async (params,key)=>{
+    emit('searchChange',params,key)
+}
+
+</script>
+
+<style lang="scss" scoped>
+.search_content{
+    align-items: flex-start;
+}
+</style>

src/components/CustomerFollowUpHeaderSearch/DefaultBlockSearch/searchBlock.ts

@@ -0,0 +1,94 @@
+import {computed } from "vue"
+import {
+    groupOption,
+    productOption,
+    stageOption,
+    memberOption,
+    provinceOption,
+    cityOption,
+    defaultPageSearchParams,
+} from '../commonVar'
+
+export const headerSearchList = computed(()=>[
+    {
+        label: '时间',
+        key: 'time',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            { label: '今天', value: 'today' },
+            { label: '本周', value: 'thisWeek' },
+            { label: '最近1月', value: 'last1Month' },
+            { label: '最近3月', value: 'last3Month' },
+            { label: '半年内', value: 'halfYear' },
+            { label: '自定义', value: 'custom' },
+        ],
+        defaultValue: defaultPageSearchParams.value.time
+    },
+    {
+        label: '分组',
+        key: 'group',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            ...groupOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.group
+    },
+    {
+        label: '人员',
+        key: 'personnel',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            ...memberOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.personnel
+
+    },
+    {
+        label: '产品',
+        key: 'product',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            ...productOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.product
+
+    },
+    {
+        label: '省份',
+        key: 'province',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            ...provinceOption.value,
+
+        ],
+        defaultValue: defaultPageSearchParams.value.province
+    },
+    {
+        label: '地区',
+        key: 'region',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            ...cityOption.value,
+
+        ],
+        defaultValue: defaultPageSearchParams.value.region,
+        hidden: defaultPageSearchParams.value.province == 'all'
+
+    },
+    {
+        label: '学段',
+        key: 'educationStage',
+        type: 'single',
+        options: [
+            { label: '全部', value: 'all' },
+            ...stageOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.educationStage
+    },
+]);

src/components/CustomerFollowUpHeaderSearch/commonVar.ts

@@ -0,0 +1,31 @@
+import { ref } from "vue";
+
+
+/**
+ * 客户跟进默认列表页
+ */
+export const defaultPageSearchParams = ref({
+    time:'all',
+    group:'all',
+    personnel:'all',
+    product:'all',
+    province:'all',
+    region:'all',
+    educationStage:'all',
+    type:'all',
+    queryStr:'',
+    startAndEndTime:[]
+})
+
+
+// 客户跟进默认列表页筛选项的动态配置项
+export const groupOption = ref([])
+export const productOption = ref([])
+export const stageOption = ref([])
+export const memberOption = ref([])
+export const provinceOption = ref([])
+export const cityOption = ref([])
+// 固定筛选项
+export const defaultMemberOption = ref([])
+export const defaultProvinceOption = ref([])
+

src/views/customerFollowUp/index.vue

@@ -1,45 +1,18 @@
 <template>
     <div class="main_container">
         <div class="page_item end_item">
-            <div class="page_search">
-                <div class="search_content">
-                    <div class="content_left">
-                        <SearchBlock :searchList="headerSearchList"  @searchChange="HandleBlockSearchChange">
-                            <template #rowItem-time>
-
-                                <el-date-picker
-                                    v-if="listSearchParams.time == 'custom'"
-                                    style="height: 28px;flex-grow: 0;width: 225px;"
-                                    v-model="listSearchParams.startAndEndTime"
-                                    type="datetimerange"
-                                    range-separator="至"
-                                    start-placeholder="开始时间"
-                                    end-placeholder="结束时间"
-                                    size="default"
-                                    @change="(val)=>HandleBlockSearchChange({startAndEndTime:val},'startAndEndTime')"
-                                />
-                            </template>
-                        </SearchBlock>
-                    </div>
-                    <div class="content_right">
+
+            <DefaultBlockSearch @searchChange="HandleBlockSearchChange">
+                <div class="content_right" style="flex-shrink: 0;">
                         <el-button class="delete_button_border_no_bg" @click="OpenAuditDialog">
                             赢单申请
                             <span class="bubble">{{ winnerOrderNum }}</span>
                         </el-button>
                         <el-button v-if="userInfo?.roles?.includes('Admin')" class="button_border" @click="OpenOperationLogDialog">操作日志</el-button>
                     </div>
-                </div>
-            </div>
-            <FormSearchGroup :searchList="[
-                {
-                    key:'queryStr',
-                    type:'input',
-                    placeholder:'请输入关键字搜索',
-                    hidden:false,
-                    defaultValue:'',
-                    disabled:false
-                }
-            ]" @searchChange="HandleBlockSearchChange"/>
+            </DefaultBlockSearch>
+
+
             <Table :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum" 
                 :tableColumns="tableColumns" :tableData="tableData" :showPageSize="true"
                 @paginationChange="HandlePaginationChange">
@@ -108,12 +81,22 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
 import {ElMessage} from 'element-plus'
-import SearchBlock from '@/baseComponents/SearchBlock.vue';
-import {headerSearchList} from './searchBlock'
 import Table from '@/baseComponents/Table.vue';
-import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
+
+import {defaultPageSearchParams as listSearchParams}  from '@/components/CustomerFollowUpHeaderSearch/commonVar'
+import DefaultBlockSearch from '@/components/CustomerFollowUpHeaderSearch/DefaultBlockSearch/index.vue'
+import {
+    groupOption,
+    productOption,
+    stageOption,
+    memberOption,
+    provinceOption,
+    cityOption,
+    defaultMemberOption,
+    defaultProvinceOption
+} from '@/components/CustomerFollowUpHeaderSearch/commonVar'
+
 
 import PreviewDialog from '@/baseComponents/PreviewDialog.vue';
 import {tableColumns} from './table'
@@ -136,7 +119,6 @@ import {
         getRecentMonthsRange
     } from '@/utils/timeRangeGet'
 
-const router = useRouter()
 
 const userInfo = computed(()=>{
   return  JSON.parse(localStorage.getItem('userInfo') || '{}')
@@ -144,8 +126,6 @@ const userInfo = computed(()=>{
 /**
  * 1. 头部筛选项有关数据
  */
-const provinceOption = ref([])  //省份配置项
-const memberOption = ref([])  //人员配置项
 const GetHeaderSearchOptions = async ()=>{
     const res = await getHeaderSearchOptionsApi()
     if(res?.code == 200){
@@ -154,13 +134,22 @@ const GetHeaderSearchOptions = async ()=>{
             productData,stageData,regionData,groupData,memberData,
         } = res.data
         winnerOrderNum.value = auditCount || 0
-        const groupOption = groupData?.map(item=>{
+        groupOption.value = groupData?.map(item=>{
             return{
                 label:item.name,
                 value:item.id
             }
         }) || []
 
+        defaultMemberOption.value = memberData?.map(item=>{
+            return{
+                label:item.username,
+                value:item.id,
+                cityIds:item.cityIds,
+                groupIds:item.groupIds,
+                provinceIds:item.provinceIds,
+            }
+        }) || []
         memberOption.value = memberData?.map(item=>{
             return{
                 label:item.username,
@@ -171,14 +160,14 @@ const GetHeaderSearchOptions = async ()=>{
             }
         }) || []
 
-        const productOption = productData?.map(item=>{
+        productOption.value = productData?.map(item=>{
             return {
                 label:item.name,
                 value:item.id,
             }
         }) || []
         
-        provinceOption.value = regionData?.map(item=>{
+        defaultProvinceOption.value = regionData?.map(item=>{
             return{
                 label:item.name,
                 value:item.id,
@@ -191,55 +180,25 @@ const GetHeaderSearchOptions = async ()=>{
             }
         }) || []
 
-        const stageOption = stageData?.map(item=>{
-            return {
+        provinceOption.value = regionData?.map(item=>{
+            return{
                 label:item.name,
                 value:item.id,
+                subData:item.subData?.map(subItm=>{
+                    return {
+                        label:subItm.name,
+                        value:subItm.id,
+                    }
+                }) || [],
             }
         }) || []
 
-        headerSearchList.value = headerSearchList.value.map(item=>{
-            switch(item.key){
-                case 'group':
-                    item.options = [
-                        { label: '全部', value: 'all' },
-                        ...groupOption,
-                    ]
-                    break
-                case 'personnel':{
-                    item.options = [
-                        { label: '全部', value: 'all' },
-                        ...memberOption.value,
-                    ]
-                    break
-                }
-                case 'product':
-                    item.options = [
-                        { label: '全部', value: 'all' },
-                        ...productOption,
-                    ]
-                    break
-                case 'province':
-                    item.options = [
-                        { label: '全部', value: 'all' },
-                        ...provinceOption.value,
-                    ]
-                    break
-                case 'region':{
-                    item.options = []
-                    item.hidden =  true
-                    break
-                }
-                case 'educationStage':
-                    item.options = [
-                        { label: '全部', value: 'all' },
-                        ...stageOption,
-                    ]
-                    break
+        stageOption.value = stageData?.map(item=>{
+            return {
+                label:item.name,
+                value:item.id,
             }
-            item.defaultValue = listSearchParams.value[item.key]
-            return item
-        })
+        }) || []
     }
 }
 
@@ -322,18 +281,7 @@ const HandlePaginationChange = async (params)=>{
 /**
  * 3.默认列表 筛选项有关数据 及操作
  */
-const listSearchParams = ref({
-    time:'all',
-    group:'all',
-    personnel:'all',
-    product:'all',
-    province:'all',
-    region:'all',
-    educationStage:'all',
-    type:'all',
-    queryStr:'',
-    startAndEndTime:[]
-})
+
 // 筛选项变更触发的操作
 const HandleBlockSearchChange = async (params,key)=>{
     listSearchParams.value = {
@@ -347,35 +295,20 @@ const HandleBlockSearchChange = async (params,key)=>{
             listSearchParams.value.personnel = 'all'
             break
     }
-   headerSearchList.value = headerSearchList.value.map(item=>{
-    switch(item.key){
-        case 'personnel':{
-            let finalOption = memberOption.value.filter(item=>{
-                return (listSearchParams.value.group == 'all' ? true : item.groupIds.includes(listSearchParams.value.group)) 
-                        && (listSearchParams.value.province == 'all' ? true : item.provinceIds.includes(listSearchParams.value.province))
-                        && (listSearchParams.value.region == 'all' ? true : item.cityIds.includes(listSearchParams.value.region))
-            }) || []
-            item.options = [
-                { label: '全部', value: 'all' },
-                ...finalOption,
-            ]
-            break
-        }
-        case 'region':{
-            let regionOption = provinceOption.value.find(item=>{
-                return item.value == listSearchParams.value.province
-            })?.subData || []
-            item.options = [
-                { label: '全部', value: 'all' },
-                ...regionOption,
-            ]
-            item.hidden =  listSearchParams.value.province == 'all'
-            break
-        }
-    }
-    item.defaultValue = listSearchParams.value[item.key]
-    return item
-   })
+
+    let finalOption = defaultMemberOption.value.filter(item=>{
+        return (listSearchParams.value.group == 'all' ? true : item.groupIds.includes(listSearchParams.value.group)) 
+                && (listSearchParams.value.province == 'all' ? true : item.provinceIds.includes(listSearchParams.value.province))
+                && (listSearchParams.value.region == 'all' ? true : item.cityIds.includes(listSearchParams.value.region))
+    }) || []
+    memberOption.value = [...finalOption]
+
+
+    let regionOption = defaultProvinceOption.value.find(item=>{
+        return item.value == listSearchParams.value.province
+    })?.subData || []
+    cityOption.value = [...regionOption]
+
     await GetFollowInfo()
 }
 

src/views/customerFollowUp/searchBlock.ts

@@ -1,62 +0,0 @@
-import { ref } from "vue";
-
-// 默认列表头部筛选配置
-export const headerSearchList = ref([
-    {
-        label: '时间',
-        key: 'time',
-        type: 'single',
-        options: [
-            { label: '全部', value: 'all' },
-            { label: '今天', value: 'today' },
-            { label: '本周', value: 'thisWeek' },
-            { label: '最近1月', value: 'last1Month' },
-            { label: '最近3月', value: 'last3Month' },
-            { label: '半年内', value: 'halfYear' },
-            { label: '自定义', value: 'custom' },
-        ],
-        defaultValue: 'all'
-    },
-    {
-        label: '分组',
-        key: 'group',
-        type: 'single',
-        options: [],
-        defaultValue: 'all'
-    },
-    {
-        label: '人员',
-        key: 'personnel',
-        type: 'single',
-        options: [],
-        defaultValue: 'all'
-    },
-    {
-        label: '产品',
-        key: 'product',
-        type: 'single',
-        options: [],
-        defaultValue: 'all'
-    },
-    {
-        label: '省份',
-        key: 'province',
-        type: 'single',
-        options: [],
-        defaultValue: 'all'
-    },
-    {
-        label: '地区',
-        key: 'region',
-        type: 'single',
-        options: [],
-        defaultValue: 'all'
-    },
-    {
-        label: '学段',
-        key: 'educationStage',
-        type: 'single',
-        options: [],
-        defaultValue: 'all'
-    },
-]);

vite.config.ts

@@ -23,7 +23,8 @@ export default defineConfig({
     port: 5732,//默认端口
     proxy:{
       '/admin':{
-        target:'http://192.168.1.32:57003/',    //管理端 本地
+        // target:'http://192.168.1.32:57003/',    //管理端 本地
+        target:'https://crm.k12100.net/',    //管理端 测试环境
         changeOrigin:true,
         rewrite:path => path.replace(/^\/admin/, '/admin')
       },