优化角色菜单选择

This commit is contained in:
gyq
2025-11-20 11:38:56 +08:00
parent 09a6f8b067
commit f51d0d44e4

View File

@@ -3,12 +3,7 @@
<div class="search-bar">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item prop="keywords" label="关键字">
<el-input
v-model="queryParams.key"
placeholder="角色名称"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.key" placeholder="角色名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
@@ -26,14 +21,8 @@
</el-button> -->
</div>
<el-table
ref="dataTableRef"
v-loading="loading"
:data="roleList"
highlight-current-row
:border="true"
@selection-change="handleSelectionChange"
>
<el-table ref="dataTableRef" v-loading="loading" :data="roleList" highlight-current-row :border="true"
@selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column label="角色名称" prop="name" />
<el-table-column label="角色级别" prop="level" />
@@ -41,53 +30,25 @@
<el-table-column label="创建日期" prop="createTime" />
<el-table-column fixed="right" label="操作" width="220">
<template #default="scope">
<el-button
type="primary"
size="small"
link
icon="position"
@click="handleOpenAssignPermDialog(scope.row)"
>
<el-button type="primary" size="small" link icon="position" @click="handleOpenAssignPermDialog(scope.row)">
分配菜单
</el-button>
<el-button
type="primary"
size="small"
link
icon="edit"
@click="handleOpenDialog(scope.row)"
>
<el-button type="primary" size="small" link icon="edit" @click="handleOpenDialog(scope.row)">
编辑
</el-button>
<el-button
type="danger"
size="small"
link
icon="delete"
@click="handleDelete(scope.row.id)"
>
<el-button type="danger" size="small" link icon="delete" @click="handleDelete(scope.row.id)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-if="total > 0"
v-model:total="total"
v-model:page="queryParams.page"
v-model:limit="queryParams.size"
@pagination="handleQuery"
/>
<pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page"
v-model:limit="queryParams.size" @pagination="handleQuery" />
</el-card>
<!-- 角色表单弹窗 -->
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
width="500px"
@close="handleCloseDialog"
>
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" @close="handleCloseDialog">
<el-form ref="addRequestRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入角色名称" />
@@ -153,11 +114,7 @@
</template>
{{ isExpanded ? "收缩" : "展开" }}
</el-button>
<el-checkbox
v-model="parentChildLinked"
class="ml-5"
@change="handleparentChildLinkedChange"
>
<el-checkbox v-model="parentChildLinked" class="ml-5" @change="handleparentChildLinkedChange">
父子联动
</el-checkbox>
@@ -174,33 +131,18 @@
</div>
</template>
<div class="u-relative" style="overflow-x: hidden">
<el-tree
ref="permTreeRef"
node-key="value"
show-checkbox
:data="menuPermOptions"
:default-checked-keys="adminMenuIdList"
:filter-node-method="handlePermFilter"
:default-expand-all="true"
:check-strictly="!parentChildLinked"
class="mt-5"
>
<el-tree ref="permTreeRef" node-key="value" show-checkbox :data="menuPermOptions"
:default-checked-keys="adminMenuIdList" :filter-node-method="handlePermFilter" :default-expand-all="true"
:check-strictly="!parentChildLinked" class="mt-5">
<template #default="{ data }">
{{ data.label }}
</template>
</el-tree>
<div
class="cashMenuIdList"
:style="{
transform: `translateX(${(platformType == 1 ? 0 : 1) * 100}%)`,
}"
>
<div class="cashMenuIdList" :style="{
transform: `translateX(${(platformType == 1 ? 0 : 1) * 100}%)`,
}">
<el-checkbox-group v-model="cashMenuIdList">
<el-checkbox
v-for="(item, index) in casher_windows_menus"
:key="index"
:value="item.menuId"
>
<el-checkbox v-for="(item, index) in casher_windows_menus" :key="index" :value="item.menuId">
{{ item.name }}
</el-checkbox>
</el-checkbox-group>
@@ -327,6 +269,7 @@ async function handleOpenDialog(row: SysRole) {
dialog.title = "修改角色";
//获取角色菜单列表
const data = await RoleApi.getMenu(row.id, platformType.value);
// const data = await RoleApi.getList(row.id, platformType.value);
console.log(data);
Object.assign(formData, row);
formData.menuIdList = data;
@@ -435,8 +378,8 @@ async function getCashMenus() {
}
// 获取所有的菜单
async function getMenuPermOptions() {
let arr =
shopUser.userInfo.account === "admin" ? await MenuAPI.getList() : await MenuAPI.getRoutes();
// let arr = shopUser.userInfo.account === "admin" ? await MenuAPI.getList() : await MenuAPI.getRoutes();
let arr = await MenuAPI.getList();
menuPermOptions.value = returnMenu(arr);
}
getMenuPermOptions();
@@ -455,8 +398,8 @@ async function handleOpenAssignPermDialog(row: SysRole) {
getMenuIds(roleId);
}
}
// 回显角色已拥有的菜单
// 回显角色已拥有的菜单
function getMenuIds(roleId: number) {
roleId = roleId ? roleId : dialog.row.id;
if (!roleId) {