媒体文件单个下载

rain

2025-03-04 090c10fb81eb38fe71c768b6dfe5efe802df73d4

媒体文件单个下载

 src/views/resource/media.vue

@@ -8,6 +8,9 @@
        <el-button type="primary" text icon="el-icon-view" v-if="permission.attach_delete"
          @click="handleRowView(scope.row)">查看
        </el-button>
        <el-button type="success" text icon="el-icon-download" v-if="permission.attach_delete"
          @click="handleRowDownload(scope.row)">下载
        </el-button>
        <el-button type="danger" text icon="el-icon-delete" v-if="permission.attach_delete"
          @click="handleRowDelete(scope.row)">删除
        </el-button>
@@ -28,18 +31,14 @@

export default {
  data() {
    // 计算默认的开始和结束日期
    const endDate = new Date(); // 当前日期
    const startDate = new Date(); // 一个月前的日期
    const endDate = new Date();
    const startDate = new Date();
    startDate.setMonth(startDate.getMonth() - 1);

    // 格式化为 YYYY-MM-DD 字符串，与 valueFormat 一致
    const defaultStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;
    const defaultEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`;

    return {
      form: {},
      // 初始化 query，设置默认时间范围
      query: {
        daterange: [defaultStartDate, defaultEndDate]
      },
@@ -72,10 +71,7 @@
            search: true,
            searchSpan: 5,
            dicData: [],
            props: {
              label: 'nickname',
              value: 'nickname',
            },
            props: { label: 'nickname', value: 'nickname' },
            hide: true,
          },
          {
@@ -91,7 +87,7 @@
            endPlaceholder: '结束时间',
            viewDisplay: false,
            hide: true,
            searchValue: [defaultStartDate, defaultEndDate] // 设置搜索表单默认值，确保显示
            searchValue: [defaultStartDate, defaultEndDate]
          },
          { label: '任务名称', prop: 'job_name' },
          { label: '文件名称', prop: 'file_name' },
@@ -113,9 +109,7 @@
            drag: true,
            loadText: '任务上传中，请稍等',
            span: 24,
            propsHttp: {
              res: 'data',
            },
            propsHttp: { res: 'data' },
            action: '/blade-resource/oss/endpoint/put-file-task',
          },
        ],
@@ -137,16 +131,11 @@
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
      return this.selectionList.map(ele => ele.id).join(',');
    },
  },
  mounted() {
    this.loadAirportList();
    // 初始化时强制设置搜索表单默认值并加载数据
    this.$refs.crud.setSearch({ daterange: this.query.daterange });
    this.onLoad(this.page, this.query);
  },
@@ -173,28 +162,49 @@
      this.refreshChange();
      done();
    },
    async handleRowDownload(row) {
      const mediaUrl = this.domainUrl + row.object_key;
      try {
        // 使用 fetch 获取文件，确保触发下载而不是查看
        const response = await fetch(mediaUrl);
        if (!response.ok) throw new Error('文件下载失败');

        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = row.file_name || 'download'; // 设置下载文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url); // 释放 URL 对象

        this.$message({
          type: 'success',
          message: '文件下载成功: ' + row.file_name
        });
      } catch (error) {
        console.error('下载文件时出错:', error);
        this.$message({
          type: 'error',
          message: '下载失败: ' + error.message
        });
      }
    },
    handleRowDelete(row) {
      this.$confirm('确定删除此文件?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return deleteAllFile(row.id);
        })
        .then(() => deleteAllFile(row.id))
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.$message({ type: 'success', message: '删除成功!' });
        })
        .catch(error => {
          console.error('删除文件时出错:', error);
          this.$message({
            type: 'error',
            message: '删除失败，请稍后重试!',
          });
          this.$message({ type: 'error', message: '删除失败，请稍后重试!' });
        });
    },
    rowDel(row) {
@@ -203,40 +213,29 @@
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return deleteAllFile(row.id);
        })
        .then(() => deleteAllFile(row.id))
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          this.$message({ type: 'success', message: '操作成功!' });
        });
    },
    searchReset() {
      // 重置时恢复默认值
      const endDate = new Date();
      const startDate = new Date();
      startDate.setMonth(startDate.getMonth() - 1);
      const defaultStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;
      const defaultEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`;
      this.query = {
        daterange: [defaultStartDate, defaultEndDate]
      };
      this.query = { daterange: [defaultStartDate, defaultEndDate] };
      this.selectedWorkspaceId = null;
      // 更新搜索表单显示
      this.$refs.crud.setSearch({ daterange: this.query.daterange });
      this.onLoad(this.page, this.query);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;

      const airportColumn = this.option.column.find(col => col.prop === 'airportNickname');
      const selectedAirport = airportColumn.dicData.find(item => item.nickname === params.airportNickname);
      this.selectedWorkspaceId = selectedAirport ? selectedAirport.workspace_id : null;

      this.onLoad(this.page, params);
      done();
    },
@@ -261,7 +260,7 @@
    onLoad(page, params = {}) {
      this.loading = true;
      const { daterange } = params;
      let create_time = null; // 修改为 null，避免未定义变量引用
      let create_time = null;
      let end_time = null;

      if (daterange && Array.isArray(daterange) && daterange.length === 2) {
@@ -275,54 +274,41 @@
        }
      }

      let values = {
        ...params,
        ...this.query,
      };
      if (daterange) {
        values.daterange = null;
      }
      let values = { ...params, ...this.query };
      if (daterange) values.daterange = null;

      getMedia(
        page.currentPage,
        page.pageSize,
        this.selectedWorkspaceId || null,
        create_time,
        end_time
      ).then(res => {
        const data = res.data;
        if (data && data.data && data.data.list) {
          this.page.total = data.data.pagination.total;
          this.data = data.data.list.map(item => ({
            job_name: item.job_name,
            file_name: item.file_name,
            create_time: this.formatCreateTime(item.create_time),
            object_key: item.object_key,
            payload: item.payload,
            airportNickname: item.airportNickname,
            id: item.id,
          }));
          this.domainUrl = data.data.list.length > 0 ? data.data.list[0].domain_url : 'http://localhost:2888/manage/resource';
        } else {
          this.data = [];
        }
        this.loading = false;
        this.selectionClear();
        this.$refs.crud.refreshTable();
      }).catch(error => {
        this.loading = false;
        console.error('加载媒体数据时出错:', error);
      });
      getMedia(page.currentPage, page.pageSize, this.selectedWorkspaceId || null, create_time, end_time)
        .then(res => {
          const data = res.data;
          if (data && data.data && data.data.list) {
            this.page.total = data.data.pagination.total;
            this.data = data.data.list.map(item => ({
              job_name: item.job_name,
              file_name: item.file_name,
              create_time: this.formatCreateTime(item.create_time),
              object_key: item.object_key,
              payload: item.payload,
              airportNickname: item.airportNickname,
              id: item.id,
            }));
            this.domainUrl = data.data.list.length > 0 ? data.data.list[0].domain_url : 'http://localhost:2888/manage/resource';
          } else {
            this.data = [];
          }
          this.loading = false;
          this.selectionClear();
          this.$refs.crud.refreshTable();
        })
        .catch(error => {
          this.loading = false;
          console.error('加载媒体数据时出错:', error);
        });
    },
    formatCreateTime(createTime) {
      if (typeof createTime !== 'number' || isNaN(createTime)) {
        return '';
      }
      if (typeof createTime !== 'number' || isNaN(createTime)) return '';
      const timestamp = createTime < 10000000000 ? createTime * 1000 : createTime;
      const date = new Date(timestamp);
      if (isNaN(date.getTime())) {
        return '';
      }
      if (isNaN(date.getTime())) return '';
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
@@ -334,27 +320,19 @@
    handleRowView(row) {
      const mediaUrl = this.domainUrl + row.object_key;
      const mediaType = this.getMediaType(row.object_key);

      if (mediaType === 'image') {
        window.open(mediaUrl, '_blank');
      } else if (mediaType === 'video') {
        window.open(mediaUrl, '_blank');
      if (mediaType === 'image' || mediaType === 'video') {
        window.open(mediaUrl, '_blank'); // 查看功能，打开新窗口
      }
    },
    getMediaType(objectKey) {
      const extension = objectKey.split('.').pop().toLowerCase();
      if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) {
        return 'image';
      } else if (['mp4', 'avi', 'mov'].includes(extension)) {
        return 'video';
      }
      if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) return 'image';
      if (['mp4', 'avi', 'mov'].includes(extension)) return 'video';
      return 'unknown';
    },
    showVideo(url) {
      this.taskBox = true;
      this.taskForm = {
        videoUrl: url,
      };
      this.taskForm = { videoUrl: url };
      this.taskOption = {
        submitBtn: false,
        emptyBtn: false,
@@ -364,10 +342,7 @@
            prop: 'videoUrl',
            type: 'video',
            span: 24,
            props: {
              controls: true,
              autoplay: false,
            },
            props: { controls: true, autoplay: false },
          },
        ],
      };
@@ -379,4 +354,5 @@
};
</script>

<style></style>
<style>
</style>