yogaApp/components/process/lctree.vue

<template>
	<view class="step">
		<u-steps v-if="id&&numList.length>0" ref='step' :list="numList" :current="current" mode="number" :icon="icon"></u-steps>
		<view v-else class="lctips">暂无审批流程记录</view>
	</view>
</template>

<script>
	export default {
		name: "lctree",
		props: {
			id: String,
		},
		data() {
		  return {
			  current:0,
			  icon: 'checkmark', //error', //checkmark',
			  numList: []
		  };
		},
		mounted() {
		  this._initTree();
		},
		methods: {
			_initTree() { 
				if(this.id&&this.id!==null){
					this.$u.api.getApprovalRecord(this.id).then(res => {
						console.log(res);
						if(!res.state){
							var data = res;
							var flowVoList = data.flowVoList ? data.flowVoList : [];
							this.current=flowVoList.length;
							if (flowVoList.length > 0) {
								flowVoList.forEach((item,idx)=>{
									var cell={};
									if (item.opinionType == '1') {
										// 同意
										cell={
											name:  item.stepContent
										};
										this.numList.push(cell);
									}
									else if(item.opinionType == '2'){
										// 不同意
										cell={
											name: item.stepContent,
											color:"#ff9900",
											icon:"close",
										};
										this.numList.push(cell);
									}
									else {
										if ((item.isStart&&item.isStart=='1') || item.stepContent=='发起申请') {
										    cell={
										    	name:  item.stepContent
										    };
										    this.numList.push(cell);
										}
										else{
											// 待审批
											cell={
												name:  item.stepContent
											};
											this.numList.push(cell);
											this.current=idx;
										}
									}
								});
							}
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.step {
		padding: 20rpx 0 0 0;
	}
	.lctips{
		font-size:28rpx;
		color: #000;
		margin:0 auto;
		text-align:center;
	}
</style>