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