chore: 优化视频下载

src/api/common.js

@@ -93,3 +93,10 @@ export function getSignature() {
 export function getMeetingCount(params) {
   return httpRequest.get('/api/live/admin/v3/tencent/meeting/count', { params })
 }
+
+/**
+ * 获取会议回放详情列表
+ */
+export function getMeetingRecords(params) {
+  return httpRequest.get(`/api/live/admin/v3/tencent/meeting/${params.meeting_id}/records`, { params })
+}

src/components/TableHandles/DownloadVideo.vue

+<template>
+  <el-dialog title="下载" v-bind="$attrs" v-on="$listeners">
+    <el-alert type="info" show-icon :closable="false">
+      <template #title>
+        已选择<span style="color:#409eff;padding:0 5px;">{{ multipleSelection.length }}</span
+        >项
+        <el-button
+          type="text"
+          :disabled="!multipleSelection.length"
+          @click="handleBatchDownload"
+          style="margin-left: 10px;"
+          >批量下载</el-button
+        >
+      </template>
+    </el-alert>
+    <el-table :data="list" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" />
+      <el-table-column label="开始时间" prop="record_start_time"></el-table-column>
+      <el-table-column label="结束时间" prop="record_end_time"></el-table-column>
+      <el-table-column label="大小" prop="record_size"></el-table-column>
+      <el-table-column label="操作" width="100">
+        <template #default="{row}">
+          <el-button type="text" @click="handleDownload(row)">下载</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-dialog>
+</template>
+
+<script>
+import { getMeetingRecords, getMeetingRecordAddr } from '@/api/common'
+
+export default {
+  props: { data: Object },
+  data() {
+    return {
+      list: [],
+      multipleSelection: []
+    }
+  },
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    fetchList() {
+      getMeetingRecords({ meeting_id: this.data.meeting_id, sub_meeting_id: this.data.sub_meeting_id }).then(res => {
+        if (res.code === 0) {
+          this.list = res.data.items || []
+        } else {
+          this.$message.error(res.message)
+        }
+      })
+    },
+    // 下载
+    handleDownload(row) {
+      const params = {
+        meeting_id: this.data.meeting_id,
+        record_file_ids: [].concat(row.record_file_id)
+      }
+      this.fetchDownloadInfo(params)
+    },
+    // 批量下载
+    handleBatchDownload() {
+      const params = {
+        meeting_id: this.data.meeting_id,
+        record_file_ids: this.multipleSelection.map(item => item.record_file_id)
+      }
+      this.fetchDownloadInfo(params)
+    },
+    fetchDownloadInfo(params) {
+      getMeetingRecordAddr(params).then(res => {
+        const files = res.data.files || []
+        files.forEach((file, index) => {
+          setTimeout(() => {
+            this.funDownload(file.download_address, file.download_address)
+          }, index * 1000)
+        })
+      })
+    },
+    funDownload(fileUrl, fileName) {
+      const elink = document.createElement('a') // 创建一个a标签
+      elink.download = fileName // 设置a标签的下载属性
+      elink.style.display = 'none' // 将a标签设置为隐藏
+      elink.href = fileUrl // 把之前处理好的地址赋给a标签的href
+      document.body.appendChild(elink) // 将a标签添加到body中
+      elink.click() // 执行a标签的点击方法
+      // URL.revokeObjectURL(elink.href) // 下载完成释放URL 对象
+      document.body.removeChild(elink) // 移除a标签
+    }
+  },
+  mounted() {
+    this.fetchList()
+  }
+}
+</script>

src/components/TableHandles/index.vue

@@ -15,9 +15,15 @@
       <el-button type="text" size="small" v-else @click="handleDetails">查看</el-button>
     </template>
     <template v-if="status === 2">
-      <el-button type="text" size="small" v-if="operatable && hasJoin && isFuture" @click="handleJoin">进入会议</el-button>
-      <el-button type="text" size="small" v-if="operatable && hasUpdate && isFuture" @click="handleUpdate">更新</el-button>
-      <el-button type="text" size="small" v-if="(operatable && hasDownload) || hasManage" @click="handleRecord">下载回放</el-button>
+      <el-button type="text" size="small" v-if="operatable && hasJoin && isFuture" @click="handleJoin"
+        >进入会议</el-button
+      >
+      <el-button type="text" size="small" v-if="operatable && hasUpdate && isFuture" @click="handleUpdate"
+        >更新</el-button
+      >
+      <el-button type="text" size="small" v-if="(operatable && hasDownload) || hasManage" @click="handleRecord"
+        >下载回放</el-button
+      >
       <el-button type="text" size="small" v-if="operatable && hasDelete" @click="handleDelete">删除</el-button>
       <el-button type="text" size="small" @click="handleDetails">查看</el-button>
     </template>
@@ -25,27 +31,36 @@
       <el-button type="text" size="small" @click="handleDetails">查看</el-button>
       <!-- <el-button type="text" size="small" v-if="operatable" @click="handleDelete">删除</el-button> -->
     </template>
-    <el-dialog :title="domicTitle" :visible.sync="dialogVisible" width="520px" center>
+    <el-dialog :title="domicTitle" :visible.sync="dialogVisible" width="520px" center class="my-dialog">
       <div slot="title" class="dialog-header">
-        <p class="meeting-status" v-show="dialogType === 'details'">会议{{rowData.status | statusFilter}}</p>
-        <p class="title">{{domicTitle}}</p>
+        <p class="meeting-status" v-show="dialogType === 'details'">会议{{ rowData.status | statusFilter }}</p>
+        <p class="title">{{ domicTitle }}</p>
       </div>
-      <dialog-details :rowData="rowData" :details="details" v-show="dialogType === 'details'" :operatable="operatable"/>
-      <dialog-copy-invite :rowData="rowData" :details="details" v-show="dialogType === 'copy'"/>
+      <dialog-details
+        :rowData="rowData"
+        :details="details"
+        v-show="dialogType === 'details'"
+        :operatable="operatable"
+      />
+      <dialog-copy-invite :rowData="rowData" :details="details" v-show="dialogType === 'copy'" />
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" size="mini" v-show="dialogType === 'copy'" @click="copyLink">复制</el-button>
         <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
       </div>
     </el-dialog>
+    <!-- 下载 -->
+    <DownloadVideo :data="rowData" :visible.sync="downloadVisible" v-if="downloadVisible"></DownloadVideo>
   </div>
 </template>
 <script>
 import DialogDetails from './DialogDetails.vue'
 import DialogCopyInvite from './DialogCopyInvite'
+import DownloadVideo from './DownloadVideo'
 import { mapGetters } from 'vuex'
 import { getMeetingDetails, stopMeeting, cancelMeeting, getMeetingRecordAddr } from '@api/common'
 import { timeTrans } from '@/utils/dateAlgs'
 export default {
+  components: { DialogDetails, DialogCopyInvite, DownloadVideo },
   props: {
     rowData: {}
   },
@@ -53,7 +68,8 @@ export default {
     return {
       dialogVisible: false,
       dialogType: 'copy',
-      details: ''
+      details: '',
+      downloadVisible: false
     }
   },
   computed: {
@@ -151,9 +167,6 @@ export default {
       return result
     }
   },
-  components: { DialogDetails, DialogCopyInvite },
-  created() {
-  },
   methods: {
     handleCopy() {
       this.fetchMeetingDetails()
@@ -166,44 +179,53 @@ export default {
       this.fetchMeetingDetails()
     },
     handleLive() {
-      window.open(this.rowData.live_config.live_addr, '_blank');
+      window.open(this.rowData.live_config.live_addr, '_blank')
     },
     handleUpdate() {
-      this.$router.push({ path: '/meeting-update', query: { meeting_id: this.rowData.meeting_id, sub_meeting_id: this.rowData.sub_meeting_id } })
+      this.$router.push({
+        path: '/meeting-update',
+        query: { meeting_id: this.rowData.meeting_id, sub_meeting_id: this.rowData.sub_meeting_id }
+      })
     },
     handleCancel() {
       this.$confirm('此操作将取消这场会议, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消'
-      }).then(() => {
-        this.fetchCancelMeeting('cancel')
-      }).catch(() => {})
+      })
+        .then(() => {
+          this.fetchCancelMeeting('cancel')
+        })
+        .catch(() => {})
     },
     handleStop() {
       this.$confirm('此操作将终止正在进行中的会议, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消'
-      }).then(() => {
-        this.fetchStopMeeting()
-      }).catch(() => {})
+      })
+        .then(() => {
+          this.fetchStopMeeting()
+        })
+        .catch(() => {})
     },
     handleDelete() {
       this.$confirm('此操作将删除这场会议, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消'
-      }).then(() => {
-        this.fetchCancelMeeting('delete')
-      }).catch(() => {})
+      })
+        .then(() => {
+          this.fetchCancelMeeting('delete')
+        })
+        .catch(() => {})
     },
     handleJoin() {
-      window.open(this.rowData.join_url, '_blank');
+      window.open(this.rowData.join_url, '_blank')
     },
     copyLink() {
       const dom = document.createElement('input')
       document.body.appendChild(dom)
       dom.value = this.rowData.join_url
-      dom.select(); // 选择对象
-      document.execCommand('Copy');
+      dom.select() // 选择对象
+      document.execCommand('Copy')
       this.$message({
         message: '复制成功！',
         type: 'success'
@@ -211,31 +233,32 @@ export default {
       document.body.removeChild(dom)
     },
     async handleRecord() {
-      if (this.rowData.record_file_ids.length === 0) {
-        this.$message.error('该会议没有回放')
-      } else {
-        const list = await this.fetchMeetingRecordAddr()
-        if (list && Array.isArray(list)) {
-          list.forEach((it, index) => {
-            if (it.download_address) {
-              // window.open(it.download_address, '_blank')
-              setTimeout(() => {
-                this.funDownload(it.download_address, it.download_address)
-              }, index * 1000)
-            }
-          })
-        }
-      }
+      this.downloadVisible = true
+      // if (this.rowData.record_file_ids.length === 0) {
+      //   this.$message.error('该会议没有回放')
+      // } else {
+      //   const list = await this.fetchMeetingRecordAddr()
+      //   if (list && Array.isArray(list)) {
+      //     list.forEach((it, index) => {
+      //       if (it.download_address) {
+      //         // window.open(it.download_address, '_blank')
+      //         setTimeout(() => {
+      //           this.funDownload(it.download_address, it.download_address)
+      //         }, index * 1000)
+      //       }
+      //     })
+      //   }
+      // }
     },
     funDownload(fileUrl, fileName) {
-      const elink = document.createElement('a')// 创建一个a标签
-      elink.download = fileName;// 设置a标签的下载属性
-      elink.style.display = 'none';// 将a标签设置为隐藏
-      elink.href = fileUrl;// 把之前处理好的地址赋给a标签的href
-      document.body.appendChild(elink);// 将a标签添加到body中
-      elink.click();// 执行a标签的点击方法
+      const elink = document.createElement('a') // 创建一个a标签
+      elink.download = fileName // 设置a标签的下载属性
+      elink.style.display = 'none' // 将a标签设置为隐藏
+      elink.href = fileUrl // 把之前处理好的地址赋给a标签的href
+      document.body.appendChild(elink) // 将a标签添加到body中
+      elink.click() // 执行a标签的点击方法
       // URL.revokeObjectURL(elink.href) // 下载完成释放URL 对象
-      document.body.removeChild(elink)// 移除a标签
+      document.body.removeChild(elink) // 移除a标签
     },
     fetchStopMeeting() {
       const params = {
@@ -288,46 +311,50 @@ export default {
         record_file_ids: this.rowData.record_file_ids
       }
       return new Promise((resolve, reject) => {
-        getMeetingRecordAddr(params).then(res => {
-          if (res.code === 0 && res.data.files) {
-            resolve(res.data.files)
-          } else {
-            reject(res)
-          }
-        }).catch((err) => reject(err))
+        getMeetingRecordAddr(params)
+          .then(res => {
+            if (res.code === 0 && res.data.files) {
+              resolve(res.data.files)
+            } else {
+              reject(res)
+            }
+          })
+          .catch(err => reject(err))
       })
     }
   }
 }
 </script>
-<style scoped>
-.dropdown-link{
+<style lang="scss" scoped>
+.dropdown-link {
   cursor: pointer;
-  color: #409EFF;
-  font-size:12px;
+  color: #409eff;
+  font-size: 12px;
 }
 ::v-deep.el-icon-arrow-down {
   font-size: 12px;
 }
-.btns ::v-deep.el-dialog__header{
-  padding-top:14px;
-}
-.btns ::v-deep.el-dialog__headerbtn{
-  top:12px;
-  right:12px;
-}
-.btns ::v-deep.el-dialog__body{
-  padding:10px 0;
-  margin:0 20px;
-  border: 1px solid #DBDBDB;
-}
-.btns ::v-deep.el-dialog__footer{
-  padding-bottom:16px;
-}
-.dialog-header .meeting-status{
-  text-align:left;
-}
-.dialog-header .title{
-  font-size:16px;
+.my-dialog {
+  ::v-deep.el-dialog__header {
+    padding-top: 14px;
+  }
+  ::v-deep.el-dialog__headerbtn {
+    top: 12px;
+    right: 12px;
+  }
+  ::v-deep.el-dialog__body {
+    padding: 10px 0;
+    margin: 0 20px;
+    border: 1px solid #dbdbdb;
+  }
+  ::v-deep.el-dialog__footer {
+    padding-bottom: 16px;
+  }
+  .dialog-header .meeting-status {
+    text-align: left;
+  }
+  .dialog-header .title {
+    font-size: 16px;
+  }
 }
-</style>
+</style>
\ No newline at end of file