下载模板表格

点击导出时会自动下载一个导出模板

点击导出按钮的代码

<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
 v-hasPermi="['production:reportWork:export']">导出 
</el-button>

• 当点击导出按钮时，会触发handleExport函数；

handleExport(){
this.dowmload(){
"production/product/export",{},
`报工导出_$(new Date().getTime()}.xlsx`
}
}

• 当handleExport函数被触发时，就会执行download下载函数 ；
  • 三个参数：后台给的下载路径，下载时传入的参数，下载的文件名和后缀名；

这个download

我一直好奇，这个download函数是怎么运行的，后来发现这也是一个封装的一个download，存放在src/utils/request.js里面的;

• 这里面定义了一个通用方法；

export function download(url, params, filename) 
}

• 把download全局注册,需要写在main.js中；

import {download} from "@utils/requesut"

 Vue.prototype.download = download

• 给他上传三个参数，路径,参数，文件名称，这个函数就会执行一系列的操作。

时间戳的转换需要更加一步学习

• 获取时间戳的方法

var times = new Date().getTime();//返回单位数值是毫秒

？？？？

• 当获取的时间后，如何将其转换为年月日的格式，

点击导入按钮时，出现对话框

导入按钮的写法

<el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
   v-hasPermi="['production:reportWork:import']">导入
 </el-button>

• @也就是v-on是监听事件，监听click点击事件；
  • 如果点击了，则触发handleImport函数;

  handleExport(){
  
  }
  

点击对话框里的下载模板

• 对话框里的下载模板和导出函数的的功能是一模一样的，都是点击一下，下载一个相应的表格

• 点击下载模板时，会触发exportTemplate（）函数；

• 在exportTemplate函数里面执行download函数;

  • 在download函数里面上传三个参数；
    • 后台下载路径；
    • 下载时传入的参数；
    • 下载出来的文件名和后缀名。

// 下载模板操作
     exportTemplate() {
    this.download(
  "/production/workOrder/exportTemplate", {},
    `报工模板_template_${new Date().getTime()}.xlsx`
                );
            },