优化流程图操作逻辑

hookehuyr
Commit 20e06e22ef955218691dd2bcb3fd77e59cc7a246 20e06e22 1 parent fb7d7268
Showing 1 changed file with 121 additions and 34 deletions
doc/App.vue
--- a/doc/App.vue
View file @20e06e2
+++ b/doc/App.vue
View file @20e06e2
@@ -72,7 +72,6 @@
         <el-form
           v-if="!!state.detailModel"
           ref="formRef"
-          :rules="rules"
           :model="state.detailModel"
           label-position="top"
           label-width="100px"
@@ -91,7 +90,7 @@
                   </div>
                   <el-input v-model="state.node_name" />
                 </el-form-item>
-                <div>
+                <div class="node-user">
                   <div style="font-size: 14px; margin-bottom: 10px;">
                     节点负责人 <span style="color: red;">*</span>
                   </div>
@@ -157,6 +156,7 @@
                         :disabled="field.visible.disabled"
                         label=""
                         size="large"
+                        @change="onAuthVisibleChange(field, index)"
                     /></el-col>
                     <el-col :span="6" style="padding-left: 5px;"
                       ><el-checkbox
@@ -164,6 +164,7 @@
                         :disabled="field.editable.disabled"
                         label=""
                         size="large"
+                        @change="onAuthEditableChange(field, index)"
                     /></el-col>
                   </el-row>
                 </el-form-item>
@@ -389,8 +390,8 @@ export default {
         {
           name: '字段1',
           visible: {
-            checked: true,
+            checked: false,
-            disabled: false,
+            disabled: true,
           },
           editable: {
             checked: false,
@@ -411,7 +412,7 @@ export default {
         {
           name: '字段3',
           visible: {
-            checked: true,
+            checked: false,
             disabled: false,
           },
           editable: {
@@ -424,32 +425,51 @@ export default {
     onMounted(() => {
       document.title = '可视化流程设计器'
-      // // 显示提示框的标志位
+      // 显示提示框的标志位
-      // var showConfirmation = true;
+      var showConfirmation = true;
-      // // 监听 beforeunload 事件
+      // 监听 beforeunload 事件
-      // window.addEventListener('beforeunload', function (event) {
+      window.addEventListener('beforeunload', function (event) {
-      //   if (showConfirmation) {
+        if (showConfirmation) {
-      //     // 取消事件的默认行为（弹出确认对话框）
+          // 取消事件的默认行为（弹出确认对话框）
-      //     event.preventDefault();
+          event.preventDefault();
-      //     // Chrome 和 Firefox 需要返回一个值以显示确认对话框
+          // Chrome 和 Firefox 需要返回一个值以显示确认对话框
-      //     event.returnValue = '';
+          event.returnValue = '';
-      //     // 显示自定义的提示信息
+          // 显示自定义的提示信息
-      //     var confirmationMessage = '确定要离开此页面吗？';
+          var confirmationMessage = '确定要离开此页面吗？';
-      //     (event || window.event).returnValue = confirmationMessage;  // 兼容旧版浏览器
+          (event || window.event).returnValue = confirmationMessage;  // 兼容旧版浏览器
-      //     return confirmationMessage;
+          return confirmationMessage;
-      //   }
+        }
-      // });
+      });
-      // // 监听 unload 事件
+      // 监听 unload 事件
-      // window.addEventListener('unload', function () {
+      window.addEventListener('unload', function () {
-      //   // 设置标志位为 false，避免在刷新页面时再次显示提示框
+        // 设置标志位为 false，避免在刷新页面时再次显示提示框
-      //   showConfirmation = false;
+        showConfirmation = false;
-      // });
+      });
     })
     function handleActiveChange(name) {
       console.warn(name)
     }
+    /************** 字段权限操作 ***************/
+    const onAuthVisibleChange = (val: any, index: number) => {
+      // 可见按钮回调
+      console.log('onAuthVisibleChange', val, index);
+      let count = state.field_auths.filter((ele) => {
+        if (ele.visible.checked && !ele.visible.disabled) {
+          return ele;
+        }
+      });
+      if (count.length === state.field_auths.length) {
+        state.auth_all_checked = true;
+      } else {
+        state.auth_all_checked = false;
+      }
+    }
+    const onAuthEditChange = (val: any, index: number) => {
+      console.log('onAuthEditChange', val, index)
+    }
+
     const onAuthAllChange = (val: any) => {
       // 全选可见按钮回调
       if (val) {
@@ -468,6 +488,7 @@ export default {
       // 全选可编辑按钮回调
       console.warn(val)
     }
+    /******************* END *******************/
     /****** 用户选择控件弹框 ******/
     const openUserForm = () => {
@@ -479,6 +500,7 @@ export default {
       state.dialogUserFormVisible = status
     }
     const onConfirmUserView = (data: any) => {
+      state.userTags = data;
       console.log(data)
     }
     /******************* END *******************/
@@ -534,7 +556,32 @@ export default {
       // 判断是否是流程节点
       let model_id = model.id
       if (model_id !== 'start-node' && model_id!== 'end-node') {
-        state.detailModel = model
+        state.detailModel = model;
+        // 获取节点名称
+        state.node_name = state.detailModel.text;
+        // // 检查字段权限选中情况
+        // let checked_count = state.field_auths.filter((ele) => {
+        //   if (ele.visible.checked && !ele.visible.disabled) {
+        //     return ele;
+        //   }
+        // });
+        // if (checked_count.length === state.field_auths.length) {
+        //   state.auth_all_checked = true;
+        // } else {
+        //   state.auth_all_checked = false;
+        // }
+        // let edit_count = state.field_auths.filter((ele) => {
+        //   if (ele.editable.checked && !ele.editable.disabled) {
+        //     return ele;
+        //   }
+        // });
+        // if (edit_count.length === state.field_auths.length) {
+        //   state.auth_all_edit = true;
+        // } else {
+        //   state.auth_all_edit = false;
+        // }
+
+        // 打开属性表单
         editor.openModel()
       } else {
         editor.closeModel()
@@ -583,11 +630,15 @@ export default {
       //     return false
       //   }
       // })
-      // editor.updateModel(state.detailModel)
+      state.detailModel.text = state.node_name
+
+      // state.detailModel.label = state.node_name
+      // 更新流程图信息
+      editor.updateModel(state.detailModel)
       // editor.closeModel()
-      console.log(state.node_name)
+      console.log('节点名称', state.node_name)
-      console.log(state.userTags)
+      console.log('节点负责人', state.userTags)
-      console.log(state.field_auths)
+      console.log('字段权限', state.field_auths)
     }
     /**
@@ -601,14 +652,48 @@ export default {
       model: myObj,
       type: string,
     ): Promise<any> {
+      let { nodes, edges } = editor.editorState.graph.save();
+      // 不可以删除开始与结束连接线
+      let node_id = model.id;
+      for (let index = 0; index < edges.length; index++) {
+        const element = edges[index]
+        if(
+          (element.target === node_id && element.source === 'start-node') ||
+          (element.source === node_id && element.target === 'end-node')
+          )
+        {
+          ElNotification.error('不可以删除【开始】与【结束】连接线')
+          return Promise.reject('reject')
+        }
+      }
       if (type === 'node') {
-        if (model.label === '开始') {
+        if (model.id === 'start-node') {
-          state.editorLoading = true
+          // state.editorLoading = true
-          await delay(1000)
+          // await delay(1000)
-          state.editorLoading = false
+          // state.editorLoading = false
           ElNotification.error('不可以删除【开始】节点')
           return Promise.reject('reject')
         }
+        if (model.id === 'end-node') {
+          ElNotification.error('不可以删除【结束】节点')
+          return Promise.reject('reject')
+        }
+        // 流程图中必须有一个流程节点
+        let is_flow_node = nodes.filter(node => node.control === 'flow');
+        if (is_flow_node.length === 1) {
+          ElNotification.error('流程图中必须有一个流程节点')
+          return Promise.reject('reject')
+        }
+      }
+      if (type === 'edge') {
+        if (model.source === 'start-node') {
+          ElNotification.error('不可以删除【开始】连接线')
+          return Promise.reject('reject')
+        }
+        if (model.target === 'end-node') {
+          ElNotification.error('不可以删除【结束】连接线')
+          return Promise.reject('reject')
+        }
       }
     }
@@ -783,6 +868,8 @@ export default {
       handleAfterAdd,
       handleActiveChange,
+      onAuthVisibleChange,
+      onAuthEditChange,
       onAuthAllChange,
       onAuthAllEditChange,