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

src/components/HighSeasCustomerHeaderSearch/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/HighSeasCustomerHeaderSearch/DefaultBlockSearch/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <div class="page_search">
+            <div class="search_content">
+                <div class="content_left">
+                    <SearchBlock :searchList="blockSearchList" @searchChange="HandleSearchChange"></SearchBlock>
+                </div>
+                <slot></slot>
+            </div>
+        </div>
+        <FormSearchGroup style="margin-top: 16px;" :searchList="formSearchList" @searchChange="HandleSearchChange"></FormSearchGroup>
+    </div>
+</template>
+
+<script setup lang="ts">
+import SearchBlock from '@/baseComponents/SearchBlock.vue';
+import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
+
+import {blockSearchList} from './searchBlock'
+import {formSearchList} from './formSearchGroup'
+
+const emit = defineEmits(['searchChange'])
+const HandleSearchChange = async (params,key)=>{
+    emit('searchChange',params,key)
+}
+
+</script>
+
+<style lang="scss" scoped>
+.search_content{
+    align-items: flex-start;
+}
+</style>

src/components/HighSeasCustomerHeaderSearch/DefaultBlockSearch/searchBlock.ts

@@ -0,0 +1,48 @@
+import {computed } from "vue"
+import {defaultPageSearchParams,regionOptions,stageOptions } from '../commonVar'
+
+
+export const blockSearchList = computed(()=>{
+    let areaOptions = []
+    if(defaultPageSearchParams.value.province !== 'all'){
+        areaOptions = regionOptions.value.find(item=>item.value === defaultPageSearchParams.value.province)?.subData || []
+    }else{
+        areaOptions = regionOptions.value.map(item=>{
+            return item.subData || []
+        }).flat()
+    
+    }
+    return [
+        {
+            label: '学段',
+            key: 'stage',
+            type: 'single',
+            defaultValue: defaultPageSearchParams.value.stage,
+            options: [
+            { label: '全部', value: 'all' },
+            ...(stageOptions.value),
+            ],
+        },
+        {
+            label: '省份',
+            key: 'province',
+            type: 'single',
+            options: [
+                { label: '全部', value: 'all' },
+                ...(regionOptions.value),
+            ],
+            defaultValue: defaultPageSearchParams.value.province,
+        },
+        {
+            label: '地区',
+            key: 'area',
+            type: 'single',
+            options: [
+                { label: '全部', value: 'all' },
+                ...(areaOptions),
+            ],
+            hidden:defaultPageSearchParams.value.province == 'all' ? true : false,
+            defaultValue: defaultPageSearchParams.value.area,
+        }
+    ]
+});

src/components/HighSeasCustomerHeaderSearch/commonVar.ts

@@ -1,8 +1,26 @@
 import { ref } from "vue";
 
 
+/**
+ * 公海客户详情页的筛选项
+ */
 export const historyFollowSearchParams = ref({
     member:'all',
     product:'all',
     followStatus:'all',
 }) 
+
+
+/**
+ * 公海客户默认列表页
+ */
+export const defaultPageSearchParams = ref({
+    stage:'all',
+    province:'all',
+    area:'all',
+    queryStr:'',
+})
+// 公海客户默认列表页筛选项的动态配置项
+export const regionOptions = ref([])
+export const stageOptions = ref([])
+

src/views/highSeasCustomer/formSearchGroup.ts

@@ -1,11 +0,0 @@
-import { ref } from "vue";
-
-
-export const formSearchList = ref([
-    {
-        key:'queryStr',
-        type:'input',
-        placeholder:'请输入关键字搜索',
-        defaultValue:'',
-    }
-])

src/views/highSeasCustomer/index.vue

@@ -1,18 +1,14 @@
 <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="blockSearchList" @searchChange="HandleSearchChange"></SearchBlock>
-                    </div>
-                    <div v-if="userInfo.roles.includes('Admin')" class="content_right">
-                        <el-button class="button_refresh" @click="OpenBatchImportDialog">批量导入</el-button>
-                        <el-button class="button_background" @click="OpenSchoolFormDialog()">新增学校</el-button>
-                    </div>
+
+            <DefaultBlockSearch @searchChange="HandleSearchChange">
+                 <div v-if="userInfo.roles.includes('Admin')" class="content_right">
+                    <el-button class="button_refresh" @click="OpenBatchImportDialog">批量导入</el-button>
+                    <el-button class="button_background" @click="OpenSchoolFormDialog()">新增学校</el-button>
                 </div>
-            </div>
-            <FormSearchGroup :searchList="formSearchList" @searchChange="HandleSearchChange"></FormSearchGroup>
+            </DefaultBlockSearch>
+              
             <Table :tableColumns="publicSeasTableColumns" :tableData="tableData" 
                 :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum"
                 :showPageSize="true" @paginationChange="HandlePaginationChange">
@@ -80,9 +76,10 @@ import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import {ElMessage} from 'element-plus'
 
-import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
-import {formSearchList} from './formSearchGroup';
-import SearchBlock from '@/baseComponents/SearchBlock.vue';
+import DefaultBlockSearch from '@/components/HighSeasCustomerHeaderSearch/DefaultBlockSearch/index.vue'
+import {stageOptions, regionOptions } from '@/components/HighSeasCustomerHeaderSearch/commonVar'
+import {defaultPageSearchParams as searchParams} from '@/components/HighSeasCustomerHeaderSearch/commonVar'
+
 import Table from '@/baseComponents/Table.vue';
 import {publicSeasTableColumns,templateTableColumns} from './table'
 
@@ -109,59 +106,6 @@ const userInfo = computed(()=>{
     return JSON.parse(localStorage.getItem('userInfo') || '{}')
 })
 
-/** 1. 头部筛选 有关操作 */
-const searchParams = ref({
-    stage:'all',
-    province:'all',
-    area:'all',
-    queryStr:'',
-})
-// 获取头部筛选数据
-const stageOptions = ref([])
-const regionOptions = ref([])
-const blockSearchList = computed(()=>{
-    let areaOptions = []
-    if(searchParams.value.province !== 'all'){
-        areaOptions = regionOptions.value.find(item=>item.value === searchParams.value.province)?.subData || []
-    }else{
-        areaOptions = regionOptions.value.map(item=>{
-            return item.subData || []
-        }).flat()
-    }
-    return [
-        {
-            label: '学段',
-            key: 'stage',
-            type: 'single',
-            defaultValue: searchParams.value.stage,
-            options: [
-            { label: '全部', value: 'all' },
-            ...(stageOptions.value),
-            ],
-        },
-        {
-            label: '省份',
-            key: 'province',
-            type: 'single',
-            options: [
-                { label: '全部', value: 'all' },
-                ...(regionOptions.value),
-            ],
-            defaultValue: searchParams.value.province,
-        },
-        {
-            label: '地区',
-            key: 'area',
-            type: 'single',
-            options: [
-                { label: '全部', value: 'all' },
-                ...(areaOptions),
-            ],
-            hidden:searchParams.value.province == 'all' ? true : false,
-            defaultValue: searchParams.value.area,
-        }
-    ]
-});
 // 获取头部筛选数据
 const GetHeaderSearchParams = async ()=>{
     let res = await getHeaderSearchParamsApi()
@@ -418,9 +362,6 @@ onMounted( async()=>{
 <style lang="scss" scoped>
 .end_item{
     gap:16px;
-    .search_content{
-        align-items: flex-start;
-    }
 }
 
 .batch_import_form{