feat(审批资产列表): 添加标签页切换和搜索功能
- 新增标签页切换功能,区分待处理和已处理审批 - 添加搜索框支持按内容筛选 - 优化列表加载逻辑,避免重复数据 - 将核销码按钮改为悬浮样式
This commit is contained in:
parent
e446ad2b38
commit
b113afa71f
|
@ -147,6 +147,8 @@ export interface SearchReturnApprovalAssetQuery {
|
|||
corpid?: string;
|
||||
code?: string;
|
||||
codeCheck?: number;
|
||||
handleStatus?: number;
|
||||
searchStr?: string;
|
||||
}
|
||||
|
||||
export interface ApprovalGoodsCellEntity {
|
||||
|
|
|
@ -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>
|
|
@ -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']
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue