1. 分页管理器类（PaginationManager）

分页管理器类主要是为了配合Element Plus的分页控件el-pagination的使用，减少样本代码（boilerplate code）

1.1. 示例

<template>
  <div>
    <el-pagination background
                   :layout="paginationManager.paginationLayout"
                   :current-page="paginationManager.currentPage" :page-size="paginationManager.pageSize"
                   :total="paginationManager.total"
                   @size-change="paginationManager.handlePaginationSizeChange"
                   @current-change="paginationManager.handlePaginationCurrentChange"/>
  </div>
</template>

<script>
import {Delete, Plus, Search} from "@element-plus/icons-vue";
import {noticeManager, PaginationManager} from "@zhoujianhui/vip3-core";

export default {
  name: "UserList",
  components: {Plus, Delete, Search, UserAdd, UserEdit},
  data() {
    return {
      userNameKeyword: "",
      users: [],
      selectedUsers: [],
      allRoles: [],   // 用于UserAdd和UserEdit之间共享数据，避免反复从后端获取
      loading: true,
      // 使用对话框和动态组件按需显示UserAdd和UserEdit
      dialogTitle: "",
      dialogVisible: false,
      currentComponent: {
        name: "",
        props: null
      },
      paginationManager: PaginationManager.builder()
          .callback(this.loadUserList)
          .build()  // 分页配置
    }
  },
  created() {
    this.loadUserList();
  },
  methods: {
    async loadUserList() {
      this.loading = true;

      const queryExpression = this.userNameKeyword === "" ? "" : "username=*" + this.userNameKeyword + "*"
      const result = await userService.getUsersWithRolesByQueryExpressionAndPageable(queryExpression, this.paginationManager.toPageable())
      if (result.isSuccess()) {
        this.users = result.data.content;
        this.paginationManager.total = result.data.totalElements;
      } else {
        noticeManager.showMessage(result.msg, result.type)
      }

      this.loading = false;
    },
    async getAllRoles() {
      const result = await roleService.getAllRoles()

      if (result.isSuccess()) {
        return result.data
      } else {
        noticeManager.showMessage(result.msg, result.type)
      }
    },

    //////

    async handleAddBtnClick() {
      this.dialogTitle = "新增用户"
      this.dialogVisible = true

      if (this.allRoles.length === 0) {
        this.allRoles = await this.getAllRoles()
      }
      this.currentComponent = {
        name: "UserAdd",
        props: {
          allRoles: this.allRoles
        }
      }
    },
    handleBatchDelBtnClick() {
      if (this.selectedUsers.length > 0) {
        noticeManager.showConfirmDialog("你确定要批量删除选中项吗", null, async () => {
          const ids = this.selectedUsers.map((item) => item.id)
          const result = await userService.deleteUsers(ids)

          if (result.isSuccess()) {
            this.paginationManager.handleDeleteEvent(this.selectedUsers.length)
          }

          noticeManager.showMessage(result.msg, result.type)
        })
      } else {
        noticeManager.showMessage("未选中任何行", "warning")
      }
    },

    //////

    handleTableSelectionChange(rows) {
      this.selectedUsers = rows
    },
    async handleEditBtnClick(user) {
      this.dialogTitle = "编辑用户"
      this.dialogVisible = true

      if (this.allRoles.length === 0) {
        this.allRoles = await this.getAllRoles()
      }
      this.currentComponent = {
        name: "UserEdit",
        props: {
          allRoles: this.allRoles,
          user: user
        }
      }
    },
    handleDeleteBtnClick(user) {
      noticeManager.showConfirmDialog("你确定要删除当前项吗", null, async () => {
        const result = await userService.deleteUser(user.id);

        if (result.isSuccess()) {
          this.paginationManager.handleDeleteEvent(1)
        }

        noticeManager.showMessage(result.msg, result.type);
      });
    },
    handleDropDownCommand(command) {
      if (command.name === "enableUser") {
        this.handleEnableUser(command.data)
      }
      if (command.name === "disableUser") {
        this.handleDisableUser(command.data)
      }
    },
    async handleEnableUser(user) {
      const result = await userService.enableUser(user.id);

      if (result.isSuccess()) {
        user.isEnabled = true
      }

      noticeManager.showMessage(result.msg, result.type);
    },
    async handleDisableUser(user) {
      const result = await userService.disableUser(user.id);

      if (result.isSuccess()) {
        user.isEnabled = false
      }

      noticeManager.showMessage(result.msg, result.type);
    },

    //////

    handleDialogClose() {
      this.dialogVisible = false
      this.currentComponent = {
        name: "",
        props: null
      }
    },
    handleComponentClose(isReloadUserList) {
      this.handleDialogClose()

      if (isReloadUserList) {
        this.loadUserList()
      }
    }
  }
}
</script>