cac-fronted/src/views/dataTransfer/downrecord/index.vue

<template>
  <div class="recordBoxdown">
    <div class="reportHead">
      <h3>下载记录</h3>
    </div>
    <div class="page-body">
      <div class="title">
        <span>选择服务器：</span>
        <el-select v-model="serverVal" @change="changeServer">
          <el-option
            v-for="item in serverOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="zsbTableBox">
        <el-table
          :data="recordData"
          style="width: 100%"
          height="calc(100% - 0px)"
          v-loading="recordLoading"
        >
          <el-table-column label="服务器名称" prop="server">
            <template slot-scope="scope">
              <span>{{ scope.row.server.name }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="id" prop="id">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="remotePath" prop="remotePath">
            <template slot-scope="scope">
              <span>{{ scope.row.remotePath }}</span>
            </template>
          </el-table-column>

          <!-- <el-table-column label="path" prop="path">
            <template slot-scope="scope">
              <span>{{ scope.row.path }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="filename" prop="filename">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="downFile(scope.row)"
                class="buttonText"
                >{{ scope.row.filename }}</el-button
              >
              <!-- <span>{{ scope.row.filename }}</span> -->
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageNation">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[20, 40, 100]"
            layout="sizes, prev, pager, next, jumper,total"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { DownloadAllApi, serverlistApi } from "@/utils/api/index";
// import addzsbDialog from "./components/addzsbDialog";
export default {
  name: "record",
  components: {},
  data() {
    return {
      recordData: [],
      recordLoading: false,
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      serverOption: [{ id: -1, name: "全部" }], //服务器名称
      serverVal: "",
    };
  },
  created() {
    this.getServerList();
  },
  mounted() {},
  watch: {},
  methods: {
    //获取服务器
    getServerList() {
      serverlistApi()
        .then((res) => {
          console.log(res);
          this.serverOption = this.serverOption.concat(res.data);
          this.serverVal = this.serverOption[0].id;
          this.getdownAll();
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //切换服务器
    //选中的值获取tablename
    changeServer(val) {
      console.log(val);
      let selectedOption = this.serverOption.find((item) => item.id === val);
      if (selectedOption) {
        // 如果找到了匹配的项，访问它的 tablename
        this.serverVal = selectedOption.id;
        console.log(this.serverVal); // 或者根据你的需求使用 tablename
        this.getdownAll();
      }
    },
    getdownAll() {
      console.log(this.serverVal);
      let params = { pageNum: this.page, pageSize: this.pageSize };
      if (this.serverVal !== -1) {
        params.configId = this.serverVal;
      }
      DownloadAllApi(params)
        .then((res) => {
          console.log(res);
          this.recordData = res.data.content;
          this.total = res.data.totalPages;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //下载文件
    downFile(row) {
      // 创建一个新的a标签元素
      const a = document.createElement("a");
      // 设置a标签的href属性为文件的URL
      a.href = row.path;
      console.log(a.href);
      // 设置文件名（可选，取决于服务器配置）
      a.download = row.filename; // 你希望保存的文件名
      // 触发点击事件
      document.body.appendChild(a);
      a.click();
      // 然后移除a标签
      document.body.removeChild(a);
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.recordData = [];
      this.getdownAll();
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.recordData = [];
      this.getdownAll();
    },
  },
};
</script>
<style lang="less">
.recordBoxdown {
  width: 100%;
  height: 100%;
  .page-body {
    width: calc(100% - 24px);
    height: calc(100% - 74px);
    padding: 12px;
    background: #eee;
    .title {
      display: flex;
      align-items: center;
      span {
        color: #000;
        font-size: 14px;
      }
    }
    .zsbTableBox {
      margin-top: 8px;
      height: calc(100% - 72px);
      box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
      .pageNation {
        margin-top: 6px;
        display: flex;
        justify-content: flex-end;
      }
      .buttonText {
        cursor: pointer;
        white-space: pre-wrap;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>