实现流程复制功能（结构和内容都复制）

hookehuyr
Commit 3e3175608981dbb046f7d7bc7ef808f7d0e6cbdf 3e317560 1 parent d6cad10f
Showing 5 changed files with 41 additions and 63 deletions
doc/App.vue
doc/api/index.js
doc/main.ts
package.json
yarn.lock
--- a/doc/App.vue
View file @3e31756
+++ b/doc/App.vue
View file @3e31756
@@ -385,7 +385,6 @@
                   </template>
                 </el-popconfirm>
                 <el-popconfirm
-                   v-if="state.current_enable_version !== state.versionForm.code"
                   title="是否确认复制该版本流程？"
                   width="220px"
                   confirm-button-text="确认"
@@ -558,7 +557,7 @@ import type { FormInstance, FormRules } from 'element-plus'
 import qs from 'qs'
 import { after } from 'lodash-es';
 // import { VueSpinner } from 'vue3-spinners';
- import { flowVersionAPI, saveFlowAPI, flowNodesAPI, enableFlowVersionAPI, flowNodePropertyAPI, checkAllFlowNodePropertyAPI, saveAllFlowNodePropertyAPI, saveNodeSortAPI } from "./api";
+ import { flowVersionAPI, saveFlowAPI, flowNodesAPI, enableFlowVersionAPI, flowNodePropertyAPI, checkAllFlowNodePropertyAPI, saveAllFlowNodePropertyAPI, saveNodeSortAPI, duplicateFlowAPI } from "./api";
 import draggable from 'vuedraggable';
 
 const G6 = (window as any).G6.default as any
@@ -1138,69 +1137,34 @@ export default {
     }
 
     const copyFLowVersion = async () => { // 复制版本流程
-       // TODO： 复制时后台数据也需要把单个节点的信息复制过去，前端只是复制了一个结构
-       let { nodes, edges } = editor.editorState.graph.save();
+       state.dialogVersionFormVisible = false; // 关闭弹框
 
-       // 使用时需要把自定义节点的类型带过去 activity/control
-       nodes.forEach((node: { [x: string]: string; shape: string }) => {
-         if (node.shape === 'control') {
-           node['control'] = node['control']
-         }
-       });
+       state.reloadLoading = true; // 打开 loading
 
-       nodes = nodes.map(
-         ({ data, id, label, shape, x, y, text, desc, img, control }) => ({
-           data,
-           id,
-           label,
-           shape,
-           x,
-           y,
-           text,
-           desc,
-           img,
-           control,
-         }),
-       );
-       edges = edges.map(({ shape, source, sourceAnchor, target, targetAnchor }) => ({
-         shape,
-         source,
-         sourceAnchor,
-         target,
-         targetAnchor,
-       }));
-       // 检查路径有效性
-       const paths = [];
-       findPathsToEndNode(edges, 'start-node', [], paths);
- 
-       state.dialogVersionFormVisible = false; // 关闭弹框
+       let flow_id = getFlowId(); // 获取当前的flow_id
+       const { code, new_flow_id } = await duplicateFlowAPI({ flow_id });
+       if (code) {
+         state.reloadLoading = false;
 
-       if (paths.length) {
-         const { code, data } = await saveFlowAPI({ form_id: +form_id, flow_id: '', data: JSON.stringify({ nodes, edges }) });
-         if (code) {
-           state.reloadLoading = true; // 打开 loading
-           ElMessage({
-             type: 'success',
-             message: '复制成功',
-           });
+         ElMessage({
+           type: 'success',
+           message: '复制成功',
+         });
 
-           updateFlowId(data); // 更新缓存 flow_id
-           getFlowData(data); // 更新流程图数据
+         updateFlowId(new_flow_id); // 更新缓存 flow_id
+         getFlowData(new_flow_id); // 更新流程图数据
 
-           const flow_version = await flowVersionAPI({ form_id });
-           if (flow_version.code) {
-             state.version_list = flow_version.data; // 更新版本列表
-             state.version_list.forEach((ele) => {
-               if (ele.id === +data) {
-                 state.select_flow_version = ele.code; // 选中新增的版本
-               }
-             });
-           }
-         } else {
-           state.reloadLoading = false;
+         const flow_version = await flowVersionAPI({ form_id });
+         if (flow_version.code) {
+           state.version_list = flow_version.data; // 更新版本列表
+           state.version_list.forEach((ele) => {
+             if (ele.id === +new_flow_id) {
+               state.select_flow_version = ele.code; // 选中新增的版本
+             }
+           });
         }
       } else {
-         ElNotification.error('缺少一条从开始节点到结束节点的完整流程！');
+         state.reloadLoading = false;
       }
     }
 
@@ -2373,9 +2337,8 @@ export default {
      * @param {Event} e - The event object representing the click event.
      */
     const onClickNodePreview = async (e: myEvent) => {
-       // TODO: 有一个预览状态可以看到节点相应的表单内容
+       // TAG: 有一个预览状态可以看到节点相应的表单内容
       const model = G6.Util.clone(e.item.get('model')); // 节点的基本属性
-       console.log("🚀 ~ file: App.vue:2338 ~ onClickNodePreview ~ model.id:", model.id);
       model.style = model.style || {}
       model.labelCfg = model.labelCfg || { style: {} }
       model.data = model.data ? model.data : {};
@@ -2385,7 +2348,6 @@ export default {
         state.preview_form_url = null;
       } else {
         let flow_id = getFlowId();
-         // TODO: 等待正式参数
         let _path = urlQuery._path? urlQuery._path : '';
         state.preview_form_url = `/admin/?a=flow&t=view&p=${_path}&_flow=${flow_id}&_flow_node=${model.id}`;
       }
--- a/doc/api/index.js
View file @3e31756
+++ b/doc/api/index.js
View file @3e31756
 /*
  * @Date: 2023-11-30 10:34:01
  * @LastEditors: hookehuyr hookehuyr@gmail.com
-  * @LastEditTime: 2023-12-14 15:43:53
+  * @LastEditTime: 2024-02-29 15:01:23
  * @FilePath: /vue-flow-editor/doc/api/index.js
  * @Description: 文件描述
  */
@@ -17,6 +17,7 @@ const Api = {
   SAVE_ALL_FLOW_NODE_PROPERTY: '/admin/?a=save_all_node_property',
   CHECK_ALL_FLOW_NODE_PROPERTY: '/admin/?a=check_all_node_property',
   SAVE_NODE_SORT: '/admin/?a=save_node_sort',
+   DUPLICATE_FLOW: '/admin/?a=duplicate_flow',
 }
 
 /**
@@ -89,3 +90,10 @@ export const checkAllFlowNodePropertyAPI = (params) => fn(fetch.get(Api.CHECK_AL
  * @returns
  */
 export const saveNodeSortAPI = (params) => fn(fetch.stringifyPost(Api.SAVE_NODE_SORT, params));
+ 
+ /**
+  * @description: 复制流程
+  * @param {*} flow_id 流程 ID
+  * @returns
+  */
+ export const duplicateFlowAPI = (params) => fn(fetch.stringifyPost(Api.DUPLICATE_FLOW, params));
--- a/doc/main.ts
View file @3e31756
+++ b/doc/main.ts
View file @3e31756
 /*
  * @Date: 2021-08-18 12:47:05
  * @LastEditors: hookehuyr hookehuyr@gmail.com
-  * @LastEditTime: 2023-10-30 14:36:13
+  * @LastEditTime: 2024-02-29 14:30:47
  * @FilePath: /vue-flow-editor/doc/main.ts
  * @Description: 文件描述
  */
@@ -14,6 +14,8 @@ import element from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
+ import 'default-passive-events'
+ 
 const app = createApp(App);
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
--- a/package.json
View file @3e31756
+++ b/package.json
View file @3e31756
@@ -30,6 +30,7 @@
     "@element-plus/icons-vue": "^2.1.0",
     "@vue/composition-api": "^1.7.2",
     "axios": "^1.6.0",
+     "default-passive-events": "^2.0.0",
     "echarts": "^5.1.2",
     "element-plus": "^2.5.6",
     "jquery": "^3.7.1",
--- a/yarn.lock
View file @3e31756
+++ b/yarn.lock
View file @3e31756
@@ -3543,6 +3543,11 @@ default-gateway@^5.0.5:
   dependencies:
     execa "^3.3.0"
 
+ default-passive-events@^2.0.0:
+   version "2.0.0"
+   resolved "https://mirrors.cloud.tencent.com/npm/default-passive-events/-/default-passive-events-2.0.0.tgz#79b1aa67becbaab38b718469b5480fef92eda649"
+   integrity sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ==
+ 
 defaults@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npm.taobao.org/defaults/download/defaults-1.0.3.tgz"