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

src/views/setting/menu/index.vue

@@ -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++;

src/views/setting/menu/save.vue

@@ -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>