| | |
| | | <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-title">环节用时:{{item.disposeRecord.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.disposeRecord.endTime}}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | active: 2, |
| | | active: 0, |
| | | list: [ |
| | | { |
| | | title: '上报', |
| | |
| | | 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); |
| | | mylist.forEach(item=>{ |
| | | if(item.disposeRecord.endTime != null){ |
| | | this.active ++; |
| | | console.log(1); |
| | | } |
| | | }) |
| | | this.list = mylist; |
| | | } |
| | | } |
| | | </script> |
| | |
| | | } |
| | | |
| | | .my-pro-main { |
| | | margin-top: 30px; |
| | | margin-left: -50px; |
| | | .pro-step-ver { |
| | | display: flex; |
| | | align-items: flex-start; |
| | |
| | | align-items: center; |
| | | } |
| | | .pro-step-name { |
| | | width: 120px; |
| | | line-height: 24px; |
| | | margin-right: 10px; |
| | | text-align: right; |
| | | } |
| | | .desc{ |
| | | flex: 1; |