palletApp/components/process.vue

<template>
	<view class="noTabBarPage">
		<view class="cu-timeline" style="margin-bottom: 10upx;padding:20rpx 0">
			<view class="textjd">始</view>
			<block v-for="(item,idx) in buslinks" :key="idx">
				<view class="cu-item" :class="item.color">
					<view class="text-xh">
					    {{ idx+1 }}
					</view>
					<view class="content">
						<view class="con">
							<text v-if="item.stepContent" class="texttop" style="font-weight: 600; margin-right: 16rpx;">
								{{item.stepContent}}
							</text>
							<text v-if="item.result" class="kuang" :class="item.b2">
								<text class="kuang1" :class="item.b1">{{item.result}}</text>
							</text>
						</view>
						<view style="margin-top:10rpx">
							<text v-if="item.name" class="texttop" style="margin-right: 8rpx;color:#446ea0"> {{item.name}} {{item.dept?'/':''}}</text>
							<text v-if="item.dept" class="texttop" style="margin-right: 8rpx;color:#446ea0"> {{item.dept}}</text>
							<text v-if="item.dotime" class="texttop" style="margin-left: 8rpx;color:#828E99"> {{(item.dotime).substr(0,16)}}</text>
						</view>
						<view v-if="item.remark">
							<text class="textremark" style="margin-right: 6rpx;"> {{item.stepContent=='整改完成'?'整改内容：':(item.stepContent=='整改已验证'?'验证内容：':'审批意见：')}}</text>
							<text class="textremark"> {{item.remark}}</text> 
						</view>
					</view>
				</view>
			</block>
			<view v-if="ifend" class="textjd endall">末</view>
			<view v-else class="textjd end"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
		   range: {
		     type: Array,
		     default: function () {
		       return [];
		     }
		   },
		   ifend: {
			   type: Boolean,
			   default: false,
		   }
		},
		data() {
			return {
				buslinks:[]
			}
		},
		mounted() {
		  this._initTree();
		},
		watch: {
			range(list) {
			  this._initTree(list);
			},
			deep: true, // 深度监听
			immediate: true, // 初次监听即执行
		},
		methods: {
			_initTree(range = this.range) {
				this.buslinks=[];
				if (range.length > 0) {
					range.forEach((item,idx)=>{
						var cell={};
						var result='',b1 = 'blue1',b2 = 'blue2',color = "line-blue";
						if (item.opinionType == '0') {
							// 置灰流程
							result="";
							b1 = '';
							b2 = '';
							color = "line-grey";
						}
						else if (item.opinionType == '1') {
							// 同意
							result="同意";
							b1 = 'green1';
							b2 = 'green2';
							color = "line-blue";
						}
						else if(item.opinionType == '2'){
							// 不同意
							result="不同意";
							b1 = 'red1';
							b2 = 'red2';
							color = "line-red";
						}
						else if(item.opinionType == '3'){
							// 完成
							result="完成";
							b1 = 'green1';
							b2 = 'green2';
							color = "line-blue";
						}
						else if(item.opinionType == '4'){
							// 已确认
							result="已确认";
							b1 = 'blue1';
							b2 = 'blue2';
							color = "line-blue";
						}
						else if(item.opinionType == '5'){
							// 开始整改
							result="开始整改";
							b1 = 'blue1';
							b2 = 'blue2';
							color = "line-blue";
						}
						else if(item.opinionType == '6'){
							// 整改完成
							result="整改完成";
							b1 = 'blue1';
							b2 = 'blue2';
							color = "line-blue";
						}
						else if(item.opinionType == '7'){
							// 司机开始
							result="司机开始";
							b1 = 'blue1';
							b2 = 'blue2';
							color = "line-blue";
						}
						else if(item.opinionType == '8'){
							// 司机结束
							result="司机结束";
							b1 = 'blue1';
							b2 = 'blue2';
							color = "line-blue";
						}
						else {
							if (item.isStart&&item.isStart=='1') {
								// 发起申请
							    result="已申请";
								color = "line-blue";
							}
							else{
								// 待审批
								result="待审批";
								color = "";
							}
							b1 = 'blue1';
							b2 = 'blue2';
						}
						
						cell={
							name:  item.name,
							dept:  item.dept,
							stepContent: item.stepContent,// 审批内容
							dotime: item.dotime? item.dotime:"",
							result: result,
							remark:  item.remark? item.remark:"",
							b1: b1,
							b2: b2,
							color: color
						};
						console.log(item)
						this.buslinks.push(cell);
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.noTabBarPage{
		width: 100%;
		background: url('@/static/images/pagebackimg.jpg') no-repeat top center ;
		background-size:100% 100%;
	}
	.cu-timeline>.cu-item.line-blue::after{
		background-color:#347ACF;
	}
	.cu-timeline>.cu-item.line-grey::after{
		background-color:#FFF;
		border-left:1rpx dashed #CCC;
	}
	.cu-timeline>.cu-item.line-red::after{
		background-color:#da533e;
	}
	.text-xh{
		left:34rpx!important;
	}
	.line-grey{
		color:#b0b0b0 !important;
	}
	.line-grey .text-xh{
		border:1rpx dashed #CCC;
		color:#b0b0b0;
	}
	.line-grey .texttop{
		color:#b0b0b0 !important;
	}
	.line-blue .text-xh{
		border:1rpx solid #347ACF;
		color:#347ACF;
	}
	.line-red .text-xh{
		border:1px solid  #da533e;
		color:#da533e;
	}
	.blue1{
		border:1px solid #347acf;
	    color:#347acf;
	}
	.blue2{
	    border:2px solid #347acf;
	}
	.green1{
	    border:1px solid #28994e;
	    color:#28994e;
	}
	.green2{
	    border:2px solid #28994e;
	}
	.red1{
	    border:1px solid #da533e;
	    color:#da533e;
	}
	.red2{
	    border:2px solid #da533e;
	}
	.orange1{
	    border:1px solid #edab26;
	    color:#edab26;
	}
	.orange2{
	    border:2px solid #edab26;
	}
	.kuang{
	    padding:2px 2px 3px 2px;
	    margin-right:5px;
	    .kuang1{
	        padding:1px;
	        font-size:12px;
	    }
	}
	.con{
		width: 100%;
	}
	.cu-timeline>.cu-item{
		padding: 30rpx 30rpx 30rpx 96rpx !important;
	}
	.cu-timeline>.cu-item::before{
		left: 34rpx!important;
	}
	.cu-timeline>.cu-item::after{
		left: 60rpx!important;
	}
	.cu-timeline>.cu-item>.content{
		padding:25rpx 20rpx;
	}
	.texttop{
		color:#000;
	}
	.textbottom{
		color:#347ACF;
		font-weight: 600;
	}
	.textbottomred{
		color:#ff0000;
		font-weight: 600;
	}
	.textremark{
		color:#000;
	}
	.tx{
		position: relative;
		overflow: hidden;
		width:100%;
		height:150upx;
	} 
	.textjd{
		margin: 0 0 0 30rpx!important;
		width:56rpx;
		height:56rpx;;
		line-height:56rpx;
	}
	.textjd.end{
		background-color: #eee;
		border: 1px solid #eee;
	}
	.textjd.endall{
		background-color: #347ACF;
		border: 1px solid #347ACF;
	}
	.txgd{
		position:absolute;
		right:20upx;
		top:10upx;
	}
	.ltx{
		position: relative;
		overflow: hidden;
		width:100%;
		height:80upx;
		line-height:80upx;
	}
	.fright{
		position:absolute;
		right:20upx;
		top:0;
	}
	.cu-form-group{
		padding: 2upx 20upx;
	}
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.padd{
		padding:20upx;
	}
	.cu-padd-bottom{
		margin-bottom: 20upx;
	}
	.busimg{
		position: absolute;
		top:20upx;
		left:0;
		width:40upx;
		height:40upx;
		vertical-align: middle;
	}
	.busitimg{
		position: absolute;
		top:20upx;
		left:80upx;
		width:52upx;
		height:52upx;
		vertical-align: middle;
	}
	.bottomcon{
		position: fixed;
		bottom:0;
		left:0;
		width:100%;
		display: block;
		height:80upx;
		z-index: 10000;
	}
	.tipimg{
		width:36upx;
		height:36upx;
	}
	.cuIcon-refresh{
		font-size: 36upx;
		margin-right: 4upx;
		font-weight: 600;
	}
</style>