jp-xpgj-GA-file/src/projects/business/views/Master/Egress/Info.vue

<template>
	<div>
		<common @asynCallBack="asynCallBack" :doLoading="true"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div v-if="detail.personName" class="mui-content vongi-qingjiadt">
			<div class="vongi-qingjiadt-head flew-sp">
				<div class="flew-items">
					<div class="flew"><img :src="detail.faceImageUrl" width="50" v-viewer /></div>
					<h4>{{detail.personName}} 申请 <span class="color4fc5f7" v-text="detail.typeN"></span></h4>
				</div>
				<button class="mui-btn  mui-btn-primary mui-btn-outlined" :style="getColor(detail.status)" v-text="detail.statusN"></button>
			</div>
			<form class="mui-input-group margin10">
				<div class="mui-input-row">
					<label>所属部门</label>
					<span v-text="detail.companyName"></span>
				</div>
				<div class="mui-input-row">
					<label>外出地点</label>
					<span v-text="detail.destination"></span>
				</div>
				<div class="mui-input-row">
					<label>外出日期</label>
					<span v-text="detail.startTime"></span>
				</div>
				<div class="mui-input-row">
					<label>预估时长</label>
					<span v-text="detail.estimatedTime+'小时'"></span>
				</div>
				<div class="mui-input-row">
					<label>外出事由</label>
					<span v-text="detail.content"></span>
				</div>
				<div class="mui-input-row">
					<label>申请单编号</label>
					<span v-text="detail.approvalNo"></span>
				</div>
				<div class="mui-input-row">
					<label>申请时间</label>
					<span v-text="detail.createTime"></span>
				</div>
			</form>
			<div class="mui-content-padded">
				<h5>审核记录</h5>
			</div>
			<form class="mui-input-group margin10">
				<template v-for="(item,index) in detail.list">
					<div class="mui-input-row">
						<label>审批人</label>
						<span v-text="item.name"></span>
					</div>
					<div class="mui-input-row">
						<label>审核意见</label>
						<span v-text="item.approvalContent"></span>
					</div>
					<div v-if="item.time" class="mui-input-row">
						<label>审核时间</label>
						<span v-text="item.time"></span>
					</div>
				</template>
			</form>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import * as API_BusinessTravel from '@/apis/Master/business_travel'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: 'MasterEgressInfo',
		components: {
			Common,
			Loading,
			TopHeader,
		},
		data() {
			return {
				pageTitle: '外出申请详情',

				isLoading: false,

				id: this.$route.query.id,
				detail: {
					list: [],
				},
			}
		},
		created() {},
		methods: {
			//获取详情
			getInfo() {
				this.isLoading = true;
				API_BusinessTravel.businessOutDetail(this.id).then(response => {
					this.isLoading = false;

					this.detail = response;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//获取状态颜色
			getColor(status) {
				var color = '';
				if (status == '0') {
					color = '#4fc5f7';
				} else if (status == '1') {
					color = '#55f868';
				} else if (status == '2') {
					color = '#fe616c';
				}
				return 'color:' + color + ';border-color:' + color + ';';
			},
			asynCallBack() {
				//获取详情
				this.getInfo();
			},
		},
		mounted() {

		},
		destroyed() {},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
			})
		},
	}
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>