wip: 分页demo

src/pages/index/views/fixed/401/index.vue

-<template>
-  <div class="flex flex-row justify-center items-center h-screen w-screen">
-    <img src="@/assets/icons/svg/401.svg" class="w-[120px]" />
-    <div class="ml-12">
-      <p class="mb-6 text-gray-700 text-4xl">抱歉 , 你没有权限 !</p>
-      <el-button type="info" class="px-12" @click="back">返回</el-button>
-    </div>
-  </div>
-</template>
-<script setup>
-import { getCurrentInstance } from 'vue'
-let { proxy } = getCurrentInstance()
-const back = function () {
-  proxy.$router.back()
-}
-</script>

src/pages/index/views/fixed/404/index.vue

-<template>
-  <div class="flex flex-row justify-center items-center h-screen w-screen">
-    <i class="font-404 !text-[120px] text-red-100" />
-    <div class="ml-12">
-      <p class="mb-6 text-gray-700 text-4xl">抱歉 , 页面丢失了 .</p>
-      <el-button type="info" class="px-12" @click="back">返回</el-button>
-    </div>
-  </div>
-</template>
-<script setup>
-import { getCurrentInstance } from 'vue'
-let { proxy } = getCurrentInstance()
-const back = function () {
-  proxy.$router.back()
-}
-</script>

src/pages/system/json/routes.json

@@ -430,8 +430,7 @@
           "meta": { "title": "用户管理", "code": "auth.baas.setting.user",
             "element": "settings/user-management/index.vue",
             "level": 2,
-            "showInAsideMenu": true,
-            "fixed": true
+            "showInAsideMenu": true
           }
         },
         {

src/pages/system/views/cropped/admin/create.vue

-<template>
-  <div>create</div>
-</template>

src/pages/system/views/cropped/admin/edit.vue

-<template>
-  <div>edit</div>
-</template>

src/pages/system/views/cropped/admin/index.vue

-<template>
-  <div>index</div>
-</template>

src/pages/system/views/cropped/settings/user-management/index.vue

+<template>
+  <div class="body">
+    <el-table :data="tableData">
+      <el-table-column prop="name" label="用户名" min-width="80px" />
+      <el-table-column prop="phoneNum" label="手机号" min-width="80px" />
+      <el-table-column prop="mail" label="邮箱" min-width="80px" />
+      <el-table-column prop="roleList" label="角色" min-width="150px">
+        <template v-slot="{ row }">
+          <span v-for="item in row.roleList" :key="item.roleId" class="role">
+            {{ item.roleName }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="状态" width="150px">
+        <template v-slot="{ row }">
+          <el-switch
+            v-model="row.status"
+            :disabled="userStatusLoading || !hasPerm('setting.user.changestatus')"
+            class="switch"
+            active-value="1"
+            inactive-value="0"
+            active-text="启用"
+            inactive-text="禁用"
+            @change="handleChangeUserStatus(row)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column v-if="hasPerm('setting.user.modifyrole')" label="操作" min-width="80px" align="center">
+        <template v-slot="{ row }">
+          <el-button type="text" @click="handleChangeRole(row)">变更角色</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <g-pagination-com
+      v-model:page-index="userUserPagePostReq.pageIndex"
+      v-model:page-size="userUserPagePostReq.pageSize"
+      :total="totalPage"
+      :run="userPageRun"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { UserUserPage, UserUserPagePostReq } from '@shared/models/user-service/UserUserPage'
+import { useAuth } from '@shared/store/modules/auth'
+import { useUser } from '@shared/store/modules/user'
+import { computed, reactive } from 'vue'
+import { useRequest } from 'vue-request'
+import { UserUserStatus, UserUserStatusPutReq } from '@shared/models/user-service/UserUserStatus'
+import { UserRoleInfo } from '@shared/models/user-service/UserRoleInfo'
+import { GATEWAY_CODE } from '@shared/http/constants'
+import { MessageUtils } from '@shared/utils/message-utils'
+const authStore = useAuth()
+const userStore = useUser()
+const userUserPagePostReq = reactive(
+  new UserUserPagePostReq({
+    objectId: authStore.consoleInfo.consoleObjectId,
+    param: '',
+    pageIndex: 1,
+    pageSize: 10,
+    userId: userStore.userInfo.id,
+  }),
+)
+const {
+  data: userPageData,
+  loading: userPageLoading,
+  error: userPageError,
+  run: userPageRun,
+} = useRequest(() => UserUserPage.post(userUserPagePostReq))
+const tableData = computed(() => userPageData.value?.data?.list ?? [])
+const totalPage = computed(() => userPageData.value?.data?.totalPage ?? 0)
+
+const userUserStatusPutReq = new UserUserStatusPutReq({
+  objectId: authStore.consoleInfo.consoleObjectId,
+  status: '',
+  userId: userStore.userInfo.id,
+})
+const {
+  data: userStatusData,
+  loading: userStatusLoading,
+  error: userStatusError,
+  run: userStatusRun,
+} = useRequest(
+  () =>
+    UserUserStatus.put(userUserStatusPutReq).then(res => {
+      if (res.code === GATEWAY_CODE.success) {
+        userPageRun()
+      } else {
+        MessageUtils.warning(res.message)
+      }
+      return res
+    }),
+  {
+    manual: true,
+  },
+)
+
+const handleChangeUserStatus = (role: UserRoleInfo) => {
+  userUserStatusPutReq.status = role.status
+  userStatusRun()
+}
+
+const handleChangeRole = (role: UserRoleInfo) => {}
+</script>

src/pages/system/views/fixed/settings/user-management/index.vue

-<template>
-  <div></div>
-</template>
-<script lang="ts" setup>
-import { usePagination } from 'vue-request'
-import { UserUserPage, UserUserPagePostReq } from '@shared/models/user-service/UserUserPage'
-import { useAuth } from '@shared/store/modules/auth'
-import { useUser } from '@shared/store/modules/user'
-import { reactive } from 'vue'
-const authStore = useAuth()
-const userStore = useUser()
-const userUserPagePostReq = reactive(
-  new UserUserPagePostReq({
-    objectId: authStore.consoleInfo.consoleObjectId,
-    param: '',
-    pageIndex: 1,
-    pageSize: 10,
-    userId: userStore.userInfo.id,
-  }),
-)
-const { data, current, totalPage, loading, pageSize } = usePagination(() => UserUserPage.post(userUserPagePostReq), {
-  defaultParams: [],
-  pagination: {
-    currentKey: 'currPage',
-    pageSizeKey: 'pageSize',
-    totalKey: 'totalCount',
-  },
-})
-</script>

src/shared/components/global/g-pagination-com/index.vue

+<template>
+  <el-pagination
+    v-show="total > 0"
+    class="list_pagination"
+    background
+    v-model:current-page="pageIndex_"
+    :page-size="pageSize"
+    layout="total, sizes, prev, pager, next, jumper"
+    :total="total"
+    :page-sizes="pageSizeArr"
+    @current-change="handleNumChange"
+    @size-change="handleSizeChange"
+  />
+</template>
+
+<script lang="ts" setup>
+import { PropType, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useAuth } from '@shared/store/modules/auth'
+
+const props = defineProps({
+  total: {
+    type: Number,
+    default: 0,
+  },
+  pageIndex: {
+    type: Number,
+    default: 0,
+  },
+  pageSize: {
+    type: Number,
+    default: 5,
+  },
+  pageSizeList: {
+    type: Array as PropType<number[]>,
+  },
+  run: {
+    type: Function,
+    required: true,
+  },
+})
+const emit = defineEmits(['update:pageIndex', 'update:pageSize'])
+const $route = useRoute()
+const authStore = useAuth()
+const pageIndex_ = ref(props.pageIndex)
+const pageSizeArr = ref([5, 10, 15, 20])
+if ($route.name === 'app-market' && authStore.consoleInfo.consoleObjectId === '3') {
+  pageSizeArr.value = [3, 6, 9, 12]
+} else {
+  pageSizeArr.value = [5, 10, 15, 20]
+}
+if (props.pageSizeList) {
+  pageSizeArr.value = props.pageSizeList!
+}
+watch([props.pageIndex], newVal => {
+  pageIndex_.value = newVal[0]
+})
+const handleGetTableData = () => {
+  props.run()
+}
+const handleNumChange = val => {
+  emit('update:pageIndex', val)
+  handleGetTableData()
+}
+const handleSizeChange = val => {
+  emit('update:pageIndex', 1)
+  emit('update:pageSize', val)
+  handleGetTableData()
+}
+</script>
+
+<style scoped lang="scss">
+.list_pagination {
+  margin-top: 35px;
+  text-align: right;
+
+  :deep.btn-prev,
+  :deep.btn-next {
+    background: none;
+    border: 1px solid #d9d9d9;
+
+    &:hover {
+      color: #2555c6;
+    }
+  }
+
+  :deep.el-pager li {
+    //min-width: 32px;
+    //height: 32px;
+    //border-radius: 2px;
+    border: 1px solid #d9d9d9;
+    //margin-left: 10px;
+    background: none;
+    color: rgba(0, 0, 0, 0.65);
+
+    &.active + li {
+      border-left: 1px solid #d9d9d9;
+    }
+
+    &:not(.disabled):hover,
+    &.active,
+    &:hover {
+      color: #ffffff;
+      background: #1953cd;
+    }
+  }
+}
+</style>

src/shared/models/user-service/UserRoleInfo.ts

@@ -7,5 +7,5 @@ export class UserRoleInfo extends Model<UserRoleInfo> {
   //角色名称
   @JsonProperty() roleName: string
   //状态
-  @JsonProperty() status: number
+  @JsonProperty() status: string
 }

src/shared/models/user-service/UserUserPage.ts

@@ -24,4 +24,8 @@ export class UserUserPagePostReq extends PaginationParams<UserUserPagePostReq> {
   @JsonProperty() param: string
   @JsonProperty() status: number
   @JsonProperty() userId: string
+  constructor(payload: Partial<UserUserPagePostReq>) {
+    super(payload)
+    Object.assign(this, payload)
+  }
 }

src/shared/models/user-service/UserUserStatus.ts

@@ -16,12 +16,16 @@ export class UserUserStatus extends Model<UserUserStatus> {
 
 @Serializable()
 export class UserUserStatusPutReq extends Model<UserUserStatusPutReq> {
-  @JsonProperty() newUserId: number
-  @JsonProperty() objectId: string
-  @JsonProperty() orgName: string
-  @JsonProperty() param: string
-  @JsonProperty() roleIdList: number[]
+  @JsonProperty() newUserId?: number
+  @JsonProperty() objectId?: string
+  @JsonProperty() orgName?: string
+  @JsonProperty() param?: string
+  @JsonProperty() roleIdList?: number[]
   @JsonProperty() status: string
-  @JsonProperty() sysType: number
-  @JsonProperty() userId: number
+  @JsonProperty() sysType?: number
+  @JsonProperty() userId: string
+  constructor(payload: Partial<UserUserStatusPutReq>) {
+    super(payload)
+    Object.assign(this, payload)
+  }
 }