mp：增加【图片】素材的选择

YunaiV
1 parent 431569fd
Showing 23 changed files with 187 additions and 1076 deletions
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/material/MpMaterialController.http
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/material/MpMaterialController.java
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/material/vo/MpMaterialPageReqVO.java
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/material/vo/MpMaterialRespVO.java
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/convert/material/MpMaterialConvert.java
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/dal/dataobject/material/MpMaterialDO.java
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/dal/mysql/material/MpMaterialMapper.java
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/service/material/MpMaterialService.java
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/service/material/MpMaterialServiceImpl.java
yudao-ui-admin/src/api/mp/material.js
yudao-ui-admin/src/api/wechatMp/wxFansMsgRes.js
yudao-ui-admin/src/api/wechatMp/wxMediaUpload.js
yudao-ui-admin/src/api/wechatMp/wxMenu.js
yudao-ui-admin/src/api/wechatMp/wxNewsArticleItem.js
yudao-ui-admin/src/api/wechatMp/wxNewsTemplate.js
yudao-ui-admin/src/api/wechatMp/wxReceiveText.js
yudao-ui-admin/src/api/wechatMp/wxSubscribeText.js
yudao-ui-admin/src/api/wechatMp/wxTextTemplate.js
yudao-ui-admin/src/views/mp/components/wx-material-select/main.vue
yudao-ui-admin/src/views/mp/components/wx-msg/main.vue
+### 请求 /mp/material/page 接口 => 成功
+GET {{baseUrl}}/mp/material/page?permanent=true&pageNo=1&pageSize=10
+Content-Type: application/json
+Authorization: Bearer {{token}}
+tenant-id: {{adminTenentId}}
 package cn.iocoder.yudao.module.mp.controller.admin.material;
 import cn.iocoder.yudao.framework.common.pojo.CommonResult;
-import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadPermanentReqVO;
-import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadRespVO;
-import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadTemporaryReqVO;
+import cn.iocoder.yudao.framework.common.pojo.PageResult;
+import cn.iocoder.yudao.module.mp.controller.admin.material.vo.*;
 import cn.iocoder.yudao.module.mp.convert.material.MpMaterialConvert;
 import cn.iocoder.yudao.module.mp.dal.dataobject.material.MpMaterialDO;
 import cn.iocoder.yudao.module.mp.service.material.MpMaterialService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
 import org.springframework.validation.annotation.Validated;
+import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
@@ -45,4 +45,11 @@ public class MpMaterialController {
         return success(MpMaterialConvert.INSTANCE.convert(material));
     }
+    @ApiOperation("获得素材分页")
+    @GetMapping("/page")
+    public CommonResult<PageResult<MpMaterialRespVO>> getMaterialPage(@Valid MpMaterialPageReqVO pageReqVO) {
+        PageResult<MpMaterialDO> pageResult = mpMaterialService.getMaterialPage(pageReqVO);
+        return success(MpMaterialConvert.INSTANCE.convertPage(pageResult));
+    }
+
 }
+package cn.iocoder.yudao.module.mp.controller.admin.material.vo;
+
+import cn.iocoder.yudao.framework.common.pojo.PageParam;
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import lombok.ToString;
+
+@ApiModel("管理后台 - 公众号素材的分页 Request VO")
+@Data
+@EqualsAndHashCode(callSuper = true)
+@ToString(callSuper = true)
+public class MpMaterialPageReqVO extends PageParam {
+
+    @ApiModelProperty(value = "是否永久", example = "true")
+    private Boolean permanent;
+
+    @ApiModelProperty(value = "文件类型", example = "image", notes = "参见 WxConsts.MediaFileType 枚举")
+    private String type;
+
+}
+package cn.iocoder.yudao.module.mp.controller.admin.material.vo;
+
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Data;
+
+@ApiModel("管理后台 - 公众号素材 Response VO")
+@Data
+public class MpMaterialRespVO {
+
+    @ApiModelProperty(value = "主键", required = true, example = "1024")
+    private Long id;
+
+    @ApiModelProperty(value = "公众号账号的编号", required = true, example = "1")
+    private Long accountId;
+    @ApiModelProperty(value = "公众号账号的 appId", required = true, example = "wx1234567890")
+    private String appId;
+
+    @ApiModelProperty(value = "素材的 media_id", required = true, example = "123")
+    private String mediaId;
+
+    @ApiModelProperty(value = "文件类型", required = true, example = "image", notes = "参见 WxConsts.MediaFileType 枚举")
+    private String type;
+
+    @ApiModelProperty(value = "是否永久", required = true, example = "true", notes = "true - 永久；false - 临时")
+    private Boolean permanent;
+
+    @ApiModelProperty(value = "素材的 URL", required = true, example = "https://www.iocoder.cn/1.png")
+    private String url;
+
+
+    @ApiModelProperty(value = "名字", example = "yunai.png")
+    private String name;
+
+    @ApiModelProperty(value = "公众号文件 URL", example = "https://mmbiz.qpic.cn/xxx.mp3", notes = "只有【永久素材】使用")
+    private String mpUrl;
+
+    @ApiModelProperty(value = "视频素材的标题", example = "我是标题", notes = "只有【永久素材】使用")
+    private String title;
+    @ApiModelProperty(value = "视频素材的描述", example = "我是介绍", notes = "只有【永久素材】使用")
+    private String introduction;
+}
 package cn.iocoder.yudao.module.mp.convert.material;
+import cn.iocoder.yudao.framework.common.pojo.PageResult;
+import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialRespVO;
 import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadRespVO;
 import cn.iocoder.yudao.module.mp.dal.dataobject.account.MpAccountDO;
 import cn.iocoder.yudao.module.mp.dal.dataobject.material.MpMaterialDO;
@@ -20,8 +22,10 @@ public interface MpMaterialConvert {
             @Mapping(target = "id", ignore = true),
             @Mapping(source = "account.id", target = "accountId"),
             @Mapping(source = "account.appId", target = "appId"),
+            @Mapping(source = "name", target = "name")
     })
-    MpMaterialDO convert(String mediaId, String type, String url, MpAccountDO account);
+    MpMaterialDO convert(String mediaId, String type, String url, MpAccountDO account,
+                         String name);
     @Mappings({
             @Mapping(target = "id", ignore = true),
@@ -38,4 +42,6 @@ public interface MpMaterialConvert {
         return new WxMpMaterial(name, file, title, introduction);
     }
+    PageResult<MpMaterialRespVO> convertPage(PageResult<MpMaterialDO> page);
+
 }
@@ -69,9 +69,13 @@ public class MpMaterialDO extends BaseDO {
     /**
      * 名字
      *
-     * 只有【永久素材】使用
+     * 永久素材：非空
+     * 临时素材：可能为空。
+     *      1. 为空的情况：用户主动发送的图片、语音等
+     *      2. 非空的情况：主动发送给用户的图片、语音等
      */
     private String name;
+
     /**
      * 公众号文件 URL
      *
 package cn.iocoder.yudao.module.mp.dal.mysql.material;
+import cn.iocoder.yudao.framework.common.pojo.PageResult;
 import cn.iocoder.yudao.framework.mybatis.core.mapper.BaseMapperX;
+import cn.iocoder.yudao.framework.mybatis.core.query.LambdaQueryWrapperX;
+import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialPageReqVO;
 import cn.iocoder.yudao.module.mp.dal.dataobject.material.MpMaterialDO;
 import org.apache.ibatis.annotations.Mapper;
@@ -12,4 +15,10 @@ public interface MpMaterialMapper extends BaseMapperX&lt;MpMaterialDO&gt; {
                 MpMaterialDO::getMediaId, mediaId);
     }
+    default PageResult<MpMaterialDO> selectPage(MpMaterialPageReqVO pageReqVO) {
+        return selectPage(pageReqVO, new LambdaQueryWrapperX<MpMaterialDO>()
+                .eqIfPresent(MpMaterialDO::getPermanent, pageReqVO.getPermanent())
+                .eqIfPresent(MpMaterialDO::getType, pageReqVO.getType()));
+    }
+
 }
 package cn.iocoder.yudao.module.mp.service.material;
+import cn.iocoder.yudao.framework.common.pojo.PageResult;
+import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialPageReqVO;
 import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadPermanentReqVO;
 import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadTemporaryReqVO;
 import cn.iocoder.yudao.module.mp.dal.dataobject.material.MpMaterialDO;
@@ -45,4 +47,12 @@ public interface MpMaterialService {
      */
     MpMaterialDO uploadPermanentMaterial(@Valid MpMaterialUploadPermanentReqVO reqVO) throws IOException;
+    /**
+     * 获得素材分页
+     *
+     * @param pageReqVO 分页请求
+     * @return 素材分页
+     */
+    PageResult<MpMaterialDO> getMaterialPage(MpMaterialPageReqVO pageReqVO);
+
 }
@@ -4,7 +4,9 @@ import cn.hutool.core.io.FileTypeUtil;
 import cn.hutool.core.io.FileUtil;
 import cn.hutool.core.util.ObjUtil;
 import cn.hutool.core.util.StrUtil;
+import cn.iocoder.yudao.framework.common.pojo.PageResult;
 import cn.iocoder.yudao.module.infra.api.file.FileApi;
+import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialPageReqVO;
 import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadPermanentReqVO;
 import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadTemporaryReqVO;
 import cn.iocoder.yudao.module.mp.convert.material.MpMaterialConvert;
@@ -67,7 +69,7 @@ public class MpMaterialServiceImpl implements MpMaterialService {
             return null;
         }
         MpAccountDO account = mpAccountService.getRequiredAccount(accountId);
-        material = MpMaterialConvert.INSTANCE.convert(mediaId, type, url, account)
+        material = MpMaterialConvert.INSTANCE.convert(mediaId, type, url, account, null)
                 .setPermanent(false);
         mpMaterialMapper.insert(material);
@@ -100,8 +102,8 @@ public class MpMaterialServiceImpl implements MpMaterialService {
         // 第二步，存储到数据库
         MpAccountDO account = mpAccountService.getRequiredAccount(reqVO.getAccountId());
-        MpMaterialDO material = MpMaterialConvert.INSTANCE.convert(mediaId, reqVO.getType(), url, account)
-                .setPermanent(false);
+        MpMaterialDO material = MpMaterialConvert.INSTANCE.convert(mediaId, reqVO.getType(), url, account,
+                        reqVO.getFile().getName()).setPermanent(false);
         mpMaterialMapper.insert(material);
         return material;
     }
@@ -139,6 +141,11 @@ public class MpMaterialServiceImpl implements MpMaterialService {
         return material;
     }
+    @Override
+    public PageResult<MpMaterialDO> getMaterialPage(MpMaterialPageReqVO pageReqVO) {
+        return mpMaterialMapper.selectPage(pageReqVO);
+    }
+
     /**
      * 下载微信媒体文件的内容，并上传到文件服务
      *
+import request from '@/utils/request'
+
+// 获得公众号素材分页
+export function getMaterialPage(query) {
+  return request({
+    url: '/mp/material/page',
+    method: 'get',
+    params: query
+  })
+}
-import request from '@/utils/request'
-
-// 创建回复粉丝消息历史表 
-export function createWxFansMsgRes(data) {
-  return request({
-    url: '/wechatMp/wx-fans-msg-res/create',
-    method: 'post',
-    data: data
-  })
-}
-
-// 更新回复粉丝消息历史表 
-export function updateWxFansMsgRes(data) {
-  return request({
-    url: '/wechatMp/wx-fans-msg-res/update',
-    method: 'put',
-    data: data
-  })
-}
-
-// 删除回复粉丝消息历史表 
-export function deleteWxFansMsgRes(id) {
-  return request({
-    url: '/wechatMp/wx-fans-msg-res/delete?id=' + id,
-    method: 'delete'
-  })
-}
-
-// 获得回复粉丝消息历史表 
-export function getWxFansMsgRes(id) {
-  return request({
-    url: '/wechatMp/wx-fans-msg-res/get?id=' + id,
-    method: 'get'
-  })
-}
-
-// 获得回复粉丝消息历史表 分页
-export function getWxFansMsgResPage(query) {
-  return request({
-    url: '/wechatMp/wx-fans-msg-res/page',
-    method: 'get',
-    params: query
-  })
-}
-
-// 导出回复粉丝消息历史表  Excel
-export function exportWxFansMsgResExcel(query) {
-  return request({
-    url: '/wechatMp/wx-fans-msg-res/export-excel',
-    method: 'get',
-    params: query,
-    responseType: 'blob'
-  })
-}
-import request from '@/utils/request'
-
-// 创建微信素材上传表 
-export function createWxMediaUpload(data) {
-  return request({
-    url: '/wechatMp/wx-media-upload/create',
-    method: 'post',
-    data: data
-  })
-}
-
-// 更新微信素材上传表 
-export function updateWxMediaUpload(data) {
-  return request({
-    url: '/wechatMp/wx-media-upload/update',
-    method: 'put',
-    data: data
-  })
-}
-
-// 删除微信素材上传表 
-export function deleteWxMediaUpload(id) {
-  return request({
-    url: '/wechatMp/wx-media-upload/delete?id=' + id,
-    method: 'delete'
-  })
-}
-
-// 获得微信素材上传表 
-export function getWxMediaUpload(id) {
-  return request({
-    url: '/wechatMp/wx-media-upload/get?id=' + id,
-    method: 'get'
-  })
-}
-
-// 获得微信素材上传表 分页
-export function getWxMediaUploadPage(query) {
-  return request({
-    url: '/wechatMp/wx-media-upload/page',
-    method: 'get',
-    params: query
-  })
-}
-
-// 导出微信素材上传表  Excel
-export function exportWxMediaUploadExcel(query) {
-  return request({
-    url: '/wechatMp/wx-media-upload/export-excel',
-    method: 'get',
-    params: query,
-    responseType: 'blob'
-  })
-}
-import request from '@/utils/request'
-
-// 创建微信菜单
-export function createWxMenu(data) {
-  return request({
-    url: '/wechatMp/wx-menu/create',
-    method: 'post',
-    data: data
-  })
-}
-
-// 更新微信菜单
-export function updateWxMenu(data) {
-  return request({
-    url: '/wechatMp/wx-menu/update',
-    method: 'put',
-    data: data
-  })
-}
-
-// 删除微信菜单
-export function deleteWxMenu(id) {
-  return request({
-    url: '/wechatMp/wx-menu/delete?id=' + id,
-    method: 'delete'
-  })
-}
-
-// 获得微信菜单
-export function getWxMenu(id) {
-  return request({
-    url: '/wechatMp/wx-menu/get?id=' + id,
-    method: 'get'
-  })
-}
-
-// 获得微信菜单分页
-export function getWxMenuPage(query) {
-  return request({
-    url: '/wechatMp/wx-menu/page',
-    method: 'get',
-    params: query
-  })
-}
-
-// 导出微信菜单 Excel
-export function exportWxMenuExcel(query) {
-  return request({
-    url: '/wechatMp/wx-menu/export-excel',
-    method: 'get',
-    params: query,
-    responseType: 'blob'
-  })
-}
-import request from '@/utils/request'
-
-// 创建图文消息文章列表表 
-export function createWxNewsArticleItem(data) {
-  return request({
-    url: '/wechatMp/wx-news-article-item/create',
-    method: 'post',
-    data: data
-  })
-}
-
-// 更新图文消息文章列表表 
-export function updateWxNewsArticleItem(data) {
-  return request({
-    url: '/wechatMp/wx-news-article-item/update',
-    method: 'put',
-    data: data
-  })
-}
-
-// 删除图文消息文章列表表 
-export function deleteWxNewsArticleItem(id) {
-  return request({
-    url: '/wechatMp/wx-news-article-item/delete?id=' + id,
-    method: 'delete'
-  })
-}
-
-// 获得图文消息文章列表表 
-export function getWxNewsArticleItem(id) {
-  return request({
-    url: '/wechatMp/wx-news-article-item/get?id=' + id,
-    method: 'get'
-  })
-}
-
-// 获得图文消息文章列表表 分页
-export function getWxNewsArticleItemPage(query) {
-  return request({
-    url: '/wechatMp/wx-news-article-item/page',
-    method: 'get',
-    params: query
-  })
-}
-
-// 导出图文消息文章列表表  Excel
-export function exportWxNewsArticleItemExcel(query) {
-  return request({
-    url: '/wechatMp/wx-news-article-item/export-excel',
-    method: 'get',
-    params: query,
-    responseType: 'blob'
-  })
-}
-import request from '@/utils/request'
-
-// 创建图文消息模板
-export function createWxNewsTemplate(data) {
-  return request({
-    url: '/wechatMp/wx-news-template/create',
-    method: 'post',
-    data: data
-  })
-}
-
-// 更新图文消息模板
-export function updateWxNewsTemplate(data) {
-  return request({
-    url: '/wechatMp/wx-news-template/update',
-    method: 'put',
-    data: data
-  })
-}
-
-// 删除图文消息模板
-export function deleteWxNewsTemplate(id) {
-  return request({
-    url: '/wechatMp/wx-news-template/delete?id=' + id,
-    method: 'delete'
-  })
-}
-
-// 获得图文消息模板
-export function getWxNewsTemplate(id) {
-  return request({
-    url: '/wechatMp/wx-news-template/get?id=' + id,
-    method: 'get'
-  })
-}
-
-// 获得图文消息模板分页
-export function getWxNewsTemplatePage(query) {
-  return request({
-    url: '/wechatMp/wx-news-template/page',
-    method: 'get',
-    params: query
-  })
-}
-
-// 导出图文消息模板 Excel
-export function exportWxNewsTemplateExcel(query) {
-  return request({
-    url: '/wechatMp/wx-news-template/export-excel',
-    method: 'get',
-    params: query,
-    responseType: 'blob'
-  })
-}
-import request from '@/utils/request'
-
-// 创建回复关键字
-export function createWxReceiveText(data) {
-  return request({
-    url: '/wechatMp/wx-receive-text/create',
-    method: 'post',
-    data: data
-  })
-}
-
-// 更新回复关键字
-export function updateWxReceiveText(data) {
-  return request({
-    url: '/wechatMp/wx-receive-text/update',
-    method: 'put',
-    data: data
-  })
-}
-
-// 删除回复关键字
-export function deleteWxReceiveText(id) {
-  return request({
-    url: '/wechatMp/wx-receive-text/delete?id=' + id,
-    method: 'delete'
-  })
-}
-
-// 获得回复关键字
-export function getWxReceiveText(id) {
-  return request({
-    url: '/wechatMp/wx-receive-text/get?id=' + id,
-    method: 'get'
-  })
-}
-
-// 获得回复关键字分页
-export function getWxReceiveTextPage(query) {
-  return request({
-    url: '/wechatMp/wx-receive-text/page',
-    method: 'get',
-    params: query
-  })
-}
-
-// 导出回复关键字 Excel
-export function exportWxReceiveTextExcel(query) {
-  return request({
-    url: '/wechatMp/wx-receive-text/export-excel',
-    method: 'get',
-    params: query,
-    responseType: 'blob'
-  })
-}
-import request from '@/utils/request'
-
-// 创建关注欢迎语
-export function createWxSubscribeText(data) {
-  return request({
-    url: '/wechatMp/wx-subscribe-text/create',
-    method: 'post',
-    data: data
-  })
-}
-
-// 更新关注欢迎语
-export function updateWxSubscribeText(data) {
-  return request({
-    url: '/wechatMp/wx-subscribe-text/update',
-    method: 'put',
-    data: data
-  })
-}
-
-// 删除关注欢迎语
-export function deleteWxSubscribeText(id) {
-  return request({
-    url: '/wechatMp/wx-subscribe-text/delete?id=' + id,
-    method: 'delete'
-  })
-}
-
-// 获得关注欢迎语
-export function getWxSubscribeText(id) {
-  return request({
-    url: '/wechatMp/wx-subscribe-text/get?id=' + id,
-    method: 'get'
-  })
-}
-
-// 获得关注欢迎语分页
-export function getWxSubscribeTextPage(query) {
-  return request({
-    url: '/wechatMp/wx-subscribe-text/page',
-    method: 'get',
-    params: query
-  })
-}
-
-// 导出关注欢迎语 Excel
-export function exportWxSubscribeTextExcel(query) {
-  return request({
-    url: '/wechatMp/wx-subscribe-text/export-excel',
-    method: 'get',
-    params: query,
-    responseType: 'blob'
-  })
-}
-import request from '@/utils/request'
-
-// 创建文本模板
-export function createWxTextTemplate(data) {
-  return request({
-    url: '/wechatMp/wx-text-template/create',
-    method: 'post',
-    data: data
-  })
-}
-
-// 更新文本模板
-export function updateWxTextTemplate(data) {
-  return request({
-    url: '/wechatMp/wx-text-template/update',
-    method: 'put',
-    data: data
-  })
-}
-
-// 删除文本模板
-export function deleteWxTextTemplate(id) {
-  return request({
-    url: '/wechatMp/wx-text-template/delete?id=' + id,
-    method: 'delete'
-  })
-}
-
-// 获得文本模板
-export function getWxTextTemplate(id) {
-  return request({
-    url: '/wechatMp/wx-text-template/get?id=' + id,
-    method: 'get'
-  })
-}
-
-// 获得文本模板分页
-export function getWxTextTemplatePage(query) {
-  return request({
-    url: '/wechatMp/wx-text-template/page',
-    method: 'get',
-    params: query
-  })
-}
-
-// 导出文本模板 Excel
-export function exportWxTextTemplateExcel(query) {
-  return request({
-    url: '/wechatMp/wx-text-template/export-excel',
-    method: 'get',
-    params: query,
-    responseType: 'blob'
-  })
-}
@@ -5,8 +5,8 @@
 <template>
   <!-- 类型：图片 -->
   <div v-if="objData.type === 'image'">
-    <div class="waterfall" v-loading="tableLoading">
-      <div class="waterfall-item" v-for="item in tableData" :key="item.mediaId">
+    <div class="waterfall" v-loading="loading">
+      <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
         <img class="material-img" :src="item.url">
         <p class="item-name">{{item.name}}</p>
         <el-row class="ope-row">
@@ -16,16 +16,14 @@
         </el-row>
       </div>
     </div>
-    <div v-if="tableData.length <= 0 && !tableLoading" class="el-table__empty-block">
+    <!-- 分页组件 -->
+    <div v-if="list.length <= 0 && !loading" class="el-table__empty-block">
       <span class="el-table__empty-text">暂无数据</span>
     </div>
-    <span slot="footer" class="dialog-footer">
-      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="page.currentPage"
-                     :page-sizes="[10, 20]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
-                     :total="page.total" class="pagination" />
-    </span>
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getMaterialPage"/>
   </div>
-  <div v-else-if="objData.repType == 'voice'">
+  <div v-else-if="objData.type == 'voice'">
     <!-- TODO 芋艿：需要翻译 -->
 <!--    <avue-crud ref="crud"-->
 <!--               :page="page"-->
@@ -45,7 +43,7 @@
 <!--      </template>-->
 <!--    </avue-crud>-->
   </div>
-  <div v-else-if="objData.repType == 'video'">
+  <div v-else-if="objData.type == 'video'">
     <!-- TODO 芋艿：需要翻译 -->
     <!--    <avue-crud ref="crud"-->
 <!--               :page="page"-->
@@ -65,16 +63,16 @@
 <!--      </template>-->
 <!--    </avue-crud>-->
   </div>
-  <div v-else-if="objData.repType == 'news'">
-    <div class="waterfall" v-loading="tableLoading">
-      <div class="waterfall-item" v-for="item in tableData" :key="item.mediaId" v-if="item.content && item.content.articles">
+  <div v-else-if="objData.type == 'news'">
+    <div class="waterfall" v-loading="loading">
+      <div class="waterfall-item" v-for="item in list" :key="item.mediaId" v-if="item.content && item.content.articles">
         <WxNews :objData="item.content.articles"></WxNews>
         <el-row class="ope-row">
           <el-button size="mini" type="success" @click="selectMaterial(item)">选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
         </el-row>
       </div>
     </div>
-    <div v-if="tableData.length <=0 && !tableLoading" class="el-table__empty-block">
+    <div v-if="list.length <=0 && !loading" class="el-table__empty-block">
       <span class="el-table__empty-text">暂无数据</span>
     </div>
     <span slot="footer" class="dialog-footer">
@@ -93,12 +91,13 @@
 </template>
 <script>
-  import { getPage, getMaterialVideo } from '@/api/wxmp/wxmaterial'
+
   // import { tableOptionVoice } from '@/const/crud/wxmp/wxmaterial_voice'
   // import { tableOptionVideo } from '@/const/crud/wxmp/wxmaterial_video'
   import WxNews from '@/views/mp/components/wx-news/main.vue';
-  import {getPage as getPageNews} from '@/api/wxmp/wxfreepublish'
-  import {getPage as getPageNewsDraft} from '@/api/wxmp/wxdraft'
+  import { getMaterialPage } from "@/api/mp/material";
+  // import {getPage as getPageNews} from '@/api/wxmp/wxfreepublish'
+  // import {getPage as getPageNewsDraft} from '@/api/wxmp/wxdraft'
   export default {
     name: "wxMaterialSelect",
@@ -118,14 +117,16 @@
     },
     data() {
       return {
-        tableLoading: false,
-        tableData: [],
-        page: {
-          total: 0, // 总页数
-          currentPage: 1, // 当前页数
-          pageSize: 20, // 每页显示多少条
-          ascs:[],//升序字段
-          descs:[]//降序字段
+        // 遮罩层
+        loading: false,
+        // 总条数
+        total: 0,
+        // 数据列表
+        list: [],
+        // 查询参数
+        queryParams: {
+          pageNo: 1,
+          pageSize: 10,
         },
         // tableOptionVoice: tableOptionVoice,
         // tableOptionVideo: tableOptionVideo,
@@ -139,8 +140,8 @@
         this.$emit('selectMaterial', item)
       },
       getPage(page, params) {
-        this.tableLoading = true
-        if(this.objData.repType == 'news'){
+        this.loading = true
+        if(this.objData.type == 'news'){ // 【图文】
           if(this.newsType == '1'){
             getPageNews(Object.assign({
               current: page.currentPage,
@@ -152,11 +153,11 @@
                 item.mediaId = item.articleId
                 item.content.articles = item.content.newsItem
               })
-              this.tableData = tableData
+              this.list = tableData
               this.page.total = response.data.totalCount
               this.page.currentPage = page.currentPage
               this.page.pageSize = page.pageSize
-              this.tableLoading = false
+              this.loading = false
             })
           }else if(this.newsType == '2'){
             getPageNewsDraft(Object.assign({
@@ -169,28 +170,28 @@
                 item.mediaId = item.mediaId
                 item.content.articles = item.content.newsItem
               })
-              this.tableData = tableData
+              this.list = tableData
               this.page.total = response.data.totalCount
               this.page.currentPage = page.currentPage
               this.page.pageSize = page.pageSize
-              this.tableLoading = false
+              this.loading = false
             })
           }
-        }else{
-          getPage(Object.assign({
-            current: page.currentPage,
-            size: page.pageSize,
-            appId:this.appId,
-            type:this.objData.repType
-          }, params)).then(response => {
-            this.tableData = response.data.items
-            this.page.total = response.data.totalCount
-            this.page.currentPage = page.currentPage
-            this.page.pageSize = page.pageSize
-            this.tableLoading = false
-          })
+        } else { // 【素材】
+          this.getMaterialPage();
         }
       },
+      getMaterialPage() {
+        getMaterialPage({
+          ...this.queryParams,
+          type: this.objData.type
+        }).then(response => {
+          this.list = response.data.list
+          this.total = response.data.total
+        }).finally(() => {
+          this.loading = false
+        })
+      },
       sizeChange(val) {
         this.page.currentPage = 1
         this.page.pageSize = val
@@ -81,21 +81,21 @@
       </div>
     </div>
     <div class="msg-send" v-loading="sendLoading">
-      <wx-reply-select :objData="objData" />
+      <wx-reply-select ref="replySelect" :objData="objData" />
       <el-button type="success" size="small" class="send-but" @click="sendMsg">发送(S)</el-button>
     </div>
   </div>
 </template>
 <script>
-import {getMessagePage, sendMessage} from '@/api/mp/message'
+import { getMessagePage, sendMessage } from '@/api/mp/message'
   import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
   import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue';
   import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';
   import WxNews from '@/views/mp/components/wx-news/main.vue';
   import WxLocation from '@/views/mp/components/wx-location/main.vue';
   import WxMusic from '@/views/mp/components/wx-music/main.vue';
-import {getUser} from "@/api/mp/user";
+import { getUser } from "@/api/mp/user";
   export default {
     name: "wxMsg",
@@ -176,6 +176,7 @@ import {getUser} from &quot;@/api/mp/user&quot;;
           this.tableData = [...this.tableData , ...[response.data] ]
           this.scrollToBottom()
           // 重置 objData 状态
+          this.$refs['replySelect'].deleteObj(); // 重置，避免 tab 的数据未清理
           this.objData = {
             type: 'text',
             content: '',
@@ -29,7 +29,9 @@
           <el-row style="text-align: center">
             <!-- 选择素材 -->
             <el-col :span="12" class="col-select">
-              <el-button type="success" @click="openMaterial">素材库选择<i class="el-icon-circle-check el-icon--right"></i></el-button>
+              <el-button type="success" @click="openMaterial">
+                素材库选择<i class="el-icon-circle-check el-icon--right"></i>
+              </el-button>
             </el-col>
             <!-- 文件上传 -->
             <el-col :span="12" class="col-add">
@@ -43,7 +45,7 @@
         </div>
         <!-- 点击选择素材，会打开下面的弹窗 -->
         <el-dialog title="选择图片" :visible.sync="dialogImageVisible" width="90%" append-to-body>
-          <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial"></WxMaterialSelect>
+          <wx-material-select :obj-data="objData" @selectMaterial="selectMaterial" />
         </el-dialog>
       </el-row>
     </el-tab-pane>
@@ -155,16 +157,16 @@
 <script>
   // import { getPage, getMaterialVideo } from '@/api/wxmp/wxmaterial'
+  import {getAccessToken} from '@/utils/auth'
   import WxNews from '@/views/mp/components/wx-news/main.vue'
-  // import WxMaterialSelect from '@/components/wx-material-select/main.vue'
+  import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
   import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';
-  import {getAccessToken} from '@/utils/auth'
   export default {
     name: "wxReplySelect",
     components: {
       WxNews,
-      // WxMaterialSelect,
+      WxMaterialSelect,
       WxVoicePlayer
     },
     props: {
@@ -403,8 +405,7 @@
           // TODO 芋艿，待实现
         } else if(this.objData.type === 'image'
             || this.objData.type === 'voice') {
-          this.$delete(this.objData, 'url')
-          this.$delete(this.objData, 'mediaId')
+          this.selectMaterial({}) // 选择一个空的素材
         }  else if(this.objData.type === 'video') {
           // TODO 芋艿，待实现
         }
-<template>
-  <div class="app-container">
-
-    <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="类型" prop="type">
-        <el-select v-model="queryParams.type" placeholder="请选择类型" clearable size="small">
-          <el-option label="请选择字典生成" value=""/>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="图片URL" prop="url">
-        <el-input v-model="queryParams.url" placeholder="请输入图片URL" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="素材ID" prop="mediaId">
-        <el-input v-model="queryParams.mediaId" placeholder="请输入素材ID" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="缩略图素材ID" prop="thumbMediaId">
-        <el-input v-model="queryParams.thumbMediaId" placeholder="请输入缩略图素材ID" clearable
-                  @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="微信账号ID" prop="wxAccountId">
-        <el-input v-model="queryParams.wxAccountId" placeholder="请输入微信账号ID" clearable
-                  @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="创建时间">
-        <el-date-picker v-model="dateRangeCreateTime" style="width: 240px" value-format="yyyy-MM-dd"
-                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"/>
-      </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>
-
-    <!-- 操作工具栏 -->
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['wechatMp:wx-media-upload:create']">新增
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
-                   :loading="exportLoading"
-                   v-hasPermi="['wechatMp:wx-media-upload:export']">导出
-        </el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="主键" align="center" prop="id"/>
-      <el-table-column label="类型" align="center" prop="type"/>
-      <el-table-column label="图片URL" align="center" prop="url"/>
-      <el-table-column label="素材ID" align="center" prop="mediaId"/>
-      <el-table-column label="缩略图素材ID" align="center" prop="thumbMediaId"/>
-      <el-table-column label="微信账号ID" align="center" prop="wxAccountId"/>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['wechatMp:wx-media-upload:update']">修改
-          </el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['wechatMp:wx-media-upload:delete']">删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页组件 -->
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                @pagination="getList"/>
-
-    <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="类型" prop="type">
-          <el-select v-model="form.type" placeholder="请选择类型">
-            <el-option label="请选择字典生成" value=""/>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="图片URL" prop="url">
-          <el-input v-model="form.url" placeholder="请输入图片URL"/>
-        </el-form-item>
-        <el-form-item label="素材ID" prop="mediaId">
-          <el-input v-model="form.mediaId" placeholder="请输入素材ID"/>
-        </el-form-item>
-        <el-form-item label="缩略图素材ID" prop="thumbMediaId">
-          <el-input v-model="form.thumbMediaId" placeholder="请输入缩略图素材ID"/>
-        </el-form-item>
-        <el-form-item label="微信账号ID" prop="wxAccountId">
-          <el-input v-model="form.wxAccountId" placeholder="请输入微信账号ID"/>
-        </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 {
-    createWxMediaUpload,
-    updateWxMediaUpload,
-    deleteWxMediaUpload,
-    getWxMediaUpload,
-    getWxMediaUploadPage,
-    exportWxMediaUploadExcel
-  } from "@/api/wechatMp/wxMediaUpload";
-
-  export default {
-    name: "WxMediaUpload",
-    components: {},
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        // 导出遮罩层
-        exportLoading: false,
-        // 显示搜索条件
-        showSearch: true,
-        // 总条数
-        total: 0,
-        // 微信素材上传表 列表
-        list: [],
-        // 弹出层标题
-        title: "",
-        // 是否显示弹出层
-        open: false,
-        dateRangeCreateTime: [],
-        // 查询参数
-        queryParams: {
-          pageNo: 1,
-          pageSize: 10,
-          type: null,
-          url: null,
-          mediaId: null,
-          thumbMediaId: null,
-          wxAccountId: null,
-        },
-        // 表单参数
-        form: {},
-        // 表单校验
-        rules: {}
-      };
-    },
-    created() {
-      this.getList();
-    },
-    methods: {
-      /** 查询列表 */
-      getList() {
-        this.loading = true;
-        // 处理查询参数
-        let params = {...this.queryParams};
-        this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
-        // 执行查询
-        getWxMediaUploadPage(params).then(response => {
-          this.list = response.data.list;
-          this.total = response.data.total;
-          this.loading = false;
-        });
-      },
-      /** 取消按钮 */
-      cancel() {
-        this.open = false;
-        this.reset();
-      },
-      /** 表单重置 */
-      reset() {
-        this.form = {
-          id: undefined,
-          type: undefined,
-          url: undefined,
-          mediaId: undefined,
-          thumbMediaId: undefined,
-          wxAccountId: undefined,
-        };
-        this.resetForm("form");
-      },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.queryParams.pageNo = 1;
-        this.getList();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.dateRangeCreateTime = [];
-        this.resetForm("queryForm");
-        this.handleQuery();
-      },
-      /** 新增按钮操作 */
-      handleAdd() {
-        this.reset();
-        this.open = true;
-        this.title = "添加微信素材上传表 ";
-      },
-      /** 修改按钮操作 */
-      handleUpdate(row) {
-        this.reset();
-        const id = row.id;
-        getWxMediaUpload(id).then(response => {
-          this.form = response.data;
-          this.open = true;
-          this.title = "修改微信素材上传表 ";
-        });
-      },
-      /** 提交按钮 */
-      submitForm() {
-        this.$refs["form"].validate(valid => {
-          if (!valid) {
-            return;
-          }
-          // 修改的提交
-          if (this.form.id != null) {
-            updateWxMediaUpload(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-            return;
-          }
-          // 添加的提交
-          createWxMediaUpload(this.form).then(response => {
-            this.$modal.msgSuccess("新增成功");
-            this.open = false;
-            this.getList();
-          });
-        });
-      },
-      /** 删除按钮操作 */
-      handleDelete(row) {
-        const id = row.id;
-        this.$modal.confirm('是否确认删除微信素材上传表 编号为"' + id + '"的数据项?').then(function () {
-          return deleteWxMediaUpload(id);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        }).catch(() => {
-        });
-      },
-      /** 导出按钮操作 */
-      handleExport() {
-        // 处理查询参数
-        let params = {...this.queryParams};
-        params.pageNo = undefined;
-        params.pageSize = undefined;
-        this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
-        // 执行导出
-        this.$modal.confirm('是否确认导出所有微信素材上传表 数据项?').then(() => {
-          this.exportLoading = true;
-          return exportWxMediaUploadExcel(params);
-        }).then(response => {
-          this.$download.excel(response, '微信素材上传表 .xls');
-          this.exportLoading = false;
-        }).catch(() => {
-        });
-      }
-    }
-  };
-</script>
-<template>
-  <div class="app-container">
-
-    <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="父ID" prop="parentId">
-        <el-input v-model="queryParams.parentId" placeholder="请输入父ID" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="菜单名称" prop="menuName">
-        <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="菜单类型 1文本消息；2图文消息；3网址链接；4小程序" prop="menuType">
-        <el-select v-model="queryParams.menuType" placeholder="请选择菜单类型 1文本消息；2图文消息；3网址链接；4小程序" clearable size="small">
-          <el-option label="请选择字典生成" value=""/>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="菜单等级" prop="menuLevel">
-        <el-input v-model="queryParams.menuLevel" placeholder="请输入菜单等级" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="模板ID" prop="tplId">
-        <el-input v-model="queryParams.tplId" placeholder="请输入模板ID" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="菜单URL" prop="menuUrl">
-        <el-input v-model="queryParams.menuUrl" placeholder="请输入菜单URL" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="排序" prop="menuSort">
-        <el-input v-model="queryParams.menuSort" placeholder="请输入排序" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="微信账号ID" prop="wxAccountId">
-        <el-input v-model="queryParams.wxAccountId" placeholder="请输入微信账号ID" clearable
-                  @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="小程序appid" prop="miniprogramAppid">
-        <el-input v-model="queryParams.miniprogramAppid" placeholder="请输入小程序appid" clearable
-                  @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="小程序页面路径" prop="miniprogramPagepath">
-        <el-input v-model="queryParams.miniprogramPagepath" placeholder="请输入小程序页面路径" clearable
-                  @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="创建时间">
-        <el-date-picker v-model="dateRangeCreateTime" style="width: 240px" value-format="yyyy-MM-dd"
-                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"/>
-      </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>
-
-    <!-- 操作工具栏 -->
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['wechatMp:wx-menu:create']">新增
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
-                   :loading="exportLoading"
-                   v-hasPermi="['wechatMp:wx-menu:export']">导出
-        </el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="主键" align="center" prop="id"/>
-      <el-table-column label="父ID" align="center" prop="parentId"/>
-      <el-table-column label="菜单名称" align="center" prop="menuName"/>
-      <el-table-column label="菜单类型 1文本消息；2图文消息；3网址链接；4小程序" align="center" prop="menuType"/>
-      <el-table-column label="菜单等级" align="center" prop="menuLevel"/>
-      <el-table-column label="模板ID" align="center" prop="tplId"/>
-      <el-table-column label="菜单URL" align="center" prop="menuUrl"/>
-      <el-table-column label="排序" align="center" prop="menuSort"/>
-      <el-table-column label="微信账号ID" align="center" prop="wxAccountId"/>
-      <el-table-column label="小程序appid" align="center" prop="miniprogramAppid"/>
-      <el-table-column label="小程序页面路径" align="center" prop="miniprogramPagepath"/>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['wechatMp:wx-menu:update']">修改
-          </el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['wechatMp:wx-menu:delete']">删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页组件 -->
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                @pagination="getList"/>
-
-    <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="父ID" prop="parentId">
-          <el-input v-model="form.parentId" placeholder="请输入父ID"/>
-        </el-form-item>
-        <el-form-item label="菜单名称" prop="menuName">
-          <el-input v-model="form.menuName" placeholder="请输入菜单名称"/>
-        </el-form-item>
-        <el-form-item label="菜单类型 1文本消息；2图文消息；3网址链接；4小程序" prop="menuType">
-          <el-select v-model="form.menuType" placeholder="请选择菜单类型 1文本消息；2图文消息；3网址链接；4小程序">
-            <el-option label="请选择字典生成" value=""/>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="菜单等级" prop="menuLevel">
-          <el-input v-model="form.menuLevel" placeholder="请输入菜单等级"/>
-        </el-form-item>
-        <el-form-item label="模板ID" prop="tplId">
-          <el-input v-model="form.tplId" placeholder="请输入模板ID"/>
-        </el-form-item>
-        <el-form-item label="菜单URL" prop="menuUrl">
-          <el-input v-model="form.menuUrl" placeholder="请输入菜单URL"/>
-        </el-form-item>
-        <el-form-item label="排序" prop="menuSort">
-          <el-input v-model="form.menuSort" placeholder="请输入排序"/>
-        </el-form-item>
-        <el-form-item label="微信账号ID" prop="wxAccountId">
-          <el-input v-model="form.wxAccountId" placeholder="请输入微信账号ID"/>
-        </el-form-item>
-        <el-form-item label="小程序appid" prop="miniprogramAppid">
-          <el-input v-model="form.miniprogramAppid" placeholder="请输入小程序appid"/>
-        </el-form-item>
-        <el-form-item label="小程序页面路径" prop="miniprogramPagepath">
-          <el-input v-model="form.miniprogramPagepath" 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 {
-    createWxMenu,
-    updateWxMenu,
-    deleteWxMenu,
-    getWxMenu,
-    getWxMenuPage,
-    exportWxMenuExcel
-  } from "@/api/wechatMp/wxMenu";
-
-  export default {
-    name: "WxMenu",
-    components: {},
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        // 导出遮罩层
-        exportLoading: false,
-        // 显示搜索条件
-        showSearch: true,
-        // 总条数
-        total: 0,
-        // 微信菜单列表
-        list: [],
-        // 弹出层标题
-        title: "",
-        // 是否显示弹出层
-        open: false,
-        dateRangeCreateTime: [],
-        // 查询参数
-        queryParams: {
-          pageNo: 1,
-          pageSize: 10,
-          parentId: null,
-          menuName: null,
-          menuType: null,
-          menuLevel: null,
-          tplId: null,
-          menuUrl: null,
-          menuSort: null,
-          wxAccountId: null,
-          miniprogramAppid: null,
-          miniprogramPagepath: null,
-        },
-        // 表单参数
-        form: {},
-        // 表单校验
-        rules: {}
-      };
-    },
-    created() {
-      this.getList();
-    },
-    methods: {
-      /** 查询列表 */
-      getList() {
-        this.loading = true;
-        // 处理查询参数
-        let params = {...this.queryParams};
-        this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
-        // 执行查询
-        getWxMenuPage(params).then(response => {
-          this.list = response.data.list;
-          this.total = response.data.total;
-          this.loading = false;
-        });
-      },
-      /** 取消按钮 */
-      cancel() {
-        this.open = false;
-        this.reset();
-      },
-      /** 表单重置 */
-      reset() {
-        this.form = {
-          id: undefined,
-          parentId: undefined,
-          menuName: undefined,
-          menuType: undefined,
-          menuLevel: undefined,
-          tplId: undefined,
-          menuUrl: undefined,
-          menuSort: undefined,
-          wxAccountId: undefined,
-          miniprogramAppid: undefined,
-          miniprogramPagepath: undefined,
-        };
-        this.resetForm("form");
-      },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.queryParams.pageNo = 1;
-        this.getList();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.dateRangeCreateTime = [];
-        this.resetForm("queryForm");
-        this.handleQuery();
-      },
-      /** 新增按钮操作 */
-      handleAdd() {
-        this.reset();
-        this.open = true;
-        this.title = "添加微信菜单";
-      },
-      /** 修改按钮操作 */
-      handleUpdate(row) {
-        this.reset();
-        const id = row.id;
-        getWxMenu(id).then(response => {
-          this.form = response.data;
-          this.open = true;
-          this.title = "修改微信菜单";
-        });
-      },
-      /** 提交按钮 */
-      submitForm() {
-        this.$refs["form"].validate(valid => {
-          if (!valid) {
-            return;
-          }
-          // 修改的提交
-          if (this.form.id != null) {
-            updateWxMenu(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-            return;
-          }
-          // 添加的提交
-          createWxMenu(this.form).then(response => {
-            this.$modal.msgSuccess("新增成功");
-            this.open = false;
-            this.getList();
-          });
-        });
-      },
-      /** 删除按钮操作 */
-      handleDelete(row) {
-        const id = row.id;
-        this.$modal.confirm('是否确认删除微信菜单编号为"' + id + '"的数据项?').then(function () {
-          return deleteWxMenu(id);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        }).catch(() => {
-        });
-      },
-      /** 导出按钮操作 */
-      handleExport() {
-        // 处理查询参数
-        let params = {...this.queryParams};
-        params.pageNo = undefined;
-        params.pageSize = undefined;
-        this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
-        // 执行导出
-        this.$modal.confirm('是否确认导出所有微信菜单数据项?').then(() => {
-          this.exportLoading = true;
-          return exportWxMenuExcel(params);
-        }).then(response => {
-          this.$download.excel(response, '微信菜单.xls');
-          this.exportLoading = false;
-        }).catch(() => {
-        });
-      }
-    }
-  };
-</script>