添加时间筛选

zhanghua

2025-07-16 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3

 src/components/process/index.vue

@@ -1,77 +1,158 @@
<template>
    <div class="my-process">
        <div class="my-pro-header">
            <div class="pro-step" v-for="(item,index) in list" :key="item.name">
                <div class="pro-step-top">
                    <div
                        :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="['pro-step-name',active === index ? 'in-process' : active > index ? 'finish-name' : 'wait' ]">
                    {{item.name}}</div>
            </div>
            <el-steps
                :space="260"
                :active="active"
                align-center
            >
                <el-step
                    v-for="item in list"
                    :title="item.name"
                    :key="item.title"
                >
                    <template slot="description">
                        <div>环节用时：</div>
                        <div>
                            <i class="el-icon-time"></i>
                            {{
                                item.disposeRecords.length !== 0
                                    ? item.disposeRecords[0].linkTime
                                    : ''
                            }}
                            <!-- <span>day</span> -->
                        </div>
                    </template>
                </el-step>
            </el-steps>
        </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 ? 'in-process' : active > index ? 'finish-name' : 'wait' ]">
                    {{item.name}}</div>
                <div class="pro-step-top">
                    <div
                        :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',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.length !==0 ? item.disposeRecords[0].endTime:''}}</div>
                    </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
              ? 'in-process'
              : active > index
              ? 'finish-name'
              : 'wait',
          ]"
        >
          {{ item.name }}
        </div>
        <div class="pro-step-top">
          <div
            :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',
            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">
              {{
                (item.disposeRecords[0] && item.disposeRecords[0].result) || ""
              }}
            </div>
            <div class="desc-content-endtime">
              {{
                item.disposeRecords.length !== 0
                  ? filterTime(item.disposeRecords[0].endTime)
                  : ""
              }}
            </div>
          </div>
        </div>
      </div>
    </div> -->
    </div>
</template>
<script>
import helper from "@/utils/mydate";
export default {
    data() {
        return {
            active: 0,
            list: [
            ],
        }
            list: [],
        };
    },
    props:['handlePassVo','baseCase'],
    created(){
        const {handlePassVo:{workflowConfigSteps:mylist},baseCase:{state:mystate}} = this;
        // console.log(this.handlePassVo.workflowConfigSteps[0].name); 
        // console.log(mylist);
        console.log(mystate);
        if(mystate ===6){
    props: ["handlePassVo", "baseCase"],
    created() {
        const {
            handlePassVo: { workflowConfigSteps: mylist },
            baseCase: { state: mystate },
        } = this;
        if (mystate === 6) {
            this.active = 1;
        }else if(mystate===7){
        } else if (mystate === 7) {
            this.active = 2;
        }else if(mystate ===8){
        } else if (mystate === 8) {
            this.active = 3;
        }else if(mystate ===9){
        } else if (mystate === 9) {
            this.active = 4;
        }else{
            this.active = -1;
        } else {
            this.active = 0;
        }
        this.list =  mylist;
        this.list = mylist;
    },
}
    methods: {
        filterTime(time) {
            if (time) {
                return helper(time);
            }
            return;
        },
    },
};
</script>
<style lang="scss" scoped>
// ::v-deep .el-step.is-horizontal .el-step__line {
//     border-top: 2px dashed #ccd1de;
//     height: 0;
//     background-color: transparent;
// }
::v-deep .el-step__title {
    font-size: 20px;
    padding: 10px 0;
}
::v-deep .el-step__title.is-process {
    color: #5388f1;
}

::v-deep .el-step__description{
    font-size: 14px;
}

.my-process {
    padding-top: 50px;
    .my-pro-header {
        display: flex;
        padding: 0 30px;
        line-height: 1;

        .pro-step {
            flex: 1;
@@ -103,7 +184,7 @@
                height: 100px;
            }
        }
        .pro-step-top{
        .pro-step-top {
            display: flex;
            flex-direction: column;
            align-items: center;
@@ -114,14 +195,15 @@
            margin-right: 10px;
            text-align: right;
        }
        .desc{
        .desc {
            flex: 1;
            line-height: 24px;
            margin-left: 10px;
            // color: #4b9bb7;
            .desc-content-endtime{
            .desc-content-endtime {
                display: flex;
                justify-content: flex-end;
                padding-right: 50px;
            }
        }
    }
@@ -137,20 +219,23 @@
    .line {
        background-color: #c0c4cc;
    }
    .in-process{
    .in-process {
        color: #0079fe;
    }
    .in-process__circle{
    .in-process__circle {
        border: 2px solid #0079fe;
    }
    .finish-line {
        background-color: #0079fe;
    }
    .finish{
    .finish {
        border: 2px solid #4b9bb7;
    }
    .finish-name{
    .finish-name {
        color: #4b9bb7;
    }
    .desc-content-message {
        color: #666;
    }
}
</style>