角色列表页面雏形.

src/main/java/com/xuxd/kafka/console/beans/vo/SysRoleVO.java

@@ -0,0 +1,26 @@
+package com.xuxd.kafka.console.beans.vo;
+
+import com.xuxd.kafka.console.beans.dos.SysRoleDO;
+import lombok.Data;
+
+/**
+ * @author: xuxd
+ * @date: 2023/4/19 21:12
+ **/
+@Data
+public class SysRoleVO {
+
+    private String roleName;
+
+    private String description;
+
+    private String permissionIds;
+
+    public static SysRoleVO from(SysRoleDO roleDO) {
+        SysRoleVO roleVO = new SysRoleVO();
+        roleVO.setRoleName(roleDO.getRoleName());
+        roleVO.setDescription(roleDO.getDescription());
+        roleVO.setPermissionIds(roleDO.getPermissionIds());
+        return roleVO;
+    }
+}

src/main/java/com/xuxd/kafka/console/controller/UserManageController.java

@@ -39,6 +39,11 @@ public class UserManageController {
         return userManageService.addPermission(permissionDTO);
     }
 
+    @GetMapping("/role")
+    public Object selectRole() {
+        return userManageService.selectRole();
+    }
+
     @GetMapping("/permission")
     public Object selectPermission() {
         return userManageService.selectPermission();

src/main/java/com/xuxd/kafka/console/service/UserManageService.java

@@ -22,5 +22,7 @@ public interface UserManageService {
 
     ResponseData addUser(SysUserDTO userDTO);
 
+    ResponseData selectRole();
+
     ResponseData selectPermission();
 }

src/main/java/com/xuxd/kafka/console/service/impl/UserManageServiceImpl.java

@@ -3,10 +3,12 @@ package com.xuxd.kafka.console.service.impl;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.xuxd.kafka.console.beans.ResponseData;
 import com.xuxd.kafka.console.beans.dos.SysPermissionDO;
+import com.xuxd.kafka.console.beans.dos.SysRoleDO;
 import com.xuxd.kafka.console.beans.dto.SysPermissionDTO;
 import com.xuxd.kafka.console.beans.dto.SysRoleDTO;
 import com.xuxd.kafka.console.beans.dto.SysUserDTO;
 import com.xuxd.kafka.console.beans.vo.SysPermissionVO;
+import com.xuxd.kafka.console.beans.vo.SysRoleVO;
 import com.xuxd.kafka.console.dao.SysPermissionMapper;
 import com.xuxd.kafka.console.dao.SysRoleMapper;
 import com.xuxd.kafka.console.dao.SysUserMapper;
@@ -58,6 +60,12 @@ public class UserManageServiceImpl implements UserManageService {
         return ResponseData.create().success();
     }
 
+    @Override
+    public ResponseData selectRole() {
+        List<SysRoleDO> dos = roleMapper.selectList(new QueryWrapper<>());
+        return ResponseData.create().data(dos.stream().map(SysRoleVO::from).collect(Collectors.toList())).success();
+    }
+
     @Override
     public ResponseData selectPermission() {
         QueryWrapper<SysPermissionDO> queryWrapper = new QueryWrapper<>();

ui/src/utils/api.js

@@ -318,4 +318,8 @@ export const UserManageApi = {
     url: "/sys/user/manage/permission",
     method: "post",
   },
+  getRole: {
+    url: "/sys/user/manage/role",
+    method: "get",
+  },
 };

ui/src/views/user/Role.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="content">
+    <a-spin :spinning="loading">
+      <a-card :bordered="false" :style="{ height: '100%' }">
+        <a-row :gutter="24">
+          <a-col :md="4">
+            <a-list itemLayout="horizontal" :data-source="roles">
+              <a-list-item
+                slot="renderItem"
+                slot-scope="item, index"
+                :key="index"
+              >
+                <a-list-item-meta
+                  :style="{ marginBottom: '0', display: 'flex' }"
+                >
+                  <span slot="description" class="role-desc">{{
+                    item.description
+                  }}</span>
+                  <a slot="title" class="role-name" @click="selected(item)">{{
+                    item.roleName
+                  }}</a>
+                </a-list-item-meta>
+                <a-popconfirm title="确定删除角色？">
+                  <a :style="{ display: 'flex' }">
+                    <a-icon type="delete" />
+                  </a>
+                </a-popconfirm>
+              </a-list-item>
+            </a-list>
+            <span
+              :style="{ margin: '25px', fontSize: '15px', display: 'block' }"
+            >
+              <a><a-icon type="plus" /> 新增角色</a>
+            </span>
+          </a-col>
+          <a-col :md="20">
+            <div class="role-info" v-if="!selectedRole.roleName">
+              <a-empty />
+            </div>
+            <div class="role-info" v-if="selectedRole.roleName">
+              <a-form :form="form">
+                <a-form-item label="角色名称">
+                  <a-input
+                    v-decorator="[
+                      'roleName',
+                      {
+                        rules: [{ required: true, message: '请填写角色名称!' }],
+                        initialValue: selectedRole.roleName,
+                      },
+                    ]"
+                    placeholder="请填写角色名称"
+                  />
+                </a-form-item>
+
+                <a-form-item label="备注说明">
+                  <a-textarea
+                    :row="3"
+                    v-decorator="[
+                      'description',
+                      {
+                        rules: [{ required: true, message: '请填写备注说明!' }],
+                        initialValue: selectedRole.description,
+                      },
+                    ]"
+                    placeholder="请填写备注说明"
+                  />
+                </a-form-item>
+
+                <a-form-item label="拥有权限"> </a-form-item>
+                <a-form-item>
+                  <a-button type="primary" :loading="loading">保存</a-button>
+                </a-form-item>
+              </a-form>
+            </div>
+          </a-col>
+        </a-row>
+      </a-card>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+
+import { UserManageApi } from "@/utils/api";
+import notification from "ant-design-vue/lib/notification";
+
+export default {
+  name: "Role",
+  components: {},
+  data() {
+    return {
+      form: this.$form.createForm(this),
+      loading: false,
+      roles: [],
+      permissions: [],
+      selectedRole: {},
+      selectedPermissions: [],
+    };
+  },
+  methods: {
+    selected(role) {
+      this.selectedRole = Object.assign({}, role);
+      
+    },
+    getRoles() {
+      this.loading = true;
+      request({
+        url: UserManageApi.getRole.url,
+        method: UserManageApi.getRole.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code == 0) {
+          this.roles = res.data;
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+    getPermissions() {
+      this.loading = true;
+      request({
+        url: UserManageApi.getPermissions.url,
+        method: UserManageApi.getPermissions.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code == 0) {
+          this.permissions = res.data;
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+  },
+  created() {
+    this.getRoles();
+    this.getPermissions();
+  },
+};
+</script>
+
+<style scoped>
+.editable-row-operations a {
+  margin-right: 8px;
+}
+
+.role-desc {
+  text-align: left;
+  display: block;
+}
+
+.role-name {
+  text-align: left;
+  display: block;
+  font-size: 16px;
+}
+
+.role-info {
+  max-width: 1000px;
+  background-color: #faf9f9;
+}
+
+a-list-item-meta {
+}
+</style>

ui/src/views/user/UserManage.vue

@@ -3,7 +3,9 @@
     <a-spin :spinning="loading">
       <a-tabs default-active-key="1" size="large" tabPosition="top">
         <a-tab-pane key="1" tab="用户列表"> </a-tab-pane>
-        <a-tab-pane key="2" tab="角色列表"> </a-tab-pane>
+        <a-tab-pane key="2" tab="角色列表">
+          <Role></Role>
+        </a-tab-pane>
         <a-tab-pane key="3" tab="权限列表">
           <Permission></Permission>
         </a-tab-pane>
@@ -15,9 +17,10 @@
 
 <script>
 import Permission from "@/views/user/Permission.vue";
+import Role from "@/views/user/Role.vue";
 export default {
   name: "UserManage",
-  components: { Permission },
+  components: { Permission, Role },
   data() {
     return {
       loading: false,