fixed: 替换老UI方法

src/api/flow.ts

@@ -177,3 +177,27 @@ export function getLogicDetailById(id: any) {
  });
}
/** 接口end */
// 获取数据源列表
export function getSqlList() {
  return AIotRequest.get({
    url: flow.database
  });
}
// 获取域名列表接口
export function getFunctionList() {
  return AIotRequest.get({
    url: flow.getFunctionList
  });
}
// 测试接口
export function testLogic(data: any, id: any) {
  return AIotRequest.patch({
    url: `{flow.logicMgmt}/${id}`,
    data
  });
}
//

src/views/_components/_flow/Index.vue

@@ -145,14 +145,14 @@ function initGraph() {
          sourcePorts.filter((el) => el.id === sourcePort)?.[0].group ===
          'input'
        ) {
          // proxy.$utils.ipuMessage('不能从输入节点进行连线！', 'error')
          proxy.$message.error('不能从输入节点进行连线！');
          return false;
        }
        if (
          tartgetPorts.filter((el) => el.id === targetPort)?.[0].group ===
          'output'
        ) {
          // proxy.$utils.ipuMessage('不能连接输出节点！', 'error')
          proxy.$message.error('不能连接输出节点！');
          return false;
        }
        return true;
@@ -163,7 +163,7 @@ function initGraph() {
        const connectionCount = magnet.getAttribute('connection-count');
        const max = connectionCount ? parseInt(connectionCount, 10) : 1;
        if (max === 0) {
          proxy.$utils.ipuMessage('请配置路由分发节点！', 'error');
          proxy.$message.error('请配置路由分发节点！');
        }
        const outgoingEdges = graph.value.getOutgoingEdges(cell);
        if (outgoingEdges) {

src/views/_components/_flow/ToolBar.vue

@@ -24,10 +24,6 @@
<script setup>
import { defineProps, ref, getCurrentInstance, onMounted } from 'vue';
// import { computed, defineProps, ref, getCurrentInstance, onMounted } from 'vue';
// import { useRoute } from 'vue-router';
// import NodeDataFormate from './nodeDataFormate.js';
const emits = defineEmits(['toolHandelClick']);
@@ -44,108 +40,11 @@ defineProps({
const { proxy } = getCurrentInstance();
const targetNode = ref(null);
// const route = useRoute();
// const flowId = computed(() => route.query.id);
// const url = '';
// 点击事件
const handleClick = (name) => {
  emits('toolHandelClick', name);
  // const cells = props.graph.getSelectedCells();
  // console.log(cells);
  // switch (name) {
  //   case 'tool-undo':
  //     props.graph.history.undo();
  //     break;
  //   case 'tool-redo':
  //     props.graph.history.redo();
  //     break;
  //   case 'tool-copy':
  //     proxy.$utils.ipuMessage('已复制至剪切板！');
  //     if (cells.length) {
  //       props.graph.copy(cells);
  //     }
  //     break;
  //   case 'tool-cut':
  //     if (cells.length) {
  //       proxy.$utils.ipuMessage('已剪切至剪切板！');
  //       props.graph.cut(cells);
  //     }
  //     break;
  //   case 'tool-paste':
  //     if (!props.graph.isClipboardEmpty()) {
  //       const cells = props.graph.paste({ offset: 100 });
  //       props.graph.cleanSelection();
  //       props.graph.select(cells);
  //     }
  //     break;
  //   case 'tool-delete':
  //     if (cells.length) {
  //       props.graph.cut(cells);
  //       props.graph.cleanClipboard();
  //     }
  //     break;
  //   case 'tool-save':
  //     // eslint-disable-next-line no-use-before-define
  //     saveFlowData();
  //     break;
  //   case 'tool-send':
  //     // eslint-disable-next-line no-use-before-define
  //     publishFlow();
  //     break;
  //   case 'tool-var':
  //     proxy.$eBus.emit('open:right-panel');
  //     break;
  //   default:
  //     break;
  // }
};
// 获取所有节点信息
// function getNodesData() {
//   return NodeDataFormate.nodeDataFormate(props.graph);
// }
// 保存流程图
// async function saveFlowData() {
//   const databusData = JSON.parse(localStorage.getItem('panelGlobal')) || {};
//   const params = {
//     jsonData: JSON.stringify(props.graph),
//     databusData: JSON.stringify(databusData[flowId.value]),
//     stateValue: '1',
//     nodesData: getNodesData()
//   };
//   console.log(params);
//   await proxy.$reqPatch(`${url}/${flowId.value}`, params).then((res) => {
//     if (res.data.resultCode === '0') {
//       proxy.$utils.ipuMessage('流程保存成功！');
//     } else {
//       proxy.$utils.ipuMessage(res.data.resultMsg, 'error');
//     }
//   });
// }
// 发布逻辑流
// async function publishFlow() {
//   // const nodes = props.graph.getNodes()
//   const databusData = JSON.parse(localStorage.getItem('panelGlobal')) || {};
//   const params = {
//     jsonData: JSON.stringify(props.graph),
//     databusData: JSON.stringify(databusData[flowId.value]),
//     stateValue: '2',
//     nodesData: getNodesData()
//   };
//   await proxy.$reqPatch(`${url}/${flowId.value}`, params).then((res) => {
//     if (res.data.resultCode === '0') {
//       proxy.$utils.ipuMessage('流程发布成功！');
//     } else {
//       proxy.$utils.ipuMessage(res.data.resultMsg, 'error');
//     }
//   });
// }
onMounted(() => {
  proxy.$eBus.on('select-node', (data) => {
    targetNode.value = data;

src/views/_components/_flow/flowHooks.js

@@ -1,458 +0,0 @@
import { getCurrentInstance, ref } from 'vue';
import { Graph, Addon, Shape, Dom, Point } from '@antv/x6';
import { useStore } from 'vuex';
const { Dnd } = Addon;
export function useFlowHooks(flowId, container) {
  const store = useStore();
  const { proxy } = getCurrentInstance();
  const dnd = ref(null);
  const graph = ref(null);
  const graphData = ref(null);
  const curEdge = ref(null);
  const zoom = ref(1);
  function setGraphSize() {
    if (graph.value && container) {
      graph.value.resize(container.clientWidth, container.clientHeight);
      graph.value.centerContent();
    }
  }
  // 注册路由
  function registerRouter() {
    Graph.registerRouter('custom', (vertices, args, view) => {
      const start = view.sourceAnchor;
      const points = [];
      points.push(new Point(start.x + 48, start.y));
      points.push(
        new Point(
          view.targetBBox.leftMiddle.x - 20,
          view.targetBBox.leftMiddle.y
        )
      );
      return points;
    });
  }
  // 初始化形状
  function initGraphShape() {
    graph.value.fromJSON({});
    console.log(graphData.value);
    graph.value.fromJSON(graphData.value);
  }
  // 初始化dnd
  function initDnd() {
    return new Dnd({
      target: graph.value,
      scaled: false,
      animation: true,
      validateNode(droppingNode, options) {
        return droppingNode.shape === 'html'
          ? new Promise((resolve) => {
              const { draggingNode, draggingGraph } = options;
              const view = draggingGraph.findView(draggingNode);
              const contentElem = view.findOne('foreignObject > body > div');
              Dom.addClass(contentElem, 'validating');
              setTimeout(() => {
                Dom.removeClass(contentElem, 'validating');
                resolve(true);
              }, 3000);
            })
          : true;
      }
    });
  }
  // 初始化事件
  function initEvent(graph) {
    graph.on('edge:mouseenter', ({ cell }) => {
      if (cell) {
        let removeBtnCfg = {};
        if (cell.isEdge()) {
          removeBtnCfg = { distance: '30%' };
        }
        if (cell.isNode()) {
          const cellView = graph.value.findView(cell);
          cellView.addClass(`${cell.shape}-selected`);
          removeBtnCfg = { x: 0, y: 0, offset: { x: -5, y: -5 } };
        }
        cell.addTools({
          name: 'button-remove', // 工具名称
          args: removeBtnCfg // 工具对应的参数
        });
      }
    });
    graph.on('edge:mouseleave', ({ cell }) => {
      cell.removeTools();
    });
    graph.on('node:added', () => {
      store.commit('sceneFlow/setCurrentNodes', graph.getNodes());
    });
    // 双击节点，打开弹窗
    graph.on('node:dblclick', () => {
      const cells = graph.getSelectedCells();
      // const data = cells[0].store.data
      proxy.$eBus.emit('select:node', cells[0].store.data);
    });
    graph.on('node:mousedown', () => {});
    graph.on('node:selected', () => {
      // const data = cell.node.getData()
      // proxy.$eBus.emit('select-node', cell)
    });
    graph.on('cell:dblclick', (cell) => {
      proxy.$eBus.emit('select-node', cell);
    });
    graph.on('edge:click', (e, edge) => {
      /**
       * 判断连线的source cell,如果是route节点，则可以进行label的编辑与新增
       */
      // const data = cells[0].store.data
      // proxy.$eBus.emit('select:node', cells[0].store.data)
      console.log(e, edge);
    });
    graph.on('edge:contextmenu', ({ edge }) => {
      curEdge.value = edge;
      const curCell = edge.getSourceCell();
      console.log(curCell);
    });
    graph.on('node:changed', (e, node, view) => {
      // const cells = graph.getSelectedCells()
      // debugger
      // const data = cells[0].store.data
      console.log(node, view);
      proxy.$eBus.emit('change:node', e.cell.store.data);
    });
    // 单机选中节点，右键打开弹窗
    // graph.on('node:contextmenu', ({ e, x, y, cell, view }) => {
    graph.on('node:contextmenu', () => {
      // const data = cell.getData();
      // const data = cells[0].store.data
      // proxy.$eBus.emit('select:node', data)
    });
    // 点击空白处关闭弹窗
    graph.on('blank:dblclick', () => {
      proxy.$eBus.emit('open:right-panel');
    });
    graph.on('blank:mousedown', () => {});
    // 复制
    graph.bindKey(['meta+c', 'ctrl+c'], () => {
      const cells = graph.getSelectedCells();
      if (cells.length) {
        graph.copy(cells);
      }
      return false;
    });
    // 剪切
    graph.bindKey(['meta+x', 'ctrl+x'], () => {
      const cells = graph.getSelectedCells();
      if (cells.length) {
        graph.cut(cells);
      }
      return false;
    });
    // 粘贴
    graph.bindKey(['meta+v', 'ctrl+v'], () => {
      if (!graph.isClipboardEmpty()) {
        const cells = graph.paste({ offset: 100 });
        graph.cleanSelection();
        graph.select(cells);
      }
      return false;
    });
    // 删除
    graph.bindKey(['meta+d', 'ctrl+d'], () => {
      const cells = graph.getSelectedCells();
      if (cells.length) {
        graph.cut(cells);
        graph.cleanClipboard();
      }
      return false;
    });
    // 保存数据
    graph.bindKey(['meta+p', 'ctrl+p'], () => {
      localStorage.setItem('grphData', JSON.stringify(graph.toJSON()));
      return false;
    });
    // undo redo
    graph.bindKey(['meta+z', 'ctrl+z'], () => {
      if (graph.history.canUndo()) {
        graph.history.undo();
      }
      return false;
    });
    graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
      if (graph.history.canRedo()) {
        graph.history.redo();
      }
      return false;
    });
    // select all
    graph.bindKey(['ctrl+a', 'meta+a'], () => {
      const nodes = graph.getNodes();
      if (nodes) {
        graph.select(nodes);
      }
    });
    // delete
    graph.bindKey('backspace', () => {
      const cells = graph.getSelectedCells();
      if (cells.length) {
        graph.removeCells(cells);
        proxy.$eBus.emit('close:right-panel');
      }
    });
    // zoom 放大
    graph.bindKey(['ctrl+1', 'meta+1'], () => {
      zoom.value = graph.zoom();
      if (zoom.value < 2) {
        graph.zoom(0.1);
      }
    });
    // 缩小
    graph.bindKey(['ctrl+2', 'meta+2'], () => {
      zoom.value = graph.zoom();
      if (zoom.value > 0.5) {
        graph.zoom(-0.1);
      }
    });
    // 聚焦
    graph.bindKey(['ctrl+3', 'meta+3'], () => {
      graph.centerContent();
    });
  }
  // 初始化图表
  function initGraph() {
    const container = document.getElementById('flow');
    container.addEventListener('dragover', (event) => {
      event.preventDefault();
    });
    const graph = new Graph({
      container,
      height: 'calc(100vh - 100px)',
      background: {
        color: '#F8F8F8'
      },
      // autoResize: true,
      // 滚动
      // scroller: {
      //   enabled: true,
      //   pageVisible: false, // 是否分页
      //   pageBreak: false, // 是否显示分页符
      //   pannable: true // 启用画布平移能力
      // },
      panning: {
        enabled: true
      },
      mousewheel: {
        enabled: true
      },
      scaling: {
        min: 0.5,
        max: 2
      },
      // @:网格
      grid: {
        size: 10,
        visible: true
      },
      // 对齐线
      snapline: {
        enabled: true // @:对齐线
      },
      // 剪切板启用（复制，粘贴，剪切功能）
      clipboard: true,
      // 键盘启用（键盘快捷键功能）
      keyboard: true,
      // 历史记录（回退前进功能）
      history: true,
      //
      connection: {
        enabled: true // @:开启连线交互
      },
      // 配置全局连线规则
      connecting: {
        snap: true,
        anchor: 'center', // 锚点位置
        allowBlank: false, // 是否允许连接空白位置
        allowLoop: false, // 是否允许循环创建节点
        allowPort: true, // 是否允许边链接到链接桩，
        allowNode: false,
        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.getOutgoingEdges(cell);
          if (outgoingEdges) {
            outgoingEdges.forEach((edge) => {
              const edgeView = graph.findViewByCell(edge);
              if (edgeView.sourceMagnet === magnet) {
                count += 1;
              }
            });
          }
          return count < max;
        }
      },
      // 节点拖拽到另外一个节点中
      embedding: {
        enabled: true,
        findParent({ node }) {
          const bbox = node.getBBox();
          return this.getNodes().filter((item) => {
            // @: 只有data.parent为true的节点才是父节点
            const data = item.getData();
            if (data && data.parent) {
              const targetBBox = item.getBBox();
              return bbox.isIntersectWithRect(targetBBox);
            }
            return false;
          });
        }
      },
      // 节点选中
      selecting: {
        enabled: true,
        multiple: false, // 多选
        rubberband: false, // @:是否启用框选
        movable: true,
        showNodeSelectionBox: true,
        filter: [] // @:['xx'] xx节点不能被选中
      }
    });
    graph.on('mouseEvent', (data) => {
      const { e } = data;
      switch (data.eventName) {
        case 'mouseDown':
          graph.mouseDownMoveFlag = !e.state;
          // 记录点击位置
          graph.mouseDownPos = e;
          break;
        case 'mouseUp':
          graph.mouseDownMoveFlag = false;
          // 一次移动结束，记录最终view偏移量
          graph.viewTranslate = { ...graph.viewOffset };
          break;
        case 'mouseMove':
          if (graph.mouseDownMoveFlag) {
            const vt = graph.viewTranslate;
            // 设置偏移位置
            const tx = e.graphX - graph.mouseDownPos.graphX + vt.graphX || 0;
            const ty = e.graphY - graph.mouseDownPos.graphY + vt.graphY || 0;
            // 保存view偏移量
            graph.viewOffset = { graphX: tx, graphY: ty };
            graph.view.setTranslate(tx, ty);
          }
          break;
        default:
          break;
      }
    });
    return graph;
  }
  // 获取线上数据
  function getNodesData() {
    const url = proxy.$api.logicMgmt;
    proxy
      .$reqGet(`${url}/${flowId}`)
      .then((res) => {
        if (res.data.resultCode === '0') {
          graphData.value = JSON.parse(res.data.result?.jsonData) || {};
          const panelGlobal = {};
          panelGlobal[flowId] = JSON.parse(res.data.result?.databusData) || {};
          localStorage.setItem('panelGlobal', JSON.stringify(panelGlobal));
        }
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => {
        initFlow();
      });
  }
  // 初始化
  function initFlow() {
    Graph.unregisterRouter('custom');
    registerRouter();
    if (!graph.value) {
      graph.value = initGraph();
    }
    dnd.value = initDnd();
    initEvent(graph.value);
    if (graphData.value) {
      initGraphShape();
    }
    setGraphSize();
  }
  return {
    dnd,
    graph,
    graphData,
    getNodesData
  };
}

src/views/_components/panel/PanelFunction.vue

@@ -42,6 +42,7 @@ import { getCurrentInstance, ref, watch } from 'vue';
import CommonPanel from './common/CommonPanel.vue';
import InputOutputTab from './sql-components/InputOutputTab.vue';
import ParamItem from './common/ParamItem.vue';
import { getFunctionList } from '../../../api/flow';
const { proxy } = getCurrentInstance();
const props = defineProps({
@@ -157,19 +158,16 @@ function setNodeAttrData() {
//   }
// }
async function getFunctionList() {
  const url = proxy.$api.getFunctionList;
  await proxy
    .$reqGet(url)
async function getList() {
  await getFunctionList()
    .then((res) => {
      domainList.value = res.data.result;
      // initData()
    })
    .catch((err) => {
      console.log(err);
    });
}
getFunctionList();
getList();
// 选择domain
function changeDomain(data) {
  nameList.value =

src/views/_components/panel/PanelGlobal.vue

@@ -20,12 +20,12 @@
            ></el-input>
          </el-form-item>
          <el-form-item label="服务方法" prop="method">
            <el-select
            <common-select
              v-model="basicFormData.method"
              class="form-item"
              :options="methodsOptions"
              placeholder="请选择服务方法"
            ></el-select>
            ></common-select>
          </el-form-item>
          <el-form-item label="服务描述">
            <el-input
@@ -75,20 +75,26 @@
    <!-- 自定义属性声明 -->
    <!-- 模型声明 -->
    <el-table
    <common-table
      v-if="activeName === 'models' || activeName === 'customAttrs'"
      class="global-table"
      :table-header="table[activeName]?.header"
      :table-data="table[activeName]?.data"
    >
      <template #custom="scope">
        <el-icon
        <!-- <el-icon
          v-if="activeName === 'customAttrs'"
          class="icon"
          @click="editFn(scope.row)"
        >
          <Edit></Edit>
        </el-icon>
        </el-icon> -->
        <common-icon
          v-if="activeName === 'customAttrs'"
          name="common-bianji"
          @click="editFn(scope.row)"
        ></common-icon>
        <!-- 删除 -->
        <el-popconfirm
          :title="deleteTitle[activeName]"
@@ -96,11 +102,12 @@
          @cancel="cancelEvent"
        >
          <template #reference>
            <el-icon class="icon"><Delete></Delete></el-icon>
            <!-- <el-icon class="icon"><Delete></Delete></el-icon> -->
            <common-icon name="common-shanchu"></common-icon>
          </template>
        </el-popconfirm>
      </template>
    </el-table>
    </common-table>
  </div>
  <dialog-panel
    v-if="isShowPanel"
@@ -130,7 +137,6 @@
import { computed, reactive, ref, watch } from 'vue';
import XLSX from 'xlsx';
// 模型属性引入
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
@@ -218,9 +224,6 @@ watch(
// 处理整体服务数据
function parsePanelGlobalData() {
  const panelGlobalData = ref({});
  // if (localStorage.getItem('panelGlobal')) {
  //   panelGlobalData.value = JSON.parse(localStorage.getItem('panelGlobal'))
  // }
  panelGlobalData.value[flowId.value] = table.value;
  localStorage.setItem('panelGlobal', JSON.stringify(panelGlobalData.value));
}

src/views/_components/panel/PanelSql.vue

@@ -97,6 +97,7 @@
import { getCurrentInstance, reactive, ref, watch } from 'vue';
import MyCode from '../_codemirror/MyCode.vue';
import InputOutputTab from './sql-components/InputOutputTab.vue';
import { getSQLList } from '../../../api/flow';
const { proxy } = getCurrentInstance();
const props = defineProps({
@@ -273,9 +274,8 @@ const propsMap = ref({
  label: 'showName'
});
// 获取数据库列表
function getSQLList() {
  proxy
    .$reqGet(proxy.$api.database)
function getList() {
  getSQLList()
    .then((res) => {
      if (res.data.resultCode === '0') {
        datasources.value = res.data.result.map((item) => {
@@ -287,7 +287,7 @@ function getSQLList() {
        });
      } else {
        datasources.value = [];
        proxy.$utils.ipuMessage(res.data.resultMsg, 'error');
        proxy.$message.error(res.data.resultMsg);
      }
    })
    .catch((err) => {
@@ -295,7 +295,7 @@ function getSQLList() {
      datasources.value = [];
    });
}
getSQLList();
getList();
watch(
  panelData.value,
  () => {

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

@@ -17,13 +17,13 @@
          class="int int2"
          placeholder="请输入value"
        ></el-input>
        <el-select
        <common-select
          v-if="options && options.length"
          v-model="item.value"
          class="int int2"
          placeholder="请选择"
          :options="options"
        ></el-select>
        ></common-select>
        <el-icon
          v-if="index < datas.length - 1"
          class="icon"

src/views/flow/_components/ApiDetailPage.vue

@@ -15,7 +15,7 @@
          -->
          <el-button
            :disabled="props.versionState === 'PUBLISHED'"
            @click.stop="stopTest"
            @click.stop="logicOperation(3, '确定测试该接口吗？')"
          >
            测试
          </el-button>
@@ -24,7 +24,7 @@
              apiDetail?.state !== 'STARTED' ||
              props.versionState === 'PUBLISHED'
            "
            @click.stop="stopLogic"
            @click.stop="logicOperation(4, '确定停用该api吗？')"
          >
            停用
          </el-button>
@@ -161,6 +161,7 @@
<script setup>
// import JsonEditorVue from 'json-editor-vue3';
import { getCurrentInstance, onMounted, ref, watch } from 'vue';
import { logicModeUpdate, testLogic } from '../../../api/flow';
const { proxy } = getCurrentInstance();
const emits = defineEmits(['editLogicApi', 'initApiInfo']);
@@ -190,50 +191,35 @@ function initApiInfo() {
  emits('initApiInfo');
}
// 测试按钮
function stopTest() {
  proxy.$utils.confirmMessage('确定测试该接口吗？').then(() => {
    const url = proxy.$api.logicMgmt;
    const params = {
      stateValue: 3
    };
    proxy
      .$reqPatch(`${url}/${props.apiDetail?.id}`, params)
      .then((res) => {
        if (res.data.resultCode === '0') {
          proxy.$utils.ipuMessage('测试成功');
        } else {
          proxy.$utils.ipuMessage(res.data.resultMsg, 'error');
        }
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => {
        initApiInfo();
      });
  });
}
// 停用
function stopLogic() {
  proxy.$utils.confirmMessage('确定停用该api吗？').then(() => {
    const url = proxy.$api.logicMgmt;
    const params = {
      stateValue: '4'
    };
    proxy
      .$reqPatch(`${url}/${props.apiDetail?.id}`, params)
      .then((res) => {
        if (res.data.resultCode === '0') {
          proxy.$utils.ipuMessage('api已下架！');
        } else {
          proxy.$utils.ipuMessage(res.data.resultMsg, 'error');
        }
      })
      .catch((err) => {
        console.log(err);
      });
  });
function logicOperation(state, msg) {
  proxy
    .$confirm(msg, '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      const params = {
        stateValue: state
      };
      logicModeUpdate(params, props.apiDetail?.id)
        .then((res) => {
          if (res.data.resultCode === '0') {
            proxy.$message.success(res.resultMsg);
          } else {
            proxy.$message.error(res.resultMsg, 'error');
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          initApiInfo();
        });
    });
}
// 接口详情
function apiDetailHooks() {
  const request = ref({
@@ -300,17 +286,16 @@ function testHooks() {
    testResponse.value = {};
  }
  updateTestData();
  function test() {
    const { testLogic } = proxy.$api;
    const { params } = testRequest.value;
    proxy
      .$reqPost(`${testLogic}/${props.apiDetail.id}`, params)
    testLogic(params, props.apiDetail.id)
      .then((res) => {
        if (res.data.resultCode === '0') {
          proxy.$utils.ipuMessage('请求成功！');
          proxy.$message.success('请求成功！');
          testResponse.value = res.data.result;
        } else {
          proxy.$utils.ipuMessage(res.data.resultMsg, 'error');
          proxy.$message.error(res.data.resultMsg);
        }
      })
      .catch((err) => {