出差与外出

src/apis/common.js

@@ -7,6 +7,7 @@ export function uploadBase64(formData) {
 		url: '/mobile/personInfoApi/uploadBase64',
 		data: formData,
 		method: 'post',
+		timeout: 60000,
 	})
 }
 export function getSchoolServeList(params) {

src/projects/business/apis/Master/business_travel.js

@@ -34,3 +34,30 @@ export function businessOutApproval(params) {
 		method: 'post',
 	})
 }
+
+//获取审核人列表
+export function getBusinessOutApprovalPerson(params) {
+	return request({
+		url: '/mobile/businessOutApiController/getBusinessOutApprovalPerson',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}
+
+//出差申请列表
+export function pageList(params) {
+	return request({
+		url: '/mobile/businessOutApiController/businessOutApprovalPersonList',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}
+
+//出差申请审核列表
+export function verifyList(params) {
+	return request({
+		url: '/mobile/businessOutApiController/businessOutApprovalList',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}

src/projects/business/views/Master/BusinessTravel/Form.vue

@@ -8,7 +8,7 @@
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label><i class="colorfe616c">*</i> 出差地点</label>
-						<input type="text" class="mui-input-clear" placeholder="请填写城市名称">
+						<input type="text" v-model="subForm.destination" class="mui-input-clear" placeholder="请填写地点名称">
 					</div>
 				</form>
 			</div>
@@ -16,35 +16,35 @@
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label><i class="colorfe616c">*</i> 出差日期</label>
-						<button class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" type='button' style="width:65%">
-							2020-10-27
+						<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">
 						<label><i class="colorfe616c">*</i> 预估天数</label>
-						<input type="text" class="mui-input-clear" placeholder="请填写天数">
+						<input type="text" v-model="subForm.estimatedTime" class="mui-input-clear" placeholder="请填写天数">
 					</div>
 				</form>
 			</div>
 			<div class="vongi-meform-pho mui-content-padded">
 				<h4><i class="colorfe616c">*</i> 出差事由</h4>
 				<div class="mui-input-row">
-					<textarea id="textarea" rows="5" placeholder="请填写病因"></textarea>
+					<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-navigate-right mui-ellipsis" type='button' style="width:65%">
-							请选择
+						<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 type="submit" class="mui-btn mui-btn-primary ">保 存</button></div>
+			<div class="bindfyy-btn"><button @click="submit" type="submit" class="mui-btn mui-btn-primary ">保 存</button></div>
 		</div>
 
 		<loading :visible="isLoading"></loading>
@@ -52,6 +52,7 @@
 </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'
@@ -60,6 +61,10 @@
 		mapGetters,
 		mapMutations
 	} from 'vuex'
+	import {
+		currentTimeStamp,
+		parseUnixTime
+	} from '$project/utils'
 	export default {
 		name: 'MasterBusinessTravelForm',
 		components: {
@@ -73,21 +78,133 @@
 
 				isLoading: false,
 
+				subForm: {
+					type: '3',
+					destination: '',
+					startTime: '',
+					estimatedTime: '',
+					content: '',
+					approvalPersonId: ''
+				},
 
+				approvalPersonList: [],
+				personForm: {
+					type: '3'
+				}
 			}
 		},
-		created() {},
+		created() {
+			this.subForm.startTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
+		},
 		methods: {
+			//获取审核人列表
+			getBusinessOutApprovalPerson() {
+				this.isLoading = true;
+				API_BusinessTravel.getBusinessOutApprovalPerson(this.personForm).then(response => {
+					this.isLoading = false;
+
+					var list = response.list;
+					var approvalPersonList = [];
+					for (var i = 0; i < list.length; i++) {
+						approvalPersonList.push({
+							value: list[i]['id'],
+							text: list[i]['personName']
+						})
+					}
+					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].setSelectedIndex(0);
+				picker.show(function(selectItems) {
+					_this.subForm.approvalPersonId = selectItems[0].value;
+					picker.dispose();
+				})
+			},
+			//选择日期
+			selectData() {
+				var _this = this;
+				var picker = new mui.DtPicker({
+					"type": "date",
+					"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',
+							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',
@@ -98,5 +215,6 @@
 
 <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>

src/projects/business/views/Master/BusinessTravel/List.vue

@@ -7,50 +7,25 @@
 		<div class="mui-content vongi-hdsq">
 			<div class="mui-slider-group">
 				<ul class="mui-table-view">
-					<li class="mui-table-view-cell">
-						<a href="">
+					<li v-for="(item,index) in recordList" class="mui-table-view-cell">
+						<router-link :to="{name:'MasterBusinessTravelInfo',query:{id:item.id}}">
 							<div class="mui-media-body flew-sp">
-								出差地点:长沙
-								<span class='mui-ellipsis mui-h6'>11-28 09:00</span>
+								出差地点:{{item.destination}}
+								<span class='mui-ellipsis mui-h6' v-text="item.startTime.substr(5)"></span>
 							</div>
-							<p class='mui-ellipsis'>出差事由:去长沙沟通设备调试问题</p>
+							<p class='mui-ellipsis'>出差事由:{{item.content}}</p>
 							<p class='flew-sp flew-items'>
-								预估天数:2天
-								<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">审批中</button>
+								预估天数:{{item.estimatedTime}}天
+								<button type="button" :style="getColor(item.status)" class="mui-btn mui-btn-primary mui-btn-outlined" v-text="item.statusN"></button>
 							</p>
-						</a>
-					</li>
-					<li class="mui-table-view-cell">
-						<a href="">
-							<div class="mui-media-body flew-sp">
-								出差地点:长沙
-								<span class='mui-ellipsis mui-h6'>11-28 09:00</span>
-							</div>
-							<p class='mui-ellipsis'>出差事由:去长沙沟通设备调试问题</p>
-							<p class='flew-sp flew-items'>
-								预估天数:2天
-								<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">已通过</button>
-							</p>
-						</a>
-					</li>
-					<li class="mui-table-view-cell">
-						<a href="">
-							<div class="mui-media-body flew-sp">
-								出差地点:长沙
-								<span class='mui-ellipsis mui-h6'>11-28 09:00</span>
-							</div>
-							<p class='mui-ellipsis'>出差事由:去长沙沟通设备调试问题</p>
-							<p class='flew-sp flew-items'>
-								预估天数:2天
-								<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">已拒绝</button>
-							</p>
-						</a>
+						</router-link>
 					</li>
+
 				</ul>
 			</div>
 		</div>
 		<div class="fyy-footer">
-			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-primary ">填写出差申请单</button></div>
+			<div class="bindfyy-btn" @click="goToForm"><button type="submit" class="mui-btn mui-btn-primary ">填写出差申请单</button></div>
 		</div>
 
 		<loading :visible="isLoading"></loading>
@@ -83,6 +58,7 @@
 				isLoading: false,
 
 				listForm: {
+					type: '3',
 					pageIndex: 1,
 					pageSize: 20,
 					totalPage: 1,
@@ -126,12 +102,30 @@
 					}
 				}
 			},
+			//填写表单
+			goToForm() {
+				this.$router.push({
+					name: 'MasterBusinessTravelForm'
+				})
+			},
+			//获取状态颜色
+			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() {
 
 			},
 		},
 		mounted() {
-			//this.getList();
+			this.getList();
 			//监控下拉加载事件
 			var _this = this;
 			window.addEventListener('scroll', _this.handleScrool);

src/projects/business/views/Master/BusinessTravel/VerifyList.vue

@@ -7,79 +7,49 @@
 			<div id="slider" class="mui-slider mui-fullscreen vongi-over">
 				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
 					<div class="mui-scroll">
-						<a class="mui-control-item mui-active" href="#item1mobile">
-							<span class="fyy-badge">待处理<span class="mui-badge">5</span></span>
+						<a @click="reloadList('0')" :class="'mui-control-item '+(listForm.status=='0'?'mui-active':'')">
+							<span class="fyy-badge">待处理<span class="mui-badge" v-if="firstRecordsTotal" v-text="firstRecordsTotal"></span></span>
 						</a>
-						<a class="mui-control-item" href="#item2mobile">
+						<a @click="reloadList('1')" :class="'mui-control-item '+(listForm.status=='1'?'mui-active':'')">
 							已处理
 						</a>
 					</div>
 				</div>
 				<div class="mui-slider-group vongi-cchai">
-					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
-						<div id="scroll1" class="mui-scroll-wrapper vongi-over-hei">
+					<div v-if="listForm.status=='0'" class="mui-slider-item mui-control-content mui-active">
+						<div class="mui-scroll-wrapper vongi-over-hei">
 							<div class="mui-scroll">
 								<form class="mui-input-group fyy-checkbox">
-									<div class="mui-input-row mui-checkbox mui-left">
-										<a href="">
-											<h4>赵刚的出差申请<span class="mui-h6 mui-pull-right">10-17</span></h4>
-											<p class='mui-ellipsis'>出差事由:去长沙沟通设备调试问题</p>
+									<div v-for="(item,index) in recordList" class="mui-input-row mui-checkbox mui-left">
+										<router-link :to="{name:'MasterBusinessTravelVerifyInfo',query:{id:item.id}}">
+											<h4>{{item.personName}}的出差申请<span class="mui-h6 mui-pull-right" v-text="item.startTime.substr(5)"></span></h4>
+											<p class='mui-ellipsis'>出差事由:{{item.content}}</p>
 											<p class='mui-ellipsis flew-items flew-sp'>
-												预估天数:2天
-												<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">审批中</button>
+												预估天数:{{item.estimatedTime}}天
+												<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" :style="getColor(item.status)"
+												 v-text="item.statusN"></button>
 											</p>
-										</a>
-										<input name="checkbox" value="Item 1" type="checkbox" checked>
-									</div>
-									<div class="mui-input-row mui-checkbox mui-left">
-										<a href="">
-											<h4>赵刚的出差申请<span class="mui-h6 mui-pull-right">10-17</span></h4>
-											<p class='mui-ellipsis'>出差事由:去长沙沟通设备调试问题</p>
-											<p class='mui-ellipsis flew-items flew-sp'>
-												预估天数:2天
-												<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">审批中</button>
-											</p>
-										</a>
-										<input name="checkbox" value="Item 1" type="checkbox">
-									</div>
-									<div class="mui-input-row mui-checkbox mui-left">
-										<a href="">
-											<h4>赵刚的出差申请<span class="mui-h6 mui-pull-right">10-17</span></h4>
-											<p class='mui-ellipsis'>出差事由:去长沙沟通设备调试问题</p>
-											<p class='mui-ellipsis flew-items flew-sp'>
-												预估天数:2天
-												<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">审批中</button>
-											</p>
-										</a>
-										<input name="checkbox" value="Item 1" type="checkbox">
+										</router-link>
+										<input name="checkbox" v-model="selectIdList" :value="item.id" type="checkbox">
 									</div>
 								</form>
 							</div>
 						</div>
 					</div>
-					<div id="item2mobile" class="mui-slider-item mui-control-content">
+					<div v-if="listForm.status=='1'" class="mui-slider-item mui-control-content">
 						<div class="mui-scroll-wrapper">
 							<div class="mui-scroll">
 								<ul class="mui-table-view mui-table-view-chevron">
-									<li class="mui-table-view-cell mui-media">
-										<a href="">
-											<h4>赵刚的出差申请<span class="mui-h6 mui-pull-right">10-17</span></h4>
-											<p class='mui-ellipsis'>出差事由:去长沙沟通设备调试问题</p>
+									<li v-for="(item,index) in recordList" class="mui-table-view-cell mui-media">
+										<router-link :to="{name:'MasterBusinessTravelVerifyInfo',query:{id:item.id}}">
+											<h4>{{item.personName}}的出差申请<span class="mui-h6 mui-pull-right" v-text="item.startTime.substr(5)"></span></h4>
+											<p class='mui-ellipsis'>出差事由:{{item.content}}</p>
 											<p class='mui-ellipsis flew-items flew-sp'>
-												预估天数:2天
-												<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">已通过</button>
+												预估天数:{{item.estimatedTime}}天
+												<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" :style="getColor(item.status)"
+												 v-text="item.statusN"></button>
 											</p>
-										</a>
-									</li>
-									<li class="mui-table-view-cell mui-media">
-										<a href="">
-											<h4>赵刚的出差申请<span class="mui-h6 mui-pull-right">10-17</span></h4>
-											<p class='mui-ellipsis'>出差事由:去长沙沟通设备调试问题去长沙沟通设备调试问题去长沙沟通设备调试问题</p>
-											<p class='mui-ellipsis flew-items flew-sp'>
-												预估天数:2天
-												<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">已拒绝</button>
-											</p>
-										</a>
+										</router-link>
 									</li>
 								</ul>
 							</div>
@@ -87,15 +57,15 @@
 					</div>
 				</div>
 			</div>
-			<div class="fyy-bindfyy-btn">
+			<div v-show="recordList.length>0 && listForm.status==0" class="fyy-bindfyy-btn">
 				<form class="mui-input-group">
 					<div class="mui-input-row mui-checkbox mui-left">
 						<label>全选</label>
-						<input name="checkbox" value="Item 1" type="checkbox">
+						<input v-model="allSelect" value="1" type="checkbox" @click="selectAll" :checked="recordList.length==selectIdList.length">
 					</div>
 				</form>
-				<button type="button" class="mui-btn mui-btn-danger">拒绝</button>
-				<button type="button" class="mui-btn mui-btn-success">同意</button>
+				<button type="button" class="mui-btn mui-btn-danger" @click="openFrom('2')">拒绝</button>
+				<button type="button" class="mui-btn mui-btn-success" @click="openFrom('1')">同意</button>
 			</div>
 		</div>
 
@@ -115,7 +85,7 @@
 		mapMutations
 	} from 'vuex'
 	export default {
-		name: 'MasterBusinessTravelList',
+		name: 'MasterBusinessTravelVerifyList',
 		components: {
 			Common,
 			Loading,
@@ -129,11 +99,23 @@
 				isLoading: false,
 
 				listForm: {
+					type: '3',
 					pageIndex: 1,
 					pageSize: 20,
 					totalPage: 1,
+					status: '0'
 				},
 				recordList: [],
+
+				subForm: {
+					ids: '',
+					approvalContent: '',
+					status: ''
+				},
+
+				selectIdList: [],
+				allSelect: [],
+				firstRecordsTotal: 0,
 			}
 		},
 		created() {},
@@ -141,7 +123,7 @@
 			//获取列表
 			getList() {
 				this.isLoading = true;
-				API_BusinessTravel.pageList(this.listForm).then(response => {
+				API_BusinessTravel.verifyList(this.listForm).then(response => {
 					if (response) {
 						if (this.listForm.pageIndex == 1) {
 							this.recordList = response.data;
@@ -154,6 +136,11 @@
 							];
 						}
 					}
+
+					if (this.listForm.status == 0) {
+						this.firstRecordsTotal = response.recordsTotal;
+					}
+
 					this.listForm.pageIndex++;
 					this.isLoading = false;
 				}).catch(error => {
@@ -172,12 +159,80 @@
 					}
 				}
 			},
+			//切换
+			reloadList(status) {
+				this.listForm.status = status;
+				this.listForm.pageIndex = 1;
+				this.getList();
+			},
+			//选择所有
+			selectAll() {
+				if (this.allSelect.length) {
+					this.selectIdList = [];
+				} else {
+					var selectIdList = [];
+					this.recordList.forEach(function(item, index) {
+						selectIdList.push(item.id);
+					})
+					this.selectIdList = selectIdList;
+				}
+			},
+			//显示内容表单
+			openFrom(status) {
+				if (!this.selectIdList.length) {
+					mui.toast('请选择要处理的信息');
+				} else {
+					this.subForm.status = status;
+					this.subForm.content = status == 1 ? '同意' : '拒绝';
+					//this.openFromVisible = true;
+					//直接点击处理，不需要弹窗理由框
+					this.doAction();
+				}
+			},
+			//检测表单
+			checkForm() {
+				if (!this.subForm.ids) {
+					mui.toast('请选择要处理的信息');
+					return false;
+				} else {
+					return true;
+				}
+			},
+			//同意拒绝
+			doAction() {
+				this.subForm.ids = this.selectIdList.join(',');
+				if (this.checkForm()) {
+					this.isLoading = true;
+					API_BusinessTravel.businessOutApproval(this.subForm).then(response => {
+						this.isLoading = false;
+
+						this.openFromVisible = false;
+						this.listForm.pageIndex = 1;
+						this.getList();
+					}).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() {
 
 			},
 		},
 		mounted() {
-			//this.getList();
+			this.getList();
 			//监控下拉加载事件
 			var _this = this;
 			window.addEventListener('scroll', _this.handleScrool);
@@ -193,6 +248,16 @@
 				token: 'token',
 			})
 		},
+		//keepalive监控判断
+		beforeRouteLeave(to, from, next) {
+			console.log(to.name);
+			if (['MasterBusinessTravelInfo'].indexOf(to.name) > -1) {
+				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', ['MasterBusinessTravelVerifyList'])
+			} else {
+				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', [])
+			}
+			next()
+		},
 	}
 </script>
 

src/projects/business/views/Master/Egress/Form.vue

@@ -1,15 +1,14 @@
 <template>
-<div>
-    <header class="mui-bar mui-bar-nav">
-			<h1 class="mui-title">员工外出办事登记表</h1>
-			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-		</header>
+	<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" class="mui-input-clear" placeholder="请填写城市名称">
+						<input type="text" v-model="subForm.destination" class="mui-input-clear" placeholder="请填写地点名称">
 					</div>
 				</form>
 			</div>
@@ -17,20 +16,20 @@
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label><i class="colorfe616c">*</i> 外出日期</label>
-						<button class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" type='button' style="width:65%">
-							2020-10-27
+						<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">
 						<label><i class="colorfe616c">*</i> 预估时长</label>
-						<input type="text" class="mui-input-clear" placeholder="请填写天数">
+						<input type="text" v-model="subForm.estimatedTime" class="mui-input-clear" placeholder="请填写小时">
 					</div>
 				</form>
 			</div>
 			<div class="vongi-meform-pho mui-content-padded">
 				<h4><i class="colorfe616c">*</i> 外出事由</h4>
 				<div class="mui-input-row">
-					<textarea id="textarea" rows="5" placeholder="请填写病因"></textarea>
+					<textarea v-model="subForm.content" rows="5" placeholder="请填写外出事由"></textarea>
 				</div>
 			</div>
 			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
@@ -38,19 +37,180 @@
 					<div class="mui-input-row">
 						<label><i class="colorfe616c">*</i> 审批人</label>
 						<button 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 type="submit" class="mui-btn mui-btn-primary ">保  存</button></div>
+			<div class="bindfyy-btn"><button @click="submit" type="submit" class="mui-btn mui-btn-primary ">保 存</button></div>
 		</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: 'MasterEgressForm',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+		},
+		data() {
+			return {
+				pageTitle: '员工外出办事登记表',
+
+				isLoading: false,
+
+				subForm: {
+					type: '1',
+					destination: '',
+					startTime: '',
+					estimatedTime: '',
+					content: '',
+					approvalPersonId: ''
+				},
+
+				approvalPersonList: [],
+				personForm: {
+					type: '1'
+				}
+			}
+		},
+		created() {
+			this.subForm.startTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
+		},
+		methods: {
+			//获取审核人列表
+			getBusinessOutApprovalPerson() {
+				this.isLoading = true;
+				API_BusinessTravel.getBusinessOutApprovalPerson(this.personForm).then(response => {
+					this.isLoading = false;
+
+					var list = response.list;
+					var approvalPersonList = [];
+					for (var i = 0; i < list.length; i++) {
+						approvalPersonList.push({
+							value: list[i]['id'],
+							text: list[i]['personName']
+						})
+					}
+					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].setSelectedIndex(0);
+				picker.show(function(selectItems) {
+					_this.subForm.approvalPersonId = selectItems[0].value;
+					picker.dispose();
+				})
+			},
+			//选择日期
+			selectData() {
+				var _this = this;
+				var picker = new mui.DtPicker({
+					"type": "date",
+					"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: 'MasterEgressInfo',
+							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>