From 1e0868717559461762519af4377224e93c23935d Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期三, 25 五月 2022 10:19:28 +0800
Subject: [PATCH] 图标外层点击隐藏选择下拉列表
---
src/views/system/menu/index.vue | 59 ++++++++++++++++++++++++++++++-----------------------------
1 files changed, 30 insertions(+), 29 deletions(-)
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 8c07d2f..17ecf3f 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -6,12 +6,11 @@
v-model="queryParams.menuName"
placeholder="璇疯緭鍏ヨ彍鍗曞悕绉�"
clearable
- size="small"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="鐘舵��" prop="status">
- <el-select v-model="queryParams.status" placeholder="鑿滃崟鐘舵��" clearable size="small">
+ <el-select v-model="queryParams.status" placeholder="鑿滃崟鐘舵��" clearable>
<el-option
v-for="dict in sys_normal_disable"
:key="dict.value"
@@ -21,8 +20,8 @@
</el-select>
</el-form-item>
<el-form-item>
- <el-button type="primary" icon="Search" size="mini" @click="handleQuery">鎼滅储</el-button>
- <el-button icon="Refresh" size="mini" @click="resetQuery">閲嶇疆</el-button>
+ <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
+ <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
</el-form-item>
</el-form>
@@ -32,7 +31,6 @@
type="primary"
plain
icon="Plus"
- size="mini"
@click="handleAdd"
v-hasPermi="['system:menu:add']"
>鏂板</el-button>
@@ -42,7 +40,6 @@
type="info"
plain
icon="Sort"
- size="mini"
@click="toggleExpandAll"
>灞曞紑/鎶樺彔</el-button>
</el-col>
@@ -79,21 +76,18 @@
<el-table-column label="鎿嶄綔" align="center" width="200" class-name="small-padding fixed-width">
<template #default="scope">
<el-button
- size="mini"
type="text"
icon="Edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:menu:edit']"
>淇敼</el-button>
<el-button
- size="mini"
type="text"
icon="Plus"
@click="handleAdd(scope.row)"
v-hasPermi="['system:menu:add']"
>鏂板</el-button>
<el-button
- size="mini"
type="text"
icon="Delete"
@click="handleDelete(scope.row)"
@@ -109,11 +103,13 @@
<el-row>
<el-col :span="24">
<el-form-item label="涓婄骇鑿滃崟">
- <tree-select
- v-model:value="form.parentId"
- :options="menuOptions"
- :objMap="{ value: 'menuId', label: 'menuName', children: 'children' }"
+ <el-tree-select
+ v-model="form.parentId"
+ :data="menuOptions"
+ :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
+ value-key="menuId"
placeholder="閫夋嫨涓婄骇鑿滃崟"
+ check-strictly
/>
</el-form-item>
</el-col>
@@ -127,7 +123,7 @@
</el-form-item>
</el-col>
<el-col :span="24" v-if="form.menuType != 'F'">
- <el-form-item label="鑿滃崟鍥炬爣">
+ <el-form-item label="鑿滃崟鍥炬爣" prop="icon">
<el-popover
placement="bottom-start"
:width="540"
@@ -135,9 +131,8 @@
trigger="click"
@show="showSelectIcon"
>
- <icon-select ref="iconSelectRef" @selected="selected" />
<template #reference>
- <el-input v-model="form.icon" placeholder="鐐瑰嚮閫夋嫨鍥炬爣" readonly>
+ <el-input v-model="form.icon" placeholder="鐐瑰嚮閫夋嫨鍥炬爣" @click="showSelectIcon" v-click-outside="hideSelectIcon" readonly>
<template #prefix>
<svg-icon
v-if="form.icon"
@@ -145,10 +140,11 @@
class="el-input__icon"
style="height: 32px;width: 16px;"
/>
- <i v-else class="el-icon-search el-input__icon" />
+ <el-icon v-else style="height: 32px;width: 16px;"><search /></el-icon>
</template>
</el-input>
</template>
+ <icon-select ref="iconSelectRef" @selected="selected" />
</el-popover>
</el-form-item>
</el-col>
@@ -167,7 +163,7 @@
<template #label>
<span>
<el-tooltip content="閫夋嫨鏄閾惧垯璺敱鍦板潃闇�瑕佷互`http(s)://`寮�澶�" placement="top">
- <i class="el-icon-question"></i>
+ <el-icon><question-filled /></el-icon>
</el-tooltip>鏄惁澶栭摼
</span>
</template>
@@ -182,7 +178,7 @@
<template #label>
<span>
<el-tooltip content="璁块棶鐨勮矾鐢卞湴鍧�锛屽锛歚user`锛屽澶栫綉鍦板潃闇�鍐呴摼璁块棶鍒欎互`http(s)://`寮�澶�" placement="top">
- <i class="el-icon-question"></i>
+ <el-icon><question-filled /></el-icon>
</el-tooltip>
璺敱鍦板潃
</span>
@@ -195,7 +191,7 @@
<template #label>
<span>
<el-tooltip content="璁块棶鐨勭粍浠惰矾寰勶紝濡傦細`system/user/index`锛岄粯璁ゅ湪`views`鐩綍涓�" placement="top">
- <i class="el-icon-question"></i>
+ <el-icon><question-filled /></el-icon>
</el-tooltip>
缁勪欢璺緞
</span>
@@ -209,7 +205,7 @@
<template #label>
<span>
<el-tooltip content="鎺у埗鍣ㄤ腑瀹氫箟鐨勬潈闄愬瓧绗︼紝濡傦細@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
- <i class="el-icon-question"></i>
+ <el-icon><question-filled /></el-icon>
</el-tooltip>
鏉冮檺瀛楃
</span>
@@ -222,7 +218,7 @@
<template #label>
<span>
<el-tooltip content='璁块棶璺敱鐨勯粯璁や紶閫掑弬鏁帮紝濡傦細`{"id": 1, "name": "ry"}`' placement="top">
- <i class="el-icon-question"></i>
+ <el-icon><question-filled /></el-icon>
</el-tooltip>
璺敱鍙傛暟
</span>
@@ -234,7 +230,7 @@
<template #label>
<span>
<el-tooltip content="閫夋嫨鏄垯浼氳`keep-alive`缂撳瓨锛岄渶瑕佸尮閰嶇粍浠剁殑`name`鍜屽湴鍧�淇濇寔涓�鑷�" placement="top">
- <i class="el-icon-question"></i>
+ <el-icon><question-filled /></el-icon>
</el-tooltip>
鏄惁缂撳瓨
</span>
@@ -250,7 +246,7 @@
<template #label>
<span>
<el-tooltip content="閫夋嫨闅愯棌鍒欒矾鐢卞皢涓嶄細鍑虹幇鍦ㄤ晶杈规爮锛屼絾浠嶇劧鍙互璁块棶" placement="top">
- <i class="el-icon-question"></i>
+ <el-icon><question-filled /></el-icon>
</el-tooltip>
鏄剧ず鐘舵��
</span>
@@ -269,7 +265,7 @@
<template #label>
<span>
<el-tooltip content="閫夋嫨鍋滅敤鍒欒矾鐢卞皢涓嶄細鍑虹幇鍦ㄤ晶杈规爮锛屼篃涓嶈兘琚闂�" placement="top">
- <i class="el-icon-question"></i>
+ <el-icon><question-filled /></el-icon>
</el-tooltip>
鑿滃崟鐘舵��
</span>
@@ -299,6 +295,7 @@
import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu";
import SvgIcon from "@/components/SvgIcon";
import IconSelect from "@/components/IconSelect";
+import { ClickOutside as vClickOutside } from 'element-plus'
const { proxy } = getCurrentInstance();
const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");
@@ -338,9 +335,9 @@
});
}
/** 鏌ヨ鑿滃崟涓嬫媺鏍戠粨鏋� */
-async function getTreeselect() {
+function getTreeselect() {
menuOptions.value = [];
- await listMenu().then(response => {
+ listMenu().then(response => {
const menu = { menuId: 0, menuName: "涓荤被鐩�", children: [] };
menu.children = proxy.handleTree(response.data, "menuId");
menuOptions.value.push(menu);
@@ -377,6 +374,10 @@
form.value.icon = name;
showChooseIcon.value = false;
}
+/** 鍥炬爣澶栧眰鐐瑰嚮闅愯棌涓嬫媺鍒楄〃 */
+function hideSelectIcon() {
+ showChooseIcon.value = false;
+}
/** 鎼滅储鎸夐挳鎿嶄綔 */
function handleQuery() {
getList();
@@ -387,9 +388,9 @@
handleQuery();
}
/** 鏂板鎸夐挳鎿嶄綔 */
-async function handleAdd(row) {
+function handleAdd(row) {
reset();
- await getTreeselect();
+ getTreeselect();
if (row != null && row.menuId) {
form.value.parentId = row.menuId;
} else {
--
Gitblit v1.9.3