修改权限选择的bug

修改权限选择的bug

src/views/role/roleList.vue

@@ -58,7 +58,7 @@
             <el-input v-model="form.sort" autocomplete="off" placeholder="请输入排序"></el-input>
           </el-form-item>
           <el-form-item label="权限：" :label-width="formLabelWidth" prop="rule" class="custom-align-right">
-            <div class="treeBox">
+            <div class="treeBox" v-loading="loading">
               <el-tree
                 ref="tree"
                 :data="roleData"
@@ -150,6 +150,7 @@ export default {
       expandedKeys:[],//展开的节点  
       checkedKeys:[],//选中的节点 
       roleData:[],//菜单树
+      loading:true,//加载中
       defaultProps: {
         children: 'children',
         label: 'label'
@@ -230,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;
@@ -317,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;
         //回显职能描述
@@ -339,10 +362,7 @@ export default {
         //回显排序
         this.form.sort = res.data.sort;
       }).catch(() => {
-        this.$message({
-          type: 'warning',
-          message: '网络错误，请重试！'
-        });
+        this.$message.error('网络错误，请重试！');
       })
     },
     //提交编辑