移动端V1.0

components/flow-step/flow-step.vue

@@ -0,0 +1,76 @@
+<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">
+				<text>{{step.taskName}}:</text>
+				<text>{{step.assigneeName}}</text>
+			</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: center;
+			margin-bottom: 50rpx;
+
+			.icon {
+				width: 35rpx;
+			}
+
+			.line {
+				flex: 0.7;
+				margin: 0 10px;
+			}
+
+			.right {
+				flex: 1.4;
+
+				text:first-child {
+					color: #9E9E9E;
+					margin-right: 10rpx;
+				}
+			}
+		}
+	}
+</style>