diff --git a/src/views/super/bpm/process/personalOffice/myHandleTask/content/TaskApprovalHistoryContent.vue b/src/views/super/bpm/process/personalOffice/myHandleTask/content/TaskApprovalHistoryContent.vue index 7bb1eea..be0e69e 100644 --- a/src/views/super/bpm/process/personalOffice/myHandleTask/content/TaskApprovalHistoryContent.vue +++ b/src/views/super/bpm/process/personalOffice/myHandleTask/content/TaskApprovalHistoryContent.vue @@ -1,5 +1,17 @@ @@ -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([]); + const taskNameOptions = ref([]); + const selectedTaskNames = ref([]); + + 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; + } + + function normalizeTaskName(taskName: unknown): string { + return typeof taskName === 'string' ? taskName.trim() : ''; + } + + function resolveRecords(res: any): ApprovalHistoryRecord[] { + if (Array.isArray(res)) { + return res; } - return queryApprovalOpinionList({ - ...params, + 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; + }