mp：1）引入 less-loader，解决 menu 的 less 样式；2）接入菜单列表接口

2024-11-22 07:11:52 +08:00 · 2023-01-14 21:24:14 +08:00 · 2023-01-14 21:24:14 +08:00 · 02ec5d455c
commit 02ec5d455c
parent f271ef8c47
12 changed files with 808 additions and 512 deletions
--- a/yudao-module-mp/yudao-module-mp-api/src/main/java/cn/iocoder/yudao/module/mp/enums/ErrorCodeConstants.java
+++ b/yudao-module-mp/yudao-module-mp-api/src/main/java/cn/iocoder/yudao/module/mp/enums/ErrorCodeConstants.java
@ -51,7 +51,7 @@ public interface ErrorCodeConstants {
    ErrorCode DRAFT_UPDATE_FAIL = new ErrorCode(1006007002, "更新草稿失败，原因：{}");
    ErrorCode DRAFT_DELETE_FAIL = new ErrorCode(1006007002, "删除草稿失败，原因：{}");

-    // TODO 要处理下
-    ErrorCode MENU_NOT_EXISTS = new ErrorCode(1006001002, "菜单不存在");
+    // ========== 公众号菜单 1006008000============
+    ErrorCode MENU_NOT_EXISTS = new ErrorCode(1006008000, "菜单不存在");

 }
--- a/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/menu/MpMenuController.http
+++ b/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/menu/MpMenuController.http
@ -32,3 +32,8 @@ tenant-id: {{adminTenentId}}
        }]
    }]
 }
+
+### 请求 /mp/menu/list 接口 => 成功
+GET {{baseUrl}}/mp/menu/list?accountId=1
+Authorization: Bearer {{token}}
+tenant-id: {{adminTenentId}}
--- a/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/menu/MpMenuController.java
+++ b/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/menu/MpMenuController.java
@ -1,25 +1,26 @@
 package cn.iocoder.yudao.module.mp.controller.admin.menu;

+import cn.iocoder.yudao.framework.common.pojo.CommonResult;
+import cn.iocoder.yudao.module.mp.controller.admin.menu.vo.MpMenuRespVO;
+import cn.iocoder.yudao.module.mp.controller.admin.menu.vo.MpMenuSaveReqVO;
 import cn.iocoder.yudao.module.mp.convert.menu.MpMenuConvert;
 import cn.iocoder.yudao.module.mp.dal.dataobject.menu.MpMenuDO;
+import cn.iocoder.yudao.module.mp.service.menu.MpMenuService;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiImplicitParam;
+import io.swagger.annotations.ApiOperation;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.*;

 import javax.annotation.Resource;
+import javax.validation.Valid;

-import org.springframework.validation.annotation.Validated;
-import org.springframework.security.access.prepost.PreAuthorize;
-import io.swagger.annotations.*;
-
-import javax.validation.*;
-
-import cn.iocoder.yudao.framework.common.pojo.CommonResult;
+import java.util.List;

 import static cn.iocoder.yudao.framework.common.pojo.CommonResult.success;

-import cn.iocoder.yudao.module.mp.controller.admin.menu.vo.*;
-import cn.iocoder.yudao.module.mp.service.menu.MpMenuService;
-
-@Api(tags = "管理后台 - 微信菜单")
+@Api(tags = "管理后台 - 公众号菜单")
@RestController
@RequestMapping("/mp/menu")
@Validated
@ -29,14 +30,14 @@ public class MpMenuController {
    private MpMenuService mpMenuService;

    @PostMapping("/save")
-    @ApiOperation("保存微信菜单")
+    @ApiOperation("保存公众号菜单")
    @PreAuthorize("@ss.hasPermission('mp:menu:save')")
    public CommonResult<Long> saveMenu(@Valid @RequestBody MpMenuSaveReqVO createReqVO) {
        return success(mpMenuService.saveMenu(createReqVO));
    }

    @DeleteMapping("/delete")
-    @ApiOperation("删除微信菜单")
+    @ApiOperation("删除公众号菜单")
    @ApiImplicitParam(name = "id", value = "编号", required = true, dataTypeClass = Long.class)
    @PreAuthorize("@ss.hasPermission('mp:menu:delete')")
    public CommonResult<Boolean> deleteMenu(@RequestParam("id") Long id) {
@ -45,7 +46,7 @@ public class MpMenuController {
    }

    @GetMapping("/get")
-    @ApiOperation("获得微信菜单")
+    @ApiOperation("获得公众号菜单")
    @ApiImplicitParam(name = "id", value = "编号", required = true, example = "1024", dataTypeClass = Long.class)
    @PreAuthorize("@ss.hasPermission('mp:menu:query')")
    public CommonResult<MpMenuRespVO> getMenu(@RequestParam("id") Long id) {
@ -53,4 +54,13 @@ public class MpMenuController {
        return success(MpMenuConvert.INSTANCE.convert(menu));
    }

+    @GetMapping("/list")
+    @ApiOperation("获得公众号菜单列表")
+    @ApiImplicitParam(name = "accountId", value = "公众号账号的编号", required = true, example = "10", dataTypeClass = Long.class)
+    @PreAuthorize("@ss.hasPermission('mp:menu:query')")
+    public CommonResult<List<MpMenuRespVO>> getMenuList(@RequestParam("accountId") Long accountId) {
+        List<MpMenuDO> list = mpMenuService.getMenuListByAccountId(accountId);
+        return success(MpMenuConvert.INSTANCE.convertList(list));
+    }
+
 }
--- a/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/menu/vo/MpMenuBaseVO.java
+++ b/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/menu/vo/MpMenuBaseVO.java
@ -1,12 +1,15 @@
 package cn.iocoder.yudao.module.mp.controller.admin.menu.vo;

+import cn.iocoder.yudao.module.mp.dal.dataobject.account.MpAccountDO;
+import cn.iocoder.yudao.module.mp.dal.dataobject.message.MpMessageDO;
 import io.swagger.annotations.ApiModelProperty;
-import lombok.*;
-import me.chanjar.weixin.common.bean.menu.WxMenuButton;
+import lombok.Data;
+import me.chanjar.weixin.common.api.WxConsts;

 import javax.validation.constraints.NotNull;
 import java.util.List;

+// TODO 芋艿：完善 swagger 注解
 /**
 * 微信菜单 Base VO，提供给添加、修改、详细的子 VO 使用
 * 如果子 VO 存在差异的字段，请不要添加到这里，影响 Swagger 文档生成
@ -18,4 +21,112 @@ public class MpMenuBaseVO {
    @NotNull(message = "公众号账号的编号不能为空")
    private Long accountId;

+    /**
+     * 微信公众号 appid
+     *
+     * 冗余 {@link MpAccountDO#getAppId()}
+     */
+    private String appId;
+
+    /**
+     * 菜单名称
+     */
+    private String name;
+    /**
+     * 菜单标识
+     *
+     * 支持多 DB 类型时，无法直接使用 key + @TableField("menuKey") 来实现转换，原因是 "menuKey" AS key 而存在报错
+     */
+    private String menuKey;
+    /**
+     * 父菜单编号
+     */
+    private Long parentId;
+    /**
+     * 排序
+     */
+    private Integer sort;
+
+    // ========== 按钮操作 ==========
+
+    /**
+     * 按钮类型
+     *
+     * 枚举 {@link WxConsts.MenuButtonType}
+     */
+    private String type;
+
+    /**
+     * 网页链接
+     *
+     * 用户点击菜单可打开链接，不超过 1024 字节
+     *
+     * 类型为 {@link WxConsts.XmlMsgType} 的 VIEW、MINIPROGRAM
+     */
+    private String url;
+
+    /**
+     * 小程序的 appId
+     *
+     * 类型为 {@link WxConsts.MenuButtonType} 的 MINIPROGRAM
+     */
+    private String miniProgramAppId;
+    /**
+     * 小程序的页面路径
+     *
+     * 类型为 {@link WxConsts.MenuButtonType} 的 MINIPROGRAM
+     */
+    private String miniProgramPagePath;
+
+    // ========== 消息内容 ==========
+
+    /**
+     * 消息类型
+     *
+     * 当 {@link #type} 为 CLICK、SCANCODE_WAITMSG
+     *
+     * 枚举 {@link WxConsts.XmlMsgType} 中的 TEXT、IMAGE、VOICE、VIDEO、NEWS
+     */
+    private String replyMessageType;
+
+    /**
+     * 回复的消息内容
+     *
+     * 消息类型为 {@link WxConsts.XmlMsgType} 的 TEXT
+     */
+    private String replyContent;
+
+    /**
+     * 回复的媒体 id
+     *
+     * 消息类型为 {@link WxConsts.XmlMsgType} 的 IMAGE、VOICE、VIDEO
+     */
+    private String replyMediaId;
+    /**
+     * 回复的媒体 URL
+     *
+     * 消息类型为 {@link WxConsts.XmlMsgType} 的 IMAGE、VOICE、VIDEO
+     */
+    private String replyMediaUrl;
+
+    /**
+     * 回复的标题
+     *
+     * 消息类型为 {@link WxConsts.XmlMsgType} 的 VIDEO
+     */
+    private String replyTitle;
+    /**
+     * 回复的描述
+     *
+     * 消息类型为 {@link WxConsts.XmlMsgType} 的 VIDEO
+     */
+    private String replyDescription;
+
+    /**
+     * 回复的图文消息数组
+     *
+     * 消息类型为 {@link WxConsts.XmlMsgType} 的 NEWS
+     */
+    private List<MpMessageDO.Article> replyArticles;
+
 }
--- a/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/convert/menu/MpMenuConvert.java
+++ b/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/convert/menu/MpMenuConvert.java
@ -1,14 +1,15 @@
 package cn.iocoder.yudao.module.mp.convert.menu;

-import cn.iocoder.yudao.framework.common.pojo.PageResult;
-
+import cn.iocoder.yudao.module.mp.controller.admin.menu.vo.MpMenuRespVO;
+import cn.iocoder.yudao.module.mp.controller.admin.menu.vo.MpMenuSaveReqVO;
+import cn.iocoder.yudao.module.mp.dal.dataobject.menu.MpMenuDO;
 import cn.iocoder.yudao.module.mp.service.message.bo.MpMessageSendOutReqBO;
 import org.mapstruct.Mapper;
 import org.mapstruct.Mapping;
 import org.mapstruct.Mappings;
 import org.mapstruct.factory.Mappers;
-import cn.iocoder.yudao.module.mp.controller.admin.menu.vo.*;
-import cn.iocoder.yudao.module.mp.dal.dataobject.menu.MpMenuDO;
+
+import java.util.List;

@Mapper
 public interface MpMenuConvert {
@ -19,6 +20,8 @@ public interface MpMenuConvert {

    MpMenuRespVO convert(MpMenuDO bean);

+    List<MpMenuRespVO> convertList(List<MpMenuDO> list);
+
    @Mappings({
            @Mapping(source = "menu.appId", target = "appId"),
            @Mapping(source = "menu.replyMessageType", target = "type"),
--- a/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/dal/mysql/menu/MpMenuMapper.java
+++ b/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/dal/mysql/menu/MpMenuMapper.java
@ -4,6 +4,8 @@ import cn.iocoder.yudao.framework.mybatis.core.mapper.BaseMapperX;
 import cn.iocoder.yudao.module.mp.dal.dataobject.menu.MpMenuDO;
 import org.apache.ibatis.annotations.Mapper;

+import java.util.List;
+
@Mapper
 public interface MpMenuMapper extends BaseMapperX<MpMenuDO> {

@ -12,4 +14,8 @@ public interface MpMenuMapper extends BaseMapperX<MpMenuDO> {
                MpMenuDO::getMenuKey, menuKey);
    }

+    default List<MpMenuDO> selectListByAccountId(Long accountId) {
+        return selectList(MpMenuDO::getAccountId, accountId);
+    }
+
 }
--- a/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/service/menu/MpMenuService.java
+++ b/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/service/menu/MpMenuService.java
@ -1,21 +1,21 @@
 package cn.iocoder.yudao.module.mp.service.menu;

-import javax.validation.*;
-
-import cn.iocoder.yudao.module.mp.controller.admin.menu.vo.*;
+import cn.iocoder.yudao.module.mp.controller.admin.menu.vo.MpMenuSaveReqVO;
 import cn.iocoder.yudao.module.mp.dal.dataobject.menu.MpMenuDO;
-import me.chanjar.weixin.mp.bean.message.WxMpXmlMessage;
 import me.chanjar.weixin.mp.bean.message.WxMpXmlOutMessage;

+import javax.validation.Valid;
+import java.util.List;
+
 /**
- * 微信菜单 Service 接口
+ * 公众号菜单 Service 接口
 *
 * @author 芋道源码
 */
 public interface MpMenuService {

    /**
-     * 保存微信菜单
+     * 保存公众号菜单
     *
     * @param createReqVO 创建信息
     * @return 编号
@ -23,17 +23,17 @@ public interface MpMenuService {
    Long saveMenu(@Valid MpMenuSaveReqVO createReqVO);

    /**
-     * 删除微信菜单
+     * 删除公众号菜单
     *
     * @param id 编号
     */
    void deleteMenu(Long id);

    /**
-     * 获得微信菜单
+     * 获得公众号菜单
     *
     * @param id 编号
-     * @return 微信菜单
+     * @return 公众号菜单
     */
    MpMenuDO getMenu(Long id);

@ -47,4 +47,12 @@ public interface MpMenuService {
     */
    WxMpXmlOutMessage reply(String appId, String key, String openid);

+    /**
+     * 获得公众号菜单列表
+     *
+     * @param accountId 公众号编号
+     * @return 公众号菜单列表
+     */
+    List<MpMenuDO> getMenuListByAccountId(Long accountId);
+
 }
--- a/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/service/menu/MpMenuServiceImpl.java
+++ b/yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/service/menu/MpMenuServiceImpl.java
@ -1,8 +1,10 @@
 package cn.iocoder.yudao.module.mp.service.menu;

 import cn.hutool.core.util.StrUtil;
+import cn.iocoder.yudao.module.mp.controller.admin.menu.vo.MpMenuSaveReqVO;
 import cn.iocoder.yudao.module.mp.convert.menu.MpMenuConvert;
 import cn.iocoder.yudao.module.mp.dal.dataobject.menu.MpMenuDO;
+import cn.iocoder.yudao.module.mp.dal.mysql.menu.MpMenuMapper;
 import cn.iocoder.yudao.module.mp.framework.mp.core.MpServiceFactory;
 import cn.iocoder.yudao.module.mp.service.message.MpMessageService;
 import cn.iocoder.yudao.module.mp.service.message.bo.MpMessageSendOutReqBO;
@ -13,20 +15,16 @@ import me.chanjar.weixin.mp.api.WxMpService;
 import me.chanjar.weixin.mp.bean.message.WxMpXmlOutMessage;
 import org.springframework.context.annotation.Lazy;
 import org.springframework.stereotype.Service;
-
-import javax.annotation.Resource;
-
 import org.springframework.validation.annotation.Validated;

-import cn.iocoder.yudao.module.mp.controller.admin.menu.vo.*;
-
-import cn.iocoder.yudao.module.mp.dal.mysql.menu.MpMenuMapper;
+import javax.annotation.Resource;
+import java.util.List;

 import static cn.iocoder.yudao.framework.common.exception.util.ServiceExceptionUtil.exception;
-import static cn.iocoder.yudao.module.mp.enums.ErrorCodeConstants.*;
+import static cn.iocoder.yudao.module.mp.enums.ErrorCodeConstants.MENU_NOT_EXISTS;

 /**
- * 微信菜单 Service 实现类
+ * 公众号菜单 Service 实现类
 *
 * @author 芋道源码
 */
@ -76,7 +74,6 @@ public class MpMenuServiceImpl implements MpMenuService {

    private void validateMenuExists(Long id) {
        if (mpMenuMapper.selectById(id) == null) {
-            // TODO 芋艿：错误码不太对
            throw exception(MENU_NOT_EXISTS);
        }
    }
@ -105,4 +102,9 @@ public class MpMenuServiceImpl implements MpMenuService {
        return mpMessageService.sendOutMessage(sendReqBO);
    }

+    @Override
+    public List<MpMenuDO> getMenuListByAccountId(Long accountId) {
+        return mpMenuMapper.selectListByAccountId(accountId);
+    }
+
 }
--- a/yudao-ui-admin/package.json
+++ b/yudao-ui-admin/package.json
@ -90,6 +90,8 @@
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-vue": "9.0.0",
    "fs-extra": "^8.1.0",
+    "less": "^4.1.3",
+    "less-loader": "^7.3.0",
    "lint-staged": "12.5.0",
    "runjs": "4.4.2",
    "sass": "1.32.13",
--- a/yudao-ui-admin/src/api/mp/menu.js
+++ b/yudao-ui-admin/src/api/mp/menu.js
@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 获得公众号菜单列表
+export function getMenuList(accountId) {
+  return request({
+    url: '/mp/menu/list?accountId=' + accountId,
+    method: 'get',
+  })
+}
--- a/yudao-ui-admin/src/views/mp/menu/index.vue
+++ b/yudao-ui-admin/src/views/mp/menu/index.vue
@ -23,25 +23,40 @@ SOFTWARE.
 -->
 <template>
  <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="weixin-hd">
-                                <div class="weixin-title">
-                                    {{menuName}}
-                                </div>
+            <div class="weixin-title">{{menuName}}</div>
        </div>
        <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="subtitle menu_bottom" v-if="item.sub_button" v-for="(subItem, k) in item.sub_button" :key="k">
-                                            <div class="menu_subItem" :class="{'active': isSubMenuActive == i + '' +k}" @click="subMenuFun(subItem, i, k)">{{subItem.name}}</div>
+            <div class="submenu" v-if="isSubMenuFlag === i">
+              <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="subMenuClick(subItem, i, k)">
+                  {{subItem.name}}
+                </div>
              </div>
              <!-- 二级菜单加号， 当长度 小于 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>
          <!-- 一级菜单加号 -->
@ -69,11 +84,11 @@ SOFTWARE.
                          <el-option v-for="item in menuOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                      </el-select>
                  </div>
-                                    <div class="configur_content" v-if="tempObj.type == 'view'">
+                  <div class="configur_content" v-if="tempObj.type === 'view'">
                      <span>跳转链接：</span>
                      <el-input class="input_width"  v-model="tempObj.url" placeholder="请输入链接" clearable></el-input>
                  </div>
-                                    <div class="configur_content" v-if="tempObj.type == 'miniprogram'">
+                  <div class="configur_content" v-if="tempObj.type === 'miniprogram'">
                      <div class="applet">
                          <span>小程序的appid：</span>
                          <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 WxNews 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 {
  name: 'mpMenu',
@ -137,11 +154,22 @@ SOFTWARE.
  },
  data(){
    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 查询参数
+      accountId: undefined,
+      menuList: {
+        children: [],
+      },
+
      showRightFlag:false, // 右边配置显示默认详情还是配置详情
-                menu:{
+      menu:{ // 横向菜单
          button:[
          ]
-                },//横向菜单
+      },
+
      isActive: -1,// 一级菜单点中样式
      isSubMenuActive: -1, // 一级菜单点中样式
      isSubMenuFlag: -1, // 二级菜单显示标志
@ -186,21 +214,65 @@ SOFTWARE.
          label: '选择地理位置'
      }],
      dialogNewsVisible: false,
-                saveLoading:false,
-                hackResetWxReplySelect:false
+      hackResetWxReplySelect: false,
+
+      // 公众号账号列表
+      accounts: [],
    }
  },
  created() {
-            this.getMenuFun()
-        },
-        mounted() {
-
-        },
-        filters:{
+    getSimpleAccounts().then(response => {
+      this.accounts = response.data;
+      // 默认选中第一个
+      if (this.accounts.length > 0) {
+        this.setAccountId(this.accounts[0].id);
+      }
+      // 加载数据
+      this.getList();
+    })
  },
  computed: {
+    menuKeyLength:function() {
+      // menuObj 的长度，当长度小于 3 才显示一级菜单的加号
+      return this.menu.button.length;
+    }
  },
  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(){
        this.$delete(this.tempObj,'repName')
        this.$delete(this.tempObj,'repUrl')
@ -223,11 +295,6 @@ SOFTWARE.
        item.content.articles = item.content.articles.slice(0,1)
        this.tempObj.content = item.content
    },
-            getMenuFun(){
-                getList().then((res)=>{
-                    this.menu.button = JSON.parse(res.msg).button;
-                });
-            },
    handleClick(tab, event){
        this.tempObj.mediaType = tab.name
    },
@ -237,11 +304,11 @@ SOFTWARE.
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
-                    this.saveLoading = true
+            this.loading = true
            saveAndRelease({
                strWxMenu:this.menu
            }).then(response => {
-                        this.saveLoading = false
+                this.loading = false
                if(response.code == 200){
                    this.$message({
                        showClose: true,
@ -252,13 +319,13 @@ SOFTWARE.
                    this.$message.error(response.data.msg)
                }
            }).catch(() => {
-                        this.saveLoading = false
+                this.loading = false
            })
        }).catch(() => {
        })
    },
    // 一级菜单点击事件
-            menuFun(i, item){
+    menuClick(i, item){
        this.hackResetWxReplySelect = false//销毁组件
        this.$nextTick(() => {
            this.hackResetWxReplySelect = true//重建组件
@ -278,7 +345,7 @@ SOFTWARE.
        }
    },
    // 二级菜单点击事件
-            subMenuFun(subItem, index, k){
+    subMenuClick(subItem, index, k){
        this.hackResetWxReplySelect = false//销毁组件
        this.$nextTick(() => {
            this.hackResetWxReplySelect = true//重建组件
@ -301,7 +368,7 @@ SOFTWARE.
            sub_button: []
        }
        this.$set(this.menu.button,menuKeyLength,addButton)
-                this.menuFun(this.menuKeyLength-1, addButton)
+        this.menuClick(this.menuKeyLength-1, addButton)
    },
    // 添加横向二级菜单
    addSubMenu(i,item){
@ -320,7 +387,7 @@ SOFTWARE.
            name: "子菜单名称"
        }
        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){
@ -354,12 +421,6 @@ SOFTWARE.
        });
    }
  },
-        computed:{
-            // menuObj的长度，当长度 小于  3 才显示一级菜单的加号
-            menuKeyLength:function(){
-                return this.menu.button.length;
-            }
-        }
 }
 </script>
 <!--本组件样式-->
--- a/yudao-ui-admin/yarn.lock
+++ b/yudao-ui-admin/yarn.lock
@ -3340,6 +3340,13 @@
  "resolved" "https://registry.npmmirror.com/cookie/-/cookie-0.5.0.tgz"
  "version" "0.5.0"

+"copy-anything@^2.0.1":
+  "integrity" "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw=="
+  "resolved" "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz"
+  "version" "2.0.6"
+  dependencies:
+    "is-what" "^3.14.1"
+
 "copy-concurrently@^1.0.0":
  "integrity" "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A=="
  "resolved" "https://registry.npmmirror.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz"
@ -3696,6 +3703,13 @@
  dependencies:
    "ms" "2.0.0"

+"debug@^3.2.6":
+  "integrity" "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ=="
+  "resolved" "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz"
+  "version" "3.2.7"
+  dependencies:
+    "ms" "^2.1.1"
+
 "debug@^3.2.7":
  "integrity" "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ=="
  "resolved" "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz"
@ -4215,7 +4229,7 @@
  "resolved" "https://registry.npmmirror.com/entities/-/entities-2.2.0.tgz"
  "version" "2.2.0"

-"errno@^0.1.3", "errno@~0.1.7":
+"errno@^0.1.1", "errno@^0.1.3", "errno@~0.1.7":
  "integrity" "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A=="
  "resolved" "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz"
  "version" "0.1.8"
@ -5633,6 +5647,13 @@
  dependencies:
    "safer-buffer" ">= 2.1.2 < 3"

+"iconv-lite@^0.6.3":
+  "integrity" "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw=="
+  "resolved" "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz"
+  "version" "0.6.3"
+  dependencies:
+    "safer-buffer" ">= 2.1.2 < 3.0.0"
+
 "icss-utils@^4.0.0", "icss-utils@^4.1.1":
  "integrity" "sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA=="
  "resolved" "https://registry.npmmirror.com/icss-utils/-/icss-utils-4.1.1.tgz"
@ -5665,7 +5686,7 @@
  "resolved" "https://registry.npmmirror.com/ignore/-/ignore-4.0.6.tgz"
  "version" "4.0.6"

-"image-size@^0.5.1":
+"image-size@^0.5.1", "image-size@~0.5.0":
  "integrity" "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ=="
  "resolved" "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz"
  "version" "0.5.5"
@ -6150,6 +6171,11 @@
  dependencies:
    "call-bind" "^1.0.2"

+"is-what@^3.14.1":
+  "integrity" "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA=="
+  "resolved" "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz"
+  "version" "3.14.1"
+
 "is-windows@^1.0.2":
  "integrity" "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
  "resolved" "https://registry.npmmirror.com/is-windows/-/is-windows-1.0.2.tgz"
@ -6402,6 +6428,32 @@
    "picocolors" "^1.0.0"
    "shell-quote" "^1.7.3"

+"less-loader@^7.3.0":
+  "integrity" "sha512-Mi8915g7NMaLlgi77mgTTQvK022xKRQBIVDSyfl3ErTuBhmZBQab0mjeJjNNqGbdR+qrfTleKXqbGI4uEFavxg=="
+  "resolved" "https://registry.npmmirror.com/less-loader/-/less-loader-7.3.0.tgz"
+  "version" "7.3.0"
+  dependencies:
+    "klona" "^2.0.4"
+    "loader-utils" "^2.0.0"
+    "schema-utils" "^3.0.0"
+
+"less@^3.5.0 || ^4.0.0", "less@^4.1.3":
+  "integrity" "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA=="
+  "resolved" "https://registry.npmmirror.com/less/-/less-4.1.3.tgz"
+  "version" "4.1.3"
+  dependencies:
+    "copy-anything" "^2.0.1"
+    "parse-node-version" "^1.0.1"
+    "tslib" "^2.3.0"
+  optionalDependencies:
+    "errno" "^0.1.1"
+    "graceful-fs" "^4.1.2"
+    "image-size" "~0.5.0"
+    "make-dir" "^2.1.0"
+    "mime" "^1.4.1"
+    "needle" "^3.1.0"
+    "source-map" "~0.6.0"
+
 "levn@^0.4.1":
  "integrity" "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="
  "resolved" "https://registry.npmmirror.com/levn/-/levn-0.4.1.tgz"
@ -6629,6 +6681,14 @@
    "pify" "^4.0.1"
    "semver" "^5.6.0"

+"make-dir@^2.1.0":
+  "integrity" "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA=="
+  "resolved" "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz"
+  "version" "2.1.0"
+  dependencies:
+    "pify" "^4.0.1"
+    "semver" "^5.6.0"
+
 "make-dir@^3.0.2", "make-dir@^3.1.0":
  "integrity" "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw=="
  "resolved" "https://registry.npmmirror.com/make-dir/-/make-dir-3.1.0.tgz"
@ -6819,6 +6879,11 @@
  dependencies:
    "mime-db" "1.52.0"

+"mime@^1.4.1":
+  "integrity" "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+  "resolved" "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz"
+  "version" "1.6.0"
+
 "mime@^2.4.4":
  "integrity" "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg=="
  "resolved" "https://registry.npmmirror.com/mime/-/mime-2.6.0.tgz"
@ -7111,6 +7176,15 @@
  "resolved" "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz"
  "version" "1.4.0"

+"needle@^3.1.0":
+  "integrity" "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ=="
+  "resolved" "https://registry.npmmirror.com/needle/-/needle-3.2.0.tgz"
+  "version" "3.2.0"
+  dependencies:
+    "debug" "^3.2.6"
+    "iconv-lite" "^0.6.3"
+    "sax" "^1.2.4"
+
 "negotiator@0.6.3":
  "integrity" "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
  "resolved" "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.3.tgz"
@ -7607,6 +7681,11 @@
    "json-parse-even-better-errors" "^2.3.0"
    "lines-and-columns" "^1.1.6"

+"parse-node-version@^1.0.1":
+  "integrity" "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA=="
+  "resolved" "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz"
+  "version" "1.0.1"
+
 "parse5-htmlparser2-tree-adapter@^6.0.0":
  "integrity" "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA=="
  "resolved" "https://registry.npmmirror.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz"
@ -8850,7 +8929,7 @@
  dependencies:
    "ret" "~0.1.10"

-"safer-buffer@^2.0.2", "safer-buffer@^2.1.0", "safer-buffer@>= 2.1.2 < 3", "safer-buffer@~2.1.0":
+"safer-buffer@^2.0.2", "safer-buffer@^2.1.0", "safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", "safer-buffer@~2.1.0":
  "integrity" "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
  "resolved" "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz"
  "version" "2.1.2"
@ -10017,7 +10096,7 @@
  "resolved" "https://registry.npmmirror.com/tslib/-/tslib-2.4.1.tgz"
  "version" "2.4.1"

-"tslib@2.3.0":
+"tslib@^2.3.0", "tslib@2.3.0":
  "integrity" "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
  "resolved" "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz"
  "version" "2.3.0"