“dzb”
2022-10-10 676722551d0bc2f8caa0644961e60deef3f0d532
src/components/process/index.vue
@@ -4,33 +4,33 @@
            <div class="pro-step" v-for="(item,index) in list" :key="item.name">
                <div class="pro-step-top">
                    <div
                        :class="['circle',active === index+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]">
                        :class="['circle',active === index ? 'in-process__circle' : active > index ? 'finish' : 'wait' ]">
                    </div>
                    <div :class="['line',active > index ? 'finish-line' :'']"
                    <div :class="['line',active> index ? 'finish-line' :'']"
                        v-if="index<list.length-1 ? true:false"></div>
                </div>
                <div
                    :class="['pro-step-name',active === index+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]">
                    :class="['pro-step-name',active === index ? 'in-process' : active > index ? 'finish-name' : 'wait' ]">
                    {{item.name}}</div>
            </div>
        </div>
        <div class="my-pro-main">
            <div class="pro-step-ver" v-for="(item,index) in list" :key="item.title">
                <div
                    :class="['pro-step-name',active === index+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]">
                    :class="['pro-step-name',active === index ? 'in-process' : active > index ? 'finish-name' : 'wait' ]">
                    {{item.name}}</div>
                <div class="pro-step-top">
                    <div
                        :class="['circle',active === index+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]">
                        :class="['circle',active === index ? 'in-process__circle' : active > index ? 'finish' : 'wait' ]">
                    </div>
                    <div :class="['line',active > index ? 'finish-line' :'']"
                        v-if="index<list.length-1 ? true:false"></div>
                </div>
                <div class="desc">
                    <div class="desc-title">环节用时:{{item.disposeRecords[0].linkTime}}</div>
                <div :class="['desc',active === index ? 'in-process' : active > index ? 'finish-name' : 'wait' ]">
                    <div class="desc-title">环节用时:{{item.disposeRecords.length !==0 ? item.disposeRecords[0].linkTime : ''}}</div>
                    <div class="desc-content" v-if="active > index">
                        <div class="desc-content-message">1111111</div>
                        <div class="desc-content-endtime">{{item.disposeRecords[0].endTime}}</div>
                        <div class="desc-content-endtime">{{item.disposeRecords.length !==0 ? item.disposeRecords[0].endTime:''}}</div>
                    </div>
                </div>
            </div>
@@ -67,7 +67,7 @@
                    title: '结案',
                    status: 'process',
                }
            ]
            ],
        }
    },
    props:['handlePassVo'],
@@ -75,14 +75,15 @@
        console.log('process');
        const {handlePassVo:{workflowConfigSteps:mylist}} = this;
        // console.log(this.handlePassVo.workflowConfigSteps[0].name); 
        console.log(mylist);
        // console.log(mylist);
        mylist.forEach(item=>{
            if(item.disposeRecords[0].endTime != null){
            if(item.disposeRecords.length!==0){
                this.active ++;
            }
        })
        console.log(this.active);
        this.list =  mylist;
    }
    },
}
</script>
<style lang="scss" scoped>
@@ -136,6 +137,7 @@
            flex: 1;
            line-height: 24px;
            margin-left: 10px;
            // color: #4b9bb7;
            .desc-content-endtime{
                display: flex;
                justify-content: flex-end;
@@ -148,14 +150,26 @@
        height: 24px;
        border-radius: 50%;
        background-color: #fff;
        border: 2px solid #808080;
    }
    .line {
        background-color: #c0c4cc;
    }
    .in-process{
        color: #0079fe;
    }
    .in-process__circle{
        border: 2px solid #0079fe;
    }
    .finish-line {
        background-color: #4b9bb7;
        background-color: #0079fe;
    }
    .finish{
        border: 2px solid #4b9bb7;
    }
    .finish-name{
        color: #4b9bb7;
    }
}
</style>