<template>
|
<el-dialog
|
v-el-drag-dialog
|
:visible.sync="visible"
|
:title="title"
|
:code="code"
|
:close-on-click-modal="false"
|
@close="$emit('update:shows', false)"
|
>
|
<div>
|
<el-steps :active="num" align-center style="margin-bottom:10px;">
|
<el-step title="上传Excel" />
|
<el-step title="数据验证" />
|
<el-step title="导入数据" />
|
<el-step title="完成" />
|
</el-steps>
|
|
<div v-if="div1" style="margin-left: 85px;margin-top: 35px" class="mb40">
|
<h3>导入提示</h3>
|
<p>1. 导入文件支持类型：.xlsx,最大不能超10M</p>
|
<p>2. 请勿调整导入模版中字段的左右顺序或新增sheet页</p>
|
</div>
|
|
<div v-if="div2 && div2_state === '301'" style="margin-left: 85px;margin-right: 85px">
|
<p><span class="gth_icon">!</span>文件中有<span style="color:red">{{ error_list.length }}</span>条错误数据，请修改后重新导入</p>
|
<el-table class="table" :data="error_list" :header-cell-style="{background:'#f5f5f5'}">
|
<el-table-column label="序号" prop="Seq" width="50" />
|
<!-- <el-table-column label="行号" prop="RoeNumber" />-->
|
<el-table-column label="错误字段" prop="ErrorField" min-width="150" />
|
<el-table-column label="错误详情" prop="ErrorCont" min-width="300" />
|
</el-table>
|
</div>
|
<div v-if="div2 && div2_state === '200'" style="position:relative;margin:100px 85px;">
|
<div class="progress_bar bar-color-a" />
|
<div :class="{'progress_bar':true, 'bar-color-b':true,'position_div':true,'cg':cg4,}" />
|
<div class="mt"><img src="@/assets/images/succ.png" class="img_position"> 校验数据 (成功)</div>
|
<div class="mt">即将导入{{ total_num }}条数据</div>
|
</div>
|
<div v-if="div1" style="margin-left:85px" class="mb40">
|
<h3>上传文件</h3>
|
<el-upload
|
style="display: inline-block;"
|
:action="baseUrl==='/api/'?'/api/importexcel/ExcelModelCheck':'/apis/importexcel/ExcelModelCheck'"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess"
|
:before-upload="beforeUpload"
|
:data="{FileCode:code}"
|
>
|
<el-button v-waves class="but_style" icon="el-icon-upload2" size="small" :style="{color:$store.state.settings.theme}">{{ button_name }}</el-button>
|
</el-upload>
|
请点击
|
<el-button v-waves type="text" style="font-size: 14px;cursor: pointer" icon="el-icon-download" @click="clickDown(code)">下载数据模版</el-button>
|
, 并按照模版编辑导入数据
|
</div>
|
<p v-if="div1" style="margin:0 85px 5px">{{ file_name }}</p>
|
<div v-show="div1 && getDataing" style="margin: 0 85px" class="yz">
|
<ul>
|
<li>
|
<div class="progress_bar bar-color-a" />
|
<div :class="{'progress_bar':true, 'bar-color-b':true,'position_div':true,'cg':cg1,'sb':sb1}" />
|
<!-- <div v-if="json1 === '200'" class="mt"><img src="@/assets/images/succ.png" class="img_position">文件上传 (成功)</div>-->
|
<div v-if="json1 === '200'" class="mt"><img src="@/assets/images/succ.png" class="img_position">{{ message1 }}</div>
|
<!-- <div v-if="json1 === '300'" class="mt"><img src="@/assets/images/sbbbb_icon.png" class="img_position">文件上传 (失败)</div>-->
|
<div v-if="json1 === '300'" class="mt"><img src="@/assets/images/sbbbb_icon.png" class="img_position">{{ message1 }}</div>
|
<div v-if="json1=== null" class="mt">文件上传（待校验）</div>
|
</li>
|
<!-- <li >
|
<div class='progress_bar bar-color-a'></div>
|
<div class='progress_bar ba r-color-c position_div' style="width:80%"></div>
|
|
</li> -->
|
|
<li>
|
<div class="progress_bar bar-color-a" />
|
<div :class="{'progress_bar':true, 'bar-color-b':true,'position_div':true,'cg':cg2,'sb':sb2}" />
|
<div v-if="json2 === '200'" class="mt"><img src="@/assets/images/succ.png" class="img_position">{{ message2 }}</div>
|
<div v-if="json2 === '300'" class="mt"><img src="@/assets/images/sbbbb_icon.png" class="img_position">{{ message2 }}</div>
|
<div v-if="json2 === null" class="mt">模版校验（待校验）</div>
|
</li>
|
<!-- <li v-if="json2 === 300">
|
<div class='progress_bar bar-color-a'></div>
|
<div class='progress_bar bar-color-c position_div' style="width:80%"></div>
|
|
</li> -->
|
<!-- <li v-if="json2 === null">
|
<div class='progress_bar bar-color-a'></div>
|
<div class='progress_bar position_div'></div>
|
<div class='mt'>模版验证（待校验）</div>
|
</li> -->
|
|
<li>
|
<div class="progress_bar bar-color-a" />
|
<div :class="{'progress_bar':true, 'bar-color-b':true,'position_div':true,'cg':cg3,'sb':sb3}" />
|
<div v-if="json3 === '200'" class="mt"><img src="@/assets/images/succ.png" class="img_position">{{ message3 }}</div>
|
<div v-if="json3 === '300'" class="mt"><img src="@/assets/images/sbbbb_icon.png" class="img_position">{{ message3 }}</div>
|
<div v-if="json3 === null" class="mt">数据量校验（待校验）</div>
|
</li>
|
<!-- <li v-if="json3 === 300">
|
<div class='progress_bar bar-color-a'></div>
|
<div class='progress_bar bar-color-c position_div' style="width:80%"></div>
|
|
</li>
|
<li v-if="json3 === null">
|
<div class='progress_bar bar-color-a'></div>
|
<div class='progress_bar position_div'></div>
|
|
</li> -->
|
</ul>
|
</div>
|
<div v-if="div3" class="div3_s">
|
<img src="@/assets/images/ws_icon.png">
|
<p>已成功导入数据{{ total_num }}条</p>
|
</div>
|
<div v-if="div3_sb" class="div3_s">
|
<img src="@/assets/images/error_icon.png">
|
<p>导入失败，失败的原因是{{ error_message }}！</p>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer" style="display: flex;">
|
<el-button v-if="button_text !="完成"" v-waves @click="colos()">取 消</el-button>
|
<el-button
|
v-waves
|
type="primary"
|
class="button_style"
|
:disabled="disState"
|
@click="nextStep(code)"
|
>{{ button_text }}</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
<script>
|
|
import { DownLoadExcel, ExcelCheckData, ExcelImportSubmit, ExcelModelCheck } from '@/api/Excel'
|
import elDragDialog from '@/directive/el-drag-dialog'
|
import waves from '@/directive/waves'
|
|
export default {
|
directives: { elDragDialog, waves },
|
props: {
|
code: {
|
type: String,
|
default: null
|
},
|
shows: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: null
|
},
|
// num:{
|
// type:Number,
|
// default:0
|
// },
|
// nextStep:{
|
// type:Function,
|
// default:null
|
// },
|
colos: {
|
type: Function,
|
default: null
|
}
|
// mnList:{
|
// type:Array,
|
// default:[]
|
// }
|
},
|
data() {
|
return {
|
message1: '',
|
message2: '',
|
message3: '',
|
getDataing: false,
|
cg1: false,
|
sb1: false,
|
cg2: false,
|
sb2: false,
|
cg3: false,
|
sb3: false,
|
cg4: false,
|
background1: '',
|
background2: '',
|
background3: '',
|
error_message: '',
|
total_num: 0,
|
file: '',
|
div3_sb: false,
|
div3: false,
|
div2_state: '',
|
num: 0,
|
disState: true,
|
visible: this.shows,
|
file_name: '',
|
div2: false,
|
div1: true,
|
button_name: '选择文件',
|
json1: '',
|
json2: '',
|
json3: '',
|
mnList: [],
|
error_list: [],
|
button_text: '下一步',
|
baseUrl: ''
|
|
}
|
},
|
watch: {
|
shows() {
|
this.visible = this.shows
|
}
|
},
|
mounted() {
|
this.baseUrl = process.env.VUE_APP_BASE_API
|
},
|
methods: {
|
newDataFunc() {
|
this.num = 0
|
this.getDataing = false
|
this.div1 = true
|
this.div2 = false
|
this.div3 = false
|
this.div3_sb = false
|
this.file_name = ''
|
this.disState = true
|
this.json1 = ''
|
this.json2 = ''
|
this.json3 = ''
|
this.button_name = '选择文件'
|
this.button_text = '下一步'
|
},
|
nextStep(code) {
|
const data = {
|
FileCode: code,
|
FileName: this.file_name
|
}
|
|
if (this.num === 0) {
|
this.div1 = false
|
this.div2 = true
|
this.ExcelCheckData(data)
|
this.num += 1
|
this.disState = true
|
} else if (this.num === 1) {
|
this.div2 = false
|
this.ExcelImportSubmit(data)
|
} else {
|
this.colos()
|
}
|
},
|
ExcelImportSubmit(data) {
|
ExcelImportSubmit(data).then((res) => {
|
if (res.code === '200') {
|
this.div3 = true
|
this.num += 2
|
this.button_text = '完成'
|
this.disState = false
|
} else {
|
this.num += 1
|
this.div3_sb = true
|
this.disState = true
|
this.error_message = res.Message
|
}
|
})
|
},
|
ExcelCheckData(data) {
|
ExcelCheckData(data).then((res) => {
|
this.div2_state = res.code
|
setTimeout(() => {
|
this.cg4 = true
|
}, 2000)
|
|
this.error_list = res.list
|
|
this.total_num = res.Count
|
if (res.code === '200') {
|
this.disState = false
|
}
|
})
|
},
|
beforeUpload(file) {
|
this.file_name = file.name
|
this.file = file
|
},
|
handleAvatarSuccess(res, file, fileList) {
|
this.disState = true
|
this.getDataing = true
|
this.json1 = null
|
this.json2 = null
|
this.json3 = null
|
this.cg1 = false
|
this.sb1 = false
|
this.cg2 = false
|
this.sb2 = false
|
this.cg3 = false
|
this.sb3 = false
|
setTimeout(() => {
|
if (res.json1.code === '200') {
|
this.cg1 = true
|
} else {
|
this.sb1 = true
|
this.json2 = null
|
this.json3 = null
|
this.button_name = '更新文件'
|
}
|
}, 500)
|
setTimeout(() => {
|
this.json1 = res.json1.code
|
this.message1 = res.json1.Message
|
this.json2 = null
|
this.json3 = null
|
if (res.json2.code === '200') {
|
this.cg2 = true
|
} else {
|
this.sb2 = true
|
this.json3 = null
|
this.button_name = '更新文件'
|
}
|
}, 2000)
|
setTimeout(() => {
|
this.json2 = res.json2.code
|
this.message2 = res.json2.Message
|
this.json3 = null
|
if (res.json3 !== null) {
|
if (res.json3.code === '200') {
|
this.cg3 = true
|
} else {
|
this.sb3 = true
|
this.json3 = null
|
this.button_name = '更新文件'
|
}
|
}
|
}, 4000)
|
setTimeout(() => {
|
if (res.json3 !== null) {
|
this.json3 = res.json3.code
|
this.message3 = res.json3.Message
|
}
|
}, 6000)
|
// if(res.json1.code === 300){
|
// this.json2 = null
|
// this.json3 =null
|
// this.button_name = '更新文件'
|
// }else{
|
// this.json2 = res.json2.code
|
|
// }
|
// if(res.json2.code === 300){
|
// this.json3 =null
|
// this.button_name = '更新文件'
|
// }else{
|
// this.json3 = res.json3.code
|
// }
|
setTimeout(() => {
|
if (this.json1 === '200' && this.json2 === '200' && this.json3 === '200') {
|
this.disState = false
|
}
|
}, 7000)
|
},
|
clickDown(code) {
|
const data = {
|
FileCode: code
|
}
|
// all.DownLoadExcel(data).then((res) => {
|
// window.location.href = res
|
// })
|
DownLoadExcel(data).then(res => {
|
// console.log(res.data)
|
// console.log(process.env.VUE_APP_BASE_API, 8989899)
|
// console.log(process.env.VUE_APP_BASE_API_FILE)
|
// console.log(window.location.origin + res.data)
|
// window.location.href = process.env.VUE_APP_BASE_API_FILE + res.data
|
window.location.href = res.data
|
})
|
}
|
}
|
|
}
|
</script>
|
<style scoped>
|
.yz ul {
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
margin: 0;
|
padding: 0;
|
}
|
|
.yz ul li {
|
list-style: none;
|
width: 32%;
|
position: relative;
|
}
|
|
.progress_bar {
|
height: 12px;
|
width: 100%;
|
border-radius: 10px;
|
}
|
|
.bar-color-a {
|
background: #F1F1F1
|
}
|
|
.bar-color-b {
|
background: #28C689
|
}
|
|
.bar-color-c {
|
background: #EB8383
|
}
|
|
.position_div {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 0px;
|
border-radius: 10px;
|
|
}
|
|
.mt {
|
margin-top: 10px;
|
}
|
|
.mb40 {
|
margin-bottom: 40px;
|
}
|
|
.mb20 {
|
margin-bottom: 20px;
|
}
|
|
.div3_s {
|
margin-top: 100px;
|
text-align: center;
|
}
|
|
.img_position {
|
vertical-align: -1px;
|
margin-right: 5px;
|
}
|
|
.cg {
|
width: 100%;
|
background: #28C689;
|
transition: width 2s ease 0.3s;
|
}
|
|
.sb {
|
width: 80%;
|
background: #EB8383;
|
transition: width 2s ease 0.3s;
|
}
|
|
.but_style {
|
color: #00a79d;
|
background-color: #FFFFFF;
|
border-color: #00a79d;
|
}
|
|
.gth_icon {
|
height: 20px;
|
display: inline-block;
|
background: #F7B500;
|
color: #FFFFFF;
|
border-radius: 100%;
|
width: 20px;
|
text-align: center;
|
line-height: 20px;
|
margin-right: 6px;
|
}
|
</style>
|
