first commit
This commit is contained in:
@@ -0,0 +1,215 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user