Added pagination to RoleManagement. Optimized get role list in GroupManagement and UserManagement.

ui/src/pages/power/GroupManagement.vue

@@ -155,7 +155,7 @@ export default {
         },
         getRoles() {
             this.dialogLoading = true
-            request.get('/role').then((res) => {
+            request.get('/role/list').then((res) => {
                 const response = res.data
                 if (response.code === DATABASE_SELECT_OK) {
                     this.roles = response.data

ui/src/pages/power/RoleManagement.vue

@@ -21,6 +21,19 @@
         @onDelete="handleDelete"
         custom-column-label_1="权限"
     />
+
+    <div class="pagination">
+        <el-pagination
+            v-model:current-page="currentPage"
+            v-model:page-size="pageSize"
+            :page-sizes="[50, 100, 200, 500, 1000]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="totalCount"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+        />
+    </div>
+
     <el-dialog
         :title="dialogTitle"
         :close-on-click-modal="false"
@@ -98,6 +111,9 @@ export default {
             dialogVisible: false,
             tableLoading: true,
             dialogLoading: true,
+            currentPage: 1,
+            pageSize: 50,
+            totalCount: 0,
             roleTable: [],
             powerTree: [],
             powerProps: {
@@ -126,47 +142,50 @@ export default {
     methods: {
         loadRoleTable() {
             this.tableLoading = true
-            request.get('/role').then((res) => {
-                const response = res.data
-                if (response.code === DATABASE_SELECT_OK) {
-                    const roles = response.data
-                    for (const role of roles) {
-                        role.customColumn_1 = []
-                        const menus = role.menus
-                        const elements = role.elements
-                        const operations = role.operations
-                        for (const operation of operations) {
-                            const element = _.find(elements, { id: operation.elementId })
-                            if (element.operations === undefined) {
-                                element.operations = []
+            request
+                .get('/role', { currentPage: this.currentPage, pageSize: this.pageSize })
+                .then((res) => {
+                    const response = res.data
+                    if (response.code === DATABASE_SELECT_OK) {
+                        const roles = response.data.records
+                        this.totalCount = response.data.total
+                        for (const role of roles) {
+                            role.customColumn_1 = []
+                            const menus = role.menus
+                            const elements = role.elements
+                            const operations = role.operations
+                            for (const operation of operations) {
+                                const element = _.find(elements, { id: operation.elementId })
+                                if (element.operations === undefined) {
+                                    element.operations = []
+                                }
+                                element.operations.push(operation)
                             }
-                            element.operations.push(operation)
-                        }
-                        for (const element of elements) {
-                            const menu = _.find(menus, { id: element.menuId })
-                            if (menu.elements === undefined) {
-                                menu.elements = []
-                            }
-                            menu.elements.push(element)
+                            for (const element of elements) {
+                                const menu = _.find(menus, { id: element.menuId })
+                                if (menu.elements === undefined) {
+                                    menu.elements = []
+                                }
+                                menu.elements.push(element)
 
-                            const operas = []
-                            _.forEach(element.operations, (value) => {
-                                operas.push(value.name)
-                            })
-                            role.customColumn_1.push(
-                                `${menu.name}/${element.name}/${_.join(operas, ';')}`
-                            )
+                                const operas = []
+                                _.forEach(element.operations, (value) => {
+                                    operas.push(value.name)
+                                })
+                                role.customColumn_1.push(
+                                    `${menu.name}/${element.name}/${_.join(operas, ';')}`
+                                )
+                            }
                         }
+                        this.roleTable = roles
+                        this.tableLoading = false
+                    } else {
+                        ElMessage.error({
+                            dangerouslyUseHTMLString: true,
+                            message: '<strong>查询出错</strong>: ' + response.msg
+                        })
                     }
-                    this.roleTable = roles
-                    this.tableLoading = false
-                } else {
-                    ElMessage.error({
-                        dangerouslyUseHTMLString: true,
-                        message: '<strong>查询出错</strong>: ' + response.msg
-                    })
-                }
-            })
+                })
         },
         handleDialogOpen() {
             this.getPowerTree()
@@ -330,6 +349,14 @@ export default {
         },
         handleCancel() {
             this.dialogVisible = false
+        },
+        handleSizeChange(pageSize) {
+            this.pageSize = pageSize
+            this.loadRoleTable()
+        },
+        handleCurrentChange(currentPage) {
+            this.currentPage = currentPage
+            this.loadRoleTable()
         }
     },
     mounted() {
@@ -338,4 +365,10 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.pagination {
+    display: flex;
+    margin-top: 10px;
+    justify-content: center;
+}
+</style>

ui/src/pages/power/UserManagement.vue

@@ -226,7 +226,7 @@ export default {
         },
         getRoles() {
             this.dialogLoading = true
-            request.get('/role').then((res) => {
+            request.get('/role/list').then((res) => {
                 const response = res.data
                 if (response.code === DATABASE_SELECT_OK) {
                     this.roles = response.data