客户跟进默认列表页添加滚动筛选交互

src/components/CustomerFollowUpHeaderSearch/DefaultSelectSearch/formSearchGroup.ts

@@ -0,0 +1,117 @@
+
+import {computed } from "vue"
+import {
+    groupOption,
+    productOption,
+    stageOption,
+    memberOption,
+    provinceOption,
+    cityOption,
+    defaultPageSearchParams,
+} from '../commonVar'
+
+
+// 客户跟进默认列表有关筛选条件
+export const selectSearchList = computed(()=>[
+    {
+        label: '时间',
+        key: 'time',
+        type: 'select',
+        placeholcer:'请选择时间',
+        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: 'select',
+        placeholcer:'请选择分组',
+        options: [
+            { label: '全部分组', value: 'all' },
+            ...groupOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.group
+    },
+    {
+        label: '人员',
+        key: 'personnel',
+        type: 'select',
+        placeholcer:'请选择人员',
+        options: [
+            { label: '全部人员', value: 'all' },
+            ...memberOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.personnel
+
+    },
+    {
+        label: '产品',
+        key: 'product',
+        type: 'select',
+        placeholcer:'请选择产品',
+        options: [
+            { label: '全部产品', value: 'all' },
+            ...productOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.product
+
+    },
+    {
+        label: '省份',
+        key: 'province',
+        type: 'select',
+        placeholcer:'请选择省份',
+        options: [
+            { label: '全部省份', value: 'all' },
+            ...provinceOption.value,
+
+        ],
+        defaultValue: defaultPageSearchParams.value.province
+    },
+    {
+        label: '地区',
+        key: 'region',
+        type: 'select',
+        placeholcer:'请选择地区',
+        options: [
+            { label: '全部地区', value: 'all' },
+            ...cityOption.value,
+
+        ],
+        defaultValue: defaultPageSearchParams.value.region,
+        hidden: defaultPageSearchParams.value.province == 'all'
+    },
+    {
+        label: '学段',
+        key: 'educationStage',
+        type: 'select',
+        placeholcer:'请选择学段',
+        options: [
+            { label: '全部学段', value: 'all' },
+            ...stageOption.value,
+        ],
+        defaultValue: defaultPageSearchParams.value.educationStage
+    },
+    {
+        label: '时间',
+        key: 'startAndEndTime',
+        type: 'datetimerange',
+        placeholcer:'请选择时间',
+        hidden:defaultPageSearchParams.value.time == 'custom' ? false :true,
+        defaultValue: defaultPageSearchParams.value.startAndEndTime
+    },
+    {
+        key:'queryStr',
+        type:'input',
+        placeholder:'请输入关键字搜索',
+        defaultValue:defaultPageSearchParams.value.queryStr,
+    },
+])

src/components/CustomerFollowUpHeaderSearch/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/styles/page.scss

@@ -74,4 +74,11 @@
     span{
         margin-top: 290px;
     }
-}
+}
+
+
+.search_page{
+    background-color: white;
+    // background-color: rgb(229, 207, 207);
+    padding-bottom: 16px;
+}

src/views/customerFollowUp/index.vue

@@ -1,16 +1,29 @@
 <template>
     <div class="main_container">
-        <div class="page_item end_item">
+        <div class="page_item end_item hide_scrollbar" ref="scrollDom">
 
-            <DefaultBlockSearch @searchChange="HandleBlockSearchChange">
-                <div class="content_right" style="flex-shrink: 0;">
+            <div ref="searchDom" class="search_page">
+                <DefaultSelectSearch v-if="scrollMsg.isScrollTop" @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>
-            </DefaultBlockSearch>
+                </DefaultSelectSearch>
+
+                <DefaultBlockSearch v-else @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>
+                </DefaultBlockSearch>
+            </div>
+
 
 
             <Table :currentPage="currentPage" :pageSize="pageSize" :totalNum="totalNum" 
@@ -86,6 +99,7 @@ import Table from '@/baseComponents/Table.vue';
 
 import {defaultPageSearchParams as listSearchParams}  from '@/components/CustomerFollowUpHeaderSearch/commonVar'
 import DefaultBlockSearch from '@/components/CustomerFollowUpHeaderSearch/DefaultBlockSearch/index.vue'
+import DefaultSelectSearch from '@/components/CustomerFollowUpHeaderSearch/DefaultSelectSearch/index.vue'
 import {
     groupOption,
     productOption,
@@ -120,6 +134,16 @@ import {
     } from '@/utils/timeRangeGet'
 
 
+import { useHeaderFixed } from '@/baseComponents/useHeaderFixed'
+
+
+
+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') || '{}')
 })
@@ -441,7 +465,10 @@ onMounted( async ()=>{
 
 <style lang="scss" scoped>
 .end_item{
-    gap:16px;
+    overflow: auto;
+    :deep(.page_table){
+        overflow: initial;
+    }
 }
 
 .content_right{