Signed-off-by: yinxr 自定义菜单的 CURD
This commit is contained in:
parent
e80dcbf285
commit
144968ee40
|
@ -4,10 +4,11 @@
|
||||||
<el-container class="ms-custom-container">
|
<el-container class="ms-custom-container">
|
||||||
<el-header class="ms-header" height="50px">
|
<el-header class="ms-header" height="50px">
|
||||||
<el-row>
|
<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 size="small" @click="menuSort">菜单排序</el-button>
|
||||||
<el-button class="ms-fr" size="small" icon="el-icon-refresh">重置</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">保存</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-row>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-container class="ms-container">
|
<el-container class="ms-container">
|
||||||
|
@ -19,11 +20,13 @@
|
||||||
<el-button icon="el-icon-date"></el-button>
|
<el-button icon="el-icon-date"></el-button>
|
||||||
<div class="ms-create-menu">
|
<div class="ms-create-menu">
|
||||||
<div class="ms-create-sub-menu" v-for="(menu,index) of mainMenuList" :key="index">
|
<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()">{{
|
<el-button type="primary" @click="openSubMenu(index,menu);menu.addSubMenuShow = !menu.addSubMenuShow;$forceUpdate()">{{
|
||||||
menu.menuTitle }}</el-button>
|
menu.menuTitle }}</el-button>
|
||||||
<div class="sub-menu-list" v-show="menu.addSubMenuShow">
|
<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>
|
<el-button icon="el-icon-plus" class="ms-create-btn" @click="addSubMenu"></el-button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -37,15 +40,15 @@
|
||||||
<el-main>
|
<el-main>
|
||||||
<el-card class="custom-menu-card" shadow="never">
|
<el-card class="custom-menu-card" shadow="never">
|
||||||
<div slot="header" class="clearfix">
|
<div slot="header" class="clearfix">
|
||||||
<span>新建菜单</span>
|
<span v-text="customMenuForm.menuId ? '修改菜单' : '新建菜单'"></span>
|
||||||
</div>
|
</div>
|
||||||
<el-form ref="customMenuForm" :rule="customMenuFormRules" :model="customMenuForm" label-width="80px">
|
<el-form ref="customMenuForm" :rules="customMenuFormRules" :model="customMenuForm" label-width="81px">
|
||||||
<el-form-item label="菜单名称" prop="name" class="ms-custom-menu-name">
|
<el-form-item label="菜单名称" prop="menuTitle" class="ms-custom-menu-name">
|
||||||
<el-input v-model="customMenuForm.name" size="medium"></el-input>
|
<el-input v-model="customMenuForm.menuTitle" size="medium"></el-input>
|
||||||
<span>菜单名称字数不多于5个汉字或10个字母</span>
|
<span>菜单名称字数不多于5个汉字或10个字母</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="菜单内容" class="ms-custom-menu-content">
|
<el-form-item label="菜单内容" class="ms-custom-menu-content" prop='menuUrl'>
|
||||||
<el-input v-model="customMenuForm.link" size="medium"></el-input>
|
<el-input v-model="customMenuForm.menuUrl" size="medium"></el-input>
|
||||||
<span>请输入菜单地址</span>
|
<span>请输入菜单地址</span>
|
||||||
<!-- <el-tabs v-model="activeName" @tab-click="">
|
<!-- <el-tabs v-model="activeName" @tab-click="">
|
||||||
<el-tab-pane label="图片" name="picture">
|
<el-tab-pane label="图片" name="picture">
|
||||||
|
@ -85,11 +88,16 @@
|
||||||
el: "#custom-menu",
|
el: "#custom-menu",
|
||||||
data: {
|
data: {
|
||||||
customMenuForm: {
|
customMenuForm: {
|
||||||
name: "",
|
menuTitle: "",
|
||||||
link: ""
|
menuUrl: "",
|
||||||
|
menuId: "",
|
||||||
|
menuMenuId: "", //父菜单编号
|
||||||
|
menuStatus: "", //菜单状态 0:不启用 1:启用
|
||||||
|
menuStyle: "", //类型:1文本 2图文 4外链接
|
||||||
|
menuType: "", //菜单属性 0:链接 1:回复
|
||||||
},
|
},
|
||||||
customMenuFormRules: {
|
customMenuFormRules: {
|
||||||
name: [{
|
menuTitle: [{
|
||||||
required: true,
|
required: true,
|
||||||
message: "请输入菜单名称",
|
message: "请输入菜单名称",
|
||||||
trigger: ["blur", "change"]
|
trigger: ["blur", "change"]
|
||||||
|
@ -100,13 +108,24 @@
|
||||||
message: "长度在 1 到 5 个字符",
|
message: "长度在 1 到 5 个字符",
|
||||||
trigger: ["blur", "change"]
|
trigger: ["blur", "change"]
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
menuUrl: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入菜单地址',
|
||||||
|
trigger: 'change'
|
||||||
|
}, {
|
||||||
|
validator: function (rule, value, callback) {
|
||||||
|
/^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/.test(value) ?
|
||||||
|
callback() : callback('链接不合法')
|
||||||
|
}
|
||||||
|
}]
|
||||||
},
|
},
|
||||||
addMenuBtn: true, //添加菜单按钮
|
addMenuBtn: true, //添加菜单按钮
|
||||||
activeName: "picture", //导航切换 当前激活面板
|
activeName: "picture", //导航切换 当前激活面板
|
||||||
mainMenuList: [],
|
mainMenuList: [],
|
||||||
subMenuList: [],//所有的子菜单
|
subMenuList: [], //所有的子菜单
|
||||||
currentSubMenuList:[],//打开当前父菜单的子菜单列表
|
currentSubMenuList: [], //打开当前父菜单的子菜单列表
|
||||||
|
currentMenuMenuId: '', //打开当前父菜单的菜单ID
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
menuList: function () {
|
menuList: function () {
|
||||||
|
@ -114,10 +133,20 @@
|
||||||
ms.http.get(ms.manager + "/mweixin/menu/list.do")
|
ms.http.get(ms.manager + "/mweixin/menu/list.do")
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
console.log('res菜单', 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.mainMenuList.push(item)
|
||||||
item.menuMenuId != null && that.subMenuList.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) => {
|
}, (err) => {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
})
|
})
|
||||||
|
@ -147,21 +176,29 @@
|
||||||
},
|
},
|
||||||
// 添加子菜单
|
// 添加子菜单
|
||||||
addSubMenu: function () {
|
addSubMenu: function () {
|
||||||
if (this.subMenuList.length > 4) {
|
if(!this.currentMenuMenuId){
|
||||||
|
return this.$message.error("创建子菜单前,必须先创建父菜单");
|
||||||
|
}
|
||||||
|
if (this.currentSubMenuList.length > 4) {
|
||||||
return this.$message.error("子菜单最多5项");
|
return this.$message.error("子菜单最多5项");
|
||||||
}
|
}
|
||||||
this.subMenuList.push({
|
|
||||||
menuTitle: "新建子菜单"
|
|
||||||
});
|
|
||||||
},
|
|
||||||
openSubMenu(index,menu){
|
|
||||||
this.closeAllSubMenu(index);
|
|
||||||
this.$set(menu,'subMenuList',[])
|
|
||||||
console.log('menu',menu);
|
|
||||||
var that = this;
|
var that = this;
|
||||||
|
console.log('that.currentMenuMenuId', that.currentMenuMenuId);
|
||||||
|
this.currentSubMenuList.push({
|
||||||
|
menuTitle: "新建子菜单",
|
||||||
|
menuMenuId: that.currentMenuMenuId,
|
||||||
|
});
|
||||||
|
console.log('currentSubMenuList', this.currentSubMenuList);
|
||||||
|
},
|
||||||
|
openSubMenu(index, menu) {
|
||||||
|
console.log('menu', menu);
|
||||||
|
var that = this;
|
||||||
|
that.customMenuForm = menu
|
||||||
|
that.closeAllSubMenu(index);
|
||||||
that.currentSubMenuList = [];
|
that.currentSubMenuList = [];
|
||||||
console.log('that.subMenuList',that.subMenuList);
|
that.currentMenuMenuId = menu.menuId;
|
||||||
that.subMenuList.forEach(function(item,index){
|
console.log('that.subMenuList', that.subMenuList);
|
||||||
|
that.subMenuList.forEach(function (item, index) {
|
||||||
item.menuMenuId == menu.menuId && that.currentSubMenuList.push(item)
|
item.menuMenuId == menu.menuId && that.currentSubMenuList.push(item)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
@ -171,9 +208,112 @@
|
||||||
this.mainMenuList.forEach(function (item, index) {
|
this.mainMenuList.forEach(function (item, index) {
|
||||||
num != index && (item.addSubMenuShow = false)
|
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();
|
this.menuList();
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue