yxk-20260526-党委会查询督办流程：写一个通用的删除流程方法

src/components/semri/process/BusinessProcessListModal.vue

@@ -8,6 +8,16 @@
       </BasicTable>
     </div>
     <BpmPictureModal @register="registerBpmModal" />
+    <j-modal
+      title="审批历史"
+      :width="approvalHistoryModalWidth"
+      :visible="approvalHistoryVisible"
+      :footer="null"
+      @cancel="handleApprovalHistoryCancel"
+      cancelText="关闭"
+    >
+      <TaskApprovalHistoryContent ref="approvalHistoryRef" :form-data="approvalHistoryFormData" />
+    </j-modal>
   </j-modal>
 </template>
 
@@ -17,14 +27,14 @@
   import JModal from '/@/components/Modal/src/JModal/JModal.vue';
   import { useModal } from '/@/components/Modal';
   import { columns } from './QueryProcessList.data';
-  import { queryByBusinessId } from '/@/api/common/api';
+  import { deleteSingleProcess, queryByBusinessId } from '/@/api/common/api';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import TaskApprovalHistoryContent from '/@/views/super/bpm/process/personalOffice/myHandleTask/content/TaskApprovalHistoryContent.vue';
 
   interface OpenParams {
     businessId?: string;
     title?: string;
     columns?: BasicColumn[];
-    onDeleteProcess?: (record: Recordable, reload: () => Promise<void>) => Promise<void>;
   }
 
   const title = ref('流程列表');
@@ -32,12 +42,15 @@
   const currentBusinessId = ref('');
   const defaultColumns = columns;
   const modalWidth = 'min(1280px, calc(100vw - 64px))';
+  const approvalHistoryModalWidth = 'min(1100px, calc(100vw - 96px))';
   // 按当前列宽合计收敛横向滚动距离，避免少量列被默认宽度撑得过大。
   const tableScrollX = 1680;
   // 固定表体高度，让横向滚动条停留在弹窗底部，而不是跟随少量数据行出现在中间。
   const tableBodyHeight = 500;
   const { createMessage } = useMessage();
-  const onDeleteProcessRef = ref<OpenParams['onDeleteProcess']>();
+  const approvalHistoryVisible = ref(false);
+  const approvalHistoryFormData = ref<Recordable>({});
+  const approvalHistoryRef = ref();
   const [registerBpmModal, { openModal: bpmPicModal }] = useModal();
 
   const [registerTable, { setColumns, setTableData, setLoading, clearSelectedRowKeys }] = useTable({
@@ -51,7 +64,7 @@
     actionColumn: {
       title: '操作',
       dataIndex: 'action',
-      width: 120,
+      width: 240,
       fixed: 'right',
       slots: { customRender: 'action' },
     },
@@ -86,7 +99,6 @@
   async function open(params: OpenParams = {}) {
     currentBusinessId.value = params.businessId || '';
     title.value = params.title || '流程列表';
-    onDeleteProcessRef.value = params.onDeleteProcess;
     visible.value = true;
     await nextTick();
     setColumns(params.columns?.length ? params.columns : defaultColumns);
@@ -96,9 +108,9 @@
   function handleCancel() {
     visible.value = false;
     currentBusinessId.value = '';
-    onDeleteProcessRef.value = undefined;
     setColumns(defaultColumns);
     setTableData([]);
+    handleApprovalHistoryCancel();
     clearSelectedRowKeys();
   }
 
@@ -109,34 +121,66 @@
     });
   }
 
+  async function handlePreviewApprovalHistory(record) {
+    const processInstId = record?.processInstId;
+    if (!processInstId) {
+      createMessage.error('流程实例ID不能为空');
+      return;
+    }
+
+    approvalHistoryFormData.value = {
+      procInstId: processInstId,
+      processInstId,
+    };
+    approvalHistoryVisible.value = true;
+    await nextTick();
+    approvalHistoryRef.value?.reload?.();
+  }
+
+  function handleApprovalHistoryCancel() {
+    approvalHistoryVisible.value = false;
+    approvalHistoryFormData.value = {};
+  }
+
   async function handleDeleteProcess(record) {
-    if (typeof onDeleteProcessRef.value === 'function') {
-      await onDeleteProcessRef.value(record, loadData);
-    } else {
-      createMessage.warning('未配置删除流程回调');
+    const processInstId = record?.processInstId;
+    if (!processInstId) {
+      createMessage.error('流程实例ID不能为空');
+      return;
+    }
+
+    try {
+      const res = await deleteSingleProcess({ processInstId });
+      if (res?.success) {
+        createMessage.success(res.message || '删除流程成功');
+        await loadData();
+      } else {
+        createMessage.error(res?.message || '删除流程失败');
+      }
+    } catch (error) {
+      createMessage.error('删除流程失败');
     }
   }
 
   function getTableAction(record) {
-    const actions: any[] = [
+    return [
       {
-        label: '审批历史',
+        label: '流程图',
         onClick: handlePreviewPic.bind(null, record),
       },
-    ];
-
-    if (typeof onDeleteProcessRef.value === 'function') {
-      actions.push({
+      {
+        label: '审批历史',
+        onClick: handlePreviewApprovalHistory.bind(null, record),
+      },
+      {
         label: '删除流程',
         popConfirm: {
           title: '确定删除该流程吗？',
           confirm: handleDeleteProcess.bind(null, record),
           placement: 'topLeft',
         },
-      });
-    }
-
-    return actions;
+      },
+    ];
   }
 
   defineExpose({