JP-Equipment-Jingli/components/ApproveList.vue

<template>
	<view>
		<!-- 流程 -->
		<view class="process">
			<view class="title">
				流程
			</view>
			<u-time-line>
		
				<u-time-line-item node-top="10" v-for="(item,i) in approveList" :key="i" >
					<template v-slot:node>
						<view>
							<view class="u-node" style="background:#CDCDCD;">
								<!-- 此处为uView的icon组件 -->
								<!-- <u-icon name="checkmark" color="#fff" :size="24"></u-icon> -->
							</view>
						</view>
					</template>
		
					<template v-slot:content>
						<view class="u-order">
							<view class="u-order-desc">
								<view class="level">
									{{item.userName}}
								</view>
								<view class="date">
									{{item.approveTime?item.approveTime:''}}
								</view>
							</view>
							<view class="u-order-time">
								<view class="photo">
									<u-avatar size="56" class="img" :src="item.userImg"></u-avatar>
									
								</view>
								<view class="confirm">
									<u-icon v-if="item.status==-1" name="more-circle-fill" :color="recordStatusColor(-1)"></u-icon>
									
									<u-icon v-if="item.status==0" name="more-circle-fill" :color="recordStatusColor(0)"></u-icon>

									<u-icon v-if="item.status==1" name="checkmark-circle-fill" :color="recordStatusColor(1)"></u-icon>
								<u-icon v-if="item.status==2" name="close-circle-fill" :color="recordStatusColor(2)"></u-icon>
								
								</view>
								<view class="name">
									<view v-if="item.status==-1">未开始</view>
									<view v-if="item.status==0">未审批</view>
									<view v-if="item.status==1">审批通过</view>
									<view v-if="item.status==2">审批驳回</view>
								</view>
							</view>
						</view>
					</template>
				</u-time-line-item>
		
		<u-time-line-item  >
		
					<template v-slot:content >
						<view class="u-order">
							<view class="u-order-desc">
								<view class="level">
									仓库管理
								</view>
								<view class="state" v-if="outRecordDetailObj&&outRecordDetailObj.outRecord&&outRecordDetailObj.outRecord.status==1">
									
									<view v-if="operator.status==0">等待出库</view>
									<view v-if="operator.status==1">出库成功</view>
								</view>
							</view>
							
							<view class="u-order-time" >
								<view class="photo">
									<u-avatar size="56" class="img" :src="operator.userImg"></u-avatar>
								</view>
								<view class="confirm" >
									
									<u-icon v-if="operator.status==0" name="more-circle-fill" :color="recordStatusColor(0)"></u-icon>
								
									<u-icon v-if="operator.status==1" name="checkmark-circle-fill" :color="recordStatusColor(1)"></u-icon>
								
								
								</view>
								
								<view class="name" v-if="outRecordDetailObj&&outRecordDetailObj.outRecord&&outRecordDetailObj.outRecord.status!=0">
									<view v-if="operator.status==0">等待出库</view>
									<view v-if="operator.status==1">出库成功</view>
									
								</view>
								<view class="name" v-else>
									<view >等待审批</view>
			
								</view>
								
							</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
	</view>
</template>

<script>
	import {
		recordStatusColor
	} from '@/apis/status.js'
	
	export default {
		name:"ApproveList",
		props:{
			
			approveList:{
				default: []
			},
			outRecordDetailObj:{}
		},
		data() {
			return {
				 
			};
		},computed:{
			operator(){
				var obj={
					userImg:"",
					status:"",
					name:"",
				}
				var outRecordDetailObj =this.outRecordDetailObj;
				if(outRecordDetailObj&&outRecordDetailObj.outRecord&&outRecordDetailObj.outRecord.status!=0){
					if(outRecordDetailObj.outRecord.status==3){
						obj.status=1;
					}
				}
				
				return obj
			}
		},
		
		methods:{
			recordStatusColor
		}
	}
</script>

<style  scoped lang="scss">
// 流程
	.process {
		background-color: #fff;
		margin-top: 24rpx;
		padding: 24rpx 32rpx;
		padding-bottom:80px;
		.title {
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
		}
        .u-time-axis-item{
			//margin-bottom: 76rpx;
		}
		.u-time-axis {
			//padding: 18rpx 40rpx;
		}

		.u-node {
			width: 18rpx;
			height: 18rpx;
			border-radius: 100rpx !important;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}
		.u-order{
			margin-bottom: 32rpx;
		}
		.u-order-title {
			color: #333333;
			font-weight: bold;
			font-size: 32rpx;
		}

		.u-order-desc {
			margin-bottom: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.level {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}

			.date {
				color: rgba(119, 119, 119, 1);
			}

			.state {
				color: rgba(255, 121, 0, 1);
			}
		}

		.u-order-time {
			width: 160rpx;
			color: #777777;
			font-size: 28rpx;
			margin-top: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.photo {
				width: 56rpx;
				height: 56rpx;
				border-radius: 100px;
				margin-bottom: 4rpx;

				.img {
					width: 100%;
					height: 100%;
					overflow: hidden;
					position: relative;
				}
			}

			.confirm {
				position: absolute;
				top: 46rpx;
				left: 56rpx;
			}

			.name {
				color: rgba(51, 51, 51, 1);
				font-size: 24rpx;
			}

		}
      
	}
</style>