jp-xpgj-GA-file/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="selectData" class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" type='button' style="width:65%">
							{{subForm.startTime}}
						</button>
					</div>
					<div class="mui-input-row vongi-dw">
						<label><i class="colorfe616c">*</i> 预估天数</label>
						<span><input type="number" v-model="subForm.estimatedTime" class="mui-input-clear" placeholder="请填写天数">天</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 @click="selectPerson" class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" type='button' style="width:65%">
							{{approvalPersonName}}
						</button>
					</div>
				</form>
			</div>
		</div>
		<div class="fyy-footer">
			<div class="bindfyy-btn"><button @click="submit" type="submit" class="mui-btn mui-btn-primary ">保 存</button></div>
		</div>

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

<script>
	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 {
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	export default {
		name: 'MasterBusinessTravelForm',
		components: {
			Common,
			Loading,
			TopHeader,
		},
		data() {
			return {
				pageTitle: '出差申请单',

				isLoading: false,

				subForm: {
					type: '3',
					destination: '',
					startTime: '',
					estimatedTime: '',
					content: '',
					approvalPersonId: ''
				},

				approvalPersonList: [],
                //补卡1，外出2，出差3 ，请假4
				personForm: {
					type: '3'
				}
			}
		},
		created() {
			this.subForm.startTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d} {h}:{i}');
		},
		methods: {
			//获取审核人列表
			getBusinessOutApprovalPerson() {
				this.isLoading = true;
				API_BusinessTravel.getBusinessOutApprovalPerson(this.personForm).then(response => {
					this.isLoading = false;

					var list = response.data;
					var approvalPersonList = [];
					for (var i = 0; i < list.length; i++) {
						approvalPersonList.push({
							value: list[i]['id'],
							text: list[i]['personName']
						})
					}
					if (approvalPersonList.length) {
						this.subForm.approvalPersonId = approvalPersonList[0]['value'];
					}
					this.approvalPersonList = approvalPersonList;

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//选择审核人
			selectPerson() {
				var _this = this;
				var picker = new mui.PopPicker();
				picker.setData(_this.approvalPersonList);
				picker.pickers[0].setSelectedValue(this.subForm.approvalPersonId);
				picker.show(function(selectItems) {
					_this.subForm.approvalPersonId = selectItems[0].value;
					picker.dispose();
				})
			},
			//选择日期
			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.destination) {
					mui.toast('请填写出差地点');
					return false;
				} else if (!this.subForm.estimatedTime) {
					mui.toast('请填写预估时长');
					return false;
				} else if (!this.subForm.content) {
					mui.toast('请填写申请理由');
					return false;
				} else if (!this.subForm.approvalPersonId) {
					mui.toast('请选择审批人');
					return false;
				} else {
					return true;
				}
			},
			//提交
			submit() {
				if (this.checkForm()) {
					this.isLoading = true;
					API_BusinessTravel.submitBusiness(this.subForm).then(response => {
						this.isLoading = false;

						mui.toast('提交成功');
						this.$router.push({
							name: 'MasterBusinessTravelInfo',
							query: {
								id: response.id
							}
						})
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			asynCallBack() {

			},
		},
		mounted() {
			//获取审核人列表
			this.getBusinessOutApprovalPerson();
		},
		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>