我的客户默认列表页添加滚动筛选交互

src/components/MyCustomerHeaderSearch/DefaultBlockSearch/formSearchGroup.ts

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

src/components/MyCustomerHeaderSearch/DefaultBlockSearch/index.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <div class="page_search">
+            <div class="search_content">
+                <div class="content_left">
+                    <SearchBlock :searchList="headerSearchList"  @searchChange="HandleBlockSearchChange" />
+                </div>
+            </div>
+        </div>
+        <FormSearchGroup style="margin-top: 16px;" :searchList="blurSearchList" @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 {blurSearchList} from './formSearchGroup'
+
+const emit = defineEmits(['searchChange'])
+const HandleBlockSearchChange = (params,key)=>{
+    emit('searchChange',params,key)
+}
+
+</script>
+
+
+
+<style lang="scss" scoped>
+
+</style>

src/components/MyCustomerHeaderSearch/DefaultSelectSearch/formSearchGroup.ts

@@ -0,0 +1,90 @@
+import { ref,computed } from "vue";
+
+import {
+    typeDataOption,
+    stageOption,
+    provinceOption,
+    cityOption,
+    groupDataOption,
+    memberConfigOption,
+    
+    defaultPageSearchParams,
+} from '../commonVar'
+
+export const selectSearchList = computed(()=>[
+    {
+        label: '类型',
+        key: 'type',
+        type: 'select',
+        placeholcer:'请选择类型',
+        options: [
+            { label: '全部类型', value: 'all' },
+            ...typeDataOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.type
+    },
+    {
+        label: '学段',
+        key: 'stage',
+        type: 'select',
+        placeholcer:'请选择学段',
+        options: [
+            { label: '全部学段', value: 'all' },
+            ...stageOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.stage
+    },
+    {
+        label: '省份',
+        key: 'province',
+        type: 'select',
+        placeholcer:'请选择省份',
+        options: [
+            { label: '全部省份', value: 'all' },
+            ...provinceOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.province
+    },
+    {
+        label: '地区',
+        key: 'city',
+        type: 'select',
+        placeholcer:'请选择地区',
+        options: [
+            { label: '全部地区', value: 'all' },
+            ...cityOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.city,
+        hidden: defaultPageSearchParams.value.province == 'all' ? true : false
+    
+    },
+    {
+        label: '分组',
+        key: 'group',
+        type: 'select',
+        placeholcer:'请选择分组',
+        options: [
+            { label: '全部分组', value: 'all' },
+            ...groupDataOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.group
+    },
+    {
+        label: '人员',
+        key: 'personnel',
+        type: 'select',
+        placeholcer:'请选择人员',
+        options: [
+            { label: '全部人员', value: 'all' },
+            ...memberConfigOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.personnel
+    },
+    {
+        key:'queryStr',
+        type:'input',
+        placeholder:'请输入关键字搜索',
+        hidden:false,
+        defaultValue: defaultPageSearchParams.value.queryStr
+    },
+])

src/components/MyCustomerHeaderSearch/DefaultSelectSearch/index.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="page_search" style="padding-top: 20px;">
+        <div class="search_content">
+            <div class="content_left">
+                <FormSearchGroup :searchList="selectSearchList" @searchChange="HandleBlockSearchChange"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
+import {selectSearchList} from './formSearchGroup'
+const emit = defineEmits(['searchChange'])
+const HandleBlockSearchChange = (params,key)=>{
+    emit('searchChange',params,key)
+}
+
+</script>
+
+
+
+<style lang="scss" scoped>
+
+</style>

src/components/MyCustomerHeaderSearch/commonVar.ts

@@ -26,7 +26,7 @@ export const defaultPageSearchParams = ref({
     queryStr:'',
 })
 
-// 我的客户筛选项的动态配置项
+// 我的客户默认页筛选项的动态配置项
 export const  typeDataOption = ref([])
 export const  stageOption = ref([])
 export const  provinceOption = ref([])

src/views/myCustomer/index.vue

@@ -1,24 +1,13 @@
 <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" />
-                    </div>
-                </div>
+        <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">
+                <DefaultSelectSearch v-if="scrollMsg.isScrollTop" @searchChange="HandleBlockSearchChange"></DefaultSelectSearch>
+                <DefaultBlockSearch v-else  @searchChange="HandleBlockSearchChange"></DefaultBlockSearch>
             </div>
-            <FormSearchGroup :searchList="[
-                {
-                    key:'queryStr',
-                    type:'input',
-                    placeholder:'请输入关键字搜索',
-                    hidden:false,
-                    defaultValue:'',
-                    disabled:false
-                }
-            ]" @searchChange="HandleBlockSearchChange"/>
-            <Table :currentPage="currentPage" :pageSize="pageSize" 
+
+            <Table  :currentPage="currentPage" :pageSize="pageSize" 
                 :totalNum="totalNum" :showPageSize="true"
                 :tableColumns="tableColumns" :tableData="tableData" @paginationChange="HandlePaginationChange">
                 <template #num="{currentIndex}">
@@ -59,15 +48,11 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
-import SearchBlock from '@/baseComponents/SearchBlock.vue';
-
-import {headerSearchList} from '@/components/MyCustomerHeaderSearch/DefaultBlockSearch/searchBlock'
-
 
 import Table from '@/baseComponents/Table.vue';
-import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
 import {tableColumns} from './table'
-
+import DefaultBlockSearch from '@/components/MyCustomerHeaderSearch/DefaultBlockSearch/index.vue'
+import DefaultSelectSearch from '@/components/MyCustomerHeaderSearch/DefaultSelectSearch/index.vue'
 import SchoolFormDialog from '@/components/SchoolFormDialog/index.vue'
 
 import {
@@ -90,10 +75,17 @@ import {defaultPageSearchParams as searchParams,
     defaultMemberConfigOption,
 } from '@/components/MyCustomerHeaderSearch/commonVar'
 
+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)')  //搜索栏是否需要在滚动的时候固定到顶部
+
+
 /**
  * 1.默认列表 筛选项有关数据
  */
@@ -337,7 +329,17 @@ onMounted(async ()=>{
 
 <style lang="scss" scoped>
 .end_item{
-    gap:16px;
+    overflow: auto;
+    :deep(.page_table){
+        overflow:initial;
+    }
+}
+
+
+.scroll_page{
+    background-color: white;
+    // background-color: rgb(229, 207, 207);
+    padding-bottom: 16px;
 }
 
 </style>