update: 新增节点出参入参复杂结构转换功能

package-lock.json

@@ -4539,6 +4539,11 @@
        }
      }
    },
    "sortablejs": {
      "version": "1.14.0",
      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
    },
    "source-map": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -5581,6 +5586,14 @@
        "@volar/vue-typescript": "1.2.0"
      }
    },
    "vuedraggable": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
      "requires": {
        "sortablejs": "1.14.0"
      }
    },
    "vuex": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",

package.json

@@ -44,6 +44,7 @@
    "vite-plugin-svg-icons": "^2.0.1",
    "vue": "^3.2.44",
    "vue-router": "^4.1.6",
    "vuedraggable": "^4.1.0",
    "vuex": "^4.1.0",
    "xlsx": "0.16.0"
  },

src/components/index.ts

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

src/components/table/IpuTable.vue

@@ -1,206 +0,0 @@
<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

@@ -1,285 +0,0 @@
<!-- 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/router.ts

@@ -85,6 +85,20 @@ const routes: Array<RouteRecordRaw> = [
        component: () => import('./views/sub-flow/SubFlow.vue')
      }
    ]
  },
  {
    path: '',
    component: () => import('./views/sub-flow/Container.vue'),
    children: [
      {
        path: '/manager',
        name: 'Manager',
        component: () => import('./views/manager/Index.vue'),
        meta: {
          breadcrumb: [{ name: '上线管理' }]
        }
      }
    ]
  }
];
const router = createRouter({

src/views/_components/_flow/nodes.js

@@ -60,7 +60,7 @@ export default {
          id: 'subprocess',
          label: '子流程',
          type: 'logic',
          icon: 'flow-subprocess',
          icon: 'tool-subprocess',
          isStartNode: false,
          attrsData: {}
        }

src/views/_components/drag/DragComments copy.vue

@@ -0,0 +1,204 @@
<template>
  <div class="container">
    <!-- 左侧 el-tree 组件 -->
    <!-- <el-tree
      ref="tree"
      class="left"
      :data="treeData"
      :props="treeProps"
      :draggable="true"
      @node-drag-start="handleNodeDragStart"
      @node-drag-end="handleNodeDragEnd"
      @node-drop="handleNodeDrop"
    ></el-tree> -->
    <!-- <div class="left">
      <draggable
        :list="targetData"
        item-key="dataIndex"
        :group="{ name: 'source', pull: 'clone' }"
        :sort="false"
      >
        <template #item="{ element }">
          <div class="list-group-item">
            <span>{{ element.label }}</span>
          </div>
        </template>
      </draggable>
    </div> -->
    <el-tree
      ref="tree"
      class="left"
      :data="treeData"
      :props="treeProps"
      :draggable="true"
      @node-drag-start="handleNodeDragStart"
      @node-drag-end="handleNodeDragEnd"
      @node-drop="handleNodeDrop"
    >
      <template #default="{ node, data }">
        <draggable :list="treeData" :group="{ name: 'source' }">
          <template #item="{ element }">
            <template v-if="data.children?.length">
              <draggable :list="element.children" :group="{ name: 'source' }">
                <template #item="scope">
                  {{ scope.element.label }}
                </template>
              </draggable>
            </template>
            <template v-else>
              <span>{{ node.label }}</span>
            </template>
          </template>
        </draggable>
      </template>
    </el-tree>
    <!-- 右侧 tag 列表 -->
    <div class="right">
      <draggable
        :list="sourceData"
        item-key="dataIndex"
        :group="{ name: 'source', pull: 'clone' }"
        :sort="false"
      >
        <template #item="{ element }">
          <div class="list-group-item">
            <span>{{ element.label }}</span>
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue';
import draggable from 'vuedraggable';
export default {
  components: {
    draggable
  },
  setup() {
    const sourceData = ref([
      { id: 1, label: 'Tag 1' },
      { id: 2, label: 'Tag 2' },
      { id: 3, label: 'Tag 3' },
      { id: 4, label: 'Tag 4' },
      { id: 5, label: 'Tag 5' }
    ]);
    const targetData = ref([{ id: 10, label: 'Tag 11' }]);
    const treeData = ref([
      {
        id: 1,
        label: 'Node 1',
        children: [
          {
            id: 2,
            label: 'Node 1-1',
            children: [
              {
                id: 3,
                label: 'Node 1-1-1',
                children: []
              }
            ]
          },
          {
            id: 4,
            label: 'Node 1-2',
            children: []
          }
        ]
      }
    ]);
    const treeProps = ref({
      label: 'label',
      children: 'children'
    });
    const handleNodeDragStart = (node, component) => {
      // 获取当前拖拽节点在原节点的位置索引
      const oldIndex =
        component.$parent.$parent.$el.getAttribute('data-oldindex');
      // 将位置索引存储在拖拽节点的 dataTransfer 中
      component.$parent.$parent.$el.setAttribute(
        'data-oldindex',
        node.parent.children.indexOf(node)
      );
      component.$parent.$parent.$el.setAttribute('data-index', oldIndex);
    };
    const handleNodeDragEnd = (node, component) => {
      // 重置拖拽节点的 dataTransfer
      component.$parent.$parent.$el.removeAttribute('data-oldindex');
      component.$parent.$parent.$el.removeAttribute('data-index');
    };
    const handleNodeDrop = (draggingNode, dropNode, dropType) => {
      if (dropType === 'inner') {
        // 如果拖拽的节点放置在目标节点的内部，则将拖拽节点移动到目标节点的子节点中
        const index = draggingNode.parent.children.indexOf(draggingNode);
        draggingNode.parent.children.splice(index, 1);
        dropNode.children.push(draggingNode);
      } else {
        // 如果拖拽的节点放置在目标节点的前面或后面，则将拖拽节点移动到目标节点的前面或后面
        const oldIndex = Number(
          draggingNode.component.$parent.$parent.$el.getAttribute('data-index')
        );
        const newIndex = dropNode.parent.children.indexOf(dropNode);
        if (newIndex > oldIndex) {
          dropNode.parent.children.splice(newIndex + 1, 0, draggingNode);
          draggingNode.parent.children.splice(oldIndex, 1);
        } else {
          dropNode.parent.children.splice(newIndex, 0, draggingNode);
          draggingNode.parent.children.splice(oldIndex + 1, 1);
        }
      }
    };
    return {
      sourceData,
      targetData,
      treeData,
      treeProps,
      handleNodeDragStart,
      handleNodeDragEnd,
      handleNodeDrop
    };
  }
};
</script>
<style>
.container {
  display: flex;
}
.left {
  width: 50%;
  height: 400px;
  margin-right: 10px;
}
.right {
  width: 50%;
  height: 400px;
  background-color: #f5f5f5;
}
.tag-item {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  line-height: 50px;
  cursor: move;
}
</style>

src/views/_components/drag/DragComments.vue

@@ -0,0 +1,484 @@
<template>
  <div class="__data-conversion">
    <!--左树-->
    <div class="__left">
      <div class="__up">
        <h5 class="title">属性树形结构</h5>
        <div class="tree-content">
          <el-tree
            :allow-drop="allowDrop"
            :allow-drag="allowDrag"
            :data="treeData"
            :highlight-current="true"
            draggable
            default-expand-all
            node-key="'id'"
            @node-click="getCurrentNode"
            @node-drag-start="handleDragStart"
            @node-drag-enter="handleDragEnter"
            @node-drag-leave="handleDragLeave"
            @node-drag-over="handleDragOver"
            @node-drag-end="handleDragEnd"
            @node-drop="handleDrop"
          >
            <template #default="{ node, data }">
              <div class="tree-item">
                <span class="label">{{ data.label }}</span>
                <span class="type" :class="`${data.type}-color`">
                  {{ data.type }}
                </span>
                <span class="type" :class="`${data.type}-color`">
                  {{ data.name }}
                </span>
                <el-input
                  v-model="data.alias"
                  class="tree-int"
                  size="small"
                ></el-input>
                <common-icon
                  name="common-shanchu"
                  @click.stop="removeItem(node, data)"
                ></common-icon>
              </div>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="__down">
        <h5 class="title">属性内容</h5>
        <div class="attr-content">
          <JsonEditor
            v-model="jsonData"
            class="editor"
            current-mode="code"
            :mode-list="['code']"
            @blur="validate"
          ></JsonEditor>
        </div>
      </div>
    </div>
    <!--右列表-->
    <div class="__right">
      <h5 class="title">属性</h5>
      <ul class="tag-list">
        <li v-for="(item, index) in tagList" :key="index">
          <h5 class="tag-title">{{ item.label }}</h5>
          <div class="tag-content">
            <template v-for="(tag, tagIndex) in item.tags" :key="tagIndex">
              <span
                class="tag"
                :class="`${tag?.['type']}-color`"
                @click.stop="handleClickTag(tag)"
              >
                {{ tag.label }}
              </span>
            </template>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, getCurrentInstance } from 'vue';
import JsonEditor from 'json-editor-vue3';
import { v4 as uuidv4 } from 'uuid';
const { proxy } = getCurrentInstance();
const tagList = ref<any>([
  {
    label: '字符串',
    type: 'string',
    id: 1,
    tags: [
      { label: '姓名', name: 'name', type: 'string', id: 2 },
      { label: '电话号码', name: 'tel', type: 'string', id: 3 },
      { label: '邮箱', name: 'email', type: 'string', id: 4 }
    ]
  },
  {
    label: '整数',
    type: 'int',
    id: 5,
    tags: [
      { label: '年龄', name: 'age', type: 'int', id: 6 },
      { label: '性别', name: 'sex', type: 'int', id: 7 },
      { label: '班级', name: 'class', type: 'int', id: 8 }
    ]
  },
  {
    label: '布尔类型',
    type: 'boolean',
    id: 9,
    tags: [
      { label: '婚姻状况', name: 'marry', type: 'boolean', id: 10 },
      { label: '生育状况', name: 'sex', type: 'boolean', id: 11 }
    ]
  },
  {
    label: '对象',
    type: 'object',
    id: 12,
    tags: [
      { label: '结果', name: 'result', type: 'object', id: 13 },
      { label: '学生', name: 'student', type: 'object', id: 14 },
      { label: '员工', name: 'staff', type: 'object', id: 15 }
    ]
  }
]);
const treeData = ref<any>([]);
const jsonData = ref<any>({});
const currentNode = ref<any>({});
/**
 * el-tree拖拽start
 */
// 是否可被插入
const allowDrop = (draggingNode: any, dropNode: any, type: any) => {
  console.log(draggingNode);
  if (type === 'inner') {
    if (dropNode.data.type === 'object' || dropNode.data.type === 'array') {
      return true;
    }
    return false;
  }
  // 被进入的节点如果是object或者array时，允许被传入，否则禁止拖进
  return true;
};
// 是否可被拖拽
const allowDrag = (draggingNode: any) => {
  console.log(draggingNode);
  return true;
};
function handleDragStart() {}
function handleDragEnter() {}
function handleDragLeave() {}
function handleDragOver() {}
function handleDragEnd() {}
function handleDrop() {}
// 获取当前节点
function getCurrentNode(node: any) {
  console.log(node);
  currentNode.value = node;
}
/**
 * el-tree拖拽end
 */
// 标签点击，添加至左边树
function handleClickTag(tag: any) {
  console.log(tag);
  const newChild = {
    label: tag.label,
    name: tag.name,
    alias: '',
    id: uuidv4(),
    type: tag.type,
    children: []
  };
  if (currentNode.value?.type) {
    if (
      currentNode.value?.type === 'object' ||
      currentNode.value?.type === 'array'
    ) {
      currentNode.value.children.push(newChild);
      treeData.value = [...treeData.value];
    } else {
      proxy.$message.error(`${currentNode.value?.type}类型不能有子类！`);
    }
  } else {
    treeData.value.push(newChild);
  }
}
// 删除树结构
function removeItem(node: any, data: any) {
  if (data.children?.length) {
    proxy.$message.error('请先删除子类！');
    return;
  }
  const { parent } = node;
  const child = parent.data.children || parent.data;
  const index = child.findIndex((d: any) => d.id === data.id);
  child.splice(index, 1);
  treeData.value = [...treeData.value];
}
function assignment(type: any) {
  let r;
  switch (type) {
    case 'object':
      r = {};
      break;
    case 'string':
      r = '';
      break;
    case 'int':
      r = 0;
      break;
    case 'boolean':
      r = false;
      break;
    case 'array':
      r = [];
      break;
    case 'long':
      r = 0;
      break;
    case 'date':
      r = '';
      break;
    case 'datetime':
      r = '';
      break;
    case 'decimal':
      r = 0.0;
      break;
    default:
      r = undefined;
      break;
  }
  return r;
}
// 数据处理
function tree2json(data: any) {
  const obj = {};
  data.forEach((item: any) => {
    if (item.children?.length) {
      obj[item.name] = tree2json(item.children);
    } else {
      obj[item.name] = assignment(item.type);
    }
  });
  return obj;
}
function validate() {}
watch(
  treeData.value,
  () => {
    if (treeData.value?.length) {
      jsonData.value = tree2json(treeData.value);
    } else {
      currentNode.value = {};
    }
  },
  { deep: true }
);
</script>
<style scoped lang="scss">
.__data-conversion {
  display: flex;
  justify-content: space-between;
  height: calc(100% - 60px);
  padding: 20px;
  box-sizing: border-box;
  .__left {
    width: calc(60% - 7px);
    .__up {
      height: calc(50% - 20px);
      .tree-content {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        height: calc(100% - 20px);
        padding: 15px;
        box-sizing: border-box;
        overflow-y: auto;
      }
    }
    .__down {
      height: calc(50% - 20px);
      margin-top: 20px;
      .attr-content {
        border: 1px solid rgba(0, 0, 0, 0.15);
        background: #ffffff;
        border-radius: 4px;
        height: calc(100%);
        .editor {
          height: calc(100%);
        }
      }
    }
  }
  .__right {
    width: calc(40% - 8px);
    height: 100%;
    .tag-list {
      background-color: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      height: calc(100% - 20px);
      padding: 15px;
      box-sizing: border-box;
      overflow-y: auto;
      .tag-title {
        line-height: 32px;
      }
      .tag-content {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        .tag {
          height: 32px;
          margin-right: 12px;
          line-height: 32px;
          padding: 0 12px;
          border-radius: 4px;
          position: relative;
          padding-left: 26px;
          cursor: pointer;
          &:after {
            content: '';
            position: absolute;
            width: 6px;
            height: 6px;
            left: 12px;
            top: 13px;
            border-radius: 50%;
          }
        }
        .int-color {
          color: #169bfa;
          background: rgba(22, 155, 250, 0.1);
          &:after {
            background: #169bfa;
          }
        }
        .string-color {
          color: #31cf9a;
          background: rgba(49, 207, 154, 0.1);
          &:after {
            background: #31cf9a;
          }
        }
        .boolean-color {
          color: #31cf9a;
          background: rgba(49, 207, 154, 0.1);
          &:after {
            background: #31cf9a;
          }
        }
        .object-color {
          color: #ff956f;
          background: rgba(255, 149, 111, 0.1);
          &:after {
            background: #ff956f;
          }
        }
        .array-color {
          color: #ffb95b;
          background: rgba(255, 185, 91, 0.1);
          &:after {
            background: #ffb95b;
          }
        }
        .decimal-color {
          color: #21c5db;
          background: rgba(33, 197, 219, 0.1);
          &:after {
            background: #21c5db;
          }
        }
        .date-color {
          color: #c084fc;
          background: rgba(192, 132, 252, 0.1);
          &:after {
            background: #c084fc;
          }
        }
        .long-color {
          color: #ff5f5f;
          background: rgba(255, 95, 95, 0.1);
          &:after {
            background: #ff5f5f;
          }
        }
        .datetime-color {
          color: #f471b7;
          background: rgba(244, 113, 183, 0.1);
          &:after {
            background: #f471b7;
          }
        }
      }
    }
  }
}
.title {
  line-height: 32px;
  color: #606266;
  font-weight: 400;
}
.tree-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .int-color {
    color: #169bfa;
  }
  .string-color {
    color: #31cf9a;
  }
  .boolean-color {
    color: #31cf9a;
  }
  .object-color {
    color: #ff956f;
  }
  .array-color {
    color: #ffb95b;
  }
  .decimal-color {
    color: #21c5db;
  }
  .date-color {
    color: #c084fc;
  }
  .long-color {
    color: #ff5f5f;
  }
  .datetime-color {
    color: #f471b7;
  }
  .tree-int {
    width: 100px;
  }
  .label {
    width: 30%;
  }
  .type {
    width: 100px;
  }
}
</style>
<style>
.jsoneditor-menu {
  background-color: #bbb;
  border-color: rgba(0, 0, 0, 0.15);
}
.jsoneditor {
  border-color: rgba(0, 0, 0, 0.15);
}
</style>

src/views/_components/drag/MyList.vue

@@ -0,0 +1,64 @@
<template>
  <div class="my-list">
    <div
      v-for="item in listData"
      :key="item.id"
      class="item"
      :draggable="true"
      :data-node="JSON.stringify(item)"
      @dragstart="handleDragStart"
      @dragend="handleDragEnd"
      @dragenter="handleDragEnter($event, $event.target)"
      @dragleave="handleDragLeave"
    >
      {{ item.label }}
    </div>
  </div>
</template>
<script>
export default {
  name: 'MyList',
  props: {
    listData: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleDragStart(e) {
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/plain', JSON.stringify(this.item));
    },
    handleDragEnd() {
      this.$emit('drag-end');
    },
    handleDragEnter(e, el) {
      this.$emit('drag-enter', e, el);
    },
    handleDragLeave() {
      this.$emit('drag-leave');
    }
  }
};
</script>
<style scoped>
.my-list {
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
}
.my-list .item {
  width: 100px;
  height: 50px;
  background-color: #eee;
  border: 1px solid #ccc;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: move;
}
</style>

src/views/_components/drag/TreeItem copy 2.vue

@@ -0,0 +1,232 @@
<template>
  <div class="container">
    <el-tree
      class="tree"
      :data="data"
      :props="props"
      :default-expanded-keys="defaultExpandedKeys"
      :expand-on-click-node="false"
      :draggable="true"
      @node-drag-start="handleNodeDragStart"
      @node-drag-over="handleNodeDragOver"
      @node-drag-end="handleNodeDragEnd"
      @node-drop="handleNodeDrop($event)"
    ></el-tree>
    <div class="list">
      <div
        v-for="(item, index) in list"
        :key="item.id"
        class="item"
        :draggable="true"
        @dragstart="handleItemDragStart(index)"
        @dragend="handleItemDragEnd"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1'
            },
            {
              id: 8,
              label: '二级 3-2'
            }
          ]
        }
      ],
      props: {
        children: 'children',
        label: 'label'
      },
      defaultExpandedKeys: [1, 2, 3],
      list: [
        {
          id: 11,
          label: '新增节点1'
        },
        {
          id: 12,
          label: '新增节点2'
        },
        {
          id: 13,
          label: '新增节点3'
        }
      ],
      draggingItemIndex: -1,
      draggingNode: null,
      dropMousePos: null
    };
  },
  methods: {
    handleItemDragStart(index) {
      this.draggingItemIndex = index;
    },
    handleItemDragEnd() {
      this.draggingItemIndex = -1;
    },
    handleNodeDragStart(data, node) {
      this.draggingNode = node;
    },
    handleNodeDragEnd() {
      this.draggingNode = null;
    },
    handleNodeDragOver(data, node, event) {
      const dropMousePos = this.getDropMousePos(event, node.$el);
      if (this.dropMousePos !== dropMousePos) {
        this.dropMousePos = dropMousePos;
      }
    },
    handleNodeDrop(event, data, node) {
      if (this.draggingItemIndex !== -1) {
        const item = this.list[this.draggingItemIndex];
        const nodeData = {
          id: item.id,
          label: item.label,
          children: item.children
        };
        // const tree = this.$;
        const dropPos = this.getDropPosition(event, node, this.dropMousePos);
        const { parent } = node;
        const index = parent.data.children.indexOf(node.data);
        switch (dropPos) {
          case 0:
            nodeData.children = nodeData.children || [];
            nodeData.children.unshift(data);
            break;
          case 1:
            data.children = data.children || [];
            data.children.unshift(nodeData);
            break;
          case 2:
            if (index !== -1) {
              nodeData.children = nodeData.children || [];
              parent.data.children.splice(index + 1, 0, nodeData);
            }
            break;
          default:
            break;
        }
        this.list.splice(this.draggingItemIndex, 1);
        this.dropMousePos = null;
        this.$refs.tree.setCurrentKey(data.id);
      }
    },
    getDropMousePos(event, dropNodeEl) {
      const rect = dropNodeEl.getBoundingClientRect();
      const offset = event.clientY - rect.top;
      const threshold = rect.height / 2;
      if (offset < threshold) {
        return 0;
      }
      if (offset > rect.height - threshold) {
        return 2;
      }
      return 1;
    },
    getDropPosition(event, node, dropMousePos) {
      const dropNode = node.$el;
      const rect = dropNode.getBoundingClientRect();
      const threshold = rect.height / 2;
      if (dropMousePos === 0) {
        return 0;
      }
      if (dropMousePos === 2) {
        return 1;
      }
      if (dropMousePos === 1 && rect.width >= threshold) {
        const leftThreshold = rect.left + threshold;
        const rightThreshold = rect.right - threshold;
        if (this.dropMousePos !== null) {
          const { clientX } = this.dropMousePos;
          if (clientX < leftThreshold) {
            return 0;
          }
          if (clientX > rightThreshold) {
            return 1;
          }
        }
        const distance =
          Math.abs(event.clientX - leftThreshold) -
          Math.abs(event.clientX - rightThreshold);
        return distance < 0 ? 0 : 1;
      }
    }
  }
};
</script>
<style>
.container {
  display: flex;
  height: 100%;
}
.tree {
  flex: 1;
}
.list {
  flex: 0 0 200px;
  padding: 20px;
  border: 1px solid #ccc;
  border-left: none;
  box-sizing: border-box;
}
.item {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: move;
}
</style>

src/views/_components/drag/TreeItem copy.vue

@@ -0,0 +1,158 @@
<template>
  <div class="container">
    <div class="left">
      <el-tree
        ref="tree"
        :data="treeData"
        :allow-drop="true"
        @node-drop="handleNodeDrop"
      ></el-tree>
    </div>
    <div class="right">
      <my-list
        :list-data="listData"
        @item-dropped="handleItemDropped"
        @drag-enter="handleDragEnter"
        @drag-leave="handleDragLeave"
      ></my-list>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import MyList from './MyList.vue';
const treeData = ref([
  {
    id: 1,
    label: 'Parent 1',
    children: [
      {
        id: 2,
        label: 'Child 1-1'
      },
      {
        id: 3,
        label: 'Child 1-2'
      }
    ]
  },
  {
    id: 4,
    label: 'Parent 2',
    children: [
      {
        id: 5,
        label: 'Child 2-1'
      }
    ]
  }
]);
const listData = ref([
  {
    id: 6,
    label: 'Item 1'
  },
  {
    id: 7,
    label: 'Item 2'
  },
  {
    id: 8,
    label: 'Item 3'
  }
]);
const mousePos = ref({ x: 0, y: 0 });
const insertNode = ref(null);
function handleItemDropped(item) {
  debugger;
  // 将拖拽的元素插入到树中
  const node = {
    id: item.id,
    label: item.label
  };
  if (insertNode.value) {
    const { parent } = insertNode.value;
    const { index } = insertNode.value;
    if (parent.children) {
      parent.children.splice(index, 0, node);
    } else {
      parent.children = [node];
    }
  } else {
    treeData.value.push(node);
  }
  // 清除插入节点的状态
  insertNode.value = null;
}
function handleDragEnter(e, el) {
  // 记录鼠标位置和插入的节点
  mousePos.value = { x: e.clientX, y: e.clientY };
  const { node } = el.dataset;
  insertNode.value = JSON.parse(node);
}
function handleDragLeave() {
  // 清除插入节点的状态
  insertNode.value = null;
}
function handleNodeDrop(data, dropEl, dropType, ev) {
  // 获取鼠标在元素内的相对位置
  const { top, height } = dropEl.getBoundingClientRect();
  const y = ev.clientY - top;
  const index = y < height / 2 ? data.index : data.index + 1;
  // 将拖拽的元素插入到树中
  const item = JSON.parse(ev.dataTransfer.getData('text/plain'));
  const node = {
    id: item.id,
    label: item.label
  };
  if (data.children) {
    data.children.splice(index, 0, node);
  } else {
    data.children = [node];
  }
}
</script>
<style scoped>
.container {
  display: flex;
}
.left {
  width: 50%;
  height: 500px;
  border: 1px solid #ccc;
  padding: 20px;
}
.right {
  width: 50%;
  height: 500px;
  border: 1px solid #ccc;
  padding: 20px;
}
.my-list {
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
}
.my-list .item {
  width: 100px;
  height: 50px;
  background-color: #eee;
  border: 1px solid #ccc;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: move;
}
</style>

src/views/_components/drag/TreeItem.vue

@@ -0,0 +1,103 @@
<template>
  <div class="tree-drag">
    <el-tree
      ref="tree1"
      :data="treeData1"
      class="tree"
      node-key="id"
      draggable
      default-expand-all
      :allow-drop="returnFalse"
      @node-drag-start="handleDragstart"
      @node-drag-end="handleDragend"
    ></el-tree>
    <el-tree
      ref="tree2"
      :data="treeData2"
      class="tree"
      node-key="id"
      draggable
      default-expand-all
      :allow-drop="returnTrue"
    ></el-tree>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      treeData1: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [{ id: 9, label: '三级 1-1-1' }]
            }
          ]
        }
      ],
      treeData2: [
        {
          id: 3,
          label: '级 1',
          children: [
            {
              id: 5,
              label: '二级 1-1',
              children: [{ id: 8, label: '三级 1-1-1' }]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleDragstart(node, event) {
      this.$refs.tree2.$emit('tree-node-drag-start', event, { node });
    },
    handleDragend(draggingNode, endNode, position, event) {
      // 插入一个空节点用于占位
      const emptyData = { id: +new Date(), children: [] };
      this.$refs.tree1.insertBefore(emptyData, draggingNode);
      this.$refs.tree2.$emit('tree-node-drag-end', event);
      this.$nextTick(() => {
        // 如果是移动到了当前树上，需要清掉空节点
        if (this.$refs.tree1.getNode(draggingNode.data)) {
          this.$refs.tree1.remove(emptyData);
        } else {
          // 如果移动到了别的树上，需要恢复该节点，并清掉空节点
          const data = JSON.parse(JSON.stringify(draggingNode.data));
          this.$refs.tree1.insertAfter(
            data,
            this.$refs.tree1.getNode(emptyData)
          );
          this.$refs.tree1.remove(emptyData);
        }
      });
    },
    returnTrue() {
      return true;
    },
    returnFalse() {
      return false;
    }
  }
};
</script>
<style scoped>
.tree {
  display: inline-block;
  vertical-align: top;
  width: 30%;
  height: 400px;
  border: 1px solid #999;
}
</style>

src/views/_components/drag/demo.vue

@@ -0,0 +1,294 @@
<template>
  <el-button @click="onSubmit" />
  <div class="api-req-wrapper">
    <div class="left">
      <p class="title">请求参数</p>
      <el-table
        :data="configTableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        default-expand-all
        header-row-class-name="custom-table-header"
        row-class-name="custom-table-row"
        class="custom-table"
      >
        <el-table-column label="服务入参字段（key/name）" min-width="200px">
          <template #default="scope">
            <div class="custom-table-cell">
              <p>{{ scope.row.code }}</p>
              <p>{{ scope.row.name }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="入参类型" />
        <el-table-column prop="dataIndex" label="表单字段" min-width="160px">
          <template #default="scope">
            <draggable
              v-model="scope.row.formData"
              item-key="dataIndex"
              :group="{
                name: 'items',
                pull: false,
                put: !scope.row.formData.length
              }"
              class="list-group tag-box"
            >
              <template #item="{ element }">
                <div class="list-group-item">
                  <svg class="icon type-icon" aria-hidden="true">
                    <use :xlink:href="`#icon-${element.type}`"></use>
                  </svg>
                  <span>{{ element.label }}</span>
                </div>
              </template>
            </draggable>
            <el-icon class="delete" :size="16" @click="scope.row.formData = []">
              <Delete />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column label="高级设置">
          <template #default="scope">
            <el-icon class="btn" :size="16" @click="onSetting(scope.row)">
              <Operation />
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="right">
      <p class="title">相应数据</p>
      <div class="box">
        <div class="content">
          <draggable
            v-model="inputData"
            class="list-group"
            item-key="dataIndex"
            :group="{ name: 'items', pull: 'clone' }"
            :sort="false"
          >
            <template #item="{ element }">
              <div class="list-group-item">
                <svg class="icon type-icon" aria-hidden="true">
                  <use :xlink:href="`#icon-${element.type}`"></use>
                </svg>
                <span>{{ element.label }}</span>
              </div>
            </template>
          </draggable>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import draggable from 'vuedraggable';
import { ref } from 'vue';
interface InputData {
  type?:
    | 'text'
    | 'textarea'
    | 'select'
    | 'radio'
    | 'checkbox'
    | 'date'
    | 'password';
  dataIndex: string;
  label: string;
}
interface ConfigTableData {
  [key: string]: any;
  formData: any;
}
defineProps({
  tableData: {
    type: Array as () => ConfigTableData[],
    default: () => []
  }
});
const configTableData = ref<ConfigTableData[]>([]);
// watch();
// () => props.tableData,
// (newVal: ConfigTableData[]) => {
//   const copyTable = [...newVal];
//   configTableData.value = copyTable.map((item) => {
//     addExtraProp(item as any, 'formData', []);
//     return item;
//   });
// },
// {
//   deep: true,
//   immediate: true
// }
const inputData = ref<InputData[]>([
  {
    type: 'text',
    dataIndex: 'code',
    label: '编码'
  },
  {
    type: 'textarea',
    dataIndex: 'name',
    label: '名称'
  },
  {
    type: 'select',
    dataIndex: 'province',
    label: '省份'
  },
  {
    type: 'radio',
    dataIndex: 'work',
    label: '是否启用'
  },
  {
    type: 'checkbox',
    dataIndex: 'way',
    label: '方式'
  },
  {
    type: 'date',
    dataIndex: 'startDate',
    label: '开始日期'
  },
  {
    type: 'password',
    dataIndex: 'password',
    label: '密码'
  }
]);
const onSetting = (data: object) => {
  console.log(data);
};
const onSubmit = () => {
  console.log('config>>>>', configTableData);
};
</script>
<style scoped lang="scss">
.api-req-wrapper {
  display: flex;
  .box {
    background: #ffffff;
    border-radius: 4px;
  }
  .title {
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #455a74;
    padding: 12px 0 8px;
  }
  .left {
    flex: 1;
    margin-right: 12px;
  }
  .right {
    width: 746px;
    .box {
      padding: 6px 12px;
      height: 100%;
    }
    .content {
      height: 100%;
      background: #f9f9f9;
      padding: 12px;
      color: #455a74;
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
    }
  }
}
.btn {
  cursor: pointer;
}
.custom-table {
  :deep(.el-table__expand-icon) {
    vertical-align: middle;
  }
  .custom-cell {
    color: #455a74;
    font-size: 12px;
    line-height: 20px;
    height: 58px;
  }
  :deep(.custom-table-header) {
    @extend .custom-cell;
    .cell {
      font-weight: 500;
    }
  }
  :deep(.custom-table-row) {
    @extend .custom-cell;
  }
}
.custom-table-cell {
  display: inline-block;
  vertical-align: middle;
  p {
    height: 20px;
    line-height: 20px;
  }
}
.list-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, 98px);
  grid-gap: 12px;
  &-item {
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    cursor: pointer;
    &:active {
      background: #e4ebff;
    }
  }
}
.type-icon {
  font-size: 16px;
  margin-right: 8px;
}
.tag-box {
  height: 42px;
  background: #f9f9f9;
  border-radius: 4px;
  padding: 5px 10px;
}
.delete {
  position: absolute;
  right: 22px;
  top: 13px;
  cursor: pointer;
}
</style>

src/views/_components/panel/PanelSubFlow.vue

@@ -37,10 +37,16 @@
</template>
<script setup>
import { ref, watchEffect } from 'vue';
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,
@@ -124,22 +130,22 @@ const panelData = ref(
  }
);
// function setNodeAttrData () {
//   props.targetNode.cell.setData({
//     attrsData: JSON.parse(JSON.stringify(panelData.value))
//   })
//   console.log(props.targetNode.cell.getData())
// }
// watchEffect(panelData.value, () => {
//   setNodeAttrData()
// }, { deep: true })
// 获取子流程列表
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>

src/views/flow/SystemDetail.vue

@@ -29,6 +29,7 @@
      <template #left>
        <div class="system-tree">
          <common-tree
            ref="logicTree"
            :tree-data="moduleTreeData"
            :actions="actions"
            :attrs="defaultProps"
@@ -99,6 +100,8 @@ const apiDetail = ref(null);
const versionState = ref('');
const store = useStore();
const logicTree = ref(null);
const systemId = computed(() => route.query.id);
const curVersionId = ref('');
@@ -259,9 +262,13 @@ const defaultProps = ref({
  props: {
    children: 'logicServices',
    label: 'name',
    id: 'id',
    'default-expand-all': true
  }
    id: 'id'
  },
  'default-expand-all': true,
  'node-key': 'id',
  'default-expanded-keys': [],
  indent: 10,
  accordion: true
});
// 获取模型树列表
function getModuleData() {
@@ -277,6 +284,13 @@ function getModuleData() {
      if (!curLogic.value) {
        curLogic.value = moduleTreeData.value?.[0]?.logicServices?.[0].id || '';
      }
      console.log(moduleTreeData.value);
      console.log(curLogic.value);
      setTimeout(() => {
        logicTree.value.treeRef.setCurrentKey(curLogic.value, true);
      }, 100);
      defaultProps.value['default-expanded-keys'] =
        moduleTreeData.value.datas?.[0]?.id;
    } else {
      proxy.$message.error('');
    }

src/views/flow/_components/ApiDetailPage.vue

@@ -326,9 +326,10 @@ onMounted(() => {});
<style scoped lang="scss">
.api-detail {
  padding: 24px;
  padding: 0;
  width: auto;
  height: calc(100vh - 250px);
  height: calc(100vh - 210px);
  box-sizing: border-box;
  overflow: auto;
  .card {
    width: 100%;
@@ -390,6 +391,11 @@ onMounted(() => {});
  font-weight: 500;
  margin-bottom: 10px;
}
.api-text {
  padding-bottom: 20px;
  background-color: #fff;
  box-sizing: border-box;
}
.editor {
  height: 300px;
}

src/views/manager/Index.vue

@@ -0,0 +1,10 @@
<template>
  <DragComments></DragComments>
  <!-- <TreeItem></TreeItem> -->
</template>
<script setup lang="ts">
import DragComments from '../_components/drag/DragComments.vue';
// import TreeItem from '../_components/drag/TreeItem.vue';
</script>
<style scoped lang="scss"></style>