update： 修改bread数据展示 + 组件切换

package-lock.json

@@ -480,9 +480,9 @@
      "integrity": "sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg=="
    },
    "@floating-ui/core": {
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.4.tgz",
      "integrity": "sha512-SQOeVbMwb1di+mVWWJLpsUTToKfqVNioXys011beCAhyOIFtS+GQoW4EQSneuxzmQKddExDwQ+X0hLl4lJJaSQ=="
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.5.tgz",
      "integrity": "sha512-qrcbyfnRVziRlB6IYwjCopYhO7Vud750JlJyuljruIXcPxr22y8zdckcJGsuOdnQ639uVD1tTXddrcH3t3QYIQ=="
    },
    "@floating-ui/dom": {
      "version": "1.2.5",
@@ -591,11 +591,6 @@
        "fastq": "^1.6.0"
      }
    },
    "@popperjs/core": {
      "version": "npm:@sxzz/popperjs-es@2.11.7",
      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
    },
    "@rollup/pluginutils": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -1521,9 +1516,9 @@
      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
    },
    "common-module-ui": {
      "version": "0.0.13",
      "resolved": "https://registry.npmjs.org/common-module-ui/-/common-module-ui-0.0.13.tgz",
      "integrity": "sha512-LjK7Vol/8BiCcf6h3iRyiH7NEwdNkITjTs5yFndfCthwJ3ZEnp+ynak6U5QVra9OcR5McqeK2ihaYQVQc7M0Hw==",
      "version": "0.0.14",
      "resolved": "https://registry.npmjs.org/common-module-ui/-/common-module-ui-0.0.14.tgz",
      "integrity": "sha512-haF7AX0Qsc6FLpJ8LsY79h6VkcFMwEzI9alMHLm+O6/ReTtBxadhaHUwaL6LJGuc0KxzDsbo6hvqglpnMSAqfA==",
      "requires": {
        "@element-plus/icons-vue": "^2.0.10",
        "@typescript-eslint/parser": "^5.42.1",
@@ -1872,6 +1867,13 @@
        "lodash-unified": "^1.0.2",
        "memoize-one": "^6.0.0",
        "normalize-wheel-es": "^1.2.0"
      },
      "dependencies": {
        "@popperjs/core": {
          "version": "npm:@sxzz/popperjs-es@2.11.7",
          "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
          "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
        }
      }
    },
    "emoji-regex": {

package.json

@@ -24,7 +24,7 @@
    "axios": "^1.1.3",
    "code-mirror-themes": "^1.0.0",
    "codemirror": "^5.65.2",
    "common-module-ui": "0.0.13",
    "common-module-ui": "0.0.14",
    "eslint": "^8.27.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.5.0",

src/App.vue

@@ -13,7 +13,7 @@
    :commonds="commonds"
    :is-collapse="isCollapse"
    :aside-width="asideWidth"
    :breads="route.meta.breadcrumb"
    :breads="breadData"
    @handle-change-collapse="handleChangeCollapse"
  >
    <!-- <template #breadLeft>
@@ -25,10 +25,19 @@
  </common-layer>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ref, computed, watch } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import logoImg from './assets/images/logo.svg';
const store = useStore();
const route = useRoute();
const routeMetaBread = computed(() => route.meta.breadcrumb);
const breadData = computed(() => store.getters.breadData);
console.log(store);
const menuList = ref<any>([
  {
    label: '流程编排',
@@ -57,7 +66,6 @@ const headerInfo = ref<any>({
  title: '快键 服务逻辑编排',
  logo: logoImg
});
const route = useRoute();
const userInfo = ref<any>({
  userAccount: 'deployer'
@@ -77,6 +85,21 @@ function handleChangeCollapse(collapse: any) {
    asideWidth.value = '260px';
  }
}
const exposePath = <any>['/flow-module', '/flow-detail'];
watch(
  route,
  () => {
    console.log(route.path);
    console.log(exposePath.includes(route.path));
    if (!exposePath.includes(route.path)) {
      store.commit('setBreadData', routeMetaBread.value);
    }
  },
  { deep: true }
);
</script>
<style>

src/components/index.ts

@@ -0,0 +1,5 @@
import IpuTable from './table/IpuTable.vue';
export function setupGlobalComponents(app: any) {
  app.component('IpuTable', IpuTable);
}

src/components/table/IpuTable.vue

@@ -0,0 +1,206 @@
<template>
  <el-table
    ref="ipuTable"
    class="g-table"
    :data="tableData"
    :header-cell-style="headerCellStyle"
    :cell-style="cellStyle"
    v-bind="tableAttrs"
    @current-change="handleCurrentRowChange"
    @selection-change="handleSelectionChange"
  >
    <template #empty>
      <el-empty description="暂无数据"></el-empty>
    </template>
    <el-table-column
      v-if="isCheck"
      type="selection"
      width="55"
    ></el-table-column>
    <template v-for="header in tableHeader" :key="header?.name">
      <!-- 自自定义按钮 -->
      <el-table-column
        v-if="header?.type === 'selection'"
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        v-else-if="header?.type"
        :prop="header?.name"
        :label="header?.label"
        :width="header?.width"
        :min-width="header?.minWidth"
        :sortable="header?.sortable || false"
        :fixed="header?.fixed || false"
        :align="header?.position || 'left'"
      >
        <template #default="scope">
          <!-- <component :is="header.component" :value="scope.row"></component> -->
          <!-- 自定义按钮  -->
          <table-column
            :header="header"
            :row="scope.row"
            :is-disable="isDisable"
            @change-event="changeEvent"
            @blur-event="blurEvent"
            @svgEvent="svgEvent"
          ></table-column>
          <!-- 按钮 -->
          <slot :name="header.name" :row="scope.row"></slot>
        </template>
      </el-table-column>
      <!-- 普通样式 -->
      <el-table-column
        v-else
        :prop="header?.name"
        show-overflow-tooltip
        :label="header?.label"
        :width="header?.width"
        :min-width="header?.minWidth"
        :sortable="header?.sortable || false"
        :align="header?.position || 'left'"
        :fixed="header?.fixed || false"
      >
        <template #default="scope">
          {{
            scope.row[header?.name] || scope.row[header?.name] === 0
              ? scope.row[header?.name]
              : '-'
          }}
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>
<script setup>
import { ref } from 'vue';
import TableColumn from './TableColumn.vue';
defineProps({
  tableHeader: {
    type: Array,
    default: () => []
  },
  tableData: {
    type: Array,
    default: () => []
  },
  tableAttrs: {
    type: Object,
    default: () => {}
  },
  isCheck: {
    type: Boolean,
    default: () => false
  },
  isDisable: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits([
  'changeEvent',
  'blurEvent',
  'handleCurrentRowChange',
  'svgEvent',
  'handleSelectionChange'
]);
const cellStyle = ref({
  padding: '0 2px',
  height: '60px',
  'line-height': '60px',
  'font-size': '14px'
});
const headerCellStyle = ref({
  padding: '0 2px',
  height: '39px',
  'font-weight': '600',
  'font-size': '14px',
  'line-height': '39px',
  color: '#000',
  'background-color': '#fafafa'
});
const changeEvent = (form) => {
  emits('changeEvent', form);
};
// 触发blur事件
const blurEvent = (form) => {
  emits('blurEvent', form);
};
const ipuTable = ref(null);
// 选中当前行
function handleCurrentRowChange(row) {
  // console.log(row)
  emits('handleCurrentRowChange', row);
}
function handleSelectionChange(row) {
  emits('handleSelectionChange', row);
}
function svgEvent(row) {
  emits('svgEvent', row);
}
function setCurrent(rows) {
  if (rows) {
    rows.forEach((row) => {
      ipuTable.value?.toggleRowSelection(row);
    });
  }
}
function setSingleCurrent(row) {
  if (row) {
    setTimeout(() => {
      ipuTable.value?.setCurrentRow(row);
    }, 10);
  }
}
// 反选
defineExpose({
  ipuTable,
  setCurrent,
  setSingleCurrent
});
</script>
<style scoped lang="scss">
:deep(.el-table__inner-wrapper) {
  font-size: 14px;
  .el-table__header-wrapper {
    font-size: 14px;
    thead tr {
      font-size: 14px;
    }
  }
}
.el-table {
  width: 100%;
}
// 消除table横向滚动条
// :deep(.is-horizontal){
//   .el-scrollbar__thumb{
//     display: none;
//   }
// }
:deep(.el-tooltip) {
  display: flex;
}
:deep(.current-row) {
  position: relative;
  background: rgba(25, 130, 255, 0.04);
  &:after {
    content: '';
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    background: #2d98ff;
    z-index: 1000;
  }
}
</style>

src/components/table/TableColumn.vue

@@ -0,0 +1,285 @@
<!-- eslint-disable vue/no-mutating-props -->
<template>
  <!-- input -->
  <el-input
    v-if="header?.type === 'input'"
    v-model="row[header.name]"
    v-bind="header?.attrs"
    @blur="blurEvent(header)"
    @change="changeEvent(header)"
  ></el-input>
  <!-- select -->
  <common-select
    v-if="header?.type === 'select'"
    v-model="row[header.name]"
    v-bind="header?.attrs"
    @change="changeEvent(header)"
  ></common-select>
  <div
    :class="[
      header?.attrs?.isShow ? 'color-picker-wrapper' : 'color-picker-noWrapper'
    ]"
  >
    <!-- 取色器 color-picker -->
    <el-color-picker
      v-if="header?.type === 'color-picker'"
      v-bind="header?.attrs"
      v-model="row[header.name]"
      :predefine="predefineColors"
      @change="changeEvent(header)"
    ></el-color-picker>
    <span v-if="header?.attrs?.isShow" class="color-des">
      {{ row[header.name].slice(1) }}
    </span>
  </div>
  <!--时间选择器-->
  <el-date-picker
    v-if="header?.type === 'date-picker'"
    v-bind="header?.attrs"
    v-model="row[header.name]"
    @change="changeEvent(header)"
  ></el-date-picker>
  <!-- 数字 -->
  <el-input-num
    v-if="header?.type === 'input-num'"
    v-bind="header?.attrs"
    v-model="row[header.name]"
    controls-position="right"
    @change="changeEvent(header)"
    @blur="blurEvent(header)"
  ></el-input-num>
  <!-- radio -->
  <el-radio
    v-if="header?.type === 'radio'"
    v-bind="header?.attrs"
    v-model="row[header.name]"
    @change="changeEvent(header)"
  ></el-radio>
  <!-- switch -->
  <el-switch
    v-if="header?.type === 'switch'"
    v-bind="header?.attrs"
    v-model="row[header.name]"
    :radios="row[header.name]"
    @change="changeEvent(header)"
  ></el-switch>
  <!-- checkox -->
  <el-checkbox
    v-if="header?.type === 'checkbox'"
    v-bind="header?.attrs"
    v-model="row[header.name]"
    @change="changeEvent(header)"
  ></el-checkbox>
  <!-- 接收传入的行间样式修改颜色 -->
  <span
    v-if="header?.type === 'color'"
    :class="row[header?.name]"
    v-bind="header?.attrs"
  ></span>
  <!-- linkPage回调由父组件传入，父组件可以自定义回调的执行 -->
  <span v-if="header?.type === 'link'" class="link" @click="linkEvent(row)">
    {{ row[header?.name] }}
  </span>
  <!-- 在线状态 在线与离线 -->
  <el-tag
    v-if="header?.type === 'onlineStatus'"
    v-model="row[header?.name]"
    :type="
      row[header?.name] === '在线' || row[header?.name] === '启用'
        ? 'success'
        : 'danger'
    "
    effect="light"
    round
  >
    <common-icon
      :name="
        row[header?.name] === '在线' || row[header?.name] === '启用'
          ? 'success'
          : 'danger'
      "
      :size="header?.attrs?.size"
      class="point"
    ></common-icon>
    <span class="svg-content">
      {{ row[header?.name] }}
    </span>
  </el-tag>
  <!-- 已发布与未发布 -->
  <el-tag
    v-if="header?.type === 'publishStatus'"
    v-model="row[header?.name]"
    :type="row[header?.name] === '已发布' ? 'success' : 'info'"
    effect="light"
    round
  >
    <common-icon
      :name="row[header?.name] === '已发布' ? 'success' : 'info'"
      :size="header?.attrs?.size"
      class="point"
    ></common-icon>
    <span class="svg-content">
      {{ row[header?.name] }}
    </span>
  </el-tag>
  <!-- 文字展示 -->
  <div v-if="header?.type === 'link-text'" class="link-text">
    <span class="link-left">{{ row[header.name] }}</span>
    <span v-if="!header?.svg" class="link-right" @click="checkDevice(row)">
      {{ header?.description }}
    </span>
    <common-icon
      v-if="header?.svg && row['valueTypeDisplay'] === '数字'"
      class="link-right my-svg"
      :name="header?.svg"
      :class="isDisable ? 'disabled' : ''"
      @click="svgEvent(row)"
    ></common-icon>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const predefineColors = ref(['#D9D9D9', '#5AC285', '#ED9248', '#E53E3E']);
defineProps({
  header: {
    type: Object,
    default: () => {}
  },
  row: {
    type: Object,
    default: () => {}
  },
  isDisable: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits([
  'changeEvent',
  'blurEvent',
  'linkEvent',
  'svgEvent',
  'checkDevice'
]);
const changeEvent = (form) => {
  emits('changeEvent', form);
};
// 触发blur事件
const blurEvent = (form) => {
  emits('blurEvent', form);
};
// 触发link事件
const linkEvent = (row) => {
  emits('linkEvent', row);
};
// 触发svg事件
const svgEvent = (row) => {
  emits('svgEvent', row);
};
// 查看设备
function checkDevice(row) {
  emits('checkDevice', row);
}
</script>
<style scoped lang="scss">
.red {
  width: 44px;
  height: 10px;
  display: inline-block;
  background: #f34871;
}
.blue {
  width: 44px;
  height: 10px;
  display: inline-block;
  background: #2d98ff;
}
.point {
  margin: 0 4px 2.5px 0;
}
.link-text {
  width: 85px;
  display: flex;
  justify-content: space-between;
  .link-left,
  .link-right {
    font-size: 14px;
  }
  .link-right {
    cursor: pointer;
    color: #2d98ff;
  }
}
.color-picker-wrapper {
  width: 101px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-right: 5px;
}
.color-picker-noWrapper {
  display: inline-block;
}
.color-picker-wrapper {
  :deep(.el-color-picker__trigger) {
    padding: 1px;
    border: none;
    .el-color-picker__color {
      border: none;
    }
    .el-color-picker__color-inner {
      border-radius: 5px;
      .el-icon {
        font-size: 0;
      }
    }
  }
  .color-des {
    font-size: 14px;
  }
}
.ipu-svg {
  width: 6px;
  height: 6px;
  margin-top: 5px;
}
.svg-content {
  margin-left: 4px;
}
.link {
  color: #2d98ff;
  cursor: pointer;
}
.my-svg {
  width: 20px;
  height: 20px;
  position: relative;
  bottom: 4px;
}
.disabled {
  color: #cccccc !important;
  cursor: not-allowed !important;
}
</style>

src/main.ts

@@ -10,6 +10,8 @@ import CommonUI from 'common-module-ui';
import 'common-module-ui/lib/style.css';
import { setEventBus } from './utils/eventBus.js';
import { setupGlobalComponents } from './components/index';
// import CommonUI from './common-ui/common-module-ui.js';
// import './common-ui/style.css';
import App from './App.vue';
@@ -36,7 +38,10 @@ function render(props: any = {}) {
  setEventBus(app);
  app.use(router);
  app.use(CommonUI);
  console.log(CommonUI);
  app.use(store);
  setupGlobalComponents(app);
  // 注册项目全局组件
  setupProductComponents(app);

src/store/getters.ts

@@ -12,6 +12,8 @@ export const token = (s: any) => s.token;
export const userInfo = (s: any) => s.userInfo;
export const showInfo = (s: any) => s.showInfo;
export const breadData = (s: any) => s.breadData;
export const mainProduct = (s: any) => s.mainProduct;
export default {
@@ -20,5 +22,6 @@ export default {
  systemIcon,
  token,
  userInfo,
  showInfo
  showInfo,
  breadData
};

src/store/mutation_types.ts

@@ -12,3 +12,4 @@ export const CHANGE_TOKEN = 'changeToken';
export const CHANGE_USER_INFO = 'changeUserInfo';
export const CHANGE_SHOW_INFO = 'changeShowInfo';
export const SET_MAIN_PRODUCT = 'setMainProduct';
export const SET_BREAD_DATA = 'setBreadData';

src/store/mutations.ts

@@ -28,5 +28,10 @@ export default {
  },
  [types.CHANGE_SHOW_INFO](state: any, data: any) {
    state.showInfo = data;
  },
  [types.SET_BREAD_DATA](state: any, data: any) {
    console.log(state);
    state.breadData = data;
  }
};

src/store/state.ts

@@ -13,5 +13,6 @@ export default {
  showInfo: false,
  mainProduct: JSON.parse(localStorage.getItem('mainProduct') || '{}'),
  userInfo: {}
  userInfo: {},
  breadData: []
};

src/views/_components/_flow/Index.vue

@@ -29,7 +29,7 @@
<script setup>
import { ref, getCurrentInstance, onMounted, nextTick, watchEffect } from 'vue';
/** x6相关start */
import { Graph, Dom, Point } from '@antv/x6';
import { Graph, Dom, Point, Shape } from '@antv/x6';
import { Snapline } from '@antv/x6-plugin-snapline';
import { Clipboard } from '@antv/x6-plugin-clipboard';
import { Keyboard } from '@antv/x6-plugin-keyboard';
@@ -103,7 +103,79 @@ function initGraph() {
      allowLoop: false, // 是否允许循环创建节点
      allowPort: true, // 是否允许边链接到链接桩，
      allowNode: false,
      highlight: true
      highlight: true,
      // snap: true, // 自动吸附（50px）
      createEdge() {
        return new Shape.Edge({
          attrs: {
            line: {
              stroke: '#B1B1B1',
              strokeWidth: 1,
              targetMarker: {
                name: 'block',
                width: 5,
                height: 9
              }
            }
          },
          router: 'custom',
          zIndex: 0,
          connector: {
            name: '',
            args: {
              radius: 90
            }
          }
        });
      },
      //  判断节点是否可被连接
      validateConnection({ sourcePort, targetPort, sourceCell, targetCell }) {
        const data = targetCell.getData();
        // @: xx类型节点不被连接 start节点不能被连接
        if (data.name === 'start') {
          return false;
        }
        const tartgetPorts = targetCell.getPorts();
        const sourcePorts = sourceCell.getPorts();
        /**
         * 1. 如果源点的group为input时，不允许连接
         * 2. 如果target的group为output时，不允许连接
         */
        if (
          sourcePorts.filter((el) => el.id === sourcePort)?.[0].group ===
          'input'
        ) {
          // proxy.$utils.ipuMessage('不能从输入节点进行连线！', 'error')
          return false;
        }
        if (
          tartgetPorts.filter((el) => el.id === targetPort)?.[0].group ===
          'output'
        ) {
          // proxy.$utils.ipuMessage('不能连接输出节点！', 'error')
          return false;
        }
        return true;
      },
      // 限制链接桩只能链接一条边（需在ports中设置connectionCount）
      validateMagnet({ magnet, cell }) {
        let count = 0;
        const connectionCount = magnet.getAttribute('connection-count');
        const max = connectionCount ? parseInt(connectionCount, 10) : 1;
        if (max === 0) {
          proxy.$utils.ipuMessage('请配置路由分发节点！', 'error');
        }
        const outgoingEdges = graph.value.getOutgoingEdges(cell);
        if (outgoingEdges) {
          outgoingEdges.forEach((edge) => {
            const edgeView = graph.value.findViewByCell(edge);
            if (edgeView.sourceMagnet === magnet) {
              count += 1;
            }
          });
        }
        return count < max;
      }
    },
    // 节点拖拽到另外一个节点中
    embedding: {
@@ -179,13 +251,25 @@ const TeleportContainer = getTeleport();
const customNodes = [
  {
    name: 'custom-node',
    name: 'flow-start-node',
    component: CustomeNode,
    w: 100,
    h: 100
  },
  {
    name: 'branch-node',
    name: 'flow-end-node',
    component: CustomeNode,
    w: 100,
    h: 100
  },
  {
    name: 'flow-input-node',
    component: CustomeNode,
    w: 100,
    h: 100
  },
  {
    name: 'flow-route-node',
    component: BranchNode,
    w: 200,
    h: 100
@@ -208,7 +292,7 @@ registerNode();
const dragStartNode = (target, e) => {
  if (target.name === 'start') {
    const node = new CreateNodeClass(
      'custom-node',
      'flow-start-node',
      graph.value,
      target
    ).createStartNode();
@@ -219,7 +303,7 @@ const dragStartNode = (target, e) => {
const dragEndNode = (target, e) => {
  if (target.name === 'end') {
    const node = new CreateNodeClass(
      'custom-node',
      'flow-end-node',
      graph.value,
      target
    ).createEndNode();
@@ -234,7 +318,7 @@ const dragInputNode = (target, e) => {
    target.type === 'route'
  ) {
    const node = new CreateNodeClass(
      'custom-node',
      'flow-input-node',
      graph.value,
      target
    ).createNormalNode();
@@ -246,7 +330,7 @@ const dragInputNode = (target, e) => {
const dragBranchNode = (target, e) => {
  if (target.id === 'branch') {
    const node = new CreateNodeClass(
      'branch-node',
      'flow-route-node',
      graph.value,
      target
    ).createBranchNode();
@@ -427,6 +511,9 @@ function initEvent(graph) {
  });
}
function centerContent() {
  graph.value.centerContent();
}
// 异步渲染数据
const graphData = ref(JSON.parse(props.flowData?.jsonData || '{}'));
// 初始化形状
@@ -434,6 +521,7 @@ function initGraphShape() {
  if (graph.value) {
    graph.value.fromJSON([]);
    graph.value.fromJSON(graphData.value);
    centerContent();
  }
}

src/views/_components/_flow/nodes.js

@@ -9,7 +9,7 @@ export default {
          id: 'start',
          label: '开始',
          type: 'global',
          icon: 'tool-start',
          icon: 'flow-start',
          isStartNode: true,
          attrsData: {}
        },
@@ -18,7 +18,7 @@ export default {
          id: 'end',
          label: '结束',
          type: 'global',
          icon: 'tool-end',
          icon: 'flow-end',
          isStartNode: false,
          attrsData: {}
        }
@@ -33,7 +33,7 @@ export default {
          id: 'sql',
          label: 'SQL',
          type: 'logic',
          icon: 'tool-sql',
          icon: 'flow-sql',
          isStartNode: false,
          attrsData: {}
        },
@@ -42,7 +42,7 @@ export default {
          id: 'expression',
          label: '表达式',
          type: 'logic',
          icon: 'tool-expression',
          icon: 'flow-expression',
          isStartNode: false,
          attrsData: {}
        },
@@ -51,7 +51,7 @@ export default {
          id: 'branch',
          label: '分支',
          type: 'branch',
          icon: 'tool-if',
          icon: 'flow-if',
          isStartNode: false,
          attrsData: {}
        },
@@ -60,7 +60,7 @@ export default {
          id: 'subprocess',
          label: '子流程',
          type: 'logic',
          icon: 'tool-subprocess',
          icon: 'flow-subprocess',
          isStartNode: false,
          attrsData: {}
        }
@@ -69,7 +69,7 @@ export default {
        //   id: 'logic',
        //   label: '逻辑',
        //   type: 'logic',
        //   icon: 'tool-logic',
        //   icon: 'flow-logic',
        //   isStartNode: false,
        //   attrsData: {}
        // }
@@ -84,7 +84,7 @@ export default {
          id: 'foreach',
          label: '循环',
          type: 'data-processing',
          icon: 'tool-foreach',
          icon: 'flow-foreach',
          isStartNode: false,
          attrsData: {}
        },
@@ -93,7 +93,7 @@ export default {
          id: 'action',
          label: '业务行为',
          type: 'data-processing',
          icon: 'tool-action',
          icon: 'flow-action',
          isStartNode: false,
          attrsData: {}
        },
@@ -102,7 +102,7 @@ export default {
          id: 'function',
          label: '函数',
          type: 'data-processing',
          icon: 'tool-function',
          icon: 'flow-function',
          isStartNode: false,
          attrsData: {}
        },
@@ -111,7 +111,7 @@ export default {
          id: 'polymerization',
          label: '数据聚合',
          type: 'data-processing',
          icon: 'tool-polymerization',
          icon: 'flow-polymerization',
          isStartNode: false,
          attrsData: {}
        },
@@ -120,7 +120,7 @@ export default {
          id: 'http',
          label: 'HTTP接口',
          type: 'data-processing',
          icon: 'tool-http',
          icon: 'flow-http',
          isStartNode: false,
          attrsData: {}
        }

src/views/_components/node/BranchNode.vue

@@ -3,11 +3,11 @@
    <!-- <h5 class="node-title">分支节点</h5> -->
    <ul class="branch-list">
      <li v-for="(item, index) in caseList" :key="index" class="branch-item">
        <ipu-svg name="flow-if" class="icon" size="16"></ipu-svg>
        <common-icon name="flow-if" class="icon" size="16"></common-icon>
        <span>case: {{ item.name }}</span>
      </li>
      <li class="branch-item">
        <ipu-svg name="flow-if" class="icon" size="16"></ipu-svg>
        <common-icon name="flow-if" class="icon" size="16"></common-icon>
        <span>default</span>
      </li>
    </ul>

src/views/_components/panel/PanelEnd.vue

@@ -1,16 +1,9 @@
<template>
  <div class="panel-end">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- <el-tab-pane label="基础" name="action">
        <el-form :model="formData" label-position="top">
          <el-form-item label="ID">
            <ipu-input v-model="formData.id"></ipu-input>
          </el-form-item>
        </el-form>
      </el-tab-pane> -->
      <el-tab-pane label="功能" name="function">
        <el-button type="success" @click.stop="setting">设置</el-button>
        <ipu-table
        <common-table
          :table-header="tableHeader"
          :table-data="panelData.function.tableData"
        >
@@ -19,7 +12,7 @@
              <Delete></Delete>
            </el-icon>
          </template>
        </ipu-table>
        </common-table>
      </el-tab-pane>
    </el-tabs>
  </div>

src/views/_components/panel/PanelExpression.vue

@@ -16,10 +16,10 @@
          <div class="form-title">
            <h5>名称</h5>
          </div>
          <ipu-input
          <el-input
            v-bind="attributes"
            v-model="panelData.function.name"
          ></ipu-input>
          ></el-input>
        </div>
        <div class="form-item">
          <div class="form-title">

src/views/_components/panel/PanelForeach.vue

@@ -13,20 +13,20 @@
          <div class="form-title">
            <h5>迭代器</h5>
          </div>
          <ipu-select
          <common-select
            v-model="panelData.function.iterator"
            :props-map="propsMap"
            :options="iteratorDataList"
          ></ipu-select>
          ></common-select>
        </div>
        <div class="form-item">
          <div class="form-title">
            <h5>数据类型</h5>
          </div>
          <ipu-select
          <common-select
            v-model="panelData.function.resultType"
            :options="resultTypes"
          ></ipu-select>
          ></common-select>
        </div>
        <div class="form-item">
          <div class="form-title">

src/views/_components/panel/PanelFunction.vue

@@ -12,22 +12,22 @@
        <div class="content">
          <div class="form-item">
            <span class="form-item-title">DOMAIN</span>
            <ipu-select
            <common-select
              v-model="panelData.function.domain"
              :options="domainList"
              :props-map="domainMap"
              @change="changeDomain(panelData.function.domain)"
            ></ipu-select>
            ></common-select>
          </div>
          <div class="form-item">
            <span class="form-item-title">NAME</span>
            <ipu-select
            <common-select
              v-model="panelData.function.name"
              class="select"
              :props-map="domainMap"
              :options="nameList"
              @change="changeName(panelData.function.name)"
            ></ipu-select>
            ></common-select>
          </div>
          <h4 class="form-title">函数参数</h4>
          <param-item :item-list="panelData.function?.params"></param-item>

src/views/_components/panel/PanelGlobal.vue

@@ -8,27 +8,27 @@
          label-position="top"
        >
          <el-form-item label="服务名称" prop="name">
            <ipu-input
            <el-input
              v-model="basicFormData.name"
              placeholder="请输入场景名"
            ></ipu-input>
            ></el-input>
          </el-form-item>
          <el-form-item label="服务路径" prop="name">
            <ipu-input
            <el-input
              v-model="basicFormData.path"
              placeholder="请输入路径"
            ></ipu-input>
            ></el-input>
          </el-form-item>
          <el-form-item label="服务方法" prop="method">
            <ipu-select
            <el-select
              v-model="basicFormData.method"
              class="form-item"
              :options="methodsOptions"
              placeholder="请选择服务方法"
            ></ipu-select>
            ></el-select>
          </el-form-item>
          <el-form-item label="服务描述">
            <ipu-input
            <el-input
              v-model="basicFormData.desc"
              type="textarea"
              clearable
@@ -36,7 +36,7 @@
              maxlength="200"
              show-word-limit
              placeholder="请输入服务描述"
            ></ipu-input>
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
@@ -75,7 +75,7 @@
    <!-- 自定义属性声明 -->
    <!-- 模型声明 -->
    <ipu-table
    <el-table
      v-if="activeName === 'models' || activeName === 'customAttrs'"
      class="global-table"
      :table-header="table[activeName]?.header"
@@ -100,7 +100,7 @@
          </template>
        </el-popconfirm>
      </template>
    </ipu-table>
    </el-table>
  </div>
  <dialog-panel
    v-if="isShowPanel"

src/views/_components/panel/PanelHttp.vue

@@ -13,10 +13,10 @@
          <div class="panel-content">
            <!-- 请求参数 -->
            <h4 class="form-title">接口参数</h4>
            <ipu-form
              :model="panelData?.function?.formValues"
            <common-form
              :forms="panelData?.function?.forms"
            ></ipu-form>
              :form-values="panelData?.function?.formValues"
            ></common-form>
            <!-- 请求头 -->
            <h4 class="form-title">请求头</h4>

src/views/_components/panel/PanelSql.vue

@@ -9,14 +9,14 @@
          label-position="top"
        >
          <el-form-item label="服务名称" prop="name">
            <ipu-input
            <el-input
              v-model="panelData.basicData.name"
              placeholder="请输入场景名"
              @change="changeName"
            ></ipu-input>
            ></el-input>
          </el-form-item>
          <el-form-item label="服务描述">
            <ipu-input
            <el-input
              v-model="panelData.basicData.desc"
              type="textarea"
              clearable
@@ -24,26 +24,10 @@
              maxlength="200"
              show-word-limit
              placeholder="请输入服务描述"
            ></ipu-input>
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- 高级设置 -->
        <!-- <div class="collapse" @click="showMoreSettings = !showMoreSettings">
          <span>高级设置</span>
          <el-icon v-if="showMoreSettings" class="icon"><ArrowUp ></ArrowUp></el-icon>
          <el-icon v-else class="icon"><ArrowDown ></ArrowDown></el-icon>
          <span class="line"></span>
        </div>
        <el-form v-show="showMoreSettings" :model="seniorData" label-position="top">
          <el-form-item label="节点ID" >
            <ipu-input v-model="seniorData.nodeId" placeholder="请输入节点ID" ></ipu-input>
          </el-form-item>
          <el-form-item label="下一节点">
            <ipu-input v-model="seniorData.nextNode" disabled ></ipu-input>
          </el-form-item>
        </el-form> -->
      </el-tab-pane>
      <el-tab-pane label="输入输出" name="input-output">
        <input-output-tab
@@ -56,12 +40,12 @@
          <div class="form-title">
            <h5>数据源</h5>
          </div>
          <ipu-select
          <common-select
            v-model="panelData.function.datasource"
            class="int-select"
            :props-map="propsMap"
            :options="datasources"
          ></ipu-select>
          ></common-select>
        </div>
        <div class="form-item">
          <div class="form-title">
@@ -70,11 +54,11 @@
              脚本编辑器
            </el-button>
          </div>
          <ipu-input
          <el-input
            v-model="panelData.function.sql"
            v-bind="attributes"
            disabled
          ></ipu-input>
          ></el-input>
          <!-- <div class="editor">
            <my-code
              :editorValue="panelData.function.sql"

src/views/_components/panel/PanelStart.vue

@@ -3,7 +3,7 @@
    <el-tabs v-model="activeName">
      <el-tab-pane label="功能" name="action">
        <el-button type="success" @click="importData">引入</el-button>
        <ipu-table
        <common-table
          class="table"
          :table-header="tableHeader"
          :table-data="panelData.function.tableData"
@@ -20,7 +20,7 @@
              </template>
            </el-popconfirm>
          </template>
        </ipu-table>
        </common-table>
      </el-tab-pane>
    </el-tabs>
  </div>
@@ -38,13 +38,13 @@
    </el-radio-group>
    <!-- 数据展示 -->
    <ipu-table
    <common-table
      class="table"
      :table-header="table[selectTab].header"
      :table-data="table[selectTab].data"
      :is-check="true"
      @selection-change="handleSelectChange"
    ></ipu-table>
    ></common-table>
  </dialog-panel>
</template>
@@ -102,8 +102,6 @@ const tableHeader = ref([
  }
]);
// const tableData = ref(props.targetNode.cell.getData()?.attrsData ? props.targetNode.cell.getData()?.attrsData : [])
watch(
  panelData,
  () => {

src/views/_components/panel/PanelSubFlow.vue

@@ -14,12 +14,12 @@
          <div class="form-title">
            <h5>子流程</h5>
          </div>
          <ipu-select
          <common-select
            v-model="panelData.function.datasource"
            class="int-select"
            :props-map="propsMap"
            :options="subflowList"
          ></ipu-select>
          ></common-select>
        </div>
        <div class="form-item">
          <div class="form-title">

src/views/_components/panel/common/AddFormItem.vue

@@ -6,24 +6,24 @@
        <span>VALUE</span>
      </li>
      <li v-for="(item, index) in datas" :key="index" class="form-item">
        <ipu-input
        <el-input
          v-model="item.key"
          class="int"
          placeholder="请输入key"
        ></ipu-input>
        <ipu-input
        ></el-input>
        <el-input
          v-if="!options.length"
          v-model="item.value"
          class="int int2"
          placeholder="请输入value"
        ></ipu-input>
        <ipu-select
        ></el-input>
        <el-select
          v-if="options && options.length"
          v-model="item.value"
          class="int int2"
          placeholder="请选择"
          :options="options"
        ></ipu-select>
        ></el-select>
        <el-icon
          v-if="index < datas.length - 1"
          class="icon"

src/views/_components/panel/common/AttrInfo.vue

@@ -7,12 +7,12 @@
    </el-radio-group>
    <!-- 数据 -->
    <ipu-table
    <common-table
      :table-header="table[active]?.header"
      :table-data="table[active]?.data"
      :is-check="true"
      @selection-change="handleSelectionChange"
    ></ipu-table>
    ></common-table>
  </div>
</template>

src/views/_components/panel/common/CommonPanel.vue

@@ -10,14 +10,14 @@
          label-position="top"
        >
          <el-form-item label="服务名称" prop="name">
            <ipu-input
            <el-input
              v-model="panelData.basicData.name"
              placeholder="请输入场景名"
              @change="changeName"
            ></ipu-input>
            ></el-input>
          </el-form-item>
          <el-form-item label="服务描述">
            <ipu-input
            <el-input
              v-model="panelData.basicData.desc"
              type="textarea"
              clearable
@@ -25,7 +25,7 @@
              maxlength="200"
              show-word-limit
              placeholder="请输入服务描述"
            ></ipu-input>
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>

src/views/_components/panel/common/ParamItem.vue

@@ -19,7 +19,7 @@
        <span>{{ item.desc || '-' }}</span>
      </el-col>
      <el-col :span="6">
        <ipu-select
        <common-select
          v-model="item.varType"
          :options="
            item.type.toLowerCase() === 'string' ||
@@ -28,40 +28,40 @@
              ? contantTypes
              : varTypes
          "
        ></ipu-select>
        ></common-select>
      </el-col>
      <el-col :span="6">
        <!-- string -->
        <ipu-input
        <el-input
          v-if="
            item.varType === 'constant' && item.type.toLowerCase() === 'string'
          "
          v-model="item.value"
        ></ipu-input>
        ></el-input>
        <!--- number -->
        <ipu-input-num
        <el-input-num
          v-else-if="
            item.varType === 'constant' && item.type.toLowerCase() === 'int'
          "
          v-model="item.value"
          controls-position="right"
          class="int"
        ></ipu-input-num>
        ></el-input-num>
        <!-- bollean -->
        <ipu-select
        <common-select
          v-else-if="
            item.varType === 'constant' && item.type.toLowerCase() === 'Boolean'
          "
          v-model="item.value"
          :options="bolleanList"
        ></ipu-select>
        ></common-select>
        <!-- 变量 -->
        <ipu-select
        <common-select
          v-else-if="item.varType === 'var'"
          v-model="item.value"
          :options="globalDataBus"
          :props-map="varPropsMap"
        ></ipu-select>
        ></common-select>
        <span v-else>-</span>
      </el-col>
    </el-row>

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

@@ -8,7 +8,10 @@
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="属性类型">
        <ipu-select v-model="formData.type" :options="typeList"></ipu-select>
        <common-select
          v-model="formData.type"
          :options="typeList"
        ></common-select>
      </el-form-item>
      <template
        v-if="formData.type === 'array' || formData.type === 'object'"

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

@@ -1,7 +1,7 @@
<template>
  <div class="custom-detail-list">
    <div class="model-table">
      <ipu-table :table-header="table?.header" :table-data="table?.data">
      <common-table :table-header="table?.header" :table-data="table?.data">
        <template #custom="scope">
          <ipu-popconfirm
            :btn-icon="'Delete'"
@@ -9,10 +9,10 @@
            @confirm="confirmEvent(scope.row)"
          ></ipu-popconfirm>
        </template>
      </ipu-table>
      </common-table>
    </div>
    <div class="model-footer">
      <ipu-pagination :page="table[active]?.page"></ipu-pagination>
      <common-pagination :page="table[active]?.page"></common-pagination>
    </div>
  </div>
</template>

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

@@ -3,10 +3,10 @@
    <div class="import-header">
      <el-form :model="formData" :inline="true">
        <el-form-item label="模型名称">
          <ipu-input v-model="formData.name"></ipu-input>
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="模型ID">
          <ipu-input v-model="formData.id"></ipu-input>
          <el-input v-model="formData.id"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click.stop="search">查询</el-button>
@@ -15,7 +15,7 @@
      <el-button type="success" @click.stop="bacthAdd">批量添加</el-button>
    </div>
    <div class="import-content">
      <ipu-table
      <common-table
        :table-header="table.header"
        :table-data="table.data"
        :is-check="true"
@@ -26,10 +26,10 @@
            <el-icon><View></View></el-icon>
          </el-button>
        </template>
      </ipu-table>
      </common-table>
    </div>
    <div class="import-footer">
      <ipu-pagination :page="table.page"></ipu-pagination>
      <common-pagination :page="table.page"></common-pagination>
    </div>
  </div>
  <dialog-panel v-if="showModelDetail" :dialog-data="dialogData">

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

@@ -8,19 +8,19 @@
    <!-- 基本信息 -->
    <el-form v-show="active === 'basic'" :model="formData" label-position="top">
      <el-form-item label="模型ID">
        <ipu-input v-model="formData.id" disabled></ipu-input>
        <common-input v-model="formData.id" disabled></common-input>
      </el-form-item>
      <el-form-item label="模型名称">
        <ipu-input v-model="formData.name" disabled></ipu-input>
        <el-input v-model="formData.name" disabled></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <ipu-input
        <el-input
          v-model="formData.desc"
          type="textarea"
          rows="10"
          maxlength="1000"
          disabled
        ></ipu-input>
        ></el-input>
      </el-form-item>
    </el-form>
@@ -30,7 +30,7 @@
      class="model-content"
    >
      <div class="model-table">
        <ipu-table
        <common-table
          :table-header="table[active]?.header"
          :table-data="table[active]?.data"
        >
@@ -39,10 +39,10 @@
              <el-icon><View></View></el-icon>
            </el-button>
          </template>
        </ipu-table>
        </common-table>
      </div>
      <div class="model-footer">
        <ipu-pagination :page="table[active]?.page"></ipu-pagination>
        <common-pagination :page="table[active]?.page"></common-pagination>
      </div>
    </div>

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

@@ -4,50 +4,50 @@
    <div class="rules">
      <el-form :inline="true" label-position="top">
        <el-form-item class="item" label="最小">
          <ipu-input
          <el-input
            v-model="validateRules.min"
            class="form-item"
            placeholder="最小值"
          ></ipu-input>
          ></el-input>
        </el-form-item>
        <el-form-item class="item" label="最大">
          <ipu-input
          <el-input
            v-model="validateRules.max"
            class="form-item"
            placeholder="最大值"
          ></ipu-input>
          ></el-input>
        </el-form-item>
        <el-form-item class="item" label="小于">
          <ipu-input
          <el-input
            v-model="validateRules.more"
            class="form-item"
            placeholder="小于最大值校验"
          ></ipu-input>
          ></el-input>
        </el-form-item>
        <el-form-item class="item" label="大于">
          <ipu-input
          <el-input
            v-model="validateRules.less"
            class="form-item"
            placeholder="大于最大值校验"
          ></ipu-input>
          ></el-input>
        </el-form-item>
        <el-form-item class="item" label="等于">
          <ipu-input
          <el-input
            v-model="validateRules.equal"
            class="form-item"
            placeholder="等于值校验"
          ></ipu-input>
          ></el-input>
        </el-form-item>
        <el-form-item class="item" label="不等于">
          <ipu-input
          <el-input
            v-model="validateRules.unequal"
            class="form-item"
            placeholder="不等于值校验"
          ></ipu-input>
          ></el-input>
        </el-form-item>
        <el-form-item
@@ -67,11 +67,11 @@
          class="item"
          label="小数刻度"
        >
          <ipu-input
          <el-input
            v-model="validateRules.scale"
            class="form-item"
            placeholder="小数刻度校验"
          ></ipu-input>
          ></el-input>
        </el-form-item>
        <el-form-item
@@ -79,11 +79,11 @@
          class="item"
          label="小数精度"
        >
          <ipu-input
          <el-input
            v-model="validateRules.precision"
            class="form-item"
            placeholder="小数精度校验"
          ></ipu-input>
          ></el-input>
        </el-form-item>
      </el-form>
    </div>

src/views/_components/panel/sql-components/InputOutputTab.vue

@@ -10,7 +10,7 @@
    </div>
    <!-- input -->
    <ipu-table
    <common-table
      :table-header="table[active]?.header"
      :table-data="table[active]?.data"
    >
@@ -22,7 +22,7 @@
          <Delete></Delete>
        </el-icon>
      </template>
    </ipu-table>
    </common-table>
    <!-- output -->
  </div>

src/views/flow/Flow.vue

@@ -17,24 +17,43 @@ import { ref, getCurrentInstance, onMounted } from 'vue';
/** x6相关end */
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import SubFlow from '../_components/_flow/Index.vue';
import nodes from '../_components/_flow/nodes.js';
import * as api from '../../api/flow';
import NodeDataFormate from '../_components/_flow/nodeDataFormate.js';
const store = useStore();
const nodeList = ref(nodes.nodes);
const { proxy } = getCurrentInstance();
const route = useRoute();
const subFlowDetail = ref(null);
const subFlowId = ref(route.query.id);
const flowId = ref(route.query.id);
const sysTemId = ref(route.query.sysId);
// 获取流程数据
async function getLogicDetailById() {
  await api.getLogicDetailById(subFlowId.value).then((res) => {
  await api.getLogicDetailById(flowId.value).then((res) => {
    if (res.resultCode === '0') {
      subFlowDetail.value = res.result;
      const panelGlobal = {};
      panelGlobal[flowId.value] = JSON.parse(res.result?.databusData) || {};
      localStorage.setItem('panelGlobal', JSON.stringify(panelGlobal));
      store.commit('setBreadData', [
        { name: '系统管理', to: { name: 'SystemList' } },
        {
          name: subFlowDetail.value.systemName,
          to: {
            name: 'SystemDetail',
            query: {
              id: sysTemId.value
            }
          }
        },
        { name: subFlowDetail.value.name }
      ]);
    } else {
      proxy.$message.error(res.resultMsg);
    }
@@ -50,12 +69,12 @@ async function updateFlowData(graph, type) {
  const databusData = JSON.parse(localStorage.getItem('panelGlobal')) || {};
  const params = {
    jsonData: JSON.stringify(graph),
    databusData: JSON.stringify(databusData[subFlowId.value]),
    databusData: JSON.stringify(databusData[flowId.value]),
    stateValue: type,
    nodesData: getNodesData(graph)
  };
  await api
    .updateFlowDataById(params, subFlowId.value)
    .updateFlowDataById(params, flowId.value)
    .then((res) => {
      if (res.resultCode === '0') {
        proxy.$message.success('流程保存成功！');

src/views/flow/SystemDetail.vue

@@ -83,6 +83,7 @@
<script setup>
import { ref, onMounted, getCurrentInstance, computed, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { formConfig } from './_config';
import ApiDetailPage from './_components/ApiDetailPage.vue';
import * as api from '../../api/flow';
@@ -96,6 +97,7 @@ const drawerType = ref('module');
const operateType = ref('create');
const apiDetail = ref(null);
const versionState = ref('');
const store = useStore();
const systemId = computed(() => route.query.id);
const curVersionId = ref('');
@@ -144,6 +146,10 @@ async function getSystemDetail() {
      systemInfo.value = res.result;
      curVersionId.value = systemInfo.value.version.id;
      versionState.value = systemInfo.value.version.state;
      store.commit('setBreadData', [
        { name: '系统管理', to: { name: 'SystemList' } },
        { name: systemInfo.value.name }
      ]);
    } else {
      systemInfo.value = null;
    }

src/views/flow/_components/ApiDetailPage.vue

@@ -128,11 +128,7 @@
      </div>
      <div class="card">
        <h4 class="sub-title">请求参数</h4>
        <!-- <ipu-input
          v-model="testRequest.params"
          class="result"
          v-bind="attributes"
        ></ipu-input> -->
        <div>
          <JsonEditorVue
            v-model="testRequest.params"

src/views/sub-flow/SubFlow.vue

@@ -17,12 +17,15 @@ import { ref, getCurrentInstance, onMounted } from 'vue';
/** x6相关end */
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import SubFlow from '../_components/_flow/Index.vue';
import nodes from '../_components/_flow/nodes.js';
import * as api from '../../api/subflow';
import NodeDataFormate from '../_components/_flow/nodeDataFormate.js';
const store = useStore();
const nodeList = ref(nodes.nodes);
nodeList.value.map((item) => {
  if (item.nodes?.length) {
@@ -41,6 +44,13 @@ async function getSubFlowDetailById() {
  await api.getSubFlowDetailById(subFlowId.value).then((res) => {
    if (res.resultCode === '0') {
      subFlowDetail.value = res.result;
      const panelGlobal = {};
      panelGlobal[subFlowId.value] = JSON.parse(res.result?.databusData) || {};
      localStorage.setItem('panelGlobal', JSON.stringify(panelGlobal));
      store.commit('setBreadData', [
        { name: '系统管理', to: { name: 'SystemList' } },
        { name: subFlowDetail.value.name }
      ]);
    } else {
      proxy.$message.error(res.resultMsg);
    }