czg_team
/
cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改菜单管理页面，角色管理页面，修改后台返回的路由数据适配项目

This commit is contained in:
YeMingfei666 2025-02-17 18:31:33 +08:00
parent 96290b97da
commit 964aab217d
9 changed files with 382 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/account/menu.ts
View File

@ -21,7 +21,7 @@ const MenuApi = {
return request<any, MenuVO>({
url: `${baseURL}/detail`,
method: "get",
data: { id }
params: { id }
});
},
add(data: addRequest) {
@ -195,7 +195,7 @@ export interface editRequest {
/**
* 上级菜单，不传递则为顶级菜单
*/
pid?: number;
pid: number | string | null;
title: string;
[property: string]: any;
}

18
src/api/account/role.ts
View File

@ -17,20 +17,29 @@ const RoleApi = {
data,
});
},
update(data: editRequest) {
return request<any, editResponse>({
update(id: number | string | null, data: editRequest) {
const requestData = { ...data, id };
return request<any>({
url: `${baseURL}`,
method: "put",
data,
data: requestData,
});
},
delete(data: delRequest) {
return request<any, delResponse>({
url: `${baseURL}`,
method: "put",
method: "delete",
data,
});
},
// 获取角色对应的菜单id
getMenu(id: number) {
return request<any>({
url: `${baseURL}/menu`,
method: "get",
params: { id },
});
},
};
export default RoleApi;
@ -226,3 +235,4 @@ export interface delResponse {
[property: string]: any;
}
/** delete end */

2
src/api/system/user.ts
View File

@ -216,7 +216,7 @@ export default UserAPI;
export interface UserInfo {
/** 用户ID */
userId?: number;
id?: number | string;
/** 用户名 */
username?: string;

47
src/store/modules/permission.ts
View File

@ -4,6 +4,7 @@ import { store } from "@/store";
import router from "@/router";
import MenuAPI, { type RouteVO } from "@/api/account/menu";
const isTest = true//是否是本地调试
const modules = import.meta.glob("../../views/**/**.vue");
const Layout = () => import("@/layout/index.vue");
@ -16,6 +17,8 @@ export const usePermissionStore = defineStore("permission", () => {
// 路由是否加载完成
const isRoutesLoaded = ref(false);
/**
* 获取后台动态路由数据，解析并注册到全局路由
*
@ -25,12 +28,18 @@ export const usePermissionStore = defineStore("permission", () => {
return new Promise<RouteRecordRaw[]>((resolve, reject) => {
MenuAPI.getRoutes()
.then((data) => {
// const dynamicRoutes = parseDynamicRoutes(data);
// routes.value = [...constantRoutes, ...dynamicRoutes];
// isRoutesLoaded.value = true;
// resolve(dynamicRoutes);
isRoutesLoaded.value = true;
resolve(constantRoutes);
if (!isTest) {
const dynamicRoutes = parseDynamicRoutes(data.filter(v => v.type == 0));
routes.value = [...constantRoutes, ...dynamicRoutes];
console.log(routes.value);
isRoutesLoaded.value = true;
resolve(dynamicRoutes);
} else {
isRoutesLoaded.value = true;
resolve(constantRoutes);
}
})
.catch((error) => {
reject(error);
@ -55,7 +64,9 @@ export const usePermissionStore = defineStore("permission", () => {
*/
const resetRouter = () => {
// 清空本地存储的路由和菜单数据
// routes.value = [];
if (!isTest) {
routes.value = [];
}
routes.value = constantRoutes;
mixedLayoutLeftRoutes.value = [];
// 从 Vue Router 中移除所有动态注册的路由
@ -90,21 +101,33 @@ export const usePermissionStore = defineStore("permission", () => {
*/
const parseDynamicRoutes = (rawRoutes: RouteVO[]): RouteRecordRaw[] => {
const parsedRoutes: RouteRecordRaw[] = [];
rawRoutes.forEach((route) => {
const normalizedRoute = { ...route } as RouteRecordRaw;
console.log(route.path)
const normalizedRoute = {
path: route.path,
meta: {
title: route.title,
icon: route.icon,
keepAlive: route.cache,
alwaysShow: route.path && route.path.startsWith('/') ? true : false,
hidden: route.hidden,
},
children: route.children,
component: route.component,
} as RouteRecordRaw;
// 处理组件路径
normalizedRoute.component =
normalizedRoute.component?.toString() === "Layout"
!normalizedRoute.component
? Layout
: modules[`../../views/${normalizedRoute.component}.vue`] ||
modules["../../views/error-page/404.vue"];
modules["../../views/error-page/404.vue"];
// 递归解析子路由
if (normalizedRoute.children) {
// normalizedRoute.redirect = (!normalizedRoute.redirect && route.children.length <= 1) ? normalizedRoute.children[0].path : normalizedRoute.path
normalizedRoute.children = parseDynamicRoutes(route.children);
}
console.log(normalizedRoute)
parsedRoutes.push(normalizedRoute);
});

12
src/utils/request.ts
View File

@ -4,7 +4,6 @@ import { useUserStoreHook } from "@/store/modules/user";
import { ResultEnum } from "@/enums/ResultEnum";
import { getToken } from "@/utils/auth";
import router from "@/router";
// 创建 axios 实例
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API,
@ -23,6 +22,7 @@ service.interceptors.request.use(
} else {
delete config.headers.token;
}
config.headers.shopId = useUserStoreHook().userInfo.id;
return config;
},
(error) => Promise.reject(error)
@ -37,6 +37,16 @@ service.interceptors.response.use(
}
const { code, data, msg } = response.data;
if (data) {
// 处理后台返回分页相关数据为字符串类型时，elementui组件警告
const kes = ['pageNumber', 'pageSize', 'totalPage', 'totalRow'];
const keys = Object.keys(data);
for (let i of kes) {
if (keys.includes(i)) {
data[i] = data[i] * 1;
}
}
}
if (code === ResultEnum.SUCCESS || code === undefined || code === null) {
return data ? data : response.data;
}

190
src/views/admim/system/menu/index.vue
View File

@ -48,47 +48,67 @@
<el-table-column label="图标" align="center" width="80">
<template #default="scope">
<div v-if="scope.row.icon" :class="`i-svg:${scope.row.icon}`" />
<template v-if="scope.row.icon && scope.row.icon.startsWith('el-icon')">
<el-icon style="vertical-align: -0.15em">
<component :is="scope.row.icon.replace('el-icon-', '')" />
</el-icon>
</template>
<template v-else-if="scope.row.icon">
<svg-icon :icon-class="scope.row.icon" />
</template>
</template>
</el-table-column>
<el-table-column label="类型" align="center" width="80">
<template #default="scope">
<el-tag
v-if="scope.row.type === MenuTypeEnum.MENU && scope.row.path.startsWith('/')"
type="warning"
>
目录
</el-tag>
<el-tag
v-if="scope.row.type === MenuTypeEnum.MENU && !scope.row.path.startsWith('/')"
type="success"
>
菜单
</el-tag>
<el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger">按钮</el-tag>
<el-tag v-if="scope.row.type === MenuTypeEnum.EXTLINK" type="info">外链</el-tag>
</template>
</el-table-column>
<el-table-column label="排序" align="left" width="150" prop="menuSort" />
<el-table-column label="权限标识" align="center" width="200" prop="perm" />
<el-table-column label="路由路径" align="left" width="250" prop="path" />
<el-table-column label="组件路径" align="left" width="250" prop="component" />
<el-table-column label="外链" align="left" width="80" prop="iFrame">
<template #default="scope">
{{ scope.row.iFrame ? "是" : "否" }}
</template>
</el-table-column>
<el-table-column label="缓存" align="left" width="80" prop="iFrame">
<el-table-column label="缓存" align="left" width="80" prop="cache">
<template #default="scope">
{{ scope.row.iFrame ? "是" : "否" }}
{{ scope.row.cache ? "是" : "否" }}
</template>
</el-table-column>
<el-table-column label="可见" align="left" width="80" prop="iFrame">
<template #default="scope">
{{ scope.row.iFrame ? "是" : "否" }}
{{ scope.row.hidden ? "否" : "是" }}
</template>
</el-table-column>
<el-table-column label="商家可用" align="left" width="80" prop="iFrame">
<el-table-column label="创建日期" align="left" prop="createTime">
<template #default="scope">
{{ scope.row.iFrame ? "是" : "否" }}
</template>
</el-table-column>
<el-table-column label="商家可用" align="left" width="80" prop="iFrame">
<template #default="scope">
{{ scope.row.iFrame ? "是" : "否" }}
{{ scope.row.createTime }}
</template>
</el-table-column>
<el-table-column fixed="right" align="center" label="操作" width="220">
<template #default="scope">
<el-button
v-if="scope.row.type == 'MENU' || scope.row.type == 'MENU'"
v-if="scope.row.type == 0"
v-hasPerm="['sys:menu:add']"
type="primary"
link
size="small"
icon="plus"
@click.stop="handleOpenDialog(scope.row.id)"
@click.stop="handleOpenDialog(scope.row.menuId)"
>
新增
</el-button>
@ -99,7 +119,7 @@
link
size="small"
icon="edit"
@click.stop="handleOpenDialog(undefined, scope.row.id)"
@click.stop="handleOpenDialog(undefined, scope.row.menuId)"
>
编辑
</el-button>
@ -109,7 +129,7 @@
link
size="small"
icon="delete"
@click.stop="handleDelete(scope.row.id)"
@click.stop="handleDelete(scope.row.menuId)"
>
删除
</el-button>
@ -144,10 +164,10 @@
</el-form-item>
<el-form-item v-if="formData.iFrame == 1" label="外链地址" prop="path">
<el-input v-model="formData.routePath" placeholder="请输入外链完整路径" />
<el-input v-model="formData.path" placeholder="请输入外链完整路径" />
</el-form-item>
<el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="routeName">
<el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="name">
<template #label>
<div class="flex-y-center">
路由名称
@ -161,10 +181,10 @@
</el-tooltip>
</div>
</template>
<el-input v-model="formData.routeName" placeholder="User" />
<el-input v-model="formData.name" placeholder="User" />
</el-form-item>
<el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="routePath">
<el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="path">
<template #label>
<div class="flex-y-center">
路由路径
@ -181,10 +201,10 @@
</template>
<el-input
v-if="formData.type == MenuTypeEnum.MENU"
v-model="formData.routePath"
v-model="formData.path"
placeholder="system"
/>
<el-input v-else v-model="formData.routePath" placeholder="user" />
<el-input v-else v-model="formData.path" placeholder="user" />
</el-form-item>
<el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="component">
@ -208,85 +228,10 @@
</el-input>
</el-form-item>
<el-form-item v-if="formData.type == MenuTypeEnum.MENU">
<template #label>
<div class="flex-y-center">
路由参数
<el-tooltip placement="bottom" effect="light">
<template #content>
组件页面使用 `useRoute().query.参数名` 获取路由参数值。
</template>
<el-icon class="ml-1 cursor-pointer">
<QuestionFilled />
</el-icon>
</el-tooltip>
</div>
</template>
<div v-if="!formData.params || formData.params.length === 0">
<el-button type="success" plain @click="formData.params = [{ key: '', value: '' }]">
添加路由参数
</el-button>
</div>
<div v-else>
<div v-for="(item, index) in formData.params" :key="index">
<el-input v-model="item.key" placeholder="参数名" style="width: 100px" />
<span class="mx-1">=</span>
<el-input v-model="item.value" placeholder="参数值" style="width: 100px" />
<el-icon
v-if="formData.params.indexOf(item) === formData.params.length - 1"
class="ml-2 cursor-pointer color-[var(--el-color-success)]"
style="vertical-align: -0.15em"
@click="formData.params.push({ key: '', value: '' })"
>
<CirclePlusFilled />
</el-icon>
<el-icon
class="ml-2 cursor-pointer color-[var(--el-color-danger)]"
style="vertical-align: -0.15em"
@click="formData.params.splice(formData.params.indexOf(item), 1)"
>
<DeleteFilled />
</el-icon>
</div>
</div>
</el-form-item>
<el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON" prop="hidden" label="显示状态">
<el-radio-group v-model="formData.hidden">
<el-radio :value="1">显示</el-radio>
<el-radio :value="0">隐藏</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="formData.type === MenuTypeEnum.MENU || formData.type === MenuTypeEnum.MENU"
>
<template #label>
<div class="flex-y-center">
始终显示
<el-tooltip placement="bottom" effect="light">
<template #content>
选择“是”，即使目录或菜单下只有一个子节点，也会显示父节点。
<br />
选择“否”，如果目录或菜单下只有一个子节点，则只显示该子节点，隐藏父节点。
<br />
如果是叶子节点，请选择“否”。
</template>
<el-icon class="ml-1 cursor-pointer">
<QuestionFilled />
</el-icon>
</el-tooltip>
</div>
</template>
<el-radio-group v-model="formData.alwaysShow">
<el-radio :value="1">是</el-radio>
<el-radio :value="0">否</el-radio>
<el-radio :value="1">隐藏</el-radio>
<el-radio :value="0">显示</el-radio>
</el-radio-group>
</el-form-item>
@ -307,8 +252,12 @@
</el-form-item>
<!-- 权限标识 -->
<el-form-item v-if="formData.type == MenuTypeEnum.BUTTON" label="权限标识" prop="perm">
<el-input v-model="formData.perm" placeholder="sys:user:add" />
<el-form-item
v-if="formData.type == MenuTypeEnum.BUTTON"
label="权限标识"
prop="permission"
>
<el-input v-model="formData.permission" placeholder="sys:user:add" />
</el-form-item>
<el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON" label="图标" prop="icon">
@ -360,7 +309,7 @@ const menuOptions = ref<OptionType[]>([]);
}
const initialeditRequestData = ref<editRequest>({
id: "",
pid: 0,
pid: "",
hidden: 0,
menuSort: 1,
type: 0, // 默认菜单
@ -376,12 +325,12 @@ const initialeditRequestData = ref<editRequest>({
const formData = ref({ ...initialeditRequestData.value });
// 表单验证规则
const rules = reactive({
pid: [{ required: true, message: "请选择父级菜单", trigger: "blur" }],
pid: [{ required: false, message: "请选择父级菜单", trigger: "blur" }],
title: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
routeName: [{ required: true, message: "请输入路由名称", trigger: "blur" }],
routePath: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
component: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
name: [{ required: false, message: "请输入路由名称", trigger: "blur" }],
path: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
component: [{ required: false, message: "请输入组件路径", trigger: "blur" }],
hidden: [{ required: true, message: "请选择显示状态", trigger: "change" }],
});
@ -440,10 +389,19 @@ function handleOpenDialog(pid?: string, menuId?: string) {
.then(() => {
dialog.visible = true;
if (menuId) {
console.log(menuId);
dialog.title = "编辑菜单";
MenuAPI.get(menuId).then((data) => {
initialeditRequestData.value = { ...data };
formData.value = data;
console.log(data);
initialeditRequestData.value = {
...data,
};
formData.value = {
...data,
cache: data.cache ? 1 : 0,
hidden: data.hidden ? 1 : 0,
pid: !pid ? "0" : data.pid,
};
});
} else {
dialog.title = "新增菜单";
@ -462,7 +420,7 @@ function handleMenuTypeChange() {
formData.value.component = "";
} else {
// 其他情况，保留原有的组件路径
formData.value.routePath = initialeditRequestData.value.routePath;
formData.value.path = initialeditRequestData.value.path;
formData.value.component = initialeditRequestData.value.component;
}
}
@ -475,20 +433,26 @@ function handleMenuTypeChange() {
function handleSubmit() {
editRequestRef.value.validate((isValid: boolean) => {
if (isValid) {
const menuId = formData.value.id;
const menuId = formData.value.menuId;
const submitFormData = {
...formData.value,
cache: formData.value.cache ? 1 : 0,
hidden: formData.value.hidden ? 1 : 0,
pid: formData.value.pid == 0 ? null : formData.value.pid,
};
if (menuId) {
//修改时父级菜单不能为当前菜单
if (formData.value.pid == menuId) {
ElMessage.error("父级菜单不能为当前菜单");
return;
}
MenuAPI.edit(menuId, formData.value).then(() => {
MenuAPI.edit(menuId, submitFormData).then(() => {
ElMessage.success("修改成功");
handleCloseDialog();
handleQuery();
});
} else {
MenuAPI.add(formData.value).then(() => {
MenuAPI.add(submitFormData).then(() => {
ElMessage.success("新增成功");
handleCloseDialog();
handleQuery();
@ -532,7 +496,7 @@ function resetForm() {
editRequestRef.value.clearValidate();
formData.value = {
id: "",
pid: 0,
pid: "",
hidden: 0,
menuSort: 1,
type: 0, // 默认菜单

128
src/views/admim/system/role/components/menus.vue Normal file
View File

@ -0,0 +1,128 @@
<template>
<div class="flex-x-between">
<el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单菜单名称">
<template #prefix>
<Search />
</template>
</el-input>
<div class="flex-center ml-5">
<el-button type="primary" size="small" plain @click="togglePermTree">
<template #icon>
<Switch />
</template>
{{ isExpanded ? "收缩" : "展开" }}
</el-button>
<el-checkbox v-model="parentChildLinked" class="ml-5" @change="handleparentChildLinkedChange">
父子联动
</el-checkbox>
<el-tooltip placement="bottom">
<template #content>
如果只需勾选菜单菜单，不需要勾选子菜单或者按钮菜单，请关闭父子联动
</template>
<el-icon class="ml-1 color-[--el-color-primary] inline-block cursor-pointer">
<QuestionFilled />
</el-icon>
</el-tooltip>
</div>
</div>
<el-tree
ref="permTreeRef"
node-key="value"
show-checkbox
:data="menuPermOptions"
:filter-node-method="handlePermFilter"
:default-expand-all="true"
:check-strictly="!parentChildLinked"
class="mt-5"
>
<template #default="{ data }">
{{ data.label }}
</template>
</el-tree>
</template>
<script setup>
import MenuAPI from "@/api/account/menu";
const modelValue = defineModel("modelValue", {
type: Array,
required: true,
default: () => [],
});
const permKeywords = ref("");
const isExpanded = ref(true);
const parentChildLinked = ref(true);
const permTreeRef = ref();
// 展开/收缩 菜单菜单树
function togglePermTree() {
isExpanded.value = !isExpanded.value;
if (permTreeRef.value) {
Object.values(permTreeRef.value.store.nodesMap).forEach((node) => {
if (isExpanded.value) {
node.expand();
} else {
node.collapse();
}
});
}
}
function handlePermFilter(value, data) {
if (!value) return true;
return data.label.includes(value);
}
// 父子菜单节点是否联动
function handleparentChildLinkedChange(val) {
parentChildLinked.value = val;
}
// 菜单菜单下拉
const menuPermOptions = ref([]);
function returnMenu(menu) {
return menu.map((v) => {
return {
...v,
label: v.title,
value: v.menuId,
children: v.children ? returnMenu(v.children) : [],
};
});
}
// 获取所有的菜单
async function getMenuPermOptions() {
let arr = await MenuAPI.getList();
menuPermOptions.value = returnMenu(arr);
}
getMenuPermOptions();
onMounted(() => {
console.log(modelValue.value);
});
watch(
() => modelValue.value,
(newval) => {}
);
function getPerms() {
return permTreeRef.value.getCheckedKeys();
}
function reset() {
permTreeRef.value.setCheckedKeys([]);
}
function setChecked(checkedMenuIds) {
checkedMenuIds.forEach((menuId) => {
console.log(menuId);
permTreeRef.value.setChecked(menuId, true, false);
});
}
defineExpose({
getPerms,
setChecked,
reset,
});
</script>

133
src/views/admim/system/role/index.vue
View File

@ -35,18 +35,10 @@
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色名称" prop="name" min-width="100" />
<el-table-column label="角色编码" prop="code" width="150" />
<el-table-column label="状态" align="center" width="100">
<template #default="scope">
<el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
<el-tag v-else type="info">禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="排序" align="center" width="80" prop="sort" />
<el-table-column label="角色名称" prop="name" />
<el-table-column label="角色级别" prop="level" />
<el-table-column label="描述" prop="description" />
<el-table-column label="创建日期" prop="createTime" />
<el-table-column fixed="right" label="操作" width="220">
<template #default="scope">
<el-button
@ -56,7 +48,7 @@
icon="position"
@click="handleOpenAssignPermDialog(scope.row)"
>
分配权限
分配菜单
</el-button>
<el-button
type="primary"
@ -101,33 +93,24 @@
<el-input v-model="formData.name" placeholder="请输入角色名称" />
</el-form-item>
<el-form-item label="角色编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入角色编码" />
<el-form-item label="角色等级" prop="level">
<el-input-number placeholder="角色等级" v-model="formData.level"></el-input-number>
</el-form-item>
<el-form-item label="数据权限" prop="dataScope">
<!-- <el-form-item label="数据菜单" prop="dataScope">
<el-select v-model="formData.dataScope">
<el-option :key="0" label="全部数据" :value="0" />
<el-option :key="1" label="部门及子部门数据" :value="1" />
<el-option :key="2" label="本部门数据" :value="2" />
<el-option :key="3" label="本人数据" :value="3" />
</el-select>
</el-form-item> -->
<el-form-item label="描述" prop="description">
<el-input type="textarea" v-model="formData.description" placeholder="描述" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
controls-position="right"
:min="0"
style="width: 100px"
/>
<el-form-item label="菜单分配" prop="menuIdList">
<menuSelect ref="refmenuSelect" v-model="formData.menuIdList"></menuSelect>
</el-form-item>
</el-form>
@ -139,14 +122,14 @@
</template>
</el-dialog>
<!-- 分配权限弹窗 -->
<!-- 分配菜单弹窗 -->
<el-drawer
v-model="assignPermDialogVisible"
:title="'【' + checkedRole.name + '】权限分配'"
:title="'【' + checkedRole.name + '】菜单分配'"
size="500"
>
<div class="flex-x-between">
<el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单权限名称">
<el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单菜单名称">
<template #prefix>
<Search />
</template>
@ -169,7 +152,7 @@
<el-tooltip placement="bottom">
<template #content>
如果只需勾选菜单权限，不需要勾选子菜单或者按钮权限，请关闭父子联动
如果只需勾选菜单菜单，不需要勾选子菜单或者按钮菜单，请关闭父子联动
</template>
<el-icon class="ml-1 color-[--el-color-primary] inline-block cursor-pointer">
<QuestionFilled />
@ -207,12 +190,13 @@ defineOptions({
name: "Role",
inheritAttrs: false,
});
import menuSelect from "./components/menus.vue";
import RoleApi, { SysRole, addRequest, getListRequest } from "@/api/account/role";
import MenuAPI, { type RouteVO } from "@/api/account/menu";
const queryFormRef = ref();
const addRequestRef = ref();
const refmenuSelect = ref();
const permTreeRef = ref();
const loading = ref(false);
@ -227,7 +211,7 @@ const queryParams = reactive<getListRequest>({
// 角色表格数据
const roleList = ref<SysRole[]>();
// 菜单权限下拉
// 菜单菜单下拉
const menuPermOptions = ref<RouteVO[]>([]);
// 弹窗
@ -248,9 +232,7 @@ const formData = reactive<addRequest>({
const rules = reactive({
name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
status: [{ required: true, message: "请选择状态", trigger: "blur" }],
level: [{ required: false, message: "请输入角色等级", trigger: "blur" }],
});
// 选中的角色
@ -294,11 +276,19 @@ function handleSelectionChange(selection: any) {
}
// 打开角色弹窗
function handleOpenDialog(row: SysRole) {
async function handleOpenDialog(row: SysRole) {
dialog.visible = true;
if (row.id) {
if (row && row.id) {
dialog.title = "修改角色";
//获取角色菜单列表
const data = await RoleApi.getMenu(row.id);
Object.assign(formData, row);
console.log(data);
formData.menuIdList = data;
setTimeout(() => {
refmenuSelect.value.setChecked(data);
}, 100);
console.log(formData);
} else {
dialog.title = "新增角色";
}
@ -308,10 +298,11 @@ function handleOpenDialog(row: SysRole) {
function handleSubmit() {
addRequestRef.value.validate((valid: any) => {
if (valid) {
const checkedMenuIds: number[] = refmenuSelect.value.getPerms();
loading.value = true;
const roleId = formData.id;
if (roleId) {
RoleApi.update({ ...formData, id: formData.id ?? null })
RoleApi.update(roleId, { ...formData, menuIdList: checkedMenuIds })
.then(() => {
ElMessage.success("修改成功");
handleCloseDialog();
@ -320,7 +311,8 @@ function handleSubmit() {
.finally(() => (loading.value = false));
} else {
delete formData.id;
RoleApi.add(formData)
RoleApi.add({ ...formData, menuIdList: checkedMenuIds })
.then(() => {
ElMessage.success("新增成功");
handleCloseDialog();
@ -338,7 +330,7 @@ function handleCloseDialog() {
addRequestRef.value.resetFields();
addRequestRef.value.clearValidate();
refmenuSelect.value.reset();
formData.id = undefined;
formData.sort = 1;
formData.status = 1;
@ -378,7 +370,7 @@ interface typeRoute extends RouteVO {
children: typeRoute[];
}
function returnMenu(menu: RouteVO[]): typeRoute[] {
function returnMenu(menu) {
return menu.map((v) => {
return {
...v,
@ -389,7 +381,13 @@ function returnMenu(menu: RouteVO[]): typeRoute[] {
});
}
// 打开分配菜单权限弹窗
// 获取所有的菜单
async function getMenuPermOptions() {
let arr = await MenuAPI.getList({});
menuPermOptions.value = returnMenu(arr);
}
getMenuPermOptions();
// 打开分配菜单菜单弹窗
async function handleOpenAssignPermDialog(row: SysRole) {
const roleId = row.id;
if (roleId) {
@ -399,34 +397,31 @@ async function handleOpenAssignPermDialog(row: SysRole) {
checkedRole.value.id = roleId;
checkedRole.value.name = row.name as string;
// 获取所有的菜单
let arr: RouteVO[] = await MenuAPI.getRoutes();
menuPermOptions.value = returnMenu(arr);
// 回显角色已拥有的菜单
// RoleApi.getRoleMenuIds(roleId)
// .then((data) => {
// const checkedMenuIds = data;
// checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
// })
// .finally(() => {
// loading.value = false;
// });
RoleApi.getMenu(roleId)
.then((data) => {
const checkedMenuIds = data;
checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
})
.finally(() => {
loading.value = false;
});
}
}
// 分配菜单权限提交
// 分配菜单菜单提交
function handleAssignPermSubmit() {
const roleId = checkedRole.value.id;
const name = checkedRole.value.name;
if (roleId) {
const checkedMenuIds: number[] = permTreeRef
.value!.getCheckedNodes(false, true)
.map((node: any) => node.value);
loading.value = true;
RoleApi.updateRoleMenus(roleId, checkedMenuIds)
RoleApi.update(roleId, { name, menuIdList: checkedMenuIds })
.then(() => {
ElMessage.success("分配权限成功");
ElMessage.success("分配菜单成功");
assignPermDialogVisible.value = false;
handleResetQuery();
})
@ -436,7 +431,7 @@ function handleAssignPermSubmit() {
}
}
// 展开/收缩 菜单权限树
// 展开/收缩 菜单菜单树
function togglePermTree() {
isExpanded.value = !isExpanded.value;
if (permTreeRef.value) {
@ -449,8 +444,20 @@ function togglePermTree() {
});
}
}
function editTogglePermTree() {
isExpanded.value = !isExpanded.value;
if (permTreeRef.value) {
Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
if (isExpanded.value) {
node.expand();
} else {
node.collapse();
}
});
}
}
// 权限筛选
// 菜单筛选
watch(permKeywords, (val) => {
permTreeRef.value!.filter(val);
});

57
src/views/login/index.vue
View File

@ -1,7 +1,13 @@
<template>
<div class="login" :style="'background-image:url(' + Background + ');'">
<el-form ref="loginForm" :model="state.loginForm" :rules="state.loginRules" label-position="left" label-width="0px"
class="login-form">
<el-form
ref="loginForm"
:model="state.loginForm"
:rules="state.loginRules"
label-position="left"
label-width="0px"
class="login-form"
>
<h3 class="title">银收客后台管理</h3>
<el-form-item>
<el-radio-group v-model="state.loginForm.loginType">
@ -10,19 +16,39 @@
</el-radio-group>
</el-form-item>
<el-form-item prop="merchantName" v-if="state.loginForm.loginType == 'staff'">
<el-input v-model="state.loginForm.merchantName" type="text" auto-complete="off" placeholder="商户号"></el-input>
<el-input
v-model="state.loginForm.merchantName"
type="text"
auto-complete="off"
placeholder="商户号"
></el-input>
</el-form-item>
<el-form-item prop="username">
<el-input v-model="state.loginForm.username" type="text" auto-complete="off" placeholder="账号"></el-input>
<el-input
v-model="state.loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="state.loginForm.password" type="password" auto-complete="off" placeholder="密码"
@keyup.enter="handleLogin"></el-input>
<el-input
v-model="state.loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter="handleLogin"
></el-input>
</el-form-item>
<el-form-item prop="code">
<div class="code_wrap">
<el-input v-model="state.loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
@keyup.enter="handleLogin"></el-input>
<el-input
v-model="state.loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter="handleLogin"
></el-input>
<div class="login-code">
<img :src="state.codeUrl" @click="getCode" />
</div>
@ -30,8 +56,13 @@
</el-form-item>
<el-form-item style="width: 100%">
<el-button :loading="state.loading" size="default" type="primary" style="width: 100%"
@click.prevent="handleLogin">
<el-button
:loading="state.loading"
size="default"
type="primary"
style="width: 100%"
@click.prevent="handleLogin"
>
<span v-if="!state.loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
@ -61,8 +92,8 @@ const state = reactive({
codeUrl: "",
cookiePass: "",
loginForm: {
username: "",
password: "",
username: "admin",
password: "12345",
// rememberMe: false,
code: "",
uuid: "",
@ -152,7 +183,7 @@ function handleLogin() {
.then(async (res) => {
// await userStore.getUserInfo();
const { path, queryParams } = parseRedirect();
console.log(res, 'Denglv返回');
console.log(res, "Denglv返回");
router.push({ path: path, query: queryParams });
})
.catch(() => {