新增消息界面、处理遗留问题

“dzb”

2022-10-11 387e8b0743240de72425e5b5c5709d629ace9aa4

 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>
@@ -43,46 +43,28 @@
        return {
            active: 0,
            list: [
                {
                    title: '上报',
                    status: 'success',
                },
                {
                    title: '立案',
                    status: 'process',
                },
                {
                    title: '派遣',
                    status: 'process',
                },
                {
                    title: '处置',
                    status: 'process',
                },
                {
                    title: '核查',
                    status: 'process',
                },
                {
                    title: '结案',
                    status: 'process',
                }
            ]
            ],
        }
    },
    props:['handlePassVo'],
    props:['handlePassVo','baseCase'],
    created(){
        console.log('process');
        const {handlePassVo:{workflowConfigSteps:mylist}} = this;
        const {handlePassVo:{workflowConfigSteps:mylist},baseCase:{state:mystate}} = this;
        // console.log(this.handlePassVo.workflowConfigSteps[0].name); 
        console.log(mylist);
        mylist.forEach(item=>{
            if(item.disposeRecords[0].endTime != null){
                this.active ++;
            }
        })
        // console.log(mylist);
        console.log(mystate);
        if(mystate===0){
            this.active = -1;
        }else if(mystate ===6){
            this.active = 1;
        }else if(mystate===7){
            this.active = 2;
        }else if(mystate ===8){
            this.active = 3;
        }else if(mystate ===9){
            this.active = 4;
        }
        this.list =  mylist;
    }
    },
}
</script>
<style lang="scss" scoped>
@@ -136,6 +118,7 @@
            flex: 1;
            line-height: 24px;
            margin-left: 10px;
            // color: #4b9bb7;
            .desc-content-endtime{
                display: flex;
                justify-content: flex-end;
@@ -148,14 +131,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>