feat: [BPM 工作流] 增加子流程节点

apps/web-antd/src/components/simple-process-design/components/nodes/child-process-node.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../../consts';
+
+import { inject } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input } from 'ant-design-vue';
+
+import { BpmNodeTypeEnum } from '#/utils';
+
+import { NODE_DEFAULT_TEXT } from '../../consts';
+import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
+// import ChildProcessNodeConfig from '../nodes-config/child-process-node-config.vue';
+import NodeHandler from './node-handler.vue';
+
+defineOptions({ name: 'ChildProcessNode' });
+
+const props = defineProps<{
+  flowNode: SimpleFlowNode;
+}>();
+
+// 定义事件，更新父组件。
+const emits = defineEmits<{
+  'update:flowNode': [node: SimpleFlowNode | undefined];
+}>();
+
+// 是否只读
+const readonly = inject<Boolean>('readonly');
+
+// 监控节点的变化
+const currentNode = useWatchNode(props);
+
+// 节点名称编辑
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
+  currentNode,
+  BpmNodeTypeEnum.CHILD_PROCESS_NODE,
+);
+
+// 打开节点配置
+const openNodeConfig = () => {
+  if (readonly) {
+    console.warn('TODO: 打开节点配置');
+  }
+  // 暂时注释掉，因为child-process-node-config.vue文件不存在
+  // nodeSetting.value.showChildProcessNodeConfig(currentNode.value);
+  // nodeSetting.value.openDrawer();
+};
+
+// 删除节点。更新当前节点为孩子节点
+const deleteNode = () => {
+  emits('update:flowNode', currentNode.value.childNode);
+};
+</script>
+
+<template>
+  <div class="node-wrapper">
+    <div class="node-container">
+      <div
+        class="node-box"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`,
+        ]"
+      >
+        <div class="node-title-container">
+          <div
+            :class="`node-title-icon ${currentNode.childProcessSetting?.async === true ? 'async-child-process' : 'child-process'}`"
+          >
+            <span
+              :class="`iconfont ${currentNode.childProcessSetting?.async === true ? 'icon-async-child-process' : 'icon-child-process'}`"
+            >
+            </span>
+          </div>
+          <Input
+            ref="inputRef"
+            v-if="!readonly && showInput"
+            type="text"
+            class="editable-title-input"
+            @blur="changeNodeName()"
+            @press-enter="changeNodeName()"
+            v-model:value="currentNode.name"
+            :placeholder="currentNode.name"
+          />
+          <div v-else class="node-title" @click="clickTitle">
+            {{ currentNode.name }}
+          </div>
+        </div>
+        <div class="node-content" @click="openNodeConfig">
+          <div
+            class="node-text"
+            :title="currentNode.showText"
+            v-if="currentNode.showText"
+          >
+            {{ currentNode.showText }}
+          </div>
+          <div class="node-text" v-else>
+            {{ NODE_DEFAULT_TEXT.get(BpmNodeTypeEnum.CHILD_PROCESS_NODE) }}
+          </div>
+          <IconifyIcon v-if="!readonly" icon="lucide:chevron-right" />
+        </div>
+        <div v-if="!readonly" class="node-toolbar">
+          <div class="toolbar-icon">
+            <IconifyIcon
+              color="#0089ff"
+              icon="lucide:circle-x"
+              :size="18"
+              @click="deleteNode"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 添加节点组件。会在子节点前面添加节点 -->
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
+    </div>
+    <!-- <ChildProcessNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    /> -->
+  </div>
+</template>
+
+<style scoped></style>

apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue

@@ -16,25 +16,6 @@ import { NODE_DEFAULT_TEXT } from '../../consts';
 import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers';
 import UserTaskNodeConfig from '../nodes-config/user-task-node-config.vue';
 import TaskListModal from './modules/task-list-modal.vue';
-// // 使用useVbenVxeGrid
-// const [Grid, gridApi] = useVbenVxeGrid({
-//   gridOptions: {
-//     columns: columns.value,
-//     keepSource: true,
-//     border: true,
-//     height: 'auto',
-//     data: selectTasks.value,
-//     rowConfig: {
-//       keyField: 'id',
-//     },
-//     pagerConfig: {
-//       enabled: false,
-//     },
-//     toolbarConfig: {
-//       enabled: false,
-//     },
-//   } as VxeTableGridOptions<any>,
-// });
 import NodeHandler from './node-handler.vue';
 
 defineOptions({ name: 'UserTaskNode' });
@@ -155,7 +136,7 @@ function findReturnTaskNodes(
           </div>
         </div>
       </div>
-      <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
+      <!-- 添加节点组件。会在子节点前面添加节点 -->
       <NodeHandler
         v-if="currentNode"
         v-model:child-node="currentNode.childNode"

apps/web-antd/src/components/simple-process-design/components/process-node-tree.vue

@@ -4,6 +4,7 @@ import type { SimpleFlowNode } from '../consts';
 import { BpmNodeTypeEnum } from '#/utils';
 
 import { useWatchNode } from '../helpers';
+import ChildProcessNode from './nodes/child-process-node.vue';
 import CopyTaskNode from './nodes/copy-task-node.vue';
 import DelayTimerNode from './nodes/delay-timer-node.vue';
 import EndEventNode from './nodes/end-event-node.vue';
@@ -140,11 +141,13 @@ function recursiveFindParentNode(
     @update:flow-node="handleModelValueUpdate"
   />
   <!-- 子流程节点 -->
-  <!-- <ChildProcessNode
+  <ChildProcessNode
-    v-if="currentNode && currentNode.type === NodeType.CHILD_PROCESS_NODE"
+    v-if="
+      currentNode && currentNode.type === BpmNodeTypeEnum.CHILD_PROCESS_NODE
+    "
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
-  /> -->
+  />
   <!-- 递归显示孩子节点  -->
   <ProcessNodeTree
     v-if="currentNode && currentNode.childNode"