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

<template>
  <w-dialog
    ref="dialogRef"
    :title="$t('re.resources.designer.processor.dialog.executionFlow.title')"
    :can-maximize="false"
    :maximized="true"
    body-padding="2px 2px 2px 2px"
  >
    <w-graph v-model="modelValueRef" :vertex-defines="vertexDefines" :edge-defines="edgeDefines" @save="save"></w-graph>
  </w-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { axios, Environment, NotifyManager, Formater, EnumTools, $t } from 'platform-core';
import { AutoCompletionManager } from '@/views/shared/AutoCompletionManager';
import { PlaceHolder } from '@/utils/PlaceHolder';
import ResourceDeployStatusTag from '@/views/shared/ResourceDeployStatusTag.vue';

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

const autoCompletionManager = new AutoCompletionManager();
const userDefinedFunctionsRef = ref();
const resourceAbstractsRef = ref();
const modeAbstractsRef = ref();

const autoCompletion = (context) => {
  return autoCompletionManager.autoCompletion(context);
};

const edgeDefines = [
  {
    type: 'EdgeConditionBranch',
    fromVertexType: 'Condition',
    toVertexType: null,
    getLabel: (value) => {
      return value.value || '';
    },
    getValue: (dom) => {
      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: autoCompletion,
          userDefinedFunctions: userDefinedFunctionsRef,
        },
      ];
    },
  },
];

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) => {
      return value.label;
    },
    getValue: (dom) => {
      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) => {
      return value.condition ? PlaceHolder.replace(value.condition) : '';
    },
    getValue: (dom) => {
      if (dom) {
        return {
          condition: dom.getAttribute('condition') || '',
        };
      } else {
        return {
          condition: '',
        };
      }
    },
    getFormFields: () => {
      return [
        {
          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: autoCompletion,
          userDefinedFunctions: userDefinedFunctionsRef,
        },
      ];
    },
  },
  {
    type: 'CommandSet',
    thumbnail: {
      shape: 'rectangle',
      label: $t('re.graph.vertex.commandSet.label'),
      title: $t('re.graph.vertex.commandSet.title'),
      strokeColor: 'black',
      strokeWidth: 1,
    },
    cell: {
      shape: 'rectangle',
      size: [120, 60],
    },
    getLabel: (value) => {
      let html = '';
      html += '<div style="text-align:left;">' + value.commands + '</div>';
      return html;
    },
    getValue: (dom) => {
      if (dom) {
        return {
          commands: dom.getAttribute('commands') || '',
        };
      } else {
        return {
          commands: '',
        };
      }
    },
    getFormFields: () => {
      return [
        {
          name: 'commands',
          label: $t('re.graph.vertex.commandSet.entity.commands'),
          type: 'w-code-mirror',
          lang: 'java',
          rows: 10,
          placeholder: true,
          lineWrap: true,
          lineBreak: true,
          autoCompletion: autoCompletion,
          userDefinedFunctions: userDefinedFunctionsRef,
        },
      ];
    },
  },
  {
    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) => {
      const resourceAbstract = findResourceAbstractById(value.resourceAbstractId);
      if (resourceAbstract) {
        return resourceAbstract.name + '(V' + resourceAbstract.version + ')';
      }
      return '';
    },
    getValue: (dom) => {
      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, value) => {
      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) => {
            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) => {
              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 };
              }
            },
            dataUrl: Environment.apiContextPath('/api/re/resource'),
            pageable: false,
            sortBy: ['order', '-lastModifyDate'],
            toolbarConfigure: { noIcon: false },
            toolbarActions: ['refresh', 'expand'],
            columns: [
              { width: '100%', name: 'name', label: $t('name') },
              {
                width: 80,
                name: 'type',
                label: $t('type'),
                format: (value, row) => {
                  if (value !== 'FOLDER') {
                    return Formater.enum(Enums.ResourceType)(value);
                  }
                },
              },
              { width: 60, name: 'version', label: $t('version') },
              {
                width: 80,
                name: 'status',
                label: $t('status'),
                align: 'center',
                format: (value, row) => {
                  return {
                    componentType: ResourceDeployStatusTag,
                    attrs: { status: value },
                  };
                },
              },
            ],
          },
        },
      ];
    },
  },
  {
    type: 'ConfigurableResourceAbstract',
    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.configurableResourceAbstract.label'),
      title: $t('re.graph.vertex.configurableResourceAbstract.title'),
      strokeColor: 'black',
      strokeWidth: 1,
    },
    cell: {
      shape: 'doubleEllipse',
      size: [120, 60],
    },
    getLabel: (value) => {
      const resourceAbstract = findResourceAbstractById(value.resourceAbstractId);
      if (resourceAbstract) {
        return resourceAbstract.name + '(V' + resourceAbstract.version + ')';
      }
      return '';
    },
    getValue: (dom) => {
      if (dom) {
        const code = dom.getAttribute('code');
        const version = dom.getAttribute('version');
        const inputCommands = dom.getAttribute('inputCommands');
        const outputCommands = dom.getAttribute('outputCommands');
        const resourceAbstract = findResourceAbstractByCodeAndVersion(code, version);
        if (resourceAbstract) {
          return {
            resourceAbstractId: resourceAbstract.id,
            inputCommands: inputCommands,
            outputCommands: outputCommands,
          };
        } else {
          return {
            resourceAbstractId: '',
            inputCommands: '',
            outputCommands: '',
          };
        }
      } else {
        return {
          resourceAbstractId: '',
          inputCommands: '',
          outputCommands: '',
        };
      }
    },
    setValue: (dom, value) => {
      const resourceAbstract = findResourceAbstractById(value.resourceAbstractId);
      if (resourceAbstract) {
        dom.setAttribute('code', resourceAbstract.code);
        dom.setAttribute('version', resourceAbstract.version);
        dom.setAttribute('inputCommands', value.inputCommands);
        dom.setAttribute('outputCommands', value.outputCommands);
      } else {
        dom.setAttribute('code', '');
        dom.setAttribute('version', '');
        dom.setAttribute('inputCommands', '');
        dom.setAttribute('outputCommands', '');
      }
    },
    getFormFields: () => {
      return [
        {
          name: 'resourceAbstractId',
          label: $t('re.graph.vertex.configurableResourceAbstract.entity.resourceAbstractId'),
          type: 'w-grid-select',
          displayValue: (args) => {
            return args.data.name + '(V' + args.data.version + ')';
          },
          grid: {
            title: $t('re.graph.vertex.configurableResourceAbstract.entity.resourceAbstractId'),
            denseBody: true,
            hideBottom: true,
            configButton: true,
            checkboxSelection: false,
            tree: true,
            treeIcon: (row) => {
              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 };
              }
            },
            dataUrl: Environment.apiContextPath('/api/re/resource'),
            pageable: false,
            sortBy: ['order', '-lastModifyDate'],
            toolbarConfigure: { noIcon: false },
            toolbarActions: ['refresh', 'expand'],
            columns: [
              { width: '100%', name: 'name', label: $t('name') },
              {
                width: 80,
                name: 'type',
                label: $t('type'),
                format: (value, row) => {
                  if (value !== 'FOLDER') {
                    return Formater.enum(Enums.ResourceType)(value);
                  }
                },
              },
              { width: 60, name: 'version', label: $t('version') },
              {
                width: 80,
                name: 'status',
                label: $t('status'),
                align: 'center',
                format: (value, row) => {
                  return {
                    componentType: ResourceDeployStatusTag,
                    attrs: { status: value },
                  };
                },
              },
            ],
          },
        },
        {
          name: 'inputCommands',
          label: $t('re.graph.vertex.configurableResourceAbstract.entity.inputCommands'),
          type: 'w-code-mirror',
          lang: 'java',
          rows: 10,
          placeholder: true,
          lineWrap: true,
          lineBreak: true,
          autoCompletion: autoCompletion,
          userDefinedFunctions: userDefinedFunctionsRef,
        },
        {
          name: 'outputCommands',
          label: $t('re.graph.vertex.configurableResourceAbstract.entity.outputCommands'),
          type: 'w-code-mirror',
          lang: 'java',
          rows: 10,
          placeholder: true,
          lineWrap: true,
          lineBreak: true,
          autoCompletion: autoCompletion,
          userDefinedFunctions: userDefinedFunctionsRef,
        },
      ];
    },
  },
  {
    type: 'SubModelAbstract',
    thumbnail: {
      paths: ['<path fill="white" stroke-width="1" stroke="black" d="M 1 12 L 6 6 L 18 6 L 23 12 L 23 12 L 18 18 L 6 18 L 1 12 L 1 12"></path>'],
      label: $t('re.graph.vertex.subModelAbstract.label'),
      title: $t('re.graph.vertex.subModelAbstract.title'),
      rx: 11,
      ry: 6,
      strokeColor: 'black',
      strokeWidth: 1,
    },
    cell: {
      shape: 'hexagon',
      size: [120, 60],
    },
    getLabel: (value) => {
      for (const item of modeAbstractsRef.value) {
        if (item.value === value.code) {
          return item.label;
        }
      }
      return '';
    },
    getValue: (dom) => {
      if (dom) {
        return {
          code: dom.getAttribute('code') || '',
        };
      } else {
        return {
          code: '',
        };
      }
    },
    getFormFields: () => {
      return [
        {
          name: 'code',
          label: $t('re.graph.vertex.subModelAbstract.entity.code'),
          type: 'w-select',
          options: modeAbstractsRef,
        },
      ];
    },
  },
];

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

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

const open = async (parameterId, processorId) => {
  processorIdRef.value = processorId;
  // 获取资源摘要
  const resourceAbstractResponse = await axios.get(Environment.apiContextPath('/api/re/resource/getAllReleasableResourceAbstract'));
  resourceAbstractsRef.value = resourceAbstractResponse?.data;

  // 获取子模型
  const modelResponse = await axios.get(Environment.apiContextPath('/api/re/model/getModeAbstractByParameterProcessor/' + processorId));
  const modelOptions = [];
  for (const item of modelResponse?.data || []) {
    modelOptions.push({ label: item.name, value: item.code });
  }
  modeAbstractsRef.value = modelOptions;

  //获取自定义函数
  const functionResponse = await axios.get(Environment.apiContextPath('/api/re/function?pageable=false'));
  const functionOptions = [];
  for (const item of functionResponse?.data?.content || []) {
    if (item.enable) {
      functionOptions.push(item);
    }
  }
  userDefinedFunctionsRef.value = functionOptions;

  // 获取代码提示列表
  const tipResponse = await axios.get(Environment.apiContextPath('/api/re/common/listParameterAndValueTypeByParameterId/' + parameterId));
  autoCompletionManager.setParameters(tipResponse?.data?.parameters);
  autoCompletionManager.setValueTypes(tipResponse?.data?.valueTypes);

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

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

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

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

defineExpose({
  open,
  close,
});

const Enums = await EnumTools.fetch(['io.sc.engine.rule.core.enums.ResourceType', 'io.sc.engine.rule.core.enums.DeployStatus']);
</script>