feat(审批资产列表): 添加标签页切换和搜索功能

- 新增标签页切换功能,区分待处理和已处理审批
- 添加搜索框支持按内容筛选
- 优化列表加载逻辑,避免重复数据
- 将核销码按钮改为悬浮样式
This commit is contained in:
dzq 2025-06-17 09:39:59 +08:00
parent e446ad2b38
commit b113afa71f
3 changed files with 64 additions and 31 deletions

View File

@ -147,6 +147,8 @@ export interface SearchReturnApprovalAssetQuery {
corpid?: string;
code?: string;
codeCheck?: number;
handleStatus?: number;
searchStr?: string;
}
export interface ApprovalGoodsCellEntity {

View File

@ -1,35 +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 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 class="btn-group">
<van-button type="primary" native-type="submit" style="flex: 1; height: 44px; border-radius: 8px; font-size: 16px;">搜索</van-button>
<van-button type="default" @click="showVerificationDialog = true" style="flex: 1; height: 44px; border-radius: 8px; font-size: 16px;">输入核销码</van-button>
</div>
<van-search v-model="searchParams.searchStr" placeholder="请输入搜索内容" />
</van-form>
<van-dialog v-model:show="showVerificationDialog" title="输入核销码" @confirm="handleVerification">
@ -37,7 +15,8 @@
</van-dialog>
<!-- 审批列表 -->
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
class="approval-list">
<van-cell v-for="item in list" :key="item.approvalId" :title="`审批单号:${item.approvalId}`" clickable
@click="handleCellClick(item.approvalId)">
<template #label>
@ -53,11 +32,18 @@
</template>
</van-cell>
</van-list>
<!-- 悬浮核销码按钮 -->
<van-button type="primary" @click="showVerificationDialog = true" class="floating-verification-btn">
<van-icon name="plus" style="font-size: 20px;" />
<!-- <span>核销码</span> -->
</van-button>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ref, reactive, watch, onUnmounted } from 'vue'
import { debounce } from 'lodash-es'
import { showDialog, showToast } from 'vant'
import { checkApprovalCodeApi, getApprovalAssetListApi } from '@/common/apis/approval'
import type { SearchReturnApprovalAssetQuery, ReturnApprovalAssetDTO } from '@/common/apis/approval/type'
@ -69,11 +55,14 @@ const router = useRouter();
const wxStore = useWxStore();
//
const activeTab = ref(0);
const searchParams = reactive<SearchReturnApprovalAssetQuery>({
corpid: wxStore.corpid,
handleStatus: activeTab.value,
approvalType: 1,
code: '',
codeCheck: 1,
searchStr: '',
pageNum: 1,
pageSize: 10,
})
@ -169,6 +158,12 @@ const onDateConfirm = (values: Date[]) => {
showDatePicker.value = false
}
//
const handleTabChange = (tabIndex: number) => {
searchParams.handleStatus = tabIndex;
handleSearch();
};
//
const handleSearch = () => {
list.value = []
@ -176,6 +171,10 @@ const handleSearch = () => {
onLoad()
}
const debouncedHandleSearch = debounce(() => {
handleSearch();
}, 500);
//
const handleReset = () => {
Object.assign(searchParams, {
@ -198,7 +197,10 @@ const onLoad = async () => {
try {
searchParams.corpid = wxStore.corpid;
const { data } = await getApprovalAssetListApi(searchParams)
list.value.push(...data.rows)
// approvalId
const existingIds = new Set(list.value.map(item => item.approvalId));
const newItems = data.rows.filter(item => !existingIds.has(item.approvalId));
list.value.push(...newItems);
loading.value = false
if (list.value.length >= data.total) {
@ -211,6 +213,15 @@ const onLoad = async () => {
finished.value = true
}
}
//
watch(() => searchParams.searchStr, (newVal) => {
debouncedHandleSearch();
});
onUnmounted(() => {
debouncedHandleSearch.cancel();
});
</script>
<style lang="scss" scoped>
@ -218,6 +229,10 @@ const onLoad = async () => {
padding: 12px;
}
.approval-list {
margin-top: 12px;
}
.van-cell__title {
font-size: 14px;
color: #333;
@ -238,4 +253,18 @@ const onLoad = async () => {
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
padding: 16px;
}
.floating-verification-btn {
position: fixed;
bottom: 80px;
right: 20px;
border-radius: 50%;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
padding: 0;
}
</style>

View File

@ -35,8 +35,10 @@ declare module 'vue' {
VanSidebar: typeof import('vant/es')['Sidebar']
VanSidebarItem: typeof import('vant/es')['SidebarItem']
VanStepper: typeof import('vant/es')['Stepper']
VanTab: typeof import('vant/es')['Tab']
VanTabbar: typeof import('vant/es')['Tabbar']
VanTabbarItem: typeof import('vant/es')['TabbarItem']
VanTabs: typeof import('vant/es')['Tabs']
VanTag: typeof import('vant/es')['Tag']
VanUploader: typeof import('vant/es')['Uploader']
}