使用场景:
- 点击按钮, 下载指定模板A;
入参id空,调取接口下载; - 点击按钮,下载table表格中的数据
入参当前页面的id,下载table数据 - 点击上传,上传指定模板A, 并渲染数据到table表格中
入参id,上传模板
接口使用安装axios:
npm install axios -S
项目完整版代码来咯
<template>
<el-dialog
title="上传下载"
v-loading="DataLoading"
width="40%"
destroy-on-close
>
<el-header>
<div class="left-panel"></div>
<div class="right-panel">
<div class="left-panel-search">
<el-button type="text" size="small" @click="downloadempalte"
>下载模板文件</el-button
>
<!-- 上传 -->
<el-upload
class="upload-demo"
ref="upload"
accept=".csv, .xlsx, .xls"
action="#"
:multiple="false"
:show-file-list="false"
:limit="1"
:auto-upload="false"
:on-change="handleChange"
>
<el-button type="primary" size="small">上传新渠道</el-button>
</el-upload>
<el-button type="primary" size="small" @click="downloadTableData"
>下载列表</el-button
>
</div>
</div>
</el-header>
<div class="container">
<el-scrollbar class="scrolbar-wrapper">
<el-table
id="out-table"
ref="table"
:data="apiObj"
stripe
remoteSort
remoteFilter
>
<el-table-column
label="序号"
type="index"
width="100"
></el-table-column>
<el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="参数" prop="param"></el-table-column>
<el-table-column
label="链接"
fixed="right"
align="center"
width="140"
>
</el-table-column>
</el-table>
</el-scrollbar>
</div>
</el-dialog>
</template>
<script>
const axios = require('axios')
export default {
data() {
return {
id: this.$query.id,
apiObj: [],
DataLoading: false,
flag: 0, // 0 false, 接口不报提示;1 报提示
}
},
created() {
this.getChannelLink()
},
methods: {
// 渠道列表
getChannelLink(flag, msg) {
const tempData = {
id: this.id,
}
this.$api.channelList(tempData).then((res) => {
if (res.code == '2000') {
this.DataLoading = false
this.apiObj = res.data.rows
if (flag) {
this.$message({
type: 'success',
message: msg,
})
}
}
})
},
// 下载模板
downloadempalte() {
const temp = {
id: '',
}
axios({
method: 'post',
url: 'http://fls-mdp-xlink-stg.paic.com.cn/xlink-cms-sit/cms/project/channel/getTemplate',
data: temp,
headers: {
'Content-Type': 'application/json;charset=UTF-8',
// Authorization: getLocalData("TOKEN"),
},
responseType: 'blob',
}).then(function (response) {
// 创建a标签
const a = document.createElement('a')
// 初始化a标签
let href = window.URL.createObjectURL(response.data)
a.href = href
// 计算文件名
let filenema = response.headers['content-disposition']
.split('filename=')[1]
.split('.xlsx')[0]
// 文件名转码
filenema = decodeURI(escape(filenema))
a.download = decodeURIComponent(filenema)
// 触发点击并一处
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
window.URL.revokeObjectURL(href)
})
},
// 下载table列表
downloadTableData() {
const temp = {
id: this.id,
}
axios({
method: 'post',
url: 'http://fls-mdp-xlink-stg.paic.com.cn/xlink-cms-sit/cms/project/channel/getTemplate',
data: temp,
headers: {
'Content-Type': 'application/json;charset=UTF-8',
// Authorization: getLocalData("TOKEN"),
},
responseType: 'blob',
}).then(function (response) {
// 创建a标签
const a = document.createElement('a')
// 初始化a标签
let href = window.URL.createObjectURL(response.data)
console.log('href', href)
a.href = href
// 计算文件名
let filenema = response.headers['content-disposition']
.split('filename=')[1]
.split('.xlsx')[0]
console.log('filename', filenema)
// 文件名转码
filenema = decodeURI(escape(filenema))
a.download = decodeURIComponent(filenema)
// 触发点击并一处
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
window.URL.revokeObjectURL(href)
})
},
// 上传渠道文件
handleChange(file) {
this.$refs.upload.clearFiles()
this.fileTemp = file.raw
if (this.fileTemp) {
if (
this.fileTemp.type ==
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
this.fileTemp.type == 'application/vnd.ms-excel'
) {
let params = new FormData()
params.append('file', this.fileTemp)
params.append('id', this.id)
let uploadURL =
'http://fls-mdp-xlink-stg.paic.com.cn/xlink-cms-sit/cms/project/channel/upload'
axios({
method: 'post',
url: `${uploadURL}/cms/project/channel/upload`,
data: params,
headers: {
'Content-Type': 'application/json;charset=UTF-8',
// Authorization: getLocalData("TOKEN"),
},
headerType: 'multipart/form-data',
}).then((res) => {
if (res.data.code == '2000') {
this.DataLoading = true
this.getChannelLink(1, res.data.msg) //1 调取接口要提示语
} else {
this.$message({
type: 'error',
message: res.data.msg,
})
}
})
} else {
this.$message({
type: 'warning',
message: '文件格式不正确,请参考模板文件填写!',
})
}
} else {
this.$message({
type: 'warning',
message: '请上传附件!',
})
}
},
/**
* 获取localStorage,[token],兼容做乾坤子应用时取值时会带上 ”“ 的问题
*/
// getLocalData(table){
// var data = localStorage.getItem(token);
// return data ? data.replace(/\"/g,'') : null
// }
},
}
</script>
<style scoped>
.container {
height: 500px;
overflow: auto;
}
.scrolbar-wrapper {
height: 500px;
}
.upload-demo {
display: inline-block;
margin: 0 20px;
}
</style>