|
|
|
@ -11,15 +11,16 @@ |
|
|
|
<div v-if="isShow01" class="step-content step-upload"> |
|
|
|
<el-upload |
|
|
|
ref="upload" |
|
|
|
:limit="1" |
|
|
|
:on-exceed="handleExceed" |
|
|
|
:headers="headers" |
|
|
|
:before-upload="beforeUpload" |
|
|
|
:before-remove="beforeRemove" |
|
|
|
:auto-upload="false" |
|
|
|
:on-success="handleSuccess" |
|
|
|
:on-error="handleError" |
|
|
|
:on-remove="handleRemove" |
|
|
|
:on-change="changeFile" |
|
|
|
accept=".zip" |
|
|
|
:file-list="fileList" |
|
|
|
:action="fileUploadApi + '?name=' + name" |
|
|
|
> |
|
|
|
<div class="upload-zip"><i class="el-icon-upload2" />选择文件</div> |
|
|
|
@ -84,6 +85,7 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import { getToken } from '@/utils/auth' |
|
|
|
import detail from '../module/detail.vue' |
|
|
|
export default { |
|
|
|
name: 'DataImport', |
|
|
|
@ -91,7 +93,9 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
name: '', |
|
|
|
|
|
|
|
headers: { |
|
|
|
Authorization: getToken() |
|
|
|
}, |
|
|
|
deleteVisible: false, |
|
|
|
form: { |
|
|
|
file: true, |
|
|
|
@ -101,7 +105,8 @@ export default { |
|
|
|
}, |
|
|
|
isShow01: true, |
|
|
|
isShow02: false, |
|
|
|
isShow03: false |
|
|
|
isShow03: false, |
|
|
|
fileList: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -114,10 +119,15 @@ export default { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleStep01() { |
|
|
|
if (this.fileList.length === 0) { |
|
|
|
this.$message.warning('请上传相关文件 ！') |
|
|
|
return |
|
|
|
} |
|
|
|
this.isShow01 = false |
|
|
|
this.isShow02 = true |
|
|
|
}, |
|
|
|
handleReturn02() { |
|
|
|
this.fileList = [] |
|
|
|
this.isShow01 = true |
|
|
|
this.isShow02 = false |
|
|
|
this.isShow03 = false |
|
|
|
@ -132,36 +142,32 @@ export default { |
|
|
|
this.isShow02 = true |
|
|
|
this.isShow03 = false |
|
|
|
}, |
|
|
|
submitForm(formName) { |
|
|
|
this.$refs[formName].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
alert('submit!') |
|
|
|
} else { |
|
|
|
console.log('error submit!!') |
|
|
|
return false |
|
|
|
// 文件状态改变时的钩子 |
|
|
|
changeFile(file, fileList) { |
|
|
|
if (fileList.length > 1) { |
|
|
|
fileList.splice(0, 1) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 上传文件 |
|
|
|
upload() { |
|
|
|
this.fileList = fileList |
|
|
|
}, |
|
|
|
// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传 |
|
|
|
beforeUpload(file) { |
|
|
|
}, |
|
|
|
handleRemove(file, fileList) { |
|
|
|
console.log(file, fileList) |
|
|
|
}, |
|
|
|
handleExceed(files, fileList) { |
|
|
|
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`) |
|
|
|
const sizeLimit = file.size / 1024 / 1024 > 10 |
|
|
|
if (sizeLimit) { |
|
|
|
this.$message.warning('上传文件大小不能超过 10MB!') |
|
|
|
} |
|
|
|
const fileFamart = file.name.split('.')[file.name.split('.').length - 1] |
|
|
|
if (fileFamart !== 'zip') { |
|
|
|
this.$message.warning('必须上传zip格式的文件!') |
|
|
|
} |
|
|
|
return !sizeLimit && fileFamart === 'zip' |
|
|
|
}, |
|
|
|
beforeRemove(file, fileList) { |
|
|
|
return this.$confirm('此操作将清空所选数据, 是否继续?', '提示') |
|
|
|
}, |
|
|
|
handleSuccess(response, file, fileList) { |
|
|
|
// this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS) |
|
|
|
// this.$refs.upload.clearFiles() |
|
|
|
// this.crud.status.add = CRUD.STATUS.NORMAL |
|
|
|
// this.crud.resetForm() |
|
|
|
// this.crud.toQuery() |
|
|
|
// 文件列表移除文件时的钩子 |
|
|
|
handleRemove(file, fileList) { |
|
|
|
this.fileList = [] |
|
|
|
console.log(file, fileList) |
|
|
|
}, |
|
|
|
// 监听上传失败 |
|
|
|
handleError(e, file, fileList) { |
|
|
|
@ -172,6 +178,24 @@ export default { |
|
|
|
duration: 2500 |
|
|
|
}) |
|
|
|
this.loading = false |
|
|
|
}, |
|
|
|
// 监听上传成功 |
|
|
|
handleSuccess(response, file, fileList) { |
|
|
|
// this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS) |
|
|
|
// this.$refs.upload.clearFiles() |
|
|
|
// this.crud.status.add = CRUD.STATUS.NORMAL |
|
|
|
// this.crud.resetForm() |
|
|
|
// this.crud.toQuery() |
|
|
|
}, |
|
|
|
submitForm(formName) { |
|
|
|
this.$refs[formName].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
alert('submit!') |
|
|
|
} else { |
|
|
|
console.log('error submit!!') |
|
|
|
return false |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
