新增临时缓存功能

hookehuyr
Commit fc4e797f684b416a136de50a1db56fac9ce477aa fc4e797f 1 parent dbd6717a
Showing 1 changed file with 114 additions and 29 deletions
doc/App.vue
--- a/doc/App.vue
View file @fc4e797
+++ b/doc/App.vue
View file @fc4e797
@@ -18,6 +18,7 @@
       @click-canvas="onClickCanvas"
       @dragend-node="onDragEndNode"
       @click-node="onClickNode"
+      @click-node-mousedown="onClickNodeMousedown"
       @click-edge="onClickEdge"
       @dblclick-node="onDblClickNode"
       @dblclick-edge="onDblClickEdge"
@@ -591,8 +592,13 @@ export default {
       },
       showConfirmation: true,
       node_attr: {},
+      node_tree: {},
     });
+    const setNodeTree = (id: string, data: object) => {
+      state.node_tree[id] = data;
+    }
+
     /**
      * 获取url参数
      * @param url
@@ -724,6 +730,42 @@ export default {
       // });
     });
+    /************* 监听表单数据变化 **************/
+    watch(
+      () => state.node_name,
+      (newValue, oldValue) => {
+        if (newValue !== oldValue) {
+          if (state.node_tree[state.detailModel?.id]) {
+            state.node_tree[state.detailModel.id].name = newValue;
+          }
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      () => state.userTags,
+      (newValue, oldValue) => {
+        if (newValue !== oldValue) {
+          if (state.node_tree[state.detailModel?.id]) {
+            state.node_tree[state.detailModel.id].user = newValue;
+          }
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      () => state.more_attr,
+      (newValue, oldValue) => {
+        if (newValue !== oldValue) {
+          if (state.node_tree[state.detailModel?.id]) {
+            state.node_tree[state.detailModel.id].property = newValue;
+          }
+        }
+      },
+      { immediate: true }
+    );
+    /***************** END ******************/
+
     const showHelp = () => {
       state.dialogHelpVisible = true;
     }
@@ -972,12 +1014,19 @@ export default {
      * @param index
      */
     const onAuthVisibleChange = (val: any, index: number) => {
+      state.field_auths[index].visible.checked = val.visible.checked; // 修改实际树变化
       // 可见不选中时，可编辑也取消选中
       if (!val.visible.checked) {
-        val.editable.checked = false
+        val.editable.checked = false;
+        state.field_auths[index].editable.checked = false; // 修改实际树变化
       }
       checkAuthAll('visible');
       checkAuthAll('editable');
+
+      // 修改缓存树的字段权限
+      if (state.node_tree[state.detailModel?.id]) {
+        state.node_tree[state.detailModel.id].field = _.cloneDeep(state.field_auths);
+      }
     }
     /**
@@ -986,12 +1035,20 @@ export default {
      * @param index
      */
     const onAuthEditableChange = (val: any, index: number) => {
+      state.field_auths[index].editable.checked = val.editable.checked; // 修改实际树变化
       // 可编辑选中时，勾选可见
       if (val.editable.checked) {
-        val.visible.checked = true
+        val.visible.checked = true;
+        state.field_auths[index].visible.checked = true; // 修改实际树变化
       }
+
       checkAuthAll('editable');
-      checkAuthAll('visible')
+      checkAuthAll('visible');
+
+      // 修改缓存树的字段权限
+      if (state.node_tree[state.detailModel?.id]) {
+        state.node_tree[state.detailModel.id].field = _.cloneDeep(state.field_auths);
+      }
     }
     /**
@@ -1127,7 +1184,8 @@ export default {
       //   editor.openModel()
       // }
     }
-
+    const onClickNodeMousedown = (e) => {
+    }
     /**
      * 单击节点回调
      * @param {Event} e - The event object representing the click event.
@@ -1165,17 +1223,54 @@ export default {
         state.statusLoading = true;
-        // 获取节点属性
-        const { code, data } = await flowNodePropertyAPI({ node_code: model.id, flow_id });
-        if (code) {
-          state.statusLoading = false;
-
         flowData.value.nodes.forEach((ele: any, idx: number) => {
           if (ele.id === model.id) {
             state.node_idx = idx; // 详情里显示节点索引
           }
         });
+        // 开始节点不显示审批意见
+        if (model_id ==='start-node') {
+          state.more_attr = state.more_attr.filter((ele: any) => {
+            return ele.label !== '审批意见'
+          });
+        }
+        // 抄送节点不显示
+        if (state.detailModel.control === 'cc') {
+          state.more_attr = [];
+        }
+
+        // 打开属性表单
+        state.attr_radio = '基础属性'; // 还原tab默认值
+
+        // 如果是缓存过的节点，则直接显示
+        if (state.node_tree[state.detailModel.id]) {
+          state.statusLoading = false;
+          state.node_name = state.node_tree[state.detailModel.id].name;
+          state.userTags = state.node_tree[state.detailModel.id].user;
+          state.dialogUserTags = state.node_tree[state.detailModel.id].user;
+          state.field_auths = state.node_tree[state.detailModel.id].field;
+          state.more_attr = state.node_tree[state.detailModel.id].property;
+
+          // 初始化表单数据比较结构
+          state.field_extend.forEach(ele => {
+            state.field_auths.forEach(auth => {
+              if (ele.field_id === auth.field_id) {
+                ele.field_extend.visibled = auth.visible.checked;
+                ele.field_extend.editabled = auth.editable.checked;
+                ele.field_extend.readonly = auth.editable.disabled;
+              }
+            })
+          });
+          editor.openModel();
+          return;
+        }
+
+
+        // 获取节点属性
+        const { code, data } = await flowNodePropertyAPI({ node_code: model.id, flow_id });
+        if (code) {
+          state.statusLoading = false;
           state.node_name = data.name ? data.name : model.text; // 节点名称
           state.userTags = data.user; // 节点负责人
           state.dialogUserTags = state.userTags; // 同步给弹框数据
@@ -1218,20 +1313,6 @@ export default {
             })
           });
-          // 开始节点不显示审批意见
-          if (model_id ==='start-node') {
-            state.more_attr = state.more_attr.filter((ele: any) => {
-              return ele.label !== '审批意见'
-            });
-          }
-          // 抄送节点不显示
-          if (state.detailModel.control === 'cc') {
-            state.more_attr = [];
-          }
-
-          // 打开属性表单
-          state.attr_radio = '基础属性'; // 还原tab默认值
-
           editor.openModel();
           // 储存原始节点属性
@@ -1242,6 +1323,9 @@ export default {
             property: _.cloneDeep(state.more_attr)
           }
+          // 临时保存树信息
+          setNodeTree(model.id, { name: _.cloneDeep(state.node_name), user: _.cloneDeep(state.userTags), field: _.cloneDeep(state.field_auths), property: _.cloneDeep(state.more_attr) });
+
         } else {
           state.statusLoading = false;
         }
@@ -1753,6 +1837,7 @@ export default {
       showMultipleSelect: true, // 编辑器是否可以多选
       onClickCanvas,
+      onClickNodeMousedown,
       onClickNode,
       onClickEdge,
       onDblClickNode,
@@ -2036,13 +2121,13 @@ body {
 }
 .el-button.el-button--primary {
-  background-color: #009688!important;
+  background-color: #009688 !important;
-  border-color: #009688!important;
+  border-color: #009688 !important;
-  color: white!important;
+  color: white !important;
 }
-.el-radio-button__original-radio:checked+.el-radio-button__inner {
+.el-radio-button__original-radio:checked + .el-radio-button__inner {
-  border-color: #009688!important;
+  border-color: #009688 !important;
-  box-shadow: -1px 0 0 0 #009688!important;
+  box-shadow: -1px 0 0 0 #009688 !important;
 }
 </style>