feat: 更改流程
This commit is contained in:
parent
ec2d020ae8
commit
fcdb5b05af
@ -13,45 +13,42 @@ export const getInput = (nodeId, isStrict = true) => {
|
||||
|
||||
if (flag) {
|
||||
const arr = []
|
||||
const filterNodes = ['sleep', 'stopLoop', 'subEnd', 'subStart', 'branch', 'end']
|
||||
data.nodes.forEach(item => {
|
||||
if (item.id === nodeId) {
|
||||
return
|
||||
}
|
||||
|
||||
if (item.properties.inputParams) {
|
||||
const obj = {
|
||||
value: item.id,
|
||||
label: item.properties.name,
|
||||
type: 'input',
|
||||
children: []
|
||||
}
|
||||
const optionData = transformTree(item.properties.inputParams, obj.children, 'input')
|
||||
obj.children.push(optionData)
|
||||
arr.push(obj)
|
||||
}
|
||||
if (item.properties.nodeParams) {
|
||||
const obj = {
|
||||
value: item.id,
|
||||
label: item.properties.name + '（输入）',
|
||||
type: 'input',
|
||||
children: []
|
||||
}
|
||||
const optionData = transformTree(item.properties.nodeParams, obj.children, 'input')
|
||||
obj.children.push(optionData)
|
||||
arr.push(obj)
|
||||
if (filterNodes.includes(item.type)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (item.properties.outputParams) {
|
||||
const obj = {
|
||||
const obj = {
|
||||
value: item.id,
|
||||
label: item.properties.name + '（输出）',
|
||||
type: 'output',
|
||||
children: []
|
||||
label: item.properties.name,
|
||||
children: [{
|
||||
value: 'input',
|
||||
label: '输入',
|
||||
type: 'input',
|
||||
children: []
|
||||
}, {
|
||||
value: 'output',
|
||||
label: '输出',
|
||||
type: 'output',
|
||||
children: []
|
||||
}]
|
||||
}
|
||||
const optionData = transformTree(item.properties.outputParams, obj.children, 'output')
|
||||
obj.children.push(optionData)
|
||||
arr.push(obj)
|
||||
|
||||
if (item.properties.inputParams) {
|
||||
transformTree(item.properties.inputParams, obj.children[0].children, 'input')
|
||||
}
|
||||
if (item.properties.nodeParams) {
|
||||
transformTree(item.properties.nodeParams, obj.children[0].children, 'input')
|
||||
}
|
||||
if (item.properties.outputParams) {
|
||||
transformTree(item.properties.outputParams, obj.children[1].children, 'output')
|
||||
}
|
||||
arr.push(obj)
|
||||
})
|
||||
return arr
|
||||
}
|
||||
|
||||
@ -1,143 +1,143 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="props.drawer"
|
||||
title="试运行"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
style="max-width: 600px"
|
||||
:model="{ tableData }"
|
||||
:rules="rules"
|
||||
label-width="auto"
|
||||
>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%; margin-bottom: 20px"
|
||||
row-key="name"
|
||||
default-expand-all
|
||||
>
|
||||
<el-table-column prop="name" label="入参名称">
|
||||
<template #default="{row}">
|
||||
<span>{{ row.name }}</span>
|
||||
<span v-if="row.required" style="color: #f56c6c; margin-left: 8px;">*</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="入参类型">
|
||||
<template #default="scope">
|
||||
<el-tag>{{ scope.row.type }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="value" label="入参值">
|
||||
<template #default="{ row, column, $index }">
|
||||
<el-form-item v-if="row.name === 'terminalId'" label="" :prop="`tableData${row.propPath}value`" :rules="row.required ? [{ required: true, message: '请输入变量名', trigger: 'blur' }] : []">
|
||||
<el-select v-model="row.value" style="width: 200px">
|
||||
<el-option
|
||||
v-for="item in terminalIdOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-else-if="row.type !== 'object' && !row.type.includes('array')" label="" :prop="`tableData${row.propPath}value`" :rules="row.required ? [{ required: true, message: '请输入变量名', trigger: 'blur' }] : []">
|
||||
<el-input v-if="row.type === 'string'" v-model="row.value" />
|
||||
<el-input-number v-if="row.type === 'number'" :controls="false" v-model="row.value" />
|
||||
<el-switch v-if="row.type === 'boolean'" v-model="row.value" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">关闭</el-button>
|
||||
<el-button type="primary" @click="confirm">确定</el-button>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, watch, onUnmounted } from 'vue'
|
||||
import { getStartNodeFormData, formatTableData } from '@/utils/flow'
|
||||
// import { Plus, Minus } from '@element-plus/icons-vue'
|
||||
import { flowExecuteTrial } from '@/api/device/flow'
|
||||
import { emitter } from '@/utils/eventBus';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import {listTerminal} from "@/api/device/terminal.js";
|
||||
|
||||
const props = defineProps({
|
||||
drawer: Boolean,
|
||||
flowId: String
|
||||
})
|
||||
|
||||
const ruleFormRef = ref()
|
||||
const rules = ref({});
|
||||
const tableData = ref([])
|
||||
|
||||
const emits = defineEmits(['close', 'changeState'])
|
||||
|
||||
const handleClose = () => {
|
||||
ruleFormRef.value.resetFields()
|
||||
emits('close')
|
||||
}
|
||||
|
||||
watch(() => props.drawer,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
const data = getStartNodeFormData()
|
||||
tableData.value = data
|
||||
handleGetTerminalGroup()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const confirm = () => {
|
||||
lf.fitView()
|
||||
ruleFormRef.value.validate().then(async () => {
|
||||
const formData = formatTableData(tableData.value)
|
||||
const { nodes } = lf.getGraphData()
|
||||
nodes.forEach(item => {
|
||||
emitter.emit('contentChange', { id: item.id})
|
||||
})
|
||||
|
||||
const flowData = JSON.stringify(lf.getGraphData())
|
||||
const res = await flowExecuteTrial({
|
||||
flowData,
|
||||
itemId: props.flowId,
|
||||
runParams: {
|
||||
...formData
|
||||
}
|
||||
})
|
||||
if (res.code === 200) {
|
||||
emits('changeState', {
|
||||
type: 'testRunning',
|
||||
instId: res.msg
|
||||
})
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
|
||||
const terminalIdOptions = ref([])
|
||||
|
||||
/** 获取设备终端列表 */
|
||||
const handleGetTerminalGroup = async (row) => {
|
||||
const res = await listTerminal({ pageNum: 1, pageSize: 1000 })
|
||||
if (res.code === 200) {
|
||||
terminalIdOptions.value = res.rows?.map((item) => {
|
||||
return {
|
||||
label: `${item.name}(${item.host}:${item.port})`,
|
||||
value: item.id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off('contentChange')
|
||||
})
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="props.drawer"
|
||||
title="试运行"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
style="max-width: 600px"
|
||||
:model="{ tableData }"
|
||||
:rules="rules"
|
||||
label-width="auto"
|
||||
>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%; margin-bottom: 20px"
|
||||
row-key="name"
|
||||
default-expand-all
|
||||
>
|
||||
<el-table-column prop="name" label="入参名称">
|
||||
<template #default="{row}">
|
||||
<span>{{ row.name }}</span>
|
||||
<span v-if="row.required" style="color: #f56c6c; margin-left: 8px;">*</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="入参类型">
|
||||
<template #default="scope">
|
||||
<el-tag>{{ scope.row.type }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="value" label="入参值">
|
||||
<template #default="{ row, column, $index }">
|
||||
<el-form-item v-if="row.name === 'terminalId'" label="" :prop="`tableData${row.propPath}value`" :rules="row.required ? [{ required: true, message: '请输入变量名', trigger: 'blur' }] : []">
|
||||
<el-select v-model="row.value" style="width: 200px">
|
||||
<el-option
|
||||
v-for="item in terminalIdOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-else-if="row.type !== 'object' && !row.type.includes('array')" label="" :prop="`tableData${row.propPath}value`" :rules="row.required ? [{ required: true, message: '请输入变量名', trigger: 'blur' }] : []">
|
||||
<el-input v-if="row.type === 'string'" v-model="row.value" />
|
||||
<el-input-number v-if="row.type === 'number'" :controls="false" v-model="row.value" />
|
||||
<el-switch v-if="row.type === 'boolean'" v-model="row.value" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">关闭</el-button>
|
||||
<el-button type="primary" @click="confirm">确定</el-button>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, watch, onUnmounted } from 'vue'
|
||||
import { getStartNodeFormData, formatTableData } from '@/utils/flow'
|
||||
// import { Plus, Minus } from '@element-plus/icons-vue'
|
||||
import { flowExecuteTrial } from '@/api/device/flow'
|
||||
import { emitter } from '@/utils/eventBus';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import {listTerminal} from "@/api/device/terminal.js";
|
||||
|
||||
const props = defineProps({
|
||||
drawer: Boolean,
|
||||
flowId: String
|
||||
})
|
||||
|
||||
const ruleFormRef = ref()
|
||||
const rules = ref({});
|
||||
const tableData = ref([])
|
||||
|
||||
const emits = defineEmits(['close', 'changeState'])
|
||||
|
||||
const handleClose = () => {
|
||||
ruleFormRef.value.resetFields()
|
||||
emits('close')
|
||||
}
|
||||
|
||||
watch(() => props.drawer,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
const data = getStartNodeFormData()
|
||||
tableData.value = data
|
||||
handleGetTerminalGroup()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const confirm = () => {
|
||||
lf.fitView()
|
||||
ruleFormRef.value.validate().then(async () => {
|
||||
const formData = formatTableData(tableData.value)
|
||||
const { nodes } = lf.getGraphData()
|
||||
nodes.forEach(item => {
|
||||
emitter.emit('contentChange', { id: item.id})
|
||||
})
|
||||
|
||||
const flowData = JSON.stringify(lf.getGraphData())
|
||||
const { terminalId, ...runParams } = formData
|
||||
const res = await flowExecuteTrial({
|
||||
flowData,
|
||||
itemId: props.flowId,
|
||||
terminalId,
|
||||
runParams
|
||||
})
|
||||
if (res.code === 200) {
|
||||
emits('changeState', {
|
||||
type: 'testRunning',
|
||||
instId: res.msg
|
||||
})
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
|
||||
const terminalIdOptions = ref([])
|
||||
|
||||
/** 获取设备终端列表 */
|
||||
const handleGetTerminalGroup = async (row) => {
|
||||
const res = await listTerminal({ pageNum: 1, pageSize: 1000 })
|
||||
if (res.code === 200) {
|
||||
terminalIdOptions.value = res.rows?.map((item) => {
|
||||
return {
|
||||
label: `${item.name}(${item.host}:${item.port})`,
|
||||
value: item.id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off('contentChange')
|
||||
})
|
||||
</script>
|
||||
@ -19,11 +19,6 @@ import audioSvg from './icon/audio.svg'
|
||||
|
||||
import { v4 as randomUUID } from 'uuid'
|
||||
|
||||
import { useFlowStore } from "@/store/modules/flow";
|
||||
|
||||
const flowStore = useFlowStore();
|
||||
|
||||
|
||||
export const lfConfig = {
|
||||
idGenerator: () => {
|
||||
// 生成标准UUID并移除连字符
|
||||
@ -308,7 +303,7 @@ export const collapseList = [
|
||||
name: "单次对话语料",
|
||||
type: "serviceNode",
|
||||
desc: "测试语料-单次对话语料处理",
|
||||
action: 'VI_CORPUS_WAKE',
|
||||
action: 'VI_CORPUS_SINGLE',
|
||||
outputType: 'json',
|
||||
nodeParams: [{ name: 'testCorpus', type: "input", input: "", disabled: true }],
|
||||
outputParams: [{ name: 'audioPath', type: 'string', desc: '语音路径', disabled: true}]
|
||||
|
||||
@ -93,9 +93,10 @@
|
||||
<el-cascader
|
||||
:ref="el => { if (el) cascaderRefs[index] = el }"
|
||||
v-model="property.quote"
|
||||
:checkStrictly="true"
|
||||
:options="quoteOptions"
|
||||
placeholder="请选择"
|
||||
@visible-change="visibleChange"
|
||||
@visible-change="(visible) => visibleChange(visible, index, property.quote)"
|
||||
@change="(value) => cascaderChange(value, index)"
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -217,7 +218,6 @@ const setNodeProperties = async () => {
|
||||
|
||||
if (result && flag) {
|
||||
const data = toRaw(formData);
|
||||
console.log('data', data)
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
...properties,
|
||||
@ -234,11 +234,28 @@ const nodeOperatingStatus = ref("NORMAL");
|
||||
const inputJsonData = ref({});
|
||||
const outputJsonData = ref({});
|
||||
|
||||
const visibleChange = (value) => {
|
||||
const visibleChange = (value, index, quote) => {
|
||||
if (value) {
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
const currentValue = [...quote];
|
||||
// 强制级联选择器重新处理选中值与选项的匹配
|
||||
if (cascaderRefs.value[index]) {
|
||||
// 等待DOM更新后再设置值，确保新options已生效
|
||||
setTimeout(() => {
|
||||
// 如果当前有选中值，重新设置一次以触发重新匹配
|
||||
if (currentValue.length) {
|
||||
formData.nodeParams[index].quote = [];
|
||||
// 确保响应式更新
|
||||
setTimeout(() => {
|
||||
formData.nodeParams[index].quote = currentValue;
|
||||
}, 0);
|
||||
}
|
||||
// 手动触发级联选择器的重新渲染
|
||||
// cascaderRefs.value[index].updatePopper();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,55 +1,115 @@
|
||||
<template>
|
||||
<div class="group__container" @mouseleave="setNodeProperties">
|
||||
<NodeTitle :icon="loop" :nodeId="props.model.id" :nodeProperties="props.properties" :nodeName="props.properties?.name || '循环'" nodeDesc="循环执行一系列任务，直至输出所有结果" />
|
||||
<NodeTitle
|
||||
:icon="loop"
|
||||
:nodeId="props.model.id"
|
||||
:nodeProperties="props.properties"
|
||||
:nodeName="props.properties?.name || '循环'"
|
||||
nodeDesc="循环执行一系列任务，直至输出所有结果"
|
||||
/>
|
||||
<div class="loop__container">
|
||||
<div>
|
||||
<el-form :inline="true" :model="formData" :rules="rules" ref="dynamicForm" label-position="top" label-width="auto" :disabled="flowStore.disableForm">
|
||||
<div v-for="(property, index) in formData.nodeParams" :key="index">
|
||||
<el-row v-if="property.name !== 'loopType'">
|
||||
<el-form-item :label="index === 0 ? '参数名' : ''" :prop="`nodeParams.${index}.name`" :rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]">
|
||||
<el-input :disabled="index === 0" v-model="property.name" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="index === 0 ? '参数值' : ''" :prop="`nodeParams.${index}.type`" >
|
||||
<el-select v-model="property.type" @change="handleTypeChange(index)">
|
||||
<el-option label="引用" value="quote" />
|
||||
<el-option label="输入" value="input" />
|
||||
</el-select>
|
||||
<el-form-item v-if="property.type === 'input'" :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.input`">
|
||||
<el-input-number v-model="property.input" :min="0" :controls="false" :step-strictly="true" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="property.type === 'quote'" :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.quote`">
|
||||
<el-cascader v-model="property.quote" :options="quoteOptions" placeholder="请选择" @visible-change="visibleChange"/>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row v-else>
|
||||
<el-form-item :label="index === 0 ? '参数名' : ''" :prop="`nodeParams.${index}.name`" :rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]">
|
||||
<el-input :disabled="index === 0" v-model="property.name" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="index === 0 ? '参数值' : ''" :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.input`" >
|
||||
<el-select v-model="property.input" @change="handleTypeChange(index)">
|
||||
<el-option label="普通" value="NORMAL" />
|
||||
<el-option label="单次和连续" value="MULTIPLE_CORPUS" />
|
||||
<el-option label="连续多条语料" value="CONTINUOUS_MULTIPLE_CORPUS" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="dynamicForm"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:disabled="flowStore.disableForm"
|
||||
>
|
||||
<div v-for="(property, index) in formData.nodeParams" :key="index">
|
||||
<el-row>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数名' : ''"
|
||||
:prop="`nodeParams.${index}.name`"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入参数名', trigger: 'blur' },
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
:disabled="index === 0"
|
||||
v-model="property.name"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数值' : ''"
|
||||
:prop="`nodeParams.${index}.type`"
|
||||
>
|
||||
<el-select
|
||||
v-model="property.type"
|
||||
@change="handleTypeChange(index)"
|
||||
>
|
||||
<el-option label="引用" value="quote" />
|
||||
<el-option label="输入" value="input" />
|
||||
</el-select>
|
||||
<el-form-item
|
||||
v-if="property.type === 'input'"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入参数值',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
:prop="`nodeParams.${index}.input`"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="property.input"
|
||||
:min="0"
|
||||
:controls="false"
|
||||
:step-strictly="true"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="property.type === 'quote'"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择参数值',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
:prop="`nodeParams.${index}.quote`"
|
||||
>
|
||||
<el-cascader
|
||||
:ref="
|
||||
(el) => {
|
||||
if (el) cascaderRefs[index] = el;
|
||||
}
|
||||
"
|
||||
v-model="property.quote"
|
||||
:checkStrictly="true"
|
||||
:options="quoteOptions"
|
||||
placeholder="请选择"
|
||||
@visible-change="
|
||||
(visible) => visibleChange(visible, index, property.quote)
|
||||
"
|
||||
@change="(value) => cascaderChange(value, index)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div>循环体</div>
|
||||
<div class="child__container" @drop="handleDrop" @dragover="handleDragover">
|
||||
<slot></slot>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import NodeTitle from '../../components/NodeTitle.vue'
|
||||
import loop from '../../icon/loop.svg'
|
||||
import { useFlowStore } from '@/store/modules/flow'
|
||||
import { addNewEdge, getInput } from '@/utils/flow'
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import NodeTitle from "../../components/NodeTitle.vue";
|
||||
import loop from "../../icon/loop.svg";
|
||||
import { useFlowStore } from "@/store/modules/flow";
|
||||
import { addNewEdge, getInput } from "@/utils/flow";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
@ -58,157 +118,179 @@ const props = defineProps({
|
||||
nowTime: Number,
|
||||
});
|
||||
|
||||
const flowStore = useFlowStore()
|
||||
const flowStore = useFlowStore();
|
||||
const formData = reactive({
|
||||
nodeParams: [
|
||||
{ name: "loopNum", type: "input", input: null, quote: "" },
|
||||
{ name: "loopType", type: "input", input: 'NORMAL', quote: "" },
|
||||
]
|
||||
})
|
||||
nodeParams: [{ name: "loopNum", type: "input", input: null, quote: "" }],
|
||||
});
|
||||
|
||||
const quoteOptions = ref([])
|
||||
const quoteOptions = ref([]);
|
||||
const handleTypeChange = (index) => {
|
||||
if (formData.nodeParams[index].type === 'input') {
|
||||
formData.nodeParams[index].quote = ""
|
||||
if (formData.nodeParams[index].type === "input") {
|
||||
formData.nodeParams[index].quote = "";
|
||||
} else {
|
||||
formData.nodeParams[index].input = null
|
||||
const option = getInput(props.model.id)
|
||||
formData.nodeParams[index].input = null;
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const rules = reactive({})
|
||||
const rules = reactive({});
|
||||
|
||||
const emits = defineEmits(['bindRef', 'addToGroup', 'contentChange'])
|
||||
const emits = defineEmits(["bindRef", "addToGroup", "contentChange"]);
|
||||
|
||||
const handleDragover = (e) => {
|
||||
e.preventDefault()
|
||||
}
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const handleDrop = (e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
let flowNode = e.dataTransfer.getData('flowNode');
|
||||
flowNode = JSON.parse(flowNode)
|
||||
const point = lf.getPointByClient(e.clientX, e.clientY)
|
||||
const { type, ...other } = flowNode
|
||||
const node = lf.addNode({
|
||||
type,
|
||||
x: point.canvasOverlayPosition.x,
|
||||
y: point.canvasOverlayPosition.y,
|
||||
properties: {
|
||||
parentId: props.model.id,
|
||||
...other
|
||||
}
|
||||
})
|
||||
let flowNode = e.dataTransfer.getData("flowNode");
|
||||
flowNode = JSON.parse(flowNode);
|
||||
const point = lf.getPointByClient(e.clientX, e.clientY);
|
||||
const { type, ...other } = flowNode;
|
||||
const node = lf.addNode({
|
||||
type,
|
||||
x: point.canvasOverlayPosition.x,
|
||||
y: point.canvasOverlayPosition.y,
|
||||
properties: {
|
||||
parentId: props.model.id,
|
||||
...other,
|
||||
},
|
||||
});
|
||||
|
||||
emits('addToGroup', node.id)
|
||||
setTimeout(() => {
|
||||
addNewEdge(props.model.id)
|
||||
}, 50)
|
||||
}
|
||||
emits("addToGroup", node.id);
|
||||
setTimeout(() => {
|
||||
addNewEdge(props.model.id);
|
||||
}, 50);
|
||||
};
|
||||
|
||||
const dynamicForm = ref()
|
||||
const dynamicForm = ref();
|
||||
|
||||
const setNodeProperties = async () => {
|
||||
try {
|
||||
const valid = await dynamicForm.value.validate()
|
||||
const valid = await dynamicForm.value.validate();
|
||||
if (valid) {
|
||||
const data = toRaw(formData)
|
||||
const data = toRaw(formData);
|
||||
setTimeout(() => {
|
||||
const properties = lf.getProperties(props.model.id)
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
window.lf.setProperties(props.model.id, {
|
||||
...properties,
|
||||
...data
|
||||
})
|
||||
}, 50)
|
||||
...data,
|
||||
});
|
||||
}, 50);
|
||||
}
|
||||
} catch (error) {
|
||||
dynamicForm.value.clearValidate()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
dynamicForm.value.clearValidate();
|
||||
}
|
||||
};
|
||||
|
||||
const visibleChange = (value) => {
|
||||
const visibleChange = async (value, index, quote) => {
|
||||
if (value) {
|
||||
const option = getInput(props.model.id)
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option
|
||||
quoteOptions.value = option;
|
||||
const currentValue = [...quote];
|
||||
// 强制级联选择器重新处理选中值与选项的匹配
|
||||
if (cascaderRefs.value[index]) {
|
||||
// 等待DOM更新后再设置值，确保新options已生效
|
||||
setTimeout(() => {
|
||||
// 如果当前有选中值，重新设置一次以触发重新匹配
|
||||
if (currentValue.length) {
|
||||
formData.nodeParams[index].quote = [];
|
||||
// 确保响应式更新
|
||||
setTimeout(() => {
|
||||
console.log(1247);
|
||||
formData.nodeParams[index].quote = currentValue;
|
||||
}, 0);
|
||||
}
|
||||
// 手动触发级联选择器的重新渲染
|
||||
// cascaderRefs.value[index].updatePopper();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cascaderRefs = ref([]);
|
||||
const cascaderChange = (value, index) => {
|
||||
const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
|
||||
formData.nodeParams[index].quote = value;
|
||||
formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.properties,
|
||||
() => {
|
||||
if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
|
||||
formData.nodeParams = props.properties.nodeParams
|
||||
const option = getInput(props.model.id)
|
||||
formData.nodeParams = props.properties.nodeParams;
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
deep: true,
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
emits('bindRef', dynamicForm.value)
|
||||
})
|
||||
|
||||
emits("bindRef", dynamicForm.value);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.group__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 420px;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
cursor: default;
|
||||
border-radius: 12px;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 5px 15px 0#00000008;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 420px;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
cursor: default;
|
||||
border-radius: 12px;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 5px 15px 0#00000008;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
height: 40px;
|
||||
.title {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
:deep(.loop__container) {
|
||||
height: auto;
|
||||
|
||||
.el-input {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
:deep(.loop__container) {
|
||||
height: auto;
|
||||
|
||||
.el-input {
|
||||
width: 92px;
|
||||
}
|
||||
|
||||
.el-input-number {
|
||||
width: 92px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 92px;
|
||||
}
|
||||
|
||||
.el-cascader {
|
||||
width: 92px;
|
||||
}
|
||||
.el-input-number {
|
||||
width: 92px;
|
||||
}
|
||||
|
||||
.child__container {
|
||||
min-height: 100px;
|
||||
flex: 1;
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 8px;
|
||||
.el-select {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
align-items: end;
|
||||
}
|
||||
.el-cascader {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.child__container {
|
||||
min-height: 100px;
|
||||
flex: 1;
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
align-items: end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user