Skip to content

A
admin-base
Commit e99afee9 authored by 王's avatar 王
Browse files
Options

菜单管理

parent 1bf64e23
Hide whitespace changes
Inline Side-by-side
Showing with 134 additions and 79 deletions
src/components/weChat/index.vue
View file @ e99afee9
...@@ -52,59 +52,86 @@ ...@@ -52,59 +52,86 @@
<div id="js_rightBox" class="portable_editor to_left" style="display: block;"> <div id="js_rightBox" class="portable_editor to_left" style="display: block;">
<div class="editor_inner"> <div class="editor_inner">
<div class="menu_form_hd flex-bt"> <div class="menu_form_hd flex-bt">
<h4 class="global_info"> {{selectedItem && selectedItem.name}} </h4> <h4 class="global_info"> {{selectedChildIndex !== -1 ? buttonList[selectedIndex].sub_button[selectedChildIndex].name : buttonList[selectedIndex].name}} </h4>
<div class="global_extra"> <div class="global_extra">
<a v-if="selectedChildIndex === -1" href="javascript:void(0);" @click="delMenu">删除菜单</a> <a v-if="selectedChildIndex === -1" href="javascript:void(0);" @click="delMenu">删除菜单</a>
<a v-else href="javascript:void(0);" @click="delSubMenu">删除子菜单</a> <a v-else href="javascript:void(0);" @click="delSubMenu">删除子菜单</a>
</div> </div>
</div> </div>
<div class="menu_form_bd" id="view"> <div class="menu_form_bd" id="view">
<div id="js_innerNone" style="display: block;" class="msg_sender_tips tips_global" v-if="selectedItem && selectedItem.sub_button.length > 0"> <div id="js_innerNone" style="display: block;" class="msg_sender_tips tips_global" v-if="buttonList[selectedIndex] && buttonList[selectedIndex].sub_button.length > 0">
已添加子菜单，仅可设置菜单名称。 已添加子菜单，仅可设置菜单名称。
</div> </div>
<div class="frm_control_group js_setNameBox"> <div class="frm_control_group js_setNameBox">
<label for="" class="frm_label"> <strong class="title js_menuTitle">{{selectedChildIndex === -1 ? '菜单名称' : '子菜单名称'}}</strong> </label> <label for="" class="frm_label"> <strong class="title js_menuTitle">{{selectedChildIndex === -1 ? '菜单名称' : '子菜单名称'}}</strong> </label>
<div class="frm_controls"> <div class="frm_controls">
<span class="frm_input_box with_counter counter_in append"> <span class="frm_input_box with_counter counter_in append">
<input :value="selectedItem.name" type="text" class="frm_input js_menu_name" @input="onInput"/> <input :value="selectedChildIndex === -1 ? buttonList[selectedIndex].name : buttonList[selectedIndex].sub_button[selectedChildIndex].name" type="text" class="frm_input js_menu_name" @input="onInput"/>
</span> </span>
<p class="frm_msg fail js_titleEorTips dn" v-if="showErrorTips">字数超过上限</p> <p class="frm_msg fail js_titleEorTips dn" v-if="showErrorTips">字数超过上限</p>
<p class="frm_msg fail js_titlenoTips dn" style="display: none;">请输入菜单名称</p> <p class="frm_msg fail js_titlenoTips dn" style="display: none;">请输入菜单名称</p>
<p class="frm_tips js_titleNolTips">字数不超过4个汉字或8个字母</p> <p class="frm_tips js_titleNolTips">字数不超过4个汉字或8个字母</p>
</div> </div>
</div> </div>
<div class="frm_control_group" :class="selectedItem && (selectedItem.sub_button.length === 0 || selectedChildIndex > -1) ? '' : 'hideMenu'"> <div class="frm_control_group" :class="(selectedChildIndex == -1 && buttonList[selectedIndex].sub_button.length > 0 )? 'hideMenu' : ''">
<label for="" class="frm_label"> <strong class="title js_menuContent">{{selectedChildIndex === -1 ? '菜单内容' : '子菜单内容'}}</strong> </label> <label for="" class="frm_label"> <strong class="title js_menuContent">{{selectedChildIndex === -1 ? '菜单内容' : '子菜单内容'}}</strong> </label>
<div class="frm_controls frm_vertical_pt"> <div class="frm_controls frm_vertical_pt">
<el-radio-group v-model="selectedItem.type" @change="onTypeChange"> <el-radio-group v-model="selectedChildIndex === -1 ? buttonList[selectedIndex].type : buttonList[selectedIndex].sub_button[selectedChildIndex].type" @change="onTypeChange">
<el-radio label="click">发送消息</el-radio> <el-radio label="click">发送消息</el-radio>
<el-radio label="view">跳转网页</el-radio> <el-radio label="view">跳转网页</el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
</div> </div>
<div class="menu_content_container" :class="selectedItem && selectedItem.sub_button.length === 0 ? '' : 'hideMenu'"> <div class="menu_content_container" :class="(selectedChildIndex == -1 && buttonList[selectedIndex].sub_button.length > 0 )? 'hideMenu' : ''">
<div v-if="selectedItem.type === 'view'" class="menu_content url jsMain" id="url" style="display: block;"> <template v-if="selectedChildIndex == -1">
<div v-if="buttonList[selectedIndex].type === 'view'" class="menu_content url jsMain" id="url" style="display: block;">
<p class="menu_content_tips tips_global">订阅者点击该子菜单会跳到以下链接</p> <p class="menu_content_tips tips_global">订阅者点击该子菜单会跳到以下链接</p>
<div class="frm_control_group"> <div class="frm_control_group">
<label for="" class="frm_label">页面地址</label> <label for="" class="frm_label">页面地址</label>
<div class="frm_controls"> <div class="frm_controls">
<span class="frm_input_box"> <span class="frm_input_box">
<input v-model="selectedItem.url" type="text" class="frm_input" name="urlText" /> <input v-model="buttonList[selectedIndex].url" type="text" class="frm_input" name="urlText" />
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div v-else class="menu_content url jsMain" style="display: block;"> <div v-else class="menu_content url jsMain" style="display: block;">
<p class="menu_content_tips tips_global">click</p> <p class="menu_content_tips tips_global">click</p>
<div class="frm_control_group"> <div class="frm_control_group">
<label for="" class="frm_label">key</label> <label for="" class="frm_label">key</label>
<div class="frm_controls"> <div class="frm_controls">
<span class="frm_input_box"> <span class="frm_input_box">
<input v-model="selectedItem.key" type="text" class="frm_input" name="clickKey"/> <input v-model="buttonList[selectedIndex].key" type="text" class="frm_input" name="clickKey"/>
</span> </span>
</div>
</div> </div>
</div> </div>
</div> </template>
<template v-else>
<div v-if="buttonList[selectedIndex].sub_button[selectedChildIndex].type === 'view'" class="menu_content url jsMain" style="display: block;">
<p class="menu_content_tips tips_global">订阅者点击该子菜单会跳到以下链接</p>
<div class="frm_control_group">
<label for="" class="frm_label">页面地址</label>
<div class="frm_controls">
<span class="frm_input_box">
<input v-model="buttonList[selectedIndex].sub_button[selectedChildIndex].url" type="text" class="frm_input" name="urlText" />
</span>
</div>
</div>
</div>
<div v-else class="menu_content url jsMain" style="display: block;">
<p class="menu_content_tips tips_global">click</p>
<div class="frm_control_group">
<label for="" class="frm_label">key</label>
<div class="frm_controls">
<span class="frm_input_box">
<input v-model="buttonList[selectedIndex].sub_button[selectedChildIndex].key" type="text" class="frm_input" name="clickKey"/>
</span>
</div>
</div>
</div>
</template>
</div> </div>
</div> </div>
</div> </div>
...@@ -155,20 +182,12 @@ ...@@ -155,20 +182,12 @@
this.selectedIndex = index this.selectedIndex = index
this.selectedChildIndex = -1 this.selectedChildIndex = -1
this.selectedItem = item this.selectedItem = item
getPublicMenuApi().then(res=> {
if (res.menu && res.menu.button) {
this.buttonList = res.menu.button
}
})
}, },
clickSubMenu(index, item){ clickSubMenu(index, item){
this.selectedChildIndex = index this.selectedChildIndex = index
this.selectedItem = item this.selectedItem = item
getPublicMenuApi().then(res=> { console.log('clickSubMenu', this.buttonList)
if (res.menu && res.menu.button) { console.log('click sub menu', this.buttonList[this.selectedIndex].sub_button[this.selectedChildIndex].type);
this.buttonList = res.menu.button
}
})
}, },
onInput(val) { onInput(val) {
let value = val.target.value let value = val.target.value
...@@ -182,19 +201,27 @@ ...@@ -182,19 +201,27 @@
this.selectedItem.name = value this.selectedItem.name = value
}, },
addSubMenu(){ addSubMenu(){
getPublicMenuApi().then(res=> { let item = {
if (res.menu && res.menu.button) { name: '子菜单名',
this.buttonList = res.menu.button sub_button: [],
this.selectedItem = { type: 'view',
name: '子菜单名', url: ''
sub_button: [], }
type: 'view', this.buttonList[this.selectedIndex].sub_button.push(item)
url: '' this.selectedChildIndex = this.buttonList[this.selectedIndex].sub_button.length - 1
} // getPublicMenuApi().then(res=> {
this.buttonList[this.selectedIndex].sub_button.push(this.selectedItem) // if (res.menu && res.menu.button) {
this.selectedChildIndex = this.buttonList[this.selectedIndex].sub_button.length - 1 // this.buttonList = res.menu.button
} // this.selectedItem = {
}) // name: '子菜单名',
// sub_button: [],
// type: 'view',
// url: ''
// }
// this.buttonList[this.selectedIndex].sub_button.push(this.selectedItem)
// this.selectedChildIndex = this.buttonList[this.selectedIndex].sub_button.length - 1
// }
// })
}, },
delSubMenu(){ delSubMenu(){
this.$confirm('此操作将删除该子菜单?', '提示', { this.$confirm('此操作将删除该子菜单?', '提示', {
...@@ -202,31 +229,45 @@ ...@@ -202,31 +229,45 @@
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
getPublicMenuApi().then(res => { this.buttonList[this.selectedIndex].sub_button.splice(this.selectedChildIndex, 1)
if (res.menu && res.menu.button) { this.selectedChildIndex = this.buttonList[this.selectedIndex].sub_button.length - 1
this.buttonList = res.menu.button this.selectedItem = this.selectedChildIndex > -1 ? this.buttonList[this.selectedIndex][this.selectedChildIndex] : this.buttonList[this.selectedIndex]
this.buttonList[this.selectedIndex].sub_button.splice(this.selectedChildIndex, 1) // getPublicMenuApi().then(res => {
this.selectedChildIndex = this.buttonList[this.selectedIndex].sub_button.length - 1 // if (res.menu && res.menu.button) {
this.selectedItem = this.selectedChildIndex > -1 ? this.buttonList[this.selectedIndex][this.selectedChildIndex] : this.buttonList[this.selectedIndex] // this.buttonList = res.menu.button
} // this.buttonList[this.selectedIndex].sub_button.splice(this.selectedChildIndex, 1)
}); // this.selectedChildIndex = this.buttonList[this.selectedIndex].sub_button.length - 1
// this.selectedItem = this.selectedChildIndex > -1 ? this.buttonList[this.selectedIndex][this.selectedChildIndex] : this.buttonList[this.selectedIndex]
// }
// });
}); });
}, },
onAddMenu(){ onAddMenu(){
getPublicMenuApi().then(res=> { let item = {
if (res.menu && res.menu.button) { name: '菜单名',
this.buttonList = res.menu.button sub_button: [],
this.selectedItem = { type: 'view',
name: '菜单名', url: ''
sub_button: [], }
type: 'view', this.buttonList.push(item)
url: '' this.selectedIndex = this.buttonList.length - 1
} this.selectedChildIndex = -1
this.buttonList.push(this.selectedItem) console.log('this.buttonList', this.buttonList)
this.selectedIndex = this.buttonList.length - 1 console.log('this.buttonList selectedChildIndex', this.selectedChildIndex)
this.selectedChildIndex = -1 // getPublicMenuApi().then(res=> {
} // if (res.menu && res.menu.button) {
}) // this.buttonList = res.menu.button
// this.selectedItem = {
// name: '菜单名',
// sub_button: [],
// type: 'view',
// url: ''
// }
// this.buttonList.push(this.selectedItem)
// this.selectedIndex = this.buttonList.length - 1
// this.selectedChildIndex = -1
// }
// })
}, },
delMenu(){ delMenu(){
this.$confirm('此操作将删除该菜单?', '提示', { this.$confirm('此操作将删除该菜单?', '提示', {
...@@ -234,18 +275,30 @@ ...@@ -234,18 +275,30 @@
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
getPublicMenuApi().then(res=> { this.buttonList.splice(this.selectedIndex,1)
if (res.menu && res.menu.button) { if (this.buttonList.length == 0 ){
this.buttonList = res.menu.button this.buttonList.push({
this.buttonList.splice(this.selectedIndex,1) name: '菜单名',
this.selectedItem = this.buttonList.length > 0 ? this.buttonList[0] : { sub_button: [],
name: '菜单名', type: 'view',
sub_button: [], url: ''
type: 'view', })
url: ''} }
this.selectedChildIndex = -1 this.selectedIndex = this.buttonList.length -1;
} this.selectedChildIndex = -1
}) // getPublicMenuApi().then(res=> {
// if (res.menu && res.menu.button) {
// this.buttonList = res.menu.button
// this.buttonList.splice(this.selectedIndex,1)
// this.selectedItem = this.buttonList.length > 0 ? this.buttonList[0] : {
// name: '菜单名',
// sub_button: [],
// type: 'view',
// url: ''}
// this.selectedChildIndex = -1
// }
// })
}); });
}, },
onTypeChange(val){ onTypeChange(val){
...@@ -253,15 +306,17 @@ ...@@ -253,15 +306,17 @@
}, },
onSave(){ onSave(){
let buttonList = this.buttonList let buttonList = this.buttonList
if (this.selectedIndex > -1 && this.selectedChildIndex > -1) { // if (this.selectedIndex > -1 && this.selectedChildIndex > -1) {
buttonList[this.selectedIndex].sub_button[this.selectedChildIndex] = this.selectedItem // buttonList[this.selectedIndex].sub_button[this.selectedChildIndex] = this.selectedItem
} // }
if (this.selectedIndex > -1 && this.selectedChildIndex === -1) { // if (this.selectedIndex > -1 && this.selectedChildIndex === -1) {
buttonList[this.selectedIndex] = this.selectedItem // buttonList[this.selectedIndex] = this.selectedItem
} // }
let json = { let json = {
buttons: JSON.stringify(buttonList) buttons: JSON.stringify(buttonList)
} }
console.log('json', buttonList)
return
savePublicMenuApi(json).then(res=>{ savePublicMenuApi(json).then(res=>{
if (res.errcode === 0){ if (res.errcode === 0){
this.$message({ this.$message({
......
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