yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

pull/138/head
jason 2025-06-11 18:08:48 +08:00
parent 6e3ffb61ef
commit 23a25cb521
17 changed files with 149 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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"

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

@ -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()"

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

@ -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()"

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

@ -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"

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

@ -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"

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

@ -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"

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

@ -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()"

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

@ -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">

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

@ -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">

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

@ -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)">

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

@ -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)">

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

@ -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)">

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

@ -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">

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

@ -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"

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

@ -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">

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

@ -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">

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

@ -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,
};