07-云尚办公系统-微信公众号

18.微信公众号

1.菜单管理

1.CRUD后台

com.atguigu.wechat.controller.MenuController

package com.atguigu.wechat.controller;

import com.atguigu.common.result.Result;
import com.atguigu.model.wechat.Menu;
import com.atguigu.vo.wechat.MenuVo;
import com.atguigu.wechat.service.MenuService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 * <p>
 * 菜单 前端控制器
 * </p>
 *
 * @author Yangmc
 * @since 2024-01-28
 */
@Api(tags = "微信菜单管理")
@RestController
@RequestMapping("/admin/wechat/menu")
public class MenuController {
    @Autowired
    private MenuService menuService;

    /**
     * 添加菜单
     *
     * @param menu
     * @return
     */
    @ApiOperation("添加菜单")
    @PostMapping("")
    public Result save(@RequestBody Menu menu) {
        if (menuService.save(menu)) {
            return Result.ok();
        } else {
            return Result.fail();
        }
    }

    /**
     * 删除菜单
     *
     * @param id
     * @return
     */
    @ApiOperation("删除菜单")
    @DeleteMapping("/{id}")
    public Result remove(@PathVariable Long id) {
        if (menuService.removeById(id)) {
            return Result.ok();
        } else {
            return Result.fail();
        }
    }


    /**
     * 更新菜单
     *
     * @param menu
     * @return
     */
    @ApiOperation("更新菜单")
    @PutMapping("")
    public Result update(@RequestBody Menu menu) {
        if (menuService.updateById(menu)) {
            return Result.ok();
        } else {
            return Result.fail();
        }
    }

    /**
     * 根据id查询菜单详细
     *
     * @return
     */
    @ApiOperation("根据id查询菜单详细")
    @GetMapping("/{id}")
    public Result getMenuById(@PathVariable long id) {
        Menu menu = menuService.getById(id);
        return Result.ok(menu);
    }

    /**
     * 获取全部菜单
     *
     * @return
     */
    @ApiOperation(value = "获取全部菜单")
    @GetMapping("findMenuInfo")
    public Result findMenuInfo() {
        List<MenuVo> menuList = menuService.findMenuInfo();
        return Result.ok(menuList);
    }

    /**
     * 同步公众号菜单
     *
     * @return
     */
    @ApiOperation(value = "同步菜单")
    @GetMapping("syncMenu")
    public Result createMenu() {
        menuService.syncMenu();
        return Result.ok();
    }

    /**
     * 删除公众号菜单
     *
     * @return
     */
    @ApiOperation(value = "删除菜单")
    @DeleteMapping("removeMenu")
    public Result removeMenu() {
        menuService.removeMenu();
        return Result.ok();
    }
}

com.atguigu.wechat.service.impl.MenuServiceImpl

package com.atguigu.wechat.service.impl;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.atguigu.model.wechat.Menu;
import com.atguigu.vo.wechat.MenuVo;
import com.atguigu.wechat.mapper.MenuMapper;
import com.atguigu.wechat.service.MenuService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import me.chanjar.weixin.common.error.WxErrorException;
import me.chanjar.weixin.mp.api.WxMpService;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.CollectionUtils;

import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;

/**
 * <p>
 * 菜单 服务实现类
 * </p>
 *
 * @author Yangmc
 * @since 2024-01-28
 */
@Service
public class MenuServiceImpl extends ServiceImpl<MenuMapper, Menu> implements MenuService {
    @Autowired
    private WxMpService wxMpService;

    /**
     * 获取全部菜单
     *
     * @return
     */
    @Override
    public List<MenuVo> findMenuInfo() {
        List<MenuVo> list = new ArrayList<>();

        //1 查询所有菜单list集合
        List<Menu> menuList = baseMapper.selectList(null);

        //2 查询所有一级菜单 parent_id=0，返回一级菜单list集合
        List<Menu> oneMenuList = menuList.stream()
                .filter(menu -> menu.getParentId().longValue() == 0)
                .collect(Collectors.toList());

        //3 一级菜单list集合遍历，得到每个一级菜单
        for (Menu oneMenu : oneMenuList) {
            //一级菜单Menu --- MenuVo
            MenuVo oneMenuVo = new MenuVo();
            BeanUtils.copyProperties(oneMenu, oneMenuVo);

            //4 获取每个一级菜单里面所有二级菜单 id 和 parent_id比较
            //一级菜单id  和  其他菜单parent_id
            List<Menu> twoMenuList = menuList.stream()
                    .filter(menu -> menu.getParentId().longValue() == oneMenu.getId())
                    .collect(Collectors.toList());

            //5 把一级菜单里面所有二级菜单获取到，封装一级菜单children集合里面
            //List<Menu> -- List<MenuVo>
            List<MenuVo> children = new ArrayList<>();
            for (Menu twoMenu : twoMenuList) {
                MenuVo twoMenuVo = new MenuVo();
                BeanUtils.copyProperties(twoMenu, twoMenuVo);
                children.add(twoMenuVo);
            }
            oneMenuVo.setChildren(children);
            //把每个封装好的一级菜单放到最终list集合
            list.add(oneMenuVo);
        }
        return list;
    }

    /**
     * 同步菜单
     */
    @Override
    public void syncMenu() {
        //1 菜单数据查询出来，封装微信要求菜单格式
        List<MenuVo> menuVoList = this.findMenuInfo();
        //菜单
        JSONArray buttonList = new JSONArray();
        for(MenuVo oneMenuVo : menuVoList) {
            JSONObject one = new JSONObject();
            one.put("name", oneMenuVo.getName());
            if(CollectionUtils.isEmpty(oneMenuVo.getChildren())) {
                one.put("type", oneMenuVo.getType());
                one.put("url", "http://ggkt1.vipgz1.91tunnel.com/#"+oneMenuVo.getUrl());
            } else {
                JSONArray subButton = new JSONArray();
                for(MenuVo twoMenuVo : oneMenuVo.getChildren()) {
                    JSONObject view = new JSONObject();
                    view.put("type", twoMenuVo.getType());
                    if(twoMenuVo.getType().equals("view")) {
                        view.put("name", twoMenuVo.getName());
                        //H5页面地址
                        view.put("url", "http://ggkt1.vipgz1.91tunnel.com#"+twoMenuVo.getUrl());
                    } else {
                        view.put("name", twoMenuVo.getName());
                        view.put("key", twoMenuVo.getMeunKey());
                    }
                    subButton.add(view);
                }
                one.put("sub_button", subButton);
            }
            buttonList.add(one);
        }
        //菜单
        JSONObject button = new JSONObject();
        button.put("button", buttonList);

        //2 调用工具里面的方法实现菜单推送
        try {
            wxMpService.getMenuService().menuCreate(button.toString());
        } catch (WxErrorException e) {
            throw new RuntimeException(e);
        }
    }

    /**
     * 删除菜单
     */
    @Override
    public void removeMenu() {
        try {
            wxMpService.getMenuService().menuDelete();
        } catch (WxErrorException e) {
            throw new RuntimeException(e);
        }
    }
}

2.整合前端

定义api接口函数

src/api/wechat/menu.js

import request from '@/utils/request'

const api_name = '/admin/wechat/menu'

// 新增菜单
export function saveMenu(data) {
  return request({
    url: `${api_name}`,
    method: 'post',
    data: data
  })
}

// 删除菜单
export function removeMenuById(id) {
  return request({
    url: `${api_name}/${id}`,
    method: 'delete'
  })
}

// 修改菜单
export function updateMenu(data) {
  return request({
    url: `${api_name}`,
    method: 'put',
    data: data
  })
}

// 根据id查询菜单详细
export function getMenuById(id) {
  return request({
    url: `${api_name}/${id}`,
    method: 'get'
  })
}

// 查询所有菜单
export function findMenuInfo() {
  return request({
    url: `${api_name}/findMenuInfo`,
    method: `get`
  })
}

// 同步菜单
export function syncMenu() {
  return request({
    url: `${api_name}/syncMenu`,
    method: `get`
  })
}

// 删除公众号菜单
export function removeMenu() {
  return request({
    url: `${api_name}/removeMenu`,
    method: `delete`
  })
}

页面展示

src/views/wechat/menu/index.vue

<template>
  <div class="app-container">
    <!-- CRUD -->
    <el-row :gutter="10" class="mb8" style="margin-bottom: 10px">
      <el-col :span="1.5">
        <el-button
          v-if="$hasBP('bnt.menu.add') "
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增菜单
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-if="$hasBP('bnt.menu.syncMenu') "
          type="success"
          plain
          icon="el-icon-sort"
          size="mini"
          @click="handleSync"
        >同步菜单
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-if="$hasBP('bnt.menu.removeMenu') "
          type="warning"
          plain
          icon="el-icon-bottom"
          size="mini"
          @click="handleRemove"
        >下线菜单
        </el-button>
      </el-col>
    </el-row>

    <!-- 菜单列表 -->
    <el-table
      v-if="refreshTable"
      v-loading="loading"
      :data="menuList"
      row-key="id"
      default-expand-all
      :tree-props="{ children: 'children' }"
      border
      header-cell-style="background-color:#EEE;color:#444;height:41px"
    >
      >
      <el-table-column
        key="name"
        label="菜单名称"
        align="center"
        prop="name"
        :show-overflow-tooltip="true"
      />
      <el-table-column prop="type" label="类型" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.type == 'view' ? '链接' : scope.row.type == 'click' ? '事件' : '' }}
        </template>
      </el-table-column>
      <el-table-column
        key="url"
        label="菜单URL"
        align="center"
        prop="url"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        key="meunKey"
        label="菜单KEY"
        align="center"
        prop="meunKey"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        key="sort"
        label="排序号"
        align="center"
        prop="sort"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="操作"
        align="center"
        width="160"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-if="$hasBP('bnt.menu.update') "
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
            v-if="$hasBP('bnt.menu.remove') "
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="上级菜单" prop="parentId">
          <el-select
            v-model="form.parentId"
            placeholder="请选择上级菜单"
          >
            <el-option
              v-for="item in menuList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio label="view">链接</el-radio>
            <el-radio label="click">事件</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.type == 'view'" label="链接" prop="url">
          <el-input v-model="form.url" placeholder="请输入菜单链接" />
        </el-form-item>
        <el-form-item v-if="form.type == 'click'" label="菜单KEY" prop="menuKey">
          <el-input v-model="form.meunKey" placeholder="请输入菜单KEY" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.sort" placeholder="请输入菜单排序" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  findMenuInfo,
  getMenuById,
  removeMenu,
  removeMenuById,
  saveMenu,
  syncMenu,
  updateMenu
} from '@/api/wechat/menu'

export default {
  name: 'Menu',
  data() {
    return {
      // 数据是否正在加载
      loading: false,
      // 菜单表格数据
      menuList: [],
      // 重新渲染表格状态
      refreshTable: true,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '菜单顺序不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询菜单列表 */
    getList() {
      this.loading = true
      findMenuInfo().then((res) => {
        console.log('menuList:', res)
        this.menuList = res.data
        this.loading = false
      })
    },

    /** 重置表单 */
    reset() {
      this.form = {
        id: undefined,
        parentId: 0,
        name: undefined,
        type: undefined,
        url: undefined,
        meunKey: undefined,
        sort: undefined
      }
    },

    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset()
      if (row != null && row.id) {
        this.form.parentId = row.id
      } else {
        this.form.parentId = 0
        const menu = { id: 0, name: '主类目', children: [] }
        this.menuList.push(menu)
      }
      this.title = '添加菜单'
      this.open = true
    },

    /** 同步按钮操作 */
    handleSync() {
      this.$confirm('你确定上传菜单吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return syncMenu()
      }).then((response) => {
        this.$message.success('同步菜单成功')
      }).catch(error => {
        console.log('同步error', error)
        if (error === 'cancel') {
          this.$message.info('取消上传')
        }
      })
    },

    /** 下线菜单操作*/
    handleRemove() {
      removeMenu().then(response => {
        this.$message.success('所有菜单已下线')
      })
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm(
        '您确定删除菜单[' + row.name + ']吗?(如果存在下级节点则不能删除)',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          removeMenuById(row.id)
            .then((res) => {
              this.$message({ message: '删除成功', type: 'success' })
              this.getList()
            })
            .catch((err) => {
              this.$message.error(err)
            })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      if (row != null && row.id) {
        getMenuById(row.id).then(res => {
          this.form = res.data
          this.title = '修改菜单'
          this.open = true
        })
      }
    },

    /** 提交 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id !== undefined) {
            updateMenu(this.form)
              .then((res) => {
                this.$message.success('修改成功！')
                this.open = false
                this.getList()
              })
              // eslint-disable-next-line handle-callback-err
              .catch((err) => {
                this.$message.error('修改失败！')
              })
          } else {
            saveMenu(this.form)
              .then((res) => {
                this.$message.success('新增成功！')
                this.open = false
                this.getList()
              })
              // eslint-disable-next-line handle-callback-err
              .catch((err) => {
                this.$message.error('新增失败！')
              })
          }
        }
      })
    },
    /** 取消按钮*/
    cancel() {
      this.open = false
      this.reset()
      this.$refs['form'].resetFields()
    }
  }
}
</script>

<style scoped>

</style>