角色修改

ah-jjzhgd-web/src/views/system/roles/index.vue

@@ -20,15 +20,17 @@
         </template>
       </el-table-column>
       <el-table-column label="角色名称" min-width="40px" align="center">
+
         <template slot-scope="{ row }">
           <span class="link-type" @click="handleUpdate(row)">{{
-            row.roleName
-          }}</span>
+        row.roleName
+      }}</span>
         </template>
       </el-table-column>
       <el-table-column key="roleSort" prop="roleSort" label="排序" min-width="40px" align="center" />
       <el-table-column key="createTime" prop="createTime" label="创建时间" align="center" :show-overflow-tooltip="true" />
       <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
+
         <template slot-scope="{ row, $index }">
           <el-button type="primary" size="mini" plain icon="el-icon-edit" title="修改" @click="handleUpdate(row)" />
           <el-button v-if="row.status != 'deleted'" plain size="mini" type="danger" icon="el-icon-delete" title="删除"
@@ -59,12 +61,13 @@
       </div>
     </el-dialog>
 
-    <el-dialog title="授权" :visible.sync="dialogFormVisible2" width="600px">
+    <el-dialog title="授权" :visible.sync="dialogFormVisible2" width="600px" @close="handleTreeClose">
       <el-tree :data="menuData" ref="menuTree" show-checkbox node-key="id" :props="defaultProps" default-expand-all
-        :default-checked-keys="checkMenuData">
+        highlight-current check-strictly>
       </el-tree>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible2 = false"> 关闭 </el-button>
+        <!-- <el-button @click="dialogFormVisible2 = false"> 关闭 </el-button> -->
+        <el-button @click="handleTreeClose"> 关闭 </el-button>
         <el-button type="primary" @click="addMenuData">
           提交
         </el-button>
@@ -88,7 +91,6 @@ export default {
   data() {
     return {
       menuData: [],
-      checkMenuData: [],
       defaultProps: {
         children: 'children',
         label: 'label'
@@ -142,6 +144,11 @@ export default {
         callback(new Error('排序为1-1000'))
       }
     },
+    handleTreeClose() {
+      // 清空树
+      this.$refs.menuTree.setCheckedKeys([])
+      this.dialogFormVisible2 = false;
+    },
     // 菜单
     getMenuList() {
       fetchMenuList().then((response) => {
@@ -151,8 +158,8 @@ export default {
     // 角色授权菜单
     getAuthMenus(data) {
       getAuthMenus(data).then((response) => {
-        console.log(response.data);
-        this.checkMenuData = response.data
+        console.error(response.data);
+        this.$refs.menuTree.setCheckedKeys(response.data);
       })
     },
     getList() {
@@ -248,13 +255,14 @@ export default {
       })
     },
     addMenu(row, index) {
-      this.getAuthMenus({
-        roleId: row.roleId
-      });
-      this.temp.roleId = row.roleId
       this.dialogFormVisible2 = true
-      // 清空树
-      this.$refs.menuTree.setCheckedKeys([]);
+      this.$nextTick(() => {
+        this.getAuthMenus({
+          roleId: row.roleId
+        });
+      });
+
+      this.temp.roleId = row.roleId
     },
     addMenuData() {
       let treeNodeData = this.$refs.menuTree.getCheckedNodes();
@@ -279,7 +287,7 @@ export default {
         roleId: this.temp.roleId
       }
       authMenu(data).then((response) => {
-        this.dialogFormVisible2 = false
+        this.handleTreeClose()
         this.$message({
           showClose: true,
           message: response.msg,
@@ -302,6 +310,7 @@ export default {
   }
 }
 </script>
+
 <style scoped>
 .el-input-number {
   width: 320px;