update: 添加初版流程编排功能

package-lock.json

@@ -7657,6 +7657,14 @@
      "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.1.1.tgz",
      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
    },
    "qs": {
      "version": "6.11.1",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.1.tgz",
      "integrity": "sha512-0wsrzgTz/kAVIeuxSjnpGC56rzYtr6JT/2BwEvMaPhFIoYa1aGO8LbzuU1R0uUYQkLpWBTOj0l/CLAJB64J6nQ==",
      "requires": {
        "side-channel": "^1.0.4"
      }
    },
    "query-string": {
      "version": "4.3.4",
      "resolved": "https://registry.npmmirror.com/query-string/-/query-string-4.3.4.tgz",

package.json

@@ -33,6 +33,7 @@
    "json-editor-vue3": "^1.0.8",
    "mitt": "^3.0.0",
    "prettier": "^2.7.1",
    "qs": "^6.11.1",
    "sass": "^1.56.1",
    "uuid": "^9.0.0",
    "vite-plugin-eslint": "^1.8.1",

src/App.vue

@@ -5,6 +5,18 @@
 * @LastEditTime: 2023-02-23 16:39:57
 * @Description: demo入口文件
-->
<template>
  <common-layer
    :menu-list="menuList"
    :user-info="userInfo"
    :header-info="headerInfo"
    :commonds="commonds"
    :is-collapse="isCollapse"
    :aside-width="asideWidth"
    :breads="route.meta.breadcrumb"
    @handle-change-collapse="handleChangeCollapse"
  ></common-layer>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
@@ -13,10 +25,10 @@ import logoImg from './assets/images/logo.svg';
const menuList = ref<any>([
  {
    label: '流程编排',
    name: 'system',
    name: 'flow-system',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/system'
    path: '/flow-system'
  },
  {
    label: '子流程管理',
@@ -53,19 +65,6 @@ function handleChangeCollapse(collapse: any) {
}
</script>
<template>
  <common-layer
    :menu-list="menuList"
    :user-info="userInfo"
    :header-info="headerInfo"
    :commonds="commonds"
    :is-collapse="isCollapse"
    :aside-width="asideWidth"
    :breads="route.meta.breadcrumb"
    @handle-change-collapse="handleChangeCollapse"
  ></common-layer>
</template>
<style>
html,
body {

src/api/flow.ts

@@ -53,16 +53,82 @@ export function deleteSystemById(data: any) {
    data
  });
}
// 复制系统
// 克隆系统
export function copySystemById(data: any) {
  return AIotRequest.post({
    url: flow.systemMgmt,
    data
  });
}
// 根据ID获取系统详情
export function getSystemDetailById(id: any) {
  return AIotRequest.get({
    url: `${flow.systemMgmt}/${id}`
  });
}
/**
 * 版本 start
 */
export function getVersionList(id: any) {
  return AIotRequest.get({
    url: `${flow.versionMgmt}?systemId=${id}`
  });
}
/**
 * 版本 end
 */
/**
 * 模块start
 */
// 获取模块列表
export function getModuleList(data: any) {
  return AIotRequest.get({
    url: flow.moduleMgmt,
    data
  });
}
// 新增模块
export function createModule(data: any) {
  return AIotRequest.post({
    url: flow.moduleMgmt,
    data
  });
}
// 修改模块
export function updateModuleById(data: any, id: any) {
  return AIotRequest.patch({
    url: `${flow.moduleMgmt}/${id}`,
    data
  });
}
// 克隆模块
export function cloneModuleById(data: any, id: any) {
  return AIotRequest.post({
    url: `${flow.modclone}/${id}`,
    data
  });
}
// 删除模块
export function deleteModuleById(id: any) {
  return AIotRequest.delete({
    url: `${flow.moduleMgmt}/${id}`
  });
}
/**
 * 模块end
 */
/** 接口start */
// 流程数据暂存
// 新增接口
export function createLogic(data: any) {
  return AIotRequest.post({
    url: flow.logicMgmt,
    data
  });
}
// 编辑接口
export function updateFlowDataById(data: any, id: any) {
  return AIotRequest.patch({
    url: `${flow.logicMgmt}/${id}`,
@@ -70,4 +136,23 @@ export function updateFlowDataById(data: any, id: any) {
  });
}
// 删除接口
export function deleteLogicById(id: any) {
  return AIotRequest.delete({
    url: `${flow.logicMgmt}/${id}`
  });
}
// 克隆接口
export function cloneLogicById(data: any, id: any) {
  return AIotRequest.post({
    url: `${flow.modlogic}/${id}`,
    data
  });
}
// 获取接详情
export function getLogicDetailById(id: any) {
  return AIotRequest.get({
    url: `${flow.logicMgmt}/${id}`
  });
}
/** 接口end */

src/api/request.js

@@ -1,6 +1,7 @@
import axios from 'axios';
// import { ElLoading, ElMessage } from 'element-plus';
import qs from 'qs';
const DEAFULT_LOADING = false;
@@ -119,7 +120,9 @@ class AiotRequest {
  }
  get(config) {
    console.log(config);
    if (config.data && Object.keys(config.data)?.length) {
      config.url = `${config.url}?${qs.stringify(config.data)}`;
    }
    return this.request({ ...config, method: 'GET' });
  }

src/router.ts

@@ -10,21 +10,60 @@ import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
const routes: Array<RouteRecordRaw> = [
  {
    path: '/system',
    name: 'SystemList',
    component: () => import('./views/flow/SystemList.vue'),
    meta: {
      breadcrumb: [{ name: '系统管理' }]
    },
    children: []
    path: '',
    component: () => import('./views/flow/Container.vue'),
    children: [
      {
        path: '/flow-system',
        name: 'SystemList',
        component: () => import('./views/flow/SystemList.vue'),
        meta: {
          breadcrumb: [{ name: '系统管理' }]
        }
      },
      {
        path: '/flow-module',
        name: 'SystemDetail',
        component: () => import('./views/flow/SystemDetail.vue'),
        meta: {
          breadcrumb: [
            {
              name: '系统管理',
              to: {
                name: 'SystemList'
              }
            },
            { name: '模块' }
          ]
        }
      },
      {
        path: '/flow-detail',
        name: 'Flow',
        component: () => import('./views/flow/Flow.vue'),
        meta: {
          breadcrumb: [
            {
              name: '系统管理',
              to: {
                name: 'SystemList'
              }
            },
            {
              name: '模块',
              to: {
                name: 'SystemDetail'
              }
            },
            { name: '逻辑详情' }
          ]
        }
      }
    ]
  },
  {
    path: '',
    name: 'Container',
    component: () => import('./views/sub-flow/Container.vue'),
    meta: {
      breadcrumb: [{ name: '子流程管理' }]
    },
    children: [
      {
        path: '/sub-flow',
@@ -35,7 +74,7 @@ const routes: Array<RouteRecordRaw> = [
        }
      },
      {
        path: '/sub-flow/flow',
        path: '/sub-flow-detail',
        name: 'SubFlow',
        meta: {
          breadcrumb: [

src/views/_components/panel/PanelStart.vue

@@ -28,8 +28,8 @@
  <dialog-panel
    v-if="showImport"
    :dialog-data="dialogData"
    @confirmDialog="confirmModelDialog"
    @closeDialog="closeModelDialog"
    @confirm-dialog="confirmModelDialog"
    @close-dialog="closeModelDialog"
  >
    <!-- 选择 -->
    <el-radio-group v-model="selectTab">

src/views/flow/Container.vue

@@ -0,0 +1,9 @@
<template>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss"></style>

src/views/flow/Flow.vue

@@ -0,0 +1,175 @@
<template>
  <div class="flow-logic">
    <sub-flow
      :nodes="nodeList"
      :tool-list="toolList"
      :flow-data="subFlowDetail"
      @tool-handel-click="toolHandelClick"
    ></sub-flow>
  </div>
  <!-- 弹窗区域 -->
  <right-panel></right-panel>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue';
/** x6相关end */
import { useRoute } from 'vue-router';
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 nodeList = ref(nodes.nodes);
const { proxy } = getCurrentInstance();
const route = useRoute();
const subFlowDetail = ref(null);
const subFlowId = ref(route.query.id);
// 获取流程数据
async function getLogicDetailById() {
  await api.getLogicDetailById(subFlowId.value).then((res) => {
    if (res.resultCode === '0') {
      subFlowDetail.value = res.result;
    } else {
      proxy.$message.error(res.resultMsg);
    }
  });
}
// 获取所有节点信息
function getNodesData(graph) {
  return NodeDataFormate.nodeDataFormate(graph);
}
// 接口调用
async function updateFlowData(graph, type) {
  const databusData = JSON.parse(localStorage.getItem('panelGlobal')) || {};
  const params = {
    jsonData: JSON.stringify(graph),
    databusData: JSON.stringify(databusData[subFlowId.value]),
    stateValue: type,
    nodesData: getNodesData(graph)
  };
  await api
    .updateFlowDataById(params, subFlowId.value)
    .then((res) => {
      if (res.resultCode === '0') {
        proxy.$message.success('流程保存成功！');
      } else {
        proxy.$message.error(res.resultMsg);
      }
    })
    .catch((err) => {
      proxy.$message.error(err);
    });
}
const toolList = ref([
  [
    {
      name: 'tool-undo',
      label: '撤销(meta+shift+z或ctrl+shift+z)'
    },
    {
      name: 'tool-redo',
      label: '重做(meta+z或ctrl+z)'
    }
  ],
  [
    {
      name: 'tool-copy',
      label: '复制(meta+c或ctrl+c)'
    },
    {
      name: 'tool-cut',
      label: '剪切(meta+x或ctrl+X)'
    },
    {
      name: 'tool-paste',
      label: '粘贴(x或ctrl + V)'
    },
    {
      name: 'tool-delete',
      label: '删除(meta+d或ctrl+d)'
    }
  ],
  [
    {
      name: 'tool-save',
      label: '保存'
      // disabeld: true
    },
    {
      name: 'tool-send',
      label: '推送'
      // disabeld: true
    }
  ],
  [
    {
      name: 'tool-var',
      label: '全局变量'
    }
  ]
]);
// toolbar 点击回调事件
function toolHandelClick({ name, graph }) {
  const cells = graph.getSelectedCells();
  console.log(cells);
  switch (name) {
    case 'tool-undo':
      graph.undo();
      break;
    case 'tool-redo':
      graph.redo();
      break;
    case 'tool-copy':
      proxy.$message.success('已复制至剪切板！');
      if (cells.length) {
        graph.copy(cells);
      }
      break;
    case 'tool-cut':
      if (cells.length) {
        proxy.$message.success('已剪切至剪切板！');
        graph.cut(cells);
      }
      break;
    case 'tool-paste':
      if (!graph.isClipboardEmpty()) {
        const cells = graph.paste({ offset: 100 });
        graph.cleanClipboard();
        graph.select(cells);
        proxy.$message.success('已粘贴至画板！');
      }
      break;
    case 'tool-delete':
      if (cells.length) {
        graph.cut(cells);
        graph.cleanClipboard();
      }
      break;
    case 'tool-save':
      updateFlowData(graph, '1');
      break;
    case 'tool-send':
      updateFlowData(graph, '2');
      break;
    case 'tool-var':
      proxy.$eBus.emit('open:right-panel');
      break;
    default:
      break;
  }
}
onMounted(() => {
  getLogicDetailById();
});
</script>
<style scoped lang="scss"></style>

src/views/flow/SystemDetail.vue

@@ -1,12 +1,563 @@
<template>
  <div class="demo">
  <common-panel>
    <!-- 按钮区域 -->
    <div class="system-detail-btns">
      <common-select
        v-model="curVersionId"
        size="small"
        :style="{ width: '260px' }"
        :props-map="{ label: 'version', value: 'id' }"
        :options="versionList"
      ></common-select>
      <div class="btns">
        <template v-for="btn in btns" :key="btn.name">
          <el-button
            size="small"
            class="btn"
            :type="btn.type"
            @click.stop="btn.onClick"
          >
            {{ btn.label }}
          </el-button>
        </template>
      </div>
    </div>
    <!-- 工作区 -->
    <common-panel :layer="'row'">
      <template #left>
        <div class="system-tree">
          <common-tree
            :tree-data="moduleTreeData"
            :actions="actions"
            :attrs="defaultProps"
            :is-icon="true"
            :btn-text="'新增模块'"
            @add-root-level="createModule"
            @node-click="handelNodeClick"
          ></common-tree>
        </div>
      </template>
      <template #right>
        <div class="content">
          <api-detail-page
            v-if="apiDetail"
            :api-detail="apiDetail"
            @edit-logic-api="editLogicApi"
            @init-api-info="initApiInfo"
          ></api-detail-page>
        </div>
      </template>
    </common-panel>
  </common-panel>
  </div>
  <!-- 弹窗信息 -->
  <common-drawer
    v-if="showDrawer"
    :title="moduleTitle"
    @close-dialog="closeDialog"
    @confirm-dialog="confirmDialog"
  >
    <!-- 模型 -->
    <common-form
      v-if="drawerType === 'module'"
      :forms="formConfig.module.forms"
      :form-values="moduleValues"
    ></common-form>
    <!-- 接口 -->
    <common-form
      v-if="drawerType === 'logic'"
      :forms="logicForms"
      :form-values="logicValues"
    ></common-form>
  </common-drawer>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, computed, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { formConfig } from './_config';
import ApiDetailPage from './_components/ApiDetailPage.vue';
import * as api from '../../api/flow';
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const showDrawer = ref(false);
const drawerType = ref('module');
const operateType = ref('create');
const apiDetail = ref(null);
// 编辑版本
function editVersion() {}
// 发布版本
function publishVersion() {}
const btns = ref([
  { label: '编辑', name: 'edit', onClick: editVersion, type: 'primary' },
  { label: '发布', name: 'publish', onClick: publishVersion, type: 'primary' }
]);
// 获取系统详情
const systemId = computed(() => route.query.id);
const curVersionId = ref('');
const systemInfo = ref(null);
async function getSystemDetail() {
  await api.getSystemDetailById(systemId.value).then((res) => {
    if (res.resultCode === '0') {
      systemInfo.value = res.result;
      curVersionId.value = systemInfo.value.version.id;
    } else {
      systemInfo.value = null;
    }
  });
}
const logicForms = ref([...formConfig.value.logic.forms]);
/**
 * 版本 start
 */
// 获取版本列表
const versionList = ref([]);
function getVersionList() {
  api
    .getVersionList(systemId.value)
    .then((res) => {
      if (res.resultCode === '0') {
        versionList.value = res.result;
      } else {
        versionList.value = [];
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
/**
 * 版本 end
 */
/**
 * 模块相关 start
 */
const moduleTitle = ref('新增模块');
const moduleTreeData = ref([]);
// 模块表单
const curModule = ref('');
const curLogic = ref('');
const moduleValues = ref({
  name: '',
  code: '',
  desc: ''
});
// 接口表单
const logicValues = ref({
  name: '',
  requestUrl: '',
  requestType: '',
  desc: ''
});
const actions = ref([
  {
    label: '新增逻辑',
    name: 'common-yuanxingxinzeng',
    iconType: '',
    type: 'primary',
    size: 14,
    // eslint-disable-next-line no-use-before-define
    onClick: create
  },
  {
    label: '编辑',
    name: 'common-bianji',
    iconType: '',
    type: 'primary',
    size: 14,
    // eslint-disable-next-line no-use-before-define
    onClick: update
  },
  {
    label: '复制',
    name: 'common-fuzhi',
    iconType: '',
    type: 'primary',
    size: 14,
    // eslint-disable-next-line no-use-before-define
    onClick: clone
  },
  {
    label: '删除',
    name: 'common-shanchu',
    iconType: '',
    type: 'danger',
    size: 14,
    // eslint-disable-next-line no-use-before-define
    onClick: deletItem
  }
]);
// 树结构映射
const defaultProps = ref({
  props: {
    children: 'logicServices',
    label: 'name',
    id: 'id',
    'default-expand-all': true
  }
});
// 获取模型树列表
function getModuleData() {
  const params = {
    pageSize: 1000,
    pageNumber: 1,
    versionId: curVersionId.value
  };
  api.getModuleList(params).then((res) => {
    if (res.resultCode === '0') {
      moduleTreeData.value = res.result;
    } else {
      proxy.$message.error('');
    }
  });
}
// 删除模块
function deleteModuleById(data) {
  api.deleteModuleById(data.id).then((res) => {
    if (res.resultCode === '0') {
      proxy.$message.success('删除模块成功！');
      getModuleData();
    } else {
      proxy.$message.error(res.resultMsg);
    }
  });
}
// 删除接口
function deleteLogic(data) {
  api.deleteLogicById(data.id).then((res) => {
    if (res.resultCode === '0') {
      getModuleData();
      proxy.$message.success('删除API成功！');
      // eslint-disable-next-line no-use-before-define
      closeDialog();
    } else {
      proxy.$message.error(res.resultMsg);
    }
  });
}
// 新增模块
function createModuleApi(data) {
  api.createModule(data).then((res) => {
    if (res.resultCode === '0') {
      proxy.$message.success('新增模块成功！');
      getModuleData();
      // eslint-disable-next-line no-use-before-define
      closeDialog();
    } else {
      proxy.$message.error(res.resultMsg);
    }
  });
}
// 新增逻辑
function createLogic(data) {
  api.createLogic(data).then((res) => {
    if (res.resultCode === '0') {
      proxy.$message.success('新增API成功！');
      getModuleData();
      // eslint-disable-next-line no-use-before-define
      closeDialog();
    } else {
      proxy.$message.error(res.resultMsg);
    }
  });
}
// 克隆模块
function cloneModuleById(data) {
  api.cloneModuleById(data, curModule.value).then((res) => {
    if (res.resultCode === '0') {
      proxy.$message.success('克隆模块成功！');
      getModuleData();
      // eslint-disable-next-line no-use-before-define
      closeDialog();
    } else {
      proxy.$message.error(res.resultMsg);
    }
  });
}
// 克隆API
function cloneLogicById(data) {
  api.cloneLogicById(data, curLogic.value).then((res) => {
    if (res.resultCode === '0') {
      proxy.$message.success('克隆API成功！');
      getModuleData();
      // eslint-disable-next-line no-use-before-define
      closeDialog();
    } else {
      proxy.$message.error(res.resultMsg);
    }
  });
}
// 编辑模块
function updateModule(data) {
  api.updateModuleById(data, curModule.value).then((res) => {
    if (res.resultCode === '0') {
      proxy.$message.success('修改模块成功！');
      getModuleData();
      // eslint-disable-next-line no-use-before-define
      closeDialog();
    } else {
      proxy.$message.error(res.resultMsg);
    }
  });
}
// 编辑逻辑
function updateLogic(data) {
  api.updateFlowDataById(data, curLogic.value).then((res) => {
    if (res.resultCode === '0') {
      proxy.$message.success('修改API成功！');
      getModuleData();
      // eslint-disable-next-line no-use-before-define
      closeDialog();
    } else {
      proxy.$message.error(res.resultMsg);
    }
  });
}
// 删除模块/API
function deletItem(node, data) {
  let text = '';
  if (node.level === 1) {
    text = '确定删除该服务分类吗？';
  } else if (node.level === 2) {
    text = '确定删除该API吗？';
  }
  proxy
    .$confirm(text, '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      if (node.level === 1) {
        deleteModuleById(data);
      } else if (node.level === 2) {
        deleteLogic(data);
      }
    });
}
// 新增模块
function createModule() {
  drawerType.value = 'module';
  operateType.value = 'create';
  moduleTitle.value = '新增模块';
  showDrawer.value = true;
}
// 修改模块/API
function update(node, data) {
  console.log(node);
  showDrawer.value = true;
  operateType.value = 'edit';
  if (node.level === 1) {
    drawerType.value = 'module';
    moduleTitle.value = '编辑模块';
    curModule.value = data.id;
    moduleValues.value = {
      name: data.name,
      code: data.code,
      desc: data.desc
    };
  } else if (node.level === 2) {
    drawerType.value = 'logic';
    moduleTitle.value = '编辑API';
    logicForms.value = [...formConfig.value.logic.forms];
    curLogic.value = data.id;
    logicValues.value = {
      name: data.name,
      requestUrl: data.requestUrl,
      requestType: data.requestType,
      desc: data.desc
    };
  }
}
// 复制模块/API
function clone(node, data) {
  showDrawer.value = true;
  operateType.value = 'clone';
  if (node.level === 1) {
    drawerType.value = 'module';
    moduleTitle.value = '克隆模块';
    curModule.value = data.id;
    moduleValues.value = {
      name: data.name,
      code: data.code,
      desc: data.desc
    };
  } else if (node.level === 2) {
    drawerType.value = 'logic';
    moduleTitle.value = '克隆API';
    curLogic.value = data.id;
    logicForms.value = [
      {
        name: 'moduleId',
        type: 'select',
        label: '选择模块',
        attrs: {
          col: 1,
          style: {
            width: '276px'
          },
          propsMap: {
            label: 'name',
            value: 'id'
          },
          options: moduleTreeData.value,
          clearable: false
        }
      },
      ...logicForms.value
    ];
    logicValues.value = {
      name: data.name,
      requestUrl: data.requestUrl,
      requestType: data.requestType,
      desc: data.desc
    };
  }
}
// 获取接口详情
async function getApiDetail() {
  await api.getLogicDetailById(curLogic.value).then((res) => {
    if (res.resultCode === '0') {
      apiDetail.value = res.result;
    } else {
      proxy.$message.error(res.resultMsg);
    }
  });
}
// 节点点击
function handelNodeClick(data) {
  const isLeaf = 'totalPath' in data;
  if (isLeaf) {
    curLogic.value = data.id;
    getApiDetail();
  }
}
/**
 * 模块相关 end
 */
/**
 * logic start
 */
function create(node, data) {
  operateType.value = 'create';
  if (node.level === 1) {
    drawerType.value = 'logic';
    logicForms.value = [...formConfig.value.logic.forms];
    moduleTitle.value = '新增API';
    showDrawer.value = true;
    curModule.value = data.id;
  }
}
/**
 * logic end
 */
// 弹窗
function closeDialog() {
  showDrawer.value = false;
  drawerType.value = '';
  operateType.value = '';
}
// 确认
function confirmDialog() {
  if (drawerType.value === 'module') {
    const params = { ...moduleValues.value };
    switch (operateType.value) {
      case 'create':
        params.versionId = curVersionId.value;
        createModuleApi(params);
        break;
      case 'clone':
        params.versionId = curVersionId.value;
        cloneModuleById(params);
        break;
      case 'edit':
        updateModule(params);
        break;
      default:
        break;
    }
  } else if (drawerType.value === 'logic') {
    const params = {
      ...logicValues.value
    };
    switch (operateType.value) {
      case 'create':
        params.moduleId = curModule.value;
        createLogic(params);
        break;
      case 'clone':
        cloneLogicById(params);
        break;
      case 'edit':
        params.moduleId = curModule.value;
        updateLogic(params);
        break;
      default:
        break;
    }
  }
}
// 编辑api
function editLogicApi() {
  router.push({
    name: 'Flow',
    query: {
      id: curLogic.value,
      sysId: systemId.value
    }
  });
}
// 测试
function initApiInfo() {}
watch(curLogic.value, () => {
  getApiDetail();
});
// watch 监听
onMounted(async () => {
  await getSystemDetail();
  await getVersionList();
  await getModuleData();
});
</script>
<style scoped lang="scss">
.system-tree {
  height: 100%;
  background: #fff;
}
.system-detail-btns {
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
  background: #fff;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
  height: 50px;
  align-items: center;
  width: calc(100% - 48px);
  margin-left: 24px;
}
</style>

src/views/flow/SystemList.vue

@@ -24,9 +24,11 @@
<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import * as api from '../../api/flow';
import { formConfig } from './_config';
const router = useRouter();
const { proxy } = getCurrentInstance();
const dialogTitle = ref('新增系统');
const showDialog = ref(false);
@@ -39,17 +41,6 @@ const cardNumbers = ref([
]);
const cardInfos = ref([]);
// 新增系统
// function createSystem() {}
// 编辑系统
// function updateSystemById() {}
// 删除系统
// function deleteSystemById() {
//   proxy.$confirm('1231');
// }
// 复制系统
// function copySystemById() {}
// 编辑
@@ -74,9 +65,20 @@ function deleteSystem() {
}
// 版本切换
function changeVersion() {}
// 查看详情
function viewDetail(item) {
  router.push({
    name: 'SystemDetail',
    query: {
      id: item.id
    }
  });
}
// 复制
function copySystem() {}
const btns = ref([
  { label: '查看', name: 'view', onClick: viewDetail, icon: 'common-chakan' },
  { label: '编辑', name: 'edit', onClick: updateSystem, icon: 'common-bianji' },
  {
    label: '删除',

src/views/flow/_components/ApiDetailPage.vue

@@ -0,0 +1,417 @@
<template>
  <div class="api-detail">
    <h4 class="title">接口使用示例</h4>
    <div class="card info">
      <!-- card-hedaer -->
      <div class="card-header">
        <h4 class="sub-title">基本信息</h4>
        <div v-if="props.type !== '0'">
          <!--
            UNTESTED("1", "待测试"),
            TESTED("2", "已测试"),
            STARTED("3", "启用"),
            STOPPED("4", "停用"),
            DELETED("5", "废弃");
          -->
          <el-button
            :disabled="props.versionState === '0'"
            @click.stop="stopTest"
          >
            测试
          </el-button>
          <el-button
            :disabled="
              apiDetail?.state !== 'STARTED' || props.versionState === '0'
            "
            @click.stop="stopLogic"
          >
            停用
          </el-button>
          <el-button type="success" @click.stop="editLogicApi">
            编辑逻辑流
          </el-button>
        </div>
      </div>
      <!-- card-info -->
      <el-row :gutter="18">
        <el-col :span="5">
          <div class="row">
            <span class="row-title">接口名称</span>
            <p class="row-content">{{ apiDetail?.name }}</p>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="row">
            <span class="row-title">所属模块</span>
            <p class="row-content">{{ apiDetail?.name }}</p>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="row">
            <span class="row-title">接口状态</span>
            <p class="row-content">{{ apiDetail?.stateDesc }}</p>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="row">
            <span class="row-title">请求url</span>
            <p class="row-content">
              {{ apiDetail?.totalPath }}
            </p>
          </div>
        </el-col>
      </el-row>
      <div class="row">
        <span class="row-title">接口描述</span>
        <p class="row-content desc">
          {{ apiDetail?.desc }}
        </p>
      </div>
    </div>
    <div class="tabs">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="接口信息" name="info"></el-tab-pane>
        <el-tab-pane label="接口测试" name="test"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 接口信息 -->
    <div v-show="activeName === 'info'" class="api-info">
      <div class="card">
        <h4 class="sub-title">请求参数</h4>
        <common-table
          :table-header="request.header"
          :table-data="request?.data"
        ></common-table>
      </div>
      <div class="card">
        <h4 class="sub-title">响应参数</h4>
        <common-table
          :table-header="request.header"
          :table-data="response?.data"
        ></common-table>
      </div>
    </div>
    <!-- 接口测试 -->
    <div v-show="activeName === 'test'" class="api-text">
      <div class="card">
        <h4 class="sub-title">请求URL</h4>
        <el-input
          v-model="testRequest.url"
          placeholder="请输入请求URL"
          class="input-with-select"
        >
          <template #prepend>
            <common-select
              v-model="testRequest.method"
              disabled
              class="select"
              :options="methodOptions"
            ></common-select>
          </template>
          <template #append>
            <el-button @click.stop="test">提交</el-button>
          </template>
        </el-input>
      </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"
            class="editor"
            @blur="validate"
          ></JsonEditorVue>
        </div>
      </div>
      <div class="card">
        <h4 class="sub-title">响应参数</h4>
        <!-- <ipu-input
          v-model="testResponse"
          class="result"
          v-bind="attributes"
          disabled
        ></ipu-input> -->
        <div>
          <!-- <JsonEditorVue
            v-model="testResponse"
            class="editor"
            @blur="validate"
          ></JsonEditorVue> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
// import JsonEditorVue from 'json-editor-vue3';
import { getCurrentInstance, onMounted, ref, watch } from 'vue';
const { proxy } = getCurrentInstance();
const emits = defineEmits(['editLogicApi', 'initApiInfo']);
const activeName = ref('info');
const props = defineProps({
  apiDetail: {
    type: Object,
    default: () => {}
  },
  versionState: {
    type: String,
    default: '0'
  },
  type: {
    type: String,
    default: '1'
  }
});
function editLogicApi() {
  emits('editLogicApi');
}
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 apiDetailHooks() {
  const request = ref({
    header: [
      { label: '参数', name: 'code', 'min-width': '150' },
      { label: '名称', name: 'name', 'min-width': '150' },
      { label: '类型', name: 'type', 'min-width': '150' },
      { label: '是否必传', name: 'required', 'min-width': '150' },
      { label: '描述', name: 'desc', 'min-width': '150' }
    ],
    data: props.apiDetail?.request
  });
  const response = ref({
    data: props.apiDetail?.response
  });
  // 数据初始化
  function initDetailData() {
    response.value = {
      data: props.apiDetail?.response
    };
    request.value.data = props.apiDetail?.request;
  }
  return {
    request,
    response,
    initDetailData
  };
}
const { request, response, initDetailData } = apiDetailHooks();
const dataTypeMap = {
  int: 1,
  string: '',
  array: [],
  object: {},
  decimal: 0.1,
  date: '2022-10-10',
  datetime: '2022-10-10 12:10:10',
  boolean: true,
  long: 0
};
// 接口测试
function testHooks() {
  const testRequest = ref({});
  const testResponse = ref({});
  // 数据初始化
  function updateTestData() {
    // if (!request.value.data) {
    //   return
    // }
    const params = {};
    (request.value?.data || [])?.forEach((item) => {
      params[item.code] = dataTypeMap[item.type];
    });
    testRequest.value = {
      url: props.apiDetail?.totalPath,
      method: props.apiDetail?.requestType,
      params,
      headers: {}
    };
    testResponse.value = {};
  }
  updateTestData();
  function test() {
    const { testLogic } = proxy.$api;
    const { params } = testRequest.value;
    proxy
      .$reqPost(`${testLogic}/${props.apiDetail.id}`, params)
      .then((res) => {
        if (res.data.resultCode === '0') {
          proxy.$utils.ipuMessage('请求成功！');
          testResponse.value = res.data.result;
        } else {
          proxy.$utils.ipuMessage(res.data.resultMsg, 'error');
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
  return {
    testRequest,
    test,
    testResponse,
    updateTestData
  };
}
const { testRequest, test, updateTestData } = testHooks();
function validate() {}
watch(
  props,
  () => {
    initDetailData();
    updateTestData();
  },
  { deep: true }
);
onMounted(() => {});
</script>
<style scoped lang="scss">
.api-detail {
  padding: 24px;
  width: auto;
  height: calc(100vh - 250px);
  overflow: auto;
  .card {
    width: 100%;
    background: #fff;
    padding: 24px;
    border-radius: 3px;
    box-sizing: border-box;
    .card-header {
      display: flex;
      justify-content: space-between;
    }
    .row {
      margin-top: 15px;
      .row-title {
        color: #909399;
        font-size: 14px;
        line-height: 28px;
      }
      .row-content {
        background: #f5f7fa;
        border-radius: 3px;
        height: 32px;
        padding: 5px 10px;
        box-sizing: border-box;
        border-radius: 3px;
      }
      .desc {
        height: 70px;
      }
    }
    .result {
      :deep(.el-textarea__inner) {
        padding: 20px;
      }
    }
    .select {
      width: 90px;
    }
  }
  .tabs {
    width: 100%;
    background: #fff;
    // padding: 24px;
    padding: 0 24px;
    border-radius: 3px;
    box-sizing: border-box;
    margin-top: 15px;
  }
}
.title {
  font-size: 18px;
  color: #303133;
  font-weight: 500;
  margin-bottom: 10px;
}
.sub-title {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
  margin-bottom: 10px;
}
.editor {
  height: 300px;
}
</style>
<style lang="scss">
.jsoneditor {
  border: 1px solid rgba(0, 0, 0, 0.4);
}
.jsoneditor-menu {
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
</style>

src/views/flow/_config.js

@@ -41,5 +41,122 @@ export const formConfig = ref({
      desc: '',
      code: ''
    }
  },
  module: {
    forms: [
      {
        name: 'name',
        type: 'input',
        label: '名称',
        span: 24,
        attrs: {
          style: {
            width: '276px'
          },
          clearable: true,
          placeholder: '请输入名称'
        }
      },
      {
        name: 'code',
        type: 'input',
        label: '编码',
        span: 24,
        attrs: {
          style: {
            width: '276px'
          },
          clearable: true,
          placeholder: '请输入编码'
        }
      },
      {
        name: 'desc',
        type: 'input',
        label: '描述',
        span: 24,
        attrs: {
          type: 'textarea',
          maxlength: 300,
          clearable: true,
          placeholder: '请输入描述信息，最多可输入300字',
          minRows: 5,
          maxRows: 8,
          rows: 6,
          style: {
            width: '100%'
          }
        }
      }
    ]
  },
  logic: {
    forms: [
      {
        name: 'name',
        type: 'input',
        label: '名称',
        span: 24,
        attrs: {
          style: {
            width: '276px'
          },
          clearable: true,
          placeholder: '请输入名称'
        }
      },
      {
        name: 'requestUrl',
        type: 'input',
        label: 'URL',
        span: 24,
        attrs: {
          style: {
            width: '276px'
          },
          clearable: true,
          placeholder: '请输入URL'
        }
      },
      {
        name: 'requestType',
        type: 'select',
        label: '请求方法',
        span: 24,
        attrs: {
          style: {
            width: '276px'
          },
          options: [
            { label: 'GET', value: 'GET' },
            { label: 'POST', value: 'POST' },
            { label: 'PUT', value: 'PUT' },
            { label: 'DELETE', value: 'DELETE' },
            { label: 'PATCH', value: 'PATCH' },
            { label: 'WS', value: 'WS' }
          ],
          clearable: true,
          placeholder: '请输入URL'
        }
      },
      {
        name: 'desc',
        type: 'input',
        label: '描述',
        span: 24,
        attrs: {
          type: 'textarea',
          maxlength: 300,
          clearable: true,
          placeholder: '请输入描述信息，最多可输入300字',
          minRows: 5,
          maxRows: 8,
          rows: 6,
          style: {
            width: '100%'
          }
        }
      }
    ]
  }
});

src/views/sub-flow/SubFlow.vue

@@ -1,7 +1,7 @@
<template>
  <div class="subflow-logic">
    <sub-flow
      :nodes="nodes.nodes"
      :nodes="nodeList"
      :tool-list="toolList"
      :flow-data="subFlowDetail"
      @tool-handel-click="toolHandelClick"
@@ -23,6 +23,14 @@ import nodes from '../_components/_flow/nodes.js';
import * as api from '../../api/subflow';
import NodeDataFormate from '../_components/_flow/nodeDataFormate.js';
const nodeList = ref(nodes.nodes);
nodeList.value.map((item) => {
  if (item.nodes?.length) {
    item.nodes = item.nodes.filter((el) => el.name !== 'subprocess');
  }
  return item;
});
const { proxy } = getCurrentInstance();
const route = useRoute();
const subFlowDetail = ref(null);