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">
									<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>
						</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 {
				display: flex;
				width: 56rpx;
				height: 56rpx;
				border-radius: 100px;
				margin-bottom: 4rpx;

				.img {
					width: 100%;
					min-width: 30px;
					height: 100%;
					overflow: hidden;
					position: relative;
				}
			}

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

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

		}

	}
</style>