菜单管理拖拽排序优化,修复菜单树过滤失效,增加TIPS,添加图标选择器

This commit is contained in:
sakuya 2021-08-12 21:16:44 +08:00
parent 907d75f8ad
commit 752a0c6130
2 changed files with 32 additions and 5 deletions

View File

@ -6,10 +6,10 @@
<el-input placeholder="输入关键字进行过滤" v-model="menuFilterText" clearable></el-input>
</el-header>
<el-main class="nopadding">
<el-tree ref="menu" class="menu" node-key="name" :data="menuList" :props="menuProps" draggable highlight-current :expand-on-click-node="false" check-strictly show-checkbox :filter-node-method="menuFilterNode" @node-click="menuClick">
<el-tree ref="menu" class="menu" node-key="name" :data="menuList" :props="menuProps" draggable highlight-current :expand-on-click-node="false" check-strictly show-checkbox :filter-node-method="menuFilterNode" @node-click="menuClick" @node-drop="nodeDrop">
<template #default="{node, data}">
<span class="custom-tree-node">
<span class="custom-tree-node el-tree-node__label">
<span class="label">{{ node.label }}</span>
<span class="do">
<i class="el-icon-plus" @click.stop="add(node, data)"></i>
@ -75,9 +75,13 @@
//
menuFilterNode(value, data){
if (!value) return true;
var targetText = data.name;
var targetText = data.meta.title;
return targetText.indexOf(value) !== -1;
},
//
nodeDrop(draggingNode, dropNode, dropType){
this.$message(`拖拽对象:${draggingNode.data.meta.title}, 释放对象:${dropNode.data.meta.title}, 释放对象的位置:${dropType}`)
},
//
add(node){
var newMenuName = "未命名" + newMenuIndex++;

View File

@ -1,5 +1,5 @@
<template>
<el-row>
<el-row :gutter="20">
<el-col :xl="12" :lg="16">
<h2>{{form.meta.title || "新增菜单"}}</h2>
@ -24,7 +24,7 @@
<div class="el-form-item-msg">系统唯一且与内置组件名一致否则导致缓存失效如类型为Iframe的菜单别名将代替源地址显示在地址栏</div>
</el-form-item>
<el-form-item label="菜单图标" prop="meta.icon">
<el-input v-model="form.meta.icon" clearable placeholder=""></el-input>
<sc-icon-select v-model="form.meta.icon" clearable></sc-icon-select>
</el-form-item>
<el-form-item label="路由地址" prop="path">
<el-input v-model="form.path" clearable placeholder=""></el-input>
@ -55,12 +55,33 @@
</el-form>
</el-col>
<el-col :xl="12" :lg="8">
<el-alert title="温馨提示" class="tips">
<p>
<b>排序和位置</b>
可以通过拖拽菜单树来完成排序和更改位置的操作
</p>
<p>
<b>别名</b>
系统唯一且与内置组件名一致当类型为菜单时充当路由name当类型为按钮时充当权限标识当类型为Iframe和外链时充当http://
</p>
<p>
<b>视图</b>
如父节点链接或Iframe等没有视图的菜单不需要填写视图地址需在VUE源码中@/views/中相对应的地址前缀不需要填写/
</p>
</el-alert>
</el-col>
</el-row>
</template>
<script>
import scIconSelect from '@/components/scIconSelect'
export default {
components: {
scIconSelect
},
props: {
menu: { type: Object, default: () => {} },
},
@ -133,4 +154,6 @@
<style scoped>
h2 {font-size: 17px;color: #3c4a54;padding:0 0 30px 0;}
.tips {line-height: 1.8;padding:20px;}
.tips p {margin-bottom: 10px;}
</style>