fixed: 修改数据聚合模块数据处理逻辑

.eslintrc

@@ -34,6 +34,7 @@
        "endOfLine": "auto",
        "singleQuote": true,
        "trailingComma": "none",
        "no-nested-ternary": "ignore",
        "bracketSpacing": true,
        "jsxBracketSameLine": false,
        "vueIndentScriptAndStyle": false,

src/views/_components/_flow/Index.vue

@@ -77,6 +77,7 @@ function initGraph() {
  graph.value = new Graph({
    container,
    autoResize: true,
    rendering: 'canvas',
    background: {
      color: '#F8F8F8'
    },
@@ -349,7 +350,10 @@ function registerRouter() {
    const points = [];
    points.push(new Point(start.x + 48, start.y));
    points.push(
      new Point(view.targetBBox.leftMiddle.x - 20, view.targetBBox.leftMiddle.y)
      new Point(
        view.targetBBox.leftMiddle.x - 120,
        view.targetBBox.leftMiddle.y
      )
    );
    return points;
  });

src/views/_components/panel/PanelBranch.vue

@@ -1,157 +0,0 @@
<template>
  <div class="panel-end">
    <common-panel :panel-data="panelData" :target-node="targetNode">
      <template #input-output>
        <div class="content">
          <input-output-tab
            :input-output="panelData.inputOutput"
          ></input-output-tab>
        </div>
      </template>
      <template #function>
        <!-- 功能区域 -->
        <add-item
          :item-list="panelData.function.branchList"
          @update:item-list="panelData.function.branchList = $event"
        ></add-item>
      </template>
    </common-panel>
  </div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue';
import CommonPanel from './common/CommonPanel.vue';
import InputOutputTab from './sql-components/InputOutputTab.vue';
import AddItem from './common/AddItem.vue';
const props = defineProps({
  targetNode: {
    type: Object,
    default: () => {}
  }
});
const nodePanelData = ref(props.targetNode.cell.getData()?.attrsData || null);
const panelData = ref(
  nodePanelData.value || {
    basicData: {
      name: props.targetNode.cell.getData().label,
      desc: ''
    },
    inputOutput: {
      input: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '名称',
            name: 'name',
            'min-width': '150'
          },
          {
            label: '类型',
            name: 'type',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      },
      output: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      }
    },
    function: {
      branchList: [],
      defaultId: ''
    }
  }
);
function setNodeAttrData() {
  // 使用overwrite + silent 进行数据的重置覆盖，防止节点中的数据不准确
  const data = props.targetNode.cell.getData();
  console.log(data);
  props.targetNode.cell.setData(
    {
      ...data,
      attrsData: JSON.parse(JSON.stringify(panelData.value))
    },
    {
      overwrite: true,
      silent: false
    }
  );
}
// 给default port 绑定节点
function formatDefaultPort() {
  const nodeInfo = props.targetNode.node;
  const { ports } = nodeInfo.port;
  if (ports?.length) {
    ports.forEach((port) => {
      if (port.group === 'output' && !port?.type) {
        panelData.value.function.defaultId = port.id;
      }
    });
  }
}
formatDefaultPort();
watch(
  panelData.value,
  () => {
    setNodeAttrData();
  },
  { deep: true }
);
onMounted(() => {
  setNodeAttrData();
});
</script>
<script>
export default {
  name: 'PanelBranch'
};
</script>
<style scoped lang="scss"></style>

src/views/_components/panel/PanelDataAggregation.vue

@@ -1,135 +0,0 @@
<template>
  <div class="panel-data-aggregation">
    <common-panel :panel-data="panelData" :target-node="targetNode">
      <template #input-output>
        <div class="content">
          <input-output-tab
            :input-output="panelData.inputOutput"
          ></input-output-tab>
        </div>
      </template>
      <template #function>
        <div class="content">
          <!-- <JsonEditorVue
            v-model="panelData.function.aggregate"
            class="editor"
            @blur="validate"
          ></JsonEditorVue> -->
        </div>
      </template>
    </common-panel>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
// import JsonEditorVue from 'json-editor-vue3';
import CommonPanel from './common/CommonPanel.vue';
import InputOutputTab from './sql-components/InputOutputTab.vue';
const props = defineProps({
  targetNode: {
    type: Object,
    default: () => {}
  }
});
// const
const panelData = ref(
  props.targetNode.cell.getData()?.attrsData || {
    basicData: {
      name: props.targetNode.cell.getData().label,
      desc: ''
    },
    inputOutput: {
      input: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '名称',
            name: 'name',
            'min-width': '150'
          },
          {
            label: '类型',
            name: 'type',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      },
      output: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      }
    },
    function: {
      aggregate: {}
    }
  }
);
// function validate() {}
function setNodeAttrData() {
  props.targetNode.cell.setData({
    attrsData: panelData.value
  });
}
watch(
  panelData.value,
  () => {
    setNodeAttrData();
  },
  { deep: true }
);
</script>
<script>
export default {
  name: 'PanelDataAggregation'
};
</script>
<style scoped lang="scss">
.editor {
  height: 300px;
}
</style>

src/views/_components/panel/PanelEnd.vue

@@ -1,169 +0,0 @@
<template>
  <div class="panel-end">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="功能" name="function">
        <el-button type="success" @click.stop="setting">设置</el-button>
        <common-table
          :table-header="tableHeader"
          :table-data="panelData.function.tableData"
        >
          <template #custom="scope">
            <el-icon class="icon" @click.stop="deleteAttr(scope.row)">
              <Delete></Delete>
            </el-icon>
          </template>
        </common-table>
      </el-tab-pane>
    </el-tabs>
  </div>
  <dialog-panel
    v-if="showSetting"
    :dialog-data="dialogData"
    @confirm-dialog="confirmSettingDialog"
    @clos-dialog="closeSettingDialog"
  >
    <!-- 数据展示 -->
    <attr-info
      :table="inputOutputDialog"
      @checked-attrs="checkedAttrs"
    ></attr-info>
  </dialog-panel>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import AttrInfo from './common/AttrInfo.vue';
const route = useRoute();
const props = defineProps({
  targetNode: {
    type: Object,
    default: () => {}
  }
});
// 设置结束节点信息
function setEndNodeInfo() {
  const activeName = ref('function');
  const showSetting = ref(false);
  const dialogData = ref({
    title: '变量声明'
  });
  const formData = ref({
    id: ''
  });
  const tableHeader = ref([
    { label: '返回键', name: 'id', 'min-width': '150' },
    { label: '返回名', name: 'name', 'min-width': '150' },
    { label: '别名', name: 'alias', type: 'input', 'min-width': '150' },
    {
      label: '操作',
      name: 'custom',
      type: 'custom',
      fixed: 'right',
      width: '100'
    }
  ]);
  const nodePanelData = ref(props.targetNode.cell.getData()?.attrsData || null);
  const panelData = ref(
    nodePanelData.value || {
      basicData: {},
      inputOutput: {},
      function: {
        tableData: []
      }
    }
  );
  const dataBus = JSON.parse(localStorage.getItem('panelGlobal')) || {};
  const flowId = computed(() => route.query.id);
  const inputOutputDialog = ref({
    modelAttrs: {
      header: [{ label: '模型属性', name: 'modelAttrs', 'min-width': '150' }],
      data: dataBus[flowId.value]?.modelAttrs?.data || []
    },
    customAttrs: {
      header: [
        { label: 'ID', name: 'id', 'min-width': '150' },
        { label: '名称', name: 'name', 'min-width': '150' }
      ],
      data: dataBus[flowId.value]?.customAttrs?.data || []
    },
    models: {
      header: [{ label: '模型', name: 'model', 'min-width': '150' }],
      data: dataBus[flowId.value]?.models?.data || []
    }
  });
  const setting = () => {
    showSetting.value = true;
  };
  const closeSettingDialog = () => {
    showSetting.value = false;
  };
  const confirmSettingDialog = () => {
    closeSettingDialog();
  };
  function checkedAttrs(data) {
    panelData.value.function.tableData = data.customAttrs;
  }
  return {
    tableHeader,
    panelData,
    checkedAttrs,
    inputOutputDialog,
    showSetting,
    activeName,
    dialogData,
    formData,
    setting,
    closeSettingDialog,
    confirmSettingDialog
  };
}
const {
  tableHeader,
  checkedAttrs,
  inputOutputDialog,
  activeName,
  showSetting,
  dialogData,
  panelData,
  setting,
  closeSettingDialog,
  confirmSettingDialog
} = setEndNodeInfo();
function setNodeAttrData() {
  props.targetNode.cell.setData({
    attrsData: panelData.value
  });
}
function deleteAttr(row) {
  panelData.value.function.tableData.forEach((item, index) => {
    if (item.id === row.id) {
      panelData.value.function.tableData.splice(index, 1);
    }
  });
}
watch(
  panelData.value,
  () => {
    setNodeAttrData();
  },
  { deep: true }
);
</script>
<script>
export default {
  name: 'PanelEnd'
};
</script>
<style scoped lang="scss"></style>

src/views/_components/panel/PanelExpression.vue

@@ -1,273 +0,0 @@
<template>
  <div class="panel-end">
    <common-panel :panel-data="panelData" :target-node="targetNode">
      <!-- 输入输出 -->
      <template #input-output>
        <div class="content">
          <input-output-tab
            :input-output="panelData.inputOutput"
          ></input-output-tab>
        </div>
      </template>
      <!-- 函数 -->
      <template #function>
        <div class="form-item">
          <div class="form-title">
            <h5>名称</h5>
          </div>
          <el-input
            v-bind="attributes"
            v-model="panelData.function.name"
          ></el-input>
        </div>
        <div class="form-item">
          <div class="form-title">
            <h5>表达式</h5>
          </div>
          <my-code-hint
            :editor-value="panelData.function.expression"
            @update:editor-value="panelData.function.expression = $event"
            @change-textarea="changeTextarea"
            @code-editor-get-cursor="codeEditorGetCursor"
          ></my-code-hint>
        </div>
      </template>
    </common-panel>
  </div>
  <dialog-panel
    v-if="showSetting"
    :dialog-data="dialogData"
    @confirm-dialog="confirmSettingDialog"
    @close-dialog="closeSettingDialog"
  >
    <!-- 数据展示 -->
    <attr-info
      :table="inputOutputDialog"
      @checked-attrs="checkedAttrs"
    ></attr-info>
  </dialog-panel>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import CommonPanel from './common/CommonPanel.vue';
import InputOutputTab from './sql-components/InputOutputTab.vue';
import MyCodeHint from '../_codemirror/MyCodeHint.vue';
const route = useRoute();
const props = defineProps({
  targetNode: {
    type: Object,
    default: () => {}
  }
});
const nodePanelData = ref(props.targetNode.cell.getData()?.attrsData || null);
const panelData = ref(
  nodePanelData.value || {
    basicData: {
      name: props.targetNode.cell.getData().label,
      desc: ''
    },
    inputOutput: {
      input: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '名称',
            name: 'name',
            'min-width': '150'
          },
          {
            label: '类型',
            name: 'type',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      },
      output: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      }
    },
    function: {
      name: '',
      cdatafForeach: ''
    }
  }
);
function changeTextarea(val) {
  panelData.value.function.expression = val;
}
function codeEditorGetCursor(codeData) {
  const pos1 = codeData.getCursor;
  const pos2 = {};
  if (pos1) {
    pos2.line = pos1.line;
    pos2.ch = pos1.ch;
    codeData.codeE.setCursor(pos2); // 设置光标位置
    codeData.codeE.replaceRange('', pos2); // 替换光标位置的内容
  }
}
// const activeName = ref('action');
// const baseInit = () => {
//   const basicData = ref(
//     nodePanelData.value || {
//       name: props.targetNode.cell.getData().label,
//       desc: ''
//     }
//   );
//   // 高级设置
//   const seniorData = ref({
//     nodeId: '',
//     nextNode: ''
//   });
//   const formRules = reactive({
//     name: [
//       {
//         required: true,
//         message: '请输入服务名称',
//         trigger: 'blur'
//       },
//       { min: 3, max: 100, message: '名称在3-100之间', trigger: 'blur' }
//     ]
//   });
//   const showMoreSettings = ref(false);
//   return {
//     basicData,
//     seniorData,
//     formRules,
//     showMoreSettings
//   };
// };
const dataBus = JSON.parse(localStorage.getItem('panelGlobal')) || {};
const flowId = computed(() => route.query.id);
const dialogData = ref({
  title: '输入模型/属性引入'
});
const inputOutputDialog = ref({
  modelAttrs: {
    header: [{ label: '模型属性', name: 'modelAttrs', 'min-width': '150' }],
    data: dataBus[flowId.value]?.modelAttrs?.data || []
  },
  customAttrs: {
    header: [
      { label: 'ID', name: 'id', 'min-width': '150' },
      { label: '名称', name: 'name', 'min-width': '150' }
    ],
    data: dataBus[flowId.value]?.customAttrs?.data || []
  },
  models: {
    header: [{ label: '模型', name: 'model', 'min-width': '150' }],
    data: dataBus[flowId.value]?.models?.data || []
  }
});
function closeSettingDialog() {
  showSetting.value = false;
}
function confirmSettingDialog() {
  closeSettingDialog();
}
const showSetting = ref(false);
// const { basicData, seniorData, formRules, showMoreSettings } = baseInit();
const attributes = ref({
  type: 'textarea',
  autosize: { minRows: 2, maxRows: 5 }
});
function setNodeAttrData() {
  props.targetNode.cell.setData({
    attrsData: panelData.value
  });
}
watch(
  panelData.value,
  () => {
    setNodeAttrData();
  },
  { deep: true }
);
</script>
<script>
export default {
  name: 'PanelExpression'
};
</script>
<style scoped lang="scss">
.form-item {
  .form-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 10px 0;
    h5 {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
.collapse {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 30px 0;
  .icon {
    margin: 0 10px;
    font-size: 16px;
  }
  .line {
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.09);
  }
}
</style>

src/views/_components/panel/PanelForeach.vue

@@ -1,209 +0,0 @@
<template>
  <div class="panel-end">
    <common-panel :panel-data="panelData" :target-node="targetNode">
      <template #input-output>
        <div class="content">
          <input-output-tab
            :input-output="panelData.inputOutput"
          ></input-output-tab>
        </div>
      </template>
      <template #function>
        <div class="form-item">
          <div class="form-title">
            <h5>迭代器</h5>
          </div>
          <common-select
            v-model="panelData.function.iterator"
            :props-map="propsMap"
            :options="iteratorDataList"
          ></common-select>
        </div>
        <div class="form-item">
          <div class="form-title">
            <h5>数据类型</h5>
          </div>
          <common-select
            v-model="panelData.function.resultType"
            :options="resultTypes"
          ></common-select>
        </div>
        <div class="form-item">
          <div class="form-title">
            <h5>表达式</h5>
          </div>
          <my-code-hint
            class="form-content"
            :editor-value="panelData.function.expression"
            @update:editor-value="panelData.function.expression = $event"
            @change-textarea="changeTextarea"
            @code-editor-get-cursor="codeEditorGetCursor"
          ></my-code-hint>
        </div>
      </template>
    </common-panel>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import MyCodeHint from '../_codemirror/MyCodeHint.vue';
import CommonPanel from './common/CommonPanel.vue';
import InputOutputTab from './sql-components/InputOutputTab.vue';
const route = useRoute();
const props = defineProps({
  targetNode: {
    type: Object,
    default: () => {}
  }
});
// 数据总线
const logicId = route.query.id;
const databusData = JSON.parse(localStorage.getItem('panelGlobal')) || {};
const nodePanelData = ref(props.targetNode.cell.getData()?.attrsData || null);
const panelData = ref(
  nodePanelData.value || {
    basicData: {
      name: props.targetNode.cell.getData().label,
      desc: ''
    },
    inputOutput: {
      input: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '名称',
            name: 'name',
            'min-width': '150'
          },
          {
            label: '类型',
            name: 'type',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      },
      output: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      }
    },
    function: {
      cdatafForeach: '',
      iterator: '',
      resultType: ''
    }
  }
);
const propsMap = ref({
  value: 'id',
  label: 'name'
});
const iteratorDataList = ref(databusData?.[logicId]?.customAttrs?.data || []);
console.log(iteratorDataList.value);
const resultTypes = ref([
  { value: 'int', label: 'int' },
  { value: 'string', label: 'string' },
  { value: 'map', label: 'map' },
  { value: 'list', label: 'list' }
]);
function changeTextarea(val) {
  console.log(val);
  panelData.value.function.expression = val;
}
function codeEditorGetCursor(codeData) {
  const pos1 = codeData.getCursor;
  const pos2 = {};
  // console.log('setCode pos1 === ', pos1);
  if (pos1) {
    pos2.line = pos1.line;
    pos2.ch = pos1.ch;
    codeData.codeE.setCursor(pos2); // 设置光标位置
    codeData.codeE.replaceRange('', pos2); // 替换光标位置的内容
  }
}
function setNodeAttrData() {
  props.targetNode.cell.setData({
    attrsData: panelData.value
  });
}
watch(
  panelData.value,
  () => {
    setNodeAttrData();
  },
  { deep: true }
);
</script>
<script>
export default {
  name: 'PanelForeach'
};
</script>
<style scoped lang="scss">
.form-item {
  .form-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 10px 0;
    h5 {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
  .form-content {
    flex: 1;
  }
}
</style>

src/views/_components/panel/PanelFunction.vue

@@ -1,213 +0,0 @@
<template>
  <div class="http-function">
    <common-panel :panel-data="panelData" :target-node="targetNode">
      <template #input-output>
        <div class="content">
          <input-output-tab
            :input-output="panelData.inputOutput"
          ></input-output-tab>
        </div>
      </template>
      <template #function>
        <div class="content">
          <div class="form-item">
            <span class="form-item-title">DOMAIN</span>
            <common-select
              v-model="panelData.function.domain"
              :options="domainList"
              :props-map="domainMap"
              @change="changeDomain(panelData.function.domain)"
            ></common-select>
          </div>
          <div class="form-item">
            <span class="form-item-title">NAME</span>
            <common-select
              v-model="panelData.function.name"
              class="select"
              :props-map="domainMap"
              :options="nameList"
              @change="changeName(panelData.function.name)"
            ></common-select>
          </div>
          <h4 class="form-title">函数参数</h4>
          <param-item :item-list="panelData.function?.params"></param-item>
        </div>
      </template>
    </common-panel>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import CommonPanel from './common/CommonPanel.vue';
import InputOutputTab from './sql-components/InputOutputTab.vue';
import ParamItem from './common/ParamItem.vue';
import { getFunctionList } from '../../../api/flow';
const props = defineProps({
  targetNode: {
    type: Object,
    default: () => {}
  }
});
const domainList = ref([]);
const domainMap = ref({
  value: 'code',
  label: 'code'
});
const nameList = ref([]);
const paramsResult = ref([]);
const panelData = ref(
  props.targetNode.cell.getData()?.attrsData || {
    basicData: {
      name: props.targetNode.cell.getData().label,
      desc: ''
    },
    inputOutput: {
      input: {
        header: [
          // {
          //   label: '模型名称',
          //   name: 'modelName',
          //   'min-width': '150'
          // },
          // {
          //   label: '输入',
          //   name: 'input',
          //   'min-width': '150'
          // },
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '名称',
            name: 'name',
            'min-width': '150'
          },
          {
            label: '类型',
            name: 'type',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      },
      output: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      }
    },
    function: {
      domain: '',
      name: '',
      params: []
    }
  }
);
function setNodeAttrData() {
  props.targetNode.cell.setData({
    attrsData: panelData.value
  });
}
// 初始化数据
// function initData() {
//   if (panelData.value.function.domain) {
//     changeDomain(panelData.value.function.domain);
//   }
//   if (panelData.value.function.name) {
//     changeName(panelData.value.function.name);
//   }
// }
async function getList() {
  await getFunctionList()
    .then((res) => {
      domainList.value = res.data.result;
    })
    .catch((err) => {
      console.log(err);
    });
}
getList();
// 选择domain
function changeDomain(data) {
  nameList.value =
    domainList.value.filter((el) => el.code === data)[0].children || [];
}
// 选择name
function changeName(data) {
  paramsResult.value =
    nameList.value.filter((el) => el.code === data)[0].params || [];
  panelData.value.function.params = paramsResult.value;
}
watch(
  panelData.value,
  () => {
    setNodeAttrData();
  },
  { deep: true }
);
</script>
<script>
export default {
  name: 'PanelFunction'
};
</script>
<style scoped lang="scss">
.form-title {
  color: rgba(0, 0, 0, 0.65);
  font-size: 16px;
  line-height: 32px;
  font-weight: 500;
  margin: 15px 0 8px;
}
.form-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  line-height: 42px;
  .form-item-title {
    width: 100px;
  }
}
</style>

src/views/_components/panel/PanelGlobal.vue

@@ -431,15 +431,21 @@ function customAttrFn() {
  //     return item;
  //   });
  // const newData = [...data, ...table.value.customAttrs.data];
  // newData.filter(
  //   (item, index) => newData.findIndex((t) => t.id === item.id) === index
  // );
  // table.value.customAttrs.data = newData;
  // table.value.customAttrs.data.map((item) => {
  //   item.actions = btns;
  //   return item;
  // });
  const data = customDetail.value.attrList;
  const newData = [...data, ...table.value.customAttrs.data];
  newData.filter(
    (item, index) => newData.findIndex((t) => t.id === item.id) === index
  );
  table.value.customAttrs.data = newData;
  table.value.customAttrs.data.map((item) => {
    item.actions = btns;
    return item;
  data.forEach((item) => {
    if (!table.value.customAttrs.data.some((el) => el.id === item.id)) {
      item.actions = btns;
      table.value.customAttrs.data.push(item);
    }
  });
  closeDialog();

src/views/_components/panel/PanelHttp.vue

@@ -1,308 +0,0 @@
<template>
  <div class="http-pannel">
    <common-panel :panel-data="panelData" :target-node="targetNode">
      <template #input-output>
        <div class="content">
          <input-output-tab
            :input-output="panelData.inputOutput"
          ></input-output-tab>
        </div>
      </template>
      <template #function>
        <div class="content">
          <div class="panel-content">
            <!-- 请求参数 -->
            <h4 class="form-title">接口参数</h4>
            <common-form
              :forms="panelData?.function?.forms"
              :form-values="panelData?.function?.formValues"
            ></common-form>
            <!-- 请求头 -->
            <h4 class="form-title">请求头</h4>
            <add-form-item
              :datas="panelData?.function?.headers"
            ></add-form-item>
          </div>
        </div>
      </template>
    </common-panel>
  </div>
  <dialog-panel
    v-if="showSetting"
    :dialog-data="dialogData"
    @confirm-dialog="confirmSettingDialog"
    @close-dialog="closeSettingDialog"
  >
    <!-- 数据展示 -->
    <attr-info
      :table="inputOutputDialog"
      @checked-attrs="checkedAttrs"
    ></attr-info>
  </dialog-panel>
</template>
<script setup>
import { ref, watch, computed } from 'vue';
import { useRoute } from 'vue-router';
import CommonPanel from './common/CommonPanel.vue';
import AddFormItem from './common/AddFormItem.vue';
// import AttrInfo from './common/AttrInfo.vue'
import InputOutputTab from './sql-components/InputOutputTab.vue';
const route = useRoute();
const props = defineProps({
  targetNode: {
    type: Object,
    default: () => {}
  }
});
const dataBus = JSON.parse(localStorage.getItem('panelGlobal')) || {};
const flowId = computed(() => route.query.id);
const forms = ref([
  {
    name: 'protocol',
    type: 'select',
    label: '协议类型',
    value: 'HTTP',
    attrs: {
      col: 1,
      options: [
        { label: 'HTTP', value: 'HTTP' },
        { label: 'HTTPS', value: 'HTTPS' }
      ],
      clearable: true,
      placeholder: '请选择协议类型'
    }
  },
  {
    name: 'url',
    type: 'input',
    label: 'URL',
    value: '',
    attrs: {
      col: 1,
      clearable: true,
      placeholder: '请输入URL'
    }
  },
  {
    name: 'requestType',
    type: 'select',
    label: '请求方法',
    value: 'GET',
    attrs: {
      col: 1,
      options: [
        { label: 'GET', value: 'GET' },
        { label: 'POST', value: 'POST' },
        { label: 'PUT', value: 'PUT' },
        { label: 'DELETE', value: 'DELETE' },
        { label: 'PATCH', value: 'PATCH' }
      ],
      clearable: true,
      placeholder: '请选择请求方法'
    }
  },
  {
    name: 'connTimeout',
    type: 'input-num',
    label: '连接超时',
    value: 30000,
    attrs: {
      col: 1,
      clearable: true,
      placeholder: '请输入URL',
      step: 1000,
      min: 10000
    }
  },
  {
    name: 'readTimeout',
    type: 'input-num',
    label: '读取超时',
    value: 70000,
    attrs: {
      col: 1,
      clearable: true,
      placeholder: '请输入URL',
      min: 10000,
      step: 1000
    }
  }
]);
watch(
  forms.value,
  (list) => {
    list.forEach((item) => {
      panelData.value.function.formValues[item.name] = item.value;
    });
    panelData.value.function.forms = forms.value;
  },
  { deep: true }
);
const panelData = ref(
  props.targetNode.cell.getData()?.attrsData || {
    basicData: {
      name: props.targetNode.cell.getData().label,
      desc: ''
    },
    inputOutput: {
      input: {
        header: [
          // {
          //   label: '模型名称',
          //   name: 'modelName',
          //   'min-width': '150'
          // },
          // {
          //   label: '输入',
          //   name: 'input',
          //   'min-width': '150'
          // },
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '名称',
            name: 'name',
            'min-width': '150'
          },
          {
            label: '类型',
            name: 'type',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      },
      output: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      }
    },
    function: {
      formValues: {
        protocol: 'HTTP',
        url: '',
        requestType: 'GET',
        connTimeout: 30000,
        readTimeout: 70000
      },
      forms: forms.value,
      headers: [
        {
          key: '',
          value: ''
        }
      ]
    }
  }
);
function setNodeAttrData() {
  props.targetNode.cell.setData({
    attrsData: panelData.value
  });
}
watch(
  panelData.value,
  () => {
    setNodeAttrData();
  },
  { deep: true }
);
const dialogData = ref({
  title: '输入模型/属性引入'
});
const inputOutputDialog = ref({
  modelAttrs: {
    header: [{ label: '模型属性', name: 'modelAttrs', 'min-width': '150' }],
    data: dataBus[flowId.value]?.modelAttrs?.data || []
  },
  customAttrs: {
    header: [
      { label: 'ID', name: 'id', 'min-width': '150' },
      { label: '名称', name: 'name', 'min-width': '150' }
    ],
    data: dataBus[flowId.value]?.customAttrs?.data || []
  },
  models: {
    header: [{ label: '模型', name: 'model', 'min-width': '150' }],
    data: dataBus[flowId.value]?.models?.data || []
  }
});
function checkedAttrs(data) {
  console.log(data);
  panelData.value.inputOutput.output.table.data = data.customAttrs;
}
function closeSettingDialog() {
  showSetting.value = false;
}
function confirmSettingDialog() {
  closeSettingDialog();
}
const showSetting = ref(false);
</script>
<script>
export default {
  name: 'PanelHttp'
};
</script>
<style scoped lang="scss">
.form-title {
  color: rgba(0, 0, 0, 0.65);
  font-size: 16px;
  line-height: 32px;
  font-weight: 500;
  margin: 15px 0 8px;
}
.btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 20px 0;
}
</style>

src/views/_components/panel/PanelSql.vue

@@ -1,364 +0,0 @@
<template>
  <div class="panel-end">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基础" name="action">
        <!--  普通设置 -->
        <el-form
          :model="panelData.basicData"
          :rules="formRules"
          label-position="top"
        >
          <el-form-item label="服务名称" prop="name">
            <el-input
              v-model="panelData.basicData.name"
              placeholder="请输入场景名"
              @change="changeName"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务描述">
            <el-input
              v-model="panelData.basicData.desc"
              type="textarea"
              clearable
              :autosize="{ minRows: 10, maxRows: 20 }"
              maxlength="200"
              show-word-limit
              placeholder="请输入服务描述"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- 高级设置 -->
      </el-tab-pane>
      <el-tab-pane label="输入输出" name="input-output">
        <input-output-tab
          :input-output="panelData.inputOutput"
        ></input-output-tab>
      </el-tab-pane>
      <el-tab-pane label="功能" name="function">
        <div class="form-item">
          <div class="form-title">
            <h5>数据源</h5>
          </div>
          <common-select
            v-model="panelData.function.datasource"
            class="int-select"
            :props-map="propsMap"
            :options="datasources"
          ></common-select>
        </div>
        <div class="form-item">
          <div class="form-title">
            <h5>SQL脚本</h5>
            <el-button type="success" @click.stop="sqlEditor">
              脚本编辑器
            </el-button>
          </div>
          <el-input
            v-model="panelData.function.sql"
            v-bind="attributes"
            disabled
          ></el-input>
          <!-- <div class="editor">
            <my-code
              :editorValue="panelData.function.sql"
              @changeTextarea="changeTextarea"
            ></my-code>
          </div> -->
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
  <dialog-panel
    v-if="showSqlEditor"
    :dialog-data="dialogData"
    @confirm-dialog="confirmSqlDialog"
    @close-dialog="closeSqlEditor"
  >
    <!-- <el-input
      v-model="panelData.function.sql"
      v-bind="attributes"
    >
    </el-input> -->
    <div class="editor">
      <my-code
        :editor-value="panelData.function.sql"
        @update:editor-value="panelData.function.sql = $event"
        @change-textarea="changeTextarea"
        @code-editor-get-cursor="codeEditorGetCursor"
      ></my-code>
    </div>
  </dialog-panel>
</template>
<script setup>
// import DialogSqlEditor from '../dialog/DialogSqlEditor.vue'
import { getCurrentInstance, reactive, ref, watch } from 'vue';
import MyCode from '../_codemirror/MyCode.vue';
import InputOutputTab from './sql-components/InputOutputTab.vue';
import { getSqlList } from '../../../api/flow';
const { proxy } = getCurrentInstance();
const props = defineProps({
  targetNode: {
    type: Object,
    default: () => {}
  }
});
function changeName() {
  props.targetNode.cell.setData({
    label: panelData.value.basicData.name
  });
}
const nodePanelData = ref(props.targetNode.cell.getData()?.attrsData || null);
const panelData = ref(
  nodePanelData.value || {
    basicData: {
      name: props.targetNode.cell.getData().label,
      desc: ''
    },
    inputOutput: {
      input: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '名称',
            name: 'name',
            'min-width': '150'
          },
          {
            label: '类型',
            name: 'type',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      },
      output: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      }
    },
    function: {
      datasource: '',
      sql: ''
    }
  }
);
function changeTextarea(val) {
  console.log(val);
  panelData.value.function.sql = val;
}
function codeEditorGetCursor(codeData) {
  const pos1 = codeData.getCursor;
  const pos2 = {};
  // console.log('setCode pos1 === ', pos1);
  if (pos1) {
    pos2.line = pos1.line;
    pos2.ch = pos1.ch;
    codeData.codeE.setCursor(pos2); // 设置光标位置
    codeData.codeE.replaceRange('', pos2); // 替换光标位置的内容
  }
}
const activeName = ref('action');
const baseInit = () => {
  const basicData = ref(
    nodePanelData.value || {
      name: props.targetNode.cell.getData().label,
      desc: ''
    }
  );
  // 高级设置
  const seniorData = ref({
    nodeId: '',
    nextNode: ''
  });
  const formRules = reactive({
    name: [
      {
        required: true,
        message: '请输入服务名称',
        trigger: 'blur'
      },
      { min: 3, max: 100, message: '名称在3-100之间', trigger: 'blur' }
    ]
  });
  const showMoreSettings = ref(false);
  return {
    basicData,
    seniorData,
    formRules,
    showMoreSettings
  };
};
const { formRules } = baseInit();
// const sql = ref('')
// const datasource = ref('')
const datasources = ref([]);
const attributes = ref({
  type: 'textarea',
  autosize: { minRows: 20, maxRows: 50 }
});
// 脚本编辑器
const showSqlEditor = ref(false);
function sqlEditor() {
  showSqlEditor.value = true;
}
const dialogData = ref({
  title: 'SQL编辑器'
});
function closeSqlEditor() {
  showSqlEditor.value = false;
}
function confirmSqlDialog(data) {
  closeSqlEditor();
}
function setNodeAttrData() {
  props.targetNode.cell.setData({
    attrsData: panelData.value
  });
}
const propsMap = ref({
  value: 'sqlConn',
  label: 'showName'
});
// 获取数据库列表
function getList() {
  getSqlList()
    .then((res) => {
      if (res.data.resultCode === '0') {
        datasources.value = res.data.result.map((item) => {
          item.sqlConn = `business_${item?.id || ''}`;
          item.showName = `${item.code}-${item.name}-${item.ip || ''}${
            item.port || ''
          }${item.path || ''}`;
          return item;
        });
      } else {
        datasources.value = [];
        proxy.$message.error(res.data.resultMsg);
      }
    })
    .catch((err) => {
      console.log(err);
      datasources.value = [];
    });
}
getList();
watch(
  panelData.value,
  () => {
    setNodeAttrData();
  },
  { deep: true }
);
</script>
<script>
export default {
  name: 'PanelSql'
};
</script>
<style scoped lang="scss">
.form-item {
  .form-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 10px 0;
    h5 {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
.collapse {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 30px 0;
  .icon {
    margin: 0 10px;
    font-size: 16px;
  }
  .line {
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.09);
  }
}
// .editor{
//   width: 98%;
//   border: 1px solid rgba(0,0,0,0.1);
//   :deep(.CodeMirror-gutter){
//     width: 30px!important;
//   }
//   :deep(.CodeMirror-gutter-wrapper){
//     left: -30px!important;
//   }
//   :deep(.CodeMirror-code){
//     padding-left: 30px!important;
//   }
//   :deep(.CodeMirror-cursors){
//     left: 30px;
//   }
// }
.int-select {
  width: 100%;
}
</style>

src/views/_components/panel/PanelStart.vue

@@ -1,220 +0,0 @@
<template>
  <div class="panel-start">
    <el-tabs v-model="activeName">
      <el-tab-pane label="功能" name="action">
        <el-button type="success" @click="importData">引入</el-button>
        <common-table
          class="table"
          :table-header="tableHeader"
          :table-data="panelData.function.tableData"
        >
          <template #custom="scope">
            <!-- 删除 -->
            <el-popconfirm
              title="确定要移除该属性吗？"
              @confirm="confirmEvent(scope.row)"
              @cancel="cancelEvent"
            >
              <template #reference>
                <el-icon class="icon"><Delete></Delete></el-icon>
              </template>
            </el-popconfirm>
          </template>
        </common-table>
      </el-tab-pane>
    </el-tabs>
  </div>
  <!-- 引入弹窗 -->
  <dialog-panel
    v-if="showImport"
    :dialog-data="dialogData"
    @confirm-dialog="confirmModelDialog"
    @close-dialog="closeModelDialog"
  >
    <!-- 选择 -->
    <el-radio-group v-model="selectTab">
      <el-radio-button label="attributes">自定义属性</el-radio-button>
      <el-radio-button label="models">模型</el-radio-button>
    </el-radio-group>
    <!-- 数据展示 -->
    <common-table
      class="table"
      :table-header="table[selectTab].header"
      :table-data="table[selectTab].data"
      :is-check="true"
      @selection-change="handleSelectChange"
    ></common-table>
  </dialog-panel>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const dataBus = JSON.parse(localStorage.getItem('panelGlobal')) || {};
const flowId = computed(() => route.query.id);
const props = defineProps({
  targetNode: {
    type: Object,
    default: () => {}
  }
});
const nodePanelData = ref(props.targetNode.cell.getData()?.attrsData || null);
const panelData = ref(
  nodePanelData.value || {
    basicData: {},
    inputOutput: {},
    function: {
      tableData: []
    }
  }
);
const tableHeader = ref([
  {
    label: 'ID',
    name: 'id',
    'min-width': '150'
  },
  {
    label: '名称',
    name: 'name',
    'min-width': '150'
  },
  {
    label: '类型',
    name: 'type',
    'min-width': '150'
  },
  {
    label: '描述',
    name: 'desc',
    'min-width': '150'
  },
  {
    label: '操作',
    name: 'custom',
    type: 'custom',
    fixed: 'right',
    width: '100'
  }
]);
watch(
  panelData,
  () => {
    setNodeAttrData();
  },
  { deep: true }
);
// 存储到节点中
function setNodeAttrData() {
  props.targetNode.cell.setData({
    attrsData: panelData.value
  });
}
// 开始节点
function initStartNode() {
  const activeName = ref('action');
  // 引入
  const dialogData = ref({
    title: '引入'
  });
  const showImport = ref(false);
  function importData() {
    showImport.value = true;
  }
  function closeModelDialog() {
    showImport.value = false;
  }
  function confirmModelDialog() {
    panelData.value.function.tableData = checkedAttrs.value;
    closeModelDialog();
  }
  function confirmEvent(row) {
    panelData.value.function.tableData.forEach((item, index) => {
      if (item.id === row.id) {
        panelData.value.function.tableData.splice(index, 1);
      }
    });
  }
  function cancelEvent() {}
  return {
    activeName,
    dialogData,
    showImport,
    importData,
    confirmEvent,
    closeModelDialog,
    confirmModelDialog
  };
}
const {
  activeName,
  dialogData,
  showImport,
  importData,
  confirmEvent,
  closeModelDialog,
  confirmModelDialog
} = initStartNode();
// 设置弹窗信息
function setDialogInfo() {
  const selectTab = ref('attributes');
  const checkedAttrs = ref([]);
  const table = ref({
    models: {
      header: [
        {
          label: '模型',
          name: 'model',
          'min-width': '150'
        },
        {
          label: '已选属性',
          name: 'attributes',
          'min-width': '150'
        }
      ],
      data: []
    },
    attributes: {
      header: [
        {
          label: '属性',
          name: 'id',
          'min-width': '150'
        },
        {
          label: '名称',
          name: 'name',
          'min-width': '150'
        }
      ],
      data: dataBus?.[flowId.value]?.customAttrs?.data || []
    }
  });
  const handleSelectChange = (checkeds) => {
    checkedAttrs.value = checkeds;
  };
  return { selectTab, table, checkedAttrs, handleSelectChange };
}
const { selectTab, table, checkedAttrs, handleSelectChange } = setDialogInfo();
</script>
<script>
export default {
  name: 'PanelStart'
};
</script>
<style scoped lang="scss">
.table {
  margin-top: 10px;
}
</style>

src/views/_components/panel/PanelSubFlow.vue

@@ -1,169 +0,0 @@
<template>
  <div class="panel-end">
    <common-panel :panel-data="panelData" :target-node="targetNode">
      <template #input-output>
        <div class="content">
          <input-output-tab
            :input-output="panelData.inputOutput"
          ></input-output-tab>
        </div>
      </template>
      <template #function>
        <!-- 功能区域 -->
        <div class="form-item">
          <div class="form-title">
            <h5>子流程</h5>
          </div>
          <common-select
            v-model="panelData.function.datasource"
            class="int-select"
            :props-map="propsMap"
            :options="subflowList"
          ></common-select>
        </div>
        <div class="form-item">
          <div class="form-title">
            <h5>入参映射</h5>
          </div>
        </div>
        <div class="form-item">
          <div class="form-title">
            <h5>出参映射</h5>
          </div>
        </div>
      </template>
    </common-panel>
  </div>
</template>
<script setup>
import { ref, watchEffect, onMounted } from 'vue';
import CommonPanel from './common/CommonPanel.vue';
import InputOutputTab from './sql-components/InputOutputTab.vue';
import { getSubFlowList } from '../../../api/subflow';
const subflowList = ref([]);
const propsMap = ref({
  label: 'name',
  value: 'id'
});
const props = defineProps({
  targetNode: {
    type: Object,
    default: () => {}
  }
});
const nodePanelData = ref(props.targetNode.cell.getData()?.attrsData || null);
// 弹窗数据
const panelData = ref(
  nodePanelData.value || {
    basicData: {
      name: props.targetNode.cell.getData().label,
      desc: ''
    },
    inputOutput: {
      input: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '名称',
            name: 'name',
            'min-width': '150'
          },
          {
            label: '类型',
            name: 'type',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      },
      output: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      }
    },
    // 功能区域
    function: {
      subflowId: '',
      input: [],
      output: []
    }
  }
);
// 获取子流程列表
function getFlowList() {
  getSubFlowList().then((res) => {
    subflowList.value = res.result;
  });
}
watchEffect(() => {
  props.targetNode.cell.setData({
    attrsData: JSON.parse(JSON.stringify(panelData.value))
  });
});
onMounted(() => {
  getFlowList();
});
</script>
<script>
export default {
  name: 'PanelSubFlow'
};
</script>
<style scoped lang="scss">
.form-item {
  .form-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 10px 0;
    h5 {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
</style>

src/views/_components/panel/global/CustomDetail copy.vue

@@ -49,8 +49,8 @@ const typeList = reactive([
  { label: '日期', value: 'date' },
  { label: '时间', value: 'datetime' },
  { label: '长整数', value: 'long' },
  { label: 'object', value: 'object' },
  { label: 'array', value: 'array' }
  { label: '对象', value: 'object' },
  { label: '数组', value: 'array' }
]);
// 表达式列表

src/views/_components/panel/global/CustomDetail.vue

@@ -96,8 +96,8 @@ const typeList = reactive<any>([
  { label: '日期', value: 'date' },
  { label: '时间', value: 'datetime' },
  { label: '长整数', value: 'long' },
  { label: 'object', value: 'object' },
  { label: 'array', value: 'array' }
  { label: '对象', value: 'object' },
  { label: '数组', value: 'array' }
]);
const verificationList = reactive<any>([

src/views/_components/right-panel/PanelDataAggregation.vue

@@ -33,6 +33,7 @@
    <panel-data-assembly
      ref="dataAssembly"
      :data-source="inputData"
      :is-json-path="true"
    ></panel-data-assembly>
  </common-dialog>
</template>
@@ -94,7 +95,7 @@ function closeDialog() {
}
// 数据确认
function confirmDialog() {
  functionData.value.aggregate = dataAssembly.value.jsonData;
  functionData.value.aggregate = dataAssembly.value.jsonpathData;
  inputData.value = dataAssembly.value.treeData;
  showDataAssembly.value = false;
}
@@ -114,4 +115,8 @@ export default {
};
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.editor {
  height: 420px;
}
</style>

src/views/_components/right-panel/_components/PanelDataAssembly.vue

@@ -6,16 +6,24 @@
    <!--左树-->
    <div class="__left">
      <div class="__up">
        <h5 class="title">属性树形结构</h5>
        <h5 class="title">
          <span>属性树形结构</span>
          <div>
            <el-button size="small" @click.stop="expandAll">全部展开</el-button>
            <el-button size="small" @click.stop="clearAll">全部清除</el-button>
          </div>
        </h5>
        <div class="tree-content">
          <el-tree
            ref="myTree"
            :allow-drop="allowDrop"
            :allow-drag="allowDrag"
            :data="treeData"
            :expand-on-click-node="false"
            highlight-current
            draggable
            :default-expanded-keys="currentNodes"
            :default-expand-all="defaultExpandAll"
            node-key="uuid"
            @node-click="getCurrentNode"
            @node-contextmenu="cancelCurrent"
@@ -39,6 +47,7 @@
                  v-model="data.alias"
                  class="tree-int"
                  size="small"
                  @click.stop
                ></el-input>
                <common-icon
                  name="common-shanchu"
@@ -51,6 +60,16 @@
      </div>
      <div class="__down">
        <h5>后台jsonpath</h5>
        <div class="attr-content">
          <JsonEditor
            v-model="jsonpathData"
            class="editor"
            current-mode="code"
            :mode-list="['code']"
            @blur="validate"
          ></JsonEditor>
        </div>
        <h5 class="title">属性内容</h5>
        <div class="attr-content">
          <JsonEditor
@@ -65,7 +84,12 @@
    </div>
    <!--右列表-->
    <div class="__right">
      <h5 class="title">属性</h5>
      <h5 class="title">
        <span>数据总线</span>
        <el-button size="small" type="primary" @click.stop="quickCreate">
          快速创建
        </el-button>
      </h5>
      <ul class="tag-list">
        <li v-for="(item, index) in tagList" :key="index">
          <h5 class="tag-title">
@@ -82,12 +106,21 @@
                {{ tag.name }}
              </span>
            </template>
            <!-- <el-button size="small" @click.stop="">快速创建</el-button> -->
          </div>
        </li>
      </ul>
    </div>
  </div>
  <common-dialog
    v-if="showAttrDialog"
    title="新增自定义属性"
    @close-dialog="closeDialog"
    @confirm-dialog="confirmDialog"
  >
    <!-- 自定义属性 -->
    <CustomDetail ref="customDetail" :attr-info="attrInfo"></CustomDetail>
  </common-dialog>
</template>
<script setup lang="ts">
@@ -103,21 +136,24 @@ import JsonEditor from 'json-editor-vue3';
import { v4 as uuidv4 } from 'uuid';
import { useRoute } from 'vue-router';
import CustomDetail from '../../panel/global/CustomDetail.vue';
const { proxy } = getCurrentInstance();
const route = useRoute();
const systemId = route.query.id;
const dataBus = JSON.parse(localStorage.getItem('panelGlobal'))?.[
  `${systemId}`
];
const customAttrs = dataBus?.customAttrs?.data || [];
console.log(customAttrs);
const panelGlobal = JSON.parse(localStorage.getItem('panelGlobal'));
const dataBus = panelGlobal?.[`${systemId}`];
const customAttrs = ref<any>(dataBus?.customAttrs?.data || []);
const props = defineProps({
  dataSource: {
    type: Array,
    default: () => []
  },
  isJsonPath: {
    type: Boolean,
    default: () => false
  }
});
// 源数据
@@ -134,6 +170,7 @@ const tagList = ref<any>([
]);
const treeData = ref<any>([...props.dataSource] || []);
const jsonData = ref<any>({});
const jsonpathData = ref<any>({});
const currentNode = ref<any>({});
const myTree = ref<any>(null);
@@ -144,14 +181,16 @@ function formateSourceData(data: any) {
    data.forEach((tag: any) => {
      if (tag.type === item.type) {
        tag.alias = '';
        item.tags.push(tag);
        if (!item.tags.some((el: any) => el.id === tag.id)) {
          item.tags.push(tag);
        }
      }
    });
    return item;
  });
}
formateSourceData(customAttrs);
formateSourceData(customAttrs.value);
/**
 * el-tree拖拽start
 */
@@ -175,7 +214,7 @@ const allowDrag = (draggingNode: any) => {
  console.log(draggingNode);
  return true;
};
const defaultExpandAll = ref(false);
function handleDragStart() {}
function handleDragEnter() {}
function handleDragLeave() {}
@@ -183,6 +222,15 @@ function handleDragOver() {}
function handleDragEnd() {}
function handleDrop() {}
// 展开全部
function expandAll() {
  defaultExpandAll.value = true;
}
// 清除树组件数据
function clearAll() {
  treeData.value = [];
}
// 获取当前节点
function getCurrentNode(node: any) {
  if (currentNode.value === node) {
@@ -207,10 +255,25 @@ function handleClickTag(tag: any) {
    type: tag.type,
    children: []
  };
  if (tag.type === 'array') {
    proxy
      .$confirm('需要创建有迭代器的数组吗？', '提示', {
        confirmButtonText: '是的',
        cancelButtonText: '不是',
        type: 'warning'
      })
      .then(() => {
        newChild.type = 'array-interator';
      })
      .catch(() => {
        newChild.type = 'array-null';
      });
  }
  if (currentNode.value?.type) {
    if (
      currentNode.value?.type === 'object' ||
      currentNode.value?.type === 'array'
      currentNode.value?.type.indexOf('array') > -1
    ) {
      if (
        !currentNode.value.children.some((el: any) => el.name === newChild.name)
@@ -228,11 +291,12 @@ function handleClickTag(tag: any) {
  } else {
    treeData.value.push(newChild);
  }
  console.log(JSON.stringify(treeData.value));
  nextTick(() => {
    myTree.value.setCurrentKey(currentNode.value.uuid);
  });
  // myTree.value.updateKeyChildren(treeData.value[0]);
  // console.log(myTree.value.getCurrentKey());
}
function cancelCurrent() {
@@ -266,6 +330,8 @@ const defaultvalueMap = <any>{
  int: 0,
  boolean: false,
  array: [],
  'array-interator': [],
  'array-null': [],
  long: 0,
  date: '',
  datetime: '',
@@ -273,19 +339,103 @@ const defaultvalueMap = <any>{
};
// 数据处理
function tree2json(data: any[], type: 'array' | 'object'): any {
function tree2json(
  data: any[],
  type: 'array-interator' | 'array-null' | 'object'
): any {
  const obj: any = {};
  data.forEach((item) => {
    const { children } = item;
    if (children && children.length) {
      const childType = item.type;
      obj[item.id] = tree2json(children, childType as 'array' | 'object');
    } else {
      // obj[item.name] = assignment(item.type);
      obj[item.id] = defaultvalueMap[item.type];
  data.map(({ children = [], type, alias, id }) => {
    const key = alias || id;
    obj[key] = children.length
      ? tree2json(children, type)
      : defaultvalueMap[type];
    return null;
  });
  return type.indexOf('array') > -1 ? [obj] : obj;
}
/**
 *
 * @param data 数据源
 * @param type 数据类型
 * 方法说明：
 * 1. 正常取值转换，通过对databus中的基础数据进行直接赋值的操作；
 * 2. 对象型数据转换，从模型中取数进行数据的赋值；
 * 3. 数组数据转换；1）需要迭代器的数据格式；2）不需要迭代器的数据格式；
 */
// tree to jsonpath
function arrayNullFunc(item: any) {
  const { children, id } = item;
  let values;
  if (children.length) {
    values = children.map((child: any) => {
      if (child.type === 'array-null' && child.children.length) {
        const childKey = child.alias || child.id;
        return {
          [childKey]: {
            _$$_isInterator: false,
            _$$_interator: '',
            values: arrayNullFunc(child)
          }
        };
      }
      if (
        (child.type === 'object' || child.type === 'array-interator') &&
        child.children.length
      ) {
        // eslint-disable-next-line no-use-before-define
        return tree2Jsonpath(child.children);
      }
      return `$.${child.id}`;
    });
  } else {
    values = `$.${id}`;
  }
  return values;
}
function tree2Jsonpath(data: any) {
  const result = {};
  const typeMap = {
    'array-null': (item: any) => {
      const { id, alias } = item;
      const key = alias || id;
      const values = arrayNullFunc(item);
      result[key] = {
        _$$_isInterator: false,
        _$$_interator: '',
        values
      };
    },
    'array-interator': (item: any) => {
      const { children, id, alias } = item;
      const key = alias || id;
      result[key] = {
        _$$_isInterator: true,
        _$$_interator: `$.${id}`,
        values: [tree2Jsonpath(children)]
      };
    },
    object: (item: any) => {
      const { children, id, alias } = item;
      const key = alias || id;
      result[key] = tree2Jsonpath(children);
    },
    default: (item: any) => {
      const { id, alias } = item;
      const key = alias || id;
      result[key] = `$.${id}`;
    }
  };
  data.forEach((item: any) => {
    const { type } = item;
    const fn = typeMap[type] || typeMap.default;
    fn(item);
  });
  return type === 'array' ? [obj] : obj;
  return result;
}
function validate() {}
@@ -294,14 +444,48 @@ watch(
  () => {
    if (treeData.value?.length) {
      jsonData.value = tree2json(treeData.value, 'object');
      // myTree.value.setCurrentKey(currentNode.value.uuid);
      jsonpathData.value = tree2Jsonpath(treeData.value);
    } else {
      currentNode.value = {};
      jsonData.value = {};
      jsonpathData.value = {};
    }
  },
  { deep: true }
);
// 快速创建databus数据
const attrInfo = ref<any>([]);
const showAttrDialog = ref<any>(false);
const customDetail = ref<any>(null);
function quickCreate() {
  showAttrDialog.value = true;
}
// 关闭弹窗
function closeDialog() {
  showAttrDialog.value = false;
}
function confirmEvent() {}
const btns = [
  // { label: '编辑', name: 'edit', onClick: editFn },
  { label: '删除', name: 'delete', onClick: confirmEvent }
];
// 确认弹窗
function confirmDialog() {
  const data = customDetail.value.attrList;
  data.forEach((item: any) => {
    if (!customAttrs.value.some((el: any) => el.id === item.id)) {
      item.actions = btns;
      customAttrs.value.push(item);
    }
  });
  formateSourceData(customAttrs.value);
  dataBus.customAttrs.data = customAttrs.value;
  panelGlobal[`${systemId}`] = dataBus;
  localStorage.setItem('panelGlobal', JSON.stringify(panelGlobal));
  closeDialog();
}
const currentNodes = ref<any>([]);
watch(
@@ -314,12 +498,14 @@ watch(
defineExpose({
  treeData,
  jsonData
  jsonData,
  jsonpathData
});
onMounted(() => {
  if (treeData.value?.length) {
    jsonData.value = tree2json(treeData.value, 'object');
    jsonpathData.value = tree2Jsonpath(treeData.value);
  } else {
    currentNode.value = {};
  }
@@ -337,7 +523,11 @@ onMounted(() => {
    width: calc(60% - 7px);
    .__up {
      height: calc(50% - 20px);
      .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
      }
      .tree-content {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.15);
@@ -371,7 +561,12 @@ onMounted(() => {
  .__right {
    width: calc(40% - 8px);
    height: 100%;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }
    .tag-list {
      background-color: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.15);

src/views/_components/right-panel/_components/PanelNodeIO.vue

@@ -25,12 +25,13 @@
    <panel-data-assembly
      ref="dataAssembly"
      :data-source="inputData.data"
      :is-json-path="isJsonPath"
    ></panel-data-assembly>
  </common-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { ref, watch, computed } from 'vue';
import PanelDataAssembly from './PanelDataAssembly.vue';
const showDataAssembly = ref<any>(false);
@@ -69,6 +70,11 @@ const props = defineProps({
    default: () => 'input'
  }
});
const isJsonPath = computed(
  () =>
    ['polymerization'].includes(props.targetNode.cell.getData().id) &&
    props.inputType === 'function'
);
const nodePanelData = ref<any>(
  props.targetNode.cell.getData()?.attrsData || null