mirror of
https://github.com/1Panel-dev/MaxKB.git
synced 2025-12-26 01:33:05 +00:00
perf: Optimization of modifying node names in workflow
This commit is contained in:
wangdan-fit2cloud
GitHub
parent
18fa06678c
commit
880e171933
|
|
@ -57,5 +57,6 @@ export default {
|
|||
|
||||
inputPlaceholder: 'Please input',
|
||||
title: 'Title',
|
||||
content: 'Content'
|
||||
content: 'Content',
|
||||
rename: 'Rename'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
export default {
|
||||
node: 'Node',
|
||||
nodeName: 'Node Name',
|
||||
baseComponent: 'Basic',
|
||||
nodeSetting: 'Node Settings',
|
||||
workflow: 'Workflow',
|
||||
|
|
|
|||
|
|
@ -56,5 +56,6 @@ export default {
|
|||
param: {
|
||||
outputParam: '输出参数',
|
||||
inputParam:'输入参数'
|
||||
}
|
||||
},
|
||||
rename:'重命名'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
export default {
|
||||
node: '节点',
|
||||
nodeName: '节点名称',
|
||||
baseComponent: '基础组件',
|
||||
nodeSetting: '节点设置',
|
||||
workflow: '工作流',
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ export default {
|
|||
content: '内容',
|
||||
param: {
|
||||
outputParam: '輸出參數',
|
||||
inputParam:'輸入參數'
|
||||
}
|
||||
inputParam: '輸入參數'
|
||||
},
|
||||
rename: '重命名'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
export default {
|
||||
node: '節點',
|
||||
nodeName: '節點名稱',
|
||||
baseComponent: '基礎組件',
|
||||
nodeSetting: '節點設置',
|
||||
workflow: '工作流',
|
||||
|
|
|
|||
|
|
@ -7,28 +7,14 @@
|
|||
>
|
||||
<div v-resize="resizeStepContainer">
|
||||
<div class="flex-between">
|
||||
<div
|
||||
class="flex align-center"
|
||||
:style="{ maxWidth: node_status == 200 ? 'calc(100% - 85px)' : 'calc(100% - 85px)' }"
|
||||
>
|
||||
<div class="flex align-center" style="width: 70%;">
|
||||
<component
|
||||
:is="iconComponent(`${nodeModel.type}-icon`)"
|
||||
class="mr-8"
|
||||
:size="24"
|
||||
:item="nodeModel?.properties.node_data"
|
||||
/>
|
||||
<h4 v-if="showOperate(nodeModel.type)" style="max-width: 90%">
|
||||
<ReadWrite
|
||||
@mousemove.stop
|
||||
@mousedown.stop
|
||||
@keydown.stop
|
||||
@click.stop
|
||||
@change="editName"
|
||||
:data="nodeModel.properties.stepName"
|
||||
trigger="dblclick"
|
||||
/>
|
||||
</h4>
|
||||
<h4 v-else>{{ nodeModel.properties.stepName }}</h4>
|
||||
<h4 class="ellipsis-1 break-all">{{ nodeModel.properties.stepName }}</h4>
|
||||
</div>
|
||||
|
||||
<div @mousemove.stop @mousedown.stop @keydown.stop @click.stop>
|
||||
|
|
@ -70,6 +56,9 @@
|
|||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu style="min-width: 80px">
|
||||
<el-dropdown-item @click="renameNode" class="p-8">{{
|
||||
$t('common.rename')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item @click="copyNode" class="p-8">{{
|
||||
$t('common.copy')
|
||||
}}</el-dropdown-item>
|
||||
|
|
@ -138,6 +127,40 @@
|
|||
@clickNodes="clickNodes"
|
||||
/>
|
||||
</el-collapse-transition>
|
||||
|
||||
<el-dialog
|
||||
:title="$t('views.applicationWorkflow.nodeName')"
|
||||
v-model="nodeNameDialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:destroy-on-close="true"
|
||||
append-to-body
|
||||
>
|
||||
<el-form label-position="top" ref="titleFormRef" :model="form">
|
||||
<el-form-item
|
||||
prop="title"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('common.inputPlaceholder'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
>
|
||||
<el-input v-model="form.title" @blur="form.title = form.title.trim()" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click.prevent="nodeNameDialogVisible = false">
|
||||
{{ $t('common.cancel') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="editName(titleFormRef)">
|
||||
{{ $t('common.save') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
@ -149,6 +172,7 @@ import { iconComponent } from '../icons/utils'
|
|||
import { copyClick } from '@/utils/clipboard'
|
||||
import { WorkflowType } from '@/enums/workflow'
|
||||
import { MsgError, MsgConfirm } from '@/utils/message'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { t } from '@/locales'
|
||||
const {
|
||||
params: { id }
|
||||
|
|
@ -165,6 +189,11 @@ const height = ref<{
|
|||
})
|
||||
const showAnchor = ref<boolean>(false)
|
||||
const anchorData = ref<any>()
|
||||
const titleFormRef = ref()
|
||||
const nodeNameDialogVisible = ref<boolean>(false)
|
||||
const form = ref<any>({
|
||||
title: ''
|
||||
})
|
||||
|
||||
const condition = computed({
|
||||
set: (v) => {
|
||||
|
|
@ -190,6 +219,7 @@ const showNode = computed({
|
|||
return true
|
||||
}
|
||||
})
|
||||
|
||||
const handleWheel = (event: any) => {
|
||||
const isCombinationKeyPressed = event.ctrlKey || event.metaKey
|
||||
if (!isCombinationKeyPressed) {
|
||||
|
|
@ -202,19 +232,30 @@ const node_status = computed(() => {
|
|||
}
|
||||
return 200
|
||||
})
|
||||
function editName(val: string) {
|
||||
if (val.trim() && val.trim() !== props.nodeModel.properties.stepName) {
|
||||
if (
|
||||
!props.nodeModel.graphModel.nodes?.some(
|
||||
(node: any) => node.properties.stepName === val.trim()
|
||||
)
|
||||
) {
|
||||
set(props.nodeModel.properties, 'stepName', val.trim())
|
||||
} else {
|
||||
MsgError(t('views.applicationWorkflow.tip.repeatedNodeError'))
|
||||
}
|
||||
}
|
||||
|
||||
function renameNode() {
|
||||
form.value.title = props.nodeModel.properties.stepName
|
||||
nodeNameDialogVisible.value = true
|
||||
}
|
||||
const editName = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
if (
|
||||
!props.nodeModel.graphModel.nodes?.some(
|
||||
(node: any) => node.properties.stepName === form.value.title
|
||||
)
|
||||
) {
|
||||
set(props.nodeModel.properties, 'stepName', form.value.title)
|
||||
nodeNameDialogVisible.value = false
|
||||
formEl.resetFields()
|
||||
} else {
|
||||
MsgError(t('views.applicationWorkflow.tip.repeatedNodeError'))
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const mousedown = () => {
|
||||
props.nodeModel.graphModel.clearSelectElements()
|
||||
set(props.nodeModel, 'isSelected', true)
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<div class="flex-between">
|
||||
<div>
|
||||
<span
|
||||
>{{ $t('views.applicationWorkflow.nodes.variableAssignNode.assign')
|
||||
>{{ $t('views.applicationWorkflow.nodes.variableAssignNode.assign')
|
||||
}}<span class="danger">*</span></span
|
||||
>
|
||||
</div>
|
||||
|
|
@ -60,77 +60,83 @@
|
|||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<div v-if="item.source === 'custom'" class="flex">
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="8">
|
||||
<el-select v-model="item.type" style="width: 130px;">
|
||||
<el-option v-for="item in typeOptions" :key="item" :label="item"
|
||||
:value="item" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-form-item v-if="item.type === 'string'"
|
||||
:prop="'variable_list.' + index + '.value'"
|
||||
:rules="{
|
||||
message: t('dynamicsForm.tip.requiredMessage'),
|
||||
trigger: 'blur',
|
||||
required: true
|
||||
}"
|
||||
>
|
||||
<el-input
|
||||
class="ml-4"
|
||||
v-model="item.value"
|
||||
:placeholder="$t('common.inputPlaceholder')"
|
||||
show-word-limit
|
||||
clearable
|
||||
@wheel="wheel"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-else-if="item.type ==='num'"
|
||||
:prop="'variable_list.' + index + '.value'"
|
||||
:rules="{
|
||||
message: t('dynamicsForm.tip.requiredMessage'),
|
||||
trigger: 'blur',
|
||||
required: true
|
||||
}"
|
||||
>
|
||||
<el-input-number
|
||||
class="ml-4"
|
||||
v-model="item.value"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item v-else-if="item.type === 'json'"
|
||||
:prop="'variable_list.' + index + '.value'"
|
||||
:rules="[{
|
||||
message: t('dynamicsForm.tip.requiredMessage'),
|
||||
trigger: 'blur',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
validator: (rule:any, value:any, callback:any) => {
|
||||
try {
|
||||
JSON.parse(value);
|
||||
callback(); // Valid JSON
|
||||
} catch (e) {
|
||||
callback(new Error('Invalid JSON format'));
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
}]"
|
||||
>
|
||||
<el-input
|
||||
class="ml-4"
|
||||
v-model="item.value"
|
||||
:placeholder="$t('common.inputPlaceholder')"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-form-item v-else>
|
||||
<div v-if="item.source === 'custom'" class="flex">
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="8">
|
||||
<el-select v-model="item.type" style="width: 85px">
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-form-item
|
||||
v-if="item.type === 'string'"
|
||||
:prop="'variable_list.' + index + '.value'"
|
||||
:rules="{
|
||||
message: t('dynamicsForm.tip.requiredMessage'),
|
||||
trigger: 'blur',
|
||||
required: true
|
||||
}"
|
||||
>
|
||||
<el-input
|
||||
class="ml-4"
|
||||
v-model="item.value"
|
||||
:placeholder="$t('common.inputPlaceholder')"
|
||||
show-word-limit
|
||||
clearable
|
||||
@wheel="wheel"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.type === 'num'"
|
||||
:prop="'variable_list.' + index + '.value'"
|
||||
:rules="{
|
||||
message: $t('common.inputPlaceholder'),
|
||||
trigger: 'blur',
|
||||
required: true
|
||||
}"
|
||||
>
|
||||
<el-input-number class="ml-4" v-model="item.value"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else-if="item.type === 'json'"
|
||||
:prop="'variable_list.' + index + '.value'"
|
||||
:rules="[
|
||||
{
|
||||
message: $t('common.inputPlaceholder'),
|
||||
trigger: 'blur',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
try {
|
||||
JSON.parse(value)
|
||||
callback() // Valid JSON
|
||||
} catch (e) {
|
||||
callback(new Error('Invalid JSON format'))
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
class="ml-4"
|
||||
v-model="item.value"
|
||||
:placeholder="$t('common.inputPlaceholder')"
|
||||
type="textarea"
|
||||
autosize
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<NodeCascader
|
||||
v-else
|
||||
ref="nodeCascaderRef2"
|
||||
:nodeModel="nodeModel"
|
||||
class="w-full"
|
||||
|
|
@ -138,7 +144,6 @@
|
|||
v-model="item.reference"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
</el-card>
|
||||
</template>
|
||||
<el-button link type="primary" @click="addVariable">
|
||||
|
|
|
|||
Loading…
Reference in New Issue