feat(approval): 优化审批列表搜索功能并添加状态切换
- 在审批列表页面添加状态切换标签页 - 简化搜索表单为单个搜索框并添加防抖功能 - 更新搜索接口参数以支持状态筛选和模糊搜索
This commit is contained in:
parent
df72e1317c
commit
39820a036d
|
@ -36,6 +36,8 @@ export interface SearchApiReturnApprovalQuery {
|
|||
endTime?: string
|
||||
approvalType?: number
|
||||
corpid?: string
|
||||
handleStatus?: number;
|
||||
searchStr?: string;
|
||||
}
|
||||
|
||||
export interface ApiResponsePageData<T> {
|
||||
|
|
|
@ -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 = () => {
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
Loading…
Reference in New Issue