|
@@ -3,7 +3,7 @@
|
|
<view class="steps-wrap">
|
|
<view class="steps-wrap">
|
|
<view class="step-box" v-for="(item,index) in stepArr" :key="index">
|
|
<view class="step-box" v-for="(item,index) in stepArr" :key="index">
|
|
<view class="step-line" v-if="stepArr.length>1"></view>
|
|
<view class="step-line" v-if="stepArr.length>1"></view>
|
|
- <view class="step-content">
|
|
|
|
|
|
+ <view class="step-content" :style="{borderTop:item.name==='抄送人'?'2rpx dashed #e1e1e1':'2rpx solid #e1e1e1'}">
|
|
<view class="step-top-box">
|
|
<view class="step-top-box">
|
|
<view style="width: 50%;">
|
|
<view style="width: 50%;">
|
|
<view class="title">{{item.name}}</view>
|
|
<view class="title">{{item.name}}</view>
|
|
@@ -49,7 +49,9 @@
|
|
computed:{
|
|
computed:{
|
|
stepArr(){
|
|
stepArr(){
|
|
let arr=[]
|
|
let arr=[]
|
|
|
|
+ let count=0
|
|
arr=this.data&&this.data.map(item=>{
|
|
arr=this.data&&this.data.map(item=>{
|
|
|
|
+ item[0].NodeType==='check'&&count++
|
|
let stepCon={
|
|
let stepCon={
|
|
name:item[0].NodeType==='check'?'审批人':'抄送人',//审批节点标题
|
|
name:item[0].NodeType==='check'?'审批人':'抄送人',//审批节点标题
|
|
intro:'',//描述
|
|
intro:'',//描述
|
|
@@ -86,6 +88,28 @@
|
|
|
|
|
|
return stepCon
|
|
return stepCon
|
|
})
|
|
})
|
|
|
|
+
|
|
|
|
+ // 处理审批节点标题描述 若有多级审批 则 为 一级审批 二级审批 若只有一级 则 不变
|
|
|
|
+ if(count>1){
|
|
|
|
+ let tag=0
|
|
|
|
+ arr.forEach(item=>{
|
|
|
|
+ if(item.name==='审批人'){
|
|
|
|
+ tag++
|
|
|
|
+ switch (tag) {
|
|
|
|
+ case 1:
|
|
|
|
+ item.name='一级审批人'
|
|
|
|
+ break;
|
|
|
|
+ case 2:
|
|
|
|
+ item.name='二级审批人'
|
|
|
|
+ break;
|
|
|
|
+ case 3:
|
|
|
|
+ item.name='三级审批人'
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
return arr
|
|
return arr
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -169,7 +193,7 @@
|
|
.step-content{
|
|
.step-content{
|
|
padding: 37rpx 0;
|
|
padding: 37rpx 0;
|
|
flex: 1;
|
|
flex: 1;
|
|
- border-bottom: 2rpx solid #e1e1e1;
|
|
|
|
|
|
+ border-top: 2rpx solid #e1e1e1;
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
color: #666;
|
|
color: #666;
|
|
.title{
|
|
.title{
|
|
@@ -179,9 +203,9 @@
|
|
color: #333;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .step-box:last-child{
|
|
|
|
|
|
+ .step-box:first-child{
|
|
.step-content{
|
|
.step-content{
|
|
- border: none;
|
|
|
|
|
|
+ border: none !important;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
@@ -225,7 +249,7 @@
|
|
.symbol{
|
|
.symbol{
|
|
font-size: 18px;
|
|
font-size: 18px;
|
|
position: relative;
|
|
position: relative;
|
|
- top: 18rpx;
|
|
|
|
|
|
+ top: 12rpx;
|
|
margin: 0 10rpx;
|
|
margin: 0 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|