crm-xcx/pages-approve/components/steps.vue

<template>
	<view class="steps-wrap">
		<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-content">
				<view class="step-top-box">
					<view style="width: 50%;">
						<view class="title">{{item.name}}</view>
						<view class="text">{{item.intro}}</view>
					</view>
					<view class="step-user">
						<view v-for="(user,index2) in item.user" :key="user.ApproveUserName" style="display: flex;">
							<view class="avatar">{{user.ApproveUserName}}</view>
							<text class="symbol" v-if="index2!=item.user.length-1">{{item.auditType===1?'/':'+'}}</text>
						</view>
					</view>
				</view>
				
				<view class="step-approve-box">
					<view class="step-approve-item" v-for="approve in item.approve" :key="approve.name">
						<view style="margin-bottom: 10rpx;">审批人：{{approve.name}}</view>
						<view style="margin-bottom: 10rpx;">{{approve.time}}</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		props:{
			data:[]
		},
		computed:{
			stepArr(){
				let arr=[]
				arr=this.data&&this.data.map(item=>{
					let stepCon={
						name:item[0].NodeType==='check'?'审批人':'抄送人',//审批节点标题
						intro:'',//描述
						user:item,//审批节点人列表
						approve:[],//审批人信息{name:'',time:""}
						auditType:1
					}
					if(item[0].NodeType==='check'){
						if(item[0].AuditType===1){
							stepCon.intro=item.length>1?item.length+'人或签':''
							stepCon.auditType=1
						}else if(item[0].AuditType===2){
							stepCon.intro=item.length>1?item.length+'人会签':''
							stepCon.auditType=2
						}
						item.forEach(item2=>{
							if(item2.Status!=='待审批'&&item2.Status!=='已撤回'){
								let time=''
								if(item2.Status==='已驳回'){
									time=`驳回时间：${this.timeFormat(item2.ApproveTime)}`
								}else {
									time=`审批时间：${this.timeFormat(item2.ApproveTime)}`
								}
								let obj={name:item2.ApproveUserName,time:time}
								stepCon.approve.push(obj)
							}
						})
					}
					
					if(item[0].NodeType==='cc'){
						stepCon.intro='抄送'+item.length+'人'
					}
					
					
					return stepCon
				})
				
				// console.log(arr);
				return arr
			}
		},
		methods: {
			timeFormat(e) {
				const time=new Date(e)
				const year=time.getFullYear()
				const month = time.getMonth() + 1 > 9 ? time.getMonth()+1 : '0'+(time.getMonth()+1);
				const day = time.getDate() > 9 ? time.getDate() : "0" + time.getDate();
				const hours=time.getHours() > 9 ? time.getHours():'0'+time.getHours()
				const minutes=time.getMinutes()>9 ?time.getMinutes():'0'+time.getMinutes()
				const seconds=time.getSeconds()>9?time.getSeconds():'0'+time.getSeconds()
				return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`
			}
		},
	}
</script>

<style lang="scss">
	.step-box{
		display: flex;
		position: relative;
	}
	.step-line{
		width: 2rpx;
		background-color: #E1E1E1;
		margin-right: 40rpx;
		flex-shrink: 0;
		position: relative;
		top: 50rpx;
		&::before{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			content: '';
			display: block;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background-color: #E1E1E1;
		}
	}
	.step-content{
		padding: 37rpx 0;
		flex: 1;
		border-bottom: 2rpx solid #e1e1e1;
		font-size: 12px;
		color: #666;
		.title{
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 8rpx;
			color: #333;
		}
	}
	.step-box:last-child{
		.step-content{
			border: none;
		}
		
	}
	.step-box:last-child{
		.step-line{
			width: 0;
		}
	}
	.step-approve-box{
		margin-top: 40rpx;
		.step-approve-item{
			color: #F58D57;
		}
	}
	.step-top-box{
		display: flex;
		justify-content: space-between;
		.step-user{
			display: flex;
			flex-wrap: wrap;
			.avatar{
				padding: 0 16rpx;
				color: #fff;
				background-color: #3385FF;
				border-radius: 8rpx;
				height: 74rpx;
				line-height: 74rpx;
			}
			.symbol{
				font-size: 18px;
				position: relative;
				top: 18rpx;
				margin: 0 10rpx;
			}
		}
	}
</style>