fix: [BPM 工作流] 节点名称输入框自动获取焦点问题修复

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,7 +128,18 @@ 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;
 }
@@ -153,6 +162,7 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
     <template #title>
       <div class="flex items-center">
         <Input
+          ref="inputRef"
           v-if="showInput"
           type="text"
           class="mr-2 w-48"

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

@@ -75,7 +75,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 const currentNode = useWatchNode(props);
 
 // 节点名称
-const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+const { nodeName, showInput, clickIcon, blurEvent, inputRef } = useNodeName(
   BpmNodeTypeEnum.COPY_TASK_NODE,
 );
 
@@ -213,6 +213,7 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
       <div class="config-header">
         <Input
           v-if="showInput"
+          ref="inputRef"
           type="text"
           class="config-editable-input"
           @blur="blurEvent()"

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

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

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

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

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

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

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

@@ -72,7 +72,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 // 当前节点
 const currentNode = useWatchNode(props);
 // 节点名称
-const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+const { nodeName, showInput, clickIcon, blurEvent, inputRef } = useNodeName(
   BpmNodeTypeEnum.TRIGGER_NODE,
 );
 // 触发器表单配置
@@ -388,6 +388,7 @@ onMounted(() => {
     <template #title>
       <div class="config-header">
         <Input
+          ref="inputRef"
           v-if="showInput"
           type="text"
           class="config-editable-input"

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

@@ -114,7 +114,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 });
 
 // 节点名称配置
-const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(
+const { nodeName, showInput, clickIcon, blurEvent, inputRef } = useNodeName(
   BpmNodeTypeEnum.USER_TASK_NODE,
 );
 
@@ -586,6 +586,7 @@ onMounted(() => {
       <div class="config-header">
         <Input
           v-if="showInput"
+          ref="inputRef"
           type="text"
           class="config-editable-input"
           @blur="blurEvent()"

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, blurEvent, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.COPY_TASK_NODE,
 );
@@ -67,11 +67,12 @@ function deleteNode() {
             <span class="iconfont icon-copy"></span>
           </div>
           <Input
+            ref="inputRef"
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
             @blur="blurEvent()"
-            v-model="currentNode.name"
+            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, blurEvent, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.DELAY_TIMER_NODE,
 );
@@ -64,11 +64,12 @@ function deleteNode() {
             <span class="iconfont icon-delay"></span>
           </div>
           <Input
+            ref="inputRef"
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
             @blur="blurEvent()"
-            v-model="currentNode.name"
+            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,9 +51,28 @@ watch(
     currentNode.value = newValue;
   },
 );
-
+// 条件节点名称输入框引用
+const inputRefs = ref<HTMLInputElement[]>([]);
+// 节点名称输入框显示状态
 const showInputs = ref<boolean[]>([]);
 
+// 监听显示状态变化
+watch(
+  showInputs,
+  (newValues) => {
+    // 当状态为 true 时, 自动聚焦
+    newValues.forEach((value, index) => {
+      if (value) {
+        // 当显示状态从 false 变为 true 时, 自动聚焦
+        nextTick(() => {
+          inputRefs.value[index]?.focus();
+        });
+      }
+    });
+  },
+  { deep: true },
+);
+
 // 失去焦点
 function blurEvent(index: number) {
   showInputs.value[index] = false;
@@ -188,10 +207,15 @@ 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)"
-                    v-model="item.name"
+                    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,8 +57,26 @@ watch(
     currentNode.value = newValue;
   },
 );
-
+// 条件节点名称输入框引用
+const inputRefs = ref<HTMLInputElement[]>([]);
+// 节点名称输入框显示状态
 const showInputs = ref<boolean[]>([]);
+// 监听显示状态变化
+watch(
+  showInputs,
+  (newValues) => {
+    // 当状态为 true 时, 自动聚焦
+    newValues.forEach((value, index) => {
+      if (value) {
+        // 当显示状态从 false 变为 true 时, 自动聚焦
+        nextTick(() => {
+          inputRefs.value[index]?.focus();
+        });
+      }
+    });
+  },
+  { deep: true },
+);
 // 失去焦点
 function blurEvent(index: number) {
   showInputs.value[index] = false;
@@ -192,10 +210,15 @@ 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)"
-                    v-model="item.name"
+                    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,8 +46,26 @@ watch(
   },
 );
 
+// 条件节点名称输入框引用
+const inputRefs = ref<HTMLInputElement[]>([]);
+// 节点名称输入框显示状态
 const showInputs = ref<boolean[]>([]);
-
+// 监听显示状态变化
+watch(
+  showInputs,
+  (newValues) => {
+    // 当输入框显示时, 自动聚焦
+    newValues.forEach((value, index) => {
+      if (value) {
+        // 当显示状态从 false 变为 true 时, 自动聚焦
+        nextTick(() => {
+          inputRefs.value[index]?.focus();
+        });
+      }
+    });
+  },
+  { deep: true },
+);
 // 失去焦点
 function blurEvent(index: number) {
   showInputs.value[index] = false;
@@ -150,10 +168,15 @@ 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)"
-                    v-model="item.name"
+                    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, blurEvent, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
 );
@@ -67,11 +67,12 @@ function deleteNode() {
             <span class="iconfont icon-router"></span>
           </div>
           <Input
+            ref="inputRef"
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
             @blur="blurEvent()"
-            v-model="currentNode.name"
+            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, blurEvent, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.START_USER_NODE,
 );
@@ -81,6 +81,7 @@ function nodeClick() {
             <span class="iconfont icon-start-user"></span>
           </div>
           <Input
+            ref="inputRef"
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"

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, blurEvent, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.TRIGGER_NODE,
 );
@@ -69,11 +69,12 @@ function deleteNode() {
             <span class="iconfont icon-trigger"></span>
           </div>
           <Input
+            ref="inputRef"
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
             @blur="blurEvent()"
-            v-model="currentNode.name"
+            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, blurEvent, clickTitle, inputRef } = useNodeName2(
   currentNode,
   BpmNodeTypeEnum.USER_TASK_NODE,
 );
@@ -87,11 +87,12 @@ function findReturnTaskNodes(
             </span>
           </div>
           <Input
+            ref="inputRef"
             v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
             @blur="blurEvent()"
-            v-model="currentNode.name"
+            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,6 +622,8 @@ export function useNodeName(nodeType: BpmNodeTypeEnum) {
   const nodeName = ref<string>();
   // 节点名称输入框
   const showInput = ref(false);
+  // 输入框的引用
+  const inputRef = ref<HTMLInputElement | null>(null);
   // 点击节点名称编辑图标
   function clickIcon() {
     showInput.value = true;
@@ -632,9 +634,19 @@ export function useNodeName(nodeType: BpmNodeTypeEnum) {
     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,
   };
@@ -646,11 +658,24 @@ export function useNodeName2(
 ) {
   // 显示节点名称输入框
   const showInput = ref(false);
+  // 输入框的引用
+  const inputRef = ref<HTMLInputElement | null>(null);
+
+  // 监听 showInput 的变化，当变为 true 时自动聚焦
+  watch(showInput, (value) => {
+    if (value) {
+      nextTick(() => {
+        inputRef.value?.focus();
+      });
+    }
+  });
+
   // 节点名称输入框失去焦点
   function blurEvent() {
     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,6 +683,7 @@ export function useNodeName2(
   }
   return {
     showInput,
+    inputRef,
     clickTitle,
     blurEvent,
   };