HIYL-localization-web/src/views/utility/index.vue

<template>
  <div class="app-container">
    <!-- 传输管理器卡片 -->
    <el-card>
      <!-- 头部：标题 + 清空按钮 -->
      <div slot="header">
        <span>传输管理器</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          icon="el-icon-delete"
          @click="handleClearRecords"
        >
          清空记录
        </el-button>
      </div>
      <div v-for="(dateItem, index) in transferDataList" :key="index">
        <!-- 日期分割线 -->
        <el-divider>
          <el-tag type="info">{{ dateItem.date }}</el-tag>
        </el-divider>
        <!-- 传输记录表格 -->
        <el-table :data="dateItem.list" :show-header="false">
          <el-table-column label="缩略图标" width="80" align="center">
            <template slot-scope="scope">
              <div class="video-thumb">
                <i class="el-icon-video-camera" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="文件名" show-overflow-tooltip />
          <el-table-column
            prop="size"
            label="文件大小"
            width="120"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="progress"
            label="上传进度"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <el-progress :percentage="scope.row.progress" stroke-width="8" />
            </template>
          </el-table-column>
          <el-table-column
            prop="time"
            label="上传时间"
            width="100"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="status"
            label="上传状态"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === '上传成功' ? 'success' : 'warning'"
              >
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                icon="el-icon-view"
                @click="handleOpenFile(scope.row)"
              >
                打开
              </el-button>
              <el-button
                type="text"
                icon="el-icon-folder-opened"
                @click="handleOpenFolder(scope.row)"
              >
                打开位置
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "Utility",
  data() {
    return {
      // 最终渲染数据：数组结构，包含日期 + 文件列表
      transferDataList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 查询列表
    getList() {
      this.loading = true;
      // listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
      //   (response) => {
      this.transferDataList = [
        {
          date: "2026-05-13",
          list: [
            {
              id: 1,
              name: "1633500241136.mp4",
              size: "17.92M",
              progress: 100,
              time: "14:31",
              status: "上传成功",
              fileUrl: "https://www.w3school.com.cn/i/movie.mp4",
            },
            {
              id: 2,
              name: "TG-2023-01-21-215030828.mp4",
              size: "11.86M",
              progress: 100,
              time: "14:31",
              status: "上传成功",
              fileUrl: "https://www.w3school.com.cn/i/movie.mp4",
            },
            {
              id: 3,
              name: "VID_20230121_200603.mp4",
              size: "10.02M",
              progress: 100,
              time: "14:16",
              status: "上传成功",
              fileUrl: "https://www.w3school.com.cn/i/movie.mp4",
            },
          ],
        },
      ];
      //     this.total = response.total;
      //     this.loading = false;
      //   }
      // );
    },
    // 清空所有传输记录
    handleClearRecords() {
      this.$modal
        .confirm("是否要清除本地传输记录?")
        .then(() => {
          this.transferDataList = [];
          this.$modal.msgSuccess("清空成功");
        })
        .catch(() => {});
    },
    // 打开文件
    handleOpenFile(row) {
      if (!row.fileUrl) {
        this.$modal.msgWarning("文件地址无效，无法打开");
        return;
      }
      window.open(row.fileUrl, "_blank");
    },
    // 打开文件位置（下载）
    handleOpenFolder(row) {
      this.$modal.msg("浏览器安全限制：请下载后在下载列表打开文件夹");
      const a = document.createElement("a");
      a.href = row.fileUrl;
      a.download = row.name;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
  },
};
</script>

<style lang="scss" scoped>
.video-thumb {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: #655dd4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0 auto;
}
</style>