mp：增加【语音】【视频】的素材选择

YunaiV
1 parent 188d8802
Showing 3 changed files with 78 additions and 54 deletions
yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/material/vo/MpMaterialRespVO.java
yudao-ui-admin/src/views/mp/components/wx-material-select/main.vue
yudao-ui-admin/src/views/mp/components/wx-reply/main.vue
@@ -4,6 +4,8 @@ import io.swagger.annotations.ApiModel;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
+import java.util.Date;
+
 @ApiModel("管理后台 - 公众号素材 Response VO")
 @Data
 public class MpMaterialRespVO {
@@ -39,4 +41,8 @@ public class MpMaterialRespVO {
     private String title;
     @ApiModelProperty(value = "视频素材的描述", example = "我是介绍", notes = "只有【永久素材】使用")
     private String introduction;
+
+    @ApiModelProperty(value = "创建时间", required = true)
+    private Date createTime;
+
 }
@@ -23,45 +23,59 @@
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                 @pagination="getMaterialPage"/>
   </div>
-  <div v-else-if="objData.type == 'voice'">
-    <!-- TODO 芋艿：需要翻译 -->
-<!--    <avue-crud ref="crud"-->
-<!--               :page="page"-->
-<!--               :data="tableData"-->
-<!--               :table-loading="tableLoading"-->
-<!--               :option="tableOptionVoice"-->
-<!--               @on-load="getPage"-->
-<!--               @size-change="sizeChange"-->
-<!--               @refresh-change="refreshChange">-->
-<!--      <template slot-scope="scope"-->
-<!--                slot="menu">-->
-<!--        <el-button type="text"-->
-<!--                   icon="el-icon-circle-plus"-->
-<!--                   size="small"-->
-<!--                   plain-->
-<!--                   @click="selectMaterial(scope.row)">选择</el-button>-->
-<!--      </template>-->
-<!--    </avue-crud>-->
+  <!-- 类型：语音 -->
+  <div v-else-if="objData.type === 'voice'">
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="mediaId" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="语音" align="center">
+        <template v-slot="scope">
+          <wx-voice-player :url="scope.row.url" />
+        </template>
+      </el-table-column>
+      <el-table-column label="上传时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-circle-plus"
+                     @click="selectMaterial(scope.row)">选择</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getMaterialPage"/>
   </div>
-  <div v-else-if="objData.type == 'video'">
-    <!-- TODO 芋艿：需要翻译 -->
-    <!--    <avue-crud ref="crud"-->
-<!--               :page="page"-->
-<!--               :data="tableData"-->
-<!--               :table-loading="tableLoading"-->
-<!--               :option="tableOptionVideo"-->
-<!--               @on-load="getPage"-->
-<!--               @size-change="sizeChange"-->
-<!--               @refresh-change="refreshChange">-->
-<!--      <template slot-scope="scope"-->
-<!--                slot="menu">-->
-<!--        <el-button type="text"-->
-<!--                   icon="el-icon-circle-plus"-->
-<!--                   size="small"-->
-<!--                   plain-->
-<!--                   @click="selectMaterial(scope.row)">选择</el-button>-->
-<!--      </template>-->
-<!--    </avue-crud>-->
+  <div v-else-if="objData.type === 'video'">
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="mediaId" />
+      <el-table-column label="标题" align="center" prop="title" />
+      <el-table-column label="介绍" align="center" prop="introduction" />
+      <el-table-column label="视频" align="center">
+        <template v-slot="scope">
+          <wx-video-player :url="scope.row.url" />
+        </template>
+      </el-table-column>
+      <el-table-column label="上传时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-circle-plus"
+                     @click="selectMaterial(scope.row)">选择</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getMaterialPage"/>
   </div>
   <div v-else-if="objData.type == 'news'">
     <div class="waterfall" v-loading="loading">
@@ -95,6 +109,8 @@
   // 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 WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue';
+  import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue';
   import { getMaterialPage } from "@/api/mp/material";
   // import {getPage as getPageNews} from '@/api/wxmp/wxfreepublish'
   // import {getPage as getPageNewsDraft} from '@/api/wxmp/wxdraft'
@@ -102,7 +118,9 @@
   export default {
     name: "wxMaterialSelect",
     components: {
-      WxNews
+      WxNews,
+      WxVoicePlayer,
+      WxVideoPlayer
     },
     props: {
       objData: {
@@ -19,7 +19,7 @@
         <!-- 情况一：已经选择好素材、或者上传好图片 -->
         <div class="select-item" v-if="objData.url">
           <img class="material-img" :src="objData.url">
-          <p class="item-name" v-if="objData.repName">{{objData.repName}}</p> <!-- TODO 芋艿：永久素材，name 字段 -->
+          <p class="item-name" v-if="objData.name">{{objData.name}}</p>
           <el-row class="ope-row">
             <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj"></el-button>
           </el-row>
@@ -54,7 +54,7 @@
       <span slot="label"><i class="el-icon-phone"></i> 语音</span>
       <el-row>
         <div class="select-item2" v-if="objData.url">
-          <p class="item-name">{{objData.repName}}</p> <!-- TODO 芋艿：永久素材，name 字段 -->
+          <p class="item-name">{{objData.name}}</p>
           <div class="item-infos">
             <wx-voice-player :url="objData.url" />
           </div>
@@ -315,22 +315,17 @@
           this.objData.content = tempObjItem.content ? tempObjItem.content : null
           this.objData.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
           this.objData.url = tempObjItem.url ? tempObjItem.url : null
+          this.objData.name = tempObjItem.url ? tempObjItem.name : null
           // TODO 芋艿：临时注释掉，看看有没用
-          // this.objData.repName = tempObjItem.repName ? tempObjItem.repName : null
-          // this.objData.repMediaId = tempObjItem.repMediaId ? tempObjItem.repMediaId : null
           // this.objData.repDesc = tempObjItem.repDesc ? tempObjItem.repDesc : null
           return;
         }
         // 如果获取不到，需要把 objData 复原
+        this.objData.content = undefined;
         this.objData.mediaId = undefined;
         this.objData.url = undefined;
-        this.objData.content = undefined;
-        // this.$delete(this.objData,'repName')
-        // this.$delete(this.objData,'repMediaId')
-        // this.$delete(this.objData,'mediaId')
-        // this.$delete(this.objData,'url')
-        // this.$delete(this.objData,'content') // TODO 芋艿：貌似删除了，文本无法输入
+        this.objData.name = undefined;
         // this.$delete(this.objData,'repDesc')
       },
       /**
@@ -357,12 +352,16 @@
           tempObjItem.hqMusicUrl = this.objData.hqMusicUrl
         } else if (this.objData.type === 'image'
             || this.objData.type === 'voice') {
-          tempObjItem.mediaId = item.mediaId;
+          tempObjItem.mediaId = item.mediaId
           this.objData.mediaId = item.mediaId
-          tempObjItem.url = item.url;
-          this.objData.url = item.url
-          // tempObjItem.repName = item.name
-          // this.objData.repName = item.name
+          if (item.url) {
+            tempObjItem.url = item.url;
+            this.objData.url = item.url;
+          } else { // 必须使用 $delete 删除，否则 vue 监听不到数据
+            this.$delete(this.objData, 'url');
+          }
+          tempObjItem.name = item.name
+          this.objData.name = item.name
         } else if (this.objData.type === 'video') {
           // getMaterialVideo({
           //   mediaId:item.mediaId
@@ -401,6 +400,7 @@
         this.dialogThumbVisible = false
       },
       deleteObj() {
+        console.log('删除！');
         if (this.objData.type === 'news') {
           // TODO 芋艿，待实现
         } else if(this.objData.type === 'image'