From dddafa46f1fdc0ada888774d7bc5927bd546356c Mon Sep 17 00:00:00 2001
From: "wangmingyong@163.com" <wangmingyong@163.com>
Date: Wed, 22 Jul 2026 09:26:23 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=BD=E5=8A=A0=E4=B8=8A=E4=BA=86=E5=85=AC?=
 =?UTF-8?q?=E5=85=B1=E6=90=9C=E7=B4=A2=E5=92=8C=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/SearchFilterBar.vue | 205 ++++++++++++++++++
 .../enforcement/enforce/enforcementList.vue   | 126 ++---------
 .../views/enforcement/law/lawServiceList.vue  |  31 ++-
 .../message/enforcementEvaluateList.vue       |  50 ++---
 .../message/enforcementReserveList.vue        |  40 +++-
 .../message/enforcementTaskList.vue           |  43 +++-
 .../enforcement/message/planNoticeList.vue    |  58 ++---
 7 files changed, 370 insertions(+), 183 deletions(-)
 create mode 100644 zdxt-web-client/zdxt-efcode-enforcement-app/src/components/common/SearchFilterBar.vue

diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/components/common/SearchFilterBar.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/components/common/SearchFilterBar.vue
new file mode 100644
index 00000000..d08544e6
--- /dev/null
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/components/common/SearchFilterBar.vue
@@ -0,0 +1,205 @@
+<template>
+    <div class="search-filter-bar">
+        <van-search v-model="searchText" show-action placeholder="请输入关键字查询" clearable clear-trigger="always"
+            @clear="onClear" @search="onSearch">
+            <template #action>
+                <div @click="onSearch">搜索</div>
+            </template>
+        </van-search>
+
+        <div v-if="showDateFilter" class="search-button-list">
+            <van-button plain hairline :class="dateType === null ? 'search-btn active' : 'search-btn'"
+                @click="searchDateType(null)" round type="primary" size="mini">全部</van-button>
+            <van-button plain hairline :class="dateType === 1 ? 'search-btn active' : 'search-btn'"
+                @click="searchDateType(1)" round type="primary" size="mini">本月</van-button>
+            <van-button plain hairline :class="dateType === 2 ? 'search-btn active' : 'search-btn'"
+                @click="searchDateType(2)" round type="primary" size="mini">本季</van-button>
+            <van-button plain hairline :class="dateType === 3 ? 'search-btn active' : 'search-btn'"
+                @click="searchDateType(3)" round type="primary" size="mini">本年</van-button>
+            <van-button plain hairline :class="dateType === 9 ? 'search-btn active' : 'search-btn'"
+                @click="openDatePicker" round type="primary" size="mini">筛选</van-button>
+        </div>
+
+        <div v-if="showDateFilter" class="search-date-display" v-show="dateShow">
+            <span class="date-label" @click="openDatePicker">{{ dateSearchDisplay }}</span>
+        </div>
+
+        <van-popup v-if="showDateFilter" v-model:show="showDatePicker" position="bottom">
+            <van-date-picker title="选择月度" v-model="currentDate" :min-date="minDate" :max-date="maxDate"
+                :columns-type="['year', 'month']" @confirm="onDateConfirm" @cancel="showDatePicker = false" />
+        </van-popup>
+    </div>
+</template>
+
+<script setup name="SearchFilterBar">
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+    searchValue: {
+        type: String,
+        default: ''
+    },
+    dateType: {
+        type: Number,
+        default: null
+    },
+    dateSearch: {
+        type: String,
+        default: null
+    },
+    showDateFilter: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const emit = defineEmits(['search', 'clear', 'dateChange']);
+
+const searchText = ref(props.searchValue);
+const dateType = ref(props.dateType);
+const dateShow = ref(false);
+const showDatePicker = ref(false);
+const dateSearchDisplay = ref('');
+const currentDate = ref(['2026', '01']);
+const minDate = new Date(2020, 0, 1);
+const maxDate = new Date(2030, 11, 31);
+
+watch(() => props.dateType, (newVal) => {
+    dateType.value = newVal;
+});
+
+watch(() => props.dateSearch, (newVal) => {
+    if (newVal) {
+        const parts = newVal.split('-');
+        if (parts.length >= 2) {
+            currentDate.value = [parts[0], parts[1]];
+            dateSearchDisplay.value = `${parts[0]}/${parts[1]}`;
+            dateShow.value = true;
+        }
+    } else {
+        dateShow.value = false;
+        dateSearchDisplay.value = '';
+    }
+});
+
+const onSearch = () => {
+    emit('search', {
+        searchValue: searchText.value,
+        dateType: props.dateType,
+        dateSearch: props.dateSearch
+    });
+};
+
+const onClear = () => {
+    searchText.value = '';
+    emit('clear');
+    emit('search', {
+        searchValue: '',
+        dateType: props.dateType,
+        dateSearch: props.dateSearch
+    });
+};
+
+const searchDateType = (val) => {
+    emit('dateChange', {
+        dateType: val,
+        dateSearch: null,
+        dateShow: false
+    });
+};
+
+const openDatePicker = () => {
+    showDatePicker.value = true;
+};
+
+const onDateConfirm = (value) => {
+    const year = value.selectedValues[0];
+    const month = value.selectedValues[1];
+    dateSearchDisplay.value = year + '/' + month;
+    showDatePicker.value = false;
+    emit('dateChange', {
+        dateType: 9,
+        dateSearch: year + '-' + month,
+        dateShow: true
+    });
+};
+</script>
+
+<style lang="less" scoped>
+.search-filter-bar {
+    :deep(.van-search) {
+        background: #fff;
+        padding: 12px 16px;
+        margin-bottom: -1px;
+    }
+
+    :deep(.van-search__content) {
+        height: 0.9rem;
+        border: 1px solid #ececec;
+        border-radius: 0.15rem 0 0 0.15rem;
+    }
+
+    :deep(.van-search__action) {
+        margin: 0 3% 0 0;
+        width: 10%;
+        height: 0.9rem;
+        background: #1367fe;
+        border: 1px solid #1367fe;
+        border-radius: 0 0.15rem 0.15rem 0;
+        color: #fff;
+        text-align: center;
+        line-height: 0.9rem;
+    }
+
+    .search-button-list {
+        display: flex;
+        flex-direction: row;
+        padding: 0.2rem 0.27rem 0;
+        gap: 0.15rem;
+        margin-bottom: 8px;
+
+        .search-btn {
+            flex: 1;
+            height: 0.7rem;
+            background: #ebebeb;
+            border-color: #ebebeb;
+            color: #999;
+            font-size: 0.3rem;
+        }
+
+        .search-btn.active {
+            background-color: #d9e6fd;
+            border-color: #75a5fb;
+            color: #1367fe;
+        }
+    }
+
+    .search-date-display {
+        padding: 0.15rem 0.27rem 0;
+
+        .date-label {
+            color: #c1bfbf;
+            font-size: 0.4rem;
+        }
+    }
+
+    /* ===== Vant 搜索框样式覆盖 ===== */
+    :deep(.van-search__content) {
+        height: 0.9rem;
+        border: 1px solid #ececec;
+        border-radius: 0.15rem 0 0 0.15rem;
+    }
+
+    :deep(.van-search__action) {
+        margin: 0 3% 0 0;
+        width: 10%;
+        height: 0.9rem;
+        background: #1367fe;
+        border: 0.01rem solid #1367fe;
+        border-radius: 0 0.15rem 0.15rem 0;
+        color: #fff;
+        text-align: center;
+        line-height: 0.9rem;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/enforce/enforcementList.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/enforce/enforcementList.vue
index a4664bb0..f3c92ab5 100644
--- a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/enforce/enforcementList.vue
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/enforce/enforcementList.vue
@@ -1,37 +1,13 @@
 <template>
     <div class="registration-list-page">
-        <!-- 搜索栏 -->
-        <van-search v-model="searchText" show-action placeholder="请输入关键字查询" clearable clear-trigger="always"
-            @clear="onClear" @search="onSearch">
-            <template #action>
-                <div @click="onSearch">搜索</div>
-            </template>
-        </van-search>
-
-        <!-- 日期快捷筛选按钮 -->
-        <div class="search-button-list">
-            <van-button plain hairline :class="dateType === null ? 'search-btn active' : 'search-btn'"
-                @click="searchDateType(null)" round type="primary" size="mini">全部</van-button>
-            <van-button plain hairline :class="dateType === 1 ? 'search-btn active' : 'search-btn'"
-                @click="searchDateType(1)" round type="primary" size="mini">本月</van-button>
-            <van-button plain hairline :class="dateType === 2 ? 'search-btn active' : 'search-btn'"
-                @click="searchDateType(2)" round type="primary" size="mini">本季</van-button>
-            <van-button plain hairline :class="dateType === 3 ? 'search-btn active' : 'search-btn'"
-                @click="searchDateType(3)" round type="primary" size="mini">本年</van-button>
-            <van-button plain hairline :class="dateType === 9 ? 'search-btn active' : 'search-btn'"
-                @click="openDatePicker" round type="primary" size="mini">筛选</van-button>
-        </div>
-
-        <!-- 指定月份显示 -->
-        <div class="search-date-display" v-show="dateShow">
-            <span class="date-label" @click="openDatePicker">{{ dateSearchDisplay }}</span>
-        </div>
-
-        <!-- 月份选择器弹出层 -->
-        <van-popup v-model:show="showDatePicker" position="bottom">
-            <van-date-picker title="选择月度" v-model="currentDate" :min-date="minDate" :max-date="maxDate"
-                :columns-type="['year', 'month']" @confirm="onDateConfirm" @cancel="showDatePicker = false" />
-        </van-popup>
+        <SearchFilterBar 
+            :search-value="searchText" 
+            :date-type="dateType" 
+            :date-search="dateSearch"
+            @search="onSearch" 
+            @clear="onClear" 
+            @date-change="onDateChange" 
+        />
 
         <!-- 可滚动列表区域 -->
         <div class="list-container">
@@ -87,6 +63,7 @@ import { showToast } from 'vant';
 import 'vant/es/toast/style';
 import { queryEnforcementRegistrationPageList } from '@/api/enforcement';
 import { formatEnforcer } from '@/util/util';
+import SearchFilterBar from '@/components/common/SearchFilterBar.vue';
 
 const router = useRouter();
 
@@ -104,12 +81,6 @@ const pageSize = ref(10);
 // ========== 日期筛选 ==========
 const dateType = ref(null);
 const dateSearch = ref(null);
-const dateSearchDisplay = ref('');
-const dateShow = ref(false);
-const showDatePicker = ref(false);
-const currentDate = ref(['2026', '01']);
-const minDate = new Date(2020, 0, 1);
-const maxDate = new Date(2030, 11, 31);
 
 // ========== 格式化日期 ==========
 const formatDate = (dateStr) => {
@@ -202,29 +173,10 @@ const onClear = () => {
     onSearch();
 };
 
-// ========== 日期类型切换 ==========
-const searchDateType = (val) => {
-    dateType.value = val;
-    dateSearch.value = null;
-    dateShow.value = false;
-    onSearch();
-};
-
-// ========== 打开月份选择器 ==========
-const openDatePicker = () => {
-    dateType.value = 9;
-    showDatePicker.value = true;
-};
-
-// ========== 月份选择确认 ==========
-const onDateConfirm = (value) => {
-    const year = value.selectedValues[0];
-    const month = value.selectedValues[1];
-    dateSearchDisplay.value = year + '/' + month;
-    dateSearch.value = year + '-' + month;
-    dateType.value = 9;
-    dateShow.value = true;
-    showDatePicker.value = false;
+// ========== 日期筛选变化 ==========
+const onDateChange = ({ dateType: type, dateSearch: search, dateShow }) => {
+    dateType.value = type;
+    dateSearch.value = search;
     onSearch();
 };
 
@@ -274,40 +226,6 @@ onMounted(() => {
     }
 }
 
-/* ===== 搜索按钮行 ===== */
-.search-button-list {
-    display: flex;
-    flex-direction: row;
-    padding: 0.2rem 0.27rem 0;
-    gap: 0.15rem;
-    margin-bottom: 8px;
-
-    .search-btn {
-        flex: 1;
-        height: 0.7rem;
-        background: #ebebeb;
-        border-color: #ebebeb;
-        color: #999;
-        font-size: 0.3rem;
-    }
-
-    .search-btn.active {
-        background-color: #d9e6fd;
-        border-color: #75a5fb;
-        color: #1367fe;
-    }
-}
-
-/* ===== 日期显示 ===== */
-.search-date-display {
-    padding: 0.15rem 0.27rem 0;
-
-    .date-label {
-        color: #c1bfbf;
-        font-size: 0.4rem;
-    }
-}
-
 /* ===== 卡片样式 ===== */
 .card-item {
     background: #fff;
@@ -403,22 +321,4 @@ onMounted(() => {
     }
 }
 
-/* ===== Vant 搜索框样式覆盖 ===== */
-:deep(.van-search__content) {
-    height: 0.9rem;
-    border: 1px solid #ececec;
-    border-radius: 0.15rem 0 0 0.15rem;
-}
-
-:deep(.van-search__action) {
-    margin: 0 3% 0 0;
-    width: 10%;
-    height: 0.9rem;
-    background: #1367fe;
-    border: 0.01rem solid #1367fe;
-    border-radius: 0 0.15rem 0.15rem 0;
-    color: #fff;
-    text-align: center;
-    line-height: 0.9rem;
-}
 </style>
diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/law/lawServiceList.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/law/lawServiceList.vue
index d35d8bf2..6b3ebbb6 100644
--- a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/law/lawServiceList.vue
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/law/lawServiceList.vue
@@ -9,13 +9,14 @@
         >
         </van-nav-bar> -->
 
-        <!-- 搜索栏 -->
-        <van-search v-model="searchText" show-action placeholder="请输入关键字查询" clearable clear-trigger="always"
-            @clear="onClear" @search="onSearch">
-            <template #action>
-                <div @click="onSearch">搜索</div>
-            </template>
-        </van-search>
+        <SearchFilterBar 
+            :search-value="searchText" 
+            :date-type="dateType" 
+            :date-search="dateSearch"
+            @search="onSearch" 
+            @clear="onClear" 
+            @date-change="onDateChange" 
+        />
 
         <!-- 列表区域 -->
         <div class="list-container">
@@ -70,6 +71,7 @@ import { useRouter } from 'vue-router';
 import { showToast } from 'vant';
 import 'vant/es/toast/style';
 import { getEducationServicesList } from '@/api/enforcement';
+import SearchFilterBar from '@/components/common/SearchFilterBar.vue';
 
 const router = useRouter();
 
@@ -82,6 +84,8 @@ const pageNum = ref(1);
 const pageSize = ref(10);
 const isFetching = ref(false); // 防重复请求标志位
 const searchText = ref('');
+const dateType = ref(null);
+const dateSearch = ref(null);
 
 // ========== 格式化时间 ==========
 const formatTime = (val) => {
@@ -117,6 +121,12 @@ const fetchList = () => {
     if (searchText.value) {
         params.searchValue = searchText.value;
     }
+    if (dateType.value != null && dateType.value !== 9) {
+        params.dateType = dateType.value;
+    }
+    if (dateSearch.value) {
+        params.dateSearch = dateSearch.value;
+    }
     getEducationServicesList(params, (res) => {
         if (res.code === 200) {
             const rows = res.rows || res.data?.rows || [];
@@ -186,6 +196,13 @@ const onClear = () => {
     onSearch();
 };
 
+// ========== 日期筛选变化 ==========
+const onDateChange = ({ dateType: type, dateSearch: search }) => {
+    dateType.value = type;
+    dateSearch.value = search;
+    onSearch();
+};
+
 // ========== 筛选点击 ==========
 const onFilterClick = () => {
     showToast('筛选功能开发中');
diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/enforcementEvaluateList.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/enforcementEvaluateList.vue
index 436ce7a2..c4eb7b3b 100644
--- a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/enforcementEvaluateList.vue
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/enforcementEvaluateList.vue
@@ -4,14 +4,14 @@
         <!-- <van-nav-bar title="执法反馈" left-text="返回" left-arrow @click-left="onClickLeft">
         </van-nav-bar> -->
 
-        <!-- 搜索栏 -->
-        <van-search v-model="searchText" show-action placeholder="请输入关键字查询" clearable clear-trigger="always"
-            @clear="onClear" @search="onSearch">
-            <template #action>
-                <div @click="onSearch">搜索</div>
-            </template>
-        </van-search>
-
+        <SearchFilterBar 
+            :search-value="searchText" 
+            :date-type="dateType" 
+            :date-search="dateSearch"
+            @search="onSearch" 
+            @clear="onClear" 
+            @date-change="onDateChange" 
+        />
         <!-- 列表区域 -->
         <div class="list-container">
             <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
@@ -69,6 +69,7 @@ import { showToast } from 'vant';
 import 'vant/es/toast/style';
 import { queryEvaluateList } from '@/api/enforcement/index';
 import { formatEnforcer } from '@/util/util';
+import SearchFilterBar from '@/components/common/SearchFilterBar.vue';
 
 const router = useRouter();
 
@@ -80,6 +81,8 @@ const refreshing = ref(false);
 const pageNum = ref(1);
 const pageSize = ref(10);
 const searchText = ref('');
+const dateType = ref(null);
+const dateSearch = ref(null);
 
 // ========== 获取状态文本 ==========
 const getStatusText = (status) => {
@@ -111,6 +114,12 @@ const fetchList = () => {
     if (searchText.value) {
         params.searchValue = searchText.value;
     }
+    if (dateType.value != null && dateType.value !== 9) {
+        params.dateType = dateType.value;
+    }
+    if (dateSearch.value) {
+        params.dateSearch = dateSearch.value;
+    }
     queryEvaluateList(params, (res) => {
         if (res.code === 200) {
             const rows = res.rows || res.data?.rows || res.data?.list || res.data || [];
@@ -173,6 +182,13 @@ const onClear = () => {
     onSearch();
 };
 
+// ========== 日期筛选变化 ==========
+const onDateChange = ({ dateType: type, dateSearch: search }) => {
+    dateType.value = type;
+    dateSearch.value = search;
+    onSearch();
+};
+
 // ========== 跳转详情页面 ==========
 const toDetail = (item) => {
     router.push({
@@ -314,22 +330,4 @@ onMounted(() => {
 :deep(.van-empty) {
     padding: 60px 0;
 }
-/* ===== Vant 搜索框样式覆盖 ===== */
-:deep(.van-search__content) {
-    height: 0.9rem;
-    border: 1px solid #ececec;
-    border-radius: 0.15rem 0 0 0.15rem;
-}
-
-:deep(.van-search__action) {
-    margin: 0 3% 0 0;
-    width: 10%;
-    height: 0.9rem;
-    background: #1367fe;
-    border: 0.01rem solid #1367fe;
-    border-radius: 0 0.15rem 0.15rem 0;
-    color: #fff;
-    text-align: center;
-    line-height: 0.9rem;
-}
 </style>
\ No newline at end of file
diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/enforcementReserveList.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/enforcementReserveList.vue
index b7e6f41b..320093c0 100644
--- a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/enforcementReserveList.vue
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/enforcementReserveList.vue
@@ -1,5 +1,13 @@
 <template>
     <div class="reserve-list-page app_content">
+        <SearchFilterBar 
+            :search-value="searchText" 
+            :date-type="dateType" 
+            :date-search="dateSearch"
+            @search="onSearch" 
+            @clear="onClear" 
+            @date-change="onDateChange" 
+        />
         <div class="content-area">
             <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                 <van-list v-model:loading="loading" :finished="finished" finished-text=""
@@ -37,6 +45,7 @@
 <script setup name="enforcementReserveList">
 import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
+import SearchFilterBar from '@/components/common/SearchFilterBar.vue';
 
 const router = useRouter();
 
@@ -44,6 +53,9 @@ const reserveList = ref([]);
 const loading = ref(false);
 const finished = ref(false);
 const refreshing = ref(false);
+const searchText = ref('');
+const dateType = ref(null);
+const dateSearch = ref(null);
 
 const fetchReserveList = () => {
     loading.value = true;
@@ -68,7 +80,16 @@ const fetchReserveList = () => {
                 checkTime: '2026-04-20 上午'
             }
         ];
-        reserveList.value = mockData;
+        let filteredData = mockData;
+        if (searchText.value) {
+            const keyword = searchText.value.toLowerCase();
+            filteredData = filteredData.filter(item => 
+                (item.enterpriseName || '').toLowerCase().includes(keyword) ||
+                (item.reserveUnit || '').toLowerCase().includes(keyword) ||
+                (item.enforcementUnit || '').toLowerCase().includes(keyword)
+            );
+        }
+        reserveList.value = filteredData;
         loading.value = false;
         finished.value = true;
         refreshing.value = false;
@@ -85,6 +106,23 @@ const onRefresh = () => {
     fetchReserveList();
 };
 
+const onSearch = () => {
+    finished.value = false;
+    loading.value = true;
+    fetchReserveList();
+};
+
+const onClear = () => {
+    searchText.value = '';
+    onSearch();
+};
+
+const onDateChange = ({ dateType: type, dateSearch: search }) => {
+    dateType.value = type;
+    dateSearch.value = search;
+    onSearch();
+};
+
 onMounted(() => {
     fetchReserveList();
 });
diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/enforcementTaskList.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/enforcementTaskList.vue
index 9e77eb39..1a1b6324 100644
--- a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/enforcementTaskList.vue
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/enforcementTaskList.vue
@@ -1,6 +1,14 @@
 <template>
     <div class="task-list-page app_content">
         <!-- <van-nav-bar title="执法任务" left-arrow @click-left="goBack" /> -->
+        <SearchFilterBar 
+            :search-value="searchText" 
+            :date-type="dateType" 
+            :date-search="dateSearch"
+            @search="onSearch" 
+            @clear="onClear" 
+            @date-change="onDateChange" 
+        />
         <div class="content-area">
             <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                 <van-list v-model:loading="loading" :finished="finished" finished-text=""
@@ -38,6 +46,7 @@
 <script setup name="enforcementTaskList">
 import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
+import SearchFilterBar from '@/components/common/SearchFilterBar.vue';
 
 const router = useRouter();
 
@@ -47,6 +56,9 @@ const finished = ref(false);
 const refreshing = ref(false);
 const pageNum = ref(1);
 const pageSize = ref(10);
+const searchText = ref('');
+const dateType = ref(null);
+const dateSearch = ref(null);
 
 const goBack = () => {
     router.back();
@@ -65,7 +77,7 @@ const fetchTaskList = () => {
             {
                 time: '2026-03-20 14:20',
                 enterpriseName: '深圳市新粤云有限公司',
-                checkTime: '2026-03-04 上午',
+                checkTime: '2026-03-21 上午',
                 enforcementItem: '日常检查'
             },
             {
@@ -75,7 +87,15 @@ const fetchTaskList = () => {
                 enforcementItem: '日常检查'
             }
         ];
-        taskList.value = mockData;
+        let filteredData = mockData;
+        if (searchText.value) {
+            const keyword = searchText.value.toLowerCase();
+            filteredData = filteredData.filter(item => 
+                item.enterpriseName.toLowerCase().includes(keyword) ||
+                item.enforcementItem.toLowerCase().includes(keyword)
+            );
+        }
+        taskList.value = filteredData;
         loading.value = false;
         finished.value = true;
         refreshing.value = false;
@@ -93,6 +113,25 @@ const onRefresh = () => {
     fetchTaskList();
 };
 
+const onSearch = () => {
+    pageNum.value = 1;
+    taskList.value = [];
+    finished.value = false;
+    loading.value = true;
+    fetchTaskList();
+};
+
+const onClear = () => {
+    searchText.value = '';
+    onSearch();
+};
+
+const onDateChange = ({ dateType: type, dateSearch: search }) => {
+    dateType.value = type;
+    dateSearch.value = search;
+    onSearch();
+};
+
 onMounted(() => {
     fetchTaskList();
 });
diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/planNoticeList.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/planNoticeList.vue
index 19c8e204..5ceb3c00 100644
--- a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/planNoticeList.vue
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/message/planNoticeList.vue
@@ -4,15 +4,14 @@
         <van-nav-bar title="计划通知" left-text="返回" left-arrow @click-left="onClickLeft">
         </van-nav-bar>
 
-        <!-- 搜索栏 -->
-        <div class="search-bar">
-            <van-search v-model="searchText" show-action placeholder="请输入计划名称/单位" clearable clear-icon="clear"
-                clear-trigger="always" @clear="onClear" @search="onSearch">
-                <template #action>
-                    <div @click="onSearch">搜索</div>
-                </template>
-            </van-search>
-        </div>
+        <SearchFilterBar 
+            :search-value="searchText" 
+            :date-type="dateType" 
+            :date-search="dateSearch"
+            @search="onSearch" 
+            @clear="onClear" 
+            @date-change="onDateChange" 
+        />
 
         <!-- 列表区域 -->
         <div class="list-container">
@@ -69,6 +68,7 @@ import { useRouter } from 'vue-router';
 import { showToast } from 'vant';
 import 'vant/es/toast/style';
 import { queryListNoPermission } from '@/api/enforcement/index';
+import SearchFilterBar from '@/components/common/SearchFilterBar.vue';
 
 const router = useRouter();
 
@@ -80,6 +80,8 @@ const refreshing = ref(false);
 const searchText = ref('');
 const pageNum = ref(1);
 const pageSize = ref(10);
+const dateType = ref(null);
+const dateSearch = ref(null);
 
 // ========== 加载数据 ==========
 const fetchList = () => {
@@ -88,6 +90,12 @@ const fetchList = () => {
         pageSize: pageSize.value,
         queryParam: searchText.value || undefined,
     };
+    if (dateType.value != null && dateType.value !== 9) {
+        params.dateType = dateType.value;
+    }
+    if (dateSearch.value) {
+        params.dateSearch = dateSearch.value;
+    }
     queryListNoPermission(params, (res) => {
         if (res.code === 200) {
             const rows = res.rows || [];
@@ -141,6 +149,13 @@ const onClear = () => {
     onSearch();
 };
 
+// ========== 日期筛选变化 ==========
+const onDateChange = ({ dateType: type, dateSearch: search }) => {
+    dateType.value = type;
+    dateSearch.value = search;
+    onSearch();
+};
+
 // ========== 搜索 ==========
 const onSearch = () => {
     pageNum.value = 1;
@@ -204,31 +219,6 @@ onMounted(() => {
     color: #333;
 }
 
-/* ===== 搜索栏样式 ===== */
-:deep(.van-search) {
-    background: #fff;
-    padding: 12px 16px;
-    margin-bottom: -1px;
-}
-
-:deep(.van-search__content) {
-    height: 0.9rem;
-    border: 1px solid #ececec;
-    border-radius: 0.15rem 0 0 0.15rem;
-}
-
-:deep(.van-search__action) {
-    margin: 0 3% 0 0;
-    width: 10%;
-    height: 0.9rem;
-    background: #1367fe;
-    border: 1px solid #1367fe;
-    border-radius: 0 0.15rem 0.15rem 0;
-    color: #fff;
-    text-align: center;
-    line-height: 0.9rem;
-}
-
 /* ===== 列表容器 ===== */
 .list-container {
     flex: 1;