jp-xpgj-xsy/src/projects/business/views/Master/BusinessTravel/Form.vue

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

		<div class="mui-content margin60">
			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label><i class="colorfe616c">*</i> 出差地点</label>
						<input type="text" v-model="subForm.destination" class="mui-input-clear" placeholder="请填写地点名称">
					</div>
				</form>
			</div>
			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label><i class="colorfe616c">*</i> 开始时间</label>
						<button @click="selectStartTime" class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" type='button' style="width:65%">
							{{subForm.startTimeShow}}{{subForm.startTimeQuantum=='0'?' 00:00':''}}{{subForm.startTimeQuantum=='1'?' 12:00':''}}
						</button>
					</div>
					<div class="mui-input-row">
					   <label><i class="colorfe616c">*</i> 结束时间</label>
					   <button @click="selectEndTime" class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" type='button' style="width:65%">
					   	{{subForm.endTimeShow}}{{subForm.endTimeQuantum=='0'?' 11:59':''}}{{subForm.endTimeQuantum=='1'?' 23:59':''}}
					   </button>
					</div>
					<div class="mui-input-row vongi-dw">
						<label><i class="colorfe616c"></i> 出差天数</label>
						<span>{{subForm.days}}天</span>
					</div>
				</form>
			</div>
			<div class="vongi-meform-pho mui-content-padded">
				<h4><i class="colorfe616c">*</i> 出差事由</h4>
				<div class="mui-input-row">
					<textarea v-model="subForm.content" rows="5" placeholder="请填写出差事由"></textarea>
				</div>
			</div>
			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label><i class="colorfe616c"></i> 审批人</label>
						<button  class="mui-btn mui-btn-block  mui-ellipsis" type='button' style="width:65%">
							{{examinePerson.name}}
						</button>
					</div>
				</form>
			</div>
		</div>
		<div class="fyy-footer">
			<div class="bindfyy-btn">
			
				<button class="mui-btn "  style="width: 50%;" :class="examinePerson.name?'mui-btn-success':'mui-btn-grey'"  type="submit" @click="submit(0)">
					<i icon="mui-icon mui-icon-compose"></i>保存草稿
				</button>
				<button class="mui-btn "  style="width: 50%;" :class="examinePerson.name?'mui-btn-primary':'mui-btn-grey'"  type="submit" @click="submit(1)">
					提交
				</button>
			</div>
		</div>

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

<script>
	import * as API_sp from '@/apis-xsy/xsy'
	require('$project/assets/js/mui.picker.min.js');
	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'
	import {
		 daysDistance,
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	export default {
		name: 'MasterBusinessTravelForm',
		components: {
			Common,
			Loading,
			TopHeader,
		},
		data() {
			return {
				pageTitle: '出差申请单',
				examinePerson:{},
				isLoading: false,
				id:"",
				subForm: {
					type: '3',
					destination: '',
					startTimeShow: '请选择',
					startTime: '请选择',
					endTimeShow: '请选择',
					endTime: '请选择',
					startTimeQuantum:'',
					endTimeQuantum:'',
					days:'',
					estimatedTime: '',
					content: '',
					approvalPersonId: '',
					formId: "travelWork",
				},

				approvalPersonList: [],
                //补卡1，外出2，出差3 ，请假4
				personForm: {
					type: '3'
				}
			}
		},
		created() {
			//this.subForm.startTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d} {h}:{i}');
		  this.id=this.$route.query.id
		},
		methods: {
			//获取详情
			getInfo() {
								if(!this.id){
									return
								}


				this.isLoading = true;
				API_BusinessTravel.businessOutDetail(this.id).then(response => {
					this.isLoading = false;
					this.subForm.ids=this.id
					this.subForm = {...this.subForm,...response};
					// this.detail.sp=true
					// this.detail.statusName=this.detail.statusN
					// this.detail.name=this.detail.personName
					// this.detail.text=this.detail.typeN+"申请"
					
					// this.$emit('getInfo',this.detail);
					this.subForm.startTimeShow=this.subForm.startTime.split(" ")[0];
					this.subForm.endTimeShow=this.subForm.endTime.split(" ")[0];
					
					
					if(this.subForm.startTime.indexOf(" 00:00")>-1){
						this.subForm.startTimeQuantum="0"
					}else{
						this.subForm.startTimeQuantum="1"
					}
					
					if(this.subForm.endTime.indexOf(" 11:59")>-1){
						this.subForm.endTimeQuantum="0"
					}else{
						this.subForm.endTimeQuantum="1"
					}
					this.updatePersonByTime()
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			getExaminePerson(){
				API_sp.examinePerson(this.subForm.formId).then(response => {
					this.examinePerson=response
				}).catch(error => {
					
					mui.toast(error);
				})
			},
			 	selectEndTime() {
					var _this = this;
					
					if (_this.subForm.startTimeShow == '请选择') {
						mui.toast('请选择开始日期');
						return;
					}
					var beginDate = new Date(_this.subForm.startTimeShow);
					var endTime = _this.subForm.endTimeShow == '请选择' ? null : _this.subForm.endTimeShow;
					
					var picker = new mui.DtPicker({
						"type": "hour",
						"beginYear": 2020,
						"endYear": 2040,
						"beginDate": beginDate,
					    "value":endTime,
					
					    "customData":{"h":[{"text":"11:59","value":"0"},{"text":"23:59","value":"1"}]}
					});
					var _mui=mui;
					picker.show(function(selectItems) {
					
					    var year = selectItems.y.value;
					    var month = selectItems.m.value;
					    var day = selectItems.d.value;
					    var curDate = year + "-" + month + "-" + day;
					
					    if(curDate==_this.subForm.startTimeShow&&_this.subForm.startTimeQuantum=='1'&&selectItems.h.value=='0'){
					        //debugger
					        _mui.alert('结束日期不能小于开始日期');
					        return false;
					    }
					
					    _this.subForm.endTimeShow = curDate;
					    _this.subForm.endTimeQuantum =  selectItems.h.value;
					    _this.updatePersonByTime();
					});
				},
				updatePersonByTime(){
				    if(this.subForm.startTimeShow=='请选择'||this.subForm.endTimeShow=='请选择'){
				        return;
					}
				  var i=  daysDistance(this.subForm.startTimeShow,this.subForm.endTimeShow);
				  var day=i+(this.subForm.endTimeQuantum-this.subForm.startTimeQuantum)*0.5+0.5
					this.subForm.days=day;
					this.subForm.estimatedTime=day;
				
				},
			//选择时间
			selectStartTime() {
				var _this = this;
			
				var startTime = _this.subForm.startTimeShow == '请选择' ? null : _this.subForm.startTimeShow;
			
			
			
				var picker = new mui.DtPicker({
					"type": "hour",
					"beginYear": 2020,
					"endYear": 2040,
					//"beginDate": new Date(),
			        "value": startTime,
			
			        "customData":{"h":[{"text":"00:00","value":"0"},{"text":"12:00","value":"1"}]}
			
			
			    });
				var _mui=mui;
				picker.show(function(selectItems) {
			        var year = selectItems.y.value;
			        var month = selectItems.m.value;
			        var day = selectItems.d.value;
			        var curDate = year + "-" + month + "-" + day;
					
					if(curDate==_this.subForm.endTimeShow&&_this.subForm.endTimeQuantum=='0'&&selectItems.h.value=='1'){
					    //debugger
					    _mui.alert('开始日期必须大于结束日期');
					    return false;
					}
			
					_this.subForm.startTimeShow = curDate;
			
			        _this.subForm.startTimeQuantum =  selectItems.h.value;
			       
			    });
			},
			//选择日期
			selectData() {
				var _this = this;
				var picker = new mui.DtPicker({
					"type": "datetime",
					"beginYear": 2020,
					"endYear": 2040,
					"beginDate": new Date(),
					"value": _this.subForm.startTime
				});
				picker.show(function(rs) {
					_this.subForm.startTime = rs.text;
					picker.dispose();
				});
			},
			//表单检测
			checkForm() {
				if (this.subForm.startTimeShow=='请选择') {
					mui.toast('请选择出差日期');
					return false;
				} else if (!this.subForm.destination) {
					mui.toast('请填写出差地点');
					return false;
				} else if (!this.subForm.estimatedTime) {
					mui.toast('请填写出差天数');
					return false;
				}  else if (this.subForm.estimatedTime%0.5!=0) {
					mui.toast('出差天数需要为0.5的倍数');
					return false;
				}else if (!this.subForm.content) {
					mui.toast('请填写申请理由');
					return false;
				} else if (false) {
					mui.toast('请选择审批人');
					return false;
				} else {
					return true;
				}
			},
			//提交
			submit(status) {
				
				this.subForm.draft=status;
				if(!this.examinePerson.name){
					return;
				}
				if (this.checkForm()) {
					this.subForm.startTime=this.subForm.startTimeShow+
					(this.subForm.startTimeQuantum=='0'?' 00:00':' 12:00')
					this.subForm.endTime=this.subForm.endTimeShow+
					(this.subForm.endTimeQuantum=='0'?' 11:59':' 23:59')
					
					this.isLoading = true;
					API_BusinessTravel.submitBusiness(this.subForm).then(response => {
						this.isLoading = false;
						if(this.subForm.draft){
							mui.toast('提交成功');
							 
							this.$router.replace({
								name: "XsyApprovalInfo",
								query:{id:response.id,formId:'travelWork'}
							})
						}else{
							mui.toast('保存成功');
							 this.subForm.ids=response.id;
							 this.id=response.id
						}
						
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			asynCallBack() {

			},
		},
		mounted() {
			this.getInfo();
			//获取审核人列表
			this.getExaminePerson();
		},
		destroyed() {},
		computed: {
			approvalPersonName: {
				// getter
				get: function() {
					for (var i = 0; i < this.approvalPersonList.length; i++) {
						if (this.approvalPersonList[i]['value'] == this.subForm.approvalPersonId) {
							return this.approvalPersonList[i]['text'];
						}
					}
					return '请选择';
				},
				// setter
				set: function(newValue) {
					console.log(newValue)
				}
			},
			...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 src="$project/assets/css/mui.picker.min.css"></style>
<style>
</style>