jiaoyuju_fawen/bureau-of-education/pages/postView/approvalProcess/index.vue

<template>
	<view class="approvalProcess">
		<u-navbar ref="uNavbar" :border-bottom="false" :back-icon-color="setNav.backColor" :is-back="setNav.isdisPlayNavTitle" :title-size="setNav.size" :title-bold="setNav.bold" :title="setNav.navTitle" :title-color="setNav.color" :background="setNav"></u-navbar>
		<view class="content">
			<u-time-line>
				<u-time-line-item nodeTop="10">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="u-node" style="background: #009FE8;"></view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title">{{name}}</view>
							<view class="u-order-desc">发文审核申请</view>
							<view class="u-order-time">{{createTime}}</view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="10" v-for="(item, index) in data" :key="index">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="u-node" style="background: #009FE8;"></view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title">{{item.approvalName}}</view>
							<view class="u-order-desc">{{item.nodeName}} - {{item.approvalOperation}}</view>
							<view class="u-order-time">{{item.approveTime}}</view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="10">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="u-node" style="background: #009FE8;"></view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title">等待下一级人员审核中</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setNav:{
					backgroundColor:'#fff',  //背景色
					color:'#333',  //字体颜色
					bold: true,
					size: '36',
					backColor: '#333',
					isdisPlayNavTitle: true, //是否显示返回按钮
					navTitle:'审核流程' //导航标题
				},
				id: '',
				data: [],
				name: '',
				createTime: ''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.name = options.name
			this.getDetail()
		},
		methods: {
			async getDetail() {
				let res = await this.$u.post(`jflow/p/c/task/backlog/detail`, {
					businessCode: this.id
				})
				if (res.resultCode == 0) {
					let data = []
					res.data.guiValue.forEach(item => {
						if (item.nodeName == '开始') {
							this.createTime = item.createTime
						} else {
							item.approvalLists.forEach(({approvalName, approvalOperation, approveTime}) => {
								data.push({
									approvalName,
									approvalOperation,
									approveTime,
									nodeName: item.nodeName
								})
							})
							
						}
					})
					this.data = data
				}
				// if (res.data && res.data.rows) {
				// 	if (this.pageNo == 1) {
				// 		this.data = res.data.rows
				// 		this.total = res.data.total
				// 	} else {
				// 		this.data = this.data.concat(res.data.rows)
				// 	}
				// }
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 100rpx;
	}
	.u-node {
		width: 22rpx;
		height: 22rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #343434;
		font-weight: bold;
		font-size: 28rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);  
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
		margin-top: 20rpx;
	}
</style>