JP-Equipment-Jingli/components/ApproveList.vue

<template>
	<view>
		<!-- 流程 -->
		<view class="process" v-if="outRecordDetailObj">
			<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">
									<template v-for="(item2,index) in item.approveUserList">
										{{index!=0?',':''}}{{item2.name}}

									</template>
								</view>
								<view class="date">
									{{item.approveTime?item.approveTime:''}}
								</view>
							</view>

							<view class="u-order-time">
								<view class="photo">
									<template v-for="(item2,index) in item.approveUserList">
										<u-avatar size="56" class="img" :src="item2.headImg" :key="index"></u-avatar>
									</template>
								</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 class="signUrl" v-if="item.signUrl">
									<img :src="item.signUrl" >
								</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!=0">

									<view v-if="operator.status==1"  style="color: #4CAF50" >出库成功</view>
									
									<view v-else>等待出库</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==1" >出库成功</view>
									
									<view v-else>等待出库</view>

								</view>
								<view class="name" v-else>
									<view>等待审批</view>

								</view>

							</view>
						</view>
					</template>
				</u-time-line-item>
				
				<u-time-line-item v-if="outRecordDetailObj&&outRecordDetailObj.outUser">
				
					<template v-slot:content>
						<view class="u-order">
							<view class="u-order-desc">
								<view class="level">
									{{outRecordDetailObj.outUser.name}}
								</view>
								<view class="state"
									v-if="outRecordDetailObj&&outRecordDetailObj.outRecord&&(outRecordDetailObj.outRecord.status==8||outRecordDetailObj.outRecord.status==3)">
				
									<view v-if="outRecordDetailObj.outRecord.status==8">等待签收</view>
									<view v-else  style="color: #4CAF50" >确认签收</view>
								</view>
							</view>
				
							<view class="u-order-time">
								<view class="photo">
									<u-avatar size="56" class="img" :src="outRecordDetailObj.outUser.headImg"></u-avatar>
								</view>
								<view class="confirm">
				
									
				
									<u-icon v-if="outRecordDetailObj&&outRecordDetailObj.outRecord&&outRecordDetailObj.outRecord.status==3" name="checkmark-circle-fill"
										:color="recordStatusColor(1)"></u-icon>
									<u-icon v-else name="more-circle-fill"
										:color="recordStatusColor(0)"></u-icon>
				
								</view>
				
								<view class="name"
									v-if="outRecordDetailObj&&outRecordDetailObj.outRecord&&outRecordDetailObj.outRecord.status==3">
									
									<view >签收成功</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: {
				approveList:[],
				outRecord:{},
				outUser:{},
			}
		},
		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||outRecordDetailObj.outRecord.status == 8) {
						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 {
				display: flex;
				width: 56rpx;
				height: 56rpx;
				border-radius: 100px;
				margin-bottom: 4rpx;

				.img {
					width: 100%;
					min-width: 25px;
					height: 100%;
					overflow: hidden;
					position: relative;
				}
			}
			.signUrl{
				border: 1px solid;
				margin-left: 40px;
				img{
					width:200rpx;
					height:80rpx;
				}
			}
			.confirm {
				position: absolute;
				top: 46rpx;
				left: 56rpx;
			}

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

		}

	}
</style>