yxk-20260610-审批历史页面
审批历史页面改为一次加载完整审批历史并全部展示；表格上方增加节点名称平铺 checkbox，默认全选。用户勾选或取消勾选节点时，仅在前端过滤表格数据，不调用接口。
This commit is contained in:
ye1023
+152
-20
@@ -1,5 +1,17 @@
|
||||
<template>
|
||||
<div class="approval-history-pane">
|
||||
<div v-if="taskNameOptions.length > 0" class="approval-history-filter">
|
||||
<span class="approval-history-filter__label">节点名称：</span>
|
||||
<a-checkbox-group v-model:value="selectedTaskNames" class="approval-history-filter__checkboxes" @change="handleTaskNameChange">
|
||||
<a-checkbox v-for="taskName in taskNameOptions" :key="taskName" :value="taskName">
|
||||
{{ taskName }}
|
||||
</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
<div class="approval-history-filter__actions">
|
||||
<a-button type="link" size="small" :disabled="selectedTaskNames.length === taskNameOptions.length" @click="selectAllTaskNames">全选</a-button>
|
||||
<a-button type="link" size="small" :disabled="selectedTaskNames.length === 0" @click="clearTaskNames">清空</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<BasicTable @register="registerTable" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -11,11 +23,16 @@
|
||||
*/
|
||||
import { BasicTable, useTable } from '/@/components/Table';
|
||||
import type { BasicColumn } from '/@/components/Table';
|
||||
import { onMounted, watch } from 'vue';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { list as queryApprovalOpinionList } from '/@/views/taskApprovalOpinion/TaskApprovalOpinion.api';
|
||||
|
||||
interface ApprovalHistoryRecord {
|
||||
[key: string]: any;
|
||||
taskName?: string;
|
||||
}
|
||||
|
||||
const approvalHistoryColumns: BasicColumn[] = [
|
||||
{ title: '节点名称', dataIndex: 'taskName', width: 160, align: 'left' },
|
||||
{ title: '节点名称', dataIndex: 'taskName', width: 160, align: 'center' },
|
||||
{ title: '开始时间', dataIndex: 'startTime', width: 170, align: 'center' },
|
||||
{ title: '办理时间', dataIndex: 'opTime', width: 170, align: 'center' },
|
||||
{
|
||||
@@ -43,7 +60,11 @@
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const [registerTable, { reload }] = useTable({
|
||||
const allApprovalHistoryList = ref<ApprovalHistoryRecord[]>([]);
|
||||
const taskNameOptions = ref<string[]>([]);
|
||||
const selectedTaskNames = ref<string[]>([]);
|
||||
|
||||
const [registerTable, { reload, setTableData }] = useTable({
|
||||
title: '',
|
||||
api: getApprovalHistoryList,
|
||||
columns: approvalHistoryColumns,
|
||||
@@ -55,35 +76,107 @@
|
||||
useSearchForm: false,
|
||||
canResize: false,
|
||||
immediate: false,
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
},
|
||||
pagination: false,
|
||||
scroll: { x: 1290 },
|
||||
});
|
||||
|
||||
// 按流程实例查询审批历史，只查 task_approval_opinion 表
|
||||
function getApprovalHistoryList(params) {
|
||||
const processInstId =
|
||||
props.formData?.procInsId ||
|
||||
props.formData?.procInstId ||
|
||||
props.formData?.processInstanceId;
|
||||
if (!processInstId) {
|
||||
return Promise.resolve({ records: [], total: 0 });
|
||||
function getProcessInstId(): string {
|
||||
return props.formData?.procInsId || props.formData?.procInstId || props.formData?.processInstanceId;
|
||||
}
|
||||
return queryApprovalOpinionList({
|
||||
...params,
|
||||
|
||||
function normalizeTaskName(taskName: unknown): string {
|
||||
return typeof taskName === 'string' ? taskName.trim() : '';
|
||||
}
|
||||
|
||||
function resolveRecords(res: any): ApprovalHistoryRecord[] {
|
||||
if (Array.isArray(res)) {
|
||||
return res;
|
||||
}
|
||||
return res?.records || res?.result?.records || [];
|
||||
}
|
||||
|
||||
function resolveTotal(res: any, fallbackTotal: number): number {
|
||||
return Number(res?.total || res?.result?.total || fallbackTotal || 0);
|
||||
}
|
||||
|
||||
function getFilteredApprovalHistoryList(): ApprovalHistoryRecord[] {
|
||||
if (selectedTaskNames.value.length === 0) {
|
||||
return [];
|
||||
}
|
||||
const selectedNameSet = new Set(selectedTaskNames.value);
|
||||
return allApprovalHistoryList.value.filter((record) => {
|
||||
const taskName = normalizeTaskName(record.taskName);
|
||||
return taskName && selectedNameSet.has(taskName);
|
||||
});
|
||||
}
|
||||
|
||||
function resetTaskNameFilter(records: ApprovalHistoryRecord[]) {
|
||||
const taskNames = records.map((record) => normalizeTaskName(record.taskName)).filter(Boolean);
|
||||
taskNameOptions.value = Array.from(new Set(taskNames));
|
||||
selectedTaskNames.value = [...taskNameOptions.value];
|
||||
}
|
||||
|
||||
function applyTaskNameFilter() {
|
||||
setTableData(getFilteredApprovalHistoryList());
|
||||
}
|
||||
|
||||
function handleTaskNameChange(checkedValues: string[]) {
|
||||
selectedTaskNames.value = checkedValues;
|
||||
applyTaskNameFilter();
|
||||
}
|
||||
|
||||
function selectAllTaskNames() {
|
||||
selectedTaskNames.value = [...taskNameOptions.value];
|
||||
applyTaskNameFilter();
|
||||
}
|
||||
|
||||
function clearTaskNames() {
|
||||
selectedTaskNames.value = [];
|
||||
applyTaskNameFilter();
|
||||
}
|
||||
|
||||
// 按流程实例查询审批历史，只查 task_approval_opinion 表
|
||||
async function getApprovalHistoryList() {
|
||||
const processInstId = getProcessInstId();
|
||||
if (!processInstId) {
|
||||
allApprovalHistoryList.value = [];
|
||||
resetTaskNameFilter([]);
|
||||
return { records: [], total: 0 };
|
||||
}
|
||||
|
||||
const queryParams = {
|
||||
processInstId,
|
||||
column: 'startTime',
|
||||
order: 'asc',
|
||||
};
|
||||
|
||||
// 接口默认为分页返回，先取首批数据和总数；若未拿全，再按总数补齐完整审批历史。
|
||||
const firstRes = await queryApprovalOpinionList({
|
||||
...queryParams,
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const firstRecords = resolveRecords(firstRes);
|
||||
const total = resolveTotal(firstRes, firstRecords.length);
|
||||
let records = firstRecords;
|
||||
if (total > firstRecords.length) {
|
||||
const fullRes = await queryApprovalOpinionList({
|
||||
...queryParams,
|
||||
pageNo: 1,
|
||||
pageSize: total,
|
||||
});
|
||||
records = resolveRecords(fullRes);
|
||||
}
|
||||
|
||||
allApprovalHistoryList.value = records;
|
||||
resetTaskNameFilter(records);
|
||||
const filteredRecords = getFilteredApprovalHistoryList();
|
||||
return { records: filteredRecords, total: filteredRecords.length };
|
||||
}
|
||||
|
||||
// 组件挂载时自动加载（解决 tab 懒加载场景下父组件 reload 调用时子组件未挂载的问题）
|
||||
onMounted(() => {
|
||||
const processInstId =
|
||||
props.formData?.procInsId ||
|
||||
props.formData?.procInstId ||
|
||||
props.formData?.processInstanceId;
|
||||
const processInstId = getProcessInstId();
|
||||
if (processInstId) {
|
||||
reload();
|
||||
}
|
||||
@@ -102,6 +195,11 @@
|
||||
return {
|
||||
registerTable,
|
||||
reload,
|
||||
taskNameOptions,
|
||||
selectedTaskNames,
|
||||
handleTaskNameChange,
|
||||
selectAllTaskNames,
|
||||
clearTaskNames,
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -112,4 +210,38 @@
|
||||
height: 100%;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.approval-history-filter {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.approval-history-filter__label {
|
||||
flex: 0 0 auto;
|
||||
line-height: 32px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.approval-history-filter__checkboxes {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 12px;
|
||||
min-width: 0;
|
||||
padding-top: 5px;
|
||||
|
||||
:deep(.ant-checkbox-wrapper) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.approval-history-filter__actions {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
line-height: 32px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user