aiot-app/pages/home/wt/components/detail.vue

<template>
	<view class="havedone-container">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="流程详情" @clickLeft="back"  background-color="#157A2C" color="#fff"></uni-nav-bar>
		<view class="list-wrapper">
			<rxl-timeline>
				<rxl-timeline-item v-for="(item, index) in tasks" :key="index" :color="getTimelineItemIcon(item)" :timestamp="item.createTime">
					<template #body>
						<p style="font-weight: 700;display: block;">{{item.taskDefinitionKey?'流程节点':'发起人'}}：{{ item.name }}</p>
						<view style="{ padding: '10px';display: flex;flex-direction: column; }">
							<span>
								<label v-if="item.assigneeUser"
									style="font-weight: normal;display: flex;flex-direction: row;">
									审批人：{{ item.assigneeUser.nickname }}
									<u-tag style="margin-left: 10rpx;" type="info" :text="item.assigneeUser.deptName"
										size="mini"></u-tag>
								</label>
							</span>
							<span>
								<label v-if="item.endTime" style="font-weight: normal">审批时间：</label>
								<label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
									{{ item.endTime }}</label>
							</span>
							<span>
								<label v-if="item.durationInMillis" style=" font-weight: normal">耗时：</label>
								<label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
									{{ getDateStar(item.durationInMillis) }}
								</label>
							</span>
							<p v-if="item.reason">
								<u-tag :type="getTimelineItemType(item)" :text="item.reason"></u-tag>
							</p>
						</view>
					</template>

				</rxl-timeline-item>
			</rxl-timeline>


		</view>



	</view>
</template>

<script>
	import {
		getTaskListByProcessinstanceid
	} from '@/api/wt/index.js'
	import {
		getDates
	} from '@/utils/utils.js'
	export default {
		components: {},
		data() {
			return {
				tasks: []
			}
		},
		onLoad(processInstanceId) {
			this.getInfo(processInstanceId)
		},
		methods: {
			getChildren(data) {
				const arr = [];
				(data || []).forEach((item) => {
				if (item.children && item.children.length > 0) {
					arr.push(...this.getChildren(item.children));
				}
				arr.push(item);
				});
				return arr;
			},
			async getInfo(processInstanceId) {
				// 审批记录
				let data = await getTaskListByProcessinstanceid(processInstanceId)
				// 移除已取消的审批
				data.forEach((task) => {
					// if (task.result !== 4) {
						// this.tasks.push(task);
						this.tasks.push(...this.getChildren([task]));
					// }
				});
				// 排序，将未完成的排在前面，已完成的排在后面；
				this.tasks.sort((a, b) => {
					// 有已完成的情况，按照完成时间倒序
					if (a.endTime && b.endTime) {
						return b.endTime - a.endTime;
					} else if (a.endTime) {
						return 1;
					} else if (b.endTime) {
						return -1;
						// 都是未完成，按照创建时间倒序
					} else {
						return b.createTime - a.createTime;
					}
				});

				// 需要审核的记录
				let userInfo = wx.getStorageSync("userInfo");
	
				this.tasks.forEach((task) => {
					if (task.result !== 1 && task.result !== 6) {
						// 只有待处理才需要
						return;
					}
					if (!task.assigneeUser || task.assigneeUser.id !== userInfo.userId) {
						// 自己不是处理人
						return;
					}
				});

				console.log('tasks~~~~', this.tasks)
			},
			getTimelineItemIcon(item) {
				if (item.result === 1) {
					return '';
				}
				if (item.result === 2) {
					return 'green';
				}
				return '';
			},
			getTimelineItemType(item) {
				if (item.result === 1) {
					return 'waiting';
				}
				if (item.result === 2) {
					return 'success';
				}
				if (item.result === 3) {
					return 'cancel';
				}
				if (item.result === 4) {
					return 'info';
				}
				if (item.result === 5) {
					return 'warn';
				}
				if (item.result === 6) {
					return 'default';
				}
				return '';
			},
			getDateStar(ms) {
				return getDates(ms);
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>