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 margin60">
			<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)" v-text="detail.remark?'已审查':'未审查'"></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.content"></span>
				</div>
				<div class="mui-input-row">
					<label>报备</label>
					<span v-text="detail.list.length>0?detail.list[0]['name']:''"></span>
				</div>
				<div class="mui-input-row">
					<label>提交时间</label>
					<span v-text="detail.createTime"></span>
				</div>
				<div class="mui-input-row">
					<label>申请单编号</label>
					<span v-text="detail.approvalNo"></span>
				</div>
			</form>

			<form class="mui-input-group margin10">
				<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 v-if="detail.endTime" class="mui-input-row">
					<label>返回时间</label>
					<span v-text="detail.endTime"></span>
				</div>
				<div v-if="detail.remark" class="mui-input-row">
					<label>审查意见</label>
					<span v-text="detail.remark"></span>
				</div>
				<div v-if="detail.workReport" class="mui-input-row">
					<label>办理结果</label>
					<span v-text="detail.workReport"></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 v-if="item.approvalContent" 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>
		<div v-if="wm && !detail.endTime" class="fyy-footer">
			<div class="bindfyy-btn"><button type="button" @click="openCloseFromVisible=true" class="mui-btn mui-btn-danger">结束外出</button></div>
		</div>

		<!-- 审批弹窗 -->
		<div v-show="openCloseFromVisible" class="mui-popup mui-popup-in vongi-mui-pop">
			<div class="mui-popup-inner vongi-pop-inner">
				<div class="mui-popup-title">填写外出事项办理情况</div>
				<div class="mui-popup-input">
					<textarea v-model="closeFrom.workReport" rows="3" placeholder="请输入"></textarea>
				</div>
			</div>
			<div class="mui-popup-buttons"><span class="mui-popup-button mui-popup-button-bold" @click="closeActoin">提交</span></div>
		</div>
		<div v-show="openCloseFromVisible" @click="openCloseFromVisible=false" class="mui-popup-backdrop mui-active"></div>


		<div v-if="can_remark" class="fyy-scon-botton" style="position: fixed;width: 100%;bottom: 0;">
			<div style="background-color: #3385FF;" class="examine-btn examine-btn1-blue" @click="openFromVisible=true">填写意见</div>
		</div>

		<!-- 审批弹窗 -->
		<div v-show="openFromVisible" class="mui-popup mui-popup-in vongi-mui-pop">
			<div class="mui-popup-inner vongi-pop-inner">
				<div class="mui-popup-title">填写意见</div>
				<div class="mui-popup-input">
					<textarea v-model="remarkForm.remark" rows="3" placeholder="请输入"></textarea>
				</div>
			</div>
			<div class="mui-popup-buttons"><span class="mui-popup-button mui-popup-button-bold" @click="addRemark">提交</span></div>
		</div>
		<div v-show="openFromVisible" @click="openFromVisible=false" class="mui-popup-backdrop mui-active"></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: [],
				},

				//微信模板消息过来的
				wm: this.$route.query.wm,

				can_remark: this.$route.query.remark,
				remarkForm: {
					id: this.$route.query.id,
					remark: ''
				},
				openFromVisible: false,

				openCloseFromVisible: false,
				closeFrom: {
					id: this.$route.query.id,
					workReport: '',
				}
			}
		},
		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(item) {
				var color = '';
				if (item.remark) {
					color = '#55f868';
				} else {
					color = '#4fc5f7';
				}
				return 'color:' + color + ';border-color:' + color + ';';
			},
			//结束状态
			closeActoin() {
				this.openCloseFromVisible = false;
				var _this = this;
				var btnArray = ['否', '是'];
				mui.confirm('是否立即结束外出？', '确认', btnArray, function(e) {
					if (e.index == 1) {
						_this.outEnd();
					} else {
						_this.openCloseFromVisible = true;
					}
				})
			},
			//结束状态
			outEnd() {
				this.isLoading = true;
				API_BusinessTravel.businessOutEnd(this.closeFrom).then(response => {
					this.isLoading = false;

					mui.toast('处理成功');
					this.getInfo();
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//领导添加备注
			addRemark() {
				if (!this.remarkForm.remark) {
					mui.toast('请填写意见');
				} else {
					this.isLoading = true;
					API_BusinessTravel.addRemark(this.remarkForm).then(response => {
						this.isLoading = false;

						this.openFromVisible = false;
						mui.toast('提交成功');
						this.getInfo();
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			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 scoped>
	.status_r {
		color: #fe616c !important;
		border: 1px solid #fe616c !important;
	}

	.status_a {
		color: #05c8af !important;
		border: 1px solid #05c8af !important;
	}
</style>