feat: 【BPM 工作流】更新审批流程操作按钮组件

apps/web-antd/src/api/bpm/processInstance/index.ts

@@ -152,7 +152,7 @@ export async function getApprovalDetail(params: any) {
 
 /** 获取下一个执行的流程节点 */
 export async function getNextApprovalNodes(params: any) {
-  return requestClient.get<BpmProcessInstanceApi.ProcessInstanceVO>(
+  return requestClient.get<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
     `/bpm/process-instance/get-next-approval-nodes`,
     { params },
   );

apps/web-antd/src/views/bpm/processInstance/detail/index.vue

@@ -7,16 +7,7 @@ import { nextTick, onMounted, ref, watch } from 'vue';
 import { Page } from '@vben/common-ui';
 import { formatDateTime } from '@vben/utils';
 
-import {
-  Avatar,
-  Button,
-  Card,
-  Col,
-  message,
-  Row,
-  TabPane,
-  Tabs,
-} from 'ant-design-vue';
+import { Avatar, Card, Col, message, Row, TabPane, Tabs } from 'ant-design-vue';
 
 import {
   getApprovalDetail as getApprovalDetailApi,
@@ -40,6 +31,7 @@ import {
 } from '#/views/bpm/processInstance/detail/modules/icons';
 
 import ProcessInstanceBpmnViewer from './modules/bpm-viewer.vue';
+import ProcessInstanceOperationButton from './modules/operation-button.vue';
 import ProcessInstanceSimpleViewer from './modules/simple-bpm-viewer.vue';
 import BpmProcessInstanceTaskList from './modules/task-list.vue';
 import ProcessInstanceTimeline from './modules/time-line.vue';
@@ -74,7 +66,8 @@ const processInstanceLoading = ref(false); // 流程实例的加载中
 const processInstance = ref<BpmProcessInstanceApi.ProcessInstanceVO>(); // 流程实例
 const processDefinition = ref<any>({}); // 流程定义
 const processModelView = ref<any>({}); // 流程模型视图
-// const operationButtonRef = ref(); // 操作按钮组件 ref
+const operationButtonRef = ref(); // 操作按钮组件 ref
+
 const auditIconsMap: {
   [key: string]:
     | typeof SvgBpmApproveIcon
@@ -253,9 +246,8 @@ onMounted(async () => {
     <Card
       class="h-full"
       :body-style="{
-        height: 'calc(100% - 140px)',
+        height: 'calc(100% - 128px)',
         overflowY: 'auto',
-        paddingTop: '12px',
       }"
     >
       <template #title>
@@ -311,11 +303,11 @@ onMounted(async () => {
         <div class="process-tabs-container flex flex-1 flex-col">
           <Tabs v-model:active-key="activeTab" class="mt-0 h-full">
             <TabPane tab="审批详情" key="form" class="tab-pane-content">
-              <Row :gutter="[48, 24]" class="h-full">
+              <Row :gutter="[48, 12]" class="h-full">
                 <Col
                   :xs="24"
                   :sm="24"
-                  :md="18"
+                  :md="16"
                   :lg="18"
                   :xl="16"
                   class="h-full"
@@ -344,8 +336,8 @@ onMounted(async () => {
                     <BusinessFormComponent :id="processInstance?.businessKey" />
                   </div>
                 </Col>
-                <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8" class="h-full">
-                  <div class="mt-4 h-full">
+                <Col :xs="24" :sm="24" :md="8" :lg="6" :xl="8" class="h-full">
+                  <div class="h-full pt-4">
                     <ProcessInstanceTimeline :activity-nodes="activityNodes" />
                   </div>
                 </Col>
@@ -397,9 +389,17 @@ onMounted(async () => {
       </div>
 
       <template #actions>
-        <div class="flex justify-start gap-x-2 p-4">
-          <Button type="primary">驳回</Button>
-          <Button type="primary">同意</Button>
+        <div class="flex px-4">
+          <ProcessInstanceOperationButton
+            ref="operationButtonRef"
+            :process-instance="processInstance"
+            :process-definition="processDefinition"
+            :user-options="userOptions"
+            :normal-form="detailForm"
+            :normal-form-api="fApi"
+            :writable-fields="writableFields"
+            @success="getDetail"
+          />
         </div>
       </template>
     </Card>
@@ -434,6 +434,6 @@ onMounted(async () => {
 
 .tab-pane-content {
   height: calc(100vh - 440px);
-  overflow-y: auto;
+  overflow: hidden auto;
 }
 </style>