parent
6beec3d7e7
commit
b4b748d3ca
6 changed files with 271 additions and 32 deletions
@ -0,0 +1,148 @@ |
||||
<template> |
||||
<el-drawer title="上传文件" :visible.sync="uploadVisible" size="600px" :close-on-click-modal="false" |
||||
custom-class="source-dia" @closed="closeDia"> |
||||
<el-form label-width="80px" style="padding: 20px"> |
||||
<el-form-item prop="userName"> |
||||
<el-upload name="file" accept=".xls,.xlsx" ref="upload" class="import-file" drag :before-upload="beforeUpload" |
||||
:on-remove="handleRemove" :on-error="uploadError" :on-success="uploadSuccess" :before-remove="beforeRemove" |
||||
:limit="1" :disabled="uploading" v-loading="uploading" :on-exceed="handleExceed" action="" |
||||
:file-list="uploadList" :headers="headers"> |
||||
<i class="el-icon-upload"></i> |
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> |
||||
<div class="el-upload__tip" slot="tip" style="line-height: 1.8;"> |
||||
<p>视频请上传MP4格式，大小不超过150M；</p> |
||||
<p>其他格式文件大小不要超过10M</p> |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item label="资源名称"> |
||||
<el-input v-model="form.name" placeholder="请输入资源名称" /> |
||||
</el-form-item> |
||||
<el-form-item label="资源类型"> |
||||
<el-input v-model="form.name" placeholder="请输入资源名称" /> |
||||
</el-form-item> |
||||
<el-form-item label="资源描述"> |
||||
<el-input v-model="form.name" placeholder="请输入资源描述" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="btns"> |
||||
<el-button @click="uploadVisible = false">取消</el-button> |
||||
<el-button type="primary" :loading="submiting" @click="submit">确定</el-button> |
||||
</div> |
||||
</el-drawer> |
||||
</template> |
||||
<script> |
||||
import Util from '@/libs/util' |
||||
import Setting from '@/setting' |
||||
import axios from 'axios' |
||||
import { Form } from 'element-ui'; |
||||
export default { |
||||
props: ['visible'], |
||||
data () { |
||||
return { |
||||
uploadVisible: false, |
||||
uploadList: [], |
||||
info: null, |
||||
headers: { |
||||
token: sessionStorage.getItem("token") |
||||
}, |
||||
uploading: false, |
||||
submiting: false, |
||||
form: { |
||||
|
||||
}, |
||||
}; |
||||
}, |
||||
watch: { |
||||
visible () { |
||||
this.uploadVisible = this.visible |
||||
this.visible && this.init() |
||||
} |
||||
}, |
||||
mounted () { |
||||
|
||||
}, |
||||
methods: { |
||||
init () { |
||||
this.info = null |
||||
this.uploadList = [] |
||||
}, |
||||
|
||||
// 上传文件 |
||||
handleExceed () { |
||||
Util.warningMsg( |
||||
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||
) |
||||
}, |
||||
// 下载失败文件 |
||||
showFaild () { |
||||
axios.get(`${this.api.batchImportQuesFailure}?exportCode=${this.info.exportCode}`, { |
||||
headers: this.headers, |
||||
responseType: 'blob' |
||||
}).then((res) => { |
||||
Util.downloadFileDirect('批量导入题目管理失败数据导出.xlsx', new Blob([res.data])) |
||||
}).catch(res => { }) |
||||
}, |
||||
uploadSuccess ({ data, status, message }) { |
||||
this.uploading = false |
||||
if (status === 200) { |
||||
// this.init() |
||||
this.info = data |
||||
} else { |
||||
Util.errorMsg(message || '上传失败，请检查数据', 3000) |
||||
} |
||||
}, |
||||
uploadError () { |
||||
this.uploading = false |
||||
this.$message({ |
||||
message: "上传出错，请重试！", |
||||
type: "error", |
||||
center: true |
||||
}) |
||||
}, |
||||
beforeUpload (file) { |
||||
this.uploading = true |
||||
}, |
||||
beforeRemove (file, fileList) { |
||||
return this.$confirm(`确定移除 ${file.name}？`) |
||||
}, |
||||
handleRemove (file, fileList) { |
||||
this.uploadList = fileList |
||||
this.info = null |
||||
}, |
||||
submit () { |
||||
|
||||
}, |
||||
// 弹框关闭回调 |
||||
closeDia () { |
||||
this.$parent.initData() |
||||
this.$emit('update:visible', false) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/deep/.import-file { |
||||
.el-upload__tip { |
||||
margin-top: 0; |
||||
} |
||||
|
||||
.el-progress__text, |
||||
.el-progress, |
||||
.el-upload-list__item-status-label { |
||||
display: none !important; |
||||
} |
||||
} |
||||
|
||||
.btns { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
padding: 14px 0; |
||||
text-align: center; |
||||
background-color: #fff; |
||||
box-shadow: 4px -2px 6px 0px rgba(198, 198, 198, 0.3500); |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue