From 752a0c613031cd3704cb7bcde59cc7bd57d299a0 Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Thu, 12 Aug 2021 21:16:44 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E6=8E=92=E5=BA=8F=E4=BC=98=E5=8C=96=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E8=8F=9C=E5=8D=95=E6=A0=91=E8=BF=87=E6=BB=A4=E5=A4=B1?=
 =?UTF-8?q?=E6=95=88=EF=BC=8C=E5=A2=9E=E5=8A=A0TIPS=EF=BC=8C=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=9B=BE=E6=A0=87=E9=80=89=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/setting/menu/index.vue | 10 +++++++---
 src/views/setting/menu/save.vue  | 27 +++++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/views/setting/menu/index.vue b/src/views/setting/menu/index.vue
index b9818411..f76baf6f 100644
--- a/src/views/setting/menu/index.vue
+++ b/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++;
diff --git a/src/views/setting/menu/save.vue b/src/views/setting/menu/save.vue
index f4b1caac..9ef5443d 100644
--- a/src/views/setting/menu/save.vue
+++ b/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>