realty/virgo.wzfrontend/console/src/components/flow/flow.vue

<template>
	<div class="flow-index">
		<div class="flow" v-if="type === 'insert'">
			<div class="flow-button">
				<el-button size="medium" type="primary" @click="visible = true">
					<i class="iconfont huifont-xinzeng"></i>添加审核人员
				</el-button>
			</div>
			<div class="flow-box">
				<div class="flow-item" v-for="(item,index) in list" :key="index">
					<div class="user-avatar">
						<avatar :user="item" :size="12"></avatar>
					</div>
					<div class="user-name">
						<div>{{item.name}}</div>
						<p>{{item.partName}}</p>
					</div>
					<div class="user-line" v-if="index < list.length-1"></div>
				</div>
			</div>
			<el-dialog title="审核人选择" :visible.sync="visible" width="880px" :append-to-body="true">
				<select-user @callback="callBack" v-if="visible" :list="list"></select-user>
			</el-dialog>
		</div>
		<div class="flow-list" v-else>
			<div class="flow-box">
				<div class="flow-item" v-for="(item,index) in flowlist" :key="index">
					<div class="user-avatar-box">
						<div class="user-avatar">
							<avatar :user="item" :size="12"></avatar>
						</div>
						<div :class="'user-avatar-status '+ returnStatus(item.status).className">
							<i :class="'iconfont '+returnStatus(item.status).icon"></i>
						</div>
					</div>
					<div class="flow-content">
						<div class="user-name">
							<div>{{item.name}}</div>
							<p><span>{{item.partName}}</span><span>{{item.date}}</span></p>
						</div>
						<div class="user-content" v-if="item.remark">
							<div class="remark">
								{{item.remark}}
							</div>
							<div class="remark-file" v-if="item.file && item.file.length > 0">
								<upload :list="item.file" type="preview"></upload>
							</div>
						</div>
					</div>
					<div class="user-line" v-if="index < flowlist.length-1"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import selectUser from '@/components/common/selectUser'
	import avatar from '@/components/common/avatar'
	import upload from '@/components/common/upload'
	export default {
		props: ['type', 'flowlist'],
		data() {
			return {
				list: [],
				visible: false
			}
		},
		created() {
			if (!!this.flowlist && this.type == 'insert') this.list = this.flowlist;
		},
		methods: {
			callBack(data) {
				this.visible = false;
				if (data) this.list = data;
			},
			returnStatus(state) {
				let className = '',
					icon = '';
				switch (state) {
					case 0:
						className = 'info';
						icon = 'huifont-jinhangzhong';
						break;
					case 1:
						className = 'success'
						icon = 'huifont-tongguo';
						break;
					case 2:
						className = 'failed'
						icon = 'huifont-a-butongguojujue';
						break;
					case 3:
						className = 'waiting'
						icon = 'huifont-jinhangzhong';
						break;
					default:
						className = 'info'
						icon = 'huifont-jinhangzhong';
						break;
				}
				return {
					className: className,
					icon: icon
				};
			}
		},
		watch: {
			flowlist() {
				if (!!this.flowlist && this.type == 'insert') this.list = this.flowlist;
			}
		},
		components: {
			selectUser,
			avatar,
			upload
		},
	}
</script>

<style lang="scss">
	.flow-index {
		width: 100%;
		height: 100%;

		.flow-list {
			padding: 10px 20px;

			.flow-item {
				position: relative;
				display: flex;

				.user-avatar-box {
					position: relative;

					.user-avatar {
						width: 32px;
						height: 32px;
						background: #4958de;
						border-radius: 50%;
						margin-right: 10px;
						margin-top: 8px;
						display: flex;
						align-items: center;
						justify-content: center;
						overflow: hidden;

						i {
							font-size: 20px;
						}
					}

					.user-avatar-status {
						width: 12px;
						height: 12px;
						border-radius: 50%;
						border: 1px solid #fff;
						position: absolute;
						top: 30px;
						right: 10px;
						display: flex;
						align-items: center;
						justify-content: center;

						i {
							font-size: 8px;
							color: #fff;
						}
					}

					.user-avatar-status.success {
						background: $--color-green;
					}

					.user-avatar-status.failed {
						background: $--color-red;
					}

					.user-avatar-status.waiting {
						background: $--color-orange;
					}

					.user-avatar-status.info {
						background: #4C4F59;
					}
				}


				.flow-content {
					flex: 1;
					width: 0;


					.user-name {
						height: 48px;
						display: flex;
						flex-direction: column;
						justify-content: center;

						p {
							font-size: 12px;
							opacity: 0.6;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}

					.user-content {
						background: rgba(50, 56, 68, 0.2);
						border-radius: 8px;
						padding: 13px;

						.remark {
							font-size: 12px;
							line-height: 17px;

						}

						.remark-file {
							margin-top: 12px;
						}
					}
				}

				.user-line {
					width: 1px;
					border-left: 1px dashed #374156;
					position: absolute;
					top: 40px;
					bottom: -8px;
					left: 15px;
				}
			}
		}

		.flow {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;


			.flow-button {
				padding: 0 20px 10px 20px;

				.el-button {
					padding-left: 12px;

					span {
						display: flex;
						align-items: center;
					}

					.huifont-xinzeng {
						padding-right: 10px;
					}
				}
			}

			.flow-box {
				flex: 1;
				height: 0;
				padding: 10px 20px 0px 20px;
				overflow-y: auto;
			}

			.flow-item {
				height: 48px;
				display: flex;
				align-items: center;
				position: relative;

				.user-avatar {
					width: 32px;
					height: 32px;
					background: #4958de;
					border-radius: 50%;
					margin-right: 10px;
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: hidden;

					i {
						font-size: 20px;
					}
				}


				.user-name {
					flex: 1;
					width: 0;

					p {
						font-size: 12px;
						opacity: 0.6;
					}
				}

				.user-line {
					width: 2px;
					background-color: #374156;
					position: absolute;
					top: 40px;
					bottom: -8px;
					left: 15px;
				}
			}
		}
	}
</style>