auth/auth-web
auth
/
auth-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Bunny 2024-10-04 17:10:24 +08:00
parent f1493875ee
commit 3342c0a07f
8 changed files with 206 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/views/system/adminUser/index.vue
View File

@ -1,119 +1,44 @@
<script lang="tsx" setup>
import { computed, onMounted, reactive, ref } from 'vue';
<script lang="ts" setup>
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 { deviceDetection } from '@pureadmin/utils';
import CropperPreview from '@/components/CropperPreview';
import AssignUserToRole from '@/views/system/adminUser/assign-user-to-role.vue';
import { useRoleStore } from '@/store/system/role';
import { useAdminUserStore } from '@/store/system/adminUser';
import { ErrorTypes } from 'xgplayer/es/error';
const tableRef = ref();
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: '',
});
const buttonClass = computed(() => ['!h-[20px]', 'reset-margin', '!text-gray-500', 'dark:!text-white', 'dark:hover:!text-primary']);
/** 上传头像 */
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(),
});
/**
* * 当前页改变时
*/
const onCurrentPageChange = async (value: number) => {
adminUserStore.pagination.currentPage = value;
await onSearch();
};
/**
* * 重置密码
* @param row
* * 当分页发生变化
* @param value
*/
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
*/
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();
},
});
const onPageSizeChange = async (value: number) => {
adminUserStore.pagination.pageSize = value;
await onSearch();
};
/**
@ -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 }">

0
src/components/Table/ResetPasswords.vue → src/views/system/adminUser/reset-passwords.vue
View File

96
src/views/system/adminUser/utils/hooks.ts → src/views/system/adminUser/utils/hooks.tsx
View File

@ -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();
},
});
};

24
src/views/system/dept/index.vue
View File

@ -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>

20
src/views/system/menuIcon/index.vue
View File

@ -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 }">

9
src/views/system/menuIcon/menu-icon-dialog.vue
View File

@ -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>

20
src/views/system/power/index.vue
View File

@ -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 }">

20
src/views/system/role/index.vue
View File

@ -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 }">