公海客户默认列表页添加滚动筛选交互

src/components/HighSeasCustomerHeaderSearch/DefaultSelectSearch/formSearchGroup.ts

@@ -0,0 +1,56 @@
+import {computed } from "vue"
+import {defaultPageSearchParams,regionOptions,stageOptions } from '../commonVar'
+
+// 公海客户默认列表有关筛选条件
+export const selectSearchList = 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: 'select',
+        placeholcer:'请选择学段',
+        defaultValue: defaultPageSearchParams.value.stage,
+        options: [
+          { label: '全部学段', value: 'all' },
+          ...(stageOptions.value),
+        ],
+    },
+    {
+        label: '省份',
+        key: 'province',
+        type: 'select',
+        placeholcer:'请选择省份',
+        options: [
+            { label: '全部省份', value: 'all' },
+            ...(regionOptions.value),
+        ],
+        defaultValue: defaultPageSearchParams.value.province,
+    },
+    {
+        label: '地区',
+        key: 'area',
+        type: 'select',
+        placeholcer:'请选择地区',
+        options: [
+            { label: '全部地区', value: 'all' },
+            ...(areaOptions),
+        ],
+        hidden:defaultPageSearchParams.value.province == 'all' ? true : false,
+        defaultValue: defaultPageSearchParams.value.area,
+    },
+    {
+        key:'queryStr',
+        type:'input',
+        placeholder:'请输入关键字搜索',
+        defaultValue:defaultPageSearchParams.value.queryStr,
+    }
+  ]
+})

src/components/HighSeasCustomerHeaderSearch/DefaultSelectSearch/index.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="page_search" style="padding-top: 20px;">
+        <div class="search_content">
+            <div class="content_left">
+                <FormSearchGroup :searchList="selectSearchList" 
+                    @searchChange="HandleSearchChange">
+                </FormSearchGroup>
+            </div>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { selectSearchList } from './formSearchGroup';
+import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
+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/views/highSeasCustomer/highSeasCustomerDetail/customerStatusOverview/index.vue

@@ -21,7 +21,7 @@
             <div class="page_content hide_scrollbar  " ref="scrollDom"> 
                 <div v-if="scrollMsg.isScrollTop" :style="{height:scrollMsg.headerHeight || '132px'}"></div>
 
-                <div class="scroll_page" ref="headerDom">
+                <div class="search_page" ref="headerDom">
                     <DetailSelectSearch v-if="scrollMsg.isScrollTop" @searchChange="HandleSearchChange"></DetailSelectSearch>
                     <DetailBlockSearch v-else @searchChange="HandleSearchChange"></DetailBlockSearch>
                 </div>
@@ -474,7 +474,7 @@ onMounted(async ()=>{
     }
 }
 
-.scroll_page{
+.search_page{
     background-color: white;
     // background-color: rgb(229, 207, 207);
     padding-bottom: 16px;

src/views/highSeasCustomer/index.vue

@@ -1,14 +1,22 @@
 <template>
     <div class="main_container">
-        <div class="page_item end_item">
-
-            <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>
-            </DefaultBlockSearch>
-              
+        <div class="page_item end_item hide_scrollbar" ref="scrollDom">
+            <div  class="search_page" ref="searchDom">
+                <DefaultSelectSearch v-if="scrollMsg.isScrollTop" @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>
+                </DefaultSelectSearch>
+
+                <DefaultBlockSearch  v-else @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>
+                </DefaultBlockSearch>
+            </div>
+
             <Table :tableColumns="publicSeasTableColumns" :tableData="tableData" 
                 :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum"
                 :showPageSize="true" @paginationChange="HandlePaginationChange">
@@ -79,6 +87,8 @@ import {ElMessage} from 'element-plus'
 import DefaultBlockSearch from '@/components/HighSeasCustomerHeaderSearch/DefaultBlockSearch/index.vue'
 import {stageOptions, regionOptions } from '@/components/HighSeasCustomerHeaderSearch/commonVar'
 import {defaultPageSearchParams as searchParams} from '@/components/HighSeasCustomerHeaderSearch/commonVar'
+import DefaultSelectSearch from '@/components/HighSeasCustomerHeaderSearch/DefaultSelectSearch/index.vue'
+
 
 import Table from '@/baseComponents/Table.vue';
 import {publicSeasTableColumns,templateTableColumns} from './table'
@@ -99,14 +109,19 @@ import { getHeaderSearchParamsApi,
         claimHighSeasCustomerApi,
 } from '@/api/highSeasCustomer'
 
+import { useHeaderFixed } from '@/baseComponents/useHeaderFixed'
 
 const router = useRouter()
 
+const scrollDom = ref()
+const searchDom = ref()
+const scrollMsg  = useHeaderFixed(scrollDom,searchDom,272,'calc(100% - 250px - 20px)','calc(80px)')  //搜索栏是否需要在滚动的时候固定到顶部
+
 const userInfo = computed(()=>{
     return JSON.parse(localStorage.getItem('userInfo') || '{}')
 })
 
-// 获取头部筛选数据
+// 获取头部筛选数据  
 const GetHeaderSearchParams = async ()=>{
     let res = await getHeaderSearchParamsApi()
     const {regionData,stageData} = res.data || {}
@@ -361,7 +376,10 @@ onMounted( async()=>{
 
 <style lang="scss" scoped>
 .end_item{
-    gap:16px;
+    overflow: auto;
+    :deep(.page_table){
+        overflow:initial;
+    }
 }
 
 .batch_import_form{
@@ -370,4 +388,11 @@ onMounted( async()=>{
     }
 }
 
+
+.search_page{
+    background-color: white;
+    // background-color: rgb(229, 207, 207);
+    padding-bottom: 16px;
+}
+
 </style>

src/views/myCustomer/index.vue

@@ -2,7 +2,7 @@
     <div class="main_container">
         <div class="page_item end_item hide_scrollbar"  ref="scrollDom">
             <div v-if="scrollMsg.isScrollTop" :style="{height:scrollMsg.headerHeight || '272px',flexShrink:'0'}"></div>
-            <div class="scroll_page" ref="searchDom">
+            <div class="search_page" ref="searchDom">
                 <DefaultSelectSearch v-if="scrollMsg.isScrollTop" @searchChange="HandleBlockSearchChange"></DefaultSelectSearch>
                 <DefaultBlockSearch v-else  @searchChange="HandleBlockSearchChange"></DefaultBlockSearch>
             </div>
@@ -336,7 +336,7 @@ onMounted(async ()=>{
 }
 
 
-.scroll_page{
+.search_page{
     background-color: white;
     // background-color: rgb(229, 207, 207);
     padding-bottom: 16px;

src/views/myCustomer/myCustomerDetail/customerStatusOverview/index.vue

@@ -27,7 +27,7 @@
         <div class="center_panel">
             <div class="page_content hide_scrollbar " ref="scrollDom"> 
                 <div v-if="scrollMsg.isScrollTop" :style="{height:scrollMsg.headerHeight || '176px'}"></div>
-                <div class="scroll_page" ref="headerDom">
+                <div class="search_page" ref="headerDom">
                     <!-- 滚动头部筛选展示 -->
                     <DetailSelectSearch v-if="scrollMsg.isScrollTop"  @searchChange="HandleSearchChange" ></DetailSelectSearch>
                     <!-- 正常筛选展示 -->
@@ -982,7 +982,7 @@ onMounted( async ()=>{
 }
 
 
-.scroll_page{
+.search_page{
     background-color: white;
     // background-color: rgb(229, 207, 207);
     padding-bottom: 16px;