216 lines
6.9 KiB
Vue
216 lines
6.9 KiB
Vue
<template>
|
||
<div style="padding: 20px 50px">
|
||
<el-timeline>
|
||
<el-timeline-item timestamp="下载模板" placement="top">
|
||
<el-card>
|
||
<el-button size="medium" style="width: 200px"
|
||
@click="location.href=temp_url"
|
||
icon="el-icon-download">下载模板
|
||
</el-button>
|
||
|
||
</el-card>
|
||
</el-timeline-item>
|
||
<el-timeline-item timestamp="上传文件" placement="top">
|
||
<el-card>
|
||
<el-form>
|
||
<el-form-item label="请选择更新模式" v-if="is_show_radio">
|
||
<el-radio-group v-model="importData.isFlag">
|
||
<el-radio-button label="true">清空更新</el-radio-button>
|
||
<el-radio-button label="false">追加</el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-upload
|
||
name="file"
|
||
ref="upload"
|
||
:on-remove="(file, fileList) => {
|
||
importData.fileList = fileHandleRemove(file, fileList);
|
||
importResult={
|
||
errorCount:0,
|
||
successCount:0,
|
||
totalCount:0,
|
||
errorList:[]
|
||
}
|
||
}"
|
||
:on-change="(file, fileList) => {
|
||
importData.fileList = fileHandleChange(file, fileList,{type:['xls','xlsx']})
|
||
}"
|
||
:auto-upload="false"
|
||
:limit="1"
|
||
:file-list="importData.fileList">
|
||
<el-button size="medium" type="" icon="el-icon-upload"
|
||
style="width: 200px">选择文件
|
||
</el-button>
|
||
<div class="el-upload__tip" slot="tip" style="color: #F56C6C">
|
||
只能上传 xls/xlsx 文件
|
||
</div>
|
||
</el-upload>
|
||
</el-form>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
<el-timeline-item placement="top" timestamp="导入结果">
|
||
<el-card shadow="never">
|
||
<p>总记录数：{{ errorInfoData.totalCount }}</p>
|
||
<p>成功数：<span class="text-success">{{ errorInfoData.successCount }}</span></p>
|
||
<p>错误数：<span class="text-danger">{{ errorInfoData.errorCount }}</span></p>
|
||
<el-link @click="exportErrors" type="primary" v-if="errorInfoData.errorCount>0">下载错误记录
|
||
</el-link>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
<div style="text-align: right">
|
||
<span slot="footer" class="dialog-footer">
|
||
<!-- <el-button @click="importVisible = false" :disabled="importLoading">取 消</el-button>-->
|
||
<el-button type="primary" @click="doImport" :loading="importLoading">确 定</el-button>
|
||
</span>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
module.exports = {
|
||
props: {
|
||
temp_url: {type: String},
|
||
post_url: {type: String},
|
||
project_id: {type: String, default: ''},
|
||
is_show_radio: {type: Boolean, default: false}
|
||
},
|
||
mounted() {
|
||
const s = document.createElement('script');
|
||
s.type = 'text/javascript';
|
||
s.src = 'https://cdn.staticfile.org/xlsx/0.18.5/xlsx.full.min.js';
|
||
document.body.appendChild(s);
|
||
},
|
||
data() {
|
||
return {
|
||
// importVisible: false,
|
||
importLoading: false,
|
||
importData: {
|
||
fileList: [],
|
||
isFlag: false
|
||
},
|
||
errorInfoData: {
|
||
totalCount: 0,
|
||
successCount: 0,
|
||
errorCount: 0,
|
||
errorList: 0,
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
resetImportData() {
|
||
this.importData = {
|
||
fileList: [],
|
||
isFlag: false
|
||
}
|
||
this.errorInfoData = {
|
||
totalCount: 0,
|
||
successCount: 0,
|
||
errorCount: 0,
|
||
errorList: 0,
|
||
}
|
||
this.importLoading = false
|
||
},
|
||
doImport() {
|
||
if (this.importData.fileList.length === 0) {
|
||
this.$message.error("请选择文件!")
|
||
return
|
||
}
|
||
const data = new FormData();
|
||
data.append("isFlag", this.importData.isFlag)
|
||
data.append("projectId", this.project_id)
|
||
this.importData.fileList.forEach((val) => {
|
||
data.append("file", val.raw, val.raw.name);
|
||
});
|
||
// this.importLoading = true
|
||
$.ajax({
|
||
url: this.post_url,
|
||
type: "post",
|
||
data: data,
|
||
processData: false,
|
||
contentType: false,
|
||
success: (data) => {
|
||
this.importLoading = false
|
||
if (data.code === 0 && (data.data === null || data.data === undefined)) {
|
||
this.$message.success("导入成功")
|
||
this.importVisible = false
|
||
this.$emit("flush")
|
||
} else {
|
||
this.$message.error("导入失败")
|
||
this.errorInfoData = data.data
|
||
}
|
||
},
|
||
error: (data) => {
|
||
this.$message.error("导入失败")
|
||
// this.importLoading = false
|
||
}
|
||
});
|
||
},
|
||
exportErrors() {
|
||
const data = this.errorInfoData.errorList
|
||
|
||
// 创建工作簿
|
||
const workbook = XLSX.utils.book_new();
|
||
|
||
// 创建工作表
|
||
const worksheet = XLSX.utils.json_to_sheet(data);
|
||
|
||
// 将工作表添加到工作簿
|
||
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
|
||
|
||
// 将工作簿转换为二进制对象
|
||
const excelBuffer = XLSX.write(workbook, {bookType: 'xlsx', type: 'array'});
|
||
|
||
// 将二进制对象转换为Blob对象
|
||
const blob = new Blob([excelBuffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
|
||
|
||
// 创建下载链接并设置相关属性
|
||
const url = window.URL.createObjectURL(blob);
|
||
const link = document.createElement('a');
|
||
link.href = url;
|
||
link.download = '错误记录.xlsx';
|
||
|
||
// 模拟点击下载链接
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
// 清理下载链接
|
||
document.body.removeChild(link);
|
||
window.URL.revokeObjectURL(url);
|
||
|
||
},
|
||
fileHandleRemove(file, fileList) {
|
||
return fileList;
|
||
},
|
||
fileHandleChange(file, fileList, {type, size}) {
|
||
const removeFile = () => {
|
||
fileList.splice(fileList.findIndex(v => v === file))
|
||
}
|
||
|
||
if (!file.size) {
|
||
this.$notify.warning('您选择的是空文件！')
|
||
removeFile()
|
||
}
|
||
|
||
if (type && type.length && !type.includes(file.name.split('.').pop().toLowerCase())) {
|
||
this.$notify.warning(`文件只能是 ${type.map(v => v.toUpperCase()).join('/')} 格式！`)
|
||
removeFile()
|
||
}
|
||
|
||
if (size && !file.size < size) {
|
||
this.$notify.warning(`文件大小不能超过 ${size / 1024 / 1024}MB！`)
|
||
removeFile()
|
||
}
|
||
|
||
return fileList;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.el-card__body {
|
||
padding: 25px;
|
||
}
|
||
</style>
|