jp-railway/components/ApproveView.vue

<template>
	<view>
		<view class="approveMain">
			<view class="approveMain_text">审批流程</view>
			<u-time-line>
		
				<u-time-line-item node-top="10" v-for="(item,i) in activityList" :key="i">
					
					<template v-slot:node>
						<view>
							<view class="u-node"  :class="{
								viewc2:item.status==1,
							
							}">
								<!-- 此处为uView的icon组件 -->
								<!-- <u-icon name="checkmark" color="#fff" :size="24"></u-icon> -->
							</view>
						</view>
					</template>
					<template v-slot:content>
						<view class="approveItem_main">
							<view class="approveItem_a1">
								<view class="approveItem_a1_text1"  :class="{
								
								viewc3:item.status==1
								}" >
									<view class="approveItem_a1_text1_a" >
										{{item.activityName}}<span class="approveItem_a1_text1or" v-if="item.operation=='or'&&((item.wfProcinstActUserList&&item.wfProcinstActUserList.length>1)||(item.wfProcinstActRegUserList&&item.wfProcinstActRegUserList.length>1))">或签</span>
									</view>
									<view class="approveItem_a1_text1_b" v-if="!initStart&&!item.isAlterChecker" >
											是否跳过此环节<u-switch v-model="item.checked" size="25"></u-switch>
									</view>
								</view>
								<view class="approveItem_a1_text2" v-if="item.action!=0" >
									{{item.finishTime}}
								</view>
								<view class="approveItem_a1_text3">
									
									<view class="approveItem_a1_text3Img"  v-for="(it,j) in (item.wfProcinstActRegUserList||item.wfProcinstActUserList)"
										:key="i+'_'+j" >
										<template >
											<!-- -->
											
											<view  class="approveItem_a1_text3Img_item1" >
												<view class="approveItem_a1_text3Img_item0"
												v-if="!initStart&&(item.wfProcinstActRegUserList&&item.wfProcinstActRegUserList.length>1)&&!item.isAlterChecker">
													
												
													<u-checkbox
													
															@change="checkboxChange" 
														v-model="it.checked" 
														 :key="i+'_'+j" 
													
														></u-checkbox>
												</view>
												<view  class="approveItem_a1_text3Img_item1_1">
													<u-avatar size="50" :src="it.headImg" class="img"></u-avatar>
													<u-badge size="mini" count="x" type="info" :absolute="false" v-if="0">
													
													</u-badge>
												</view>
												<view class="approveItem_a1_text3Img_item1_2">
													<view class="approveItem_a1_text3Img_item1_2a"
													> {{it.orgName||it.departmentName}}</view>
													<view class="approveItem_a1_text3Img_item1_2b"
													><span v-if="it.type==2||it.processType==2" class="viewc">抄送</span>{{it.name||it.personName}}</view>
													
												</view>
											</view>
										</template>
										 
										<view v-if="initStart&&it.type==1&&it.action!=0"  class="approveItem_a1_text3Img_item2" >
											<view>
												审批结果：<span :style="it.action==1?'color:#4CAF50':'color:red'">[{{it.action==1?'通过':'退回'}}]</span>
												
											</view>
											<view>{{it.finishTime}}</view>
											<view >
												审批意见：<br/>{{it.remark}}
											
											</view>
										</view>
									</view>
		
		
								</view>
							</view>
							<view class="approveItem_a2" v-if="0">
		
								<view class="a2_span" @click="gotoSelectPerson(item)">+</view>
								<span class="a2_span_2">*</span>
							</view>
		
						</view>
		
					</template>
				</u-time-line-item>
		
		
			</u-time-line>
			<u-divider>已经到底了</u-divider>
		</view>
	</view>
</template>

<script>
	export default {
		name:"approve",
		props:{
			edit: 0,
			skip: {
				type: Boolean,
				default: false
			},
			initStart: {
				type: Boolean,
				default: true
			},
			activityList: {
				type: Array,
				default () {
					return [];
				}
			},
			status:""
		},
		data() {
			return {
				
			};
		},methods:{
			checkboxChange(){
				this.$forceUpdate()
			}
		}
	}
</script>

<style  scoped lang="scss">
	
	
	
	.approveMain_text {
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		padding-bottom: 20rpx;
		padding-left: 32rpx;
		border-bottom: 1px solid #C8C8C8;
		margin-bottom: 16rpx;
		// padding-top: 32rpx;
	}
	.viewc{
		    background-color: #4CAF50;
		    color: #fff;
		    padding: 0px 2px;
		    border-radius: 8rpx;
			font-size: 20rpx;
	}
	
	.approveMain {
		background: #fff;
		padding-bottom: 180rpx;
		padding-top: 20rpx;
	
		.approveItem_main {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
			margin-right: 32rpx;
	
			.approveItem_a1 {
				    width: 100%;
				.approveItem_a1_text1 {
					  display: flex;
					  align-items: center;
					  justify-content: space-between;
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
					.approveItem_a1_text1_a{
						display: flex;
						align-items: center;
					}
					.approveItem_a1_text1_b{
						color: #333333;
						display: flex;
						font-size: 20rpx;
					}
					.approveItem_a1_text1or{
						background-color: #FF5722;
						color: #fff;
						padding: 0px 2px;
						border-radius: 8rpx;
						font-size: 20rpx;
					}
				}
	
				.approveItem_a1_text2 {
					margin-bottom: 16rpx;
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
				}
	
				.approveItem_a1_text3 {
					color: rgba(51, 51, 51, 1);
					font-size: 24rpx;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
	
					.approveItem_a1_text3Img {
						margin-right: 30rpx;
						margin-top: 10rpx;
						 margin-bottom: 10rpx;
						    display: flex;
							    align-items: center;
								width: 100%;
								    justify-content: space-between;
								.approveItem_a1_text3Img_item0{
										display: flex;
										  align-items: center;
										      width: 40rpx;
								}
							.approveItem_a1_text3Img_item1{
								display: flex;
							    align-items: center;
								
								.approveItem_a1_text3Img_item1_2{
									margin-left: 8rpx;
									.approveItem_a1_text3Img_item1_2a{
										color:#3a7cf7 ;
										font-size: 28rpx;
										
									}
									.approveItem_a1_text3Img_item1_2b{
										font-size: 24rpx;
									}
								}
							}
							.approveItem_a1_text3Img_item2{
								    background: #e0dada;
								    padding: 4rpx;
								    width: 60%;
							}
						/deep/.u-badge {
							position: relative !important;
							top: -40rpx !important;
							right: 10rpx !important;
						}
	
					}
	
				}
			}
	
			.approveItem_a2 {
				.a2_span {
					border-radius: 4px;
					text-align: center;
					border: 1px solid rgba(227, 227, 227, 1);
					width: 72rpx;
					height: 72rpx;
					line-height: 60rpx;
					font-size: 48rpx;
					color: #9F9F9F;
				}
	
				.a2_span_2 {
					position: relative;
					top: -84rpx;
					left: 60rpx;
					color: red;
				}
			}
		}
	
	}
	
	.u-node {
		
		width: 18rpx;
		height: 18rpx;
		border-radius: 100rpx !important;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	
	.viewc2{
		width: 27rpx;
		height: 27rpx;
			background: #4CAF50;
		
	}
	.viewc3{
		color: #4CAF50  !important;
	}
</style>