Signed-off-by: yinxr 自定义菜单交互、自定义菜单获取数据接口走通

src/main/webapp/WEB-INF/manager/mweixin/menu/index.ftl

@@ -1,10 +1,11 @@
 <!-- 自定义菜单 -->
-<link rel="stylesheet" href="../../../../static/mweixin/css/custom-menu.css">
+<link rel="stylesheet" href="../../../../static/mweixin/css/custom-menu.css" />
 <div id="custom-menu" class="ms-custom-menu ms-weixin-content" v-if="menuVue.menuActive == '自定义菜单'">
 	<el-container class="ms-custom-container">
 		<el-header class="ms-header" height="50px">
 			<el-row>
 				<el-button type="danger" size="small" icon="el-icon-delet">删除</el-button>
+				<el-button size="small" @click="menuSort">菜单排序</el-button>
 				<el-button class="ms-fr" size="small" icon="el-icon-refresh">重置</el-button>
 				<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets">保存</el-button>
 			</el-row>
@@ -17,11 +18,18 @@
 					<el-footer>
 						<el-button icon="el-icon-date"></el-button>
 						<div class="ms-create-menu">
-							<div class="ms-create-sub-menu">
-								<el-button type="primary" @click='addSubMenuShow = !addSubMenuShow'>新建菜单</el-button>
-								<el-button icon="el-icon-plus" v-show='addSubMenuShow'></el-button>
+							<div class="ms-create-sub-menu" v-for="(menu,index) of mainMenuList" :key="index">
+								<el-button type="primary" @click="openSubMenu(index,menu);menu.addSubMenuShow = !menu.addSubMenuShow;$forceUpdate()">{{
+									menu.menuTitle }}</el-button>
+								<div class="sub-menu-list" v-show="menu.addSubMenuShow">
+									<!-- 子菜单 -->
+									<el-button v-for="(sub,index) of menu.subMenuList" :key="index" v-text="sub.menuTitle" class="sub-menu-item"></el-button>
+									<!-- 添加子菜单的加号按钮 -->
+									<el-button icon="el-icon-plus" class="ms-create-btn" @click="addSubMenu"></el-button>
+								</div>
 							</div>
-							<el-button icon="el-icon-plus"></el-button>
+							<!-- 添加父菜单的加号按钮 -->
+							<el-button icon="el-icon-plus" @click="addMenu" v-show="addMenuBtn && mainMenuList.length<3" class="add-menu"></el-button>
 						</div>
 					</el-footer>
 				</el-container>
@@ -31,13 +39,13 @@
 					<div slot="header" class="clearfix">
 						<span>新建菜单</span>
 					</div>
-					<el-form ref="customMenuForm" :rule='customMenuFormRules' :model="customMenuForm" label-width="80px">
-						<el-form-item label="菜单名称" prop='name' class="ms-custom-menu-name">
-							<el-input v-model="customMenuForm.name" size='mini'></el-input>
+					<el-form ref="customMenuForm" :rule="customMenuFormRules" :model="customMenuForm" label-width="80px">
+						<el-form-item label="菜单名称" prop="name" class="ms-custom-menu-name">
+							<el-input v-model="customMenuForm.name" size="mini"></el-input>
 							<span>菜单名称字数不多于5个汉字或10个字母</span>
 						</el-form-item>
 						<el-form-item label="菜单内容" class="ms-custom-menu-content">
-							<el-input v-model="customMenuForm.link" size='mini'></el-input>
+							<el-input v-model="customMenuForm.link" size="mini"></el-input>
 							<span>请输入菜单地址</span>
 							<!-- <el-tabs v-model="activeName" @tab-click="">
 								<el-tab-pane label="图片" name="picture">
@@ -77,29 +85,92 @@
 		el: "#custom-menu",
 		data: {
 			customMenuForm: {
-				name: '',
-				link:'',
+				name: "",
+				link: ""
 			},
 			customMenuFormRules: {
 				name: [{
 						required: true,
-						message: '请输入菜单名称',
-						trigger: ['blur', 'change']
+						message: "请输入菜单名称",
+						trigger: ["blur", "change"]
 					},
 					{
 						min: 1,
 						max: 5,
-						message: '长度在 1 到 5 个字符',
-						trigger: ['blur', 'change']
+						message: "长度在 1 到 5 个字符",
+						trigger: ["blur", "change"]
 					}
-				],
+				]
 			},
-			addSubMenuShow: false, //子菜单添加弹窗
-			activeName: 'picture'
+			addMenuBtn: true, //添加菜单按钮
+			activeName: "picture", //导航切换  当前激活面板
+			mainMenuList: [],
+			subMenuList: [],//所有的子菜单
 		},
 		methods: {
-
-		}
-
-	})
+			menuList: function () {
+				var that = this;
+				ms.http.get(ms.manager + "/mweixin/menu/list.do")
+					.then((res) => {
+						console.log('res菜单', res);
+						res.rows && res.rows.forEach(function(item,index){
+							item.menuMenuId == null && that.mainMenuList.push(item)
+							item.menuMenuId != null && that.subMenuList.push(item)
+						})
+					}, (err) => {
+						console.log(err)
+					})
+			},
+			// 菜单排序
+			menuSort: function () {
+				event.target.innerText = "完成";
+			},
+			// 添加菜单
+			addMenu: function () {
+				this.mainMenuList.push({
+					menuTitle: "新建菜单"
+				});
+				this.$nextTick(function () {
+					var that = this;
+					Array.prototype.forEach.call(
+						document.querySelectorAll(".ms-create-sub-menu"),
+						function (item, index) {
+							item.style.width = '80px';
+						}
+					);
+					document.querySelector(".add-menu").style.width = '80px';
+				});
+				if (this.mainMenuList.length == 3) {
+					return (this.addMenuBtn = false);
+				}
+			},
+			// 添加子菜单
+			addSubMenu: function () {
+				if (this.subMenuList.length > 4) {
+					return this.$message.error("子菜单最多5项");
+				}
+				this.subMenuList.push({
+					menuTitle: "新建子菜单"
+				});
+			},
+			openSubMenu(index,menu){
+				this.closeAllSubMenu(index);
+				this.$set(menu,'subMenuList',[])
+				var that = this;
+				that.subMenuList.forEach(function(item,index){
+					item.menuMenuId == menuId && that.subMenuList.push(item)
+				})
+			},
+			// 关闭所有的子菜单弹出层
+			closeAllSubMenu: function (num) {
+				// 确保当前的菜单不被重置成false
+				this.mainMenuList.forEach(function (item, index) {
+					num != index && (item.addSubMenuShow = false)
+				})
+			}
+		},
+		mounted:function() {
+			this.menuList();
+		},
+	});
 </script>

src/main/webapp/static/mweixin/css/custom-menu.css

@@ -167,6 +167,7 @@ textarea::-webkit-input-placeholder {
 .ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer > .el-button {
   width: 40px !important;
   height: 50px !important;
+  min-width: 40px;
   padding: 0 !important;
   border: none !important;
   border-right: 1px solid #e6e6e6 !important;
@@ -177,7 +178,7 @@ textarea::-webkit-input-placeholder {
   background: transparent !important;
 }
 .ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu {
-  flex: 1;
+  width: 240px;
   font-size: 0;
   display: flex;
   justify-content: space-between;
@@ -196,16 +197,41 @@ textarea::-webkit-input-placeholder {
 }
 .ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu > .el-button:first-child {
   width: 100%;
+  border-right: 1px solid #e6e6e6 !important;
+  padding: 10px !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
 }
-.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu > .el-button:last-child {
+.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu .sub-menu-list {
   position: absolute;
-  top: -60px;
+  bottom: 60px;
   left: 0;
   border: 1px solid #e6e6e6 !important;
   width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+}
+.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu .sub-menu-list > button {
+  margin-left: 0 !important;
+  border: none !important;
+  border-bottom: 1px solid #e6e6e6 !important;
+}
+.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu .sub-menu-list .ms-create-btn {
+  border-bottom: none !important;
+}
+.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu .sub-menu-list .sub-menu-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  padding: 10px !important;
 }
 .ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-button--default {
-  border-left: 1px solid #e6e6e6 !important;
   padding: 0 !important;
   flex: 1;
 }

src/main/webapp/static/mweixin/custom-menu.less

@@ -35,6 +35,7 @@
                     border-top: 1px solid @borderColor !important;
                     >.el-button {
                         .ms-width-height(40px, 50px) !important;
+                        min-width: 40px;
                         padding: 0 !important;
                         border: none !important;
                         border-right: 1px solid @borderColor !important;
@@ -45,7 +46,7 @@
                         background: transparent !important;
                     }
                     .ms-create-menu {
-                        flex: 1;
+                        width: 240px;
                         font-size: 0;
                         .ms-flex(space-between);
                         .el-button {
@@ -59,20 +60,39 @@
                         .ms-create-sub-menu {
                             flex: 1;
                             position: relative;
+                            // 主菜单
                             >.el-button:first-child {
                                 width: 100%;
+                                border-right:1px solid @borderColor !important;
+                                padding: 10px !important;
+                                .ms-ellipsis-clamp(1);
                             }
-                            >.el-button:last-child {
+                            // 添加子菜单
+                            .sub-menu-list{
                                 position: absolute;
-                                top: -60px;
+                                bottom:60px;
                                 left: 0;
                                 border: 1px solid @borderColor !important;
                                 width: 100%;
+                                .ms-flex(flex-start);
+                                flex-direction: column;
+                                >button{
+                                    margin-left: 0 !important;
+                                    border: none !important;
+                                    border-bottom: 1px solid @borderColor !important;
+                                }
+                                .ms-create-btn{
+                                    border-bottom: none !important;
+                                }
+                                // 子菜单列表
+                                .sub-menu-item{
+                                    .ms-ellipsis-clamp(1);
+                                    padding:10px !important;
+                                }
                             }
                         }
                         // 添加菜单
                         .el-button--default {
-                            border-left: 1px solid @borderColor !important;
                             padding: 0 !important;
                             flex: 1;
                         }