1、直播数据导出

src/api/live/liveData.js

@@ -96,3 +96,12 @@ export function exportLiveUserDetail(liveId) {
   })
 }
 
+// 导出直播数据列表
+export function exportLiveData(query) {
+  return request({
+    url: '/liveData/liveData/export',
+    method: 'get',
+    params: query
+  })
+}
+

src/views/live/liveData/index.vue

@@ -134,14 +134,14 @@
       </el-form-item>
       <el-form-item label="完课状态" prop="completeStatus">
         <el-select v-model="queryParams.completeStatus" placeholder="请选择完课状态" clearable size="small" popper-append-to-body style="width: 160px">
-          <el-option label="已完课" value="1"></el-option>
-          <el-option label="未完课" value="0"></el-option>
+          <el-option label="已完课" :value="1"></el-option>
+          <el-option label="未完课" :value="0"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="付费状态" prop="payStatus">
         <el-select v-model="queryParams.payStatus" placeholder="请选择付费状态" clearable size="small" popper-append-to-body style="width: 160px">
-          <el-option label="已付费" value="1"></el-option>
-          <el-option label="未付费" value="0"></el-option>
+          <el-option label="已付费" :value="1"></el-option>
+          <el-option label="未付费" :value="0"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="观看时长" prop="watchDuration">
@@ -571,6 +571,8 @@
 </template>
 
 <script>
+import axios from "axios";
+import { getToken } from "@/utils/auth";
 import {
   listLiveData,
   exportLiveData,
@@ -684,6 +686,15 @@ export default {
         this.queryParams.startTime = null;
         this.queryParams.endTime = null;
       }
+      if (!this.queryParams.liveId) {
+        this.queryParams.liveId = null;
+      }
+      if (this.queryParams.liveName === '') {
+        this.queryParams.liveName = null;
+      }
+      if (this.queryParams.watchType === '') {
+        this.queryParams.watchType = null;
+      }
       listLiveData(this.queryParams).then(response => {
         if (response.code === 200) {
           this.statisticsData = response.data || {};
@@ -747,13 +758,46 @@ export default {
         return exportLiveData(this.queryParams);
       }).then(response => {
         if (response.code === 200) {
-          this.download(response.msg);
+          return this.downloadFileWithAuth(response.msg);
         }
+      }).then(() => {
         this.exportLoading = false;
       }).catch(() => {
         this.exportLoading = false;
       });
     },
+    /** 带鉴权下载，避免 /common/download 因无 token 返回 401 */
+    downloadFileWithAuth(fileName) {
+      if (!fileName) {
+        this.$message.error("导出失败，未获取到文件名");
+        return Promise.reject("empty fileName");
+      }
+      return axios({
+        method: "get",
+        url: process.env.VUE_APP_BASE_API + "/common/download",
+        params: { fileName: fileName, delete: false },
+        responseType: "blob",
+        headers: {
+          Authorization: "Bearer " + getToken(),
+          "X-Frontend-Type": "company"
+        }
+      }).then(res => {
+        const disposition = res.headers["content-disposition"] || "";
+        let downloadName = fileName.indexOf("_") > -1 ? fileName.substring(fileName.indexOf("_") + 1) : fileName;
+        const match = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(disposition);
+        if (match && match[1]) {
+          downloadName = decodeURIComponent(match[1].replace(/['"]/g, ""));
+        }
+        const blob = new Blob([res.data]);
+        const link = document.createElement("a");
+        link.href = window.URL.createObjectURL(blob);
+        link.setAttribute("download", downloadName);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(link.href);
+      });
+    },
     /** 自动打标签 */
     // handleAutoTag() {
     //   if (this.multipleSelection.length === 0) {
@@ -955,9 +999,11 @@ export default {
         return exportLiveUserDetail(this.currentLiveId);
       }).then(response => {
         if (response.code === 200) {
-          this.download(response.msg);
-          this.$message.success('导出成功');
+          return this.downloadFileWithAuth(response.msg).then(() => {
+            this.$message.success('导出成功');
+          });
         }
+      }).then(() => {
         this.userDetailExportLoading = false;
       }).catch(() => {
         this.userDetailExportLoading = false;