目录
定义下载方法js
let validList = [
{
key: 'bet-1',
label: '<',
},
{
key: 'bet-2',
label: '<=',
},
]
let after_condition = false //判断当前之前所有的条件分支是否有条件
export default {
//svg矢量图
isExternal (path) {
return /^(https?:|mailto:|tel:)/.test(path)
},
//将数组转换成字符串
arrToStr (arr) {
return arr.map(item => { return item.name }).join(", ")
},
toggleClass (arr, elem, key) {
return arr.some(item => {
return (item[key] ?? undefined) === (elem[key] ?? null)
});
},
removeEle (arr, elem, key) {
let arrNew = _.cloneDeep(arr)
let includesIndex;
arrNew.map((item, index) => {
if (item[key] == elem[key]) {
includesIndex = index
}
});
arrNew.splice(includesIndex, 1);
return arrNew
},
toChecked (arr, elem, key) {
let arrNew = _.cloneDeep(arr)
let isIncludes = this.toggleClass(arr, elem, key);
let arrNewRemove = this.removeEle(arr, elem, key);
!isIncludes ? arrNew.push(elem) : (arrNew = _.cloneDeep(arrNewRemove));
return arrNew
},
toRadioed (arr, elem, key) {
let arrNew = []
let isIncludes = this.toggleClass(arr, elem, key);
let arrNewRemove = this.removeEle(arr, elem, key);
!isIncludes ? arrNew.push(elem) : (arrNew = _.cloneDeep(arrNewRemove));
return arrNew
},
excel (data, fileName) {
this.download(data, fileName, 'application/vnd.ms-excel')
},
download (data, fileName, mineType) {
let blob = new Blob([data], {
type: mineType,
})
let href = window.URL.createObjectURL(blob) //创建下载的链接
let downloadElement = document.createElement('a')
downloadElement.setAttribute('download', fileName)
downloadElement.href = href
document.body.appendChild(downloadElement)
downloadElement.click() //点击下载
document.body.removeChild(downloadElement) //下载完成移除元素
window.URL.revokeObjectURL(href) //释放掉blob对象
},
}
在main.js里面全局引入
import func from '@/utils/export'
Vue.prototype.$func = func;
封装组件携带参数
supplierExport (params) {
return request({ url: '/archives/api/provider/export', method: 'get', responseType: 'blob', params })
},
在子组件(不需要动,直接复制)
<template>
<div class="ImportExport">
<el-upload class="uploadButton" :action="actionUrl.importUrl" :limit="1" :on-error="handleError" :on-success="handleUpload" :before-upload="beforeUpload" :show-file-list="false">
<el-button icon="el-icon-download" type="success">导入</el-button>
</el-upload>
<el-button icon="el-icon-download" @click="exportMoudle" type="warning">导出</el-button>
</div>
</template>
<script>
import { Message } from 'element-ui'
export default {
props: {
postExport: Object,
actionUrl: Object,
brandExportForm: Object
},
methods: {
//导出
async exportMoudle () {
//导出接口 actionUrl.exportUrl
//如果要传参,就判断一下,通常用于在搜索之后,把搜索出来的导出
if (this.brandExportForm.exp) {
try {
await this.$httpAPI[this.actionUrl.exportUrl](this.brandExportForm).then(res => {
if (res.size > 0) {
this.$func.excel(res, this.actionUrl.name)
} else {
Message.warning('后台数据为空')
}
})
} catch (e) { }
} else {
console.log('正常导出');
try {
await this.$httpAPI[this.actionUrl.exportUrl]().then(res => {
if (res.size > 0) {
console.log(this.$func);
this.$func.excel(res, this.actionUrl.name)
} else {
Message.warning('后台数据为空')
}
})
} catch (e) { }
}
},
beforeUpload (file) {
const FILE_NAME = file.name
if (FILE_NAME.substring(FILE_NAME.lastIndexOf('.')) !== '.xls' && FILE_NAME.substring(FILE_NAME.lastIndexOf('.')) !== '.xlsx') {
Message.warning('仅支持.xls和.xlsx文件')
return false
}
},
handleError (error, file) {
console.log(456, error, file)
// Message.error('导入失败,格式不正确')
},
handleUpload (response) {
console.log(response);
if (response.code != 200) {
Message.error(response.message)
} else {
Message.success('导入成功')
this.$emit('getImport', '导入成功')
}
},
},
}
</script>
<style lang="scss">
.ImportExport {
display: inline-block;
margin-left: 10px;
.uploadButton {
display: inline-block;
margin-right: 10px;
}
}
</style>
在使用页面---
1、引入组件
html
<import-export @getImport="getImport" :brandExportForm="supplierForm" :postExport="exportform" :actionUrl="actionUrl"></import-export>
postExport brandExportForm 导入或导出的字段,在data中定义{}
-------------------------------------------------------------------
js
import ImportExport from '@/components/ImportExport/index.vue'
2、功能
// 导入
getImport (val) {
console.log(val);
//更新列表
},
//导出
不需要再单独写事件,在组件中已经有了这个事件
// 下载模板
Downloading () {
window.location.href ='链接'
}
扫描二维码关注公众号,回复:
17017733 查看本文章