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"
          @click="handleClearRecords"
        >
          清空记录
        </el-button>
      </div>
      <el-divider>
        <el-tag type="info">2026-05-13</el-tag>
      </el-divider>
      <el-table :data="fileList" :show-header="false">
        <el-table-column prop="name" 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" />
          </template>
        </el-table-column>
        <el-table-column
          prop="time"
          label="上传时间"
          width="120"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="status"
          label="上传状态"
          width="90"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tag>
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-view"
              @click="handleOpen(scope.row)"
            >
              打开
            </el-button>
            <el-button
              type="text"
              icon="el-icon-folder"
              @click="handleOpenPath(scope.row)"
            >
              打开位置
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "TransferManager",
  data() {
    return {
      // 模拟数据（实际项目中 filePath 应为网络可访问地址）
      fileList: [
        {
          id: 1,
          name: "1633500241136.mp4",
          size: "17.92M",
          progress: 100,
          time: "14:31",
          status: "上传成功",
          // 浏览器环境：必须使用网络URL，不能使用本地D盘路径
          filePath: "https://www.w3school.com.cn/i/movie.mp4",
          folderPath: "D:/手机照片/风景宜人",
        },
        {
          id: 2,
          name: "TG-2023-01-21-215030828...",
          size: "11.86M",
          progress: 100,
          time: "14:31",
          status: "上传成功",
          filePath: "D:/手机照片/风景宜人/1633500241136.mp4", // 文件完整路径（用于预览）
          folderPath: "D:/手机照片/风景宜人",
        },
        {
          id: 3,
          name: "VID_20230121_200603.mp4",
          size: "10.02M",
          progress: 100,
          time: "14:16",
          status: "上传成功",
          filePath: "D:/手机照片/风景宜人/1633500241136.mp4", // 文件完整路径（用于预览）
          folderPath: "D:/手机照片/风景宜人",
        },
      ],
    };
  },
  methods: {
    // 清空记录
    handleClearRecords() {
      this.$modal
        .confirm("是否要清除本地传输记录?")
        .then(() => {
          this.fileList = [];
          this.$modal.msgSuccess("清空成功");
        })
        .catch(() => {});
    },
    // 打开视频文件
    // 注意：浏览器安全限制禁止直接访问本地文件系统
    handleOpen(row) {
      window.open(row.filePath, "_blank");
    },
    // 打开文件所在文件夹
    // 注意：浏览器安全限制禁止直接访问本地文件系统
    handleOpenPath(row) {
      // const link = document.createElement("a");
      // link.href = row.filePath;
      // link.download = row.name;
      // link.click();
      // 4. 创建a标签模拟点击下载
      const link = document.createElement("a");
      link.href = row.filePath;
      link.download = row.name; // 自定义文件名 + 后缀
      document.body.appendChild(link);
      link.click();
      // 5. 释放内存
      document.body.removeChild(link);
      window.URL.revokeObjectURL(downloadUrl);
      // 弹窗引导操作
      this.$message.info(
        "文件已开始下载，请在浏览器下载列表右键打开文件所在文件夹"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.video-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  background: #655dd4;
  color: #fff;
  margin: 0 auto;
}
</style>