“dzb”
2022-10-04 797cc9c1a5c90f413d46c5cb88e1ee5e3a84b071
src/components/process/index.vue
@@ -1,36 +1,36 @@
<template>
    <div class="my-process">
        <div class="my-pro-header">
            <div class="pro-step" v-for="(item,index) in list" :key="item.title">
            <div class="pro-step" v-for="(item,index) in list" :key="item.name">
                <div class="pro-step-top">
                    <div
                        :class="['circle',active === item.index ? 'in-process' : active > item.index ? 'finish' : 'wait' ]">
                        :class="['circle',active === index+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]">
                    </div>
                    <div :class="['line',active > item.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 === item.index ? 'in-process' : active > item.index ? 'finish' : 'wait' ]">
                    {{item.title}}</div>
                    :class="['pro-step-name',active === index+1 ? 'in-process' : active > index ? 'finish' : '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 === item.index ? 'in-process' : active > item.index ? 'finish' : 'wait' ]">
                    {{item.title}}</div>
                    :class="['pro-step-name',active === index+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]">
                    {{item.name}}</div>
                <div class="pro-step-top">
                    <div
                        :class="['circle',active === item.index ? 'in-process' : active > item.index ? 'finish' : 'wait' ]">
                        :class="['circle',active === index+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]">
                    </div>
                    <div :class="['line',active > item.index ? 'finish-line' :'']"
                    <div :class="['line',active > index ? 'finish-line' :'']"
                        v-if="index<list.length-1 ? true:false"></div>
                </div>
                <div class="desc">
                    <div class="desc-title">环节用时:</div>
                    <div class="desc-content" v-if="active > index+1">
                    <div class="desc-title">环节用时:{{item.disposeRecord.linkTime}}</div>
                    <div class="desc-content" v-if="active > index">
                        <div class="desc-content-message">1111111</div>
                        <div class="desc-content-endtime">22.09.06 16:40</div>
                        <div class="desc-content-endtime">{{item.disposeRecord.endTime}}</div>
                    </div>
                </div>
            </div>
@@ -41,7 +41,7 @@
export default {
    data() {
        return {
            active: 2,
            active: 0,
            list: [
                {
                    title: '上报',
@@ -73,7 +73,16 @@
    props:['handlePassVo'],
    created(){
        console.log('process');
        console.log(this.handlePassVo);
        const {handlePassVo:{workflowConfigSteps:mylist}} = this;
        // console.log(this.handlePassVo.workflowConfigSteps[0].name);
        console.log(mylist);
        mylist.forEach(item=>{
            if(item.disposeRecord.endTime != null){
                this.active ++;
                console.log(1);
            }
        })
        this.list =  mylist;
    }
}
</script>
@@ -103,6 +112,8 @@
    }
    .my-pro-main {
        margin-top: 30px;
        margin-left: -50px;
        .pro-step-ver {
            display: flex;
            align-items: flex-start;
@@ -117,8 +128,10 @@
            align-items: center;
        }
        .pro-step-name {
            width: 120px;
            line-height: 24px;
            margin-right: 10px;
            text-align: right;
        }
        .desc{
            flex: 1;