deviceManager/src/views/recharge/fileExport/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="120px">
      <el-form-item label="文件id：" prop="asyncTaskId">
        <el-input
          v-model.trim="queryParams.asyncTaskId"
          placeholder="请输入文件id"
          clearable
          size="small"
          style="width: 180px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="文件名称：" prop="userName">
        <el-input
          v-model.trim="queryParams.userName"
          placeholder="请输入文件名称"
          clearable
          size="small"
          style="width: 180px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="时间：">
         <el-date-picker
          v-model="dateRange"
          size="small"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item> -->
      <!-- <el-form-item label="文件类型" prop="type">
         <el-select v-model="queryParams.type" placeholder="文件类型" size="small">
          <el-option label="文件" :value="file"/>
        </el-select>
      </el-form-item> -->
      <el-form-item style="margin-left:100px">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <!-- <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['system:admin:export']"
        >导出</el-button> -->
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="adminList">
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="类别" align="center" prop="resultType" />
      <el-table-column label="文件名称" align="center" prop="funcType" />
      <el-table-column label="开始时间" align="center" prop="startTime" />
      <el-table-column label="结束时间" align="center" prop="endTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-if ="scope.row.isSuccess == true"
            size="mini"
            type="text"
            icon="el-icon-bottom"
            @click="handleExport(scope.row)"
          >下载</el-button>
          <span v-if="scope.row.isSuccess == false">
            <span v-if="scope.row.result == '' || scope.row.result == null">文件整理中...请稍后查看</span>
            <span else>{{scope.row.result}}</span>
          </span>

        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { filelist } from "@/api/recharge/fileExport";
import { getFile } from "@/api/system/product";
export default {
  name: "admin",
  data() {
    return {
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 参数表格数据
      adminList: [],
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        type: 1,
        asyncTaskId:undefined,
        // asyncTaskId:'1451438997761200140',
        userName: undefined,
        fileType: "File"
      },
      // 表单参数
      form: {},
    };
  },
  created() {
    if(localStorage.getItem("fileExportId")){
      this.loading = false
      let asyncTaskId = localStorage.getItem("fileExportId")
      this.queryParams.asyncTaskId = asyncTaskId
      this.getList();
      localStorage.removeItem('fileExportId')
    }else{
      this.loading = false
      this.getList();
      // this.$message.error('请从人员信息充值入口进入该页面')
      // setTimeout(() =>{
      //   this.$router.push({path:'personnel'})
      // },1500)
    }

  },
  methods: {
    /** 查询参数列表 */
    getList() {
        this.loading = true;
        filelist(this.addDateRange(this.queryParams,this.dateRange,'section')).then(response => {
            if(response.data.records.length>0){
                this.total = response.data.total;
                let arrBig = response.data.records
                let arr = []
                arr = response.data.records.map(item =>{
                    return {
                        batchNos:[item.result]
                    }
                })
                for(let i=1;i<response.data.records.length; i++){
                    arr[0].batchNos.push(response.data.records[i].result)
                }
                getFile(arr[0]).then(response =>{
                    const reverse = response.data.reverse()
                    for(let i=0;i<response.data.length;i++){
                        arrBig[i].url = reverse[i].url
                    }
                })
                    this.loading = false;
                    this.adminList = arrBig;
                    this.total = response.data.total;
                }
            // let has = response.data.records
            // this.total = response.data.total;
            // if(has.length>0){
            //     let arr = has
            //     let a = []
            //     for(let i = 0;i<has.length;i++){
            //         if(has[i].isSuccess == true){
            //             a.push(has[i].result)
            //         }
            //     }
            //     a = a.map(item =>{
            //         return {
            //             batchNos:[item]
            //         }
            //     })
            //     // for(let i=1;i<response.data.records.length; i++){
            //     //     arr[0].batchNos.push(response.data.records[i].result)
            //     // }
            //     getFile(a).then(response =>{
            //         const reverse = response.data.reverse()
            //         for(let i=0;i<response.data.length;i++){
            //             arr[i] = reverse[i]
            //         }
            //         this.adminList = arr;
            //         this.loading = false;
            //     })

            // }
        }).catch(err =>{
            this.loading = false;
        })
        // filelist(this.addDateRange(this.queryParams,this.dateRange)).then(response => {
        //     // let has = response.data.records
        //     // this.total = response.data.total;
        //     // if(has.length>0){
        //     //     let arr = []
        //     //     for(let i = 0;i<has.length;i++){
        //     //         if(has[i].isSuccess == true){
        //     //             arr.push(has[i].result)
        //     //         }
        //     //     }
        //     //     arr = arr.map(item =>{
        //     //         return {
        //     //             batchNos:[item]
        //     //         }
        //     //     })
        //     //     for(let i=1;i<response.data.records.length; i++){
        //     //         arr[0].batchNos.push(response.data.records[i].result)
        //     //     }
        //     //     getFile(arr[0]).then(response =>{
        //     //         const reverse = response.data.reverse()
        //     //         for(let i=0;i<response.data.length;i++){
        //     //             arr[i] = reverse[i]
        //     //         }
        //     //         this.adminList = arr;
        //     //         this.loading = false;
        //     //     })

        //     // }
        // }).catch(err =>{
        //     this.loading = false;
        // })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.current = 1;
      this.queryParams.startTime = undefined;
      this.queryParams.endTime = undefined;
      this.queryParams.endTime = undefined;
      this.queryParams.type = 1
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport(row) {
        var a = document.createElement("a"); //创建一个<a></a>标签
        a.href = row.url; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
        a.download = row.oriName; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
        a.style.display = "none"; // 障眼法藏起来a标签
        document.body.appendChild(a); // 将a标签追加到文档对象中
        a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
        a.remove();
    },
  }
};
</script>