mkaoj697q
/
WeChat
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

李

Browse Source 
代码注释
pull/20/head
mkaoj697q 2 months ago
parent f32a8a1754 de89a408d0
commit 94569c5d24
1 changed files with 146 additions and 156 deletions
Show Stats Download Patch File Download Diff File

300
src/views/modules/wx/wx-menu.vue
Unescape View File

@ -1,179 +1,169 @@
<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)">
<div class="menu-item-title">
<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)">
<div class="menu-item-title">
<span>{{ sub.name }}</span>
</div>
</li>
<!-- 如果子菜单数量少于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>
</div>
</li>
<!-- 菜单展开/收起图标 -->
<i class="menu-arrow arrow_out"></i>
<i class="menu-arrow arrow_in"></i>
</ul>
</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>
</div>
<!-- 发布和清空菜单的按钮组 -->
<div class="weixin-btn-group" v-if="isAuth('wx:menu:save')" @click="updateWxMenu">
<el-button type="success" icon="el-icon-upload">发布</el-button>
<el-button type="warning" icon="el-icon-delete" @click="delMenuAll">清空</el-button>
<!-- 注意：这里可能是一个小错误，因为delMenu方法通常用于删除选中的菜单项，而不是清空所有菜单 -->
<!-- 如果要清空所有菜单，可能需要一个单独的方法，比如delMenuAll -->
</div>
<!-- 组件的HTML模板 -->
<div class="mod-config">
<!-- 搜索表单 -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<!-- 输入框，用于输入搜索关键词 -->
<el-form-item>
<el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
</el-form-item>
<!-- 操作按钮 -->
<el-form-item>
<!-- 查询按钮，触发数据列表的获取 -->
<el-button @click="getDataList()">查询</el-button>
<!-- 新增按钮，根据权限显示 -->
<el-button v-if="isAuth('wx:wxaccount:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<!-- 批量删除按钮，根据权限和选中项显示 -->
<el-button v-if="isAuth('wx:wxaccount:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
<!-- 多选框 -->
<el-table-column type="selection" header-align="center" align="center" width="50">
</el-table-column>
<!-- 展示appid -->
<el-table-column prop="appid" header-align="center" align="center" label="appid">
</el-table-column>
<!-- 展示公众号名称 -->
<el-table-column prop="name" header-align="center" align="center" label="公众号名称">
</el-table-column>
<!-- 展示公众号类型，通过formatter格式化显示 -->
<el-table-column prop="type" header-align="center" align="center" label="类型" :formatter="accountTypeFormat">
</el-table-column>
<!-- 展示是否认证 -->
<el-table-column prop="verified" header-align="center" align="center" label="是否认证">
<!-- 使用插槽自定义显示内容 -->
<span slot-scope="scope">{{scope.row.verified?"是":"否"}}</span>
</el-table-column>
<!-- 操作列 -->
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<!-- 使用插槽添加按钮 -->
<template slot-scope="scope">
<el-button type="text" size="small" @click="accessInfo(scope.row)">接入</el-button>
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.appid)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 新增/修改弹窗 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<!-- 接入信息弹窗 -->
<account-access v-if="accountAccessVisible" ref="accountAccessDialog"></account-access>
</div>
</template>
<script>
// 引入子组件
import AddOrUpdate from './account/wx-account-add-or-update'
import AccountAccess from './account/wx-account-access-info'
import { mapState } from 'vuex'
export default {
components: {
wxMenuButtonEditor: () => import('./wx-menu-button-editor')
},
data() {
return {
menu: { 'buttons': [] },//当前菜单
selectedMenuIndex: '',//当前选中菜单索引
selectedSubMenuIndex: '',//当前选中子菜单索引
selectedMenuLevel: 0,//选中菜单级别
selectedButton: '',//选中的菜单按钮
onDragOverMenu:'' //当前鼠标拖动到的位置
// 搜索表单数据
dataForm: {
key: ''
},
// 数据列表
dataList: [],
// 数据列表加载状态
dataListLoading: false,
// 选中项
dataListSelections: [],
// 新增/修改弹窗显示状态
addOrUpdateVisible: false,
// 接入信息弹窗显示状态
accountAccessVisible: false
}
},
mounted() {
// 获取当前微信菜单配置
this.getWxMenu();
// 引入子组件
components: {
AddOrUpdate,
AccountAccess
},
// 从Vuex中获取状态
computed: mapState({
ACCOUNT_TYPES: state => state.wxAccount.ACCOUNT_TYPES
}),
// 组件激活时获取数据列表
activated() {
this.getDataList()
},
methods: {
getWxMenu() {
// 获取数据列表
getDataList() {
this.dataListLoading = true
// 发起HTTP请求获取数据
this.$http({
url: this.$http.adornUrl('/manage/wxMenu/getMenu')
url: this.$http.adornUrl('/manage/wxAccount/list'), // 调用封装的URL处理函数
method: 'get',
params: this.$http.adornParams({ // 调用封装的参数处理函数
'key': this.dataForm.key
})
}).then(({ data }) => {
if (data.code == 200) {
this.menu = data.data.menu;
if (data && data.code === 200) {
this.dataList = data.list // 更新数据列表
this.$store.commit('wxAccount/updateAccountList', data.list) // 更新Vuex中的状态
} else {
this.$message({
type: 'error',
message: data.msg
});
this.dataList = [] // 清空数据列表
}
});
this.dataListLoading = false // 结束加载状态
})
},
//选中主菜单
selectMenu(i) {
this.selectedMenuLevel = 1
this.selectedSubMenuIndex = ''
this.selectedMenuIndex = i
this.selectedButton = this.menu.buttons[i]
// 处理多选变化
selectionChangeHandle(val) {
this.dataListSelections = val
},
//选中子菜单
selectSubMenu(i,i2) {
this.selectedMenuLevel = 2
this.selectedMenuIndex = i
this.selectedSubMenuIndex = i2
this.selectedButton = this.menu.buttons[i].subButtons[i2]
// 新增/修改操作
addOrUpdateHandle(item) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(item) // 初始化弹窗
})
},
// 添加菜单项（主菜单或子菜单）
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)
}
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)
}
},
// 删除选中的菜单项（主菜单或子菜单）
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()
}
},
unSelectMenu(){// 取消选中任何菜单项
this.selectedMenuLevel = 0
this.selectedMenuIndex = ''
this.selectedSubMenuIndex = ''
this.selectedButton = ''
// 接入信息操作
accessInfo(item) {
this.accountAccessVisible = true
this.$nextTick(() => {
this.$refs.accountAccessDialog.init(item) // 初始化弹窗
})
},
// 更新微信菜单配置
updateWxMenu() {
this.$http({
url: this.$http.adornUrl('/manage/wxMenu/updateMenu'),
data: this.menu,
method: 'post'
}).then(({ data }) => {
if (data.code == 200) {
this.$message.success('操作成功')
} else {
this.$message.error(data.msg);
}
});
// 删除操作
deleteHandle(appid) {
// 根据是否有传入appid决定是单个删除还是批量删除
var ids = appid ? [appid] : this.dataListSelections.map(item => item.appid)
this.$confirm(`确定对[appid=${ids.join(',')}]进行[${appid ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 发起HTTP请求删除数据
this.$http({
url: this.$http.adornUrl('/manage/wxAccount/delete'),
method: 'post',
data: this.$http.adornData(ids, false) // 调用封装的数据处理函数
}).then(({ data }) => {
if (data && data.code === 200) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList() // 刷新数据列表
}
})
} else {
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
}
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()
// 格式化公众号类型显示
accountTypeFormat(row, column, cellValue) {
return this.ACCOUNT_TYPES[cellValue]
}
}
}
</script>
<style src="@/assets/css/wx-menu.css"></style>
Write Preview
Loading…
Cancel
Save