266 lines
6.9 KiB
Vue
266 lines
6.9 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 导入模态窗 -->
|
||
<el-dialog
|
||
v-if="visible"
|
||
v-dragDialogWidth
|
||
class="dialog"
|
||
width="400px"
|
||
:visible="visible"
|
||
title="导入文件"
|
||
:close-on-click-modal="false"
|
||
append-to-body
|
||
@close="onClose"
|
||
>
|
||
<el-upload
|
||
ref="importfile"
|
||
multiple
|
||
drag
|
||
:action="action"
|
||
:headers="headers"
|
||
name="file"
|
||
:file-list="fileList"
|
||
:accept="accept"
|
||
:auto-upload="autoUpload"
|
||
:limit="limit"
|
||
:before-upload="beforeUpload"
|
||
:on-success="onSuccess"
|
||
:on-remove="onRemove"
|
||
:on-preview="onPreview"
|
||
:on-exceed="onExceed"
|
||
:on-error="onError"
|
||
:show-file-list="true"
|
||
>
|
||
<i class="el-icon-upload" style="color: #3399ff" />
|
||
<div class="el-upload__text">点击或拖拽上传文件</div>
|
||
</el-upload>
|
||
<div slot="footer" class="dialog-footer">
|
||
<slot />
|
||
<el-button
|
||
v-if="manualUpload"
|
||
type="primary"
|
||
size="mini"
|
||
class="common-button-default"
|
||
@click="ManualUpload"
|
||
>
|
||
提交
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 导入失败-->
|
||
<el-dialog
|
||
:visible.sync="importFailed"
|
||
:close-on-click-modal="false"
|
||
width="400px"
|
||
append-to-body
|
||
>
|
||
<p slot="title" style="color:#f60">
|
||
<span>导入失败</span>
|
||
</p>
|
||
<div style="max-height: 300px;overflow: auto;padding: 10px 0;">
|
||
<p v-html="importForm.content" />
|
||
</div>
|
||
<div slot="footer" class="demo-drawer-footer">
|
||
<el-button
|
||
type="primary"
|
||
round
|
||
class="common-button-default"
|
||
icon="el-icon-check"
|
||
@click="importFailed = false"
|
||
>
|
||
确认
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Import',
|
||
props: {
|
||
accept: {
|
||
type: String,
|
||
default: '.pdf, .PDF, .doc, .DOC, .docx, .DOCX, .ppt, .PPT, .pptx, .PPTX, .xls, .XLS, .xlsx, .XLSX, .pdg, .PDG'
|
||
},
|
||
action: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
visible: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
size: {
|
||
type: Number,
|
||
default: 200
|
||
},
|
||
// 是否自动上传
|
||
autoUpload: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 手动上传按钮
|
||
manualUpload: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
limit: {
|
||
type: Number,
|
||
default: 8
|
||
},
|
||
ids: {
|
||
required: false,
|
||
type: String,
|
||
default: ''
|
||
},
|
||
names: {
|
||
required: false,
|
||
type: String,
|
||
default: ''
|
||
},
|
||
},
|
||
data () {
|
||
return {
|
||
headers: {
|
||
token: JSON.parse(localStorage.getItem('userInfo')).token
|
||
},
|
||
importFailed: false,
|
||
importForm: {},
|
||
fileList: [],
|
||
}
|
||
},
|
||
created () {
|
||
this.initFileList()
|
||
},
|
||
methods: {
|
||
initFileList () {
|
||
if (this.ids && this.ids !== '' && this.names && this.names !== '') {
|
||
const fileList = []
|
||
const idArr = this.ids.split(',')
|
||
const nameArr = this.names.split(',')
|
||
for (let i = 0; i < idArr.length; i++) {
|
||
fileList.push({
|
||
id: idArr[i],
|
||
name: nameArr[i]
|
||
})
|
||
}
|
||
this.fileList = fileList
|
||
} else {
|
||
this.fileList = []
|
||
}
|
||
},
|
||
onClose () {
|
||
this.$emit('update:visible', false)
|
||
},
|
||
// 导入按钮 上传之前的钩子
|
||
beforeUpload (file) {
|
||
const fileName = file.name
|
||
const fileSuffix = fileName.slice(fileName.lastIndexOf('.') + 1)
|
||
// 判断上传文件格式
|
||
const acceptArr = this.accept.split(',').map(type => type.slice(type.lastIndexOf('.') + 1))
|
||
// 判断上传文件格式
|
||
if (!acceptArr.includes(fileSuffix)) {
|
||
this.$message({
|
||
dangerouslyUseHTMLString: true,
|
||
message: <div style="word-break: break-all;;color: #F56C6C">文件{file.name}格式不正确，请上传{acceptArr.join('、')}文件</div>,
|
||
type: 'error'
|
||
})
|
||
return false
|
||
}
|
||
// 判断文件上传大小
|
||
if (file.size / 1024 / 1024 > this.size) {// eslint-disable-line
|
||
this.$message.error('文件' + file.name + `超过${this.size}M`)
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
// 导入标准数据成功后执行
|
||
onSuccess (response, file, fileList) {
|
||
if (response.ok) {
|
||
const fileObj = {
|
||
id: file.response.data.id,
|
||
name: file.response.data.name
|
||
}
|
||
let ids;
|
||
let names;
|
||
if (this.ids && this.ids.length > 0) {
|
||
ids = this.ids + ',' + fileObj.id
|
||
names = this.names + ',' + fileObj.name
|
||
} else {
|
||
ids = fileObj.id
|
||
names = fileObj.name
|
||
}
|
||
this.$set(this.fileList, this.fileList.length, fileObj)
|
||
this.$emit('update:ids', ids)
|
||
this.$emit('update:names', names)
|
||
|
||
this.$emit('update:visible', false)
|
||
this.$emit('onSuccess')
|
||
this.$message({
|
||
message: response.message || response.data,
|
||
type: 'success'
|
||
})
|
||
} else {
|
||
this.importFailed = true
|
||
this.importForm.content = response.message
|
||
}
|
||
},
|
||
onRemove (file, fileList) {
|
||
const ids = fileList
|
||
.reduce((init, file) => init + ',' + (file.id || file.response.data.id), '')
|
||
.replace(/^,|,$/g, '')
|
||
const names = fileList
|
||
.reduce((init, file) => init + ',' + (file.name || file.response.data.name), '')
|
||
.replace(/^,|,$/g, '')
|
||
this.fileList = fileList.map(file => ({
|
||
id: file.id || file.response.data.id,
|
||
name: file.name
|
||
}))
|
||
this.$emit('update:ids', ids)
|
||
this.$emit('update:names', names)
|
||
this.$emit('onRemove')
|
||
},
|
||
onPreview (file) {
|
||
const id = file.id || file.response.data.id
|
||
this.$preview(id)
|
||
},
|
||
onExceed (files, fileList) {
|
||
this.$message.warning(`当前限制上传 1 个文件，本次上传了 ${files.length} 个文件，共上传了 ${files.length + fileList.length} 个文件`);
|
||
},
|
||
onError (err, file, fileList) {
|
||
const ids = fileList
|
||
.reduce((init, file) => init + ',' + (file.id || file.response.data.id), '')
|
||
.replace(/^,|,$/g, '')
|
||
const names = fileList
|
||
.reduce((init, file) => init + ',' + (file.name || file.response.data.name), '')
|
||
.replace(/^,|,$/g, '')
|
||
this.fileList = fileList.map(file => ({
|
||
id: file.id || file.response.data.id,
|
||
name: file.name
|
||
}))
|
||
this.$emit('update:ids', ids)
|
||
this.$emit('update:names', names)
|
||
this.$emit('onError')
|
||
this.$message.error('上传失败')
|
||
},
|
||
ManualUpload () {
|
||
this.$refs.importfile.submit();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
/deep/ .el-upload-dragger{
|
||
width: 100% !important;
|
||
}
|
||
/deep/ .el-upload{
|
||
width: 100% !important;
|
||
|
||
}
|
||
/deep/ .el-dialog__body {
|
||
padding: 10px 20px !important;
|
||
}
|
||
</style>
|