feat: 【BPM 工作流】完善操作按钮、流程签名组件

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { BpmCategoryApi } from '#/api/bpm/category';
 import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
 
 import { computed, nextTick, onMounted, ref } from 'vue';
@@ -33,7 +34,9 @@ const processInstanceId: any = route.query.processInstanceId; // 流程实例编
 const loading = ref(true); // 加载中
 const categoryList: any = ref([]); // 分类的列表
 const activeCategory = ref(''); // 当前选中的分类
-const processDefinitionList = ref([]); // 流程定义的列表
+const processDefinitionList = ref<
+  BpmProcessDefinitionApi.ProcessDefinitionVO[]
+>([]); // 流程定义的列表
 
 // 实现 groupBy 功能
 const groupBy = (array: any[], key: string) => {
@@ -107,8 +110,12 @@ const handleGetProcessDefinitionList = async () => {
   }
 };
 
+/** 用于存储搜索过滤后的流程定义 */
+const filteredProcessDefinitionList = ref<
+  BpmProcessDefinitionApi.ProcessDefinitionVO[]
+>([]);
+
 /** 搜索流程 */
-const filteredProcessDefinitionList = ref([]); // 用于存储搜索过滤后的流程定义
 const handleQuery = () => {
   if (searchName.value.trim()) {
     // 如果有搜索关键字，进行过滤
@@ -150,10 +157,15 @@ const processDefinitionGroup: any = computed(() => {
 
   const grouped = groupBy(filteredProcessDefinitionList.value, 'category');
   // 按照 categoryList 的顺序重新组织数据
-  const orderedGroup = {};
-  categoryList.value.forEach((category: any) => {
+  const orderedGroup: Record<
+    string,
+    BpmProcessDefinitionApi.ProcessDefinitionVO[]
+  > = {};
+  categoryList.value.forEach((category: BpmCategoryApi.CategoryVO) => {
     if (grouped[category.code]) {
-      orderedGroup[category.code] = grouped[category.code];
+      orderedGroup[category.code] = grouped[
+        category.code
+      ] as BpmProcessDefinitionApi.ProcessDefinitionVO[];
     }
   });
   return orderedGroup;
@@ -191,7 +203,7 @@ const availableCategories = computed(() => {
   const availableCategoryCodes = Object.keys(processDefinitionGroup.value);
 
   // 过滤出有流程的分类
-  return categoryList.value.filter((category: CategoryVO) =>
+  return categoryList.value.filter((category: BpmCategoryApi.CategoryVO) =>
     availableCategoryCodes.includes(category.code),
   );
 });
@@ -229,11 +241,7 @@ onMounted(() => {
               allow-clear
               @input="handleQuery"
               @clear="handleQuery"
-            >
-              <template #prefix>
-                <IconifyIcon icon="mdi:search-web" />
-              </template>
-            </InputSearch>
+            />
           </div>
         </template>
 
@@ -289,15 +297,6 @@ onMounted(() => {
                         </Tooltip>
                       </span>
                     </div>
-
-                    <!-- TODO: 发起流程按钮 -->
-                    <!-- <template #actions>
-                      <div class="flex justify-end px-4">
-                        <Button type="link" @click="handleSelect(definition)">
-                          发起流程
-                        </Button>
-                      </div>
-                    </template> -->
                   </Card>
                 </Col>
               </Row>

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

@@ -7,16 +7,7 @@ import { nextTick, onMounted, ref, shallowRef, 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,
@@ -39,6 +30,9 @@ import {
   SvgBpmRunningIcon,
 } 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';
 
@@ -72,7 +66,7 @@ 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
@@ -162,6 +156,7 @@ async function getApprovalDetail() {
       });
     } else {
       // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
+
       BusinessFormComponent.value = registerComponent(
         data?.processDefinition?.formCustomViewPath || '',
       );
@@ -169,6 +164,9 @@ async function getApprovalDetail() {
 
     // 获取审批节点，显示 Timeline 的数据
     activityNodes.value = data.activityNodes;
+
+    // 获取待办任务显示操作按钮
+    operationButtonRef.value?.loadTodoTask(data.todoTask);
   } catch {
     message.error('获取审批详情失败！');
   } finally {
@@ -249,9 +247,7 @@ onMounted(async () => {
 <template>
   <Page auto-content-height>
     <Card
-      class="h-full"
       :body-style="{
-        height: 'calc(100% - 140px)',
         overflowY: 'auto',
         paddingTop: '12px',
       }"
@@ -306,18 +302,25 @@ onMounted(async () => {
         </div>
 
         <!-- 流程操作 -->
-        <div class="flex-1">
-          <Tabs v-model:active-key="activeTab" class="mt-0">
-            <TabPane tab="审批详情" key="form">
-              <Row :gutter="[48, 24]">
-                <Col :xs="24" :sm="24" :md="18" :lg="18" :xl="16">
+        <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">
+                <Col
+                  :xs="24"
+                  :sm="24"
+                  :md="18"
+                  :lg="18"
+                  :xl="16"
+                  class="h-full"
+                >
                   <!-- 流程表单 -->
                   <div
                     v-if="
                       processDefinition?.formType === BpmModelFormType.NORMAL
                     "
+                    class="h-full"
                   >
-                    <!-- v-model="detailForm.value" -->
                     <form-create
                       v-model="detailForm.value"
                       v-model:api="fApi"
@@ -330,23 +333,41 @@ onMounted(async () => {
                     v-if="
                       processDefinition?.formType === BpmModelFormType.CUSTOM
                     "
+                    class="h-full"
                   >
                     <BusinessFormComponent :id="processInstance?.businessKey" />
                   </div>
                 </Col>
-                <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8">
-                  <div class="mt-2">
+                <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8" class="h-full">
+                  <div class="mt-4 h-full">
                     <ProcessInstanceTimeline :activity-nodes="activityNodes" />
                   </div>
                 </Col>
               </Row>
             </TabPane>
 
-            <TabPane tab="流程图" key="diagram">
-              <div>待开发</div>
+            <TabPane tab="流程图" key="diagram" class="tab-pane-content">
+              <div class="h-full">
+                <ProcessInstanceSimpleViewer
+                  v-show="
+                    processDefinition.modelType &&
+                    processDefinition.modelType === BpmModelType.SIMPLE
+                  "
+                  :loading="processInstanceLoading"
+                  :model-view="processModelView"
+                />
+                <ProcessInstanceBpmnViewer
+                  v-show="
+                    processDefinition.modelType &&
+                    processDefinition.modelType === BpmModelType.BPMN
+                  "
+                  :loading="processInstanceLoading"
+                  :model-view="processModelView"
+                />
+              </div>
             </TabPane>
 
-            <TabPane tab="流转记录" key="record">
+            <TabPane tab="流转记录" key="record" class="tab-pane-content">
               <div class="h-full">
                 <BpmProcessInstanceTaskList
                   ref="taskListRef"
@@ -357,19 +378,65 @@ onMounted(async () => {
             </TabPane>
 
             <!-- TODO 待开发 -->
-            <TabPane tab="流转评论" key="comment" v-if="false">
-              <div>待开发</div>
+            <TabPane
+              tab="流转评论"
+              key="comment"
+              v-if="false"
+              class="tab-pane-content"
+            >
+              <div class="h-full">待开发</div>
             </TabPane>
           </Tabs>
         </div>
       </div>
 
       <template #actions>
-        <div class="flex justify-start gap-x-2 p-4">
-          <Button type="primary">驳回</Button>
-          <Button type="primary">同意</Button>
+        <div class="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>
   </Page>
 </template>
+
+<style lang="scss" scoped>
+.ant-tabs-content {
+  height: 100%;
+}
+
+.process-tabs-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+:deep(.ant-tabs) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+:deep(.ant-tabs-content) {
+  flex: 1;
+  overflow-y: auto;
+}
+
+:deep(.ant-tabs-tabpane) {
+  height: 100%;
+}
+
+.tab-pane-content {
+  height: calc(100vh - 420px);
+  padding-right: 12px;
+  overflow: hidden auto;
+}
+</style>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({ name: 'ProcessInstanceBpmnViewer' });
+</script>
+
+<template>
+  <div>
+    <h1>BPMN Viewer</h1>
+  </div>
+</template>

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

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, message, Space, Tooltip } from 'ant-design-vue';
+import Vue3Signature from 'vue3-signature';
+
+import { uploadFile } from '#/api/infra/file';
+import { download } from '#/utils';
+
+defineOptions({
+  name: 'BpmProcessInstanceSignature',
+});
+
+const emits = defineEmits(['success']);
+
+const [Modal, modalApi] = useVbenModal({
+  title: '流程签名',
+  onOpenChange(visible) {
+    if (!visible) {
+      modalApi.close();
+    }
+  },
+  onConfirm: () => {
+    submit();
+  },
+});
+
+const signature = ref<InstanceType<typeof Vue3Signature>>();
+
+const open = async () => {
+  modalApi.open();
+};
+
+defineExpose({ open });
+
+const submit = async () => {
+  message.success({
+    content: '签名上传中请稍等。。。',
+  });
+  const signFileUrl = await uploadFile({
+    file: download.base64ToFile(
+      signature?.value?.save('image/jpeg') || '',
+      '签名',
+    ),
+  });
+  emits('success', signFileUrl);
+  modalApi.close();
+};
+</script>
+
+<template>
+  <Modal class="h-[500px] w-[900px]">
+    <div class="mb-2 flex justify-end">
+      <Space>
+        <Tooltip title="撤销上一步操作">
+          <Button @click="signature?.undo()">
+            <template #icon>
+              <IconifyIcon icon="mi:undo" class="mb-[4px] size-[16px]" />
+            </template>
+            撤销
+          </Button>
+        </Tooltip>
+
+        <Tooltip title="清空画布">
+          <Button @click="signature?.clear()">
+            <template #icon>
+              <IconifyIcon
+                icon="mdi:delete-outline"
+                class="mb-[4px] size-[16px]"
+              />
+            </template>
+            <span>清除</span>
+          </Button>
+        </Tooltip>
+      </Space>
+    </div>
+
+    <Vue3Signature
+      class="mx-auto border-[1px] border-solid border-gray-300"
+      ref="signature"
+      w="874px"
+      h="324px"
+    />
+  </Modal>
+</template>

apps/web-antd/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({ name: 'ProcessInstanceSimpleViewer' });
+</script>
+
+<template>
+  <div>
+    <h1>Simple BPM Viewer</h1>
+  </div>
+</template>

apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue

@@ -43,7 +43,7 @@ const statusIconMap: Record<
   // 审批未开始
   '-1': { color: '#909398', icon: 'mdi:clock-outline' },
   // 待审批
-  '0': { color: '#00b32a', icon: 'mdi:loading' },
+  '0': { color: '#ff943e', icon: 'mdi:loading', animation: 'animate-spin' },
   // 审批中
   '1': { color: '#448ef7', icon: 'mdi:loading', animation: 'animate-spin' },
   // 审批通过