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