修改权限选择的bug

修改权限选择的bug

src/views/role/roleList.vue

@@ -54,11 +54,11 @@
           <el-form-item label="职能描述：" :label-width="formLabelWidth" prop="remark" class="custom-align-right">
             <el-input type="textarea" v-model="form.remark" class="custom-textarea" placeholder="请输入职能描述"></el-input>
           </el-form-item>
-          <el-form-item label="排序：" :label-width="formLabelWidth" prop="sort" class="custom-align-right">
+          <el-form-item label="排序：" :label-width="formLabelWidth" prop="" class="custom-align-right">
             <el-input v-model="form.sort" autocomplete="off" placeholder="请输入排序"></el-input>
           </el-form-item>
-          <el-form-item label="权限：" :label-width="formLabelWidth" prop="" class="custom-align-right">
-            <div class="treeBox">
+          <el-form-item label="权限：" :label-width="formLabelWidth" prop="rule" class="custom-align-right">
+            <div class="treeBox" v-loading="loading">
               <el-tree
                 ref="tree"
                 :data="roleData"
@@ -68,8 +68,10 @@
                 :default-checked-keys="checkedKeys"
                 :props="defaultProps">
               </el-tree>
+              <!--没有被选中的父级在halfCheckedNodes,halfCheckedKeys属性中-->
             </div>
           </el-form-item>
+          <input type="hidden" v-model="form.rule" />
         </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -105,6 +107,14 @@ export default {
         callback()
       }
     }
+    //数组不能为空
+    const validateArray = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
     //0.全局操作 end ------------------------------------------------------------>
 
     return {
@@ -140,6 +150,7 @@ export default {
       expandedKeys:[],//展开的节点  
       checkedKeys:[],//选中的节点 
       roleData:[],//菜单树
+      loading:true,//加载中
       defaultProps: {
         children: 'children',
         label: 'label'
@@ -151,7 +162,9 @@ export default {
         //职能描述不能为空
         remark:[{required:true,trigger:'blur',validator:validateEmpty}],
         //排序不能为空
-        sort:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //sort:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //权限不能为空
+        rule:[{required:true,trigger:'blur',validator:validateArray}],
       },
       //弹出框中的表单设置 end ------------------------------------------------------------>
     }
@@ -218,16 +231,16 @@ export default {
       this.form.role_name = "";
       this.form.remark = "";
       this.form.sort = "";
-      this.$nextTick(() => {
-        //请空选中的节点
-        this.$refs.tree.setCheckedKeys([]);
-        //还原搜索的状态
-        this.$refs.tree.root.childNodes.forEach((e) => {
-          e.expanded = false;
-        });
-        // 收回树中所有展开的节点
-        this.collapseAllNodes(this.$refs.tree.root.childNodes);
-      });
+      //清空弹出框
+      // this.$nextTick(() => {
+      //   //请空选中的节点
+      //   this.$refs.tree.setCheckedKeys([]);
+      //   //还原搜索的状态
+      //   this.$refs.tree.root.childNodes.forEach((e) => {
+      //     e.expanded = false;
+      //   });
+      //   // 收回树中所有展开的节点
+      //   this.collapseAllNodes(this.$refs.tree.root.childNodes);
       this.getAllMenuList();
       //this.clearToServe();
       this.windowStatus = true;
@@ -261,10 +274,24 @@ export default {
 
     //4.添加 start ------------------------------------------------------------>
     addData(){
-      //获取选中的节点
+      this.form.id = this.editId;
+      //半选的节点
+      let supplement = [];
+      let allKeys = this.$refs.tree.getHalfCheckedNodes();
+      if(allKeys.length > 0){
+        for(let i = 0; i < allKeys.length; i++){
+          supplement.push(allKeys[i].id);
+        }
+      }
+      console.log(supplement)
+      //选中的节点
       let checkedArr = this.$refs.tree.getCheckedKeys();
       this.form.rule = checkedArr;
-      
+      console.log(checkedArr)
+      //合并节点
+      this.form.rule = [...new Set([...supplement, ...checkedArr])];
+      console.log(this.form.rule)
+      //提交数据
       this.$refs.form.validate(valid => {
         if (valid) {
           this.$store.dispatch('userRole/addRole',this.form).then(res=> {
@@ -291,21 +318,43 @@ export default {
     //回显数据
     editRow(id){
       this.openWindow();
+      this.loading = true;
       //设置要编辑的id
       this.editId = id;
       this.$store.dispatch('userRole/roleInfo',{id:id}).then(res=> {
         console.log(res)
-        this.$nextTick(() => {
-          //请空选中的节点
-          this.$refs.tree.setCheckedKeys([]);
-          //还原搜索的状态
-          this.$refs.tree.root.childNodes.forEach((e) => {
-            e.expanded = false;
-          });
-        });
+        // this.$nextTick(() => {
+        //   //请空选中的节点
+        //   this.$refs.tree.setCheckedKeys([]);
+        //   //还原搜索的状态
+        //   this.$refs.tree.root.childNodes.forEach((e) => {
+        //     e.expanded = false;
+        //   });
+        // });
+
         //回显用户权限
-        this.expandedKeys = res.data.rule;
-        this.checkedKeys = res.data.rule;
+        // this.expandedKeys = res.data.rule;
+        // this.checkedKeys = res.data.rule;
+        //  this.isCheck = false;
+        //  this.$nextTick(() => {
+        //    this.isCheck = false;
+        // })
+
+        //加1秒延迟等待dom加载
+        let that = this;
+        setTimeout(() => {
+          res.data.rule.forEach((i,n) => {
+            var node = that.$refs.tree.getNode(i);
+            //console.log(node)
+            if(node){
+              if(node.isLeaf){
+                that.$refs.tree.setChecked(node,true);
+              }
+            }
+          });
+          that.loading = false;
+        },1000)
+        
         //回显用户名称
         this.form.role_name = res.data.role_name;
         //回显职能描述
@@ -313,18 +362,30 @@ export default {
         //回显排序
         this.form.sort = res.data.sort;
       }).catch(() => {
-        this.$message({
-          type: 'warning',
-          message: '网络错误，请重试！'
-        });
+        this.$message.error('网络错误，请重试！');
       })
     },
     //提交编辑
     editData(){
       this.form.id = this.editId;
-      //获取选中的节点
+      //半选的节点
+      let supplement = [];
+      let allKeys = this.$refs.tree.getHalfCheckedNodes();
+      if(allKeys.length > 0){
+        for(let i = 0; i < allKeys.length; i++){
+          supplement.push(allKeys[i].id);
+        }
+      }
+      console.log(supplement)
+      //选中的节点
       let checkedArr = this.$refs.tree.getCheckedKeys();
       this.form.rule = checkedArr;
+      console.log(checkedArr)
+      //合并节点
+      this.form.rule = [...new Set([...supplement, ...checkedArr])];
+      console.log(this.form.rule)
+
+      //提交数据
       this.$refs.form.validate(valid => {
         if (valid) {
           this.$store.dispatch('userRole/updateRole',this.form).then(res=> {
@@ -343,10 +404,43 @@ export default {
           })
         }
       })
-      
-    }
+    },
     //编辑 end ------------------------------------------------------------>
 
+    //5.tree start ------------------------------------------------------------>
+    checkChange(data) {
+      const node = this.$refs.tree.getNode(data.id);
+      this.setNode(node);
+    },
+    setNode(node) {
+      console.log(node, "node");
+      if (node.checked) {
+        //如果当前是选中checkbox,则递归设置父节点和父父节点++选中
+        this.setParentNode(node);
+      } else {
+        //当前是取消选中,将所有子节点都取消选中
+        this.setChildenNode(node);
+      }
+    },
+    setParentNode(node) {
+      if (node.parent) {
+        for (const key in node) {
+          if (key === "parent") {
+            node[key].checked = true;
+            this.setParentNode(node[key]);
+          }
+        }
+      }
+    },
+    setChildenNode(node) {
+      let len = node.childNodes.length;
+      for (let i = 0; i < len; i++) {
+        node.childNodes[i].checked = false;
+        this.setChildenNode(node.childNodes[i]);
+      }
+    },
+    //5.tree end ------------------------------------------------------------>
+
   },
   mounted(){
     //获取页面列表