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

李

Browse Source
pull/18/head
李嫚嫚 2 months ago
parent 1345f361e0
commit de89a408d0
1 changed files with 146 additions and 156 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,179 +1,169 @@
<template> <template>
<div> <!-- 组件的HTML模板 -->
<div id="app-menu"> <div class="mod-config">
<!-- 预览窗 --> <!-- 搜索表单 -->
<div class="weixin-preview"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<div class="weixin-bd"> <!-- 输入框，用于输入搜索关键词 -->
<div class="weixin-header">公众号菜单</div> <el-form-item>
<ul class="weixin-menu" id="weixin-menu"> <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
<!-- 遍历主菜单按钮 --> </el-form-item>
<li v-for="(btn, i) in menu.buttons" :key="i" class="menu-item" <!-- 操作按钮 -->
:class="{'current': selectedMenuIndex === i && selectedMenuLevel == 1}" <el-form-item>
@click="selectMenu(i)"> <!-- 查询按钮，触发数据列表的获取 -->
<div class="menu-item-title"> <el-button @click="getDataList()">查询</el-button>
<span>{{ btn.name }}</span> <!-- 新增按钮，根据权限显示 -->
</div> <el-button v-if="isAuth('wx:wxaccount:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<ul class="weixin-sub-menu"> <!-- 批量删除按钮，根据权限和选中项显示 -->
<!-- 遍历子菜单按钮 --> <el-button v-if="isAuth('wx:wxaccount:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
<li v-for="(sub, i2) in btn.subButtons" :key="i2" class="menu-sub-item" </el-form-item>
:class="{'current': selectedMenuIndex === i && selectedSubMenuIndex === i2 && selectedMenuLevel == 2, 'on-drag-over': onDragOverMenu === (i + '_' + i2)}" </el-form>
@click.stop="selectSubMenu(i, i2)" draggable="true" <!-- 数据表格 -->
@dragstart="selectSubMenu(i, i2)" @dragover.prevent="onDragOverMenu = (i + '_' + i2)" @drop="onDrop(i, i2)"> <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
<div class="menu-item-title"> <!-- 多选框 -->
<span>{{ sub.name }}</span> <el-table-column type="selection" header-align="center" align="center" width="50">
</div> </el-table-column>
<!-- 展示appid -->
</li> <el-table-column prop="appid" header-align="center" align="center" label="appid">
<!-- 如果子菜单数量少于5个，显示添加按钮 --> </el-table-column>
<li v-if="btn.subButtons.length < 5" class="menu-sub-item" <!-- 展示公众号名称 -->
:class="{'on-drag-over': onDragOverMenu === (i + '_' + btn.subButtons.length)}" <el-table-column prop="name" header-align="center" align="center" label="公众号名称">
@click.stop="addMenu(2, i)" @dragover.prevent="onDragOverMenu = (i + '_' + btn.subButtons.length)" @drop="onDrop(i, btn.subButtons.length)"> </el-table-column>
<div class="menu-item-title"> <!-- 展示公众号类型，通过formatter格式化显示 -->
<i class="el-icon-plus"></i> <el-table-column prop="type" header-align="center" align="center" label="类型" :formatter="accountTypeFormat">
</div> </el-table-column>
</li> <!-- 展示是否认证 -->
<!-- 菜单展开/收起图标 --> <el-table-column prop="verified" header-align="center" align="center" label="是否认证">
<i class="menu-arrow arrow_out"></i> <!-- 使用插槽自定义显示内容 -->
<i class="menu-arrow arrow_in"></i> <span slot-scope="scope">{{scope.row.verified?"是":"否"}}</span>
</ul> </el-table-column>
</li> <!-- 操作列 -->
<!-- 如果主菜单数量少于3个，显示添加按钮 --> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<li class="menu-item" v-if="menu.buttons.length < 3" @click="addMenu(1)"> <!-- 使用插槽添加按钮 -->
<i class="el-icon-plus"></i> <template slot-scope="scope">
</li> <el-button type="text" size="small" @click="accessInfo(scope.row)">接入</el-button>
</ul> <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
</div> <el-button type="text" size="small" @click="deleteHandle(scope.row.appid)">删除</el-button>
</div> </template>
<!-- 菜单编辑器 --> </el-table-column>
<div class="weixin-menu-detail" v-if="selectedMenuLevel > 0"> </el-table>
<wx-menu-button-editor :button="selectedButton" :selectedMenuLevel="selectedMenuLevel" @delMenu="delMenu"></wx-menu-button-editor> <!-- 新增/修改弹窗 -->
</div> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div> <!-- 接入信息弹窗 -->
<!-- 发布和清空菜单的按钮组 --> <account-access v-if="accountAccessVisible" ref="accountAccessDialog"></account-access>
<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>
</div> </div>
</template> </template>
<script> <script>
// 引入子组件
import AddOrUpdate from './account/wx-account-add-or-update'
import AccountAccess from './account/wx-account-access-info'
import { mapState } from 'vuex'
export default { export default {
components: {
wxMenuButtonEditor: () => import('./wx-menu-button-editor')
},
data() { data() {
return { return {
menu: { 'buttons': [] },//当前菜单 // 搜索表单数据
selectedMenuIndex: '',//当前选中菜单索引 dataForm: {
selectedSubMenuIndex: '',//当前选中子菜单索引 key: ''
selectedMenuLevel: 0,//选中菜单级别 },
selectedButton: '',//选中的菜单按钮 // 数据列表
onDragOverMenu:'' //当前鼠标拖动到的位置 dataList: [],
// 数据列表加载状态
dataListLoading: false,
// 选中项
dataListSelections: [],
// 新增/修改弹窗显示状态
addOrUpdateVisible: false,
// 接入信息弹窗显示状态
accountAccessVisible: false
} }
}, },
mounted() { // 引入子组件
// 获取当前微信菜单配置 components: {
this.getWxMenu(); AddOrUpdate,
AccountAccess
},
// 从Vuex中获取状态
computed: mapState({
ACCOUNT_TYPES: state => state.wxAccount.ACCOUNT_TYPES
}),
// 组件激活时获取数据列表
activated() {
this.getDataList()
}, },
methods: { methods: {
getWxMenu() { // 获取数据列表
getDataList() {
this.dataListLoading = true
// 发起HTTP请求获取数据
this.$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 }) => { }).then(({ data }) => {
if (data.code == 200) { if (data && data.code === 200) {
this.menu = data.data.menu; this.dataList = data.list // 更新数据列表
this.$store.commit('wxAccount/updateAccountList', data.list) // 更新Vuex中的状态
} else { } else {
this.$message({ this.dataList = [] // 清空数据列表
type: 'error',
message: data.msg
});
} }
this.dataListLoading = false // 结束加载状态
}); })
},
//选中主菜单
selectMenu(i) {
this.selectedMenuLevel = 1
this.selectedSubMenuIndex = ''
this.selectedMenuIndex = i
this.selectedButton = this.menu.buttons[i]
}, },
//选中子菜单 // 处理多选变化
selectSubMenu(i,i2) { selectionChangeHandle(val) {
this.selectedMenuLevel = 2 this.dataListSelections = val
this.selectedMenuIndex = i
this.selectedSubMenuIndex = i2
this.selectedButton = this.menu.buttons[i].subButtons[i2]
}, },
// 添加菜单项（主菜单或子菜单） // 新增/修改操作
addMenu(level,i) { addOrUpdateHandle(item) {
if (level == 1 && this.menu.buttons.length < 3) { this.addOrUpdateVisible = true
this.menu.buttons.push({ this.$nextTick(() => {
"type": "view", this.$refs.addOrUpdate.init(item) // 初始化弹窗
"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 accessInfo(item) {
this.selectedMenuIndex = '' this.accountAccessVisible = true
this.selectedSubMenuIndex = '' this.$nextTick(() => {
this.selectedButton = '' this.$refs.accountAccessDialog.init(item) // 初始化弹窗
})
}, },
// 更新微信菜单配置 // 删除操作
updateWxMenu() { 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({ this.$http({
url: this.$http.adornUrl('/manage/wxMenu/updateMenu'), url: this.$http.adornUrl('/manage/wxAccount/delete'),
data: this.menu, method: 'post',
method: 'post' data: this.$http.adornData(ids, false) // 调用封装的数据处理函数
}).then(({ data }) => { }).then(({ data }) => {
if (data.code == 200) { if (data && data.code === 200) {
this.$message.success('操作成功') this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList() // 刷新数据列表
}
})
} else { } else {
this.$message.error(data.msg); this.$message.error(data.msg) // 显示错误信息
} }
})
}); })
}, },
onDrop(i,i2){// 拖拽放置菜单项（用于排序） // 格式化公众号类型显示
this.onDragOverMenu=''; accountTypeFormat(row, column, cellValue) {
if(i==this.selectedMenuIndex && i2==this.selectedSubMenuIndex) //拖拽到了原位置 return this.ACCOUNT_TYPES[cellValue]
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()
} }
} }
} }
</script> </script>
<style src="@/assets/css/wx-menu.css"></style>
Write Preview
Loading…
Cancel
Save