chore: 详情modal(未完成)

apps/web-antd/src/api/workflow/instance/index.ts

@@ -5,6 +5,17 @@ import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
 
 import { requestClient } from '#/api/request';
 
+/**
+ * TODO: 这接口后端还没有
+ * @param businessId
+ * @returns
+ */
+export function getTaskByBusinessId(businessId: string) {
+  return requestClient.get<TaskInfo>(
+    `/workflow/instance/infoByBusinessId/${businessId}`,
+  );
+}
+
 /**
  * 分页查询正在运行的流程实例
  * @param params

apps/web-antd/src/views/workflow/components/flow-info-modal.vue

@@ -0,0 +1,37 @@
+<!-- 弹窗查看流程信息 -->
+<script setup lang="ts">
+import type { TaskInfo } from '#/api/workflow/task/model';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { getTaskByBusinessId } from '#/api/workflow/instance';
+
+import { ApprovalPanel } from '.';
+
+interface ModalProps {
+  businessId: string;
+}
+
+const taskInfo = ref<TaskInfo>();
+
+const [BasicModal, modalApi] = useVbenModal({
+  title: '流程信息',
+  class: 'w-[1000px]',
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    const { businessId } = modalApi.getData() as ModalProps;
+    const taskResp = await getTaskByBusinessId(businessId);
+    taskInfo.value = taskResp;
+  },
+});
+</script>
+
+<template>
+  <BasicModal>
+    <ApprovalPanel :task="taskInfo" type="readonly" />
+  </BasicModal>
+</template>

apps/web-antd/src/views/workflow/components/index.ts

@@ -10,6 +10,11 @@ export { default as ApprovalPanel } from './approval-panel.vue';
  */
 export { default as approvalRejectionModal } from './approval-rejection-modal.vue';
 export { default as ApprovalTimeline } from './approval-timeline.vue';
+/**
+ * 详情信息 modal
+ */
+export { default as flowInfoModal } from './flow-info-modal.vue';
+
 /**
  * 选人 支持单选/多选
  */

apps/web-antd/src/views/workflow/leave/data.tsx

@@ -89,7 +89,7 @@ export const columns: VxeGridProps['columns'] = [
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    width: 210,
   },
 ];
 

apps/web-antd/src/views/workflow/leave/index.vue

@@ -16,6 +16,7 @@ import {
 import { cancelProcessApply } from '#/api/workflow/instance';
 import { commonDownloadExcel } from '#/utils/file/download';
 
+import { flowInfoModal } from '../components';
 import userSelectModal from '../components/user-select-modal.vue';
 import { leaveExport, leaveList, leaveRemove } from './api';
 import { columns, querySchema } from './data';
@@ -113,6 +114,14 @@ function handleDownloadExcel() {
     },
   );
 }
+const [FlowInfoModal, flowInfoModalApi] = useVbenModal({
+  connectedComponent: flowInfoModal,
+});
+function handleInfo(row: Required<LeaveForm>) {
+  flowInfoModalApi.setData({ businessId: row.id });
+  flowInfoModalApi.open();
+}
+
 const [UserSelectModal, testApi] = useVbenModal({
   connectedComponent: userSelectModal,
 });
@@ -190,9 +199,11 @@ function handleTest() {
               撤销
             </ghost-button>
           </Popconfirm>
+          <ghost-button @click="handleInfo(row)"> 详情 </ghost-button>
         </Space>
       </template>
     </BasicTable>
     <UserSelectModal mode="single" />
+    <FlowInfoModal />
   </Page>
 </template>