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

“dzb”

2022-10-11 387e8b0743240de72425e5b5c5709d629ace9aa4

 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 ? 'in-process__circle' : 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 ? '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 === item.index ? 'in-process' : active > item.index ? 'finish' : 'wait' ]">
                    {{item.title}}</div>
                    :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 === item.index ? 'in-process' : active > item.index ? 'finish' : 'wait' ]">
                        :class="['circle',active === index ? 'in-process__circle' : 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',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">22.09.06 16:40</div>
                        <div class="desc-content-endtime">{{item.disposeRecords.length !==0 ? item.disposeRecords[0].endTime:''}}</div>
                    </div>
                </div>
            </div>
@@ -41,40 +41,30 @@
export default {
    data() {
        return {
            active: 2,
            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');
        console.log(this.handlePassVo);
    }
        const {handlePassVo:{workflowConfigSteps:mylist},baseCase:{state:mystate}} = this;
        // console.log(this.handlePassVo.workflowConfigSteps[0].name); 
        // 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>
@@ -103,6 +93,8 @@
    }

    .my-pro-main {
        margin-top: 30px;
        margin-left: -50px;
        .pro-step-ver {
            display: flex;
            align-items: flex-start;
@@ -117,13 +109,16 @@
            align-items: center;
        }
        .pro-step-name {
            width: 120px;
            line-height: 24px;
            margin-right: 10px;
            text-align: right;
        }
        .desc{
            flex: 1;
            line-height: 24px;
            margin-left: 10px;
            // color: #4b9bb7;
            .desc-content-endtime{
                display: flex;
                justify-content: flex-end;
@@ -136,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>