|
|
|
|
@ -1,159 +1,200 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<!-- 应用菜单容器 -->
|
|
|
|
|
<div id="app-menu">
|
|
|
|
|
<!-- 预览窗 -->
|
|
|
|
|
<!-- 预览窗口 -->
|
|
|
|
|
<div class="weixin-preview">
|
|
|
|
|
<div class="weixin-bd">
|
|
|
|
|
<div class="weixin-header">公众号菜单</div>
|
|
|
|
|
<!-- 菜单列表 -->
|
|
|
|
|
<ul class="weixin-menu" id="weixin-menu">
|
|
|
|
|
<li v-for="(btn,i) in menu.buttons" :key="i" class="menu-item" :class="{'current':selectedMenuIndex===i&&selectedMenuLevel==1}" @click="selectMenu(i)">
|
|
|
|
|
<!-- 循环遍历主菜单项 -->
|
|
|
|
|
<li v-for="(btn, i) in menu.buttons" :key="i" class="menu-item"
|
|
|
|
|
:class="{ 'current': selectedMenuIndex === i && selectedMenuLevel == 1 }"
|
|
|
|
|
@click="selectMenu(i)">
|
|
|
|
|
<div class="menu-item-title">
|
|
|
|
|
<span>{{ btn.name }}</span>
|
|
|
|
|
<span>{{ btn.name }}</span> <!-- 显示菜单项名称 -->
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 子菜单列表 -->
|
|
|
|
|
<ul class="weixin-sub-menu">
|
|
|
|
|
<li v-for="(sub,i2) in btn.subButtons" :key="i2" class="menu-sub-item" :class="{'current':selectedMenuIndex===i&&selectedSubMenuIndex===i2&&selectedMenuLevel==2,'on-drag-over':onDragOverMenu==(i+'_'+i2)}" @click.stop="selectSubMenu(i,i2)" draggable="true" @dragstart="selectSubMenu(i,i2)" @dragover.prevent="onDragOverMenu=(i+'_'+i2)" @drop="onDrop(i,i2)">
|
|
|
|
|
<!-- 循环遍历子菜单项 -->
|
|
|
|
|
<li v-for="(sub, i2) in btn.subButtons" :key="i2" class="menu-sub-item" :class="{
|
|
|
|
|
'current': selectedMenuIndex === i && selectedSubMenuIndex === i2 &&
|
|
|
|
|
selectedMenuLevel == 2, 'on-drag-over': onDragOverMenu == (i + '_' + i2)
|
|
|
|
|
}"
|
|
|
|
|
@click.stop="selectSubMenu(i, i2)" draggable="true"
|
|
|
|
|
@dragstart="selectSubMenu(i, i2)"
|
|
|
|
|
@dragover.prevent="onDragOverMenu = (i + '_' + i2)" @drop="onDrop(i, i2)">
|
|
|
|
|
<div class="menu-item-title">
|
|
|
|
|
<span>{{sub.name}}</span>
|
|
|
|
|
<span>{{ sub.name }}</span> <!-- 显示子菜单项名称 -->
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
<li v-if="btn.subButtons.length<5" class="menu-sub-item" :class="{'on-drag-over':onDragOverMenu==(i+'_'+btn.subButtons.length)}" @click.stop="addMenu(2,i)" @dragover.prevent="onDragOverMenu=(i+'_'+btn.subButtons.length)" @drop="onDrop(i,btn.subButtons.length)">
|
|
|
|
|
<!-- 如果子菜单项少于5个，显示添加按钮 -->
|
|
|
|
|
<li v-if="btn.subButtons.length < 5" class="menu-sub-item"
|
|
|
|
|
:class="{ 'on-drag-over': onDragOverMenu == (i + '_' + btn.subButtons.length) }"
|
|
|
|
|
@click.stop="addMenu(2, i)"
|
|
|
|
|
@dragover.prevent="onDragOverMenu = (i + '_' + btn.subButtons.length)"
|
|
|
|
|
@drop="onDrop(i, btn.subButtons.length)">
|
|
|
|
|
<div class="menu-item-title">
|
|
|
|
|
<i class="el-icon-plus"></i>
|
|
|
|
|
<i class="el-icon-plus"></i> <!-- 添加图标 -->
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
<!-- 菜单展开/收起箭头 -->
|
|
|
|
|
<i class="menu-arrow arrow_out"></i>
|
|
|
|
|
<i class="menu-arrow arrow_in"></i>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="menu-item" v-if="menu.buttons.length<3" @click="addMenu(1)"> <i class="el-icon-plus"></i></li>
|
|
|
|
|
<!-- 如果主菜单项少于3个，显示添加按钮 -->
|
|
|
|
|
<li class="menu-item" v-if="menu.buttons.length < 3" @click="addMenu(1)">
|
|
|
|
|
<i class="el-icon-plus"></i> <!-- 添加图标 -->
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 菜单编辑器 -->
|
|
|
|
|
<div class="weixin-menu-detail" v-if="selectedMenuLevel>0">
|
|
|
|
|
<wx-menu-button-editor :button="selectedButton" :selectedMenuLevel="selectedMenuLevel" @delMenu="delMenu"></wx-menu-button-editor>
|
|
|
|
|
<div class="weixin-menu-detail" v-if="selectedMenuLevel > 0">
|
|
|
|
|
<!-- 菜单按钮编辑器组件 -->
|
|
|
|
|
<wx-menu-button-editor :button="selectedButton" :selectedMenuLevel="selectedMenuLevel"
|
|
|
|
|
@delMenu="delMenu"></wx-menu-button-editor>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="weixin-btn-group" v-if="isAuth('wx:menu:save')" @click="updateWxMenu">
|
|
|
|
|
<!-- 按钮组，根据权限显示 -->
|
|
|
|
|
<div class="weixin-btn-group" v-if="isAuth('wx:menu:save')">
|
|
|
|
|
<!-- 发布按钮 -->
|
|
|
|
|
<el-button type="success" icon="el-icon-upload">发布</el-button>
|
|
|
|
|
<!-- 清空按钮 -->
|
|
|
|
|
<el-button type="warning" icon="el-icon-delete" @click="delMenu">清空</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
// 定义组件，包括子组件wxMenuButtonEditor的异步加载
|
|
|
|
|
components: {
|
|
|
|
|
wxMenuButtonEditor: () => import('./wx-menu-button-editor')
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
menu: { 'buttons': [] },//当前菜单
|
|
|
|
|
selectedMenuIndex: '',//当前选中菜单索引
|
|
|
|
|
selectedSubMenuIndex: '',//当前选中子菜单索引
|
|
|
|
|
selectedMenuLevel: 0,//选中菜单级别
|
|
|
|
|
selectedButton: '',//选中的菜单按钮
|
|
|
|
|
onDragOverMenu:'' //当前鼠标拖动到的位置
|
|
|
|
|
// 当前菜单数据结构，包含按钮数组
|
|
|
|
|
menu: { 'buttons': [] },
|
|
|
|
|
// 当前选中菜单的索引
|
|
|
|
|
selectedMenuIndex: '',
|
|
|
|
|
// 当前选中子菜单的索引
|
|
|
|
|
selectedSubMenuIndex: '',
|
|
|
|
|
// 当前选中菜单的级别（1为主菜单，2为子菜单）
|
|
|
|
|
selectedMenuLevel: 0,
|
|
|
|
|
// 选中的菜单按钮对象
|
|
|
|
|
selectedButton: '',
|
|
|
|
|
// 当前鼠标拖动到的位置（用于拖拽功能）
|
|
|
|
|
onDragOverMenu: ''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// 组件挂载后获取微信菜单数据
|
|
|
|
|
this.getWxMenu();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 获取微信菜单数据
|
|
|
|
|
getWxMenu() {
|
|
|
|
|
this.$http({
|
|
|
|
|
url: this.$http.adornUrl('/manage/wxMenu/getMenu')
|
|
|
|
|
url: this.$http.adornUrl('/manage/wxMenu/getMenu') // 调用API获取菜单
|
|
|
|
|
}).then(({ data }) => {
|
|
|
|
|
if (data.code == 200) {
|
|
|
|
|
this.menu = data.data.menu;
|
|
|
|
|
this.menu = data.data.menu; // 成功则更新菜单数据
|
|
|
|
|
} else {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'error',
|
|
|
|
|
message: data.msg
|
|
|
|
|
message: data.msg // 失败则显示错误信息
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//选中主菜单
|
|
|
|
|
// 选中主菜单的方法
|
|
|
|
|
selectMenu(i) {
|
|
|
|
|
this.selectedMenuLevel = 1
|
|
|
|
|
this.selectedSubMenuIndex = ''
|
|
|
|
|
this.selectedMenuIndex = i
|
|
|
|
|
this.selectedButton = this.menu.buttons[i]
|
|
|
|
|
this.selectedMenuLevel = 1; // 设置为一级菜单
|
|
|
|
|
this.selectedSubMenuIndex = ''; // 清空子菜单索引
|
|
|
|
|
this.selectedMenuIndex = i; // 设置选中主菜单索引
|
|
|
|
|
this.selectedButton = this.menu.buttons[i]; // 设置选中按钮
|
|
|
|
|
},
|
|
|
|
|
//选中子菜单
|
|
|
|
|
selectSubMenu(i,i2) {
|
|
|
|
|
this.selectedMenuLevel = 2
|
|
|
|
|
this.selectedMenuIndex = i
|
|
|
|
|
this.selectedSubMenuIndex = i2
|
|
|
|
|
this.selectedButton = this.menu.buttons[i].subButtons[i2]
|
|
|
|
|
// 选中子菜单的方法
|
|
|
|
|
selectSubMenu(i, i2) {
|
|
|
|
|
this.selectedMenuLevel = 2; // 设置为二级菜单
|
|
|
|
|
this.selectedMenuIndex = i; // 设置选中主菜单索引
|
|
|
|
|
this.selectedSubMenuIndex = i2; // 设置选中子菜单索引
|
|
|
|
|
this.selectedButton = this.menu.buttons[i].subButtons[i2]; // 设置选中按钮
|
|
|
|
|
},
|
|
|
|
|
//添加菜单
|
|
|
|
|
addMenu(level,i) {
|
|
|
|
|
if (level == 1 && this.menu.buttons.length < 3) {
|
|
|
|
|
// 添加菜单的方法
|
|
|
|
|
addMenu(level, i) {
|
|
|
|
|
if (level == 1 && this.menu.buttons.length < 3) { // 如果是一级菜单且数量未达上限
|
|
|
|
|
// 添加一个新的主菜单按钮
|
|
|
|
|
this.menu.buttons.push({
|
|
|
|
|
"type": "view",
|
|
|
|
|
"name": "菜单名称",
|
|
|
|
|
"subButtons": [],
|
|
|
|
|
"url": ""
|
|
|
|
|
})
|
|
|
|
|
this.selectMenu(this.menu.buttons.length - 1)
|
|
|
|
|
});
|
|
|
|
|
this.selectMenu(this.menu.buttons.length - 1); // 选中新添加的菜单
|
|
|
|
|
}
|
|
|
|
|
if (level == 2 && this.menu.buttons[i].subButtons.length < 5) {
|
|
|
|
|
if (level == 2 && this.menu.buttons[i].subButtons.length < 5) { // 如果是二级菜单且数量未达上限
|
|
|
|
|
// 添加一个新的子菜单按钮
|
|
|
|
|
this.menu.buttons[i].subButtons.push({
|
|
|
|
|
"type": "view",
|
|
|
|
|
"name": "子菜单名称",
|
|
|
|
|
"url": ""
|
|
|
|
|
})
|
|
|
|
|
this.selectSubMenu(i,this.menu.buttons[i].subButtons.length - 1)
|
|
|
|
|
});
|
|
|
|
|
this.selectSubMenu(i, this.menu.buttons[i].subButtons.length - 1); // 选中新添加的子菜单
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//删除菜单
|
|
|
|
|
// 删除菜单的方法
|
|
|
|
|
delMenu() {
|
|
|
|
|
if (this.selectedMenuLevel == 1 && confirm('删除后菜单下设置的内容将被删除')) {
|
|
|
|
|
this.menu.buttons.splice(this.selectedMenuIndex, 1);
|
|
|
|
|
this.unSelectMenu()
|
|
|
|
|
} else if (this.selectedMenuLevel == 2) {
|
|
|
|
|
this.menu.buttons[this.selectedMenuIndex].subButtons.splice(this.selectedSubMenuIndex, 1);
|
|
|
|
|
this.unSelectMenu()
|
|
|
|
|
if (this.selectedMenuLevel == 1 && confirm('删除后菜单下设置的内容将被删除')) { // 如果是主菜单且用户确认删除
|
|
|
|
|
this.menu.buttons.splice(this.selectedMenuIndex, 1); // 删除主菜单
|
|
|
|
|
this.unSelectMenu(); // 取消选中
|
|
|
|
|
} else if (this.selectedMenuLevel == 2) { // 如果是子菜单
|
|
|
|
|
this.menu.buttons[this.selectedMenuIndex].subButtons.splice(this.selectedSubMenuIndex, 1); // 删除子菜单
|
|
|
|
|
this.unSelectMenu(); // 取消选中
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
unSelectMenu(){//不选中任何菜单
|
|
|
|
|
this.selectedMenuLevel = 0
|
|
|
|
|
this.selectedMenuIndex = ''
|
|
|
|
|
this.selectedSubMenuIndex = ''
|
|
|
|
|
this.selectedButton = ''
|
|
|
|
|
unSelectMenu() { // 取消选中任何菜单的方法
|
|
|
|
|
this.selectedMenuLevel = 0; // 重置选中级别
|
|
|
|
|
this.selectedMenuIndex = ''; // 清空选中主菜单索引
|
|
|
|
|
this.selectedSubMenuIndex = ''; // 清空选中子菜单索引
|
|
|
|
|
this.selectedButton = ''; // 清空选中按钮
|
|
|
|
|
},
|
|
|
|
|
// 更新微信菜单的方法
|
|
|
|
|
updateWxMenu() {
|
|
|
|
|
this.$http({
|
|
|
|
|
url: this.$http.adornUrl('/manage/wxMenu/updateMenu'),
|
|
|
|
|
url: this.$http.adornUrl('/manage/wxMenu/updateMenu'), // 调用API更新菜单
|
|
|
|
|
data: this.menu,
|
|
|
|
|
method: 'post'
|
|
|
|
|
}).then(({ data }) => {
|
|
|
|
|
if (data.code == 200) {
|
|
|
|
|
this.$message.success('操作成功')
|
|
|
|
|
this.$message.success('操作成功'); // 成功则显示成功信息
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(data.msg);
|
|
|
|
|
this.$message.error(data.msg); // 失败则显示错误信息
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
onDrop(i,i2){//拖拽移动位置
|
|
|
|
|
this.onDragOverMenu='';
|
|
|
|
|
if(i==this.selectedMenuIndex && i2==this.selectedSubMenuIndex) //拖拽到了原位置
|
|
|
|
|
return
|
|
|
|
|
if(i!=this.selectedMenuIndex && this.menu.buttons[i].subButtons.length>=5){
|
|
|
|
|
this.$message.error('目标组已满');
|
|
|
|
|
return
|
|
|
|
|
// 拖拽移动位置的方法
|
|
|
|
|
onDrop(i, i2) {
|
|
|
|
|
this.onDragOverMenu = ''; // 重置拖拽目标位置
|
|
|
|
|
if (i == this.selectedMenuIndex && i2 == this.selectedSubMenuIndex) // 如果拖拽到了原位置，则不执行任何操作
|
|
|
|
|
return;
|
|
|
|
|
if (i != this.selectedMenuIndex && this.menu.buttons[i].subButtons.length >= 5) { // 如果目标子菜单已满
|
|
|
|
|
this.$message.error('目标组已满'); // 显示错误信息
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.menu.buttons[i].subButtons.splice(i2,0,this.selectedButton)
|
|
|
|
|
let delSubIndex = this.selectedSubMenuIndex
|
|
|
|
|
if(i==this.selectedMenuIndex && i2<this.selectedSubMenuIndex)
|
|
|
|
|
delSubIndex++
|
|
|
|
|
this.menu.buttons[this.selectedMenuIndex].subButtons.splice(delSubIndex, 1);
|
|
|
|
|
this.unSelectMenu()
|
|
|
|
|
// 将选中的按钮移动到新位置
|
|
|
|
|
this.menu.buttons[i].subButtons.splice(i2, 0, this.selectedButton);
|
|
|
|
|
let delSubIndex = this.selectedSubMenuIndex; // 获取原位置索引
|
|
|
|
|
if (i == this.selectedMenuIndex && i2 < this.selectedSubMenuIndex) // 如果在原菜单内部且新位置在原位置之前，索引需要+1
|
|
|
|
|
delSubIndex++;
|
|
|
|
|
this.menu.buttons[this.selectedMenuIndex].subButtons.splice(delSubIndex, 1); // 从原位置删除按钮
|
|
|
|
|
this.unSelectMenu(); // 取消选中
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- 引入外部CSS文件 -->
|
|
|
|
|
<style src="@/assets/css/wx-menu.css"></style>
|
mkaoj697q