gwlz/jp-mobile/pages/fileTransmit/fileInfo.vue

<template>
	<view class="info_page">
		<fileCard :gwId="gwId"></fileCard>
		<view class="info_main">
			<u-steps :current="current" direction="column" inactiveColor="#36a7f3" activeColor="#5fdf50">
				<u-steps-item v-for="item in downList" :title="item.which=='0'?'办公室拟办':item.which=='1'?'领导审批':'承办情况'"
					:desc="item.nextTruename +' - '+item.updateTime">
				</u-steps-item>
				<u-steps-item v-for="item in officeInfo" title="办公室拟办" :desc="item.nextTruename +' - '+item.updateTime">
				</u-steps-item>
				<u-steps-item title="领导审批" v-for="item in leaderInfo"
					:desc="item.nextTruename +' - '+item.updateTime"></u-steps-item>
				<u-steps-item title="承办情况" v-for="item in undertakeInfo"
					:desc="item.nextTruename +' - '+item.updateTime"></u-steps-item>
			</u-steps>
		</view>
	</view>
</template>

<script>
	import fileCard from "./fileCard.vue"
	import gwFlowService from '@/api/circulation/gwFlowService.js'
	import gwCirculationCard2Service from '@/api/circulation/gwCirculationCard2.js'
	export default {
		onLoad(option) {
			this.gwId = option.id

		},
		components: {
			fileCard,
		},
		data() {
			return {
				gwId: '',
				// 办公室信息
				officeInfo: [],
				// 领导信息
				leaderInfo: [],
				// 承办信息
				undertakeInfo: [],
				downList: [],
				current: 0
			}
		},
		mounted() {
			gwFlowService.queryByGwId(this.gwId).then(data => {
				console.log("data========", data);
				data.forEach(item => {
					if (item.state == 0) this.downList.push(item)
					if (item.which == 0 && item.state == 1) {
						this.officeInfo.push(item)
					} else if (item.which == 1 && item.state == 1) {
						if (item.state == 1) this.current = 1
						this.leaderInfo.push(item)
					} else if (item.which == 2 && item.state == 1) {
						if (item.state == 1) this.current = 2
						this.undertakeInfo.push(item)
					}
				})
				this.downList.sort((a, b) => a.createTime.localeCompare(b.createTime) || a.createTime.localeCompare(b.createTime));
				this.current = this.downList.length
			})
		}
	}
</script>

<style>
	.info_page {
		width: 100%;
		background-color: #fefefe;
	}

	.info_main {
		margin: 20px;
	}
</style>