出差与外出

src/projects/business/router/master.js

@@ -904,7 +904,7 @@ const routesMaster = [
 					},
 				],
 			},
-			
+
 			//外出
 			{
 				path: 'egress',

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

@@ -6,63 +6,47 @@
 		<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 class="flew"><img :src="detail.faceImageUrl" width="50" /></div>
+					<h4>{{detail.personName}} 申请 <span class="color4fc5f7" v-text="detail.typeN"></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>-->
+				<button class="mui-btn  mui-btn-primary mui-btn-outlined" :style="getColor(detail.status)" v-text="detail.statusN"></button>
 			</div>
 			<form class="mui-input-group margin10">
 				<div class="mui-input-row">
 					<label>所属部门</label>
-					<span>信息工程中心-软件研发部</span>
+					<span v-text="detail.companyName"></span>
 				</div>
 				<div class="mui-input-row">
 					<label>出差地点</label>
-					<span>湖南长沙</span>
+					<span v-text="detail.destination"></span>
 				</div>
 				<div class="mui-input-row">
 					<label>出差时间</label>
-					<span>2020-11-28 上午</span>
+					<span v-text="detail.startTime"></span>
 				</div>
 				<div class="mui-input-row">
 					<label>预估天数</label>
-					<span>2天</span>
+					<span v-text="detail.estimatedTime+'天'"></span>
 				</div>
 				<div class="mui-input-row">
 					<label>出差事由</label>
-					<span>去长沙沟通设备调试问题</span>
+					<span v-text="detail.content"></span>
 				</div>
 				<div class="mui-input-row">
 					<label>申请单编号</label>
-					<span>00000000</span>
+					<span v-text="detail.approvalNo"></span>
 				</div>
 				<div class="mui-input-row">
 					<label>申请时间</label>
-					<span>2020-04-27 12:00:00</span>
+					<span v-text="detail.createTime"></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 v-for="(item,index) in detail.list" class="vongi-slot-block">
+					<div class="vongi-slot-img"><img :src="item.faceImageUrl"></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>
-				<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<span class="mui-pull-right mui-h5 color999">2020-11-26 13:00</span></h4>
-						<p>高进权 <span class="colorfe616c">拒绝</span></p>
+						<h4>审批人{{index+1}}<span class="mui-pull-right mui-h5 color999" v-text="item.time"></span></h4>
+						<p>{{item.name}} <span class="color55f868" :style="getColor(item.status)" v-text="item.statusN"></span></p>
 					</div>
 				</div>
 			</div>
@@ -94,14 +78,41 @@
 
 				isLoading: false,
 
-
+				id: this.$route.query.id,
+				detail: {
+					list: [],
+				},
 			}
 		},
 		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(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() {
-
+				//获取详情
+				this.getInfo();
 			},
 		},
 		mounted() {

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

@@ -6,71 +6,64 @@
 		<div class="mui-content vongi-wordcard">
 			<div class="mui-content-padded vongi-wordcard-top">
 				<div class="mui-media-object mui-pull-left">
-					<img src="~$project/assets/img/zhaop1.jpg">
+					<img :src="detail.faceImageUrl">
 				</div>
 				<div class="mui-media-body">
-					冯银银
-					<p class='mui-ellipsis'><span class="color4fc5f7">出差</span>申请</p>
+					{{detail.personName}}
+					<p class='mui-ellipsis'><span class="color4fc5f7" v-text="detail.typeN"></span>申请</p>
 				</div>
-				<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">
-					待处理
+				<button :style="getColor(detail.status)" v-text="detail.statusN" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">
+
 				</button>
 			</div>
 			<div class="mui-content-padded vongi-wordcard-center">
 				<ul class="mui-table-view">
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">申请类型</div>
-						<span>出差</span>
+						<span v-text="detail.typeN"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">所在部门</div>
-						<span>信息工程中心</span>
+						<span v-text="detail.companyName"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">出差地点</div>
-						<span>湖南长沙</span>
+						<span v-text="detail.destination"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">出差时间</div>
-						<span>2020-04-19</span>
+						<span v-text="detail.startTime"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">预估天数</div>
-						<span>2天</span>
+						<span v-text="detail.estimatedTime+'天'"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">出差事由</div>
-						<span>去长沙沟通设备调试问题</span>
+						<span v-text="detail.content"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">申请单编号</div>
-						<span>00000000</span>
+						<span v-text="detail.approvalNo"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">申请时间</div>
-						<span>2020-11-26 09:00</span>
+						<span v-text="detail.createTime"></span>
 					</li>
 				</ul>
 			</div>
 			<div class="vongi-slot mui-content-padded">
-				<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 v-for="(item,index) in detail.list" class="vongi-slot-block">
+					<div class="vongi-slot-img"><img :src="item.faceImageUrl"></div>
 					<div class="vongi-slot-content">
-						<h4>审批人1</h4>
-						<p>高进权 <span class="color4fc5f7">待处理</span></p>
+						<h4>审批人{{index+1}}<span class="mui-pull-right mui-h5 color999" v-text="item.time"></span></h4>
+						<p>{{item.name}} <span class="color55f868" :style="getColor(item.status)" v-text="item.statusN"></span></p>
 					</div>
 				</div>
 			</div>
-			<div class="fyy-scon-botton">
-				<div class="examine-btn examine-btn1">拒绝</div>
-				<div class="examine-btn examine-btn2">通过</div>
+			<div v-if="detail.status=='0'" class="fyy-scon-botton">
+				<div class="examine-btn examine-btn1" @click="openFrom('2')">拒绝</div>
+				<div class="examine-btn examine-btn2" @click="openFrom('1')">通过</div>
 			</div>
 		</div>
 
@@ -100,14 +93,82 @@
 
 				isLoading: false,
 
+				subForm: {
+					ids: this.$route.query.id,
+					status: '',
+					approvalContent: '',
+				},
 
+				detail: {
+					list: [],
+				},
 			}
 		},
 		created() {},
 		methods: {
+			//获取详情
+			getInfo() {
+				this.isLoading = true;
+				API_BusinessTravel.businessOutDetail(this.subForm.ids).then(response => {
+					this.isLoading = false;
 
-			asynCallBack() {
+					this.detail = response;
+				}).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 + ';';
+			},
+			//显示内容表单
+			openFrom(status) {
+				if (!this.subForm.ids) {
+					mui.toast('请选择要处理的信息');
+				} else {
+					this.subForm.status = status;
+					this.subForm.approvalContent = status == 1 ? '同意' : '拒绝';
+					//this.openFromVisible = true;
+					//直接点击处理，不需要弹窗理由框
+					this.doAction();
+				}
+			},
+			//检测表单
+			checkForm() {
+				if (!this.subForm.ids) {
+					mui.toast('请选择要处理的信息');
+					return false;
+				} else {
+					return true;
+				}
+			},
+			//同意拒绝
+			doAction() {
+				if (this.checkForm()) {
+					this.isLoading = true;
+					API_BusinessTravel.businessOutApproval(this.subForm).then(response => {
+						this.isLoading = false;
 
+						this.openFromVisible = false;
+						this.getInfo();
+					}).catch(error => {
+						this.isLoading = false;
+						mui.toast(error);
+					})
+				}
+			},
+			asynCallBack() {
+				//获取详情
+				this.getInfo();
 			},
 		},
 		mounted() {

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

@@ -215,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/Egress/Info.vue

@@ -1,71 +1,141 @@
 <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>
-					<button class="mui-btn  mui-btn-success 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="detail.faceImageUrl" width="50" /></div>
+					<h4>{{detail.personName}} 申请 <span class="color4fc5f7" v-text="detail.typeN"></span></h4>
 				</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="mui-content-padded">
-					<h5>审核记录</h5>
+				<button class="mui-btn  mui-btn-primary mui-btn-outlined" :style="getColor(detail.status)" v-text="detail.statusN"></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.startTime"></span>
+				</div>
+				<div class="mui-input-row">
+					<label>预估时长</label>
+					<span v-text="detail.estimatedTime+'小时'"></span>
 				</div>
-				<form class="mui-input-group margin10">
+				<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.approvalNo"></span>
+				</div>
+				<div class="mui-input-row">
+					<label>申请时间</label>
+					<span v-text="detail.createTime"></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>王后雄</span>
+						<span v-text="item.name"></span>
 					</div>
 					<div class="mui-input-row">
 						<label>审核意见</label>
-						<span>同意</span>
+						<span v-text="item.approvalContent"></span>
 					</div>
-					<div class="mui-input-row">
+					<div v-if="item.time" class="mui-input-row">
 						<label>审核时间</label>
-						<span>2020-04-28 10:00:00</span>
+						<span v-text="item.time"></span>
 					</div>
-				</form>
-			</div>
-</div>
+				</template>
+			</form>
+		</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: [],
+				},
+			}
+		},
+		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(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() {
+				//获取详情
+				this.getInfo();
+			},
+		},
+		mounted() {
+
+		},
+		destroyed() {},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+			})
+		},
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>

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

@@ -1,61 +1,145 @@
 <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">
-					<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-primary mui-btn-outlined">审批中</button>
-							</p>
-						</a>
-					</li>
-					<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-success 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-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"><button @click="goToForm" 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: {
+					type: '1',
+					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;
+					}
+				}
+			},
+			//填写表单
+			goToForm() {
+				this.$router.push({
+					name: 'MasterEgressForm'
+				})
+			},
+			//获取状态颜色
+			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();
+			//监控下拉加载事件
+			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/Egress/VerifyInfo.vue

@@ -1,83 +1,187 @@
 <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">
-					<img src="~$project/assets/img/zhaop1.jpg">
+					<img :src="detail.faceImageUrl">
 				</div>
 				<div class="mui-media-body">
-					冯银银
-					<p class='mui-ellipsis'><span class="color4fc5f7">外出</span>申请</p>
+					{{detail.personName}}
+					<p class='mui-ellipsis'><span class="color4fc5f7" v-text="detail.typeN"></span>申请</p>
 				</div>
-				<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">
-					待处理
+				<button :style="getColor(detail.status)" v-text="detail.statusN" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">
+
 				</button>
 			</div>
 			<div class="mui-content-padded vongi-wordcard-center">
 				<ul class="mui-table-view">
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">申请类型</div>
-						<span>外出</span>
+						<span v-text="detail.typeN"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">所在部门</div>
-						<span>信息工程中心</span>
+						<span v-text="detail.companyName"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">外出地点</div>
-						<span>湖南长沙</span>
+						<span v-text="detail.destination"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">外出日期</div>
-						<span>2020-04-19</span>
+						<span v-text="detail.startTime"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">预估时长</div>
-						<span>2天</span>
+						<span v-text="detail.estimatedTime+'小时'"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">外出事由</div>
-						<span>去长沙沟通设备调试问题</span>
+						<span v-text="detail.content"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">申请单编号</div>
-						<span>00000000</span>
+						<span v-text="detail.approvalNo"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">申请时间</div>
-						<span>2020-11-26 09:00</span>
+						<span v-text="detail.createTime"></span>
 					</li>
 				</ul>
 			</div>
 			<div class="vongi-slot mui-content-padded">
-				<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 v-for="(item,index) in detail.list" class="vongi-slot-block">
+					<div class="vongi-slot-img"><img :src="item.faceImageUrl"></div>
 					<div class="vongi-slot-content">
-						<h4>审批人1</h4>
-						<p>高进权 <span class="color4fc5f7">待处理</span></p>
+						<h4>审批人{{index+1}}<span class="mui-pull-right mui-h5 color999" v-text="item.time"></span></h4>
+						<p>{{item.name}} <span class="color55f868" :style="getColor(item.status)" v-text="item.statusN"></span></p>
 					</div>
 				</div>
 			</div>
-			<div class="fyy-scon-botton">
-				<div class="examine-btn examine-btn1">拒绝</div>
-				<div class="examine-btn examine-btn2">通过</div>
+			<div v-if="detail.status=='0'" class="fyy-scon-botton">
+				<div class="examine-btn examine-btn1" @click="openFrom('2')">拒绝</div>
+				<div class="examine-btn examine-btn2" @click="openFrom('1')">通过</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: 'MasterEgressVerifyInfo',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+		},
+		data() {
+			return {
+				pageTitle: '外出审批详情',
+
+				isLoading: false,
+
+				subForm: {
+					ids: this.$route.query.id,
+					status: '',
+					approvalContent: '',
+				},
+
+				detail: {
+					list: [],
+				},
+			}
+		},
+		created() {},
+		methods: {
+			//获取详情
+			getInfo() {
+				this.isLoading = true;
+				API_BusinessTravel.businessOutDetail(this.subForm.ids).then(response => {
+					this.isLoading = false;
+
+					this.detail = response;
+				}).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 + ';';
+			},
+			//显示内容表单
+			openFrom(status) {
+				if (!this.subForm.ids) {
+					mui.toast('请选择要处理的信息');
+				} else {
+					this.subForm.status = status;
+					this.subForm.approvalContent = status == 1 ? '同意' : '拒绝';
+					//this.openFromVisible = true;
+					//直接点击处理，不需要弹窗理由框
+					this.doAction();
+				}
+			},
+			//检测表单
+			checkForm() {
+				if (!this.subForm.ids) {
+					mui.toast('请选择要处理的信息');
+					return false;
+				} else {
+					return true;
+				}
+			},
+			//同意拒绝
+			doAction() {
+				if (this.checkForm()) {
+					this.isLoading = true;
+					API_BusinessTravel.businessOutApproval(this.subForm).then(response => {
+						this.isLoading = false;
+
+						this.openFromVisible = false;
+						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>

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

@@ -1,86 +1,55 @@
 <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">
 					<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 v-if="listForm.status=='0'" class="mui-slider-item mui-control-content mui-active">
 						<div id="scroll1" 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>
-											<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" 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>
+									<div v-for="(item,index) in recordList" class="mui-input-row mui-checkbox mui-left">
+										<router-link :to="{name:'MasterEgressVerifyInfo',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">
+										</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>
-											<p class='mui-ellipsis flew-items flew-sp'>
-												预估时长:2天
-												<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">已通过</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>
+									<li v-for="(item,index) in recordList" class="mui-table-view-cell mui-media">
+										<router-link :to="{name:'MasterEgressVerifyInfo',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-danger 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>
+										</router-link>
 									</li>
 								</ul>
 							</div>
@@ -88,21 +57,208 @@
 					</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>
-</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: 'MasterEgressVerifyList',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+			NullList
+		},
+		data() {
+			return {
+				pageTitle: '外出审批',
+
+				isLoading: false,
+
+				listForm: {
+					type: '1',
+					pageIndex: 1,
+					pageSize: 20,
+					totalPage: 1,
+					status: '0'
+				},
+				recordList: [],
+
+				subForm: {
+					ids: '',
+					approvalContent: '',
+					status: ''
+				},
+
+				selectIdList: [],
+				allSelect: [],
+				firstRecordsTotal: 0,
+			}
+		},
+		created() {},
+		methods: {
+			//获取列表
+			getList() {
+				this.isLoading = true;
+				API_BusinessTravel.verifyList(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
+							];
+						}
+					}
+
+					if (this.listForm.status == 0) {
+						this.firstRecordsTotal = response.recordsTotal;
+					}
+
+					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;
+					}
+				}
+			},
+			//切换
+			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();
+			//监控下拉加载事件
+			var _this = this;
+			window.addEventListener('scroll', _this.handleScrool);
+		},
+		destroyed() {
+			//销毁监听事件
+			var _this = this;
+			window.removeEventListener('scroll', _this.handleScrool);
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+			})
+		},
+		//keepalive监控判断
+		beforeRouteLeave(to, from, next) {
+			console.log(to.name);
+			if (['MasterEgressVerifyInfo'].indexOf(to.name) > -1) {
+				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', ['MasterEgressVerifyList'])
+			} else {
+				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', [])
+			}
+			next()
+		},
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>