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

<template>
<view>
	<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" :style="{borderTop:item.name==='抄送人'?'2rpx dashed #f3f0f0':'2rpx solid #e1e1e1'}">
				<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 @click="handleViewAllUser(item.allUser)" v-if="item.allUser.length>2" class="avatar" style="margin-right:10rpx;width:80rpx">全部</view> 
						<view v-for="(user,index2) in item.user" :key="user.ApproveUserName" style="display: flex;">
							<view class="avatar">
								{{user.ApproveUserName==='admin'?user.ApproveUserName:user.ApproveUserName.slice(-2)}}
								<!-- <text class="whole-name">{{user.ApproveUserName}}</text> -->
							</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>
	<van-popup :show="show" @close="show=false" position="bottom" round custom-style="height: 50%;">
			<div class="alluser-wrap flex">
				<view class="avatar" v-for="item in temUser" :key="item.ApproveUserName">
					{{item.ApproveUserName==='admin'?item.ApproveUserName:item.ApproveUserName.slice(-2)}}
					<!-- <text class="whole-name">{{item.ApproveUserName}}</text> -->
				</view>
			</div>
		</van-popup>
</view>
</template>

<script>
	export default{
		props:{
			data:[]
		},
		computed:{
			stepArr(){
				let arr=[]
				let count=0
				arr=this.data&&this.data.map(item=>{
					item[0].NodeType==='check'&&count++
					let stepCon={
						name:item[0].NodeType==='check'?'审批人':'抄送人',//审批节点标题
						intro:'',//描述
						user:item.slice(0,2),//审批节点人列表
						allUser: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
				})

				// 处理审批节点标题描述  若有多级审批 则 为 一级审批 二级审批 若只有一级 则 不变
				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 || []
			}
		},
		data () {
			return {
				show:false,
				temUser:[]		
			}
		},
		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}`
			},

			handleViewAllUser(e){
				this.temUser=e
				this.show=true
			}
		},
	}
</script>

<style lang="scss">
	.alluser-wrap{
		flex-wrap: wrap;
		padding: 20px;
		// min-height: 50vh;
		.avatar{
			padding: 0 16rpx;
			color: #fff;
			background-color: #3385FF;
			border-radius: 8rpx;
			height: 74rpx;
			line-height: 74rpx;
			position: relative;
			margin-right: 20rpx;
			margin-bottom: 50rpx;
			.whole-name{
				position: absolute;
				top: 105%;
				color: #666;
				font-size: 12px;
				left: 50%;
				transform: translateX(-50%);
				line-height: 1;
				min-width: 80rpx;
				text-align: center;
			}
		}
	}
	.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-top: 2rpx solid #e1e1e1;
		font-size: 12px;
		color: #666;
		.title{
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 8rpx;
			color: #333;
		}
	}
	.step-box:first-child{
		.step-content{
			border: none !important;
		}
		
	}
	.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;
				position: relative;
				.whole-name{
					position: absolute;
					top: 105%;
					color: #666;
					font-size: 12px;
					left: 50%;
					transform: translateX(-50%);
					line-height: 1;
					min-width: 80rpx;
					text-align: center;
				}
			}
			.symbol{
				font-size: 18px;
				position: relative;
				top: 12rpx;
				margin: 0 10rpx;
			}
		}
	}
</style>