Signed-off-by: yinxr 自定义菜单交互、自定义菜单获取数据接口走通
This commit is contained in:
parent
61749c5e4d
commit
f960462304
|
@ -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 == '自定义菜单'">
|
<div id="custom-menu" class="ms-custom-menu ms-weixin-content" v-if="menuVue.menuActive == '自定义菜单'">
|
||||||
<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">删除</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">重置</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">保存</el-button>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
@ -17,11 +18,18 @@
|
||||||
<el-footer>
|
<el-footer>
|
||||||
<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">
|
<div class="ms-create-sub-menu" v-for="(menu,index) of mainMenuList" :key="index">
|
||||||
<el-button type="primary" @click='addSubMenuShow = !addSubMenuShow'>新建菜单</el-button>
|
<el-button type="primary" @click="openSubMenu(index,menu);menu.addSubMenuShow = !menu.addSubMenuShow;$forceUpdate()">{{
|
||||||
<el-button icon="el-icon-plus" v-show='addSubMenuShow'></el-button>
|
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>
|
</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>
|
</div>
|
||||||
</el-footer>
|
</el-footer>
|
||||||
</el-container>
|
</el-container>
|
||||||
|
@ -31,13 +39,13 @@
|
||||||
<div slot="header" class="clearfix">
|
<div slot="header" class="clearfix">
|
||||||
<span>新建菜单</span>
|
<span>新建菜单</span>
|
||||||
</div>
|
</div>
|
||||||
<el-form ref="customMenuForm" :rule='customMenuFormRules' :model="customMenuForm" label-width="80px">
|
<el-form ref="customMenuForm" :rule="customMenuFormRules" :model="customMenuForm" label-width="80px">
|
||||||
<el-form-item label="菜单名称" prop='name' class="ms-custom-menu-name">
|
<el-form-item label="菜单名称" prop="name" class="ms-custom-menu-name">
|
||||||
<el-input v-model="customMenuForm.name" size='mini'></el-input>
|
<el-input v-model="customMenuForm.name" size="mini"></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">
|
||||||
<el-input v-model="customMenuForm.link" size='mini'></el-input>
|
<el-input v-model="customMenuForm.link" size="mini"></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">
|
||||||
|
@ -77,29 +85,92 @@
|
||||||
el: "#custom-menu",
|
el: "#custom-menu",
|
||||||
data: {
|
data: {
|
||||||
customMenuForm: {
|
customMenuForm: {
|
||||||
name: '',
|
name: "",
|
||||||
link:'',
|
link: ""
|
||||||
},
|
},
|
||||||
customMenuFormRules: {
|
customMenuFormRules: {
|
||||||
name: [{
|
name: [{
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入菜单名称',
|
message: "请输入菜单名称",
|
||||||
trigger: ['blur', 'change']
|
trigger: ["blur", "change"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
min: 1,
|
min: 1,
|
||||||
max: 5,
|
max: 5,
|
||||||
message: '长度在 1 到 5 个字符',
|
message: "长度在 1 到 5 个字符",
|
||||||
trigger: ['blur', 'change']
|
trigger: ["blur", "change"]
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
},
|
},
|
||||||
addSubMenuShow: false, //子菜单添加弹窗
|
addMenuBtn: true, //添加菜单按钮
|
||||||
activeName: 'picture'
|
activeName: "picture", //导航切换 当前激活面板
|
||||||
|
mainMenuList: [],
|
||||||
|
subMenuList: [],//所有的子菜单
|
||||||
},
|
},
|
||||||
methods: {
|
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>
|
</script>
|
|
@ -167,6 +167,7 @@ textarea::-webkit-input-placeholder {
|
||||||
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer > .el-button {
|
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer > .el-button {
|
||||||
width: 40px !important;
|
width: 40px !important;
|
||||||
height: 50px !important;
|
height: 50px !important;
|
||||||
|
min-width: 40px;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
border-right: 1px solid #e6e6e6 !important;
|
border-right: 1px solid #e6e6e6 !important;
|
||||||
|
@ -177,7 +178,7 @@ textarea::-webkit-input-placeholder {
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
}
|
}
|
||||||
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu {
|
.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu {
|
||||||
flex: 1;
|
width: 240px;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
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 {
|
.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%;
|
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;
|
position: absolute;
|
||||||
top: -60px;
|
bottom: 60px;
|
||||||
left: 0;
|
left: 0;
|
||||||
border: 1px solid #e6e6e6 !important;
|
border: 1px solid #e6e6e6 !important;
|
||||||
width: 100%;
|
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 {
|
.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;
|
padding: 0 !important;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
|
@ -35,6 +35,7 @@
|
||||||
border-top: 1px solid @borderColor !important;
|
border-top: 1px solid @borderColor !important;
|
||||||
>.el-button {
|
>.el-button {
|
||||||
.ms-width-height(40px, 50px) !important;
|
.ms-width-height(40px, 50px) !important;
|
||||||
|
min-width: 40px;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
border-right: 1px solid @borderColor !important;
|
border-right: 1px solid @borderColor !important;
|
||||||
|
@ -45,7 +46,7 @@
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
}
|
}
|
||||||
.ms-create-menu {
|
.ms-create-menu {
|
||||||
flex: 1;
|
width: 240px;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
.ms-flex(space-between);
|
.ms-flex(space-between);
|
||||||
.el-button {
|
.el-button {
|
||||||
|
@ -59,20 +60,39 @@
|
||||||
.ms-create-sub-menu {
|
.ms-create-sub-menu {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
// 主菜单
|
||||||
>.el-button:first-child {
|
>.el-button:first-child {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
border-right:1px solid @borderColor !important;
|
||||||
|
padding: 10px !important;
|
||||||
|
.ms-ellipsis-clamp(1);
|
||||||
}
|
}
|
||||||
>.el-button:last-child {
|
// 添加子菜单
|
||||||
|
.sub-menu-list{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -60px;
|
bottom:60px;
|
||||||
left: 0;
|
left: 0;
|
||||||
border: 1px solid @borderColor !important;
|
border: 1px solid @borderColor !important;
|
||||||
width: 100%;
|
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 {
|
.el-button--default {
|
||||||
border-left: 1px solid @borderColor !important;
|
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue