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

fix: 菜单管理增加微信小程序图标，修复部分问题

Browse Source
This commit is contained in:
YeMingfei666
2025-05-30 18:30:18 +08:00
parent 352795d52f
commit 863bab3eba
8 changed files with 340 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
src/views/admin/system/role/index.vue
View File

@@ -108,10 +108,10 @@
<el-form-item label="描述" prop="description">
<el-input type="textarea" v-model="formData.description" placeholder="描述" />
</el-form-item>
<el-form-item label="菜单分配" prop="menuIdList">
<el-alert title="角色菜单请点击角色列表的分配菜单按钮编辑" type="success" effect="dark" />
<!-- <el-form-item label="菜单分配" prop="menuIdList">
<menuSelect ref="refmenuSelect" v-model="formData.menuIdList"></menuSelect>
</el-form-item>
</el-form-item> -->
</el-form>
<template #footer>
@@ -123,58 +123,90 @@
</el-dialog>
<!-- 分配菜单弹窗 -->
<el-drawer
v-model="assignPermDialogVisible"
:title="'【' + checkedRole.name + '】菜单分配'"
size="500"
>
<div class="flex-x-between">
<el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单菜单名称">
<template #prefix>
<Search />
<el-drawer v-model="assignPermDialogVisible" size="500">
<template #header>
<div>
<div>
<h3>
{{ "【" + checkedRole.name + "】菜单分配" }}
</h3>
</div>
<div>
<el-form-item label="平台类型">
<el-radio-group v-model="platformType" @change="handlePlatformTypeChange">
<el-radio :value="0">管理端</el-radio>
<el-radio :value="1">收银机</el-radio>
</el-radio-group>
</el-form-item>
</div>
<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>
</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"
>
<template #default="{ data }">
{{ data.label }}
</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>
</el-tree>
<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"
>
{{ item.name }}
</el-checkbox>
</el-checkbox-group>
</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 #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleAssignPermSubmit">确 定</el-button>
@@ -191,11 +223,11 @@ defineOptions({
inheritAttrs: false,
});
import { useUserStore } from "@/store/modules/user";
// import { casher_windows_menus } from "@/data/menus";
const shopUser = useUserStore();
import menuSelect from "./components/menus.vue";
import RoleApi, { SysRole, addRequest, getListRequest } from "@/api/account/role";
import MenuAPI, { type RouteVO } from "@/api/account/menu";
import MenuAPI, { type RouteVO, CashMenu } from "@/api/account/menu";
const queryFormRef = ref();
const addRequestRef = ref();
@@ -221,6 +253,7 @@ const menuPermOptions = ref<RouteVO[]>([]);
const dialog = reactive({
title: "",
visible: false,
row: {},
});
// 角色表单
const formData = reactive<addRequest>({
@@ -232,7 +265,7 @@ const formData = reactive<addRequest>({
menuIdList: [],
description: "",
});
const cashMenuIdList = ref<number[]>([]);
const rules = reactive({
name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
level: [{ required: false, message: "请输入角色等级", trigger: "blur" }],
@@ -251,6 +284,14 @@ const isExpanded = ref(true);
const parentChildLinked = ref(false);
const platformType = ref(0);
function handlePlatformTypeChange(e: string | number | boolean | undefined) {
const value = Number(e); // Ensure the value is cast to a number
console.log("handlePlatformTypeChange");
platformType.value = value;
handleOpenAssignPermDialog(dialog.row);
}
// 查询
function handleQuery() {
loading.value = true;
@@ -281,10 +322,11 @@ function handleSelectionChange(selection: any) {
// 打开角色弹窗
async function handleOpenDialog(row: SysRole) {
dialog.visible = true;
dialog.row = row;
if (row && row.id) {
dialog.title = "修改角色";
//获取角色菜单列表
const data = await RoleApi.getMenu(row.id);
const data = await RoleApi.getMenu(row.id, platformType.value);
console.log(data);
Object.assign(formData, row);
formData.menuIdList = data;
@@ -329,9 +371,9 @@ function handleSubmit() {
// 关闭弹窗
function handleCloseDialog() {
addRequestRef.value.resetFields();
addRequestRef.value.clearValidate();
refmenuSelect.value.reset();
addRequestRef.value?.resetFields();
addRequestRef.value?.clearValidate();
refmenuSelect.value?.reset();
formData.id = undefined;
formData.sort = 1;
formData.status = 1;
@@ -383,6 +425,13 @@ function returnMenu(menu) {
});
}
const casher_windows_menus = ref<CashMenu[]>([]);
//获取收银机菜单
async function getCashMenus() {
const res = await MenuAPI.getCashMenus();
console.log(res);
casher_windows_menus.value = res;
}
// 获取所有的菜单
async function getMenuPermOptions() {
let arr =
@@ -390,27 +439,43 @@ async function getMenuPermOptions() {
menuPermOptions.value = returnMenu(arr);
}
getMenuPermOptions();
getCashMenus();
const adminMenuIdList = ref<number[]>([]);
// 打开分配菜单菜单弹窗
async function handleOpenAssignPermDialog(row: SysRole) {
const roleId = row.id;
dialog.row = row;
if (roleId) {
assignPermDialogVisible.value = true;
loading.value = true;
checkedRole.value.id = roleId;
checkedRole.value.name = row.name as string;
// 回显角色已拥有的菜单
RoleApi.getMenu(roleId)
.then((data) => {
const checkedMenuIds = data;
checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
})
.finally(() => {
loading.value = false;
});
getMenuIds(roleId);
}
}
// 回显角色已拥有的菜单
function getMenuIds(roleId: number) {
roleId = roleId ? roleId : dialog.row.id;
if (!roleId) {
return;
}
RoleApi.getMenu(roleId, platformType.value)
.then((data) => {
if (platformType.value == 0) {
const checkedMenuIds = data;
adminMenuIdList.value = data;
// checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
}
if (platformType.value == 1) {
cashMenuIdList.value = data;
}
})
.finally(() => {
loading.value = false;
});
}
// 分配菜单菜单提交
function handleAssignPermSubmit() {
@@ -422,7 +487,13 @@ function handleAssignPermSubmit() {
.map((node: any) => node.value);
loading.value = true;
RoleApi.update(roleId, { name, menuIdList: checkedMenuIds })
RoleApi.update(roleId, {
name,
adminMenuIdList: checkedMenuIds,
cashMenuIdList: cashMenuIdList.value.filter((id) =>
casher_windows_menus.value.find((v) => v.menuId == id)
),
})
.then(() => {
ElMessage.success("分配菜单成功");
assignPermDialogVisible.value = false;
@@ -470,6 +541,9 @@ watch(
(val) => {
if (!val) {
permTreeRef.value.setCheckedKeys([]);
platformType.value = 0;
cashMenuIdList.value = [];
adminMenuIdList.value = [];
}
}
);
@@ -493,3 +567,14 @@ onMounted(() => {
handleQuery();
});
</script>
<style scoped lang="scss">
.cashMenuIdList {
position: absolute;
box-sizing: border-box;
padding: var(--el-drawer-padding-primary);
inset: 0;
background-color: #fff;
z-index: 2;
transition: all 0.3s ease-in-out;
}
</style>