fixbug: 🐛 修复不能分页查询问题

src/views/system/adminUser/index.vue

@@ -1,119 +1,44 @@
-<script lang="tsx" setup>
+<script lang="ts" setup>
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { columns } from '@/views/system/adminUser/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import PureTable from '@pureadmin/table';
-import { onAdd, onDelete, onSearch, onUpdate, updateUserStatus } from '@/views/system/adminUser/utils/hooks';
+import { onAdd, onAssignRolesToUser, onDelete, onResetPassword, onSearch, onUpdate, onUploadAvatar, updateUserStatus } from '@/views/system/adminUser/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';
 import { selectUserinfo } from '@/components/Table/Userinfo/columns';
 import { $t } from '@/plugins/i18n';
-import { useAdminUserStore } from '@/store/system/adminUser.ts';
-import ResetPasswordDialog from '@/components/Table/ResetPasswords.vue';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
 import userAvatar from '@/assets/user.jpg';
 import Upload from '@iconify-icons/ri/upload-line';
 import Role from '@iconify-icons/ri/admin-line';
 import Password from '@iconify-icons/ri/lock-password-line';
 import More from '@iconify-icons/ep/more-filled';
-import { addDialog } from '@/components/BaseDialog/index';
+import { useAdminUserStore } from '@/store/system/adminUser';
-import { deviceDetection } from '@pureadmin/utils';
+import { ErrorTypes } from 'xgplayer/es/error';
-import CropperPreview from '@/components/CropperPreview';
-import AssignUserToRole from '@/views/system/adminUser/assign-user-to-role.vue';
-import { useRoleStore } from '@/store/system/role';
 
 const tableRef = ref();
 const formRef = ref();
-const cropRef = ref();
-const assignRolesRef = ref();
-const roleStore = useRoleStore();
-// 上传头像信息
-const avatarInfo = ref();
 const adminUserStore = useAdminUserStore();
-// 重置密码表单校验Ref
+const buttonClass = computed(() => ['!h-[20px]', 'reset-margin', '!text-gray-500', 'dark:!text-white', 'dark:hover:!text-primary']);
-const ruleFormByRestPasswordRef = ref();
-// 重置密码表单
-const restPasswordForm = reactive({
-	userId: void 0,
-	password: '',
-});
 
-/** 上传头像 */
+/**
-const onUploadAvatar = (row: any) => {
+ * * 当前页改变时
-	addDialog({
+ */
-		title: '裁剪、上传头像',
+const onCurrentPageChange = async (value: number) => {
-		width: '40%',
+	adminUserStore.pagination.currentPage = value;
-		closeOnClickModal: false,
-		fullscreen: deviceDetection(),
-		contentRenderer: () =>
-			h(CropperPreview, {
-				ref: cropRef,
-				imgSrc: row.avatar || userAvatar,
-				onCropper: info => (avatarInfo.value = info),
-			}),
-		beforeSure: async done => {
-			console.log('裁剪后的图片信息：', avatarInfo.value);
-			// 根据实际业务使用avatarInfo.value和row里的某些字段去调用上传头像接口即可
-			done();
 	await onSearch();
-		},
-		closeCallBack: () => cropRef.value.hidePopover(),
-	});
 };
 
 /**
- * * 重置密码
+ * * 当分页发生变化
- * @param row
+ * @param value
  */
-const onResetPassword = (row: any) => {
+const onPageSizeChange = async (value: number) => {
-	addDialog({
+	adminUserStore.pagination.pageSize = value;
-		title: `重置 ${row.username} 用户的密码`,
+	await onSearch();
-		width: '30%',
-		draggable: true,
-		closeOnClickModal: false,
-		fullscreenIcon: true,
-		destroyOnClose: true,
-		contentRenderer: () => <ResetPasswordDialog ref={ruleFormByRestPasswordRef} form={restPasswordForm} />,
-		beforeSure: (done: any) => {
-			ruleFormByRestPasswordRef.value.ruleFormRef.validate(async (valid: any) => {
-				if (valid) {
-					// 更新用户密码
-					const data = { userId: row.id, password: restPasswordForm.password };
-					const result = await adminUserStore.updateAdminUserPasswordByManager(data);
-
-					// 更新成功关闭弹窗
-					if (!result) return;
-					done();
-				}
-			});
-		},
-	});
-};
-
-/**
- * 为用户分配角色
- * @param row
- */
-const onAssignRolesToUser = (row: any) => {
-	addDialog({
-		title: `为 ${row.username} 分配角色`,
-		width: '30%',
-		draggable: true,
-		closeOnClickModal: false,
-		fullscreenIcon: true,
-		contentRenderer: () => <AssignUserToRole ref={assignRolesRef} userId={row.id} />,
-		beforeSure: async (done: any) => {
-			// 分配用户角色
-			const data = { userId: row.id, roleIds: assignRolesRef.value.assignRoles };
-			const result = await roleStore.assignRolesToUsers(data);
-
-			// 更新成功关闭弹窗
-			if (!result) return;
-			done();
-		},
-	});
 };
 
 /**
@@ -126,11 +51,6 @@ const resetForm = async formEl => {
 	await onSearch();
 };
 
-/**
- * * 按钮类
- */
-const buttonClass = computed(() => ['!h-[20px]', 'reset-margin', '!text-gray-500', 'dark:!text-white', 'dark:hover:!text-primary']);
-
 onMounted(() => {
 	onSearch();
 });
@@ -179,6 +99,7 @@ onMounted(() => {
 					:data="adminUserStore.datalist"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
 					:loading="adminUserStore.loading"
+					:pagination="adminUserStore.pagination"
 					:size="size"
 					adaptive
 					align-whole="center"
@@ -187,6 +108,8 @@ onMounted(() => {
 					row-key="id"
 					showOverflowTooltip
 					table-layout="auto"
+					@page-size-change="onPageSizeChange"
+					@page-current-change="onCurrentPageChange"
 				>
 					<!-- 显示头像 -->
 					<template #avatar="{ row }">

src/views/system/adminUser/utils/hooks.tsx

@@ -1,15 +1,31 @@
 import { addDialog } from '@/components/BaseDialog/index';
 import AdminUserDialog from '@/views/system/adminUser/admin-user-dialog.vue';
 import { useAdminUserStore } from '@/store/system/adminUser.ts';
-import { h, ref } from 'vue';
+import { h, reactive, ref } from 'vue';
 import { messageBox } from '@/utils/message';
 import type { FormItemProps } from '@/views/system/adminUser/utils/types';
 import { $t } from '@/plugins/i18n';
 import { isAddUserinfo } from '@/views/system/adminUser/utils/columns';
+import { useRoleStore } from '@/store/system/role';
+import ResetPasswordDialog from '@/views/system/adminUser/reset-passwords.vue';
+import { deviceDetection } from '@pureadmin/utils';
+import CropperPreview from '@/components/CropperPreview';
+import AssignUserToRole from '@/views/system/adminUser/assign-user-to-role.vue';
 
 export const formRef = ref();
-
+const cropRef = ref();
+const assignRolesRef = ref();
+const roleStore = useRoleStore();
+// 上传头像信息
+const avatarInfo = ref();
 const adminUserStore = useAdminUserStore();
+// 重置密码表单校验Ref
+const ruleFormByRestPasswordRef = ref();
+// 重置密码表单
+const restPasswordForm = reactive({
+	userId: void 0,
+	password: '',
+});
 
 /**
  * * 搜索初始化用户信息
@@ -139,3 +155,79 @@ export const updateUserStatus = async (row: any) => {
 	if (!result) return;
 	await onSearch();
 };
+
+/* 上传头像 */
+export const onUploadAvatar = (row: any) => {
+	addDialog({
+		title: '裁剪、上传头像',
+		width: '40%',
+		closeOnClickModal: false,
+		fullscreen: deviceDetection(),
+		contentRenderer: () =>
+			h(CropperPreview, {
+				ref: cropRef,
+				imgSrc: row.avatar || userAvatar,
+				onCropper: info => (avatarInfo.value = info),
+			}),
+		beforeSure: async done => {
+			console.log('裁剪后的图片信息：', avatarInfo.value);
+			// 根据实际业务使用avatarInfo.value和row里的某些字段去调用上传头像接口即可
+			done();
+			await onSearch();
+		},
+		closeCallBack: () => cropRef.value.hidePopover(),
+	});
+};
+
+/**
+ * * 重置密码
+ * @param row
+ */
+export const onResetPassword = (row: any) => {
+	addDialog({
+		title: `重置 ${row.username} 用户的密码`,
+		width: '30%',
+		draggable: true,
+		closeOnClickModal: false,
+		fullscreenIcon: true,
+		destroyOnClose: true,
+		contentRenderer: () => <ResetPasswordDialog ref={ruleFormByRestPasswordRef} form={restPasswordForm} />,
+		beforeSure: (done: any) => {
+			ruleFormByRestPasswordRef.value.ruleFormRef.validate(async (valid: any) => {
+				if (valid) {
+					// 更新用户密码
+					const data = { userId: row.id, password: restPasswordForm.password };
+					const result = await adminUserStore.updateAdminUserPasswordByManager(data);
+
+					// 更新成功关闭弹窗
+					if (!result) return;
+					done();
+				}
+			});
+		},
+	});
+};
+
+/**
+ * 为用户分配角色
+ * @param row
+ */
+export const onAssignRolesToUser = (row: any) => {
+	addDialog({
+		title: `为 ${row.username} 分配角色`,
+		width: '30%',
+		draggable: true,
+		closeOnClickModal: false,
+		fullscreenIcon: true,
+		contentRenderer: () => <AssignUserToRole ref={assignRolesRef} userId={row.id} />,
+		beforeSure: async (done: any) => {
+			// 分配用户角色
+			const data = { userId: row.id, roleIds: assignRolesRef.value.assignRoles };
+			const result = await roleStore.assignRolesToUsers(data);
+
+			// 更新成功关闭弹窗
+			if (!result) return;
+			done();
+		},
+	});
+};

src/views/system/dept/index.vue

@@ -17,6 +17,27 @@ const tableRef = ref();
 const formRef = ref();
 const deptStore = useDeptStore();
 
+/**
+ * * 当前页改变时
+ */
+const onCurrentPageChange = async (value: number) => {
+	deptStore.pagination.currentPage = value;
+	await onSearch();
+};
+
+/**
+ * * 当分页发生变化
+ * @param value
+ */
+const onPageSizeChange = async (value: number) => {
+	deptStore.pagination.pageSize = value;
+	await onSearch();
+};
+
+/**
+ * 重置表单
+ * @param formEl
+ */
 const resetForm = async formEl => {
 	if (!formEl) return;
 	formEl.resetFields();
@@ -62,6 +83,7 @@ onMounted(() => {
 					:data="deptStore.datalist"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
 					:loading="deptStore.loading"
+					:pagination="deptStore.pagination"
 					:size="size"
 					adaptive
 					align-whole="center"
@@ -70,6 +92,8 @@ onMounted(() => {
 					row-key="id"
 					showOverflowTooltip
 					table-layout="auto"
+					@page-size-change="onPageSizeChange"
+					@page-current-change="onCurrentPageChange"
 				>
 					<template #createUser="{ row }">
 						<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>

src/views/system/menuIcon/index.vue

@@ -17,6 +17,23 @@ const tableRef = ref();
 const formRef = ref();
 const menuIconStore = useMenuIconStore();
 
+/**
+ * * 当前页改变时
+ */
+const onCurrentPageChange = async (value: number) => {
+	menuIconStore.pagination.currentPage = value;
+	await onSearch();
+};
+
+/**
+ * * 当分页发生变化
+ * @param value
+ */
+const onPageSizeChange = async (value: number) => {
+	menuIconStore.pagination.pageSize = value;
+	await onSearch();
+};
+
 /**
  * * 选择多行
  * @param rows
@@ -72,6 +89,7 @@ onMounted(() => {
 					:data="menuIconStore.datalist"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
 					:loading="menuIconStore.loading"
+					:pagination="menuIconStore.pagination"
 					:size="size"
 					adaptive
 					align-whole="center"
@@ -80,6 +98,8 @@ onMounted(() => {
 					row-key="id"
 					showOverflowTooltip
 					table-layout="auto"
+					@page-size-change="onPageSizeChange"
+					@page-current-change="onCurrentPageChange"
 					@selection-change="onSelectionChange"
 				>
 					<template #iconName="{ row }">

src/views/system/menuIcon/menu-icon-dialog.vue

@@ -25,10 +25,17 @@ defineExpose({ formRef });
 			<el-input v-model="form.iconName" autocomplete="off" type="text" />
 		</el-form-item>
 
-		<el-form-item :label="$t('menuIcon_preview')">
+		<el-form-item v-show="form.iconName" :label="$t('menuIcon_preview')">
 			<div class="flex justify-center">
 				<component :is="useRenderIcon(form.iconName)" class="flex justify-center" style="font-size: 30px" />
 			</div>
 		</el-form-item>
+
+		<!-- icon 官网 -->
+		<el-form-item :label="$t('systemMenuIcon.officialWebsite')">
+			<el-link :title="$t('systemMenuIcon.officialWebsite')" :underline="false" href="https://icon-sets.iconify.design/" target="_blank" type="primary">
+				{{ $t('systemMenuIcon.officialWebsite') }}
+			</el-link>
+		</el-form-item>
 	</el-form>
 </template>

src/views/system/power/index.vue

@@ -17,6 +17,23 @@ const tableRef = ref();
 const formRef = ref();
 const powerStore = usePowerStore();
 
+/**
+ * * 当前页改变时
+ */
+const onCurrentPageChange = async (value: number) => {
+	powerStore.pagination.currentPage = value;
+	await onSearch();
+};
+
+/**
+ * * 当分页发生变化
+ * @param value
+ */
+const onPageSizeChange = async (value: number) => {
+	powerStore.pagination.pageSize = value;
+	await onSearch();
+};
+
 /**
  * * 选择多行
  * @param rows
@@ -82,6 +99,7 @@ onMounted(() => {
 					:data="powerStore.datalist"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
 					:loading="powerStore.loading"
+					:pagination="powerStore.pagination"
 					:size="size"
 					adaptive
 					align-whole="center"
@@ -90,6 +108,8 @@ onMounted(() => {
 					row-key="id"
 					showOverflowTooltip
 					table-layout="auto"
+					@page-size-change="onPageSizeChange"
+					@page-current-change="onCurrentPageChange"
 					@selection-change="onSelectionChange"
 				>
 					<template #createUser="{ row }">

src/views/system/role/index.vue

@@ -17,6 +17,23 @@ const tableRef = ref();
 const formRef = ref();
 const roleStore = useRoleStore();
 
+/**
+ * * 当前页改变时
+ */
+const onCurrentPageChange = async (value: number) => {
+	roleStore.pagination.currentPage = value;
+	await onSearch();
+};
+
+/**
+ * * 当分页发生变化
+ * @param value
+ */
+const onPageSizeChange = async (value: number) => {
+	roleStore.pagination.pageSize = value;
+	await onSearch();
+};
+
 /**
  * * 选择多行
  * @param rows
@@ -73,6 +90,7 @@ onMounted(() => {
 					:data="roleStore.datalist"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
 					:loading="roleStore.loading"
+					:pagination="roleStore.pagination"
 					:size="size"
 					adaptive
 					align-whole="center"
@@ -81,6 +99,8 @@ onMounted(() => {
 					row-key="id"
 					showOverflowTooltip
 					table-layout="auto"
+					@page-size-change="onPageSizeChange"
+					@page-current-change="onCurrentPageChange"
 					@selection-change="onSelectionChange"
 				>
 					<template #createUser="{ row }">