mirror of
https://github.com/1Panel-dev/MaxKB.git
synced 2025-12-25 17:22:55 +00:00
feat: The workflow condition node supports drag and drop sorting (#2648)
This commit is contained in:
wangdan-fit2cloud
GitHub
parent
76d050bea4
commit
23b47657c0
|
|
@ -50,9 +50,11 @@
|
|||
"vue-clipboard3": "^2.0.0",
|
||||
"vue-codemirror": "^6.1.1",
|
||||
"vue-demi": "latest",
|
||||
"vue-draggable-plus": "^0.6.0",
|
||||
"vue-i18n": "^9.13.1",
|
||||
"vue-router": "^4.2.4",
|
||||
"vue3-menus": "^1.1.2"
|
||||
"vue3-menus": "^1.1.2",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.3.2",
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@ import LogoIcon from './logo/LogoIcon.vue'
|
|||
import SendIcon from './logo/SendIcon.vue'
|
||||
import CodemirrorEditor from './codemirror-editor/index.vue'
|
||||
import ModelSelect from './model-select/index.vue'
|
||||
|
||||
export default {
|
||||
install(app: App) {
|
||||
app.component(AppIcon.name, AppIcon)
|
||||
|
|
|
|||
|
|
@ -8,130 +8,144 @@
|
|||
ref="ConditionNodeFormRef"
|
||||
@submit.prevent
|
||||
>
|
||||
<template v-for="(item, index) in form_data.branch" :key="item.id">
|
||||
<el-card
|
||||
v-resize="(wh: any) => resizeCondition(wh, item, index)"
|
||||
shadow="never"
|
||||
class="card-never mb-8"
|
||||
style="--el-card-padding: 12px"
|
||||
>
|
||||
<div class="flex-between lighter">
|
||||
{{ item.type }}
|
||||
<div class="info" v-if="item.conditions.length > 1">
|
||||
<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>
|
||||
<VueDraggable
|
||||
ref="el"
|
||||
v-model="form_data.branch"
|
||||
:disabled="form_data.branch === 2"
|
||||
:filter="'.no-drag'"
|
||||
handle=".handle"
|
||||
:animation="150"
|
||||
ghostClass="ghost"
|
||||
@end="onEnd"
|
||||
>
|
||||
<template v-for="(item, index) in form_data.branch" :key="item.id">
|
||||
<el-card
|
||||
v-resize="(wh: any) => resizeCondition(wh, item, index)"
|
||||
shadow="never"
|
||||
class="card-never mb-8"
|
||||
:class="{ 'no-drag': index === form_data.branch.length - 1 }"
|
||||
style="--el-card-padding: 12px"
|
||||
>
|
||||
<div class="handle flex-between lighter">
|
||||
{{ item.type }}
|
||||
<div class="info" v-if="item.conditions.length > 1">
|
||||
<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 v-if="index !== form_data.branch.length - 1" class="mt-8">
|
||||
<template v-for="(condition, cIndex) in item.conditions" :key="cIndex">
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="11">
|
||||
<el-form-item
|
||||
:prop="'branch.' + index + '.conditions.' + cIndex + '.field'"
|
||||
:rules="{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: $t('views.applicationWorkflow.variable.placeholder'),
|
||||
trigger: 'change'
|
||||
}"
|
||||
>
|
||||
<NodeCascader
|
||||
ref="nodeCascaderRef"
|
||||
:nodeModel="nodeModel"
|
||||
class="w-full"
|
||||
:placeholder="$t('views.applicationWorkflow.variable.placeholder')"
|
||||
v-model="condition.field"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item
|
||||
:prop="'branch.' + index + '.conditions.' + cIndex + '.compare'"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: $t(
|
||||
'views.applicationWorkflow.nodes.conditionNode.conditions.requiredMessage'
|
||||
),
|
||||
trigger: 'change'
|
||||
}"
|
||||
>
|
||||
<el-select
|
||||
@wheel="wheel"
|
||||
:teleported="false"
|
||||
v-model="condition.compare"
|
||||
:placeholder="
|
||||
$t(
|
||||
<div v-if="index !== form_data.branch.length - 1" class="mt-8">
|
||||
<template v-for="(condition, cIndex) in item.conditions" :key="cIndex">
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="11">
|
||||
<el-form-item
|
||||
:prop="'branch.' + index + '.conditions.' + cIndex + '.field'"
|
||||
:rules="{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: $t('views.applicationWorkflow.variable.placeholder'),
|
||||
trigger: 'change'
|
||||
}"
|
||||
>
|
||||
<NodeCascader
|
||||
ref="nodeCascaderRef"
|
||||
:nodeModel="nodeModel"
|
||||
class="w-full"
|
||||
:placeholder="$t('views.applicationWorkflow.variable.placeholder')"
|
||||
v-model="condition.field"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item
|
||||
:prop="'branch.' + index + '.conditions.' + cIndex + '.compare'"
|
||||
:rules="{
|
||||
required: true,
|
||||
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'
|
||||
)
|
||||
"
|
||||
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
|
||||
@change="changeCondition($event, index, cIndex)"
|
||||
:prop="'branch.' + index + '.conditions.' + cIndex + '.value'"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: $t('views.applicationWorkflow.nodes.conditionNode.valueMessage'),
|
||||
trigger: 'blur'
|
||||
}"
|
||||
>
|
||||
<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
|
||||
)
|
||||
"
|
||||
:prop="'branch.' + index + '.conditions.' + cIndex + '.value'"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: $t('views.applicationWorkflow.nodes.conditionNode.valueMessage'),
|
||||
trigger: 'blur'
|
||||
}"
|
||||
>
|
||||
<el-input
|
||||
v-model="condition.value"
|
||||
: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-input
|
||||
v-model="condition.value"
|
||||
: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
|
||||
link
|
||||
type="primary"
|
||||
@click="addCondition(index)"
|
||||
v-if="index !== form_data.branch.length - 1"
|
||||
>
|
||||
<el-icon class="mr-4"><Plus /></el-icon>
|
||||
{{ $t('views.applicationWorkflow.nodes.conditionNode.addCondition') }}
|
||||
</el-button>
|
||||
</el-card>
|
||||
</template>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="addCondition(index)"
|
||||
v-if="index !== form_data.branch.length - 1"
|
||||
>
|
||||
<el-icon class="mr-4"><Plus /></el-icon>
|
||||
{{ $t('views.applicationWorkflow.nodes.conditionNode.addCondition') }}
|
||||
</el-button>
|
||||
</el-card>
|
||||
</template>
|
||||
</VueDraggable>
|
||||
<el-button link type="primary" @click="addBranch">
|
||||
<el-icon class="mr-4"><Plus /></el-icon>
|
||||
{{ $t('views.applicationWorkflow.nodes.conditionNode.addBranch') }}
|
||||
|
|
@ -147,6 +161,7 @@ import type { FormInstance } from 'element-plus'
|
|||
import { ref, computed, onMounted, nextTick } from 'vue'
|
||||
import { randomId } from '@/utils/utils'
|
||||
import { compareList } from '@/workflow/common/data'
|
||||
import { type DraggableEvent, type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus'
|
||||
|
||||
const props = defineProps<{ nodeModel: any }>()
|
||||
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() {
|
||||
const list = cloneDeep(props.nodeModel.properties.node_data.branch)
|
||||
const obj = {
|
||||
|
|
|
|||
Loading…
Reference in New Issue