103 lines
2.2 KiB
Vue
103 lines
2.2 KiB
Vue
<template>
|
|
<div class="ai-download">
|
|
<a @click="onExport">
|
|
<slot slot v-if="isHasSlot"></slot>
|
|
</a>
|
|
<template v-if="!isHasSlot">
|
|
<el-button :disabled="disabled" icon="iconfont iconExported" @click="onExport">导出</el-button>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AiDownload',
|
|
|
|
props: {
|
|
url: {
|
|
type: String,
|
|
default: '',
|
|
required: true
|
|
},
|
|
|
|
timeout: {
|
|
type: Number,
|
|
default: 80000
|
|
},
|
|
|
|
instance: {
|
|
type: Function,
|
|
required: true
|
|
},
|
|
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
|
|
params: {
|
|
type: Object
|
|
},
|
|
|
|
fileName: {
|
|
type: String,
|
|
default: '文件'
|
|
},
|
|
|
|
suffixName: {
|
|
type: String,
|
|
default: 'xls'
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
isHasSlot() {
|
|
return this.$slots.default
|
|
}
|
|
},
|
|
data() {
|
|
return {lock: false}
|
|
},
|
|
methods: {
|
|
onExport() {
|
|
if (this.disabled) {
|
|
return this.$message.error('暂无数据')
|
|
}
|
|
if (this.lock) return this.$message.warn("正在处理中,请勿重复操作!")
|
|
this.lock = true
|
|
this.instance.post(this.url, this.params, {
|
|
responseType: 'blob',
|
|
params: this.params,
|
|
timeout: this.timeout
|
|
}).then(res => {
|
|
if (res?.type == "application/json") {
|
|
let reader = new FileReader()
|
|
reader.readAsText(res, "utf-8")
|
|
reader.onload = e => {
|
|
if (e.target.readyState === 2) {
|
|
let ret = JSON.parse(e.target.result)
|
|
if (ret?.code == 0) {
|
|
this.$message.success(ret.msg)
|
|
} else this.$message.error(ret.msg)
|
|
}
|
|
}
|
|
} else {
|
|
const link = document.createElement('a')
|
|
let blob = new Blob([res], {type: res.type})
|
|
link.style.display = 'none'
|
|
link.href = URL.createObjectURL(blob)
|
|
link.setAttribute('download', this.fileName + '.' + this.suffixName)
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
}
|
|
}).finally(() => this.lock = false)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|