zhxg_app/components/flow-step/flow-step.vue

<template>
	<view class="steps">
		<view class="step" v-for="step in stepList" :key="step.taskId">
			<image v-if="step.finishTime" class="icon" src="../../static/success.png" mode="widthFix"></image>
			<image style="width:34rpx;" v-else class="icon" src="../../static/wating.png" mode="widthFix">
			</image>
			<image class="line" src="../../static/step-line.png" mode="widthFix"></image>
			<view class="right">
				<view class="step-header">
					<text class="task-name">{{step.taskName}}:</text>
					<text class="assignee-name">{{step.assigneeName}}</text>
				</view>
				<view v-if="step.comment && step.comment.comment" class="comment">
					<text class="comment-label">处理意见：</text>
					<text class="comment-text">{{step.comment.comment}}</text>
				</view>
				<view v-if="step.finishTime" class="finish-time">
					<text class="time-label">处理时间：</text>
					<text class="time-text">{{step.finishTime}}</text>
				</view>
			</view>
		</view>
		<view class="loading-more-top" v-if="stepList.length==0">
			<uni-load-more status="loading" />
		</view>
	</view>
</template>

<script>
	import {
		flowRecord
	} from "@/api/flowRecord/flowRecord.js";
	export default {
		name: "flow-step",
		props:["procInsId","deployId"],
		data() {
			return {
				stepList: [], //流程进度列表
			};
		},
		created() {
			console.log(this.procInsId);
			console.log(this.deployId);
			this.getFlowRecord();
		},
		methods:{
			async getFlowRecord() {
				let res = await flowRecord({
					procInsId: this.procInsId,
					deployId: this.deployId
				});
				this.stepList = res.data.flowList.reverse();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.steps {
		margin-top: 20px;

		.step {
			display: flex;
			align-items: flex-start;
			margin-bottom: 50rpx;

			.icon {
				width: 35rpx;
				margin-top: 5rpx;
			}

			.line {
				flex: 0.7;
				margin: 0 10px;
			}

			.right {
				flex: 1.4;

				.step-header {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.task-name {
						color: #9E9E9E;
						margin-right: 10rpx;
						font-size: 28rpx;
					}

					.assignee-name {
						color: #333;
						font-size: 28rpx;
						font-weight: 500;
					}
				}

				.comment {
					margin-bottom: 8rpx;
					padding: 8rpx 12rpx;
					background-color: #f8f9fa;
					border-radius: 8rpx;
					border-left: 3rpx solid #007aff;

					.comment-label {
						color: #666;
						font-size: 24rpx;
						margin-right: 8rpx;
					}

					.comment-text {
						color: #333;
						font-size: 26rpx;
						line-height: 1.4;
					}
				}

				.finish-time {
					.time-label {
						color: #999;
						font-size: 22rpx;
						margin-right: 8rpx;
					}

					.time-text {
						color: #666;
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>