出差基础页面

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

@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+import Qs from 'qs';
+
+/**
+ * 出差相关
+ * @param params
+ */
+
+//提交出差申请
+export function submitBusiness(params) {
+	return request({
+		url: '/mobile/businessOutApiController/submitBusiness',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}
+
+//出差申请详情
+export function businessOutDetail(id) {
+	return request({
+		url: '/mobile/businessOutApiController/businessOutDetail',
+		data: Qs.stringify({
+			id: id
+		}),
+		method: 'post',
+	})
+}
+
+//出差申请审核
+export function businessOutApproval(params) {
+	return request({
+		url: '/mobile/businessOutApiController/businessOutApproval',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}

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

@@ -1,9 +1,8 @@
 <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">
@@ -45,12 +44,56 @@
 			</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 type="submit" class="mui-btn mui-btn-primary ">保 存</button></div>
 		</div>
-</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: 'MasterBusinessTravelForm',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+		},
+		data() {
+			return {
+				pageTitle: '出差申请单',
+
+				isLoading: false,
+
+
+			}
+		},
+		created() {},
+		methods: {
+
+			asynCallBack() {
+
+			},
+		},
+		mounted() {
+
+		},
+		destroyed() {},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+			})
+		},
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>

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

@@ -1,77 +1,120 @@
 <template>
-<div>
-    <header class="mui-bar mui-bar-nav">
-				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-				<h1 class="mui-title">请假</h1>
-			</header>
-			<div class="mui-content vongi-qingjiadt">
-				<div class="vongi-qingjiadt-head flew-sp">
-					<div class="flew-items">
-						<div class="flew"><img src="~$project/assets/img/03.jpg" width="50" /></div>
-						<h4>郭麒麟 申请 <span class="color4fc5f7">出差</span></h4>
-					</div>
-					<button class="mui-btn  mui-btn-primary mui-btn-outlined">审批中</button>
-					<!--<button class="mui-btn  mui-btn-danger mui-btn-outlined">已拒绝</button>
+	<div>
+		<common @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
+		<div class="mui-content vongi-qingjiadt">
+			<div class="vongi-qingjiadt-head flew-sp">
+				<div class="flew-items">
+					<div class="flew"><img src="~$project/assets/img/03.jpg" width="50" /></div>
+					<h4>郭麒麟 申请 <span class="color4fc5f7">出差</span></h4>
+				</div>
+				<button class="mui-btn  mui-btn-primary mui-btn-outlined">审批中</button>
+				<!--<button class="mui-btn  mui-btn-danger mui-btn-outlined">已拒绝</button>
 					<button class="mui-btn  mui-btn-success mui-btn-outlined">已批准</button>-->
+			</div>
+			<form class="mui-input-group margin10">
+				<div class="mui-input-row">
+					<label>所属部门</label>
+					<span>信息工程中心-软件研发部</span>
 				</div>
-				<form class="mui-input-group margin10">
-					<div class="mui-input-row">
-						<label>所属部门</label>
-						<span>信息工程中心-软件研发部</span>
-					</div>
-					<div class="mui-input-row">
-						<label>出差地点</label>
-						<span>湖南长沙</span>
-					</div>
-					<div class="mui-input-row">
-						<label>出差时间</label>
-						<span>2020-11-28 上午</span>
-					</div>
-					<div class="mui-input-row">
-						<label>预估天数</label>
-						<span>2天</span>
-					</div>
-					<div class="mui-input-row">
-						<label>出差事由</label>
-						<span>去长沙沟通设备调试问题</span>
-					</div>
-					<div class="mui-input-row">
-						<label>申请单编号</label>
-						<span>00000000</span>
-					</div>
-					<div class="mui-input-row">
-						<label>申请时间</label>
-						<span>2020-04-27 12:00:00</span>
-					</div>
-				</form>				
-				<div class="vongi-slot">
-					<div class="vongi-slot-block">
-						<div class="vongi-slot-img"><img src="~$project/assets/img/02.jpg"></div>
-						<div class="vongi-slot-content">
-							<h4>审批人1<span class="mui-pull-right mui-h5 color999">2020-11-26 13:00</span></h4>
-							<p>高进权 <span class="color55f868">同意</span></p>
-						</div>
+				<div class="mui-input-row">
+					<label>出差地点</label>
+					<span>湖南长沙</span>
+				</div>
+				<div class="mui-input-row">
+					<label>出差时间</label>
+					<span>2020-11-28 上午</span>
+				</div>
+				<div class="mui-input-row">
+					<label>预估天数</label>
+					<span>2天</span>
+				</div>
+				<div class="mui-input-row">
+					<label>出差事由</label>
+					<span>去长沙沟通设备调试问题</span>
+				</div>
+				<div class="mui-input-row">
+					<label>申请单编号</label>
+					<span>00000000</span>
+				</div>
+				<div class="mui-input-row">
+					<label>申请时间</label>
+					<span>2020-04-27 12:00:00</span>
+				</div>
+			</form>
+			<div class="vongi-slot">
+				<div class="vongi-slot-block">
+					<div class="vongi-slot-img"><img src="~$project/assets/img/02.jpg"></div>
+					<div class="vongi-slot-content">
+						<h4>审批人1<span class="mui-pull-right mui-h5 color999">2020-11-26 13:00</span></h4>
+						<p>高进权 <span class="color55f868">同意</span></p>
 					</div>
-					<div class="vongi-slot-block">
-						<div class="vongi-slot-img"><img src="~$project/assets/img/02.jpg"></div>
-						<div class="vongi-slot-content">
-							<h4>审批人1</h4>
-							<p>高进权 <span class="color4fc5f7">审批中</span></p>
-						</div>
+				</div>
+				<div class="vongi-slot-block">
+					<div class="vongi-slot-img"><img src="~$project/assets/img/02.jpg"></div>
+					<div class="vongi-slot-content">
+						<h4>审批人1</h4>
+						<p>高进权 <span class="color4fc5f7">审批中</span></p>
 					</div>
-                    <div class="vongi-slot-block">
-						<div class="vongi-slot-img"><img src="~$project/assets/img/02.jpg"></div>
-						<div class="vongi-slot-content">
-							<h4>审批人1<span class="mui-pull-right mui-h5 color999">2020-11-26 13:00</span></h4>
-							<p>高进权 <span class="colorfe616c">拒绝</span></p>
-						</div>
+				</div>
+				<div class="vongi-slot-block">
+					<div class="vongi-slot-img"><img src="~$project/assets/img/02.jpg"></div>
+					<div class="vongi-slot-content">
+						<h4>审批人1<span class="mui-pull-right mui-h5 color999">2020-11-26 13:00</span></h4>
+						<p>高进权 <span class="colorfe616c">拒绝</span></p>
 					</div>
 				</div>
 			</div>
-</div>
+		</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: 'MasterBusinessTravelInfo',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+		},
+		data() {
+			return {
+				pageTitle: '出差申请详情',
+
+				isLoading: false,
+
+
+			}
+		},
+		created() {},
+		methods: {
+
+			asynCallBack() {
+
+			},
+		},
+		mounted() {
+
+		},
+		destroyed() {},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+			})
+		},
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>

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

@@ -1,9 +1,9 @@
 <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 vongi-hdsq">
 			<div class="mui-slider-group">
 				<ul class="mui-table-view">
@@ -52,10 +52,102 @@
 		<div class="fyy-footer">
 			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-primary ">填写出差申请单</button></div>
 		</div>
-</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 isReachBottom from '$project/utils/isReachBottom'
+	import NullList from '$project/components/NullList.vue'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	export default {
+		name: 'MasterBusinessTravelList',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+			NullList
+		},
+		data() {
+			return {
+				pageTitle: '出差申请记录',
+
+				isLoading: false,
+
+				listForm: {
+					pageIndex: 1,
+					pageSize: 20,
+					totalPage: 1,
+				},
+				recordList: [],
+			}
+		},
+		created() {},
+		methods: {
+			//获取列表
+			getList() {
+				this.isLoading = true;
+				API_BusinessTravel.pageList(this.listForm).then(response => {
+					if (response) {
+						if (this.listForm.pageIndex == 1) {
+							this.recordList = response.data;
+							this.listForm.pageIndex = response.pageNumber;
+							this.listForm.totalPage = response.totalPage;
+						} else {
+							this.recordList = [
+								...this.recordList,
+								...response.data
+							];
+						}
+					}
+					this.listForm.pageIndex++;
+					this.isLoading = false;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//下拉事件
+			handleScrool() {
+				if (isReachBottom()) {
+					console.log('到达底部')
+					if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
+						this.getList();
+					} else {
+						return;
+					}
+				}
+			},
+			asynCallBack() {
+
+			},
+		},
+		mounted() {
+			//this.getList();
+			//监控下拉加载事件
+			var _this = this;
+			window.addEventListener('scroll', _this.handleScrool);
+		},
+		destroyed() {
+			//销毁监听事件
+			var _this = this;
+			window.removeEventListener('scroll', _this.handleScrool);
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+			})
+		},
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>

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

@@ -1,9 +1,8 @@
 <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 vongi-wordcard">
 			<div class="mui-content-padded vongi-wordcard-top">
 				<div class="mui-media-object mui-pull-left">
@@ -74,10 +73,54 @@
 				<div class="examine-btn examine-btn2">通过</div>
 			</div>
 		</div>
-</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: 'MasterBusinessTravelVerifyInfo',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+		},
+		data() {
+			return {
+				pageTitle: '出差审批详情',
+
+				isLoading: false,
+
+
+			}
+		},
+		created() {},
+		methods: {
+
+			asynCallBack() {
+
+			},
+		},
+		mounted() {
+
+		},
+		destroyed() {},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+			})
+		},
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>

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

@@ -1,9 +1,8 @@
 <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 vongi-wordcard-sp">
 			<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">
@@ -99,10 +98,102 @@
 				<button type="button" class="mui-btn mui-btn-success">同意</button>
 			</div>
 		</div>
-</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 isReachBottom from '$project/utils/isReachBottom'
+	import NullList from '$project/components/NullList.vue'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	export default {
+		name: 'MasterBusinessTravelList',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+			NullList
+		},
+		data() {
+			return {
+				pageTitle: '出差审批',
+
+				isLoading: false,
+
+				listForm: {
+					pageIndex: 1,
+					pageSize: 20,
+					totalPage: 1,
+				},
+				recordList: [],
+			}
+		},
+		created() {},
+		methods: {
+			//获取列表
+			getList() {
+				this.isLoading = true;
+				API_BusinessTravel.pageList(this.listForm).then(response => {
+					if (response) {
+						if (this.listForm.pageIndex == 1) {
+							this.recordList = response.data;
+							this.listForm.pageIndex = response.pageNumber;
+							this.listForm.totalPage = response.totalPage;
+						} else {
+							this.recordList = [
+								...this.recordList,
+								...response.data
+							];
+						}
+					}
+					this.listForm.pageIndex++;
+					this.isLoading = false;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//下拉事件
+			handleScrool() {
+				if (isReachBottom()) {
+					console.log('到达底部')
+					if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
+						this.getList();
+					} else {
+						return;
+					}
+				}
+			},
+			asynCallBack() {
+
+			},
+		},
+		mounted() {
+			//this.getList();
+			//监控下拉加载事件
+			var _this = this;
+			window.addEventListener('scroll', _this.handleScrool);
+		},
+		destroyed() {
+			//销毁监听事件
+			var _this = this;
+			window.removeEventListener('scroll', _this.handleScrool);
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+			})
+		},
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>