Commit 431569fd0934e90e6f1134f25cdcaabaa5f04e9a
1 parent
32f152cc
mp：后端增加上传永久素材的接口
Showing
8 changed files
with
398 additions
and
5 deletions
yudao-module-mp/yudao-module-mp-api/src/main/java/cn/iocoder/yudao/module/mp/enums/ErrorCodeConstants.java
| @@ -27,11 +27,14 @@ public interface ErrorCodeConstants { | @@ -27,11 +27,14 @@ public interface ErrorCodeConstants { | ||
| 27 | ErrorCode TAG_DELETE_FAIL = new ErrorCode(1006002001, "删除标签失败，原因：{}"); | 27 | ErrorCode TAG_DELETE_FAIL = new ErrorCode(1006002001, "删除标签失败，原因：{}"); |
| 28 | ErrorCode TAG_GET_FAIL = new ErrorCode(1006002001, "获得标签失败，原因：{}"); | 28 | ErrorCode TAG_GET_FAIL = new ErrorCode(1006002001, "获得标签失败，原因：{}"); |
| 29 | 29 | ||
| 30 | - // ========== 公众号标签 1006003000============ | 30 | + // ========== 公众号粉丝 1006003000============ |
| 31 | ErrorCode USER_NOT_EXISTS = new ErrorCode(1006003000, "用户不存在"); | 31 | ErrorCode USER_NOT_EXISTS = new ErrorCode(1006003000, "用户不存在"); |
| 32 | ErrorCode USER_UPDATE_TAG_FAIL = new ErrorCode(1006003001, "更新用户标签失败，原因：{}"); | 32 | ErrorCode USER_UPDATE_TAG_FAIL = new ErrorCode(1006003001, "更新用户标签失败，原因：{}"); |
| 33 | 33 | ||
| 34 | + // ========== 公众号素材 1006004000============ | ||
| 35 | + ErrorCode MATERIAL_UPLOAD_FAIL = new ErrorCode(1006004000, "上传素材失败，原因：{}"); | ||
| 36 | + | ||
| 34 | // TODO 要处理下 | 37 | // TODO 要处理下 |
| 35 | - ErrorCode COMMON_NOT_EXISTS = new ErrorCode(1006001002, "用户不存在"); | 38 | + ErrorCode MENU_NOT_EXISTS = new ErrorCode(1006001002, "菜单不存在"); |
| 36 | 39 | ||
| 37 | } | 40 | } |
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/material/MpMaterialController.java
| 1 | package cn.iocoder.yudao.module.mp.controller.admin.material; | 1 | package cn.iocoder.yudao.module.mp.controller.admin.material; |
| 2 | 2 | ||
| 3 | import cn.iocoder.yudao.framework.common.pojo.CommonResult; | 3 | import cn.iocoder.yudao.framework.common.pojo.CommonResult; |
| 4 | +import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadPermanentReqVO; | ||
| 4 | import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadRespVO; | 5 | import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadRespVO; |
| 5 | import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadTemporaryReqVO; | 6 | import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadTemporaryReqVO; |
| 6 | import cn.iocoder.yudao.module.mp.convert.material.MpMaterialConvert; | 7 | import cn.iocoder.yudao.module.mp.convert.material.MpMaterialConvert; |
| @@ -36,4 +37,12 @@ public class MpMaterialController { | @@ -36,4 +37,12 @@ public class MpMaterialController { | ||
| 36 | return success(MpMaterialConvert.INSTANCE.convert(material)); | 37 | return success(MpMaterialConvert.INSTANCE.convert(material)); |
| 37 | } | 38 | } |
| 38 | 39 | ||
| 40 | + @ApiOperation("上传永久素材") | ||
| 41 | + @PostMapping("/upload-permanent") | ||
| 42 | + public CommonResult<MpMaterialUploadRespVO> uploadPermanentMaterial( | ||
| 43 | + @Valid MpMaterialUploadPermanentReqVO reqVO) throws IOException { | ||
| 44 | + MpMaterialDO material = mpMaterialService.uploadPermanentMaterial(reqVO); | ||
| 45 | + return success(MpMaterialConvert.INSTANCE.convert(material)); | ||
| 46 | + } | ||
| 47 | + | ||
| 39 | } | 48 | } |
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/material/vo/MpMaterialUploadPermanentReqVO.java
0 → 100644
| 1 | +package cn.iocoder.yudao.module.mp.controller.admin.material.vo; | ||
| 2 | + | ||
| 3 | +import cn.hutool.core.util.ObjectUtil; | ||
| 4 | +import com.fasterxml.jackson.annotation.JsonIgnore; | ||
| 5 | +import io.swagger.annotations.ApiModel; | ||
| 6 | +import io.swagger.annotations.ApiModelProperty; | ||
| 7 | +import lombok.Data; | ||
| 8 | +import me.chanjar.weixin.common.api.WxConsts; | ||
| 9 | +import org.springframework.web.multipart.MultipartFile; | ||
| 10 | + | ||
| 11 | +import javax.validation.constraints.AssertTrue; | ||
| 12 | +import javax.validation.constraints.NotEmpty; | ||
| 13 | +import javax.validation.constraints.NotNull; | ||
| 14 | + | ||
| 15 | +@ApiModel("管理后台 - 公众号素材上传永久 Request VO") | ||
| 16 | +@Data | ||
| 17 | +public class MpMaterialUploadPermanentReqVO { | ||
| 18 | + | ||
| 19 | + @ApiModelProperty(value = "公众号账号的编号", required = true, example = "2048") | ||
| 20 | + @NotNull(message = "公众号账号的编号不能为空") | ||
| 21 | + private Long accountId; | ||
| 22 | + | ||
| 23 | + @ApiModelProperty(value = "文件类型", required = true, example = "image", notes = "参见 WxConsts.MediaFileType 枚举") | ||
| 24 | + @NotEmpty(message = "文件类型不能为空") | ||
| 25 | + private String type; | ||
| 26 | + | ||
| 27 | + @ApiModelProperty(value = "文件附件", required = true) | ||
| 28 | + @NotNull(message = "文件不能为空") | ||
| 29 | + @JsonIgnore // 避免被操作日志，进行序列化，导致报错 | ||
| 30 | + private MultipartFile file; | ||
| 31 | + | ||
| 32 | + @ApiModelProperty(value = "名字", example = "wechat.mp", notes = "如果 name 为空，则使用 file 文件名") | ||
| 33 | + private String name; | ||
| 34 | + | ||
| 35 | + @ApiModelProperty(value = "视频素材的标题", example = "视频素材的标题", notes = "文件类型为 video 时，必填") | ||
| 36 | + private String title; | ||
| 37 | + @ApiModelProperty(value = "视频素材的描述", example = "视频素材的描述", notes = "文件类型为 video 时，必填") | ||
| 38 | + private String introduction; | ||
| 39 | + | ||
| 40 | + @AssertTrue(message = "标题不能为空") | ||
| 41 | + public boolean isTitleValid() { | ||
| 42 | + // 生成场景为管理后台时，必须设置上级菜单，不然生成的菜单 SQL 是无父级菜单的 | ||
| 43 | + return ObjectUtil.notEqual(type, WxConsts.MediaFileType.VIDEO) | ||
| 44 | + || title != null; | ||
| 45 | + } | ||
| 46 | + | ||
| 47 | + @AssertTrue(message = "描述不能为空") | ||
| 48 | + public boolean isIntroductionValid() { | ||
| 49 | + // 生成场景为管理后台时，必须设置上级菜单，不然生成的菜单 SQL 是无父级菜单的 | ||
| 50 | + return ObjectUtil.notEqual(type, WxConsts.MediaFileType.VIDEO) | ||
| 51 | + || introduction != null; | ||
| 52 | + } | ||
| 53 | + | ||
| 54 | +} |
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/convert/material/MpMaterialConvert.java
| @@ -3,11 +3,14 @@ package cn.iocoder.yudao.module.mp.convert.material; | @@ -3,11 +3,14 @@ package cn.iocoder.yudao.module.mp.convert.material; | ||
| 3 | import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadRespVO; | 3 | import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadRespVO; |
| 4 | import cn.iocoder.yudao.module.mp.dal.dataobject.account.MpAccountDO; | 4 | import cn.iocoder.yudao.module.mp.dal.dataobject.account.MpAccountDO; |
| 5 | import cn.iocoder.yudao.module.mp.dal.dataobject.material.MpMaterialDO; | 5 | import cn.iocoder.yudao.module.mp.dal.dataobject.material.MpMaterialDO; |
| 6 | +import me.chanjar.weixin.mp.bean.material.WxMpMaterial; | ||
| 6 | import org.mapstruct.Mapper; | 7 | import org.mapstruct.Mapper; |
| 7 | import org.mapstruct.Mapping; | 8 | import org.mapstruct.Mapping; |
| 8 | import org.mapstruct.Mappings; | 9 | import org.mapstruct.Mappings; |
| 9 | import org.mapstruct.factory.Mappers; | 10 | import org.mapstruct.factory.Mappers; |
| 10 | 11 | ||
| 12 | +import java.io.File; | ||
| 13 | + | ||
| 11 | @Mapper | 14 | @Mapper |
| 12 | public interface MpMaterialConvert { | 15 | public interface MpMaterialConvert { |
| 13 | 16 | ||
| @@ -20,6 +23,19 @@ public interface MpMaterialConvert { | @@ -20,6 +23,19 @@ public interface MpMaterialConvert { | ||
| 20 | }) | 23 | }) |
| 21 | MpMaterialDO convert(String mediaId, String type, String url, MpAccountDO account); | 24 | MpMaterialDO convert(String mediaId, String type, String url, MpAccountDO account); |
| 22 | 25 | ||
| 26 | + @Mappings({ | ||
| 27 | + @Mapping(target = "id", ignore = true), | ||
| 28 | + @Mapping(source = "account.id", target = "accountId"), | ||
| 29 | + @Mapping(source = "account.appId", target = "appId"), | ||
| 30 | + @Mapping(source = "name", target = "name") | ||
| 31 | + }) | ||
| 32 | + MpMaterialDO convert(String mediaId, String type, String url, MpAccountDO account, | ||
| 33 | + String name, String title, String introduction, String mpUrl); | ||
| 34 | + | ||
| 23 | MpMaterialUploadRespVO convert(MpMaterialDO bean); | 35 | MpMaterialUploadRespVO convert(MpMaterialDO bean); |
| 24 | 36 | ||
| 37 | + default WxMpMaterial convert(String name, File file, String title, String introduction) { | ||
| 38 | + return new WxMpMaterial(name, file, title, introduction); | ||
| 39 | + } | ||
| 40 | + | ||
| 25 | } | 41 | } |
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/service/material/MpMaterialService.java
| 1 | package cn.iocoder.yudao.module.mp.service.material; | 1 | package cn.iocoder.yudao.module.mp.service.material; |
| 2 | 2 | ||
| 3 | +import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadPermanentReqVO; | ||
| 3 | import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadTemporaryReqVO; | 4 | import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadTemporaryReqVO; |
| 4 | import cn.iocoder.yudao.module.mp.dal.dataobject.material.MpMaterialDO; | 5 | import cn.iocoder.yudao.module.mp.dal.dataobject.material.MpMaterialDO; |
| 5 | import me.chanjar.weixin.common.api.WxConsts; | 6 | import me.chanjar.weixin.common.api.WxConsts; |
| @@ -26,5 +27,22 @@ public interface MpMaterialService { | @@ -26,5 +27,22 @@ public interface MpMaterialService { | ||
| 26 | */ | 27 | */ |
| 27 | String downloadMaterialUrl(Long accountId, String mediaId, String type); | 28 | String downloadMaterialUrl(Long accountId, String mediaId, String type); |
| 28 | 29 | ||
| 30 | + /** | ||
| 31 | + * 上传临时素材 | ||
| 32 | + * | ||
| 33 | + * @param reqVO 请求 | ||
| 34 | + * @return 素材 | ||
| 35 | + * @throws IOException 文件操作发生异常 | ||
| 36 | + */ | ||
| 29 | MpMaterialDO uploadTemporaryMaterial(@Valid MpMaterialUploadTemporaryReqVO reqVO) throws IOException; | 37 | MpMaterialDO uploadTemporaryMaterial(@Valid MpMaterialUploadTemporaryReqVO reqVO) throws IOException; |
| 38 | + | ||
| 39 | + /** | ||
| 40 | + * 上传永久素材 | ||
| 41 | + * | ||
| 42 | + * @param reqVO 请求 | ||
| 43 | + * @return 素材 | ||
| 44 | + * @throws IOException 文件操作发生异常 | ||
| 45 | + */ | ||
| 46 | + MpMaterialDO uploadPermanentMaterial(@Valid MpMaterialUploadPermanentReqVO reqVO) throws IOException; | ||
| 47 | + | ||
| 30 | } | 48 | } |
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/service/material/MpMaterialServiceImpl.java
| @@ -3,7 +3,9 @@ package cn.iocoder.yudao.module.mp.service.material; | @@ -3,7 +3,9 @@ package cn.iocoder.yudao.module.mp.service.material; | ||
| 3 | import cn.hutool.core.io.FileTypeUtil; | 3 | import cn.hutool.core.io.FileTypeUtil; |
| 4 | import cn.hutool.core.io.FileUtil; | 4 | import cn.hutool.core.io.FileUtil; |
| 5 | import cn.hutool.core.util.ObjUtil; | 5 | import cn.hutool.core.util.ObjUtil; |
| 6 | +import cn.hutool.core.util.StrUtil; | ||
| 6 | import cn.iocoder.yudao.module.infra.api.file.FileApi; | 7 | import cn.iocoder.yudao.module.infra.api.file.FileApi; |
| 8 | +import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadPermanentReqVO; | ||
| 7 | import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadTemporaryReqVO; | 9 | import cn.iocoder.yudao.module.mp.controller.admin.material.vo.MpMaterialUploadTemporaryReqVO; |
| 8 | import cn.iocoder.yudao.module.mp.convert.material.MpMaterialConvert; | 10 | import cn.iocoder.yudao.module.mp.convert.material.MpMaterialConvert; |
| 9 | import cn.iocoder.yudao.module.mp.dal.dataobject.account.MpAccountDO; | 11 | import cn.iocoder.yudao.module.mp.dal.dataobject.account.MpAccountDO; |
| @@ -15,6 +17,7 @@ import lombok.extern.slf4j.Slf4j; | @@ -15,6 +17,7 @@ import lombok.extern.slf4j.Slf4j; | ||
| 15 | import me.chanjar.weixin.common.bean.result.WxMediaUploadResult; | 17 | import me.chanjar.weixin.common.bean.result.WxMediaUploadResult; |
| 16 | import me.chanjar.weixin.common.error.WxErrorException; | 18 | import me.chanjar.weixin.common.error.WxErrorException; |
| 17 | import me.chanjar.weixin.mp.api.WxMpService; | 19 | import me.chanjar.weixin.mp.api.WxMpService; |
| 20 | +import me.chanjar.weixin.mp.bean.material.WxMpMaterialUploadResult; | ||
| 18 | import org.springframework.context.annotation.Lazy; | 21 | import org.springframework.context.annotation.Lazy; |
| 19 | import org.springframework.stereotype.Service; | 22 | import org.springframework.stereotype.Service; |
| 20 | import org.springframework.validation.annotation.Validated; | 23 | import org.springframework.validation.annotation.Validated; |
| @@ -23,6 +26,9 @@ import javax.annotation.Resource; | @@ -23,6 +26,9 @@ import javax.annotation.Resource; | ||
| 23 | import java.io.File; | 26 | import java.io.File; |
| 24 | import java.io.IOException; | 27 | import java.io.IOException; |
| 25 | 28 | ||
| 29 | +import static cn.iocoder.yudao.framework.common.exception.util.ServiceExceptionUtil.exception; | ||
| 30 | +import static cn.iocoder.yudao.module.mp.enums.ErrorCodeConstants.MATERIAL_UPLOAD_FAIL; | ||
| 31 | + | ||
| 26 | /** | 32 | /** |
| 27 | * 公众号素材 Service 接口 | 33 | * 公众号素材 Service 接口 |
| 28 | * | 34 | * |
| @@ -87,8 +93,7 @@ public class MpMaterialServiceImpl implements MpMaterialService { | @@ -87,8 +93,7 @@ public class MpMaterialServiceImpl implements MpMaterialService { | ||
| 87 | mediaId = ObjUtil.defaultIfNull(result.getMediaId(), result.getThumbMediaId()); | 93 | mediaId = ObjUtil.defaultIfNull(result.getMediaId(), result.getThumbMediaId()); |
| 88 | url = uploadFile(mediaId, file); | 94 | url = uploadFile(mediaId, file); |
| 89 | } catch (WxErrorException e) { | 95 | } catch (WxErrorException e) { |
| 90 | - // TODO yunai：待完善 | ||
| 91 | - throw new RuntimeException(e); | 96 | + throw exception(MATERIAL_UPLOAD_FAIL, e.getError().getErrorMsg()); |
| 92 | } finally { | 97 | } finally { |
| 93 | FileUtil.del(file); | 98 | FileUtil.del(file); |
| 94 | } | 99 | } |
| @@ -101,6 +106,39 @@ public class MpMaterialServiceImpl implements MpMaterialService { | @@ -101,6 +106,39 @@ public class MpMaterialServiceImpl implements MpMaterialService { | ||
| 101 | return material; | 106 | return material; |
| 102 | } | 107 | } |
| 103 | 108 | ||
| 109 | + @Override | ||
| 110 | + public MpMaterialDO uploadPermanentMaterial(MpMaterialUploadPermanentReqVO reqVO) throws IOException { | ||
| 111 | + WxMpService mpService = mpServiceFactory.getRequiredMpService(reqVO.getAccountId()); | ||
| 112 | + // 第一步，上传到公众号 | ||
| 113 | + String name = StrUtil.blankToDefault(reqVO.getName(), reqVO.getFile().getName()); | ||
| 114 | + File file = null; | ||
| 115 | + WxMpMaterialUploadResult result; | ||
| 116 | + String mediaId; | ||
| 117 | + String url; | ||
| 118 | + try { | ||
| 119 | + // 写入到临时文件 | ||
| 120 | + file = FileUtil.newFile(FileUtil.getTmpDirPath() + reqVO.getFile().getOriginalFilename()); | ||
| 121 | + reqVO.getFile().transferTo(file); | ||
| 122 | + // 上传到公众号 | ||
| 123 | + result = mpService.getMaterialService().materialFileUpload(reqVO.getType(), | ||
| 124 | + MpMaterialConvert.INSTANCE.convert(name, file, reqVO.getTitle(), reqVO.getIntroduction())); | ||
| 125 | + // 上传到文件服务 | ||
| 126 | + mediaId = ObjUtil.defaultIfNull(result.getMediaId(), result.getMediaId()); | ||
| 127 | + url = uploadFile(mediaId, file); | ||
| 128 | + } catch (WxErrorException e) { | ||
| 129 | + throw exception(MATERIAL_UPLOAD_FAIL, e.getError().getErrorMsg()); | ||
| 130 | + } finally { | ||
| 131 | + FileUtil.del(file); | ||
| 132 | + } | ||
| 133 | + | ||
| 134 | + // 第二步，存储到数据库 | ||
| 135 | + MpAccountDO account = mpAccountService.getRequiredAccount(reqVO.getAccountId()); | ||
| 136 | + MpMaterialDO material = MpMaterialConvert.INSTANCE.convert(mediaId, reqVO.getType(), url, account, | ||
| 137 | + name, reqVO.getTitle(), reqVO.getIntroduction(), result.getUrl()).setPermanent(true); | ||
| 138 | + mpMaterialMapper.insert(material); | ||
| 139 | + return material; | ||
| 140 | + } | ||
| 141 | + | ||
| 104 | /** | 142 | /** |
| 105 | * 下载微信媒体文件的内容，并上传到文件服务 | 143 | * 下载微信媒体文件的内容，并上传到文件服务 |
| 106 | * | 144 | * |
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/service/menu/MpMenuServiceImpl.java
| @@ -77,7 +77,7 @@ public class MpMenuServiceImpl implements MpMenuService { | @@ -77,7 +77,7 @@ public class MpMenuServiceImpl implements MpMenuService { | ||
| 77 | private void validateMenuExists(Long id) { | 77 | private void validateMenuExists(Long id) { |
| 78 | if (mpMenuMapper.selectById(id) == null) { | 78 | if (mpMenuMapper.selectById(id) == null) { |
| 79 | // TODO 芋艿：错误码不太对 | 79 | // TODO 芋艿：错误码不太对 |
| 80 | - throw exception(COMMON_NOT_EXISTS); | 80 | + throw exception(MENU_NOT_EXISTS); |
| 81 | } | 81 | } |
| 82 | } | 82 | } |
| 83 | 83 |
yudao-ui-admin/src/views/mp/components/wx-material-select/main.vue
0 → 100644
| 1 | +<!-- | ||
| 2 | + - Copyright (C) 2018-2019 | ||
| 3 | + - All rights reserved, Designed By www.joolun.com | ||
| 4 | +--> | ||
| 5 | +<template> | ||
| 6 | + <!-- 类型：图片 --> | ||
| 7 | + <div v-if="objData.type === 'image'"> | ||
| 8 | + <div class="waterfall" v-loading="tableLoading"> | ||
| 9 | + <div class="waterfall-item" v-for="item in tableData" :key="item.mediaId"> | ||
| 10 | + <img class="material-img" :src="item.url"> | ||
| 11 | + <p class="item-name">{{item.name}}</p> | ||
| 12 | + <el-row class="ope-row"> | ||
| 13 | + <el-button size="mini" type="success" @click="selectMaterial(item)">选择 | ||
| 14 | + <i class="el-icon-circle-check el-icon--right"></i> | ||
| 15 | + </el-button> | ||
| 16 | + </el-row> | ||
| 17 | + </div> | ||
| 18 | + </div> | ||
| 19 | + <div v-if="tableData.length <= 0 && !tableLoading" class="el-table__empty-block"> | ||
| 20 | + <span class="el-table__empty-text">暂无数据</span> | ||
| 21 | + </div> | ||
| 22 | + <span slot="footer" class="dialog-footer"> | ||
| 23 | + <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="page.currentPage" | ||
| 24 | + :page-sizes="[10, 20]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" | ||
| 25 | + :total="page.total" class="pagination" /> | ||
| 26 | + </span> | ||
| 27 | + </div> | ||
| 28 | + <div v-else-if="objData.repType == 'voice'"> | ||
| 29 | + <!-- TODO 芋艿：需要翻译 --> | ||
| 30 | +<!-- <avue-crud ref="crud"--> | ||
| 31 | +<!-- :page="page"--> | ||
| 32 | +<!-- :data="tableData"--> | ||
| 33 | +<!-- :table-loading="tableLoading"--> | ||
| 34 | +<!-- :option="tableOptionVoice"--> | ||
| 35 | +<!-- @on-load="getPage"--> | ||
| 36 | +<!-- @size-change="sizeChange"--> | ||
| 37 | +<!-- @refresh-change="refreshChange">--> | ||
| 38 | +<!-- <template slot-scope="scope"--> | ||
| 39 | +<!-- slot="menu">--> | ||
| 40 | +<!-- <el-button type="text"--> | ||
| 41 | +<!-- icon="el-icon-circle-plus"--> | ||
| 42 | +<!-- size="small"--> | ||
| 43 | +<!-- plain--> | ||
| 44 | +<!-- @click="selectMaterial(scope.row)">选择</el-button>--> | ||
| 45 | +<!-- </template>--> | ||
| 46 | +<!-- </avue-crud>--> | ||
| 47 | + </div> | ||
| 48 | + <div v-else-if="objData.repType == 'video'"> | ||
| 49 | + <!-- TODO 芋艿：需要翻译 --> | ||
| 50 | + <!-- <avue-crud ref="crud"--> | ||
| 51 | +<!-- :page="page"--> | ||
| 52 | +<!-- :data="tableData"--> | ||
| 53 | +<!-- :table-loading="tableLoading"--> | ||
| 54 | +<!-- :option="tableOptionVideo"--> | ||
| 55 | +<!-- @on-load="getPage"--> | ||
| 56 | +<!-- @size-change="sizeChange"--> | ||
| 57 | +<!-- @refresh-change="refreshChange">--> | ||
| 58 | +<!-- <template slot-scope="scope"--> | ||
| 59 | +<!-- slot="menu">--> | ||
| 60 | +<!-- <el-button type="text"--> | ||
| 61 | +<!-- icon="el-icon-circle-plus"--> | ||
| 62 | +<!-- size="small"--> | ||
| 63 | +<!-- plain--> | ||
| 64 | +<!-- @click="selectMaterial(scope.row)">选择</el-button>--> | ||
| 65 | +<!-- </template>--> | ||
| 66 | +<!-- </avue-crud>--> | ||
| 67 | + </div> | ||
| 68 | + <div v-else-if="objData.repType == 'news'"> | ||
| 69 | + <div class="waterfall" v-loading="tableLoading"> | ||
| 70 | + <div class="waterfall-item" v-for="item in tableData" :key="item.mediaId" v-if="item.content && item.content.articles"> | ||
| 71 | + <WxNews :objData="item.content.articles"></WxNews> | ||
| 72 | + <el-row class="ope-row"> | ||
| 73 | + <el-button size="mini" type="success" @click="selectMaterial(item)">选择<i class="el-icon-circle-check el-icon--right"></i></el-button> | ||
| 74 | + </el-row> | ||
| 75 | + </div> | ||
| 76 | + </div> | ||
| 77 | + <div v-if="tableData.length <=0 && !tableLoading" class="el-table__empty-block"> | ||
| 78 | + <span class="el-table__empty-text">暂无数据</span> | ||
| 79 | + </div> | ||
| 80 | + <span slot="footer" class="dialog-footer"> | ||
| 81 | + <el-pagination | ||
| 82 | + @size-change="sizeChange" | ||
| 83 | + :current-page.sync="page.currentPage" | ||
| 84 | + :page-sizes="[10, 20]" | ||
| 85 | + :page-size="page.pageSize" | ||
| 86 | + layout="total, sizes, prev, pager, next, jumper" | ||
| 87 | + :total="page.total" | ||
| 88 | + class="pagination" | ||
| 89 | + > | ||
| 90 | + </el-pagination> | ||
| 91 | + </span> | ||
| 92 | + </div> | ||
| 93 | +</template> | ||
| 94 | + | ||
| 95 | +<script> | ||
| 96 | + import { getPage, getMaterialVideo } from '@/api/wxmp/wxmaterial' | ||
| 97 | + // import { tableOptionVoice } from '@/const/crud/wxmp/wxmaterial_voice' | ||
| 98 | + // import { tableOptionVideo } from '@/const/crud/wxmp/wxmaterial_video' | ||
| 99 | + import WxNews from '@/views/mp/components/wx-news/main.vue'; | ||
| 100 | + import {getPage as getPageNews} from '@/api/wxmp/wxfreepublish' | ||
| 101 | + import {getPage as getPageNewsDraft} from '@/api/wxmp/wxdraft' | ||
| 102 | + | ||
| 103 | + export default { | ||
| 104 | + name: "wxMaterialSelect", | ||
| 105 | + components: { | ||
| 106 | + WxNews | ||
| 107 | + }, | ||
| 108 | + props: { | ||
| 109 | + objData: { | ||
| 110 | + type: Object, | ||
| 111 | + required: true | ||
| 112 | + }, | ||
| 113 | + //图文类型：1、已发布图文；2、草稿箱图文 | ||
| 114 | + newsType:{ | ||
| 115 | + type: String, | ||
| 116 | + default: "1" | ||
| 117 | + }, | ||
| 118 | + }, | ||
| 119 | + data() { | ||
| 120 | + return { | ||
| 121 | + tableLoading: false, | ||
| 122 | + tableData: [], | ||
| 123 | + page: { | ||
| 124 | + total: 0, // 总页数 | ||
| 125 | + currentPage: 1, // 当前页数 | ||
| 126 | + pageSize: 20, // 每页显示多少条 | ||
| 127 | + ascs:[],//升序字段 | ||
| 128 | + descs:[]//降序字段 | ||
| 129 | + }, | ||
| 130 | + // tableOptionVoice: tableOptionVoice, | ||
| 131 | + // tableOptionVideo: tableOptionVideo, | ||
| 132 | + } | ||
| 133 | + }, | ||
| 134 | + created() { | ||
| 135 | + this.getPage(this.page) | ||
| 136 | + }, | ||
| 137 | + methods:{ | ||
| 138 | + selectMaterial(item){ | ||
| 139 | + this.$emit('selectMaterial', item) | ||
| 140 | + }, | ||
| 141 | + getPage(page, params) { | ||
| 142 | + this.tableLoading = true | ||
| 143 | + if(this.objData.repType == 'news'){ | ||
| 144 | + if(this.newsType == '1'){ | ||
| 145 | + getPageNews(Object.assign({ | ||
| 146 | + current: page.currentPage, | ||
| 147 | + size: page.pageSize, | ||
| 148 | + appId:this.appId, | ||
| 149 | + }, params)).then(response => { | ||
| 150 | + let tableData = response.data.items | ||
| 151 | + tableData.forEach(item => { | ||
| 152 | + item.mediaId = item.articleId | ||
| 153 | + item.content.articles = item.content.newsItem | ||
| 154 | + }) | ||
| 155 | + this.tableData = tableData | ||
| 156 | + this.page.total = response.data.totalCount | ||
| 157 | + this.page.currentPage = page.currentPage | ||
| 158 | + this.page.pageSize = page.pageSize | ||
| 159 | + this.tableLoading = false | ||
| 160 | + }) | ||
| 161 | + }else if(this.newsType == '2'){ | ||
| 162 | + getPageNewsDraft(Object.assign({ | ||
| 163 | + current: page.currentPage, | ||
| 164 | + size: page.pageSize, | ||
| 165 | + appId:this.appId, | ||
| 166 | + }, params)).then(response => { | ||
| 167 | + let tableData = response.data.items | ||
| 168 | + tableData.forEach(item => { | ||
| 169 | + item.mediaId = item.mediaId | ||
| 170 | + item.content.articles = item.content.newsItem | ||
| 171 | + }) | ||
| 172 | + this.tableData = tableData | ||
| 173 | + this.page.total = response.data.totalCount | ||
| 174 | + this.page.currentPage = page.currentPage | ||
| 175 | + this.page.pageSize = page.pageSize | ||
| 176 | + this.tableLoading = false | ||
| 177 | + }) | ||
| 178 | + } | ||
| 179 | + }else{ | ||
| 180 | + getPage(Object.assign({ | ||
| 181 | + current: page.currentPage, | ||
| 182 | + size: page.pageSize, | ||
| 183 | + appId:this.appId, | ||
| 184 | + type:this.objData.repType | ||
| 185 | + }, params)).then(response => { | ||
| 186 | + this.tableData = response.data.items | ||
| 187 | + this.page.total = response.data.totalCount | ||
| 188 | + this.page.currentPage = page.currentPage | ||
| 189 | + this.page.pageSize = page.pageSize | ||
| 190 | + this.tableLoading = false | ||
| 191 | + }) | ||
| 192 | + } | ||
| 193 | + }, | ||
| 194 | + sizeChange(val) { | ||
| 195 | + this.page.currentPage = 1 | ||
| 196 | + this.page.pageSize = val | ||
| 197 | + this.getPage(this.page) | ||
| 198 | + }, | ||
| 199 | + currentChange(val) { | ||
| 200 | + this.page.currentPage = val | ||
| 201 | + this.getPage(this.page) | ||
| 202 | + }, | ||
| 203 | + /** | ||
| 204 | + * 刷新回调 | ||
| 205 | + */ | ||
| 206 | + refreshChange(page) { | ||
| 207 | + this.getPage(this.page) | ||
| 208 | + } | ||
| 209 | + } | ||
| 210 | + }; | ||
| 211 | +</script> | ||
| 212 | + | ||
| 213 | +<style lang="scss" scoped> | ||
| 214 | + /*瀑布流样式*/ | ||
| 215 | + .waterfall { | ||
| 216 | + width: 100%; | ||
| 217 | + column-gap:10px; | ||
| 218 | + column-count: 5; | ||
| 219 | + margin: 0 auto; | ||
| 220 | + } | ||
| 221 | + .waterfall-item { | ||
| 222 | + padding: 10px; | ||
| 223 | + margin-bottom: 10px; | ||
| 224 | + break-inside: avoid; | ||
| 225 | + border: 1px solid #eaeaea; | ||
| 226 | + } | ||
| 227 | + .material-img { | ||
| 228 | + width: 100%; | ||
| 229 | + } | ||
| 230 | + p { | ||
| 231 | + line-height: 30px; | ||
| 232 | + } | ||
| 233 | + @media (min-width: 992px) and (max-width: 1300px) { | ||
| 234 | + .waterfall { | ||
| 235 | + column-count: 3; | ||
| 236 | + } | ||
| 237 | + p { | ||
| 238 | + color:red; | ||
| 239 | + } | ||
| 240 | + } | ||
| 241 | + @media (min-width: 768px) and (max-width: 991px) { | ||
| 242 | + .waterfall { | ||
| 243 | + column-count: 2; | ||
| 244 | + } | ||
| 245 | + p { | ||
| 246 | + color: orange; | ||
| 247 | + } | ||
| 248 | + } | ||
| 249 | + @media (max-width: 767px) { | ||
| 250 | + .waterfall { | ||
| 251 | + column-count: 1; | ||
| 252 | + } | ||
| 253 | + } | ||
| 254 | + /*瀑布流样式*/ | ||
| 255 | +</style> |