菜单管理拖拽排序优化,修复菜单树过滤失效,增加TIPS,添加图标选择器
This commit is contained in:
parent
907d75f8ad
commit
752a0c6130
|
@ -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++;
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue