auto-solution/modeler/src/views/decision/designer/properties.vue

<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>