公海客户详情页添加滚动筛选交互

src/baseComponents/useHeaderFixed.ts

@@ -4,7 +4,7 @@ import { ref,onMounted, reactive } from "vue";
 // topHeaderDom  搜索栏容器
 // fixedWidth 悬浮搜索栏宽度
 // fixedTop  悬浮搜索栏具体顶部位置
-export function useHeaderFixed(scrollContainerDom,topHeaderDom,searchBarMinHeight=170,fixedWidth='calc(100% - 640px - 6px)',fixedTop='calc(293px + 20px)'){
+export function useHeaderFixed(scrollContainerDom,topHeaderDom,searchBarMinHeight=170,fixedWidth='calc(100% - 640px)',fixedTop='calc(293px + 20px)'){
     const scrollMsg = reactive({
         isScrollTop:false,    //搜索栏是否需要在滚动的时候固定到顶部
         headerHeight: searchBarMinHeight+'px'  // 滚动时候的 高度占位 值

src/components/HighSeasCustomerHeaderSearch/DetailBlockSearch/index.vue

@@ -0,0 +1,21 @@
+<template>
+    <SearchBlock :searchList="historyFollowSearchList" 
+        @searchChange="HandleSearchChange">
+    </SearchBlock>
+</template>
+
+
+<script setup lang="ts">
+import SearchBlock from '@/baseComponents/SearchBlock.vue';
+import { historyFollowSearchList } from './searchBlock';
+const emit = defineEmits(['searchChange'])
+
+const HandleSearchChange = async (params,key)=>{
+    emit('searchChange',params,key)
+}
+</script>
+
+
+
+<style lang="scss" scoped>
+</style>

src/components/HighSeasCustomerHeaderSearch/DetailSelectSearch/formSearchGroup.ts

@@ -0,0 +1,29 @@
+import { ref } from "vue"
+
+// 进行中的跟进 有关筛选条件
+export const historyFollowSearchSelectList = ref([
+  {
+    label: '人员',
+    key: 'member',
+    type: 'select', 
+    placeholcer:'请选择人员',
+    defaultValue: 'all',
+    options: []
+  },
+  {
+    label: '产品',
+    key: 'product',
+    type: 'select', 
+    placeholcer:'请选择产品',
+    defaultValue: 'all',
+    options: []
+  },
+  {
+    label: '状态',
+    key: 'followStatus',
+    type: 'select',
+    placeholcer:'请选择状态',
+    defaultValue: 'all',
+    options: []
+  },
+])

src/components/HighSeasCustomerHeaderSearch/DetailSelectSearch/index.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="page_search">
+        <div class="search_content">
+            <div class="content_left">
+                <FormSearchGroup :searchList="historyFollowSearchSelectList" 
+                    @searchChange="HandleSearchChange">
+                </FormSearchGroup>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { historyFollowSearchSelectList } 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>
+</style>

src/components/HighSeasCustomerHeaderSearch/commonVar.ts

@@ -0,0 +1,8 @@
+import { ref } from "vue";
+
+
+export const historyFollowSearchParams = ref({
+    member:'all',
+    product:'all',
+    followStatus:'all',
+}) 

src/views/highSeasCustomer/highSeasCustomerDetail/customerStatusOverview/index.vue

@@ -18,9 +18,15 @@
 
         <!-- 中间：搜索与 我的跟进 -->
         <div class="center_panel">
-            <div class="page_content hide_scrollbar"> 
-                <SearchBlock :searchList="historyFollowSearchList" @searchChange="HandleSearchChange"></SearchBlock>
-                <FollowCard v-if="historyFollowRecord?.length > 0" style="margin-top: 16px;" :cardList="historyFollowRecord">
+            <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">
+                    <DetailSelectSearch v-if="scrollMsg.isScrollTop" @searchChange="HandleSearchChange"></DetailSelectSearch>
+                    <DetailBlockSearch v-else @searchChange="HandleSearchChange"></DetailBlockSearch>
+                </div>
+                <!-- style="margin-top: 16px;"  -->
+                <FollowCard v-if="historyFollowRecord?.length > 0" :cardList="historyFollowRecord">
                     <template #operation="{row}">
                         <i></i>
                     </template>
@@ -76,16 +82,21 @@
 import { ref,onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 
-import SearchBlock from '@/baseComponents/SearchBlock.vue';
-import { historyFollowSearchList } from './searchBlock';
+import DetailSelectSearch from '@/components/HighSeasCustomerHeaderSearch/DetailSelectSearch/index.vue'
+import DetailBlockSearch from '@/components/HighSeasCustomerHeaderSearch/DetailBlockSearch/index.vue'
+import {historyFollowSearchList} from '@/components/HighSeasCustomerHeaderSearch/DetailBlockSearch/searchBlock'
+import {historyFollowSearchSelectList} from '@/components/HighSeasCustomerHeaderSearch/DetailSelectSearch/formSearchGroup'
+import {historyFollowSearchParams} from '@/components/HighSeasCustomerHeaderSearch/commonVar'
+
+
 import FollowCard from '@/components/FollowCard.vue';
 import Pagination from '@/baseComponents/Pagination.vue';
 
 import {
     getHighSeasCustomerDetailApi,
 } from '@/api/highSeasCustomer'
-
 import {winnerCaseStatusMsg} from '@/components/dict'
+import { useHeaderFixed } from '@/baseComponents/useHeaderFixed'
 
 interface ProductStatusItm {
     productId:string,
@@ -95,12 +106,16 @@ interface ProductStatusItm {
 
 const route = useRoute()
 
+const scrollDom = ref()
+const headerDom = ref()
+const scrollMsg  = useHeaderFixed(scrollDom,headerDom,132)  //搜索栏是否需要在滚动的时候固定到顶部
+
+
+/** 1. 页面展示有关变量 */
 // 左侧列表的跟进产品统计
 const productDataList = ref<ProductStatusItm[]>([]);
-
 // 历史跟进记录 
 const historyFollowRecord = ref([])
-
 // 历史跟进 数据总览
 const historyFollowData = ref({
     hsitoryProductNum:0,
@@ -108,7 +123,6 @@ const historyFollowData = ref({
     followTimes:0,
 })
 
-
 /**
  * 2. 列表分页参数及相关操作 
  */
@@ -127,14 +141,7 @@ const handlePaginationChange = async (params)=>{
     await GetHighSeasCustomerDetail()
 }
 
-
-// 跟进记录筛选条件
-const historyFollowSearchParams = ref({
-    member:'all',
-    product:'all',
-    followStatus:'all',
-}) 
-// 获取联系人详情页面的有关数据
+// 获取信息概览页面的有关数据
 const GetHighSeasCustomerDetail = async ()=>{
     let params = {
         customerId: route.query.id,    
@@ -220,6 +227,39 @@ const GetHighSeasCustomerDetail = async ()=>{
             item.defaultValue = historyFollowSearchParams.value[item.key]
             return item
         })
+        historyFollowSearchSelectList.value = historyFollowSearchSelectList.value.map(item=>{
+            switch(item.key){
+                case 'member':
+                    item.options = [
+                        {
+                            label:'全部人员',
+                            value:'all'
+                        },
+                        ...memberOptions
+                    ]
+                    break
+                case 'product':
+                    item.options = [
+                        {
+                            label:'全部产品',
+                            value:'all'
+                        },
+                        ...productOptions
+                    ]
+                    break
+                case 'followStatus':
+                    item.options = [
+                        {
+                            label:'全部状态',
+                            value:'all'
+                        },
+                        ...followOptions
+                    ]
+                    break
+            }
+            item.defaultValue = historyFollowSearchParams.value[item.key]
+            return item
+        })
 
         // 中间历史跟进信息
         totalNum.value = dataPageList.total
@@ -433,4 +473,10 @@ onMounted(async ()=>{
         }
     }
 }
+
+.scroll_page{
+    background-color: white;
+    // background-color: rgb(229, 207, 207);
+    padding-bottom: 16px;
+}
 </style>