Signed-off-by: yinxr 自定义菜单的 CURD

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

@@ -4,10 +4,11 @@
 	<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 type="danger" size="small" icon="el-icon-delet" @click='menuDel'>删除</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-button class="ms-fr" size="small" icon="el-icon-refresh" @click='resetForm'>重置</el-button>
+				<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets" @click='menuSave'>保存</el-button>
+				<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets" @click='menuCreate'>发布菜单</el-button>
 			</el-row>
 		</el-header>
 		<el-container class="ms-container">
@@ -19,11 +20,13 @@
 						<el-button icon="el-icon-date"></el-button>
 						<div class="ms-create-menu">
 							<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 currentSubMenuList" :key="index" v-text="sub.menuTitle" class="sub-menu-item"></el-button>
+									<el-button v-for="(sub,index) of currentSubMenuList" :key="index" v-text="sub.menuTitle" class="sub-menu-item"
+									 @click='customMenuForm = sub;$forceUpdate();'></el-button>
 									<!-- 添加子菜单的加号按钮 -->
 									<el-button icon="el-icon-plus" class="ms-create-btn" @click="addSubMenu"></el-button>
 								</div>
@@ -37,15 +40,15 @@
 			<el-main>
 				<el-card class="custom-menu-card" shadow="never">
 					<div slot="header" class="clearfix">
-						<span>新建菜单</span>
+						<span v-text="customMenuForm.menuId ? '修改菜单' : '新建菜单'"></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="medium"></el-input>
+					<el-form ref="customMenuForm" :rules="customMenuFormRules" :model="customMenuForm" label-width="81px">
+						<el-form-item label="菜单名称" prop="menuTitle" class="ms-custom-menu-name">
+							<el-input v-model="customMenuForm.menuTitle" size="medium"></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="medium"></el-input>
+						<el-form-item label="菜单内容" class="ms-custom-menu-content" prop='menuUrl'>
+							<el-input v-model="customMenuForm.menuUrl" size="medium"></el-input>
 							<span>请输入菜单地址</span>
 							<!-- <el-tabs v-model="activeName" @tab-click="">
 								<el-tab-pane label="图片" name="picture">
@@ -85,11 +88,16 @@
 		el: "#custom-menu",
 		data: {
 			customMenuForm: {
-				name: "",
-				link: ""
+				menuTitle: "",
+				menuUrl: "",
+				menuId: "",
+				menuMenuId: "", //父菜单编号
+				menuStatus: "", //菜单状态 0：不启用 1：启用
+				menuStyle: "", //类型：1文本 2图文 4外链接
+				menuType: "", //菜单属性 0:链接 1:回复
 			},
 			customMenuFormRules: {
-				name: [{
+				menuTitle: [{
 						required: true,
 						message: "请输入菜单名称",
 						trigger: ["blur", "change"]
@@ -100,13 +108,24 @@
 						message: "长度在 1 到 5 个字符",
 						trigger: ["blur", "change"]
 					}
-				]
+				],
+				menuUrl: [{
+					required: true,
+					message: '请输入菜单地址',
+					trigger: 'change'
+				}, {
+					validator: function (rule, value, callback) {
+						/^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?$/.test(value) ?
+							callback() : callback('链接不合法')
+					}
+				}]
 			},
 			addMenuBtn: true, //添加菜单按钮
 			activeName: "picture", //导航切换  当前激活面板
 			mainMenuList: [],
-			subMenuList: [],//所有的子菜单
-			currentSubMenuList:[],//打开当前父菜单的子菜单列表
+			subMenuList: [], //所有的子菜单
+			currentSubMenuList: [], //打开当前父菜单的子菜单列表
+			currentMenuMenuId: '', //打开当前父菜单的菜单ID
 		},
 		methods: {
 			menuList: function () {
@@ -114,10 +133,20 @@
 				ms.http.get(ms.manager + "/mweixin/menu/list.do")
 					.then((res) => {
 						console.log('res菜单', res);
-						res.rows && res.rows.forEach(function(item,index){
+						that.mainMenuList = []
+						that.subMenuList = []
+						res.rows && res.rows.forEach(function (item, index) {
 							item.menuMenuId == null && that.mainMenuList.push(item)
 							item.menuMenuId != null && that.subMenuList.push(item)
 						})
+						// 初始化显示第一个菜单
+						if(that.mainMenuList.length){
+							that.customMenuForm = that.mainMenuList[0]
+						}else{
+							that.mainMenuList.push(that.customMenuForm)
+							// 没有一个菜单的时候
+							that.mainMenuList[0].menuTitle = '新建菜单'
+						}
 					}, (err) => {
 						console.log(err)
 					})
@@ -147,21 +176,29 @@
 			},
 			// 添加子菜单
 			addSubMenu: function () {
-				if (this.subMenuList.length > 4) {
+				if(!this.currentMenuMenuId){
+					return this.$message.error("创建子菜单前，必须先创建父菜单");
+				}
+				if (this.currentSubMenuList.length > 4) {
 					return this.$message.error("子菜单最多5项");
 				}
-				this.subMenuList.push({
-					menuTitle: "新建子菜单"
+				var that = this;
+				console.log('that.currentMenuMenuId', that.currentMenuMenuId);
+				this.currentSubMenuList.push({
+					menuTitle: "新建子菜单",
+					menuMenuId: that.currentMenuMenuId,
 				});
+				console.log('currentSubMenuList', this.currentSubMenuList);
 			},
-			openSubMenu(index,menu){
-				this.closeAllSubMenu(index);
-				this.$set(menu,'subMenuList',[])
-				console.log('menu',menu);
+			openSubMenu(index, menu) {
+				console.log('menu', menu);
 				var that = this;
+				that.customMenuForm = menu
+				that.closeAllSubMenu(index);
 				that.currentSubMenuList = [];
-				console.log('that.subMenuList',that.subMenuList);
-				that.subMenuList.forEach(function(item,index){
+				that.currentMenuMenuId = menu.menuId;
+				console.log('that.subMenuList', that.subMenuList);
+				that.subMenuList.forEach(function (item, index) {
 					item.menuMenuId == menu.menuId && that.currentSubMenuList.push(item)
 				})
 			},
@@ -171,9 +208,112 @@
 				this.mainMenuList.forEach(function (item, index) {
 					num != index && (item.addSubMenuShow = false)
 				})
+			},
+			// 保存菜单
+			menuSave: function () {
+				// 表单校验
+				var that = this;
+				this.$refs.customMenuForm.validate(function (ispass, object) {
+					if (ispass) {
+						// 判断保存的菜单类型，这里先简单处理，写死
+						that.customMenuForm.menuStatus = 1
+						that.customMenuForm.menuStyle = 4 //类型：1文本 2图文 4外链接
+						that.customMenuForm.menuType = 0 //菜单属性 0:链接 1:回复
+						ms.http.post(ms.manager + "/mweixin/menu/save.do", that.customMenuForm)
+							.then(function (res) {
+								that.customMenuForm.menuStatus = that.customMenuForm.menuStyle = that.customMenuForm.menuType = ''
+								if(res.menuId){
+									that.$message.success('菜单保存成功')
+									that.menuList();
+								}else{
+									that.$message.error(res.resultMsg)
+								}
+							}, function (err) {
+								console.log(err)
+							})
+					}
+				})
+			},
+			// 删除菜单
+			menuDel: function () {
+				var that = this;
+				// 当存在子菜单的时候，不得删除菜单
+				if(that.customMenuForm.menuMenuId == null && that.currentSubMenuList.length){
+					return that.$message.error('当前菜单存在子菜单，不得删除')
+				}
+				if(!that.customMenuForm.menuId){
+					return that.$message.error('请新建菜单之后，再进行删除')
+				}
+				this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					ms.http.post(ms.manager + "/mweixin/menu/delete.do", {
+							ids: that.customMenuForm.menuId
+						})
+						.then(function (res) {
+							that.$message({
+								type: 'success',
+								message: '删除成功!'
+							});
+							// 清空表单值
+							that.resetForm();
+							// 刷新菜单列表
+							that.menuList();
+						}, function (err) {
+							console.log(err)
+						})
+				}).catch(() => {
+					this.$message({
+						type: 'info',
+						message: '已取消删除'
+					});
+				})
+			},
+			// 发布菜单
+			menuCreate: function () {
+				var that = this;
+				this.$confirm('此操作将发布公众号菜单, 是否继续?', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					ms.http.get(ms.manager + "/mweixin/menu/create.do")
+						.then(function (res) {
+							if(res.result){
+								that.$message({
+									type: 'success',
+									message: '发布成功!，菜单将于2小时后生效'
+								});
+							}else{
+								that.$message({
+									type: 'error',
+									message: '发布失败！'
+								});
+							}
+						}, function (err) {
+							console.log(err)
+						})
+				}).catch(() => {
+					this.$message({
+						type: 'info',
+						message: '已取消删除'
+					});
+				})
+			},
+			// 重置
+			resetForm:function(){
+				// this.$refs.customMenuForm.resetFields();未在表单中，清空不了
+				this.customMenuForm.menuStatus = 
+				this.customMenuForm.menuStyle = 
+				this.customMenuForm.menuType = 
+				this.customMenuForm.menuTitle = 
+				this.customMenuForm.menuUrl = 
+				''
 			}
 		},
-		mounted:function() {
+		mounted: function () {
 			this.menuList();
 		},
 	});