platform/io.sc.engine.rule.frontend/src/views/resources/designer/DecisionTreeDialog.vue

<template>
  <div>
    <w-dialog ref="dialogRef" :title="$t('re.processor.dialog.decisionTree.title')" :can-maximize="false" :maximized="true" body-padding="0px 2px 2px 2px">
      <w-graph v-model="modelValueRef" :vertex-defines="vertexDefines" :edge-defines="edgeDefines" @save="save"></w-graph>
    </w-dialog>
    <SelectResourceDialog ref="selectResourceDialogRef" @after-selected="afterSelectResourceSelected"></SelectResourceDialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { $t, axios, Environment, NotifyManager, Tools } from 'platform-core';
import { AutoCompletionManager } from '@/views/shared/AutoCompletionManager';
import { UserDefinedFunctionsManager } from '@/views/shared/UserDefinedFunctionsManager';
import { PlaceHolder } from '@/utils/PlaceHolder';
import { EngineEnums } from '@/views/shared/enums/EngineEnums';
import SelectResourceDialog from '@/views/shared/SelectResourceDialog.vue';

const dialogRef = ref();
const processorIdRef = ref();
const modelValueRef = ref();

const autoCompletionManager = new AutoCompletionManager();
const userDefinedFunctionsManager = new UserDefinedFunctionsManager();
const resourceAbstractsRef = ref();
const selectResourceDialogRef = ref();

const edgeDefines = [
  {
    type: 'EdgeConditionBranch',
    fromVertexType: 'Condition',
    toVertexType: null,
    getLabel: (value: any) => {
      return value.value || '';
    },
    getValue: (dom: any) => {
      if (dom) {
        return {
          valueType: dom.getAttribute('valueType') || '',
          value: dom.getAttribute('value') || '',
          commands: dom.getAttribute('commands') || '',
        };
      } else {
        return {
          valueType: 'java.lang.String',
          value: '',
          commands: '',
        };
      }
    },
    getFormFields: () => {
      return [
        {
          name: 'valueType',
          label: $t('re.graph.edge.conditionBranch.entity.valueType'),
          type: 'w-select',
          options: [
            { label: $t('java.lang.String'), value: 'java.lang.String' },
            { label: $t('java.lang.Boolean'), value: 'java.lang.Boolean' },
            { label: $t('java.math.BigDecimal'), value: 'java.math.BigDecimal' },
          ],
        },
        {
          name: 'value',
          label: $t('re.graph.edge.conditionBranch.entity.value'),
          type: 'w-text',
        },
        {
          name: 'commands',
          label: $t('re.graph.edge.conditionBranch.entity.commands'),
          type: 'w-code-mirror',
          lang: 'java',
          rows: 10,
          placeholder: true,
          lineWrap: true,
          lineBreak: true,
          autoCompletion: autoCompletionManager.autoCompletion(),
          userDefinedFunctions: userDefinedFunctionsManager.userDefinedFunctions(),
        },
      ];
    },
  },
];

const vertexDefines = [
  {
    type: 'Start',
    thumbnail: {
      shape: 'ellipse',
      label: $t('re.graph.vertex.start.label'),
      title: $t('re.graph.vertex.start.title'),
      rx: 8,
      ry: 8,
      strokeColor: 'black',
      strokeWidth: 1,
    },
    cell: {
      shape: 'ellipse',
      size: [50, 50],
    },
    getLabel: (value: any) => {
      return value.label;
    },
    getValue: (dom: any) => {
      if (dom) {
        return {
          label: dom.getAttribute('label') || '',
        };
      } else {
        return { label: $t('re.graph.vertex.start.label') };
      }
    },
    getFormFields: () => {
      return [
        {
          name: 'label',
          label: $t('description'),
          type: 'w-text',
        },
      ];
    },
  },
  {
    type: 'Condition',
    thumbnail: {
      shape: 'rhombus',
      label: $t('re.graph.vertex.condition.label'),
      title: $t('re.graph.vertex.condition.title'),
      strokeColor: 'black',
      strokeWidth: 1,
    },
    cell: {
      shape: 'rhombus',
      size: [120, 60],
    },
    getLabel: (value: any) => {
      return value.label || '';
    },
    getValue: (dom: any) => {
      if (dom) {
        return {
          label: dom.getAttribute('label') || '',
          condition: dom.getAttribute('condition') || '',
        };
      } else {
        return {
          label: '',
          condition: '',
        };
      }
    },
    getFormFields: () => {
      return [
        {
          name: 'label',
          label: $t('title'),
          type: 'w-text',
          requiredIf: true,
        },
        {
          name: 'condition',
          label: $t('re.graph.vertex.condition.entity.condition'),
          type: 'w-code-mirror',
          lang: 'java',
          rows: 10,
          placeholder: true,
          lineWrap: true,
          lineBreak: false,
          autoCompletion: autoCompletionManager.autoCompletion(),
          userDefinedFunctions: userDefinedFunctionsManager.userDefinedFunctions(),
        },
      ];
    },
  },
  {
    type: 'Expression',
    thumbnail: {
      shape: 'rectangle',
      label: $t('re.graph.vertex.expression.label'),
      title: $t('re.graph.vertex.expression.title'),
      strokeColor: 'black',
      strokeWidth: 1,
    },
    cell: {
      shape: 'rectangle',
      size: [120, 60],
    },
    getLabel: (value: any) => {
      return value.label || '';
    },
    getValue: (dom: any) => {
      if (dom) {
        return {
          label: dom.getAttribute('label') || '',
          expression: dom.getAttribute('expression') || '',
          commands: dom.getAttribute('commands') || '',
        };
      } else {
        return {
          label: '',
          expression: '',
          commands: '',
        };
      }
    },
    getFormFields: () => {
      return [
        {
          name: 'label',
          label: $t('title'),
          type: 'w-text',
          requiredIf: true,
        },
        { name: 'expression', label: $t('re.graph.vertex.expression.entity.expression'), type: 'w-text' },
        {
          name: 'commands',
          label: $t('re.graph.vertex.expression.entity.commands'),
          type: 'w-code-mirror',
          lang: 'java',
          rows: 10,
          placeholder: true,
          lineWrap: true,
          lineBreak: true,
          autoCompletion: autoCompletionManager.autoCompletion(),
          userDefinedFunctions: userDefinedFunctionsManager.userDefinedFunctions(),
        },
      ];
    },
  },
  {
    type: 'ResourceAbstract',
    thumbnail: {
      shape: 'ellipse',
      label: $t('re.graph.vertex.resourceAbstract.label'),
      title: $t('re.graph.vertex.resourceAbstract.title'),
      rx: 11,
      ry: 6,
      strokeColor: 'black',
      strokeWidth: 1,
    },
    cell: {
      shape: 'ellipse',
      size: [120, 60],
    },
    getLabel: (value: any) => {
      const resourceAbstract = findResourceAbstractById(value.resourceAbstractId);
      if (resourceAbstract) {
        return resourceAbstract.name + '(V' + resourceAbstract.version + ')';
      }
      return '';
    },
    getValue: (dom: any) => {
      if (dom) {
        const code = dom.getAttribute('code');
        const version = dom.getAttribute('version');
        const resourceAbstract = findResourceAbstractByCodeAndVersion(code, version);
        if (resourceAbstract) {
          return {
            resourceAbstractId: resourceAbstract.id,
          };
        } else {
          return {
            resourceAbstractId: '',
          };
        }
      } else {
        return {
          resourceAbstractId: '',
        };
      }
    },
    setValue: (dom: any, value: any) => {
      const resourceAbstract = findResourceAbstractById(value.resourceAbstractId);
      if (resourceAbstract) {
        dom.setAttribute('code', resourceAbstract.code);
        dom.setAttribute('version', resourceAbstract.version);
      } else {
        dom.setAttribute('code', '');
        dom.setAttribute('version', '');
      }
    },
    getFormFields: () => {
      return [
        {
          name: 'resourceAbstractId',
          label: $t('re.graph.vertex.resourceAbstract.entity.resourceAbstractId'),
          type: 'w-grid-select',
          displayValue: (args: any) => {
            return args.data.name + '(V' + args.data.version + ')';
          },
          grid: {
            title: $t('re.graph.vertex.resourceAbstract.entity.resourceAbstractId'),
            denseBody: true,
            hideBottom: true,
            configButton: true,
            checkboxSelection: false,
            tree: true,
            treeIcon: (row: any) => {
              if (row.type === 'FOLDER') {
                return { name: 'folder', color: 'amber' };
              } else if (row.type === 'MODEL') {
                return { name: 'bi-boxes' };
              } else if (row.type === 'SCORE_CARD') {
                return { name: 'bi-card-list' };
              } else {
                return { name: row.icon };
              }
            },
            selectableIf: (args: any) => {
              return args.data.type === 'MODEL';
            },
            dataUrl: Environment.apiContextPath('/api/re/resource'),
            pageable: false,
            sortBy: ['type', 'namec', '-lastModifyDate'],
            toolbarConfigure: { noIcon: false },
            toolbarActions: ['refresh', 'expand'],
            columns: [
              { width: '100%', name: 'name', label: $t('name') },
              {
                width: 80,
                name: 'type',
                label: $t('type'),
                format: (value: any, row: any) => {
                  if (value !== 'FOLDER') {
                    return EngineEnums.ResourceType.formater(value);
                  }
                },
              },
              { width: 60, name: 'version', label: $t('version') },
              {
                width: 80,
                name: 'status',
                label: $t('status'),
                align: 'center',
                format: EngineEnums.DeployStatus.formater,
              },
            ],
          },
        },
      ];
    },
  },
  {
    type: 'ResourceAbstracts',
    thumbnail: {
      shape: 'doubleEllipse',
      paths: [
        '<path fill="white" stroke-width="1" stroke="black" d="M1 12a11 8 0 1 0 22 0a11 8 0 1 0 -22 0"></path>',
        '<path fill="white" stroke-width="1" stroke="black" d="M3 12a9 6 0 1 0 18 0a9 6 0 1 0 -18 0"></path>',
      ],
      label: $t('re.graph.vertex.resourceAbstracts.label'),
      title: $t('re.graph.vertex.resourceAbstracts.title'),
      strokeColor: 'black',
      strokeWidth: 1,
    },
    cell: {
      shape: 'doubleEllipse',
      size: [120, 60],
    },
    getLabel: (value: any) => {
      console.log('getLabel', value);
      if (value.resourceAbstractIds && value.resourceAbstractIds.length > 0) {
        const resourceAbstracts = findResourceAbstractByIds(value.resourceAbstractIds);
        console.log(resourceAbstracts.length);
        if (resourceAbstracts && resourceAbstracts.length > 0) {
          const result = [];
          for (const element of resourceAbstracts) {
            result.push(element.name + '(V' + element.version + ')');
          }
          return Tools.join(result, '\n');
        }
      }
      return '';
    },
    getValue: (dom: any) => {
      console.log('getValue');
      if (dom) {
        const resourceAbstracts = Tools.json2Object(dom.getAttribute('resourceAbstracts'));
        if (resourceAbstracts && resourceAbstracts.length > 0) {
          let ids = [];
          for (const resourceAbstract of resourceAbstracts) {
            const item = findResourceAbstractByCodeAndVersion(resourceAbstract.code, resourceAbstract.version.toString());
            if (item) {
              ids.push(item.id);
            }
          }
          return { resourceAbstractIds: ids };
        }
      }
      return {
        resourceAbstractIds: [],
      };
    },
    setValue: (dom: any, value: any) => {
      console.log('setValue');
      if (value.resourceAbstractIds && value.resourceAbstractIds.length > 0) {
        const resourceAbstracts = findResourceAbstractByIds(value.resourceAbstractIds);
        if (resourceAbstracts && resourceAbstracts.length > 0) {
          let items = [];
          for (const element of resourceAbstracts) {
            items.push({ code: element.code, version: element.version });
          }
          dom.setAttribute('resourceAbstracts', Tools.object2Json(items));
          return;
        }
      }
      dom.setAttribute('resourceAbstracts', '[]');
    },
    getFormFields: () => {
      return [
        {
          name: 'resourceAbstractIds2',
          label: $t('re.graph.vertex.resourceAbstracts.entity.resourceAbstractIds'),
          type: 'w-grid',
          height: 300,
          localMode: true,
          autoFetchData: false,
          dndMode: 'local',
          pageable: false,
          configButton: false,
          toolbarConfigure: { noIcon: false },
          toolbarActions: [
            {
              name: 'selectIn',
              label: $t('system.shared.selectRole.grid.toolbar.selectIn'),
              icon: 'bi-download',
              click: (args: any) => {
                selectResourceDialogRef.value.open(args.grid);
              },
            },
            {
              name: 'selectOut',
              label: $t('system.shared.selectRole.grid.toolbar.selectOut'),
              icon: 'bi-upload',
              click: (args: any) => {
                console.log(args.grid);
                args.grid.removeLocalData(args.grid.getSelectedRows());
              },
            },
          ],
          columns: [
            { width: '100%', name: 'name', label: $t('name') },
            { width: 60, name: 'version', label: $t('version') },
            {
              width: 80,
              name: 'status',
              label: $t('status'),
              align: 'center',
              format: EngineEnums.DeployStatus.formater,
            },
          ],
          editor: {},
          onAfterEditorDataSubmit: (args: any) => {},
        },
        {
          name: 'resourceAbstractIds',
          label: $t('re.graph.vertex.resourceAbstracts.entity.resourceAbstractIds'),
          type: 'w-grid-select',
          multiple: true,
          displayValue: (args: any) => {
            return args.data.name + '(V' + args.data.version + ')';
          },
          grid: {
            title: $t('re.graph.vertex.resourceAbstracts.entity.resourceAbstractIds'),
            denseBody: true,
            hideBottom: true,
            configButton: true,
            checkboxSelection: false,
            tree: true,
            treeTickStrategy: 'strict',
            treeIcon: (row: any) => {
              if (row.type === 'FOLDER') {
                return { name: 'folder', color: 'amber' };
              } else if (row.type === 'MODEL') {
                return { name: 'bi-boxes' };
              } else if (row.type === 'SCORE_CARD') {
                return { name: 'bi-card-list' };
              } else {
                return { name: row.icon };
              }
            },
            selectableIf: (args: any) => {
              return args.data.type === 'MODEL';
            },
            dataUrl: Environment.apiContextPath('/api/re/resource'),
            pageable: false,
            sortBy: ['type', 'namec', '-lastModifyDate'],
            toolbarConfigure: { noIcon: false },
            toolbarActions: ['refresh', 'expand'],
            columns: [
              { width: '100%', name: 'name', label: $t('name') },
              {
                width: 80,
                name: 'type',
                label: $t('type'),
                format: (value: any, row: any) => {
                  if (value !== 'FOLDER') {
                    return EngineEnums.ResourceType.formater(value);
                  }
                },
              },
              { width: 60, name: 'version', label: $t('version') },
              {
                width: 80,
                name: 'status',
                label: $t('status'),
                align: 'center',
                format: EngineEnums.DeployStatus.formater,
              },
            ],
          },
        },
      ];
    },
  },
];

const findResourceAbstractById = (id: string) => {
  for (const item of resourceAbstractsRef.value) {
    if (item.id === id) {
      return item;
    }
  }
  return null;
};

const findResourceAbstractByIds = (ids: string[]) => {
  const result = [];
  if (ids && ids.length > 0) {
    for (const id of ids) {
      const item = findResourceAbstractById(id);
      if (item) {
        result.push(item);
      }
    }
  }
  return result;
};

const findResourceAbstractByCodeAndVersion = (code: string, version: string) => {
  for (const item of resourceAbstractsRef.value) {
    if (item.code === code && item.version.toString() === version) {
      return item;
    }
  }
  return null;
};

const open = async (parameterId: string, processorId: string) => {
  autoCompletionManager.load(Environment.apiContextPath('/api/re/common/parameterAndValueType/findByParameterId/' + parameterId));
  userDefinedFunctionsManager.load();

  processorIdRef.value = processorId;
  // 获取资源摘要
  const resourceAbstractResponse = await axios.get(Environment.apiContextPath('/api/re/resource/getAllResourceAbstract'));
  resourceAbstractsRef.value = resourceAbstractResponse?.data;

  // 获取决策树 graph xml
  const graphResponse = await axios.get(Environment.apiContextPath('api/re/model/parameter/processor/getDecisionTreeById/' + processorIdRef.value));
  modelValueRef.value = graphResponse?.data;

  // 显示对话框
  dialogRef.value.show();
};

const close = () => {
  dialogRef.value.hide();
};

const save = (xml: string) => {
  axios.post(Environment.apiContextPath('api/re/model/parameter/processor/saveDecisionTreeById/' + processorIdRef.value), { xml }).then((response) => {
    NotifyManager.info($t('operationSuccess'));
  });
};

const afterSelectResourceSelected = (owner: any, selecteds: any) => {
  if (selecteds && selecteds.length > 0) {
    for (const selected of selecteds) {
      selected.selected = false;
    }
  }
  owner.addLocalData(selecteds);
};

defineExpose({
  open,
  close,
});

await EngineEnums.init();
</script>