feat(approval): 优化审批列表搜索功能并添加状态切换

- 在审批列表页面添加状态切换标签页
- 简化搜索表单为单个搜索框并添加防抖功能
- 更新搜索接口参数以支持状态筛选和模糊搜索
This commit is contained in:
dzq 2025-06-21 10:43:09 +08:00
parent df72e1317c
commit 39820a036d
3 changed files with 38 additions and 39 deletions

View File

@ -36,6 +36,8 @@ export interface SearchApiReturnApprovalQuery {
endTime?: string
approvalType?: number
corpid?: string
handleStatus?: number;
searchStr?: string;
}
export interface ApiResponsePageData<T> {

View File

@ -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 = () => {

View File

@ -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(() => {