“dzb”
2022-10-03 4d9a35462803c7392dedca8d95fe21ff3d949466
src/components/process/index.vue
@@ -1,34 +1,34 @@
<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-content" v-if="active > index">
                        <div class="desc-content-message">1111111</div>
                        <div class="desc-content-endtime">22.09.06 16:40</div>
                    </div>
@@ -73,7 +73,10 @@
    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);
        this.list =  mylist;
    }
}
</script>
@@ -103,6 +106,8 @@
    }
    .my-pro-main {
        margin-top: 30px;
        margin-left: -50px;
        .pro-step-ver {
            display: flex;
            align-items: flex-start;
@@ -117,8 +122,10 @@
            align-items: center;
        }
        .pro-step-name {
            width: 120px;
            line-height: 24px;
            margin-right: 10px;
            text-align: right;
        }
        .desc{
            flex: 1;