feat(审批资产列表): 添加标签页切换和搜索功能
- 新增标签页切换功能,区分待处理和已处理审批 - 添加搜索框支持按内容筛选 - 优化列表加载逻辑,避免重复数据 - 将核销码按钮改为悬浮样式
This commit is contained in:
parent
e446ad2b38
commit
b113afa71f
|
@ -147,6 +147,8 @@ export interface SearchReturnApprovalAssetQuery {
|
||||||
corpid?: string;
|
corpid?: string;
|
||||||
code?: string;
|
code?: string;
|
||||||
codeCheck?: number;
|
codeCheck?: number;
|
||||||
|
handleStatus?: number;
|
||||||
|
searchStr?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ApprovalGoodsCellEntity {
|
export interface ApprovalGoodsCellEntity {
|
||||||
|
|
|
@ -1,35 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="approval-list-container">
|
<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-form @submit="handleSearch">
|
||||||
<van-field name="status" label="审批状态" readonly clickable v-model="statusText" placeholder="请选择状态"
|
<van-search v-model="searchParams.searchStr" 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-form>
|
</van-form>
|
||||||
|
|
||||||
<van-dialog v-model:show="showVerificationDialog" title="输入核销码" @confirm="handleVerification">
|
<van-dialog v-model:show="showVerificationDialog" title="输入核销码" @confirm="handleVerification">
|
||||||
|
@ -37,7 +15,8 @@
|
||||||
</van-dialog>
|
</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
|
<van-cell v-for="item in list" :key="item.approvalId" :title="`审批单号:${item.approvalId}`" clickable
|
||||||
@click="handleCellClick(item.approvalId)">
|
@click="handleCellClick(item.approvalId)">
|
||||||
<template #label>
|
<template #label>
|
||||||
|
@ -53,11 +32,18 @@
|
||||||
</template>
|
</template>
|
||||||
</van-cell>
|
</van-cell>
|
||||||
</van-list>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<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 { showDialog, showToast } from 'vant'
|
||||||
import { checkApprovalCodeApi, getApprovalAssetListApi } from '@/common/apis/approval'
|
import { checkApprovalCodeApi, getApprovalAssetListApi } from '@/common/apis/approval'
|
||||||
import type { SearchReturnApprovalAssetQuery, ReturnApprovalAssetDTO } from '@/common/apis/approval/type'
|
import type { SearchReturnApprovalAssetQuery, ReturnApprovalAssetDTO } from '@/common/apis/approval/type'
|
||||||
|
@ -69,11 +55,14 @@ const router = useRouter();
|
||||||
const wxStore = useWxStore();
|
const wxStore = useWxStore();
|
||||||
|
|
||||||
// 搜索参数
|
// 搜索参数
|
||||||
|
const activeTab = ref(0);
|
||||||
const searchParams = reactive<SearchReturnApprovalAssetQuery>({
|
const searchParams = reactive<SearchReturnApprovalAssetQuery>({
|
||||||
corpid: wxStore.corpid,
|
corpid: wxStore.corpid,
|
||||||
|
handleStatus: activeTab.value,
|
||||||
approvalType: 1,
|
approvalType: 1,
|
||||||
code: '',
|
code: '',
|
||||||
codeCheck: 1,
|
codeCheck: 1,
|
||||||
|
searchStr: '',
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
})
|
})
|
||||||
|
@ -169,6 +158,12 @@ const onDateConfirm = (values: Date[]) => {
|
||||||
showDatePicker.value = false
|
showDatePicker.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 标签页切换处理
|
||||||
|
const handleTabChange = (tabIndex: number) => {
|
||||||
|
searchParams.handleStatus = tabIndex;
|
||||||
|
handleSearch();
|
||||||
|
};
|
||||||
|
|
||||||
// 搜索处理
|
// 搜索处理
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
list.value = []
|
list.value = []
|
||||||
|
@ -176,6 +171,10 @@ const handleSearch = () => {
|
||||||
onLoad()
|
onLoad()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const debouncedHandleSearch = debounce(() => {
|
||||||
|
handleSearch();
|
||||||
|
}, 500);
|
||||||
|
|
||||||
// 重置表单
|
// 重置表单
|
||||||
const handleReset = () => {
|
const handleReset = () => {
|
||||||
Object.assign(searchParams, {
|
Object.assign(searchParams, {
|
||||||
|
@ -198,7 +197,10 @@ const onLoad = async () => {
|
||||||
try {
|
try {
|
||||||
searchParams.corpid = wxStore.corpid;
|
searchParams.corpid = wxStore.corpid;
|
||||||
const { data } = await getApprovalAssetListApi(searchParams)
|
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
|
loading.value = false
|
||||||
|
|
||||||
if (list.value.length >= data.total) {
|
if (list.value.length >= data.total) {
|
||||||
|
@ -211,6 +213,15 @@ const onLoad = async () => {
|
||||||
finished.value = true
|
finished.value = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 监听搜索字符串变化触发搜索
|
||||||
|
watch(() => searchParams.searchStr, (newVal) => {
|
||||||
|
debouncedHandleSearch();
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
debouncedHandleSearch.cancel();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@ -218,6 +229,10 @@ const onLoad = async () => {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.approval-list {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.van-cell__title {
|
.van-cell__title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
@ -238,4 +253,18 @@ const onLoad = async () => {
|
||||||
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
|
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
|
||||||
padding: 16px;
|
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>
|
</style>
|
|
@ -35,8 +35,10 @@ declare module 'vue' {
|
||||||
VanSidebar: typeof import('vant/es')['Sidebar']
|
VanSidebar: typeof import('vant/es')['Sidebar']
|
||||||
VanSidebarItem: typeof import('vant/es')['SidebarItem']
|
VanSidebarItem: typeof import('vant/es')['SidebarItem']
|
||||||
VanStepper: typeof import('vant/es')['Stepper']
|
VanStepper: typeof import('vant/es')['Stepper']
|
||||||
|
VanTab: typeof import('vant/es')['Tab']
|
||||||
VanTabbar: typeof import('vant/es')['Tabbar']
|
VanTabbar: typeof import('vant/es')['Tabbar']
|
||||||
VanTabbarItem: typeof import('vant/es')['TabbarItem']
|
VanTabbarItem: typeof import('vant/es')['TabbarItem']
|
||||||
|
VanTabs: typeof import('vant/es')['Tabs']
|
||||||
VanTag: typeof import('vant/es')['Tag']
|
VanTag: typeof import('vant/es')['Tag']
|
||||||
VanUploader: typeof import('vant/es')['Uploader']
|
VanUploader: typeof import('vant/es')['Uploader']
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue