Pre Merge pull request !138 from Jason/dev

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SimpleFlowNode } from '../../consts';
 
-import { ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
@@ -53,8 +53,6 @@ const condition = ref<any>({
   },
 });
 
-// 显示名称输入框
-const showInput = ref(false);
 const conditionRef = ref();
 const fieldOptions = useFormFieldsAndStartUser(); // 流程表单字段和发起人字段
 
@@ -130,13 +128,24 @@ watch(
     currentNode.value = newValue;
   },
 );
-
+// 显示名称输入框
+const showInput = ref(false);
+// 输入框的引用
+const inputRef = ref<HTMLInputElement | null>(null);
+// 监听 showInput 的变化，当变为 true 时自动聚焦
+watch(showInput, (value) => {
+  if (value) {
+    nextTick(() => {
+      inputRef.value?.focus();
+    });
+  }
+});
 function clickIcon() {
   showInput.value = true;
 }
 
-// 输入框失去焦点
+// 修改节点名称
-function blurEvent() {
+function changeNodeName() {
   showInput.value = false;
   currentNode.value.name =
     currentNode.value.name ||
@@ -153,10 +162,12 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
     <template #title>
       <div class="flex items-center">
         <Input
+          ref="inputRef"
           v-if="showInput"
           type="text"
           class="mr-2 w-48"
-          @blur="blurEvent()"
+          @blur="changeNodeName()"
+          @press-enter="changeNodeName()"
           v-model:value="currentNode.name"
           :placeholder="currentNode.name"
         />

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

@@ -75,9 +75,8 @@ const [Drawer, drawerApi] = useVbenDrawer({
 const currentNode = useWatchNode(props);
 
 // 节点名称
-const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
-  BpmNodeTypeEnum.COPY_TASK_NODE,
+  useNodeName(BpmNodeTypeEnum.COPY_TASK_NODE);
-);
 
 // 激活的 Tab 标签页
 const activeTabName = ref('user');
@@ -213,9 +212,11 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
       <div class="config-header">
         <Input
           v-if="showInput"
+          ref="inputRef"
           type="text"
           class="config-editable-input"
-          @blur="blurEvent()"
+          @blur="changeNodeName()"
+          @press-enter="changeNodeName()"
           v-model:value="nodeName"
           :placeholder="nodeName"
         />

apps/web-antd/src/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue

@@ -45,9 +45,8 @@ const props = defineProps({
 // 当前节点
 const currentNode = useWatchNode(props);
 // 节点名称
-const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
-  BpmNodeTypeEnum.DELAY_TIMER_NODE,
+  useNodeName(BpmNodeTypeEnum.DELAY_TIMER_NODE);
-);
 // 抄送人表单配置
 const formRef = ref(); // 表单 Ref
 
@@ -158,9 +157,11 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
       <div class="flex items-center">
         <Input
           v-if="showInput"
+          ref="inputRef"
           type="text"
           class="mr-2 w-48"
-          @blur="blurEvent()"
+          @blur="changeNodeName()"
+          @press-enter="changeNodeName()"
           v-model:value="nodeName"
           :placeholder="nodeName"
         />

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

@@ -41,9 +41,8 @@ const processNodeTree = inject<Ref<SimpleFlowNode>>('processNodeTree');
 /** 当前节点 */
 const currentNode = useWatchNode(props);
 /** 节点名称 */
-const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
-  BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
+  useNodeName(BpmNodeTypeEnum.ROUTER_BRANCH_NODE);
-);
 const routerGroups = ref<RouterSetting[]>([]);
 const nodeOptions = ref<any[]>([]);
 const conditionRef = ref<any[]>([]);
@@ -205,10 +204,12 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
     <template #title>
       <div class="flex items-center">
         <Input
+          ref="inputRef"
           v-if="showInput"
           type="text"
           class="mr-2 w-48"
-          @blur="blurEvent()"
+          @blur="changeNodeName()"
+          @press-enter="changeNodeName()"
           v-model:value="nodeName"
           :placeholder="nodeName"
         />

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

@@ -52,9 +52,8 @@ const deptOptions = inject<Ref<SystemDeptApi.Dept[]>>('deptList');
 // 当前节点
 const currentNode = useWatchNode(props);
 // 节点名称
-const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
-  BpmNodeTypeEnum.START_USER_NODE,
+  useNodeName(BpmNodeTypeEnum.START_USER_NODE);
-);
 // 激活的 Tab 标签页
 const activeTabName = ref('user');
 
@@ -145,12 +144,13 @@ defineExpose({ showStartUserNodeConfig });
   <Drawer>
     <template #title>
       <div class="config-header">
-        <!--    TODO v-mountedFocus 自动聚集 需要迁移一下 -->
         <Input
+          ref="inputRef"
           v-if="showInput"
           type="text"
           class="config-editable-input"
-          @blur="blurEvent()"
+          @blur="changeNodeName()"
+          @press-enter="changeNodeName()"
           v-model:value="nodeName"
           :placeholder="nodeName"
         />

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

@@ -72,9 +72,8 @@ const [Drawer, drawerApi] = useVbenDrawer({
 // 当前节点
 const currentNode = useWatchNode(props);
 // 节点名称
-const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
-  BpmNodeTypeEnum.TRIGGER_NODE,
+  useNodeName(BpmNodeTypeEnum.TRIGGER_NODE);
-);
 // 触发器表单配置
 const formRef = ref(); // 表单 Ref
 
@@ -388,10 +387,12 @@ onMounted(() => {
     <template #title>
       <div class="config-header">
         <Input
+          ref="inputRef"
           v-if="showInput"
           type="text"
           class="config-editable-input"
-          @blur="blurEvent()"
+          @blur="changeNodeName()"
+          @press-enter="changeNodeName()"
           v-model:value="nodeName"
           :placeholder="nodeName"
         />

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

@@ -114,9 +114,8 @@ const [Drawer, drawerApi] = useVbenDrawer({
 });
 
 // 节点名称配置
-const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
-  BpmNodeTypeEnum.USER_TASK_NODE,
+  useNodeName(BpmNodeTypeEnum.USER_TASK_NODE);
-);
 
 // 激活的 Tab 标签页
 const activeTabName = ref('user');
@@ -586,9 +585,11 @@ onMounted(() => {
       <div class="config-header">
         <Input
           v-if="showInput"
+          ref="inputRef"
           type="text"
           class="config-editable-input"
-          @blur="blurEvent()"
+          @blur="changeNodeName()"
+          @press-enter="changeNodeName()"
           v-model:value="nodeName"
           :placeholder="nodeName"
         />

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

@@ -32,7 +32,7 @@ const readonly = inject<Boolean>('readonly');
 // 监控节点的变化
 const currentNode = useWatchNode(props);
 // 节点名称编辑
-const { showInput, blurEvent, clickTitle } = useNodeName2(
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.COPY_TASK_NODE,
 );
@@ -67,11 +67,13 @@ function deleteNode() {
             <span class="iconfont icon-copy"></span>
           </div>
           <Input
+            ref="inputRef"
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
-            @blur="blurEvent()"
+            @blur="changeNodeName()"
-            v-model="currentNode.name"
+            @press-enter="changeNodeName()"
+            v-model:value="currentNode.name"
             :placeholder="currentNode.name"
           />
           <div v-else class="node-title" @click="clickTitle">

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

@@ -30,7 +30,7 @@ const readonly = inject<Boolean>('readonly');
 // 监控节点的变化
 const currentNode = useWatchNode(props);
 // 节点名称编辑
-const { showInput, blurEvent, clickTitle } = useNodeName2(
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.DELAY_TIMER_NODE,
 );
@@ -64,11 +64,13 @@ function deleteNode() {
             <span class="iconfont icon-delay"></span>
           </div>
           <Input
+            ref="inputRef"
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
-            @blur="blurEvent()"
+            @blur="changeNodeName()"
-            v-model="currentNode.name"
+            @press-enter="changeNodeName()"
+            v-model:value="currentNode.name"
             :placeholder="currentNode.name"
           />
           <div v-else class="node-title" @click="clickTitle">

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SimpleFlowNode } from '../../consts';
 
-import { getCurrentInstance, inject, ref, watch } from 'vue';
+import { getCurrentInstance, inject, nextTick, ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
@@ -51,11 +51,30 @@ watch(
     currentNode.value = newValue;
   },
 );
-
+// 条件节点名称输入框引用
+const inputRefs = ref<HTMLInputElement[]>([]);
+// 节点名称输入框显示状态
 const showInputs = ref<boolean[]>([]);
 
-// 失去焦点
+// 监听显示状态变化
-function blurEvent(index: number) {
+watch(
+  showInputs,
+  (newValues) => {
+    // 当状态为 true 时, 自动聚焦
+    newValues.forEach((value, index) => {
+      if (value) {
+        // 当显示状态从 false 变为 true 时, 自动聚焦
+        nextTick(() => {
+          inputRefs.value[index]?.focus();
+        });
+      }
+    });
+  },
+  { deep: true },
+);
+
+// 修改节点名称
+function changeNodeName(index: number) {
   showInputs.value[index] = false;
   const conditionNode = currentNode.value.conditionNodes?.at(
     index,
@@ -188,10 +207,16 @@ function recursiveFindParentNode(
               <div class="branch-node-title-container">
                 <div v-if="!readonly && showInputs[index]">
                   <Input
+                    :ref="
+                      (el) => {
+                        inputRefs[index] = el as HTMLInputElement;
+                      }
+                    "
                     type="text"
                     class="editable-title-input"
-                    @blur="blurEvent(index)"
+                    @blur="changeNodeName(index)"
-                    v-model="item.name"
+                    @press-enter="changeNodeName(index)"
+                    v-model:value="item.name"
                   />
                 </div>
                 <div v-else class="branch-title" @click="clickEvent(index)">

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SimpleFlowNode } from '../../consts';
 
-import { getCurrentInstance, inject, ref, watch } from 'vue';
+import { getCurrentInstance, inject, nextTick, ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep, buildShortUUID as generateUUID } from '@vben/utils';
@@ -57,10 +57,28 @@ watch(
     currentNode.value = newValue;
   },
 );
-
+// 条件节点名称输入框引用
+const inputRefs = ref<HTMLInputElement[]>([]);
+// 节点名称输入框显示状态
 const showInputs = ref<boolean[]>([]);
-// 失去焦点
+// 监听显示状态变化
-function blurEvent(index: number) {
+watch(
+  showInputs,
+  (newValues) => {
+    // 当状态为 true 时, 自动聚焦
+    newValues.forEach((value, index) => {
+      if (value) {
+        // 当显示状态从 false 变为 true 时, 自动聚焦
+        nextTick(() => {
+          inputRefs.value[index]?.focus();
+        });
+      }
+    });
+  },
+  { deep: true },
+);
+// 修改节点名称
+function changeNodeName(index: number) {
   showInputs.value[index] = false;
   const conditionNode = currentNode.value.conditionNodes?.at(
     index,
@@ -192,10 +210,16 @@ function recursiveFindParentNode(
               <div class="branch-node-title-container">
                 <div v-if="!readonly && showInputs[index]">
                   <Input
+                    :ref="
+                      (el) => {
+                        inputRefs[index] = el as HTMLInputElement;
+                      }
+                    "
                     type="text"
                     class="editable-title-input"
-                    @blur="blurEvent(index)"
+                    @blur="changeNodeName(index)"
-                    v-model="item.name"
+                    @press-enter="changeNodeName(index)"
+                    v-model:value="item.name"
                   />
                 </div>
                 <div v-else class="branch-title" @click="clickEvent(index)">

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SimpleFlowNode } from '../../consts';
 
-import { inject, ref, watch } from 'vue';
+import { inject, nextTick, ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 import { buildShortUUID as generateUUID } from '@vben/utils';
@@ -46,10 +46,28 @@ watch(
   },
 );
 
+// 条件节点名称输入框引用
+const inputRefs = ref<HTMLInputElement[]>([]);
+// 节点名称输入框显示状态
 const showInputs = ref<boolean[]>([]);
-
+// 监听显示状态变化
-// 失去焦点
+watch(
-function blurEvent(index: number) {
+  showInputs,
+  (newValues) => {
+    // 当输入框显示时, 自动聚焦
+    newValues.forEach((value, index) => {
+      if (value) {
+        // 当显示状态从 false 变为 true 时, 自动聚焦
+        nextTick(() => {
+          inputRefs.value[index]?.focus();
+        });
+      }
+    });
+  },
+  { deep: true },
+);
+// 修改节点名称
+function changeNodeName(index: number) {
   showInputs.value[index] = false;
   const conditionNode = currentNode.value.conditionNodes?.at(
     index,
@@ -150,10 +168,16 @@ function recursiveFindParentNode(
               <div class="branch-node-title-container">
                 <div v-if="showInputs[index]">
                   <Input
+                    :ref="
+                      (el) => {
+                        inputRefs[index] = el as HTMLInputElement;
+                      }
+                    "
                     type="text"
                     class="input-max-width editable-title-input"
-                    @blur="blurEvent(index)"
+                    @blur="changeNodeName(index)"
-                    v-model="item.name"
+                    @press-enter="changeNodeName(index)"
+                    v-model:value="item.name"
                   />
                 </div>
                 <div v-else class="branch-title" @click="clickEvent(index)">

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

@@ -33,7 +33,7 @@ const readonly = inject<Boolean>('readonly');
 // 监控节点的变化
 const currentNode = useWatchNode(props);
 // 节点名称编辑
-const { showInput, blurEvent, clickTitle } = useNodeName2(
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
 );
@@ -67,11 +67,13 @@ function deleteNode() {
             <span class="iconfont icon-router"></span>
           </div>
           <Input
+            ref="inputRef"
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
-            @blur="blurEvent()"
+            @blur="changeNodeName()"
-            v-model="currentNode.name"
+            @press-enter="changeNodeName()"
+            v-model:value="currentNode.name"
             :placeholder="currentNode.name"
           />
           <div v-else class="node-title" @click="clickTitle">

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

@@ -37,7 +37,7 @@ const tasks = inject<Ref<any[]>>('tasks', ref([]));
 // 监控节点变化
 const currentNode = useWatchNode(props);
 // 节点名称编辑
-const { showInput, blurEvent, clickTitle } = useNodeName2(
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.START_USER_NODE,
 );
@@ -81,10 +81,12 @@ function nodeClick() {
             <span class="iconfont icon-start-user"></span>
           </div>
           <Input
+            ref="inputRef"
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
-            @blur="blurEvent()"
+            @blur="changeNodeName()"
+            @press-enter="changeNodeName()"
             v-model:value="currentNode.name"
             :placeholder="currentNode.name"
           />

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

@@ -35,7 +35,7 @@ const readonly = inject<Boolean>('readonly');
 // 监控节点的变化
 const currentNode = useWatchNode(props);
 // 节点名称编辑
-const { showInput, blurEvent, clickTitle } = useNodeName2(
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.TRIGGER_NODE,
 );
@@ -69,11 +69,13 @@ function deleteNode() {
             <span class="iconfont icon-trigger"></span>
           </div>
           <Input
+            ref="inputRef"
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
-            @blur="blurEvent()"
+            @blur="changeNodeName()"
-            v-model="currentNode.name"
+            @press-enter="changeNodeName()"
+            v-model:value="currentNode.name"
             :placeholder="currentNode.name"
           />
           <div v-else class="node-title" @click="clickTitle">

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

@@ -36,7 +36,7 @@ const tasks = inject<Ref<any[]>>('tasks', ref([]));
 // 监控节点变化
 const currentNode = useWatchNode(props);
 // 节点名称编辑
-const { showInput, blurEvent, clickTitle } = useNodeName2(
+const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.USER_TASK_NODE,
 );
@@ -87,11 +87,13 @@ function findReturnTaskNodes(
             </span>
           </div>
           <Input
+            ref="inputRef"
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
-            @blur="blurEvent()"
+            @blur="changeNodeName()"
-            v-model="currentNode.name"
+            @press-enter="changeNodeName()"
+            v-model:value="currentNode.name"
             :placeholder="currentNode.name"
           />
           <div v-else class="node-title" @click="clickTitle">

apps/web-antd/src/components/simple-process-design/helpers.ts

@@ -12,7 +12,7 @@ import type { SystemPostApi } from '#/api/system/post';
 import type { SystemRoleApi } from '#/api/system/role';
 import type { SystemUserApi } from '#/api/system/user';
 
-import { inject, ref, toRaw, unref, watch } from 'vue';
+import { inject, nextTick, ref, toRaw, unref, watch } from 'vue';
 
 import {
   BpmNodeTypeEnum,
@@ -622,21 +622,33 @@ export function useNodeName(nodeType: BpmNodeTypeEnum) {
   const nodeName = ref<string>();
   // 节点名称输入框
   const showInput = ref(false);
+  // 输入框的引用
+  const inputRef = ref<HTMLInputElement | null>(null);
   // 点击节点名称编辑图标
   function clickIcon() {
     showInput.value = true;
   }
-  // 节点名称输入框失去焦点
+  // 修改节点名称
-  function blurEvent() {
+  function changeNodeName() {
     showInput.value = false;
     nodeName.value =
       nodeName.value || (NODE_DEFAULT_NAME.get(nodeType) as string);
   }
+  // 监听 showInput 的变化，当变为 true 时自动聚焦
+  watch(showInput, (value) => {
+    if (value) {
+      nextTick(() => {
+        inputRef.value?.focus();
+      });
+    }
+  });
+
   return {
     nodeName,
     showInput,
+    inputRef,
     clickIcon,
-    blurEvent,
+    changeNodeName,
   };
 }
 
@@ -646,11 +658,24 @@ export function useNodeName2(
 ) {
   // 显示节点名称输入框
   const showInput = ref(false);
-  // 节点名称输入框失去焦点
+  // 输入框的引用
-  function blurEvent() {
+  const inputRef = ref<HTMLInputElement | null>(null);
+
+  // 监听 showInput 的变化，当变为 true 时自动聚焦
+  watch(showInput, (value) => {
+    if (value) {
+      nextTick(() => {
+        inputRef.value?.focus();
+      });
+    }
+  });
+
+  // 修改节点名称
+  function changeNodeName() {
     showInput.value = false;
     node.value.name =
       node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string);
+    console.warn('node.value.name===>', node.value.name);
   }
   // 点击节点标题进行输入
   function clickTitle() {
@@ -658,8 +683,9 @@ export function useNodeName2(
   }
   return {
     showInput,
+    inputRef,
     clickTitle,
-    blurEvent,
+    changeNodeName,
   };
 }