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

perf: [BPM 工作流] Simple 模型节点名称修改优化

pull/138/head
jason 2025-06-11 21:07:50 +08:00
parent 23a25cb521
commit 070605ec6e
17 changed files with 64 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -144,8 +144,8 @@ function clickIcon() {
showInput.value = true;
}
// 输入框失去焦点
function blurEvent() {
// 修改节点名称
function changeNodeName() {
showInput.value = false;
currentNode.value.name =
currentNode.value.name ||
@ -166,7 +166,8 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
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"
/>

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

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

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

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

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

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

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

@ -52,9 +52,8 @@ const deptOptions = inject<Ref<SystemDeptApi.Dept[]>>('deptList');
// 当前节点
const currentNode = useWatchNode(props);
// 节点名称
const { nodeName, showInput, clickIcon, blurEvent, inputRef } = useNodeName(
BpmNodeTypeEnum.START_USER_NODE,
);
const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
useNodeName(BpmNodeTypeEnum.START_USER_NODE);
// 激活的 Tab 标签页
const activeTabName = ref('user');
@ -150,7 +149,8 @@ defineExpose({ showStartUserNodeConfig });
v-if="showInput"
type="text"
class="config-editable-input"
@blur="blurEvent()"
@blur="changeNodeName()"
@press-enter="changeNodeName()"
v-model:value="nodeName"
:placeholder="nodeName"
/>

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

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

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

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

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, inputRef } = useNodeName2(
const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
currentNode,
BpmNodeTypeEnum.COPY_TASK_NODE,
);
@ -71,7 +71,8 @@ function deleteNode() {
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"
/>

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, inputRef } = useNodeName2(
const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
currentNode,
BpmNodeTypeEnum.DELAY_TIMER_NODE,
);
@ -68,7 +68,8 @@ function deleteNode() {
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"
/>

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

@ -73,8 +73,8 @@ watch(
{ deep: true },
);
// 失去焦点
function blurEvent(index: number) {
// 修改节点名称
function changeNodeName(index: number) {
showInputs.value[index] = false;
const conditionNode = currentNode.value.conditionNodes?.at(
index,
@ -214,7 +214,8 @@ function recursiveFindParentNode(
"
type="text"
class="editable-title-input"
@blur="blurEvent(index)"
@blur="changeNodeName(index)"
@press-enter="changeNodeName(index)"
v-model:value="item.name"
/>
</div>

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

@ -77,8 +77,8 @@ watch(
},
{ deep: true },
);
// 失去焦点
function blurEvent(index: number) {
// 修改节点名称
function changeNodeName(index: number) {
showInputs.value[index] = false;
const conditionNode = currentNode.value.conditionNodes?.at(
index,
@ -217,7 +217,8 @@ function recursiveFindParentNode(
"
type="text"
class="editable-title-input"
@blur="blurEvent(index)"
@blur="changeNodeName(index)"
@press-enter="changeNodeName(index)"
v-model:value="item.name"
/>
</div>

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

@ -66,8 +66,8 @@ watch(
},
{ deep: true },
);
// 失去焦点
function blurEvent(index: number) {
// 修改节点名称
function changeNodeName(index: number) {
showInputs.value[index] = false;
const conditionNode = currentNode.value.conditionNodes?.at(
index,
@ -175,7 +175,8 @@ function recursiveFindParentNode(
"
type="text"
class="input-max-width editable-title-input"
@blur="blurEvent(index)"
@blur="changeNodeName(index)"
@press-enter="changeNodeName(index)"
v-model:value="item.name"
/>
</div>

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, inputRef } = useNodeName2(
const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
currentNode,
BpmNodeTypeEnum.ROUTER_BRANCH_NODE,
);
@ -71,7 +71,8 @@ function deleteNode() {
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"
/>

5
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, inputRef } = useNodeName2(
const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
currentNode,
BpmNodeTypeEnum.START_USER_NODE,
);
@ -85,7 +85,8 @@ function nodeClick() {
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"
/>

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, inputRef } = useNodeName2(
const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
currentNode,
BpmNodeTypeEnum.TRIGGER_NODE,
);
@ -73,7 +73,8 @@ function deleteNode() {
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"
/>

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, inputRef } = useNodeName2(
const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2(
currentNode,
BpmNodeTypeEnum.USER_TASK_NODE,
);
@ -91,7 +91,8 @@ function findReturnTaskNodes(
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"
/>

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

@ -628,8 +628,8 @@ export function useNodeName(nodeType: BpmNodeTypeEnum) {
function clickIcon() {
showInput.value = true;
}
// 节点名称输入框失去焦点
function blurEvent() {
// 修改节点名称
function changeNodeName() {
showInput.value = false;
nodeName.value =
nodeName.value || (NODE_DEFAULT_NAME.get(nodeType) as string);
@ -648,7 +648,7 @@ export function useNodeName(nodeType: BpmNodeTypeEnum) {
showInput,
inputRef,
clickIcon,
blurEvent,
changeNodeName,
};
}
@ -670,8 +670,8 @@ export function useNodeName2(
}
});
// 节点名称输入框失去焦点
function blurEvent() {
// 修改节点名称
function changeNodeName() {
showInput.value = false;
node.value.name =
node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string);
@ -685,7 +685,7 @@ export function useNodeName2(
showInput,
inputRef,
clickTitle,
blurEvent,
changeNodeName,
};
}