parent
b32b3519a4
commit
68ac297cc9
2 changed files with 155 additions and 160 deletions
@ -0,0 +1,151 @@ |
||||
<template> |
||||
<el-dialog title="批量导入试题" :visible.sync="importVisible" width="520px" :close-on-click-modal="false" |
||||
:modal-append-to-body="false" @closed="closeDia"> |
||||
<template v-if="info"> |
||||
<div class="fs-14"> |
||||
共识别到 <span style="font-size: 16px;font-weight: 600;color: #2962ff;">{{ info.totalQuestionCount }}</span> 题； |
||||
成功导入 <span style="font-size: 16px;font-weight: 600;color: #5ac297;">{{ info.successCount }}</span> 题， |
||||
导入失败 <span style="font-size: 16px;font-weight: 600;color: #ef2826;">{{ info.errorCount }}</span> 题。 |
||||
</div> |
||||
<div v-if="info.questionTypeSuccessCounts" class="m-t-20"> |
||||
<p>成功导入题型数量</p> |
||||
<div class="flex m-t-10"> |
||||
<el-tag v-for="(item, i) in info.questionTypeSuccessCounts" :key="i" class="m-r-20">{{ i + ' ' + item |
||||
}}题</el-tag> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<el-form v-else label-width="110px"> |
||||
<el-form-item label="题库分类"> |
||||
<el-input v-model="params.questionBankCategory" disabled /> |
||||
</el-form-item> |
||||
<el-form-item label="当前题库"> |
||||
<el-input v-model="params.questionBankName" disabled /> |
||||
</el-form-item> |
||||
<el-form-item prop="userName" label="模板文件"> |
||||
<el-button type="primary" @click="download">模板下载<i class="el-icon-download el-icon--right"></i></el-button> |
||||
</el-form-item> |
||||
<el-form-item prop="userName" label="选择文件上传"> |
||||
<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" :data="{ |
||||
questionBankId: params.questionBankId |
||||
}" :disabled="uploading" :loading="uploading" :on-exceed="handleExceed" |
||||
:action="this.api.batchImportQuestions" :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>上传说明：</p> |
||||
<p>1.请按照模板要求，正确填写后上传</p> |
||||
<p>2.上传文件大小限制50M</p> |
||||
<p>3.仅支持上传.xls、 .xlsx文件格式</p> |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button v-if="info && info.exportCode" type="primary" @click="showFaild">点击下载失败数据</el-button> |
||||
<el-button @click="importVisible = false">关闭</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</template> |
||||
<script> |
||||
import Util from '@/libs/util' |
||||
import Setting from '@/setting' |
||||
import axios from 'axios' |
||||
export default { |
||||
props: ['visible', 'params'], |
||||
data () { |
||||
return { |
||||
importVisible: false, |
||||
uploadList: [], |
||||
info: null, |
||||
headers: { |
||||
token: Util.local.get(Setting.tokenKey) |
||||
}, |
||||
uploading: false, |
||||
}; |
||||
}, |
||||
watch: { |
||||
visible () { |
||||
this.importVisible = this.visible |
||||
this.visible && this.init() |
||||
} |
||||
}, |
||||
mounted () { |
||||
|
||||
}, |
||||
methods: { |
||||
init () { |
||||
this.info = null |
||||
this.uploadList = [] |
||||
}, |
||||
|
||||
// 模板下载 |
||||
async download () { |
||||
const res = await axios.get(this.api.downloadQuesExcel, { |
||||
headers: this.headers, |
||||
responseType: 'blob' |
||||
}) |
||||
Util.downloadFileDirect('批量导入试题模板.xlsx', new Blob([res.data])) |
||||
}, |
||||
// 上传文件 |
||||
handleExceed (files, fileList) { |
||||
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 (err, file, fileList) { |
||||
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 |
||||
}, |
||||
// 弹框关闭回调 |
||||
closeDia () { |
||||
this.$parent.getList() |
||||
this.$emit('update:visible', false) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/deep/.import-file { |
||||
.el-progress__text, |
||||
.el-progress, |
||||
.el-upload-list__item-status-label { |
||||
// display: none !important; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue