common/ruoyi-flex
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善菜单管理页面，修正“菜单图标”画面显示问题

Browse Source
This commit is contained in:
dataprince 2023-11-17 09:27:14 +08:00
parent ec3eae7bae
commit cad6506ac8
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ruoyi-ui/src/views/system/menu/index.vue
View File

@ -130,7 +130,7 @@
@show="showSelectIcon" @show="showSelectIcon"
> >
<template #reference> <template #reference>
<el-input v-model="form.icon" placeholder="点击选择图标" @click="showSelectIcon" readonly> <el-input v-model="form.icon" v-click-outside="hideSelectIcon" placeholder="点击选择图标" @blur="showSelectIcon" readonly>
<template #prefix> <template #prefix>
<svg-icon <svg-icon
v-if="form.icon" v-if="form.icon"
@ -202,7 +202,7 @@
<el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" /> <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
<template #label> <template #label>
<span> <span>
<el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top"> <el-tooltip content="控制器中定义的权限字符，如：@SaCheckPermission('system:user:query')" placement="top">
<i class="el-icon-question"></i> <i class="el-icon-question"></i>
</el-tooltip> </el-tooltip>
权限字符 权限字符
@ -258,7 +258,7 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12" v-if="form.menuType != 'F'">
<el-form-item> <el-form-item>
<template #label> <template #label>
<span> <span>
@ -291,8 +291,10 @@
<script setup name="Menu"> <script setup name="Menu">
import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu"; import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu";
import SvgIcon from "@/components/SvgIcon"; import SvgIcon from "@/components/SvgIcon/index.vue";
import IconSelect from "@/components/IconSelect"; import IconSelect from "@/components/IconSelect/index.vue";
import { ClickOutside as vClickOutside } from 'element-plus';
import { ref, reactive, toRefs, nextTick } from 'vue';
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable"); const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");
@ -366,6 +368,14 @@ function showSelectIcon() {
iconSelectRef.value.reset(); iconSelectRef.value.reset();
showChooseIcon.value = true; showChooseIcon.value = true;
} }
/** 图标外层点击隐藏下拉列表 */
function hideSelectIcon(event) {
let elem = event.relatedTarget || event.srcElement || event.target || event.currentTarget;
let className = elem.className;
if (className !== 'el-input__inner') {
showChooseIcon.value = false;
}
}
/** 选择图标 */ /** 选择图标 */
function selected(name) { function selected(name) {
form.value.icon = name; form.value.icon = name;