yxk-20260525-通用的审批历史表:

1、按开始时间倒序排序
2、去掉原有的审批意见列表,仅展示流程图
This commit is contained in:
ye1023
2026-05-25 10:46:14 +08:00
parent 0594eca678
commit 00553691d4
3 changed files with 62 additions and 59 deletions
@@ -15,8 +15,9 @@
import { list as queryApprovalOpinionList } from '/@/views/taskApprovalOpinion/TaskApprovalOpinion.api'; import { list as queryApprovalOpinionList } from '/@/views/taskApprovalOpinion/TaskApprovalOpinion.api';
const approvalHistoryColumns: BasicColumn[] = [ const approvalHistoryColumns: BasicColumn[] = [
{ title: '办理时间', dataIndex: 'opTime', width: 170, align: 'center' },
{ title: '节点名称', dataIndex: 'taskName', width: 160, align: 'center' }, { title: '节点名称', dataIndex: 'taskName', width: 160, align: 'center' },
{ title: '开始时间', dataIndex: 'startTime', width: 170, align: 'center' },
{ title: '办理时间', dataIndex: 'opTime', width: 170, align: 'center' },
{ {
title: '办理人', title: '办理人',
dataIndex: 'opUserName', dataIndex: 'opUserName',
@@ -25,7 +26,7 @@
customRender: ({ record }) => record.opUserName || record.opUserId || '-', customRender: ({ record }) => record.opUserName || record.opUserId || '-',
}, },
{ title: '操作类型', dataIndex: 'actionType', width: 120, align: 'center' }, { title: '操作类型', dataIndex: 'actionType', width: 120, align: 'center' },
{ title: '操作结果', dataIndex: 'actionResult', width: 180, align: 'center' }, // { title: '操作结果', dataIndex: 'actionResult', width: 180, align: 'center' },
{ title: '审批意见', dataIndex: 'opinion', align: 'left' }, { title: '审批意见', dataIndex: 'opinion', align: 'left' },
]; ];
@@ -56,7 +57,7 @@
pagination: { pagination: {
pageSize: 10, pageSize: 10,
}, },
scroll: { x: 980 }, scroll: { x: 1150 },
}); });
// 按流程实例查询审批历史,只查 task_approval_opinion 表 // 按流程实例查询审批历史,只查 task_approval_opinion 表
@@ -71,8 +72,8 @@
return queryApprovalOpinionList({ return queryApprovalOpinionList({
...params, ...params,
processInstId, processInstId,
column: 'opTime', column: 'startTime',
order: 'desc', order: 'asc',
}); });
} }
@@ -1,15 +1,13 @@
<template> <template>
<div> <div class="trace-graphic-wrapper">
<div style="margin-bottom: 20px; height: 400px; overflow: hidden; overflow-y: auto; overflow-x: auto">
<bpm-graphic :instanceId="formData.procInsId" @task="getTaskList"></bpm-graphic> <bpm-graphic :instanceId="formData.procInsId" @task="getTaskList"></bpm-graphic>
</div> <!-- <a-card title="流程历史跟踪">
<a-card title="流程历史跟踪">
<BasicTable @register="registerTable"> <BasicTable @register="registerTable">
<template #remarks="{ record }"> <template #remarks="{ record }">
<j-ellipsis :value="getNodeInfo(record)" :length="25" /> <j-ellipsis :value="getNodeInfo(record)" :length="25" />
</template> </template>
</BasicTable> </BasicTable>
</a-card> </a-card> -->
</div> </div>
</template> </template>
@@ -18,19 +16,19 @@
* 历史任务跟踪-查看历史节点-流程图 * 历史任务跟踪-查看历史节点-流程图
*/ */
import BpmGraphic from '/@/views/super/bpm/process/components/BpmGraphic.vue'; import BpmGraphic from '/@/views/super/bpm/process/components/BpmGraphic.vue';
import { BasicTable } from '/@/components/Table'; // import { BasicTable } from '/@/components/Table';
import { taskTraceColumns } from '../task.handle.data'; // import { taskTraceColumns } from '../task.handle.data';
import { taskTraceList } from '../task.handle.api'; // import { taskTraceList } from '../task.handle.api';
import { useListPage } from '/@/hooks/system/useListPage'; // import { useListPage } from '/@/hooks/system/useListPage';
import JEllipsis from '/@/components/Form/src/jeecg/components/JEllipsis.vue'; // import JEllipsis from '/@/components/Form/src/jeecg/components/JEllipsis.vue';
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
name: 'TaskTraceContent', name: 'TaskTraceContent',
components: { components: {
BpmGraphic, BpmGraphic,
BasicTable, // BasicTable,
JEllipsis, // JEllipsis,
}, },
props: { props: {
formData: { formData: {
@@ -39,55 +37,58 @@
}, },
}, },
setup(props) { setup(props) {
console.log('进入TaskTraceContent>>'); // const { tableContext } = useListPage({
const { tableContext } = useListPage({ // designScope: 'task-trace-content',
designScope: 'task-trace-content', // pagination: true,
pagination: true, // tableProps: {
tableProps: { // title: '',
title: '', // api: taskTraceList,
api: taskTraceList, // columns: taskTraceColumns,
columns: taskTraceColumns, // showIndexColumn: true,
showIndexColumn: true, // showTableSetting: false,
showTableSetting: false, // canResize: false,
canResize: false, // showActionColumn: false,
showActionColumn: false, // useSearchForm: false,
useSearchForm: false, // beforeFetch: (params) => {
beforeFetch: (params) => { // return addQueryParams(params);
return addQueryParams(params); // },
}, // },
}, // });
}); // const [registerTable] = tableContext;
const [registerTable] = tableContext; //
// function addQueryParams(params) {
function addQueryParams(params) { // params.processInstanceId = props.formData.procInsId;
params.processInstanceId = props.formData.procInsId; // return params;
return params; // }
}
const taskList = ref([]); const taskList = ref([]);
function getTaskList(arr) { function getTaskList(arr) {
console.log('aaa', arr);
taskList.value = arr; taskList.value = arr;
} }
function getNodeInfo(record) { // function getNodeInfo(record) {
let arr = taskList.value; // let arr = taskList.value;
if (arr && arr.length > 0) { // if (arr && arr.length > 0) {
for (let item of arr) { // for (let item of arr) {
if (item.id == record.id) { // if (item.id == record.id) {
return item.remarks; // return item.remarks;
} // }
} // }
} // }
return ''; // return '';
} // }
return { return {
registerTable, // registerTable,
getTaskList, getTaskList,
getNodeInfo, // getNodeInfo,
}; };
}, },
}; };
</script> </script>
<style scoped></style> <style lang="less" scoped>
.trace-graphic-wrapper {
height: 100%;
overflow: auto;
}
</style>
@@ -25,7 +25,7 @@
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="2"> <a-tab-pane key="2">
<template #tab><span>审批历史</span> </template> <template #tab><history-outlined /><span>审批历史</span> </template>
<TaskApprovalHistoryContent ref="approvalHistoryRef" :form-data="taskFormData" /> <TaskApprovalHistoryContent ref="approvalHistoryRef" :form-data="taskFormData" />
</a-tab-pane> </a-tab-pane>
<!-- <a-tab-pane v-if="!isEmbeddedHandleForm" key="2">--> <!-- <a-tab-pane v-if="!isEmbeddedHandleForm" key="2">-->
@@ -47,7 +47,7 @@
*/ */
import { BasicModal, useModalInner } from '/@/components/Modal'; import { BasicModal, useModalInner } from '/@/components/Modal';
import { ref , nextTick , computed, watch } from 'vue'; import { ref , nextTick , computed, watch } from 'vue';
import { UserOutlined, PartitionOutlined, FileTextOutlined } from '@ant-design/icons-vue'; import { UserOutlined, PartitionOutlined, FileTextOutlined, HistoryOutlined } from '@ant-design/icons-vue';
import TaskHandleInnerContent from '../content/TaskHandleInnerContent.vue'; import TaskHandleInnerContent from '../content/TaskHandleInnerContent.vue';
import TaskTraceContent from '../content/TaskTraceContent.vue'; import TaskTraceContent from '../content/TaskTraceContent.vue';
import BpmDynamicForm from '/@/views/super/bpm/process/components/BpmDynamicForm.vue'; import BpmDynamicForm from '/@/views/super/bpm/process/components/BpmDynamicForm.vue';
@@ -60,6 +60,7 @@
UserOutlined, UserOutlined,
FileTextOutlined, FileTextOutlined,
PartitionOutlined, PartitionOutlined,
HistoryOutlined,
TaskHandleInnerContent, TaskHandleInnerContent,
TaskTraceContent, TaskTraceContent,
BpmDynamicForm, BpmDynamicForm,