From de89a408d05d2358c61e4113ccd83a93bfd18888 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=AB=9A=E5=AB=9A?= <1878447768@qq.com>
Date: Mon, 16 Dec 2024 14:29:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9D=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/wx/wx-menu.vue | 302 +++++++++++++++----------------
 1 file changed, 146 insertions(+), 156 deletions(-)

diff --git a/src/views/modules/wx/wx-menu.vue b/src/views/modules/wx/wx-menu.vue
index a1f08a03..4d7b16da 100644
--- a/src/views/modules/wx/wx-menu.vue
+++ b/src/views/modules/wx/wx-menu.vue
@@ -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 = [] // 清空数据列表
                 }
-
-            });
-        },
-        //选中主菜单
-        selectMenu(i) {
-            this.selectedMenuLevel = 1
-            this.selectedSubMenuIndex = ''
-            this.selectedMenuIndex = i
-            this.selectedButton = this.menu.buttons[i]
+                this.dataListLoading = false // 结束加载状态
+            })
         },
-        //选中子菜单
-        selectSubMenu(i,i2) {
-            this.selectedMenuLevel = 2
-            this.selectedMenuIndex = i
-            this.selectedSubMenuIndex = i2
-            this.selectedButton = this.menu.buttons[i].subButtons[i2]
+        // 处理多选变化
+        selectionChangeHandle(val) {
+            this.dataListSelections = val
         },
-       // 添加菜单项（主菜单或子菜单）
-        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()
-            }
+        // 新增/修改操作
+        addOrUpdateHandle(item) {
+            this.addOrUpdateVisible = true
+            this.$nextTick(() => {
+                this.$refs.addOrUpdate.init(item) // 初始化弹窗
+            })
         },
-        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>
\ No newline at end of file
+</script>
\ No newline at end of file