dd_pc/src/components/toLead.vue

<template>
	<div>
		<el-dialog :visible.sync="visible" width="700px" :close-on-click-modal="false" :before-close="closePopup">
            <div class="flex-box flex-dv-center" style="padding: 0 20px;">
                    <div v-for="(item,index) in headStep" :key="index" class="listg" :class="{listg1: item.id < nowIndex}">
                        <span class="border" :class="{border1: item.id < nowIndex}" v-if="item.id == 2 || item.id == 3"></span>
                        <span class="indexnum" v-if="item.id >= nowIndex" :class="{indexnow:nowIndex == item.id}">{{item.id}}</span>
                        <span class="el-icon-circle-check numicon" v-if="item.id < nowIndex"></span>
                        <span class="ramin">{{item.name}}</span>
                    </div>
            </div>
			<div :style="dstyle" style="height:150px;padding: 40px 140px">
                <slot name="1" v-if="nowIndex == 1"></slot>
                <div v-if="nowIndex == 2" style="text-align: center;">
                    <div>
                        <span>导入中</span>
                        <span class="el-icon-loading"></span>
                    </div>
                    <div>
                        导入需要一定时间，请不要关闭当前窗口
                    </div>
                </div>
                <div v-if="nowIndex == 3" class="leadtree">
                    <div class="lead-tit">导入结果</div>
                    <div class="lead-cent">
                        <div v-if="tolead.id == 1">
                            <div>共{{toleadall(tolead.error,tolead.success)}}条数据，已处理{{toleadall(tolead.error,tolead.success)}}条，导入情况如下：</div>
                            <div><svg-icon icon-class="leadThenGreen" /> 导入成功{{tolead.success.length}}条</div>
                            <div><svg-icon icon-class="leadErrRed" /> 导入失败{{tolead.error.length}}条 &nbsp; &nbsp; <span v-if="tolead.error.length > 0" style="cursor:pointer;color: #409eff;" @click="errClick(tolead.bs_id)">点击下载失败数据</span></div>
                        </div>
                        <div v-else-if="tolead.id == 0">
                            <span><svg-icon icon-class="leadJgRed" /> 导入异常：{{tolead.name}}</span>
                        </div>
                    </div>
                    <div class="lead-but">
                        <el-button v-if="tolead.id == 1 && tolead.error.length > 0" type="primary" @click="$emit('update:nowIndex', 1)">我已修改文件，重新导入</el-button>
                        <el-button v-else type="primary" @click="closePopup">确认</el-button>
                    </div>
                </div>
            </div>
		</el-dialog>
	</div>
</template>
<script>
  export default {
    props: {
		visible: {
			type: Boolean,
			default: false
        },
        nowIndex: {//当前步骤
			type: Number,
			default: 1
        },
        tolead: {//导入数据
			type: Object,
			default: {}
        },
        export_type: {//导出类型
			type: String,
			default: ''
        },
        dstyle: {
			type: String,
			default: ''
        },
    },
    name: "toLead",
    data() {
      return {
          headStep:[
              {id: 1,name: '选择文件',},
              {id: 2,name: '正在处理',},
              {id: 3,name: '导入结果',},
          ],
      }
    },
    methods: {
        errClick(id){
			window.open(
				process.env.VUE_APP_BASE_API +
                '/api/download/fail_data_export?employee_id=' + 
                this.$getUserData().id 
                + '&bs_id=' + id 
                + '&export_type=' 
                + this.export_type
                , '_blank'
			);
        },
        toleadall(err,then){
            return err.length + then.length
        },
		closePopup() {
			this.$nextTick(() => {
                if(this.tolead.success && this.tolead.success.length > 0) this.$emit('confirm');
				this.$emit('update:visible', false);
			});
		},
    }
  }
</script>

<style scoped lang="scss">
 .listg{
     .indexnum{
        width: 30px;
        height: 30px;
        display: inline-block;
        border: 1px solid #cecece;
        border-radius: 50%;
        text-align: center;
        color: #a9a9a9;
        line-height: 30px;
        margin-right: 5px;
     }
    .indexnow{
         background-color:#409eff;
         color: #fff;
         border: 1px solid #fff;
     }
     .border{
        display: inline-block;
        width: 160px;
        margin: 0 5px 2px 5px;
        height: 1px;
        background-color: #eaeaea;
     }
     .border1{
         margin-top: 18px;
     }
     .numicon{
        color: #41b9ff;
        font-size: 30px;
        margin-right: 5px;
     }
 }
 .listg1{
     display: flex;
    .ramin{
        line-height: 32px;
    }
 }
 .leadtree{
     .lead-tit{
        font-size: 19px;
        color: black;
        text-align: center;
     }
     .lead-cent{
        width: 280px;
        margin: 0 auto;
        min-height: 100px;
        padding: 10px 0 0 0;
        div{
            div{
                padding: 4px 0;
            }
        }
     }
     .lead-but{
         text-align: center;
     }
 }
</style>