Skip to content

C
cms_sys
Commit f9604623 authored by yinxr's avatar yinxr
Browse files
Options

Signed-off-by: yinxr 自定义菜单交互、自定义菜单获取数据接口走通

parent 61749c5e
Show whitespace changes
Inline Side-by-side
Showing with 146 additions and 28 deletions
src/main/webapp/WEB-INF/manager/mweixin/menu/index.ftl
View file @ f9604623
<!-- 自定义菜单 -->
<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>
<el-button icon="el-icon-plus"></el-button>
</div>
<!-- 添加父菜单的加号按钮 -->
<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>
\ No newline at end of file
src/main/webapp/static/mweixin/css/custom-menu.css
View file @ f9604623
......@@ -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;
}
......
src/main/webapp/static/mweixin/custom-menu.less
View file @ f9604623
......@@ -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;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment