zhuchaowe/maxkb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: The workflow condition node supports drag and drop sorting (#2648)

Browse Source
This commit is contained in:
wangdan-fit2cloud 2025-04-07 18:19:38 +08:00 committed by GitHub
parent 76d050bea4
commit 23b47657c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 146 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/package.json
View File

@ -50,9 +50,11 @@
"vue-clipboard3": "^2.0.0", "vue-clipboard3": "^2.0.0",
"vue-codemirror": "^6.1.1", "vue-codemirror": "^6.1.1",
"vue-demi": "latest", "vue-demi": "latest",
"vue-draggable-plus": "^0.6.0",
"vue-i18n": "^9.13.1", "vue-i18n": "^9.13.1",
"vue-router": "^4.2.4", "vue-router": "^4.2.4",
"vue3-menus": "^1.1.2" "vue3-menus": "^1.1.2",
"vuedraggable": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@rushstack/eslint-patch": "^1.3.2", "@rushstack/eslint-patch": "^1.3.2",

1
ui/src/components/index.ts
View File

@ -25,7 +25,6 @@ import LogoIcon from './logo/LogoIcon.vue'
import SendIcon from './logo/SendIcon.vue' import SendIcon from './logo/SendIcon.vue'
import CodemirrorEditor from './codemirror-editor/index.vue' import CodemirrorEditor from './codemirror-editor/index.vue'
import ModelSelect from './model-select/index.vue' import ModelSelect from './model-select/index.vue'
export default { export default {
install(app: App) { install(app: App) {
app.component(AppIcon.name, AppIcon) app.component(AppIcon.name, AppIcon)

261
ui/src/workflow/nodes/condition-node/index.vue
View File

@ -8,130 +8,144 @@
ref="ConditionNodeFormRef" ref="ConditionNodeFormRef"
@submit.prevent @submit.prevent
> >
<template v-for="(item, index) in form_data.branch" :key="item.id"> <VueDraggable
<el-card ref="el"
v-resize="(wh: any) => resizeCondition(wh, item, index)" v-model="form_data.branch"
shadow="never" :disabled="form_data.branch === 2"
class="card-never mb-8" :filter="'.no-drag'"
style="--el-card-padding: 12px" handle=".handle"
> :animation="150"
<div class="flex-between lighter"> ghostClass="ghost"
{{ item.type }} @end="onEnd"
<div class="info" v-if="item.conditions.length > 1"> >
<span>{{ $t('views.applicationWorkflow.nodes.conditionNode.conditions.info') }}</span> <template v-for="(item, index) in form_data.branch" :key="item.id">
<el-select <el-card
:teleported="false" v-resize="(wh: any) => resizeCondition(wh, item, index)"
v-model="item.condition" shadow="never"
size="small" class="card-never mb-8"
style="width: 60px; margin: 0 8px" :class="{ 'no-drag': index === form_data.branch.length - 1 }"
> style="--el-card-padding: 12px"
<el-option :label="$t('views.applicationWorkflow.condition.AND')" value="and" /> >
<el-option :label="$t('views.applicationWorkflow.condition.OR')" value="or" /> <div class="handle flex-between lighter">
</el-select> {{ item.type }}
<span>{{ <div class="info" v-if="item.conditions.length > 1">
$t('views.applicationWorkflow.nodes.conditionNode.conditions.label') <span>{{
}}</span> $t('views.applicationWorkflow.nodes.conditionNode.conditions.info')
}}</span>
<el-select
:teleported="false"
v-model="item.condition"
size="small"
style="width: 60px; margin: 0 8px"
>
<el-option :label="$t('views.applicationWorkflow.condition.AND')" value="and" />
<el-option :label="$t('views.applicationWorkflow.condition.OR')" value="or" />
</el-select>
<span>{{
$t('views.applicationWorkflow.nodes.conditionNode.conditions.label')
}}</span>
</div>
</div> </div>
</div> <div v-if="index !== form_data.branch.length - 1" class="mt-8">
<div v-if="index !== form_data.branch.length - 1" class="mt-8"> <template v-for="(condition, cIndex) in item.conditions" :key="cIndex">
<template v-for="(condition, cIndex) in item.conditions" :key="cIndex"> <el-row :gutter="8">
<el-row :gutter="8"> <el-col :span="11">
<el-col :span="11"> <el-form-item
<el-form-item :prop="'branch.' + index + '.conditions.' + cIndex + '.field'"
:prop="'branch.' + index + '.conditions.' + cIndex + '.field'" :rules="{
:rules="{ type: 'array',
type: 'array', required: true,
required: true, message: $t('views.applicationWorkflow.variable.placeholder'),
message: $t('views.applicationWorkflow.variable.placeholder'), trigger: 'change'
trigger: 'change' }"
}" >
> <NodeCascader
<NodeCascader ref="nodeCascaderRef"
ref="nodeCascaderRef" :nodeModel="nodeModel"
:nodeModel="nodeModel" class="w-full"
class="w-full" :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
:placeholder="$t('views.applicationWorkflow.variable.placeholder')" v-model="condition.field"
v-model="condition.field" />
/> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="6">
<el-col :span="6"> <el-form-item
<el-form-item :prop="'branch.' + index + '.conditions.' + cIndex + '.compare'"
:prop="'branch.' + index + '.conditions.' + cIndex + '.compare'" :rules="{
:rules="{ required: true,
required: true, message: $t(
message: $t(
'views.applicationWorkflow.nodes.conditionNode.conditions.requiredMessage'
),
trigger: 'change'
}"
>
<el-select
@wheel="wheel"
:teleported="false"
v-model="condition.compare"
:placeholder="
$t(
'views.applicationWorkflow.nodes.conditionNode.conditions.requiredMessage' 'views.applicationWorkflow.nodes.conditionNode.conditions.requiredMessage'
),
trigger: 'change'
}"
>
<el-select
@wheel="wheel"
:teleported="false"
v-model="condition.compare"
:placeholder="
$t(
'views.applicationWorkflow.nodes.conditionNode.conditions.requiredMessage'
)
"
clearable
@change="changeCondition($event, index, cIndex)"
>
<template v-for="(item, index) in compareList" :key="index">
<el-option :label="item.label" :value="item.value" />
</template>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
v-if="
!['is_null', 'is_not_null', 'is_true', 'is_not_true'].includes(
condition.compare
) )
" "
clearable :prop="'branch.' + index + '.conditions.' + cIndex + '.value'"
@change="changeCondition($event, index, cIndex)" :rules="{
required: true,
message: $t('views.applicationWorkflow.nodes.conditionNode.valueMessage'),
trigger: 'blur'
}"
> >
<template v-for="(item, index) in compareList" :key="index"> <el-input
<el-option :label="item.label" :value="item.value" /> v-model="condition.value"
</template> :placeholder="
</el-select> $t('views.applicationWorkflow.nodes.conditionNode.valueMessage')
</el-form-item> "
</el-col> />
<el-col :span="6"> </el-form-item>
<el-form-item </el-col>
v-if=" <el-col :span="1">
!['is_null', 'is_not_null', 'is_true', 'is_not_true'].includes( <el-button
condition.compare :disabled="index === 0 && cIndex === 0"
) link
" type="info"
:prop="'branch.' + index + '.conditions.' + cIndex + '.value'" class="mt-4"
:rules="{ @click="deleteCondition(index, cIndex)"
required: true, >
message: $t('views.applicationWorkflow.nodes.conditionNode.valueMessage'), <el-icon><Delete /></el-icon>
trigger: 'blur' </el-button>
}" </el-col>
> </el-row>
<el-input </template>
v-model="condition.value" </div>
:placeholder="
$t('views.applicationWorkflow.nodes.conditionNode.valueMessage')
"
/>
</el-form-item>
</el-col>
<el-col :span="1">
<el-button
:disabled="index === 0 && cIndex === 0"
link
type="info"
class="mt-4"
@click="deleteCondition(index, cIndex)"
>
<el-icon><Delete /></el-icon>
</el-button>
</el-col>
</el-row>
</template>
</div>
<el-button <el-button
link link
type="primary" type="primary"
@click="addCondition(index)" @click="addCondition(index)"
v-if="index !== form_data.branch.length - 1" v-if="index !== form_data.branch.length - 1"
> >
<el-icon class="mr-4"><Plus /></el-icon> <el-icon class="mr-4"><Plus /></el-icon>
{{ $t('views.applicationWorkflow.nodes.conditionNode.addCondition') }} {{ $t('views.applicationWorkflow.nodes.conditionNode.addCondition') }}
</el-button> </el-button>
</el-card> </el-card>
</template> </template>
</VueDraggable>
<el-button link type="primary" @click="addBranch"> <el-button link type="primary" @click="addBranch">
<el-icon class="mr-4"><Plus /></el-icon> <el-icon class="mr-4"><Plus /></el-icon>
{{ $t('views.applicationWorkflow.nodes.conditionNode.addBranch') }} {{ $t('views.applicationWorkflow.nodes.conditionNode.addBranch') }}
@ -147,6 +161,7 @@ import type { FormInstance } from 'element-plus'
import { ref, computed, onMounted, nextTick } from 'vue' import { ref, computed, onMounted, nextTick } from 'vue'
import { randomId } from '@/utils/utils' import { randomId } from '@/utils/utils'
import { compareList } from '@/workflow/common/data' import { compareList } from '@/workflow/common/data'
import { type DraggableEvent, type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus'
const props = defineProps<{ nodeModel: any }>() const props = defineProps<{ nodeModel: any }>()
const form = { const form = {
@ -223,6 +238,16 @@ const validate = () => {
}) })
} }
function onEnd(evt: DraggableEvent) {
const { oldIndex, newIndex, clonedData } = evt
if (oldIndex === undefined || newIndex === undefined) return
const list = cloneDeep(props.nodeModel.properties.node_data.branch)
list[newIndex].type = list[oldIndex].type
list[oldIndex].type = clonedData.type // 恢复原始 type
set(props.nodeModel.properties.node_data, 'branch', list)
}
function addBranch() { function addBranch() {
const list = cloneDeep(props.nodeModel.properties.node_data.branch) const list = cloneDeep(props.nodeModel.properties.node_data.branch)
const obj = { const obj = {