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

src/views/super/bpm/process/personalOffice/myHandleTask/content/TaskApprovalHistoryContent.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="approval-history-pane">
+    <BasicTable @register="registerTable" />
+  </div>
+</template>
+
+<script lang="ts">
+  /**
+   * 审批历史组件 - 展示流程实例的审批历史记录
+   * 数据来源：task_approval_opinion 表
+   */
+  import { BasicTable, useTable } from '/@/components/Table';
+  import type { BasicColumn } from '/@/components/Table';
+  import { onMounted, watch } from 'vue';
+  import { list as queryApprovalOpinionList } from '/@/views/taskApprovalOpinion/TaskApprovalOpinion.api';
+
+  const approvalHistoryColumns: BasicColumn[] = [
+    { title: '办理时间', dataIndex: 'opTime', width: 170, align: 'center' },
+    { title: '节点名称', dataIndex: 'taskName', width: 160, align: 'center' },
+    {
+      title: '办理人',
+      dataIndex: 'opUserName',
+      width: 120,
+      align: 'center',
+      customRender: ({ record }) => record.opUserName || record.opUserId || '-',
+    },
+    { title: '操作类型', dataIndex: 'actionType', width: 120, align: 'center' },
+    { title: '操作结果', dataIndex: 'actionResult', width: 180, align: 'center' },
+    { title: '审批意见', dataIndex: 'opinion', align: 'left' },
+  ];
+
+  export default {
+    name: 'TaskApprovalHistoryContent',
+    components: {
+      BasicTable,
+    },
+    props: {
+      formData: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
+    setup(props) {
+      const [registerTable, { reload }] = useTable({
+        title: '',
+        api: getApprovalHistoryList,
+        columns: approvalHistoryColumns,
+        rowKey: 'id',
+        bordered: true,
+        striped: true,
+        showIndexColumn: true,
+        showTableSetting: false,
+        useSearchForm: false,
+        canResize: false,
+        immediate: false,
+        pagination: {
+          pageSize: 10,
+        },
+        scroll: { x: 980 },
+      });
+
+      // 按流程实例查询审批历史，只查 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 });
+        }
+        return queryApprovalOpinionList({
+          ...params,
+          processInstId,
+          column: 'opTime',
+          order: 'desc',
+        });
+      }
+
+      // 组件挂载时自动加载（解决 tab 懒加载场景下父组件 reload 调用时子组件未挂载的问题）
+      onMounted(() => {
+        const processInstId =
+          props.formData?.procInsId ||
+          props.formData?.procInstId ||
+          props.formData?.processInstanceId;
+        if (processInstId) {
+          reload();
+        }
+      });
+
+      // 流程实例 ID 变化时自动刷新（如 Modal 重新打开传入新数据）
+      watch(
+        () => props.formData?.procInsId || props.formData?.procInstId || props.formData?.processInstanceId,
+        (newVal, oldVal) => {
+          if (newVal && newVal !== oldVal) {
+            reload();
+          }
+        }
+      );
+
+      return {
+        registerTable,
+        reload,
+      };
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  .approval-history-pane {
+    height: 100%;
+    padding: 4px 0;
+  }
+</style>

src/views/super/bpm/process/personalOffice/myHandleTask/modal/TaskHandleModal.vue

@@ -24,6 +24,10 @@
         />
       </a-tab-pane>
 
+      <a-tab-pane key="2">
+        <template #tab><span>审批历史</span> </template>
+        <TaskApprovalHistoryContent ref="approvalHistoryRef" :form-data="taskFormData" />
+      </a-tab-pane>
 <!--      <a-tab-pane v-if="!isEmbeddedHandleForm" key="2">-->
 <!--        <template #tab> <user-outlined /><span>任务处理</span> </template>-->
 <!--        <task-handle-inner-content @success="handleSuccess" :form-data="taskFormData" :claim="claimStatus" @claimSuccess="claimSuccess"></task-handle-inner-content>-->
@@ -42,11 +46,12 @@
    * 处理页面
    */
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { ref , nextTick , computed } from 'vue';
+  import { ref , nextTick , computed, watch } from 'vue';
   import { UserOutlined, PartitionOutlined, FileTextOutlined } from '@ant-design/icons-vue';
   import TaskHandleInnerContent from '../content/TaskHandleInnerContent.vue';
   import TaskTraceContent from '../content/TaskTraceContent.vue';
   import BpmDynamicForm from '/@/views/super/bpm/process/components/BpmDynamicForm.vue';
+  import TaskApprovalHistoryContent from '../content/TaskApprovalHistoryContent.vue';
 
   export default {
     name: 'TaskHandleModal',
@@ -58,11 +63,12 @@
       TaskHandleInnerContent,
       TaskTraceContent,
       BpmDynamicForm,
+      TaskApprovalHistoryContent,
     },
     emits: ['success', 'register'],
     setup(_p, { emit }) {
       const title = ref('流程办理');
-      const taskFormData = ref({});
+      const taskFormData = ref<Recordable>({});
       const taskFormUrl = ref('');
       //是否需要签收
       const claimStatus = ref(false);
@@ -81,6 +87,7 @@
 
       const activeKey = ref('1');
       const isEmbeddedHandleForm = computed(() => taskFormUrl.value?.includes('BgPartymatterBPMForm'));
+      const approvalHistoryRef = ref();
 
       // desformView 父级滚动条，只有传了此参数才会突破内部弹窗
       const modalRef = ref();
@@ -98,9 +105,18 @@
         claimStatus.value = false;
       }
 
+      watch(activeKey, (key) => {
+        if (key === '2') {
+          nextTick(() => {
+            approvalHistoryRef.value?.reload();
+          });
+        }
+      });
+
       return {
         title,
         registerModal,
+        approvalHistoryRef,
         activeKey,
         taskFormData,
         taskFormUrl,