warst/warst-h5/pages/approval/approvalApply/footerProcess.vue

<template>
	<view class="flow-chart">
		<view
			class="h-tip-txt"
			v-if="condList.length && infoDto.length === 0"
		>
			必填条件信息填写后，流程自动显示
		</view>
		<!--数据为空 -->
		<status-view
			v-else-if="!infoDto || infoDto.length === 0"
		></status-view>
		<template v-else>
			<view class="flow-title">流程图</view>
			<u-steps
				:current="-1"
				dot
				direction="column"
				v-if="infoDto && infoDto.length"
			>
				<u-steps-item :key="idx" v-for="(item, idx) in infoDto">
					<view
						v-if="item && item.list.length"
						class="desc-content"
						slot="desc"
					>
						<!--节点类型-->
						<view class="node-type">
							{{ item.nodeType }}
						</view>
						<view class="userinfo-box">
							<view
								class="u-card-item"
								:key="i"
								v-for="(task, i) in item.list"
							>
								<Avatar :info="task"></Avatar>
								<view class="u-name">{{ task.userName }}</view>
							</view>
						</view>
					</view>
				</u-steps-item>
			</u-steps>
		</template>
	</view>
</template>

<script>
import Avatar from '@/pages/approval/com/Avatar.vue';
import StatusView from '@/components/statusView/index.vue';
export default {
	name: 'footerProcess',
	components: {
		StatusView,
		Avatar,
	},
	props: {
		condList: {
			default: () => [],
			type: Array,
		},
		infoDto: {
			default: () => [],
			type: Array,
		},
	},
};
</script>

<style scoped lang="scss">
.flow-chart {
	background-color: #fff;
	padding: 20rpx;
	margin-top: 20rpx;
	border-radius: 6px;

	.h-tip-txt {
		color: $u-tips-color;
		font-size: 13px;
	}

	.flow-title {
		margin-bottom: 30rpx;
		position: relative;
		font-size: 15px;
		color: #333333;
		&:before {
			content: '';
			position: absolute;
			bottom: -6px;
			left: 0;
			width: 14px;
			height: 3px;
			background-color: #436ff6;
			border-radius: 6px;
		}
	}

	.desc-content {
		background-color: #fff;

		.node-type {
			font-size: 14px;
			color: #152f62;
			margin-bottom: 20rpx;
		}

		.userinfo-box {
			display: flex;
			flex-wrap: wrap;
			background-color: #f8f9fc;
			padding: 24rpx;
			border-radius: $bd-radius;

			.u-card-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: 20rpx;

				&:first-child {
					margin-left: 0;
				}

				.u-name {
					font-size: 14px;
					color: #595c62;
				}
			}
		}
	}
}
</style>