角色权限设置完成

src/views/rolePermissions/api.js

@@ -35,3 +35,22 @@ export function deleteRole  (id) {
         }
     })
 }
+// 获取权限列表
+
+export function getAuthority  () {
+    return request({
+        url: '/manager/authority/list',
+        method: 'get',
+    })
+}
+// 修改角色权限
+export function putAuthority  (roleId, authorityIds) {
+    return request({
+        url: '/manager/role/authority',
+        method: 'put',
+        data:{
+            roleId,
+            authorityIds
+        }
+    })
+}

src/views/rolePermissions/index.vue

@@ -42,6 +42,16 @@
                 type="text"
                 size="small"
               >修改</el-button>   
+              <el-button
+                v-if="scope.row.groupId != -1"
+                @click="onClickUpdateAuthority(scope.row); "
+                slot="reference"
+                style="margin-left: 10px;"
+                class="el-icon-edit"
+                type="text"
+                size="small"
+                >修改权限</el-button>
+              
               <el-popconfirm
                 @confirm="onClickDelete(scope.row)"
                 :title="'确定要删除吗？'"
@@ -123,12 +133,37 @@
         <el-button type="primary" @click="onClickUpdateAffirm">确 定</el-button>
       </span>
     </el-dialog>
+    <!-- 设置权限 -->
+    <el-dialog
+      title="设置权限"
+      :visible.sync="isAuthorityDialog"
+      width="30%"
+    >
+      <el-tree
+        @check-change="onChangeNode"
+        ref="tree"
+        :data="authorityArr"
+        show-checkbox
+        node-key="id"
+        :default-expanded-keys="defaultCheckedKeys"
+        :default-checked-keys="defaultCheckedKeys"
+        :props="defaultProps"
+      >
+      </el-tree>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="isAuthorityDialog = false" size="mini">取 消</el-button>
+        <el-button type="primary" @click="onClickAffirmAuthority" size="mini"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import columns from "./columns";
-import { getRole, postRole, putRole, deleteRole} from "./api";
+import { getRole, postRole, putRole, deleteRole, getAuthority, putAuthority } from "./api";
 
 const errorMessages = {
   name: '请输入角色名称',
@@ -153,13 +188,58 @@ export default {
       },
       roleData: {}, // 点击新增选中的角色
       isUpdateDialog: false,
-
+      isAuthorityDialog: false, // 角色权限弹框
+      roleId: null, // 修改选中的角色id
+      authorityArr: [], // 权限列表
+      defaultProps: {
+        children: "childrenList",
+        label: "alias",
+      },
+      defaultCheckedKeys: [],
     };
   },
   created() {
     this.roleList();
+    this.authorityList()
   },
   methods: {
+    // 点击修改权限
+    onClickUpdateAuthority(item){
+      this.defaultCheckedKeys = []; 
+      this.isAuthorityDialog = true; 
+      this.roleId = item.id; 
+      this.defaultCheckedKeys = item.authorityIds
+      if(this.$refs.tree){
+        this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys);
+      }else {
+        setTimeout(()=>{
+          this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys);
+        },100
+        )
+        // this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys);
+      }
+      
+      // this.$refs.tree.setCheckedKeys([3]);
+     
+    },
+    // 点击节点
+    onChangeNode(node){
+      console.log(node)
+      
+    },
+    onClickAffirmAuthority() {
+      console.log(this.$refs.tree.getCheckedKeys());
+      if (this.$refs.tree.getCheckedKeys().length == 0) {
+        this.$message.error("请选择权限");
+      } else {
+        putAuthority( this.roleId, this.$refs.tree.getCheckedKeys()).then((res) => {
+          this.roleList()
+          this.$message.success("权限设置成功");
+          
+          this.isAuthorityDialog = false;
+        });
+      }
+    },
     // 点击确定新增
     onClickAffirm() {
       console.log(this.roleForm)
@@ -199,6 +279,12 @@ export default {
         this.roleArr = res
       })
     },
+    // 权限列表
+    authorityList () {
+      getAuthority().then(res =>{
+        this.authorityArr = res
+      })
+    },
     // 点击删除
     onClickDelete(item){
       console.log(item)