我的客户详情页添加两种筛选条件展示

src/baseComponents/FormSearchGroup.vue

@@ -19,12 +19,10 @@
                 </el-option>
             </el-select>
 
-
-
             <!-- :size="size" -->
             <el-date-picker
                 @change="(val)=>HandleSearchItemChange(item.key)" 
-                v-else-if="item.type == 'datePicker'"  
+                v-else-if="item.type == 'datePicker' && !item.hidden"  
                 v-model="searchData[item.key]"
                 :disabeld="formDisabled || item.disabled"
                 type="daterange"
@@ -33,6 +31,17 @@
                 end-placeholder="结束时间"
             />
 
+            <el-date-picker
+                v-else-if="item.type == 'datetimerange' && !item.hidden"  
+                @change="(val)=>HandleSearchItemChange(item.key)" 
+                v-model="searchData[item.key]"
+                :disabeld="formDisabled || item.disabled"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                type="datetimerange"
+                range-separator="至"
+                size="default"
+            />
 
 
             <!-- 这个输入框的搜索要动态查询 ————  -->
@@ -72,7 +81,7 @@ import { ref, watch } from 'vue'
 
 interface SearchItem {
     key:String,
-    type:'input'|'select'|'datePicker'|'radio',
+    type:'input'|'select'|'datePicker'|'datetimerange'|'radio',
     placeholder?:String,
     hidden:boolean,
     defaultValue?:any,

src/components/MyCustomerHeaderSearch/BlockSearch/index.vue

@@ -0,0 +1,34 @@
+<template>
+    <SearchBlock :searchList="ongoingFollowSearchList" @searchChange="HandleSearchChange">
+        <template #rowItem-time>
+            <el-date-picker
+                v-if="searchParams.time=='custom'"
+                style="flex-grow: 0;height: 28px;"
+                v-model="searchParams.startAndEndTime"
+                @change="(val)=>HandleSearchChange({startAndEndTime:val},'startAndEndTime')"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                type="datetimerange"
+                range-separator="至"
+                size="default"
+                />
+        </template>
+    </SearchBlock>
+</template>
+
+
+<script setup lang="ts">
+import SearchBlock from '@/baseComponents/SearchBlock.vue';
+import { ongoingFollowSearchList } from './searchBlock';
+import {searchParams} from '../commonVar'
+const emit = defineEmits(['searchChange'])
+
+const HandleSearchChange = async (params,key)=>{
+    emit('searchChange',params,key)
+}
+</script>
+
+
+
+<style lang="scss" scoped>
+</style>

src/components/MyCustomerHeaderSearch/BlockSearch/searchBlock.ts

@@ -0,0 +1,41 @@
+import { ref } from "vue"
+
+// 进行中的跟进 有关筛选条件
+export const ongoingFollowSearchList = ref([
+  {
+    label: '时间',
+    key: 'time',
+    type: 'single', 
+    defaultValue: 'all',
+    options: [
+      { label: '全部', value: 'all' },
+      { label: '今天', value: 'today' },
+      { label: '昨天', value: 'yesterday' },
+      { label: '近3天', value: 'last3days' },
+      { label: '近1周', value: 'last1week' },
+      { label: '近1月', value: 'last1month' },
+      { label: '自定义', value: 'custom' }
+    ]
+  },
+  {
+    label: '产品',
+    key: 'product',
+    type: 'single', 
+    defaultValue: 'all',
+    options: []
+  },
+  {
+    label: '状态',
+    key: 'followStatus',
+    type: 'single', 
+    defaultValue: 'all',
+    options: []
+  },
+  {
+    label: '职务',
+    key: 'position',
+    type: 'single', 
+    defaultValue: 'all',
+    options: []
+  },
+])

src/components/MyCustomerHeaderSearch/SelectSearch/formSearchGroup.ts

@@ -0,0 +1,53 @@
+import { ref } from "vue"
+
+// 进行中的跟进 有关筛选条件
+export const myFollowSearchSelectList = ref([
+  {
+    label: '时间',
+    key: 'time',
+    type: 'select', 
+    placeholcer:'请选择时间',
+    defaultValue: 'all',
+    options: [
+      { label: '全部时间', value: 'all' },
+      { label: '今天', value: 'today' },
+      { label: '昨天', value: 'yesterday' },
+      { label: '近3天', value: 'last3days' },
+      { label: '近1周', value: 'last1week' },
+      { label: '近1月', value: 'last1month' },
+      { label: '自定义', value: 'custom' }
+    ]
+  },
+  {
+    label: '产品',
+    key: 'product',
+    type: 'select', 
+    placeholcer:'请选择产品',
+    defaultValue: 'all',
+    options: []
+  },
+  {
+    label: '状态',
+    key: 'followStatus',
+    type: 'select', 
+    placeholcer:'请选择状态',
+    defaultValue: 'all',
+    options: []
+  },
+  {
+    label: '职务',
+    key: 'position',
+    type: 'select', 
+    placeholcer:'请选择职务',
+    defaultValue: 'all',
+    options: []
+  },
+  {
+    label: '时间',
+    key: 'startAndEndTime',
+    type: 'datetimerange', 
+    placeholcer:'请选择',
+    hidden:true,
+    defaultValue: '',
+  }, 
+])

src/components/MyCustomerHeaderSearch/SelectSearch/index.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="page_search">
+        <div class="search_content">
+            <div class="content_left">
+                <FormSearchGroup :searchList="myFollowSearchSelectList" 
+                    @searchChange="HandleSearchChange">
+                </FormSearchGroup>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { myFollowSearchSelectList } from './formSearchGroup';
+import {searchParams} from '../commonVar'
+import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
+
+const emit = defineEmits(['searchChange'])
+
+const HandleSearchChange = async (params,key)=>{
+    if(key == 'time' && params.time !== 'custom' ){
+        searchParams.value.startAndEndTime = []
+    }
+    if(key == 'time'){
+        myFollowSearchSelectList.value = myFollowSearchSelectList.value.map(item=>{
+            if(item.key == 'startAndEndTime'){
+                item.hidden =   params.time !== 'custom' ? true : false
+            }
+            return item
+        })
+    }
+    emit('searchChange',params,key)
+}
+</script>
+
+
+
+<style lang="scss" scoped>
+</style>

src/components/MyCustomerHeaderSearch/commonVar.ts

@@ -0,0 +1,10 @@
+import { ref } from "vue";
+
+
+export const searchParams = ref({
+    time:'all',
+    product:'all',
+    followStatus:'all',
+    position:'all',
+    startAndEndTime:[],
+})

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

@@ -1,7 +1,7 @@
 <template>
     <div class="message_overview">
         <!-- 左侧：产品概览与最新状态 -->
-        <div class="left_panel hide_scrollbar">
+        <div class="left_panel ">
             <div class="product_summary">
                 <div class="summary_title">跟进产品总数 {{ followUpProductSummary.total }}</div>
                 <div class="summary_tags">
@@ -9,7 +9,7 @@
                 </div>
             </div>
             
-            <div class="product_list" v-if="productsFollowStatistic?.length > 0">
+            <div class="product_list hide_scrollbar" v-if="productsFollowStatistic?.length > 0">
                 <template v-for="(item,index) in productsFollowStatistic" :key="item.productId" >
                     <div class="list_item">
                         <div class="item_title">{{item.productName}}</div>
@@ -26,21 +26,11 @@
         <!-- 中间：搜索与 我的跟进 -->
         <div class="center_panel">
             <div class="page_content hide_scrollbar"> 
-                <SearchBlock :searchList="ongoingFollowSearchList" @searchChange="HandleSearchChange">
-                    <template #rowItem-time>
-                        <el-date-picker
-                            v-if="searchParams.time=='custom'"
-                            style="flex-grow: 0;height: 28px;"
-                            v-model="searchParams.startAndEndTime"
-                            @change="(val)=>HandleSearchChange({startAndEndTime:val},'startAndEndTime')"
-                            start-placeholder="开始时间"
-                            end-placeholder="结束时间"
-                            type="datetimerange"
-                            range-separator="至"
-                            size="default"
-                            />
-                    </template>
-                </SearchBlock>
+                <!-- 滚动头部筛选展示 -->
+                <SelectSearch  @searchChange="HandleSearchChange"></SelectSearch>
+                <!-- 正常筛选展示 -->
+                <BlockSearch @searchChange="HandleSearchChange"></BlockSearch>
+               
                 <FollowCard v-if="finalRenderData?.length > 0" style="margin-top: 16px;" :cardList="finalRenderData">
                     <template #operation="{row}">
                         <div style="" class="table_row_option">
@@ -192,8 +182,17 @@ import { ref, onMounted,watch } from 'vue';
 import {useRoute} from 'vue-router'
 import { ElMessage } from 'element-plus'
 
+import BlockSearch from '@/components/MyCustomerHeaderSearch/BlockSearch/index.vue'
+import {ongoingFollowSearchList} from '@/components/MyCustomerHeaderSearch/BlockSearch/searchBlock'
+import {searchParams} from '@/components/MyCustomerHeaderSearch/commonVar'
+
+import SelectSearch from '@/components/MyCustomerHeaderSearch/SelectSearch/index.vue'
+import {myFollowSearchSelectList} from '@/components/MyCustomerHeaderSearch/SelectSearch/formSearchGroup'
+
+
+
 import SearchBlock from '@/baseComponents/SearchBlock.vue';
-import { ongoingFollowSearchList,historyFollowSearchList } from './searchBlock';
+import { historyFollowSearchList } from './searchBlock';
 import FollowCard from '@/components/FollowCard.vue';
 import Pagination from '@/baseComponents/Pagination.vue';
 import FollowFormDialog from '@/components/FollowFormDialog/index.vue'
@@ -216,7 +215,6 @@ import {
 
 
 
-
 interface ProductFollowRecord {
   productId: string;  // 产品ID
   productName: string; // 产品名称
@@ -419,16 +417,39 @@ const GetOverviewDetail = async ()=>{
             }
             return item
         })
+
+        myFollowSearchSelectList.value = myFollowSearchSelectList.value.map(item=>{
+            switch(item.key){
+                case 'product':
+                    item.options = [
+                      { label: '全部产品', value: 'all' },
+                      ...productOption,
+                    ]
+                    item.defaultValue = searchParams.value.product
+                    break
+                case 'followStatus':
+                    item.options = [
+                      { label: '全部状态', value: 'all' },
+                      ...followStatusOption,
+                    ]
+                    item.defaultValue = searchParams.value.followStatus
+                    break
+                 case 'position':
+                    item.options = [
+                      { label: '全部职务', value: 'all' },
+                      ...positionOption
+                    ]
+                    item.defaultValue = searchParams.value.position
+                    break
+                default:
+                    item.defaultValue = searchParams.value[item.key]
+                    break
+            }
+            return item
+        })
     }
 }
-// 筛选条件
-const searchParams = ref({
-    time:'all',
-    product:'all',
-    followStatus:'all',
-    position:'all',
-    startAndEndTime:[],
-})
+
 const HandleSearchChange = async (params,key)=>{
     searchParams.value = {
         ...searchParams.value,
@@ -440,7 +461,6 @@ const HandleSearchChange = async (params,key)=>{
     await GetOverviewDetail()
 }
 
-
 /**
  * 3. 右侧数据展示
  */
@@ -719,6 +739,7 @@ onMounted( async ()=>{
             flex-direction: column;
             gap: 16px;
 
+            overflow: auto;
             padding:12px;
             background: #F8FAFE;
             border-radius: 10px;

src/views/myCustomer/myCustomerDetail/customerStatusOverview/searchBlock.ts

@@ -1,45 +1,5 @@
 import { ref } from "vue"
 
-// 进行中的跟进 有关筛选条件
-export const ongoingFollowSearchList = ref([
-  {
-    label: '时间',
-    key: 'time',
-    type: 'single', 
-    defaultValue: 'all',
-    options: [
-      { label: '全部', value: 'all' },
-      { label: '今天', value: 'today' },
-      { label: '昨天', value: 'yesterday' },
-      { label: '近3天', value: 'last3days' },
-      { label: '近1周', value: 'last1week' },
-      { label: '近1月', value: 'last1month' },
-      { label: '自定义', value: 'custom' }
-    ]
-  },
-  {
-    label: '产品',
-    key: 'product',
-    type: 'single', 
-    defaultValue: 'all',
-    options: []
-  },
-  {
-    label: '状态',
-    key: 'followStatus',
-    type: 'single', 
-    defaultValue: 'all',
-    options: []
-  },
-  {
-    label: '职务',
-    key: 'position',
-    type: 'single', 
-    defaultValue: 'all',
-    options: []
-  }
-])
-
 
 // 历史跟进 有关筛选条件
 export const historyFollowSearchList = ref([