ak
/
msopen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
yinxr 2019-02-12 17:00:53 +08:00
parent e80dcbf285
commit 144968ee40
1 changed files with 169 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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: [], //打开当前父菜单的子菜单列表
currentMenuMenuId: '', //打开当前父菜单的菜单ID
},
methods: {
menuList: function () {
@ -114,10 +133,20 @@
ms.http.get(ms.manager + "/mweixin/menu/list.do")
.then((res) => {
console.log('res菜单', res);
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,19 +176,27 @@
},
// 添加子菜单
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);
var that = this;
that.customMenuForm = menu
that.closeAllSubMenu(index);
that.currentSubMenuList = [];
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,6 +208,109 @@
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 () {