jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增角色列表

Browse Source
This commit is contained in:
xlsea
2025-05-09 23:26:09 +08:00
parent b70ddb31e9
commit 67b5af9892
25 changed files with 869 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/custom/form-tip.vue
View File

@ -19,7 +19,7 @@ defineProps<Props>();
</template>
<template #trigger>
<div class="cursor-pointer pr-3px">
<SvgIcon class="text-15px" icon="ep:warning" />
<SvgIcon class="text-15px" icon="ph:warning-circle-bold" />
</div>
</template>
</NTooltip>

6
src/components/custom/menu-tree-select.vue
View File

@ -1,5 +1,5 @@
<script setup lang="tsx">
import { ref, useAttrs } from 'vue';
import { useAttrs } from 'vue';
import type { TreeOption, TreeSelectProps } from 'naive-ui';
import { useLoading } from '@sa/hooks';
import { fetchGetMenuList } from '@/service/api/system';
@ -15,9 +15,9 @@ interface Props {
defineProps<Props>();
const value = defineModel<CommonType.IdType | null>('value', { required: false });
const options = defineModel<Api.System.MenuList>('options', { required: false, default: [] });
const attrs: TreeSelectProps = useAttrs();
const options = ref<Api.System.MenuList>([]);
const { loading, startLoading, endLoading } = useLoading();
async function getMenuList() {
@ -31,7 +31,7 @@ async function getMenuList() {
icon: 'material-symbols:home-outline-rounded',
children: handleTree(data, { idField: 'menuId', filterFn: item => item.menuType !== 'F' })
}
] as Api.System.Menu[];
] as Api.System.MenuList;
endLoading();
}

151
src/components/custom/menu-tree.vue Normal file
View File

@ -0,0 +1,151 @@
<script setup lang="tsx">
import { onMounted, ref, useAttrs } from 'vue';
import type { TreeOption, TreeSelectInst, TreeSelectProps } from 'naive-ui';
import { useBoolean } from '@sa/hooks';
import { fetchGetMenuList } from '@/service/api/system';
import { handleTree } from '@/utils/common';
import SvgIcon from '@/components/custom/svg-icon.vue';
defineOptions({ name: 'MenuTree' });
interface Props {
immediate?: boolean;
[key: string]: any;
}
const props = withDefaults(defineProps<Props>(), {
immediate: true
});
const { bool: expandAll } = useBoolean();
const { bool: cascade } = useBoolean(true);
const { bool: checkAll } = useBoolean();
const menuTreeRef = ref<TreeSelectInst | null>(null);
const value = defineModel<CommonType.IdType[]>('value', { required: false, default: [] });
const options = defineModel<Api.System.MenuList>('options', { required: false, default: [] });
const loading = defineModel<boolean>('loading', { required: false, default: false });
const attrs: TreeSelectProps = useAttrs();
async function getMenuList() {
loading.value = true;
const { error, data } = await fetchGetMenuList();
if (error) return;
options.value = [
{
menuId: 0,
menuName: '根目录',
icon: 'material-symbols:home-outline-rounded',
children: handleTree(data, { idField: 'menuId', filterFn: item => item.menuType !== 'F' })
}
] as Api.System.MenuList;
loading.value = false;
}
onMounted(() => {
if (props.immediate) {
getMenuList();
}
});
function renderPrefix({ option }: { option: TreeOption }) {
const renderLocalIcon = String(option.icon).startsWith('icon-');
const icon = renderLocalIcon ? undefined : String(option.icon);
const localIcon = renderLocalIcon ? String(option.icon).replace('icon-', 'menu-') : undefined;
return <SvgIcon icon={icon} localIcon={localIcon} />;
}
function getAllMenuIds(menu: Api.System.MenuList) {
const menuIds: CommonType.IdType[] = [];
menu.forEach(item => {
menuIds.push(item.menuId);
if (item.children) {
menuIds.push(...getAllMenuIds(item.children));
}
});
return menuIds;
}
function handleCheckedTreeNodeAll(checked: boolean) {
if (checked) {
value.value = getAllMenuIds(options.value);
return;
}
value.value = [];
}
function handleSubmit() {
const menuIds = [...value.value];
const indeterminateData = menuTreeRef.value?.getIndeterminateData();
if (cascade.value) {
const parentIds: string[] = indeterminateData?.keys.filter(item => !menuIds?.includes(String(item))) as string[];
menuIds?.push(...parentIds);
}
return menuIds;
}
defineExpose({
submit: handleSubmit,
refresh: getMenuList
});
</script>
<template>
<div class="w-full flex-col gap-12px">
<div class="w-full flex-center">
<NCheckbox v-model:checked="expandAll" :checked-value="true" :unchecked-value="false">展开/折叠</NCheckbox>
<NCheckbox
v-model:checked="checkAll"
:checked-value="true"
:unchecked-value="false"
@update:checked="handleCheckedTreeNodeAll"
>
全选/反选
</NCheckbox>
<NCheckbox v-model:checked="cascade" :checked-value="true" :unchecked-value="false">父子联动</NCheckbox>
</div>
<NSpin class="resource h-full w-full py-6px pl-3px" content-class="h-full" :show="loading">
<NTree
ref="menuTreeRef"
v-model:checked-keys="value"
multiple
checkable
key-field="menuId"
label-field="menuName"
:data="options"
:cascade="cascade"
:loading="loading"
virtual-scroll
:check-strategy="cascade ? 'child' : 'all'"
:default-expand-all="expandAll"
:default-expanded-keys="[0]"
:render-prefix="renderPrefix"
v-bind="attrs"
/>
</NSpin>
</div>
</template>
<style scoped lang="scss">
.resource {
border-radius: 6px;
border: 1px solid rgb(224, 224, 230);
.n-tree {
min-height: 200px;
max-height: 300px;
width: 100%;
height: 100%;
:deep(.n-tree__empty) {
min-height: 200px;
justify-content: center;
}
}
.n-empty {
justify-content: center;
}
}
</style>

12
src/constants/business.ts
View File

@ -116,3 +116,15 @@ export const ossAccessPolicyRecord: Record<Api.System.OssAccessPolicy, string> =
};
export const ossAccessPolicyOptions = transformRecordToOption(ossAccessPolicyRecord);
/** data scope */
export const dataScopeRecord: Record<Api.System.DataScope, string> = {
'1': '全部数据权限',
'2': '自定数据权限',
'3': '本部门数据权限',
'4': '本部门及以下数据权限',
'5': '仅本人数据权限',
'6': '部门及以下或本人数据权限'
};
export const dataScopeOptions = transformRecordToOption(dataScopeRecord);

1
src/router/elegant/imports.ts
View File

@ -38,6 +38,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
"system_oss-config": () => import("@/views/system/oss-config/index.vue"),
system_oss: () => import("@/views/system/oss/index.vue"),
system_post: () => import("@/views/system/post/index.vue"),
system_role: () => import("@/views/system/role/index.vue"),
system_tenant: () => import("@/views/system/tenant/index.vue"),
system_user: () => import("@/views/system/user/index.vue"),
tool_gen: () => import("@/views/tool/gen/index.vue"),

9
src/router/elegant/routes.ts
View File

@ -250,6 +250,15 @@ export const generatedRoutes: GeneratedRoute[] = [
i18nKey: 'route.system_post'
}
},
{
name: 'system_role',
path: '/system/role',
component: 'view.system_role',
meta: {
title: 'system_role',
i18nKey: 'route.system_role'
}
},
{
name: 'system_tenant',
path: '/system/tenant',

1
src/router/elegant/transform.ts
View File

@ -187,6 +187,7 @@ const routeMap: RouteMap = {
"system_oss": "/system/oss",
"system_oss-config": "/system/oss-config",
"system_post": "/system/post",
"system_role": "/system/role",
"system_tenant": "/system/tenant",
"system_user": "/system/user",
"tool": "/tool",

8
src/service/api/system/menu.ts
View File

@ -34,3 +34,11 @@ export function fetchDeleteMenu(menuId: CommonType.IdType) {
method: 'delete'
});
}
/** 获取角色菜单权限 */
export function fetchGetRoleMenuTreeSelect(roleId: CommonType.IdType) {
return request<Api.System.RoleMenuTreeSelect>({
url: `/system/menu/roleMenuTreeselect/${roleId}`,
method: 'get'
});
}

11
src/service/api/system/role.ts
View File

@ -27,8 +27,17 @@ export function fetchUpdateRole(data: Api.System.RoleOperateParams) {
});
}
/** 修改角色状态 */
export function fetchUpdateRoleStatus(data: Api.System.RoleOperateParams) {
return request<boolean>({
url: '/system/role/changeStatus',
method: 'put',
data
});
}
/** 批量删除角色信息 */
export function fetchDeleteRole(roleIds: CommonType.IdType[]) {
export function fetchBatchDeleteRole(roleIds: CommonType.IdType[]) {
return request<boolean>({
url: `/system/role/${roleIds.join(',')}`,
method: 'delete'

9
src/service/api/system/user.ts
View File

@ -34,6 +34,15 @@ export function fetchUpdateUser(data: Api.System.UserOperateParams) {
});
}
/** 修改用户状态 */
export function fetchUpdateUserStatus(data: Api.System.UserOperateParams) {
return request<boolean>({
url: '/system/user/changeStatus',
method: 'put',
data
});
}
/** 批量删除用户信息 */
export function fetchBatchDeleteUser(userIds: CommonType.IdType[]) {
return request<boolean>({

25
src/typings/api/system.api.d.ts vendored
View File

@ -10,10 +10,13 @@ declare namespace Api {
* backend api module: "system"
*/
namespace System {
/** data scope */
type DataScope = '1' | '2' | '3' | '4' | '5' | '6';
/** role */
type Role = Common.CommonRecord<{
/** 数据范围（1：全部数据权限 2：自定数据权限 3：本部门数据权限 4：本部门及以下数据权限） */
dataScope: string;
dataScope: DataScope;
/** 部门树选择项是否关联显示 */
deptCheckStrictly: boolean;
/** 用户是否存在此角色标识 默认不存在 */
@ -45,21 +48,19 @@ declare namespace Api {
type RoleOperateParams = CommonType.RecordNullable<
Pick<
Api.System.Role,
| 'roleId'
| 'roleName'
| 'roleKey'
| 'roleSort'
| 'dataScope'
| 'menuCheckStrictly'
| 'deptCheckStrictly'
| 'status'
| 'remark'
>
'roleId' | 'roleName' | 'roleKey' | 'roleSort' | 'menuCheckStrictly' | 'status' | 'remark'
> & { menuIds: CommonType.IdType[] }
>;
/** role list */
type RoleList = Common.PaginatingQueryRecord<Role>;
/** role menu tree select */
type RoleMenuTreeSelect = Common.CommonRecord<{
checkedKeys: CommonType.IdType[];
menus: MenuList;
}>;
/** all role */
type AllRole = Pick<Role, 'roleId' | 'roleName' | 'roleKey'>;
@ -261,6 +262,8 @@ declare namespace Api {
parentName: string;
/** 子菜单 */
children: MenuList;
id?: CommonType.IdType;
label?: string;
}>;
/** menu list */

3
src/typings/components.d.ts vendored
View File

@ -12,6 +12,7 @@ declare module 'vue' {
BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
BooleanTag: typeof import('./../components/custom/boolean-tag.vue')['default']
ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
copy: typeof import('./../components/custom/menu-tree-select copy.vue')['default']
CountTo: typeof import('./../components/custom/count-to.vue')['default']
DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
DictRadio: typeof import('./../components/custom/dict-radio.vue')['default']
@ -39,6 +40,7 @@ declare module 'vue' {
IconIcRoundUpload: typeof import('~icons/ic/round-upload')['default']
IconLocalBanner: typeof import('~icons/local/banner')['default']
'IconMaterialSymbols:download2Rounded': typeof import('~icons/material-symbols/download2-rounded')['default']
'IconMaterialSymbols:syncOutline': typeof import('~icons/material-symbols/sync-outline')['default']
'IconMaterialSymbols:upload2Rounded': typeof import('~icons/material-symbols/upload2-rounded')['default']
IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
@ -51,6 +53,7 @@ declare module 'vue' {
LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
LookForward: typeof import('./../components/custom/look-forward.vue')['default']
MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']
MenuTree: typeof import('./../components/custom/menu-tree.vue')['default']
MenuTreeSelect: typeof import('./../components/custom/menu-tree-select.vue')['default']
MonacoEditor: typeof import('./../components/common/monaco-editor.vue')['default']
NAlert: typeof import('naive-ui')['NAlert']

2
src/typings/elegant-router.d.ts vendored
View File

@ -41,6 +41,7 @@ declare module "@elegant-router/types" {
"system_oss": "/system/oss";
"system_oss-config": "/system/oss-config";
"system_post": "/system/post";
"system_role": "/system/role";
"system_tenant": "/system/tenant";
"system_user": "/system/user";
"tool": "/tool";
@ -127,6 +128,7 @@ declare module "@elegant-router/types" {
| "system_oss-config"
| "system_oss"
| "system_post"
| "system_role"
| "system_tenant"
| "system_user"
| "tool_gen"

20
src/views/_builtin/user-center/modules/user-avatar.vue
View File

@ -44,6 +44,7 @@ const options = reactive<CropperOptions>({
/** 编辑头像 */
function handleEdit() {
options.img = imageUrl.value;
showDrawer();
}
@ -86,6 +87,7 @@ async function handleCrop() {
if (!error) {
window.$message?.success('头像更新成功！');
imageUrl.value = URL.createObjectURL(blob);
authStore.userInfo.user!.avatar = imageUrl.value;
hideDrawer();
}
}, 'image/png');
@ -114,7 +116,7 @@ function handleClose() {
<NModal v-model:show="showModal" preset="card" title="修改头像" class="w-400px" @close="handleClose">
<div class="flex-col-center gap-20px py-20px">
<div v-if="options.img !== imageUrl" class="h-300px w-full">
<div class="h-300px w-full">
<Cropper
ref="cropperRef"
class="h-full bg-gray-100"
@ -122,25 +124,11 @@ function handleClose() {
:stencil-props="options.stencilProps"
/>
</div>
<img
v-else
:src="imageUrl"
alt="user-avatar"
class="h-200px w-200px border border-gray-200 rounded-full object-cover"
/>
<div class="flex gap-12px">
<NUpload accept=".jpg,.jpeg,.png,.gif" :max="1" :show-file-list="false" @before-upload="handleFileSelect">
<NButton class="min-w-100px">选择图片</NButton>
</NUpload>
<NButton
v-if="options.img !== imageUrl"
type="primary"
class="min-w-100px"
:loading="loading"
@click="handleCrop"
>
确认裁剪
</NButton>
<NButton type="primary" class="min-w-100px" :loading="loading" @click="handleCrop">确认裁剪</NButton>
</div>
</div>
</NModal>

2
src/views/system/menu/modules/menu-operate-drawer.vue
View File

@ -153,7 +153,7 @@ async function handleSubmit() {
} else if (model.menuType === 'C') {
component = humpToLine(model.component?.replaceAll('/', '_') || '');
} else if (model.menuType === 'M') {
component = model.parentId === 0 ? 'layout.base' : undefined;
component = 'layout.base';
}
// request

250
src/views/system/role/index.vue Normal file
View File

@ -0,0 +1,250 @@
<script setup lang="tsx">
import { NDivider, NTag } from 'naive-ui';
import { dataScopeRecord } from '@/constants/business';
import { fetchBatchDeleteRole, fetchGetRoleList, fetchUpdateRoleStatus } from '@/service/api/system/role';
import { useAppStore } from '@/store/modules/app';
import { useAuth } from '@/hooks/business/auth';
import { useDownload } from '@/hooks/business/download';
import { useTable, useTableOperate } from '@/hooks/common/table';
import { $t } from '@/locales';
import ButtonIcon from '@/components/custom/button-icon.vue';
import StatusSwitch from '@/components/custom/status-switch.vue';
import RoleOperateDrawer from './modules/role-operate-drawer.vue';
import RoleSearch from './modules/role-search.vue';
defineOptions({
name: 'RoleList'
});
const appStore = useAppStore();
const { download } = useDownload();
const { hasAuth } = useAuth();
const {
columns,
columnChecks,
data,
getData,
getDataByPage,
loading,
mobilePagination,
searchParams,
resetSearchParams
} = useTable({
apiFn: fetchGetRoleList,
apiParams: {
pageNum: 1,
pageSize: 10,
// if you want to use the searchParams in Form, you need to define the following properties, and the value is null
// the value can not be undefined, otherwise the property in Form will not be reactive
roleName: null,
roleKey: null,
status: null,
params: {}
},
columns: () => [
{
type: 'selection',
align: 'center',
width: 48
},
{
key: 'index',
title: $t('common.index'),
align: 'center',
width: 64
},
{
key: 'roleName',
title: '角色名称',
align: 'center',
minWidth: 120
},
{
key: 'roleKey',
title: '角色权限字符串',
align: 'center',
minWidth: 120
},
{
key: 'roleSort',
title: '显示顺序',
align: 'center',
minWidth: 120
},
{
key: 'dataScope',
title: '数据范围',
align: 'center',
minWidth: 120,
render: row => {
return <NTag type="info">{dataScopeRecord[row.dataScope]}</NTag>;
}
},
{
key: 'status',
title: '角色状态',
align: 'center',
minWidth: 120,
render(row) {
return (
<StatusSwitch
v-model:value={row.status}
disabled={row.roleId === 1}
info={row.roleKey}
onSubmitted={(value, callback) => handleStatusChange(row, value, callback)}
/>
);
}
},
{
key: 'createTime',
title: '创建时间',
align: 'center',
minWidth: 120
},
{
key: 'operate',
title: $t('common.operate'),
align: 'center',
width: 130,
render: row => {
if (row.roleId === 1) return null;
const divider = () => {
if (!hasAuth('system:role:edit') || !hasAuth('system:role:remove')) {
return null;
}
return <NDivider vertical />;
};
const editBtn = () => {
if (!hasAuth('system:role:edit')) {
return null;
}
return (
<ButtonIcon
text
type="primary"
icon="material-symbols:drive-file-rename-outline-outline"
tooltipContent={$t('common.edit')}
onClick={() => edit(row.roleId!)}
/>
);
};
const deleteBtn = () => {
if (!hasAuth('system:role:remove')) {
return null;
}
return (
<ButtonIcon
text
type="error"
icon="material-symbols:delete-outline"
tooltipContent={$t('common.delete')}
popconfirmContent={$t('common.confirmDelete')}
onPositiveClick={() => handleDelete(row.roleId!)}
/>
);
};
return (
<div class="flex-center gap-8px">
{editBtn()}
{divider()}
{deleteBtn()}
</div>
);
}
}
]
});
const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
useTableOperate(data, getData);
async function handleBatchDelete() {
// request
const { error } = await fetchBatchDeleteRole(checkedRowKeys.value);
if (error) return;
onBatchDeleted();
}
async function handleDelete(roleId: CommonType.IdType) {
// request
const { error } = await fetchBatchDeleteRole([roleId]);
if (error) return;
onDeleted();
}
async function edit(roleId: CommonType.IdType) {
handleEdit('roleId', roleId);
}
async function handleExport() {
download('/system/role/export', searchParams, `角色_${new Date().getTime()}.xlsx`);
}
/** 处理状态切换 */
async function handleStatusChange(
row: Api.System.Role,
value: Api.Common.EnableStatus,
callback: (flag: boolean) => void
) {
const { error } = await fetchUpdateRoleStatus({
roleId: row.roleId,
status: value
});
callback(!error);
if (!error) {
window.$message?.success('状态修改成功');
getData();
}
}
</script>
<template>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
<NCard title="角色列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
<template #header-extra>
<TableHeaderOperation
v-model:columns="columnChecks"
:disabled-delete="checkedRowKeys.length === 0"
:loading="loading"
:show-add="hasAuth('system:role:add')"
:show-delete="hasAuth('system:role:remove')"
:show-export="hasAuth('system:role:export')"
@add="handleAdd"
@delete="handleBatchDelete"
@export="handleExport"
@refresh="getData"
/>
</template>
<NDataTable
v-model:checked-row-keys="checkedRowKeys"
:columns="columns"
:data="data"
size="small"
:flex-height="!appStore.isMobile"
:scroll-x="962"
:loading="loading"
remote
:row-key="row => row.roleId"
:pagination="mobilePagination"
class="sm:h-full"
/>
<RoleOperateDrawer
v-model:visible="drawerVisible"
:operate-type="operateType"
:row-data="editingData"
@submitted="getDataByPage"
/>
</NCard>
</div>
</template>
<style scoped></style>

202
src/views/system/role/modules/role-operate-drawer.vue Normal file
View File

@ -0,0 +1,202 @@
<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue';
import { fetchCreateRole, fetchUpdateRole } from '@/service/api/system/role';
import { fetchGetRoleMenuTreeSelect } from '@/service/api/system';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { useDict } from '@/hooks/business/dict';
import { $t } from '@/locales';
import MenuTree from '@/components/custom/menu-tree.vue';
defineOptions({
name: 'RoleOperateDrawer'
});
interface Props {
/** the type of operation */
operateType: NaiveUI.TableOperateType;
/** the edit row data */
rowData?: Api.System.Role | null;
}
const props = defineProps<Props>();
interface Emits {
(e: 'submitted'): void;
}
const emit = defineEmits<Emits>();
const menuTreeRef = ref<InstanceType<typeof MenuTree> | null>(null);
const visible = defineModel<boolean>('visible', {
default: false
});
const { options: sysNormalDisableOptions } = useDict('sys_normal_disable');
const menuOptions = ref<Api.System.MenuList>([]);
const { formRef, validate, restoreValidation } = useNaiveForm();
const { createRequiredRule } = useFormRules();
const title = computed(() => {
const titles: Record<NaiveUI.TableOperateType, string> = {
add: '新增角色',
edit: '编辑角色'
};
return titles[props.operateType];
});
type Model = Api.System.RoleOperateParams;
const model: Model = reactive(createDefaultModel());
function createDefaultModel(): Model {
return {
menuIds: [],
roleName: '',
roleKey: '',
roleSort: 1,
menuCheckStrictly: true,
status: '0',
remark: ''
};
}
type RuleKey = Extract<keyof Model, 'roleId' | 'roleName' | 'roleKey' | 'status'>;
const rules: Record<RuleKey, App.Global.FormRule> = {
roleId: createRequiredRule('角色ID不能为空'),
roleName: createRequiredRule('角色名称不能为空'),
roleKey: createRequiredRule('角色权限字符串不能为空'),
status: createRequiredRule('角色状态不能为空')
};
async function handleUpdateModelWhenEdit() {
menuOptions.value = [];
model.menuIds = [];
if (props.operateType === 'add') {
menuTreeRef.value?.refresh();
Object.assign(model, createDefaultModel());
return;
}
if (props.operateType === 'edit' && props.rowData) {
Object.assign(model, props.rowData);
const { data, error } = await fetchGetRoleMenuTreeSelect(model.roleId!);
if (error) return;
model.menuIds = data.checkedKeys;
prepareMenuOptions(data.menus);
menuOptions.value = data.menus;
}
}
function prepareMenuOptions(menus: Api.System.MenuList) {
menus.forEach(menu => {
menu.menuId = menu.id!;
menu.menuName = menu.label!;
if (menu.children) {
prepareMenuOptions(menu.children);
}
});
}
function closeDrawer() {
visible.value = false;
}
async function handleSubmit() {
await validate();
const { roleId, roleName, roleKey, roleSort, menuCheckStrictly, status, remark, menuIds } = model;
// request
if (props.operateType === 'add') {
const { error } = await fetchCreateRole({
roleName,
roleKey,
roleSort,
menuCheckStrictly,
status,
remark,
menuIds
});
if (error) return;
}
if (props.operateType === 'edit') {
const { error } = await fetchUpdateRole({
roleId,
roleName,
roleKey,
roleSort,
menuCheckStrictly,
status,
remark,
menuIds
});
if (error) return;
}
window.$message?.success($t('common.updateSuccess'));
closeDrawer();
emit('submitted');
}
watch(visible, () => {
if (visible.value) {
handleUpdateModelWhenEdit();
restoreValidation();
}
});
</script>
<template>
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
<NDrawerContent :title="title" :native-scrollbar="false" closable>
<NForm ref="formRef" :model="model" :rules="rules">
<NFormItem label="角色名称" path="roleName">
<NInput v-model:value="model.roleName" placeholder="请输入角色名称" />
</NFormItem>
<NFormItem path="roleKey">
<template #label>
<div class="flex-center">
<FormTip content="控制器中定义的权限字符，如：@SaCheckRole('admin')" />
<span class="pl-3px">权限字符</span>
</div>
</template>
<NInput v-model:value="model.roleKey" placeholder="请输入权限字符" />
</NFormItem>
<NFormItem label="显示顺序" path="roleSort">
<NInputNumber v-model:value="model.roleSort" placeholder="请输入显示顺序" />
</NFormItem>
<NFormItem label="角色状态" path="status">
<NRadioGroup v-model:value="model.status">
<NRadio v-for="item in sysNormalDisableOptions" :key="item.value" :value="item.value" :label="item.label" />
</NRadioGroup>
</NFormItem>
<NFormItem label="菜单权限" path="menuIds" class="pr-24px">
<MenuTree
ref="menuTreeRef"
v-model:value="model.menuIds"
v-model:options="menuOptions"
v-model:cascade="model.menuCheckStrictly"
:immediate="operateType === 'add'"
/>
</NFormItem>
<NFormItem label="备注" path="remark">
<NInput v-model:value="model.remark" :rows="3" type="textarea" placeholder="请输入备注" />
</NFormItem>
</NForm>
<template #footer>
<NSpace :size="16">
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
</NSpace>
</template>
</NDrawerContent>
</NDrawer>
</template>
<style scoped></style>

96
src/views/system/role/modules/role-search.vue Normal file
View File

@ -0,0 +1,96 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useNaiveForm } from '@/hooks/common/form';
import { useDict } from '@/hooks/business/dict';
import { $t } from '@/locales';
defineOptions({
name: 'RoleSearch'
});
interface Emits {
(e: 'reset'): void;
(e: 'search'): void;
}
const emit = defineEmits<Emits>();
const { formRef, validate, restoreValidation } = useNaiveForm();
const dateRangeCreateTime = ref<[string, string] | null>(null);
const model = defineModel<Api.System.RoleSearchParams>('model', { required: true });
const { options: sysNormalDisableOptions } = useDict('sys_normal_disable');
async function reset() {
dateRangeCreateTime.value = null;
Object.assign(model.value.params!, {});
await restoreValidation();
emit('reset');
}
async function search() {
await validate();
if (dateRangeCreateTime.value?.length) {
model.value.params!.beginTime = `${dateRangeCreateTime.value[0]} 00:00:00`;
model.value.params!.endTime = `${dateRangeCreateTime.value[1]} 23:59:59`;
}
emit('search');
}
</script>
<template>
<NCard :bordered="false" size="small" class="card-wrapper">
<NCollapse>
<NCollapseItem :title="$t('common.search')" name="user-search">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 s:12 m:6" label="角色名称" path="roleName" class="pr-24px">
<NInput v-model:value="model.roleName" placeholder="请输入角色名称" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="权限字符" path="roleKey" class="pr-24px">
<NInput v-model:value="model.roleKey" placeholder="请输入权限字符" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="角色状态" path="status" class="pr-24px">
<NSelect
v-model:value="model.status"
placeholder="请选择角色状态"
:options="sysNormalDisableOptions"
clearable
/>
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="创建时间" path="createTime" class="pr-24px">
<NDatePicker
v-model:formatted-value="dateRangeCreateTime"
update-value-on-close
class="w-full"
type="daterange"
value-format="yyyy-MM-dd"
clearable
/>
</NFormItemGi>
<NFormItemGi span="24" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCollapseItem>
</NCollapse>
</NCard>
</template>
<style scoped></style>

3
src/views/system/tenant/index.vue
View File

@ -220,6 +220,9 @@ async function handleExport() {
>
<template #prefix>
<NButton v-if="isSuperAdmin" type="warning" ghost size="small" @click="handleSyncTenantDict">
<template #icon>
<icon-material-symbols:sync-outline />
</template>
同步租户字典
</NButton>
</template>

33
src/views/system/user/index.vue
View File

@ -2,14 +2,14 @@
import { ref } from 'vue';
import { NButton, NDivider } from 'naive-ui';
import { useBoolean, useLoading } from '@sa/hooks';
import { fetchBatchDeleteUser, fetchGetDeptTree, fetchGetUserList } from '@/service/api/system';
import { fetchBatchDeleteUser, fetchGetDeptTree, fetchGetUserList, fetchUpdateUserStatus } from '@/service/api/system';
import { useAppStore } from '@/store/modules/app';
import { useTable, useTableOperate } from '@/hooks/common/table';
import { useDict } from '@/hooks/business/dict';
import { useAuth } from '@/hooks/business/auth';
import ButtonIcon from '@/components/custom/button-icon.vue';
import DictTag from '@/components/custom/dict-tag.vue';
import { $t } from '@/locales';
import StatusSwitch from '@/components/custom/status-switch.vue';
import UserOperateDrawer from './modules/user-operate-drawer.vue';
import UserImportModal from './modules/user-import-modal.vue';
import UserSearch from './modules/user-search.vue';
@ -19,7 +19,6 @@ defineOptions({
});
useDict('sys_user_sex');
useDict('sys_normal_disable');
const { hasAuth } = useAuth();
const appStore = useAppStore();
@ -96,7 +95,14 @@ const {
align: 'center',
minWidth: 80,
render(row) {
return <DictTag size="small" value={row.status} dictCode="sys_normal_disable" />;
return (
<StatusSwitch
v-model:value={row.status}
disabled={row.userId === 1}
info={row.userName}
onSubmitted={(value, callback) => handleStatusChange(row, value, callback)}
/>
);
}
},
{
@ -211,6 +217,25 @@ function handleResetTreeData() {
function handleImport() {
openImportModal();
}
/** 处理状态切换 */
async function handleStatusChange(
row: Api.System.User,
value: Api.Common.EnableStatus,
callback: (flag: boolean) => void
) {
const { error } = await fetchUpdateUserStatus({
userId: row.userId,
status: value
});
callback(!error);
if (!error) {
window.$message?.success('状态修改成功');
getData();
}
}
</script>
<template>