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

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： 复制时后台数据也需要把单个节点的信息复制过去，前端只是复制了一个结构
+      state.dialogVersionFormVisible = false; // 关闭弹框
-      let { nodes, edges } = editor.editorState.graph.save();
-      // 使用时需要把自定义节点的类型带过去 activity/control
+      state.reloadLoading = true; // 打开 loading
-      nodes.forEach((node: { [x: string]: string; shape: string }) => {
-        if (node.shape === 'control') {
-          node['control'] = node['control']
-        }
-      });
-      nodes = nodes.map(
+      let flow_id = getFlowId(); // 获取当前的flow_id
-        ({ data, id, label, shape, x, y, text, desc, img, control }) => ({
+      const { code, new_flow_id } = await duplicateFlowAPI({ flow_id });
-          data,
+      if (code) {
-          id,
+        state.reloadLoading = false;
-          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; // 关闭弹框
-      if (paths.length) {
+        ElMessage({
-        const { code, data } = await saveFlowAPI({ form_id: +form_id, flow_id: '', data: JSON.stringify({ nodes, edges }) });
+          type: 'success',
-        if (code) {
+          message: '复制成功',
-          state.reloadLoading = true; // 打开 loading
+        });
-          ElMessage({
-            type: 'success',
-            message: '复制成功',
-          });
-          updateFlowId(data); // 更新缓存 flow_id
+        updateFlowId(new_flow_id); // 更新缓存 flow_id
-          getFlowData(data); // 更新流程图数据
+        getFlowData(new_flow_id); // 更新流程图数据
-          const flow_version = await flowVersionAPI({ form_id });
+        const flow_version = await flowVersionAPI({ form_id });
-          if (flow_version.code) {
+        if (flow_version.code) {
-            state.version_list = flow_version.data; // 更新版本列表
+          state.version_list = flow_version.data; // 更新版本列表
-            state.version_list.forEach((ele) => {
+          state.version_list.forEach((ele) => {
-              if (ele.id === +data) {
+            if (ele.id === +new_flow_id) {
-                state.select_flow_version = ele.code; // 选中新增的版本
+              state.select_flow_version = ele.code; // 选中新增的版本
-              }
+            }
-            });
+          });
-          }
-        } else {
-          state.reloadLoading = false;
         }
       } 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"