From 39820a036d81acb84eedd2571290e065c6a540ae Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Sat, 21 Jun 2025 10:43:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(approval):=20=E4=BC=98=E5=8C=96=E5=AE=A1?=
 =?UTF-8?q?=E6=89=B9=E5=88=97=E8=A1=A8=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=B9=B6=E6=B7=BB=E5=8A=A0=E7=8A=B6=E6=80=81=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在审批列表页面添加状态切换标签页
- 简化搜索表单为单个搜索框并添加防抖功能
- 更新搜索接口参数以支持状态筛选和模糊搜索
---
 src/common/apis/approval/type.ts |  2 +
 src/pages/approval/list.vue      | 68 +++++++++++++++-----------------
 src/pages/approvalAsset/list.vue |  7 ++--
 3 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/src/common/apis/approval/type.ts b/src/common/apis/approval/type.ts
index 983976d..05aa962 100644
--- a/src/common/apis/approval/type.ts
+++ b/src/common/apis/approval/type.ts
@@ -36,6 +36,8 @@ export interface SearchApiReturnApprovalQuery {
   endTime?: string
   approvalType?: number
   corpid?: string
+  handleStatus?: number;
+  searchStr?: string;
 }
 
 export interface ApiResponsePageData<T> {
diff --git a/src/pages/approval/list.vue b/src/pages/approval/list.vue
index 6853af5..4aa063c 100644
--- a/src/pages/approval/list.vue
+++ b/src/pages/approval/list.vue
@@ -1,40 +1,13 @@
 <template>
     <div class="approval-list-container">
+        <!-- 状态切换标签页 -->
+        <van-tabs v-model:active="activeTab" @change="handleTabChange">
+            <van-tab title="待处理"></van-tab>
+            <van-tab title="已处理"></van-tab>
+        </van-tabs>
         <!-- 搜索表单 -->
         <van-form @submit="handleSearch">
-            <van-field v-model="searchParams.approvalId" label="审批单号" type="number" placeholder="请输入审批单号" />
-
-            <van-field v-model="searchParams.orderId" label="订单编号" type="number" placeholder="请输入订单编号" />
-
-            <van-field v-model="searchParams.goodsId" label="商品ID" type="number" placeholder="请输入商品ID" />
-
-            <van-field name="status" label="审批状态" readonly clickable v-model="statusText" placeholder="请选择状态"
-                @click="showStatusPicker = true" />
-            <van-popup v-model:show="showStatusPicker" position="bottom">
-                <van-picker :columns="statusOptions" @confirm="onStatusConfirm" @cancel="showStatusPicker = false" />
-            </van-popup>
-
-            <!-- <van-field
-        readonly
-        clickable
-        name="date"
-        :value="dateRangeText"
-        label="申请时间"
-        placeholder="选择时间范围"
-        @click="showDatePicker = true"
-      />
-      <van-popup v-model:show="showDatePicker" position="bottom">
-        <van-datetime-picker
-          type="daterange"
-          @confirm="onDateConfirm"
-          @cancel="showDatePicker = false"
-        />
-      </van-popup> -->
-
-            <div style="margin: 16px;">
-                <van-button block type="primary" native-type="submit">搜索</van-button>
-                <van-button block plain type="primary" style="margin-top: 10px;" @click="handleReset">重置</van-button>
-            </div>
+            <van-search v-model="searchParams.searchStr" placeholder="请输入搜索内容" />
         </van-form>
 
         <!-- 审批列表 -->
@@ -60,14 +33,18 @@ import type { SearchApiReturnApprovalQuery, ReturnApprovalEntity } from '@/commo
 import type { PickerConfirmEventParams } from 'vant/es';
 import { useApprovalStore } from '@/pinia/stores/approval';
 import { useWxStore } from '@/pinia/stores/wx';
+import { debounce } from 'lodash-es';
 
 const router = useRouter();
 const wxStore = useWxStore();
 
 // 搜索参数
+const activeTab = ref(0);
 const searchParams = reactive<SearchApiReturnApprovalQuery>({
     corpid: wxStore.corpid,
     approvalType: 0,
+    handleStatus: activeTab.value,
+    searchStr: '',
     pageNum: 1,
     pageSize: 10,
 })
@@ -126,6 +103,12 @@ const onStatusConfirm = (e: PickerConfirmEventParams) => {
     statusText.value = String(selectedOptions[0]?.text || '');
 }
 
+// 标签页切换处理
+const handleTabChange = (tabIndex: number) => {
+    searchParams.handleStatus = tabIndex;
+    handleSearch();
+};
+
 // 处理时间选择
 const onDateConfirm = (values: Date[]) => {
     const [start, end] = values
@@ -137,10 +120,23 @@ const onDateConfirm = (values: Date[]) => {
 
 // 搜索处理
 const handleSearch = () => {
-    list.value = []
-    searchParams.pageNum = 1
-    onLoad()
+    list.value = [];
+    searchParams.pageNum = 1;
+    finished.value = false;
+    onLoad();
 }
+const debouncedHandleSearch = debounce(() => {
+    handleSearch();
+}, 500);
+
+// 监听搜索字符串变化触发搜索
+watch(() => searchParams.searchStr, (newVal) => {
+    debouncedHandleSearch();
+});
+
+onUnmounted(() => {
+    debouncedHandleSearch.cancel();
+});
 
 // 重置表单
 const handleReset = () => {
diff --git a/src/pages/approvalAsset/list.vue b/src/pages/approvalAsset/list.vue
index f893318..31a3df9 100644
--- a/src/pages/approvalAsset/list.vue
+++ b/src/pages/approvalAsset/list.vue
@@ -167,9 +167,10 @@ const handleTabChange = (tabIndex: number) => {
 
 // 搜索处理
 const handleSearch = () => {
-    list.value = []
-    searchParams.pageNum = 1
-    onLoad()
+    list.value = [];
+    searchParams.pageNum = 1;
+    finished.value = false;
+    onLoad();
 }
 
 const debouncedHandleSearch = debounce(() => {