加班申请功能及其他修正

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

@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+import Qs from 'qs';
+
+/**
+ * 加班相关
+ * @param params
+ */
+
+//提交加班申请
+export function submitWorkOver(params) {
+	return request({
+		url: '/mobile/workOver/submitWorkOver',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}
+
+//加班申请列表
+export function pageList(params) {
+	return request({
+		url: '/mobile/workOver/workOverList',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}
+
+//加班申请详情
+export function workOverDetail(id) {
+	return request({
+		url: '/mobile/workOver/workOverDetail',
+		data: Qs.stringify({
+			id: id
+		}),
+		method: 'post',
+	})
+}
+
+//加班申请审核列表
+export function verifyList(params) {
+	return request({
+		url: '/mobile/workOver/workOverApprovalList',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}
+
+//加班申请审核
+export function approvalWorkOver(params) {
+	return request({
+		url: '/mobile/workOver/approvalWorkOver',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}

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

@@ -132,7 +132,9 @@
 			//结束状态
 			outEnd() {
 				this.isLoading = true;
-				API_BusinessTravel.businessOutEnd({id:this.id}).then(response => {
+				API_BusinessTravel.businessOutEnd({
+					id: this.id
+				}).then(response => {
 					this.isLoading = false;
 
 					mui.toast('处理成功');
@@ -148,7 +150,7 @@
 			},
 		},
 		mounted() {
-
+			this.isLoading = true;
 		},
 		destroyed() {},
 		computed: {

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

@@ -60,13 +60,10 @@
 						<p>{{item.name}} <span class="color55f868" :style="getColor(item.status)" v-text="item.statusN"></span></p>
 					</div>
 				</div>
-
-
-
 			</div>
 
 
-			<div v-if="detail.status=='0'&&detail.approvalEnable" class="fyy-scon-botton">
+			<div v-if="detail.status=='0' && detail.approvalEnable" 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>
@@ -77,9 +74,9 @@
 </template>
 
 <script>
-    require('$project/assets/js/mui.picker.min.js');
+	require('$project/assets/js/mui.picker.min.js');
 
-    import * as API_BusinessTravel from '@/apis/Master/business_travel'
+	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'
@@ -99,21 +96,21 @@
 				pageTitle: '出差审批详情',
 
 				isLoading: false,
-                approvalPersonName:'',
-                approvalPersonUrl:'',
+				approvalPersonName: '',
+				approvalPersonUrl: '',
 
-                subForm: {
+				subForm: {
 					ids: this.$route.query.id,
 					status: '',
 					approvalContent: '',
-                    nextApprovalId:'',
+					nextApprovalId: '',
 				},
-                approvalPersonList:[],
-                //补卡1，外出2，出差3 ，请假4
-                personForm: {
-                    type: '3'
-                },
-                approvalPerson:true,
+				approvalPersonList: [],
+				//补卡1，外出2，出差3 ，请假4
+				personForm: {
+					type: '3'
+				},
+				approvalPerson: true,
 				detail: {
 					list: [],
 				},
@@ -121,52 +118,52 @@
 		},
 		created() {},
 		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'],
-                            url: list[i]['faceImageUrl']
-
+			//获取审核人列表
+			getBusinessOutApprovalPerson() {
+				this.isLoading = true;
+				API_BusinessTravel.getBusinessOutApprovalPerson(this.personForm).then(response => {
+					this.isLoading = false;
 
-                        })
-                    }
-                    if (approvalPersonList.length) {
+					var list = response.data;
+					var approvalPersonList = [];
+					for (var i = 0; i < list.length; i++) {
+						approvalPersonList.push({
+							value: list[i]['id'],
+							text: list[i]['personName'],
+							url: list[i]['faceImageUrl']
 
-                        this.subForm.nextApprovalId = approvalPersonList[0]['value'];
-                        this.approvalPersonName= approvalPersonList[0]['text'];
-                        this.approvalPersonUrl= approvalPersonList[0]['url'];
-                    }
-                    this.approvalPersonList = approvalPersonList;
 
-                    this.approvalPerson=true;
-                }).catch(error => {
-                    this.isLoading = false;
-                    mui.toast(error);
-                })
-            },
-            //选择审核人
-            selectPerson() {
+						})
+					}
+					if (approvalPersonList.length) {
 
-                var _this = this;
-                var picker = new mui.PopPicker();
-                picker.setData(_this.approvalPersonList);
-                picker.pickers[0].setSelectedValue(this.subForm.nextApprovalId);
-                picker.show(function(selectItems) {
-                    _this.subForm.nextApprovalId = selectItems[0].value;
-                    _this.approvalPersonName= selectItems[0].text;
-                    _this.approvalPersonUrl= selectItems[0].url;
+						this.subForm.nextApprovalId = approvalPersonList[0]['value'];
+						this.approvalPersonName = approvalPersonList[0]['text'];
+						this.approvalPersonUrl = approvalPersonList[0]['url'];
+					}
+					this.approvalPersonList = approvalPersonList;
 
-                    picker.dispose();
-                })
-            },
+					this.approvalPerson = true;
+				}).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.nextApprovalId);
+				picker.show(function(selectItems) {
+					_this.subForm.nextApprovalId = selectItems[0].value;
+					_this.approvalPersonName = selectItems[0].text;
+					_this.approvalPersonUrl = selectItems[0].url;
+
+					picker.dispose();
+				})
+			},
 			//获取详情
 			getInfo() {
 				this.isLoading = true;
@@ -205,10 +202,10 @@
 			},
 			//检测表单
 			checkForm() {
-                if(!this.approvalPerson){
-                    mui.toast('加载下一级审批人失败，请刷新页面');
-                    return false;
-                }else if (!this.subForm.ids) {
+				if (!this.approvalPerson) {
+					mui.toast('加载下一级审批人失败，请刷新页面');
+					return false;
+				} else if (!this.subForm.ids) {
 					mui.toast('请选择要处理的信息');
 					return false;
 				} else {
@@ -233,11 +230,11 @@
 			asynCallBack() {
 				//获取详情
 				this.getInfo();
-               // this.getBusinessOutApprovalPerson();
+				// this.getBusinessOutApprovalPerson();
 			},
 		},
 		mounted() {
-
+			this.isLoading = true;
 		},
 		destroyed() {},
 		computed: {

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

@@ -327,7 +327,7 @@
 		//keepalive监控判断
 		beforeRouteLeave(to, from, next) {
 			console.log(to.name);
-			if (['MasterBusinessTravelInfo'].indexOf(to.name) > -1) {
+			if (['MasterBusinessTravelVerifyInfo'].indexOf(to.name) > -1) {
 				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', ['MasterBusinessTravelVerifyList'])
 			} else {
 				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', [])

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

@@ -6,38 +6,39 @@
 		<div class="mui-content margin60 vongi-wordcard">
 			<form class="mui-input-group margint10">
 				<div class="mui-input-row">
-					<label><span class="colorfe616c">*</span>开始日期</label>
+					<label><span class="colorfe616c">*</span>开始时间</label>
 					<div class="mui-navigate-right">
-						<button class="mui-btn mui-btn-block" type='button'>2020-04-28 08:00</button>
+						<button class="mui-btn mui-btn-block" type='button' @click="selectData('startTime')" v-text="subForm.startTime?subForm.startTime:'请选择'"></button>
 					</div>
 				</div>
 				<div class="mui-input-row">
-					<label><span class="colorfe616c">*</span>结束日期</label>
+					<label><span class="colorfe616c">*</span>结束时间</label>
 					<div class="mui-navigate-right">
-						<button class="mui-btn mui-btn-block" type='button'>请选择</button>
+						<button class="mui-btn mui-btn-block" type='button' @click="selectData('endTime')" v-text="subForm.endTime?subForm.endTime:'请选择'"></button>
 					</div>
 				</div>
 			</form>
 			<form class="mui-input-group margint10">
 				<div class="mui-input-row">
 					<label>时长(小时)</label>
+					<div><button class="mui-btn mui-btn-block" type='button' v-text="subForm.hours+'小时'"></button></div>
 				</div>
 				<div class="mui-input-row">
 					<label><span class="colorfe616c">*</span>审批人</label>
 					<div class="mui-navigate-right">
-						<button class="mui-btn mui-btn-block" type='button'>请选择</button>
+						<button class="mui-btn mui-btn-block" type='button' @click="selectPerson" v-text="approvalPersonName"></button>
 					</div>
 				</div>
 			</form>
 			<div class="vongi-meform-pho margint10">
-				<h4>加班原因</h4>
+				<h4><span class="colorfe616c">*</span>加班原因</h4>
 				<div class="mui-input-row">
-					<textarea id="textarea" rows="5" placeholder="请填写加班原因"></textarea>
+					<textarea v-model="subForm.reason" rows="5" placeholder="请填写加班原因"></textarea>
 				</div>
 			</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="submit"><button type="button" class="mui-btn mui-btn-primary ">提交</button></div>
 		</div>
 
 		<loading :visible="isLoading"></loading>
@@ -45,6 +46,8 @@
 </template>
 
 <script>
+	require('$project/assets/js/mui.picker.min.js');
+	import * as API_BusinessTravel from '@/apis/Master/business_travel'
 	import * as API_ExtraWork from '@/apis/Master/extra_work'
 	import Common from '$project/components/Common.vue'
 	import Loading from '$project/components/Loading.vue'
@@ -53,6 +56,11 @@
 		mapGetters,
 		mapMutations
 	} from 'vuex'
+	import {
+		currentTimeStamp,
+		parseUnixTime,
+		hourDistanceArr
+	} from '$project/utils'
 	export default {
 		name: 'MasterExtraWorkForm',
 		components: {
@@ -65,26 +73,150 @@
 				pageTitle: '加班',
 
 				isLoading: false,
+
+				subForm: {
+					reason: '',
+					startTime: '',
+					endTime: '',
+					hours: 0,
+					approvalPersonId: ''
+				},
+
+				approvalPersonList: [],
+				//补卡1，外出2，出差3 ，请假/加班4
+				personForm: {
+					type: '4'
+				}
 			}
 		},
-		created() {},
+		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(field) {
+				var _this = this;
+				var picker = new mui.DtPicker({
+					"type": "datetime",
+					"beginYear": 2020,
+					"endYear": 2040,
+					"beginDate": new Date(),
+					"value": _this.subForm[field]
+				});
+				picker.show(function(rs) {
+					_this.subForm[field] = rs.text;
+					picker.dispose();
+					_this.countHours();
+				});
+			},
+			//表单检测
+			checkForm() {
+				if (!this.subForm.startTime) {
+					mui.toast('请选择开始时间');
+					return false;
+				} else if (!this.subForm.endTime) {
+					mui.toast('请填写结束时间');
+					return false;
+				} else if (!this.subForm.reason) {
+					mui.toast('请填写加班原因');
+					return false;
+				} else if (!this.subForm.approvalPersonId) {
+					mui.toast('请选择审批人');
+					return false;
+				} else {
+					return true;
+				}
+			},
+			//提交
+			submit() {
+				if (this.checkForm()) {
+					this.isLoading = true;
+					API_ExtraWork.submitWorkOver(this.subForm).then(response => {
+						this.isLoading = false;
+
+						mui.toast('提交成功');
+						this.$router.push({
+							name: 'MasterExtraWorkInfo',
+							query: {
+								id: response.id
+							}
+						})
+					}).catch(error => {
+						this.isLoading = false;
+						mui.toast(error);
+					})
+				}
+			},
+			countHours() {
+				var hoursArr = hourDistanceArr(this.subForm.startTime, this.subForm.endTime);
+				this.subForm.hours = hoursArr[0];
+			},
 			asynCallBack() {
 
 			},
 		},
-		mounted() {},
+		mounted() {
+			//获取审核人列表
+			this.getBusinessOutApprovalPerson();
+		},
 		destroyed() {},
 		computed: {
-			...mapGetters({
-				openId: 'wx_openid',
-				token: 'token',
-			})
+			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)
+				}
+			},
 		},
 	}
 </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>

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

@@ -6,54 +6,38 @@
 		<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="colorFF7100">加班</span></h4>
+					<div class="flew"><img :src="detail.faceImageUrl" width="50" /></div>
+					<h4>{{detail.personName}} 申请 <span class="colorFF7100">加班</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-outlined" :style="getColor(detail.status)" v-text="detail.statusN"></button>
 			</div>
 			<form class="mui-input-group">
 				<div class="mui-input-row">
 					<label>加班时间</label>
-					<span>2020年12月21日 17:30-21:30</span>
+					<span v-text="detail.workOverTime"></span>
 				</div>
 				<div class="mui-input-row">
 					<label>加班时长</label>
-					<span>4小时</span>
+					<span v-text="detail.hours+'小时'"></span>
 				</div>
 				<div class="mui-input-row">
 					<label>加班原因</label>
-					<span>小鹏管家项目发版测试</span>
+					<span v-text="detail.reason"></span>
 				</div>
 				<div class="mui-input-row">
 					<label>申请时间</label>
-					<span>2020-12-21 21:30</span>
+					<span v-text="detail.dateTime"></span>
 				</div>
 			</form>
 			<div class="mui-content-padded">
 				<h5>审核记录</h5>
 			</div>
 			<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>
@@ -84,15 +68,46 @@
 				pageTitle: '加班',
 
 				isLoading: false,
+				id: this.$route.query.id,
+				detail: {
+					list: [],
+				},
 			}
 		},
 		created() {},
 		methods: {
-			asynCallBack() {
+			//获取详情
+			getInfo() {
+				this.isLoading = true;
+				API_ExtraWork.workOverDetail(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() {
+			this.isLoading = true;
 		},
-		mounted() {},
 		destroyed() {},
 		computed: {
 			...mapGetters({

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

@@ -6,25 +6,20 @@
 		<div class="mui-content">
 			<div class="mui-content-padded vongi-work">
 				<ul class="mui-table-view vongi-qingjia">
-					<li class="mui-table-view-cell">
-						<h4>郭麒麟的加班申请<span>12:00</span></h4>
-						<button type="button" class="mui-btn  mui-btn-outlined">待审核</button>
-					</li>
-					<li class="mui-table-view-cell">
-						<h4>郭麒麟的加班申请<span>12:00</span></h4>
-						<button type="button" class="mui-btn  mui-btn-success mui-btn-outlined">已批准</button>
-					</li>
-					<li class="mui-table-view-cell">
-						<h4>郭麒麟的加班申请<span>12:00</span></h4>
-						<button type="button" class="mui-btn  mui-btn-danger mui-btn-outlined">已拒绝</button>
+					<li v-for="(item,index) in recordList" class="mui-table-view-cell" @click="goToInfo(item.id)">
+						<h4>{{item.personName}}的加班申请<span v-text="item.dateTime"></span></h4>
+						<button type="button" class="mui-btn mui-btn-outlined" :style="getColor(item.status)" v-text="item.statusN"></button>
 					</li>
 				</ul>
 			</div>
+			
+			<NullList :remark="'暂无申请记录'" v-if="!recordList.length"></NullList>
+			
 			<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="button" class="mui-btn mui-btn-primary ">新增加班</button></div>
 			</div>
 		</div>
-		
+
 		<loading :visible="isLoading"></loading>
 	</div>
 </template>
@@ -34,6 +29,8 @@
 	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
@@ -44,22 +41,100 @@
 			Common,
 			Loading,
 			TopHeader,
+			NullList
 		},
 		data() {
 			return {
 				pageTitle: '加班记录',
 
 				isLoading: false,
+
+				listForm: {
+					pageIndex: 1,
+					pageSize: 20,
+					totalPage: 1,
+				},
+				recordList: [],
 			}
 		},
 		created() {},
 		methods: {
+			//获取列表
+			getList() {
+				this.isLoading = true;
+				API_ExtraWork.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;
+					}
+				}
+			},
+			//获取状态颜色
+			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 + ';';
+			},
+			//填写表单
+			goToForm() {
+				this.$router.push({
+					name: 'MasterExtraWorkForm'
+				})
+			},
+			//详情
+			goToInfo(id) {
+				this.$router.push({
+					name: 'MasterExtraWorkInfo',
+					query: {
+						id: id
+					}
+				})
+			},
 			asynCallBack() {
 
 			},
 		},
-		mounted() {},
-		destroyed() {},
+		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',

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

@@ -2,98 +2,63 @@
 	<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">
-					冯银银
+					{{detail.personName}}
 					<p class='mui-ellipsis'><span class="color4fc5f7">加班</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>2020年12月21日 17:30-21:30</span>
+						<span v-text="detail.workOverTime"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">加班时长</div>
-						<span>4小时</span>
+						<span>{{detail.hours}}小时</span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">加班原因</div>
-						<span>小鹏管家项目发版测试</span>
+						<span v-text="detail.reason"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">申请时间</div>
-						<span>2020-12-21 21:30</span>
+						<span v-text="detail.dateTime"></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 flew-items flew-sp">
-						<div>
-							<h4>审批人1</h4>
-							<p>高进权 <span class="color4fc5f7">待处理</span></p>
-						</div>
-						<a class="mui-navigate-right color4fc5f7">更换审核人</a>
-					</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 flew-items flew-sp">
-						<div>
-							<h4>审批人1</h4>
-							<p>高进权 <span class="color4fc5f7">待处理</span></p>
-						</div>
-						<a class="mui-navigate-right color4fc5f7">更换审核人</a>
-					</div>
-				</div>
-			</div>
-			<div class="fyy-scon-botton">
-				<div class="examine-btn examine-btn1">拒绝</div>
-				<div class="examine-btn examine-btn2">通过</div>
-			</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 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>
+			<div v-if="detail.status=='0' && detail.approvalEnable" 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>
-		
+
 		<loading :visible="isLoading"></loading>
 	</div>
 </template>
 
 <script>
+	import * as API_BusinessTravel from '@/apis/Master/business_travel'
 	import * as API_ExtraWork from '@/apis/Master/extra_work'
 	import Common from '$project/components/Common.vue'
 	import Loading from '$project/components/Loading.vue'
@@ -114,15 +79,146 @@
 				pageTitle: '加班审批详情',
 
 				isLoading: false,
+
+				approvalPersonName: '',
+				approvalPersonUrl: '',
+
+				subForm: {
+					ids: this.$route.query.id,
+					status: '',
+					approvalContent: '',
+					nextApprovalId: '',
+				},
+				approvalPersonList: [],
+				//补卡1，外出2，出差3 ，请假/加班4
+				personForm: {
+					type: '4'
+				},
+				approvalPerson: true,
+				detail: {
+					list: [],
+				},
 			}
 		},
 		created() {},
 		methods: {
-			asynCallBack() {
+			//获取审核人列表
+			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'],
+							url: list[i]['faceImageUrl']
+
+
+						})
+					}
+					if (approvalPersonList.length) {
 
+						this.subForm.nextApprovalId = approvalPersonList[0]['value'];
+						this.approvalPersonName = approvalPersonList[0]['text'];
+						this.approvalPersonUrl = approvalPersonList[0]['url'];
+					}
+					this.approvalPersonList = approvalPersonList;
+
+					this.approvalPerson = true;
+				}).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.nextApprovalId);
+				picker.show(function(selectItems) {
+					_this.subForm.nextApprovalId = selectItems[0].value;
+					_this.approvalPersonName = selectItems[0].text;
+					_this.approvalPersonUrl = selectItems[0].url;
+
+					picker.dispose();
+				})
+			},
+			//获取详情
+			getInfo() {
+				this.isLoading = true;
+				API_ExtraWork.workOverDetail(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.approvalPerson) {
+					mui.toast('加载下一级审批人失败，请刷新页面');
+					return false;
+				} else if (!this.subForm.ids) {
+					mui.toast('请选择要处理的信息');
+					return false;
+				} else {
+					return true;
+				}
+			},
+			//同意拒绝
+			doAction() {
+				if (this.checkForm()) {
+					this.isLoading = true;
+					API_ExtraWork.approvalWorkOver(this.subForm).then(response => {
+						this.isLoading = false;
+
+						this.openFromVisible = false;
+						this.getInfo();
+					}).catch(error => {
+						this.isLoading = false;
+						mui.toast(error);
+					})
+				}
+			},
+			asynCallBack() {
+				//获取详情
+				this.getInfo();
+			},
+		},
+		mounted() {
+			this.isLoading = true;
 		},
-		mounted() {},
 		destroyed() {},
 		computed: {
 			...mapGetters({

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

@@ -3,60 +3,59 @@
 		<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>
-						<a class="mui-control-item" href="#item2mobile">
-							已处理
-						</a>
-					</div>
+
+			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
+				<div class="mui-scroll">
+					<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 @click="reloadList('1')" :class="'mui-control-item '+(listForm.status=='1'?'mui-active':'')">
+						已处理
+					</a>
 				</div>
+			</div>
+
+			<NullList :remark="'暂无申请记录'" v-if="!recordList.length"></NullList>
+
+			<div id="slider" class="mui-slider mui-fullscreen vongi-over">
+
 				<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">11-04 20:30</span></h4>
-											<p class='mui-ellipsis'>加班时间：2020年12月21日 17:30-21:30</p>
+									<div v-for="(item,index) in recordList" class="mui-input-row mui-checkbox mui-left">
+										<router-link :to="{name:'MasterExtraWorkVerifyInfo',query:{id:item.id}}">
+											<h4>{{item.personName}}的加班申请<span class="mui-h6 mui-pull-right" v-text="item.dateTime.substr(5)"></span></h4>
+											<p class='mui-ellipsis'>加班时间:{{item.workOverTime}}</p>
 											<p class='mui-ellipsis flew-items flew-sp'>
-												加班时长：4小时
+												加班时长:{{item.hours}}小时
+												<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>
+										</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'>加班时间：2020年12月21日 17:30-21:30</p>
+									<li v-for="(item,index) in recordList" class="mui-table-view-cell mui-media">
+										<router-link :to="{name:'MasterExtraWorkVerifyInfo',query:{id:item.id}}">
+											<h4>{{item.personName}}的加班申请<span class="mui-h6 mui-pull-right" v-text="item.dateTime.substr(5)"></span></h4>
+											<p class='mui-ellipsis'>加班时间:{{item.workOverTime}}</p>
 											<p class='mui-ellipsis flew-items flew-sp'>
-												加班时长：4小时
-												<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">已通过</button>
+												加班时长:{{item.hours}}小时
+												<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'>加班时间：2020年12月21日 17:30-21:30</p>
-											<p class='mui-ellipsis flew-items flew-sp'>
-												加班时长：4小时
-												<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">已拒绝</button>
-											</p>
-										</a>
+										</router-link>
 									</li>
 								</ul>
 							</div>
@@ -64,14 +63,20 @@
 					</div>
 				</div>
 			</div>
-			<div class="vongi-ad-fix">
-				<div class=" vongi-wordcard">
+
+			<div v-show="recordList.length>0 && listForm.status==0" class="vongi-ad-fix" style="z-index:99">
+
+				<div class=" vongi-wordcard" v-if="approvalPersonList.length">
 					<form class="mui-input-group">
 						<div class="mui-input-row">
-							<label class="color4fc5f7">下一步审核人</label>
-							<div class="mui-navigate-right">
-								<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>郑强</button>
+							<label class="color4fc5f7">下一步审批人</label>
+							<div v-if="approvalPersonList.length!=1" class="mui-navigate-right" @click="selectPerson">
+								<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'><span v-text="approvalPersonName"></span></button>
 							</div>
+							<div v-if="approvalPersonList.length==1">
+								<button class="mui-btn mui-btn-block" type='button'><span v-text="approvalPersonName"></span></button>
+							</div>
+
 						</div>
 					</form>
 				</div>
@@ -79,13 +84,12 @@
 					<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>
 
@@ -94,10 +98,13 @@
 </template>
 
 <script>
+	import * as API_BusinessTravel from '@/apis/Master/business_travel'
 	import * as API_ExtraWork from '@/apis/Master/extra_work'
 	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
@@ -108,32 +115,241 @@
 			Common,
 			Loading,
 			TopHeader,
+			NullList
 		},
 		data() {
 			return {
 				pageTitle: '加班审批',
 
 				isLoading: false,
+
+				listForm: {
+					type: '3',
+					pageIndex: 1,
+					pageSize: 20,
+					totalPage: 1,
+					status: '0'
+				},
+				recordList: [],
+				approvalPersonList: [],
+				approvalPerson: true,
+
+				subForm: {
+					ids: '',
+					approvalContent: '',
+					status: '',
+					nextApprovalId: '',
+				},
+				//补卡1，外出2，出差3 ，请假/加班4
+				personForm: {
+					type: '4'
+				},
+				selectIdList: [],
+				allSelect: [],
+				firstRecordsTotal: 0,
 			}
 		},
 		created() {},
 		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.nextApprovalId = approvalPersonList[0]['value'];
+						this.approvalPersonName = approvalPersonList[0]['text'];
+
+					}
+					this.approvalPersonList = approvalPersonList;
+
+					this.approvalPerson = true;
+				}).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.nextApprovalId);
+				picker.show(function(selectItems) {
+					_this.subForm.nextApprovalId = selectItems[0].value;
+					_this.approvalPersonName = selectItems[0].text;
+					_this.$forceUpdate()
+
+					picker.dispose();
+				})
+			},
+			//获取列表
+			getList() {
+				this.isLoading = true;
+				API_ExtraWork.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.approvalContent = status == 1 ? '同意' : '拒绝';
+					//this.openFromVisible = true;
+					//直接点击处理，不需要弹窗理由框
+					this.doAction();
+				}
+			},
+			//检测表单
+			checkForm() {
+				if (!this.approvalPerson) {
+					mui.toast('加载下一级审批人失败，请刷新页面');
+					return false;
+				} else 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_ExtraWork.approvalWorkOver(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() {},
-		destroyed() {},
+		mounted() {
+			this.getList();
+			//this.getBusinessOutApprovalPerson()
+			//监控下拉加载事件
+			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 (['MasterExtraWorkVerifyInfo'].indexOf(to.name) > -1) {
+				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', ['MasterExtraWorkVerifyList'])
+			} else {
+				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', [])
+			}
+			next()
+		},
 	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style src="$project/assets/css/iconfont.css"></style>
-<style>
+<style scoped>
+	
+	.mui-segmented-control {
+		position: fixed;
+		top: 44px;
+		z-index: 99;
+		background-color: #eee;
+	}
+	
+	.mui-fullscreen {
+		position: unset;
+		margin-top: 45px;
+	}
 </style>

src/utils/index.js

@@ -52,6 +52,22 @@ export const daysDistance = (date1, date2) => {
 	return days;
 }
 //计算两个时间的相差小时数
+export const hourDistanceArr = (date1, date2) => {
+	if (!date1 || !date2) {
+		return '-';
+	}
+	date1 = Date.parse(date1);
+	date2 = Date.parse(date2);
+	var ms = date2 - date1;
+	ms = ms < 0 ? 0 : ms;
+	ms = ms / 1000; //s
+	var Hour = parseInt(Math.floor(ms / (60 * 60)));
+	var Fen = parseInt(Math.floor(ms % (60 * 60) / 60));
+	var s = parseInt(Math.floor(ms % (60)));
+	//600000
+	return [Hour, Fen, s]
+}
+//计算两个时间的相差小时数
 export const hourDistance = (date1, date2) => {
 	if (!date1 || !date2) {
 		return '-';