我的代办修改

luobisheng

2022-11-17 99f97b11a334ce482db9aa91fca86dadbaffd716

 src/components/process/index.vue

@@ -1,161 +1,227 @@
<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+1 ? 'in-process' : 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+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]">
                    {{item.name}}</div>
            </div>
  <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="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' ]">
                    {{item.name}}</div>
                <div class="pro-step-top">
                    <div
                        :class="['circle',active === index+1 ? 'in-process' : 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-content" v-if="active > index">
                        <div class="desc-content-message">1111111</div>
                        <div class="desc-content-endtime">{{item.disposeRecords[0].endTime}}</div>
                    </div>
                </div>
            </div>
        <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 === 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].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: [
                {
                    title: '上报',
                    status: 'success',
                },
                {
                    title: '立案',
                    status: 'process',
                },
                {
                    title: '派遣',
                    status: 'process',
                },
                {
                    title: '处置',
                    status: 'process',
                },
                {
                    title: '核查',
                    status: 'process',
                },
                {
                    title: '结案',
                    status: 'process',
                }
            ]
        }
    },
    props:['handlePassVo'],
    created(){
        console.log('process');
        const {handlePassVo:{workflowConfigSteps:mylist}} = this;
        // console.log(this.handlePassVo.workflowConfigSteps[0].name); 
        console.log(mylist);
        mylist.forEach(item=>{
            if(item.disposeRecords[0].endTime != null){
                this.active ++;
            }
        })
        this.list =  mylist;
  data() {
    return {
      active: 0,
      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) {
      this.active = 1;
    } else if (mystate === 7) {
      this.active = 2;
    } else if (mystate === 8) {
      this.active = 3;
    } else if (mystate === 9) {
      this.active = 4;
    } else {
      this.active = -1;
    }
}
    this.list = mylist;
  },
  methods: {
    filterTime(time) {
      if (time) {
        return helper(time);
      }
      return;
    },
  },
};
</script>
<style lang="scss" scoped>
.my-process {
    padding-top: 50px;
    .my-pro-header {
  padding-top: 50px;
  .my-pro-header {
    display: flex;

    .pro-step {
      flex: 1;

      .pro-step-top {
        display: flex;
        align-items: center;

        .pro-step {
            flex: 1;

            .pro-step-top {
                display: flex;
                align-items: center;

                .line {
                    flex: 1;
                    height: 2px;
                }
            }

            .pro-step-name {
                line-height: 20px;
            }
        .line {
          flex: 1;
          height: 2px;
        }
    }
      }

    .my-pro-main {
        margin-top: 30px;
        margin-left: -50px;
        .pro-step-ver {
            display: flex;
            align-items: flex-start;
            .line {
                width: 2px;
                height: 100px;
            }
        }
        .pro-step-top{
            display: flex;
            flex-direction: column;
            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;
            .desc-content-endtime{
                display: flex;
                justify-content: flex-end;
            }
        }
      .pro-step-name {
        line-height: 20px;
      }
    }
  }

    .circle {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #fff;
  .my-pro-main {
    margin-top: 30px;
    margin-left: -50px;
    .pro-step-ver {
      display: flex;
      align-items: flex-start;
      .line {
        width: 2px;
        height: 100px;
      }
    }
    .pro-step-top {
      display: flex;
      flex-direction: column;
      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;
        padding-right: 50px;
      }
    }
  }

    .line {
        background-color: #c0c4cc;
    }
  .circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #808080;
  }

    .finish-line {
        background-color: #4b9bb7;
    }
  .line {
    background-color: #c0c4cc;
  }
  .in-process {
    color: #0079fe;
  }
  .in-process__circle {
    border: 2px solid #0079fe;
  }
  .finish-line {
    background-color: #0079fe;
  }
  .finish {
    border: 2px solid #4b9bb7;
  }
  .finish-name {
    color: #4b9bb7;
  }
}
</style>