fix 处理新增和删除节点后的检查有效性问题

hookehuyr
Commit ccc52e8a287240fd5b4ab3cd35e3893fce55dc77 ccc52e8a 1 parent 2cd712dd
Showing 1 changed file with 68 additions and 13 deletions
doc/App.vue
--- a/doc/App.vue
View file @ccc52e8
+++ b/doc/App.vue
View file @ccc52e8
@@ -472,6 +472,7 @@ interface RuleForm {
 }
 interface myObj {
+  text: string
   source: string
   id: string
   label: string
@@ -1509,7 +1510,6 @@ export default {
       let { nodes } = editor.editorState.graph.save();
       let models = []; // 未通过的节点ID集合
-      console.warn('state.node_tree', state.node_tree);
       for (const key in state.node_tree) {
         const element = state.node_tree[key];
@@ -1533,7 +1533,6 @@ export default {
           models.push(element.model);
         }
       }
-      console.warn(models);
       if (models.length) {
         ElMessage({
@@ -1705,6 +1704,14 @@ export default {
       if (type === 'node') {
         // 关闭编辑器
         editor.closeModel();
+        // TAG: 节点删除后，如果有缓存也要删除掉
+        for (const key in state.node_tree) {
+          if (key === model.id) {
+            delete state.node_tree[model.id];
+          }
+        }
+        console.warn(state.node_tree);
+
       }
       if (type === 'edge') {
         // console.log('delete edge')
@@ -1713,12 +1720,7 @@ export default {
       flowData.value.nodes = editor.editorState.graph.save().nodes
       flowData.value.edges = editor.editorState.graph.save().edges
-      // TAG: 节点删除后，如果有缓存也要删除掉
+
-      for (const key in state.node_tree) {
-        if (key === model.id) {
-          delete state.node_tree[model.id];
-        }
-      }
     }
     /**
@@ -1783,15 +1785,69 @@ export default {
      * @param {model} model - The model being handled.
      * @param {type} type - The type of the event.
      */
-    function handleAfterAdd(model: myObj, type: string) {
+    const handleAfterAdd = async (model: myObj, type: string) => {
       if (type === 'node') {
         // console.log(`新增节点`)
         flowData.value.nodes = editor.editorState.graph.save().nodes
+
+        editor.addNode(model);
+        let flow_id = getFlowId(); // 流程id
+        const { code, data } = await flowNodePropertyAPI({ node_code: model.id, flow_id });
+        if (code) {
+          // 转换数据结构使用
+          let node_name = data.name ? data.name : model.text;
+          let userTags = data.user; // 节点负责人
+          let field_extend = data.field; // 字段权限临时储存，实际传给后端数据结构
+          let field_auths = []; // 清空字段权限列表，本地使用数据结构
+          let more_attr = data.property; // 更多属性
+
+          // 转换数据结构使用
+          field_extend.forEach(ele => {
+            if (!ele.field_extend.disabled) { // 流程节点字段权限列表内是否显示
+              field_auths.push({
+                field_id: ele.field_extend.field_id,
+                name: ele.field_extend.label,
+                visible: {
+                  checked: ele.field_extend.visibled,
+                  disabled: false,
+                },
+                editable: {
+                  checked: ele.field_extend.editabled,
+                  disabled: ele.field_extend.readonly,
+                },
+                show: true,
+              })
+            }
+          });
+
+          // 初始化表单数据比较结构
+          field_extend.forEach(ele => {
+            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;
+              }
+            })
+          });
+
+          state.node_tree[model.id] = {
+            name: node_name,
+            user: userTags, // 开始节点没有负责人
+            field_auths: field_auths, // 页面显示结构
+            field_extend: field_extend, // 后端使用结构
+            property: more_attr,
+            model
+          };
+
+          editor.addNode(model);
+        }
       }
       if (type === 'edge') {
         // console.log(`新增连接线`)
         flowData.value.edges = editor.editorState.graph.save().edges
       }
+
     }
     function onClickCanvas(e: myEvent) {
@@ -1845,7 +1901,6 @@ export default {
         // 保存流程图数据
         flowData.value.nodes = editor.editorState.graph.save().nodes
         flowData.value.edges = editor.editorState.graph.save().edges
-
       } else {
         ElNotification.error('开始或者结束节点不可以复制')
       }
@@ -1860,8 +1915,6 @@ export default {
       // 清空错误提示
       let { nodes } = editor.editorState.graph.save();
-      console.warn(nodes);
-
       nodes.forEach((ele: any, idx: number) => {
         ele.desc = '';
         editor.updateModel(ele); // 更新流程图信息
@@ -1906,7 +1959,9 @@ export default {
       // TAG: 检查节点是否完整
       const checkResult = await checkAllFlowNodePropertyAPI({ flow_id: +flow_id })
       if (checkResult.code) {
-        let raw_keys = checkResult.data;
+        let { nodes, edges } = editor.editorState.graph.save();
+        let available_keys = _.map(nodes, 'id'); // 画布上存在的有效节点ID
+        let raw_keys = _.intersection(checkResult.data, available_keys); // 取交集有效ID
         let node_keys =  Object.keys(state.node_tree); // 现在本地的ID都是有效的值
         let result = _.difference(raw_keys, node_keys);
         if (result.length) {