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 == '自定义菜单'">
|
||||
<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>
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue