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

<template>
	<view class="page_main">
		<fileCard :gwId="gwId"></fileCard>
		<view class="info_main">
			<u-steps :current="current" direction="column" inactiveColor="#36a7f3" activeColor="#5fdf50">
				<u-steps-item title="发起" :desc="inputForm.createTruename +' - '+inputForm.createTime">
				</u-steps-item>
				<u-steps-item v-for="item in downList"
					:title="item.which=='0'?'办公室拟办':item.which=='1'?'领导审批':item.which=='2'?'承办情况':item.which=='3'?'承办转发':'已归档'"
					:desc="item.state==1?item.nextTruename :item.nextTruename +' - '+item.updateTime">
				</u-steps-item>
				<u-steps-item v-for="item in gwList"
					:title="item.which=='0'?'办公室拟办':item.which=='1'?'领导审批':item.which=='2'?'承办情况':item.which=='3'?'承办转发':'待归档'"
					:desc="item.state==1?item.nextTruename :item.nextTruename +' - '+item.createTime">
				</u-steps-item>
			</u-steps>
		</view>
		<view class="info_footer">
			
		</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: [],
				gwList: [],
				current: 0,
				allNum: "",
				inputForm: {},
			}
		},
		mounted() {
			gwFlowService.queryByGwId(this.gwId).then(data => {
				data.sort((a, b) => a.createTime.localeCompare(b.createTime) || a.createTime
					.localeCompare(b.createTime));
				this.allNum = data.length
				this.inputForm = data[0]
				data.forEach(item => {
					if (item.state == 0) {
						this.downList.push(item)
					} else {
						this.gwList.push(item)
					}
				})
				this.downList.sort((a, b) => a.updateTime.localeCompare(b.updateTime) || a.updateTime
					.localeCompare(b.updateTime));
				this.current = this.downList.length + 1
			})
		}
	}
</script>

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

	.info_main {
		margin: 20px;
	}
	.info_footer {
		width: 100%;
		height: 20px;
	}
</style>