neim/neim-ui/src/views/manualEntry/projectEvolveEntry/index.vue

<template>
  <el-card class="box-card">
    <div class="operateDiv">
      <el-button size="medium" icon="el-icon-download" @click="frontDownload">下载模板</el-button>
    </div>
    <div style="margin-top: .5% ">
      <el-table
        :data="tableData.slice((page.currentPage-1)*page.pageSize,page.currentPage*page.pageSize)"
        border
        style="width: 100%">
        <el-table-column
          prop="name" align="center"
          label="项目名称"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button icon="el-icon-download" @click="handleClick(scope.row)" type="text" size="small">下载最新进展</el-button>
            <el-button icon="el-icon-upload2" @click="handleClick(scope.row)" type="text" size="small">上传进展</el-button>
            <el-button icon="el-icon-upload2" @click="handleClick(scope.row)" type="text" size="small">上传附件</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page=page.currentPage
          :page-sizes="[10, 15, 30, 50]"
          :page-size=page.pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total=page.total>
        </el-pagination>
      </div>
    </div>
  </el-card>
</template>

<script>
import {getProjectInfo} from "@/api/biz/manualEntry/projectEvolveEntry";

export default {
  // 项目进展录入
  name: "index",
  data(){
    return{
      tableData:[],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
    }
  },
  mounted() {
    this.initInfo()
  },
  methods: {
    initInfo() {
      getProjectInfo().then(res=>{
        console.log(res.data)
        this.tableData = res.data
        this.page.total = this.tableData.length
      }).catch(err=>{
        console.log('获取项目信息异常：'+err)
      })
    },
    handleClick(row) {
      console.log(row);
    },
    /*pageSize改变*/
    handleSizeChange(val) {
      this.page.pageSize = val
      this.page.currentPage = 1
    },
    /*currentPage改变*/
    handleCurrentChange(val) {
      this.page.currentPage = val
    },
    frontDownload() {
      let a = document.createElement("a"); //创建一个<a></a>标签
      a.href = "/static/模板.xls"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
      a.download = "模板（新）.xls"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
      a.style.display = "none"; // 障眼法藏起来a标签
      document.body.appendChild(a); // 将a标签追加到文档对象中
      a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove(); // 一次性的，用完就删除a标签
    }
  }

}
</script>

<style scoped>
.operateDiv{
  display: flex;
}
.block{
  float: right;
  margin: 1%;
}
</style>