|
|
|
@ -23,25 +23,40 @@ SOFTWARE.
|
|
|
|
-->
|
|
|
|
-->
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="app-container">
|
|
|
|
<div class="app-container">
|
|
|
|
<div class="public-account-management clearfix" v-loading="saveLoading">
|
|
|
|
<!-- 搜索工作栏 -->
|
|
|
|
|
|
|
|
<el-form ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
|
|
|
|
|
<el-form-item label="公众号" prop="accountId">
|
|
|
|
|
|
|
|
<el-select v-model="accountId" placeholder="请选择公众号">
|
|
|
|
|
|
|
|
<el-option v-for="item in accounts" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
|
|
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item>
|
|
|
|
|
|
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
|
|
|
|
|
|
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="public-account-management clearfix" v-loading="loading">
|
|
|
|
<!--左边配置菜单-->
|
|
|
|
<!--左边配置菜单-->
|
|
|
|
<div class="left">
|
|
|
|
<div class="left">
|
|
|
|
<div class="weixin-hd">
|
|
|
|
<div class="weixin-hd">
|
|
|
|
<div class="weixin-title">
|
|
|
|
<div class="weixin-title">{{menuName}}</div>
|
|
|
|
{{menuName}}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="weixin-menu menu_main clearfix">
|
|
|
|
<div class="weixin-menu menu_main clearfix">
|
|
|
|
<div class="menu_bottom" v-for="(item, i) of menu.button" :key="i" >
|
|
|
|
<div class="menu_bottom" v-for="(item, i) of menuList" :key="i" >
|
|
|
|
<!-- 一级菜单 -->
|
|
|
|
<!-- 一级菜单 -->
|
|
|
|
<div @click="menuFun(i,item)" class="menu_item el-icon-s-fold" :class="{'active': isActive == i}">{{item.name}}</div>
|
|
|
|
<div @click="menuClick(i, item)" class="menu_item el-icon-s-fold" :class="{'active': isActive === i}">{{item.name}}</div>
|
|
|
|
<!-- 以下为二级菜单-->
|
|
|
|
<!-- 以下为二级菜单-->
|
|
|
|
<div class="submenu" v-if="isSubMenuFlag == i">
|
|
|
|
<div class="submenu" v-if="isSubMenuFlag === i">
|
|
|
|
<div class="subtitle menu_bottom" v-if="item.sub_button" v-for="(subItem, k) in item.sub_button" :key="k">
|
|
|
|
<div class="subtitle menu_bottom" v-if="item.children" v-for="(subItem, k) in item.children" :key="k">
|
|
|
|
<div class="menu_subItem" :class="{'active': isSubMenuActive == i + '' +k}" @click="subMenuFun(subItem, i, k)">{{subItem.name}}</div>
|
|
|
|
<div class="menu_subItem" :class="{'active': isSubMenuActive === i + '' + k}" @click="subMenuClick(subItem, i, k)">
|
|
|
|
|
|
|
|
{{subItem.name}}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号 -->
|
|
|
|
<!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号 -->
|
|
|
|
<div class="menu_bottom menu_addicon" v-if="!item.sub_button || item.sub_button.length < 5" @click="addSubMenu(i,item)"><i class="el-icon-plus"></i></div>
|
|
|
|
<div class="menu_bottom menu_addicon" v-if="!item.children || item.children.length < 5" @click="addSubMenu(i,item)">
|
|
|
|
|
|
|
|
<i class="el-icon-plus" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 一级菜单加号 -->
|
|
|
|
<!-- 一级菜单加号 -->
|
|
|
|
@ -69,11 +84,11 @@ SOFTWARE.
|
|
|
|
<el-option v-for="item in menuOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
|
|
|
|
<el-option v-for="item in menuOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="configur_content" v-if="tempObj.type == 'view'">
|
|
|
|
<div class="configur_content" v-if="tempObj.type === 'view'">
|
|
|
|
<span>跳转链接：</span>
|
|
|
|
<span>跳转链接：</span>
|
|
|
|
<el-input class="input_width" v-model="tempObj.url" placeholder="请输入链接" clearable></el-input>
|
|
|
|
<el-input class="input_width" v-model="tempObj.url" placeholder="请输入链接" clearable></el-input>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="configur_content" v-if="tempObj.type == 'miniprogram'">
|
|
|
|
<div class="configur_content" v-if="tempObj.type === 'miniprogram'">
|
|
|
|
<div class="applet">
|
|
|
|
<div class="applet">
|
|
|
|
<span>小程序的appid：</span>
|
|
|
|
<span>小程序的appid：</span>
|
|
|
|
<el-input class="input_width" v-model="tempObj.appid" placeholder="请输入小程序的appid" clearable></el-input>
|
|
|
|
<el-input class="input_width" v-model="tempObj.appid" placeholder="请输入小程序的appid" clearable></el-input>
|
|
|
|
@ -127,6 +142,8 @@ SOFTWARE.
|
|
|
|
import WxReplySelect from '@/views/mp/components/wx-news/main.vue'
|
|
|
|
import WxReplySelect from '@/views/mp/components/wx-news/main.vue'
|
|
|
|
import WxNews from '@/views/mp/components/wx-news/main.vue';
|
|
|
|
import WxNews from '@/views/mp/components/wx-news/main.vue';
|
|
|
|
import WxMaterialSelect from '@/views/mp/components/wx-news/main.vue'
|
|
|
|
import WxMaterialSelect from '@/views/mp/components/wx-news/main.vue'
|
|
|
|
|
|
|
|
import {getMenuList} from "@/api/mp/menu";
|
|
|
|
|
|
|
|
import {getSimpleAccounts} from "@/api/mp/account";
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: 'mpMenu',
|
|
|
|
name: 'mpMenu',
|
|
|
|
@ -137,11 +154,22 @@ SOFTWARE.
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data(){
|
|
|
|
data(){
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
|
|
|
|
// 遮罩层
|
|
|
|
|
|
|
|
loading: true,
|
|
|
|
|
|
|
|
// 显示搜索条件
|
|
|
|
|
|
|
|
showSearch: true,
|
|
|
|
|
|
|
|
// 查询参数
|
|
|
|
|
|
|
|
accountId: undefined,
|
|
|
|
|
|
|
|
menuList: {
|
|
|
|
|
|
|
|
children: [],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
showRightFlag:false, // 右边配置显示默认详情还是配置详情
|
|
|
|
showRightFlag:false, // 右边配置显示默认详情还是配置详情
|
|
|
|
menu:{
|
|
|
|
menu:{ // 横向菜单
|
|
|
|
button:[
|
|
|
|
button:[
|
|
|
|
]
|
|
|
|
]
|
|
|
|
},//横向菜单
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
isActive: -1,// 一级菜单点中样式
|
|
|
|
isActive: -1,// 一级菜单点中样式
|
|
|
|
isSubMenuActive: -1, // 一级菜单点中样式
|
|
|
|
isSubMenuActive: -1, // 一级菜单点中样式
|
|
|
|
isSubMenuFlag: -1, // 二级菜单显示标志
|
|
|
|
isSubMenuFlag: -1, // 二级菜单显示标志
|
|
|
|
@ -186,21 +214,65 @@ SOFTWARE.
|
|
|
|
label: '选择地理位置'
|
|
|
|
label: '选择地理位置'
|
|
|
|
}],
|
|
|
|
}],
|
|
|
|
dialogNewsVisible: false,
|
|
|
|
dialogNewsVisible: false,
|
|
|
|
saveLoading:false,
|
|
|
|
hackResetWxReplySelect: false,
|
|
|
|
hackResetWxReplySelect:false
|
|
|
|
|
|
|
|
|
|
|
|
// 公众号账号列表
|
|
|
|
|
|
|
|
accounts: [],
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
created() {
|
|
|
|
this.getMenuFun()
|
|
|
|
getSimpleAccounts().then(response => {
|
|
|
|
},
|
|
|
|
this.accounts = response.data;
|
|
|
|
mounted() {
|
|
|
|
// 默认选中第一个
|
|
|
|
|
|
|
|
if (this.accounts.length > 0) {
|
|
|
|
},
|
|
|
|
this.setAccountId(this.accounts[0].id);
|
|
|
|
filters:{
|
|
|
|
}
|
|
|
|
|
|
|
|
// 加载数据
|
|
|
|
|
|
|
|
this.getList();
|
|
|
|
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
|
|
|
|
|
menuKeyLength:function() {
|
|
|
|
|
|
|
|
// menuObj 的长度，当长度小于 3 才显示一级菜单的加号
|
|
|
|
|
|
|
|
return this.menu.button.length;
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
// ======================== 列表查询 ========================
|
|
|
|
|
|
|
|
/** 设置账号编号 */
|
|
|
|
|
|
|
|
setAccountId(accountId) {
|
|
|
|
|
|
|
|
this.accountId = accountId;
|
|
|
|
|
|
|
|
// this.uploadData.accountId = accountId;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
getList() {
|
|
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
|
|
getMenuList(this.accountId).then(response => {
|
|
|
|
|
|
|
|
this.menuList = this.handleTree(response.data, "id");
|
|
|
|
|
|
|
|
console.log(this.menuList)
|
|
|
|
|
|
|
|
}).finally(() => {
|
|
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
|
|
|
|
handleQuery() {
|
|
|
|
|
|
|
|
// 默认选中第一个
|
|
|
|
|
|
|
|
if (this.accountId) {
|
|
|
|
|
|
|
|
this.setAccountId(this.accountId)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.getList()
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/** 重置按钮操作 */
|
|
|
|
|
|
|
|
resetQuery() {
|
|
|
|
|
|
|
|
this.resetForm('queryForm')
|
|
|
|
|
|
|
|
// 默认选中第一个
|
|
|
|
|
|
|
|
if (this.accounts.length > 0) {
|
|
|
|
|
|
|
|
this.setAccountId(this.accounts[0].id)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.handleQuery()
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// TODO 芋艿：未归类
|
|
|
|
|
|
|
|
|
|
|
|
deleteTempObj(){
|
|
|
|
deleteTempObj(){
|
|
|
|
this.$delete(this.tempObj,'repName')
|
|
|
|
this.$delete(this.tempObj,'repName')
|
|
|
|
this.$delete(this.tempObj,'repUrl')
|
|
|
|
this.$delete(this.tempObj,'repUrl')
|
|
|
|
@ -223,11 +295,6 @@ SOFTWARE.
|
|
|
|
item.content.articles = item.content.articles.slice(0,1)
|
|
|
|
item.content.articles = item.content.articles.slice(0,1)
|
|
|
|
this.tempObj.content = item.content
|
|
|
|
this.tempObj.content = item.content
|
|
|
|
},
|
|
|
|
},
|
|
|
|
getMenuFun(){
|
|
|
|
|
|
|
|
getList().then((res)=>{
|
|
|
|
|
|
|
|
this.menu.button = JSON.parse(res.msg).button;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
handleClick(tab, event){
|
|
|
|
handleClick(tab, event){
|
|
|
|
this.tempObj.mediaType = tab.name
|
|
|
|
this.tempObj.mediaType = tab.name
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@ -237,11 +304,11 @@ SOFTWARE.
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
type: 'warning'
|
|
|
|
type: 'warning'
|
|
|
|
}).then(() => {
|
|
|
|
}).then(() => {
|
|
|
|
this.saveLoading = true
|
|
|
|
this.loading = true
|
|
|
|
saveAndRelease({
|
|
|
|
saveAndRelease({
|
|
|
|
strWxMenu:this.menu
|
|
|
|
strWxMenu:this.menu
|
|
|
|
}).then(response => {
|
|
|
|
}).then(response => {
|
|
|
|
this.saveLoading = false
|
|
|
|
this.loading = false
|
|
|
|
if(response.code == 200){
|
|
|
|
if(response.code == 200){
|
|
|
|
this.$message({
|
|
|
|
this.$message({
|
|
|
|
showClose: true,
|
|
|
|
showClose: true,
|
|
|
|
@ -252,13 +319,13 @@ SOFTWARE.
|
|
|
|
this.$message.error(response.data.msg)
|
|
|
|
this.$message.error(response.data.msg)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}).catch(() => {
|
|
|
|
}).catch(() => {
|
|
|
|
this.saveLoading = false
|
|
|
|
this.loading = false
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}).catch(() => {
|
|
|
|
}).catch(() => {
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 一级菜单点击事件
|
|
|
|
// 一级菜单点击事件
|
|
|
|
menuFun(i, item){
|
|
|
|
menuClick(i, item){
|
|
|
|
this.hackResetWxReplySelect = false//销毁组件
|
|
|
|
this.hackResetWxReplySelect = false//销毁组件
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.hackResetWxReplySelect = true//重建组件
|
|
|
|
this.hackResetWxReplySelect = true//重建组件
|
|
|
|
@ -278,7 +345,7 @@ SOFTWARE.
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 二级菜单点击事件
|
|
|
|
// 二级菜单点击事件
|
|
|
|
subMenuFun(subItem, index, k){
|
|
|
|
subMenuClick(subItem, index, k){
|
|
|
|
this.hackResetWxReplySelect = false//销毁组件
|
|
|
|
this.hackResetWxReplySelect = false//销毁组件
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.hackResetWxReplySelect = true//重建组件
|
|
|
|
this.hackResetWxReplySelect = true//重建组件
|
|
|
|
@ -301,7 +368,7 @@ SOFTWARE.
|
|
|
|
sub_button: []
|
|
|
|
sub_button: []
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.$set(this.menu.button,menuKeyLength,addButton)
|
|
|
|
this.$set(this.menu.button,menuKeyLength,addButton)
|
|
|
|
this.menuFun(this.menuKeyLength-1, addButton)
|
|
|
|
this.menuClick(this.menuKeyLength-1, addButton)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 添加横向二级菜单
|
|
|
|
// 添加横向二级菜单
|
|
|
|
addSubMenu(i,item){
|
|
|
|
addSubMenu(i,item){
|
|
|
|
@ -320,7 +387,7 @@ SOFTWARE.
|
|
|
|
name: "子菜单名称"
|
|
|
|
name: "子菜单名称"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.$set(item.sub_button,subMenuKeyLength,addButton);
|
|
|
|
this.$set(item.sub_button,subMenuKeyLength,addButton);
|
|
|
|
this.subMenuFun(item.sub_button[subMenuKeyLength], i, subMenuKeyLength)
|
|
|
|
this.subMenuClick(item.sub_button[subMenuKeyLength], i, subMenuKeyLength)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
//删除当前菜单
|
|
|
|
//删除当前菜单
|
|
|
|
deleteMenu(obj){
|
|
|
|
deleteMenu(obj){
|
|
|
|
@ -354,12 +421,6 @@ SOFTWARE.
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed:{
|
|
|
|
|
|
|
|
// menuObj的长度，当长度 小于 3 才显示一级菜单的加号
|
|
|
|
|
|
|
|
menuKeyLength:function(){
|
|
|
|
|
|
|
|
return this.menu.button.length;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
<!--本组件样式-->
|
|
|
|
<!--本组件样式-->
|
|
|
|
|
YunaiV
3 years ago