feat(approval): 新增资产审批列表页面并优化原有审批逻辑
- 添加新的资产审批列表页面(src/pages/approvalAsset/list.vue) - 在原有审批列表中添加approvalType参数区分审批类型 - 统一审批详情页路由跳转逻辑 - 将原有样式改为scss语法
This commit is contained in:
parent
032384cbe8
commit
3130c26298
|
@ -67,6 +67,7 @@ const wxStore = useWxStore();
|
||||||
// 搜索参数
|
// 搜索参数
|
||||||
const searchParams = reactive<SearchApiReturnApprovalQuery>({
|
const searchParams = reactive<SearchApiReturnApprovalQuery>({
|
||||||
corpid: wxStore.corpid,
|
corpid: wxStore.corpid,
|
||||||
|
approvalType: 0,
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
})
|
})
|
||||||
|
@ -103,11 +104,7 @@ const handleCellClick = (approvalId: number) => {
|
||||||
if (currentItem) {
|
if (currentItem) {
|
||||||
approvalStore.setCurrentApproval(currentItem);
|
approvalStore.setCurrentApproval(currentItem);
|
||||||
}
|
}
|
||||||
if (currentItem?.approvalType == 1) {
|
|
||||||
router.push(`/approval/handleApply/${approvalId}`);
|
|
||||||
} else {
|
|
||||||
router.push(`/approval/handle/${approvalId}`);
|
router.push(`/approval/handle/${approvalId}`);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 状态标签类型
|
// 状态标签类型
|
||||||
|
@ -182,7 +179,7 @@ const onLoad = async () => {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss" scoped>
|
||||||
.approval-list-container {
|
.approval-list-container {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,197 @@
|
||||||
|
<template>
|
||||||
|
<div class="approval-list-container">
|
||||||
|
<!-- 搜索表单 -->
|
||||||
|
<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-form>
|
||||||
|
|
||||||
|
<!-- 审批列表 -->
|
||||||
|
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
|
||||||
|
<van-cell v-for="item in list" :key="item.approvalId" :title="`审批单号:${item.approvalId}`" clickable
|
||||||
|
@click="handleCellClick(item.approvalId)">
|
||||||
|
<template #label>
|
||||||
|
<div>商品名称:{{ item.goodsName }}</div>
|
||||||
|
<div>申请时间:{{ item.createTime }}</div>
|
||||||
|
<van-tag :type="statusTagType(item.status)">
|
||||||
|
{{ statusMap[item.status] }}
|
||||||
|
</van-tag>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
</van-list>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
import { getApprovalListApi } from '@/common/apis/approval'
|
||||||
|
import type { SearchApiReturnApprovalQuery, ReturnApprovalEntity } from '@/common/apis/approval/type'
|
||||||
|
import type { PickerConfirmEventParams } from 'vant/es';
|
||||||
|
import { useApprovalStore } from '@/pinia/stores/approval';
|
||||||
|
import { useWxStore } from '@/pinia/stores/wx';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const wxStore = useWxStore();
|
||||||
|
|
||||||
|
// 搜索参数
|
||||||
|
const searchParams = reactive<SearchApiReturnApprovalQuery>({
|
||||||
|
corpid: wxStore.corpid,
|
||||||
|
approvalType: 1,
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 状态选择相关
|
||||||
|
const showStatusPicker = ref(false)
|
||||||
|
const statusOptions = [
|
||||||
|
{ text: '全部', value: undefined },
|
||||||
|
{ text: '待审核', value: 1 },
|
||||||
|
{ text: '已通过', value: 2 },
|
||||||
|
{ text: '已驳回', value: 3 },
|
||||||
|
]
|
||||||
|
|
||||||
|
const statusMap: { [key: number]: string } = {
|
||||||
|
1: '待审核',
|
||||||
|
2: '已通过',
|
||||||
|
3: '已驳回'
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusText = ref('')
|
||||||
|
|
||||||
|
// 时间选择相关
|
||||||
|
const showDatePicker = ref(false)
|
||||||
|
const dateRangeText = ref('')
|
||||||
|
|
||||||
|
// 列表相关
|
||||||
|
const list = ref<ReturnApprovalEntity[]>([])
|
||||||
|
const loading = ref(false)
|
||||||
|
const finished = ref(false)
|
||||||
|
|
||||||
|
const handleCellClick = (approvalId: number) => {
|
||||||
|
const approvalStore = useApprovalStore()
|
||||||
|
const currentItem = list.value.find(item => item.approvalId === approvalId)
|
||||||
|
if (currentItem) {
|
||||||
|
approvalStore.setCurrentApproval(currentItem);
|
||||||
|
}
|
||||||
|
router.push(`/approval/handleApply/${approvalId}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 状态标签类型
|
||||||
|
const statusTagType = (status: number) => {
|
||||||
|
switch (status) {
|
||||||
|
case 1: return 'warning'
|
||||||
|
case 2: return 'success'
|
||||||
|
case 3: return 'danger'
|
||||||
|
default: return 'default'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理状态选择
|
||||||
|
const onStatusConfirm = (e: PickerConfirmEventParams) => {
|
||||||
|
const { selectedOptions } = e;
|
||||||
|
searchParams.status = selectedOptions[0]?.value ? Number(selectedOptions[0]?.value) : undefined;
|
||||||
|
showStatusPicker.value = false;
|
||||||
|
// 确保赋值给 statusText 的是字符串类型
|
||||||
|
statusText.value = String(selectedOptions[0]?.text || '');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理时间选择
|
||||||
|
const onDateConfirm = (values: Date[]) => {
|
||||||
|
const [start, end] = values
|
||||||
|
searchParams.startTime = start.toISOString().split('T')[0]
|
||||||
|
searchParams.endTime = end.toISOString().split('T')[0]
|
||||||
|
dateRangeText.value = `${searchParams.startTime} 至 ${searchParams.endTime}`
|
||||||
|
showDatePicker.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索处理
|
||||||
|
const handleSearch = () => {
|
||||||
|
list.value = []
|
||||||
|
searchParams.pageNum = 1
|
||||||
|
onLoad()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置表单
|
||||||
|
const handleReset = () => {
|
||||||
|
Object.assign(searchParams, {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
approvalId: undefined,
|
||||||
|
orderId: undefined,
|
||||||
|
goodsId: undefined,
|
||||||
|
status: undefined,
|
||||||
|
startTime: undefined,
|
||||||
|
endTime: undefined
|
||||||
|
})
|
||||||
|
statusText.value = ''
|
||||||
|
dateRangeText.value = ''
|
||||||
|
handleSearch()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载数据
|
||||||
|
const onLoad = async () => {
|
||||||
|
try {
|
||||||
|
searchParams.corpid = wxStore.corpid;
|
||||||
|
const { data } = await getApprovalListApi(searchParams)
|
||||||
|
list.value.push(...data.rows)
|
||||||
|
loading.value = false
|
||||||
|
|
||||||
|
if (list.value.length >= data.total) {
|
||||||
|
finished.value = true
|
||||||
|
} else {
|
||||||
|
searchParams.pageNum++
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取审批列表失败', error)
|
||||||
|
finished.value = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.approval-list-container {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-cell__title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-cell__label {
|
||||||
|
margin-top: 8px;
|
||||||
|
color: #666;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue