UPDATE: VERSION-20260314
This commit is contained in:
270
modeler/src/views/decision/designer/properties.vue
Normal file
270
modeler/src/views/decision/designer/properties.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<div class="ks-model-builder-right">
|
||||
<template v-if="currentElement || tree">
|
||||
|
||||
<a-tabs v-model:activeKey="activeTopTabsKey" class="ks-model-builder-tabs settings-tab">
|
||||
<template #leftExtra>
|
||||
<span class="ks-model-builder-title-icon icon-input"></span>
|
||||
</template>
|
||||
|
||||
<a-tab-pane v-if="tree" key="1" tab="行为树属性">
|
||||
<a-form
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
name="basic"
|
||||
style="padding-bottom:15px;"
|
||||
>
|
||||
<a-form-item label="行为树名称">
|
||||
<a-input v-model:value="tree.name" placeholder="行为树名称" size="small" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="行为树英文名称">
|
||||
<a-input v-model:value="tree.englishName" placeholder="行为树英文名称" size="small" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="行为树说明">
|
||||
<a-textarea v-model:value="tree.description" placeholder="行为树说明" size="small" />
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane v-if="currentElement" key="2" tab="节点属性">
|
||||
<a-form
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
name="basic"
|
||||
style="padding-bottom:15px;"
|
||||
>
|
||||
<a-form-item label="节点名称">
|
||||
<a-input v-model:value="currentElement.name" :placeholder="currentElement.name" size="small" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="节点介绍">
|
||||
<a-textarea v-model:value="currentElement.description" :placeholder="currentElement.description" size="small" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="排序">
|
||||
<a-input-number style="width:100%;" v-model:value="currentElement.order" size="small" />
|
||||
</a-form-item>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<a-form-item label="输入">
|
||||
<a-textarea v-model:value="currentElement.inputs" size="small" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="输出">
|
||||
<a-textarea v-model:value="currentElement.outputs" size="small" />
|
||||
</a-form-item>
|
||||
|
||||
<!-- <a-divider v-if="currentElement.settings && currentElement.parameters.length > 0" />-->
|
||||
|
||||
<!-- <a-form-item v-for="setting in currentElement.parameters" :label="setting.description">-->
|
||||
<!-- <a-input-number v-if="setting.dataType === 'double'" v-model:value="setting.defaultValue" :placeholder="setting.description" size="small" style="width:100%;" />-->
|
||||
<!-- <a-input v-else v-model:value="setting.defaultValue" :placeholder="setting.description" size="small" />-->
|
||||
<!-- </a-form-item>-->
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
|
||||
</a-tabs>
|
||||
|
||||
<a-tabs v-if="currentElement" v-model:activeKey="activeBottomTabsKey" class="ks-model-builder-tabs parameters-tabs">
|
||||
<template #leftExtra>
|
||||
<span class="ks-model-builder-title-icon icon-input"></span>
|
||||
</template>
|
||||
<a-tab-pane key="1" tab="节点变量">
|
||||
<a-form
|
||||
v-if="currentElement.parameters && currentElement.parameters.length > 0"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
name="basic"
|
||||
style="padding-bottom:15px;"
|
||||
>
|
||||
<a-form-item v-for="setting in currentElement.parameters" :label="setting.description">
|
||||
<a-input-number v-if="setting.dataType === 'double'" v-model:value="setting.defaultValue" :placeholder="setting.description" size="small" style="width:100%;" />
|
||||
<a-input v-else v-model:value="setting.defaultValue" :placeholder="setting.description" size="small" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-empty v-else>
|
||||
|
||||
</a-empty>
|
||||
<!-- <div class="w-full">-->
|
||||
<!-- <a-space>-->
|
||||
<!-- <a-button size="small" type="primary" @click="addVariable">添加</a-button>-->
|
||||
<!-- </a-space>-->
|
||||
<!-- <a-table-->
|
||||
<!-- :columns="actionSpaceColumns"-->
|
||||
<!-- :dataSource="currentElement.variables"-->
|
||||
<!-- :pagination="false"-->
|
||||
<!-- :scroll="{ x: 500 }"-->
|
||||
<!-- class="mt-1"-->
|
||||
<!-- row-key="key"-->
|
||||
<!-- size="small"-->
|
||||
<!-- style="overflow-y:auto;height:35vh;"-->
|
||||
<!-- >-->
|
||||
<!-- <template #bodyCell="{column, record, index}">-->
|
||||
<!-- <template v-if="column.dataIndex === 'index'">-->
|
||||
<!-- {{ index + 1 }}-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-else-if="column.dataIndex === '_actions'">-->
|
||||
<!-- <a-button-->
|
||||
<!-- class="btn-link-delete"-->
|
||||
<!-- danger-->
|
||||
<!-- size="small"-->
|
||||
<!-- type="text"-->
|
||||
<!-- @click="()=> removeVariable(record)"-->
|
||||
<!-- >-->
|
||||
<!-- 删除-->
|
||||
<!-- </a-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-else>-->
|
||||
<!-- <a-input v-model:value="record[column.dataIndex]" size="small" />-->
|
||||
<!-- </template>-->
|
||||
<!-- </template>-->
|
||||
<!-- </a-table>-->
|
||||
<!-- </div>-->
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
</template>
|
||||
|
||||
<a-tabs v-else :activeKey="'0'" class="ks-model-builder-tabs parameters-tabs empty">
|
||||
<template #leftExtra>
|
||||
<span class="ks-model-builder-title-icon icon-input"></span>
|
||||
</template>
|
||||
<a-tab-pane :key="'0'" tab="请选择或者创建决策树">
|
||||
<a-empty>
|
||||
<template #description>
|
||||
请选择或者创建决策树
|
||||
</template>
|
||||
</a-empty>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, type PropType, ref, watch } from 'vue';
|
||||
import { CheckOutlined } from '@ant-design/icons-vue';
|
||||
import type { ElementVariable, GraphTaskElement } from '../builder/element';
|
||||
import type { BehaviorTree } from '../types';
|
||||
import type { Graph, Node, NodeProperties } from '@antv/x6';
|
||||
import { generateKey } from '@/utils/strings';
|
||||
|
||||
const actionSpaceColumns = [
|
||||
{ title: '序号', dataIndex: 'index', key: 'index', width: 40 },
|
||||
{ title: '变量名', dataIndex: 'name', key: 'name', width: 80 },
|
||||
{ title: '参数值', dataIndex: 'value', key: 'value', width: 80 },
|
||||
{ title: '单位', dataIndex: 'unit', key: 'unit', width: 80 },
|
||||
{ title: '操作', dataIndex: '_actions', key: '_actions', width: 60 },
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
components: { CheckOutlined },
|
||||
props: {
|
||||
tree: { type: [Object, null] as PropType<BehaviorTree | null | undefined>, required: false },
|
||||
treeEditing: { type: Boolean as PropType<boolean>, required: true, default: false },
|
||||
node: { type: [Object, null] as PropType<Node<NodeProperties> | null | undefined>, required: false },
|
||||
graph: { type: [Object, null] as PropType<Graph | null | undefined>, required: true },
|
||||
},
|
||||
emits: ['update-element', 'update-tree'],
|
||||
setup(props, { emit }) {
|
||||
const activeTopTabsKey = ref<string>('1');
|
||||
const activeBottomTabsKey = ref<string>('1');
|
||||
const activeBottomTabs2Key = ref<string>('1');
|
||||
|
||||
const currentTree = ref<BehaviorTree | null>(props.tree ?? null);
|
||||
const treeEditing = ref<boolean>(props.treeEditing);
|
||||
const currentNode = ref<Node | null>(props.node ?? null);
|
||||
const currentElement = ref<GraphTaskElement | null>(null);
|
||||
|
||||
const load = () => {
|
||||
};
|
||||
|
||||
const resolveNode = (n?: Node | null | undefined) => {
|
||||
currentNode.value = n ?? null;
|
||||
if (n) {
|
||||
const data = n.getData();
|
||||
currentElement.value = JSON.parse(JSON.stringify(data || {})) as GraphTaskElement;
|
||||
} else {
|
||||
currentElement.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const addVariable = () => {
|
||||
if (!currentElement.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!currentElement.value.variables) {
|
||||
currentElement.value.variables = [];
|
||||
}
|
||||
currentElement.value?.variables.push({
|
||||
key: generateKey('variable'),
|
||||
name: null,
|
||||
value: null,
|
||||
defaults: null,
|
||||
unit: null,
|
||||
});
|
||||
};
|
||||
|
||||
const removeVariable = (row: ElementVariable) => {
|
||||
if (currentElement.value && currentElement.value.variables) {
|
||||
const filteredVars = currentElement.value.variables.filter(v => v.key !== row.key);
|
||||
currentElement.value.variables = [...filteredVars];
|
||||
}
|
||||
};
|
||||
|
||||
const updateNode = () => {
|
||||
if (currentNode.value && currentElement.value) {
|
||||
// 深拷贝当前元素数据
|
||||
const newElement = JSON.parse(JSON.stringify(currentElement.value)) as GraphTaskElement;
|
||||
// 更新节点数据
|
||||
currentNode.value.replaceData(newElement);
|
||||
// 触发事件通知父组件
|
||||
emit('update-element', newElement);
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.node,
|
||||
(n?: Node | null | undefined) => resolveNode(n),
|
||||
{ deep: true, immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.tree,
|
||||
(n?: BehaviorTree | null | undefined) => {
|
||||
currentTree.value = n ?? null;
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.treeEditing,
|
||||
(n?: boolean | null | undefined) => {
|
||||
treeEditing.value = n === true;
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
);
|
||||
|
||||
watch(() => currentElement.value, () => updateNode(), { deep: true });
|
||||
|
||||
onMounted(() => load());
|
||||
|
||||
return {
|
||||
actionSpaceColumns,
|
||||
activeTopTabsKey,
|
||||
activeBottomTabsKey,
|
||||
activeBottomTabs2Key,
|
||||
currentElement,
|
||||
addVariable,
|
||||
removeVariable,
|
||||
currentTree,
|
||||
treeEditing,
|
||||
// currentElementParameters,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user