考勤统计与keepalive

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

@@ -104,3 +104,23 @@ export function getCompanyList(params) {
 		method: 'get',
 	})
 }
+
+//获取考勤人员列表
+export function getNewPrsonList(params) {
+	return request({
+		url: '/mobile/workAttendance/workAttendanceStatByCompanyIdAndDate',
+		params: params,
+		method: 'get',
+	})
+}
+
+//获取考勤具体详情id
+export function getBusinessId(id) {
+	return request({
+		url: '/mobile/workAttendance/getBusinessId',
+		params: {
+			id: id
+		},
+		method: 'get',
+	})
+}

src/projects/business/router/index.js

@@ -28,7 +28,18 @@ const routes = routesIndex.concat(routesCommon, routesGuest, routesMaster);
 
 const router = new VueRouter({
 	//base: process.env.BASE_URL,
-	routes
+	routes,
+
+	scrollBehavior(to, from, savedPosition) {
+		if (savedPosition) {
+			return savedPosition
+		} else {
+			return {
+				x: 0,
+				y: 0
+			}
+		}
+	}
 })
 
 export default router

src/projects/business/router/master.js

@@ -822,7 +822,8 @@ const routesMaster = [
 							requireAuth: true,
 							role: [],
 							title: '考勤统计列表',
-							mode: true
+							mode: true,
+							keepAlive: true
 						}
 					},
 					//考勤记录测温详情

src/projects/business/views/Layout.vue

@@ -1,6 +1,9 @@
 <template>
 	<div>
-		<router-view></router-view>
+		<keep-alive>
+		   <router-view v-if='$route.meta.keepAlive'></router-view>
+		</keep-alive>
+		<router-view v-if='!$route.meta.keepAlive'></router-view>
 	</div>
 </template>
 

src/projects/business/views/Master/Attendance/StatisticList.vue

@@ -1,3 +1,8 @@
+<!--workStatus:1-工作，2-外出，3-出差，4-休假-->
+<!--result:0-缺卡，1-正常，2-迟到，3-早退, 4-出差，5-请假-->
+<!--type:0=设备打卡，1=外勤打卡、2=补卡-->
+<!--status:0：无操作， 1:机器打卡记录，2：请假审批详情，3：外勤打卡、补卡审批详情-->
+
 <template>
 	<div>
 		<common @asynCallBack="asynCallBack"></common>
@@ -6,7 +11,6 @@
 		<div class="mui-content vongi-admin-kqtj">
 			<div class="fyy-temper-date" style="position: fixed;width: 100%;top: 45px;z-index: 10;">
 				<a class="mui-col-xs-12" @click="selectData">{{subForm.queryDate}}<span class="mui-icon iconfont icon-xiajiantou"></span></a>
-				<!-- <a class="mui-col-xs-6" @click="selectTime">{{timeName}}<span class="mui-icon iconfont icon-xiajiantou"></span></a> -->
 			</div>
 			<div class="vongi-bread" style="margin-top: 45px;">
 				<template v-for="(item,index) in navList">
@@ -20,110 +24,56 @@
 						<a class="mui-navigate-right" @click="reloadNext(item)">{{item.name}}（{{item.number}}）</a>
 					</li>
 				</ul>
-				<!-- <div class="vongi-work">
-					<ul class="mui-table-view">
-						<template v-for="(iten,index) in recordList">
-							<li v-for="(item,index) in iten.personList" class="mui-table-view-cell">
-								{{item.name}}
-								<div class="mui-media-body">
-									<button type="button" class="mui-btn  mui-btn-primary mui-btn-outlined" v-if="item.remark && item.result!='0'"
-									 v-text="item.remark"></button>
-									<span :class="resultColor[item.result]" v-if="item.resultN" v-text="item.resultN"></span>
-								</div>
-							</li>
-						</template>
-						<li class="mui-table-view-cell">
-							<a class="vongi-lodtext">加载更多统计数据<span class="iconfont icon-xiajiantou_huaban"></span></a>
-						</li>
-					</ul>
-				</div> -->
 				<!--部门-->
 				<div class="vongi-work" style="margin-bottom:80px;">
-					<div v-if="recordList.length>0 && recordList[0]['personList'].length>0" class="mui-content-padded">
+					<div v-if="recordList.length>0" class="mui-content-padded">
 						<h5 class="flew-items"><span class="iconfont icon-guanliyuan color4fc5f7"></span>组织人员</h5>
 					</div>
 					<div class="vongi-kqtj-list">
-						<div class="mui-card">
+						<div v-for="(item,index) in recordList" class="mui-card">
 							<div class="mui-card-header">
-								凡佳佳
-								<button type="button" class="mui-btn  mui-btn-royal mui-btn-outlined">补卡</button>
+								{{item.name}}
+								<button type="button" class="mui-btn  mui-btn-royal mui-btn-outlined" v-text="item.workStatusN" :style="setColor(item.workStatus,'workStatus')"></button>
 							</div>
 							<div class="mui-card-content">
 								<div class="mui-card-content-inner flew">
-									<div class="mui-col-xs-3 vongi-center vongi-clasadmin-ma">
-										<p class="">08:25</p>
-										<a class="mui-media-body mui-navigate-right color55f868" href="">
-											<span class="iconfont icon-_renlianshibie color4fc5f7"></span>正常</a>
-									</div>
-									<div class="mui-col-xs-3 vongi-center vongi-clasadmin-ma">
-										<p class="">08:25</p>
-										<a class="mui-media-body mui-navigate-right colorda94f8" href="">
-											<span class="iconfont icon-_renlianshibie color4fc5f7"></span>请假</a>
-									</div>
-									<div class="mui-col-xs-3 vongi-center vongi-clasadmin-ma">
-										<p class="">08:25</p>
-										<a class="mui-media-body mui-navigate-right colorf8b155" href="">
-											<span class="iconfont icon-_renlianshibie color4fc5f7"></span>迟到</a>
-									</div>
-									<div class="mui-col-xs-3 vongi-center vongi-clasadmin-ma">
-										<p class="">08:25</p>
-										<a class="mui-media-body colorfe616c">
-											缺卡</a>
+									<div @click="getBusinessId(iten.status, iten.id)" v-for="(iten,indy) in item.list" class="mui-col-xs-3 vongi-center vongi-clasadmin-ma">
+										<p v-text="iten.time"></p>
+										<a :class="'mui-media-body '+(iten.result!='0'?'mui-navigate-right ':'')" :style="setColor(iten.result,'result')">
+											<span v-if="iten.result!='0'" :class="'iconfont '+(iten.status=='1'?'icon-_renlianshibie ':(iten.status=='3'?'icon-shouji ':'')) +'color4fc5f7'"></span>
+											{{iten.remark}}
+										</a>
 									</div>
 								</div>
 							</div>
 						</div>
-						
 					</div>
-					<!-- <ul class="mui-table-view">
-						<template v-for="(iten,index) in recordList">
-							<li v-show="filterStatus=='-1' || item.result==filterStatus" v-for="(item,index) in iten.personList" class="mui-table-view-cell">
-								<div class="mui-media-body">
-									{{item.name}}
-									<span v-if="item.result=='0'" class="mui-h6 vongi-kqtj-time">{{timeName}}</span>
-									<span v-else class="mui-h6 vongi-kqtj-time">打卡时间：{{item.workTime}}</span>
-								</div>
-								<div class="mui-media-body"> -->
-									<!--工作状态:1-工作，2-外出，3-出差，4-休假-->
-									<!--result:0-缺卡，1-正常，2-迟到，3-早退-->
-									<!--type:0=设备打卡，1=外勤打卡、2=补卡-->
-									<!-- <button type="button" class="mui-btn  mui-btn-primary mui-btn-outlined" v-if="item.workStatus!=1" v-text="item.workStatusN"></button>
-									<button type="button" class="mui-btn  mui-btn-primary mui-btn-outlined" v-if="item.remark && item.result!='0'"
-									 v-text="item.remark"></button>
-									<span :class="resultColor[item.result]" v-if="item.resultN" v-text="item.resultN"></span>
-								</div>
-							</li>
-						</template> -->
-						<!-- <li class="mui-table-view-cell">
-							<a class="vongi-lodtext">加载更多统计数据<span class="iconfont icon-xiajiantou_huaban"></span></a>
-						</li> -->
-					<!-- </ul> -->
 				</div>
 
 				<div class="vongi-clasadmin vongi-kqtj-bot">
 					<div class="vongi-clasadmin-list">
 						<div @click="filter('1',workCount)" class="vongi-clasadmin-ma mui-col-xs-2">
-							<span :class="['-1','1'].indexOf(filterStatus)>-1?'color55f868':'colorAAA'" v-text="workCount"></span>
+							<span :class="['','1'].indexOf(subForm.resultN)>-1?'color55f868':'colorAAA'" v-text="workCount"></span>
 							<div class="mui-media-body">正常</div>
 						</div>
 						<div @click="filter('2',lateCount)" class="vongi-clasadmin-ma mui-col-xs-2">
-							<span :class="['-1','2'].indexOf(filterStatus)>-1?'colorf8b155':'colorAAA'" v-text="lateCount"></span>
+							<span :class="['','2'].indexOf(subForm.resultN)>-1?'colorf8b155':'colorAAA'" v-text="lateCount"></span>
 							<div class="mui-media-body">迟到</div>
 						</div>
 						<div @click="filter('3',leaveEarlyCount)" class="vongi-clasadmin-ma mui-col-xs-2">
-							<span :class="['-1','3'].indexOf(filterStatus)>-1?'colorda94f8':'colorAAA'" v-text="leaveEarlyCount"></span>
+							<span :class="['','3'].indexOf(subForm.resultN)>-1?'colorf8b155':'colorAAA'" v-text="leaveEarlyCount"></span>
 							<div class="mui-media-body">早退</div>
 						</div>
 						<div @click="filter('0',absentCount)" class="vongi-clasadmin-ma mui-col-xs-2">
-							<span :class="['-1','0'].indexOf(filterStatus)>-1?'colorfe616c':'colorAAA'" v-text="absentCount"></span>
+							<span :class="['','0'].indexOf(subForm.resultN)>-1?'colorfe616c':'colorAAA'" v-text="absentCount"></span>
 							<div class="mui-media-body">缺卡</div>
 						</div>
-						<div class="vongi-clasadmin-ma mui-col-xs-2">
-							<span class="colorda94f8">0</span>
+						<div @click="filter('4',businessCount)" class="vongi-clasadmin-ma mui-col-xs-2">
+							<span :class="['','4'].indexOf(subForm.resultN)>-1?'colorda94f8':'colorAAA'" v-text="businessCount"></span>
 							<div class="mui-media-body">出差</div>
 						</div>
-						<div class="vongi-clasadmin-ma mui-col-xs-2">
-							<span class="colorda94f8">23</span>
+						<div @click="filter('5',vacationCount)" class="vongi-clasadmin-ma mui-col-xs-2">
+							<span :class="['','5'].indexOf(subForm.resultN)>-1?'colorda94f8':'colorAAA'" v-text="vacationCount"></span>
 							<div class="mui-media-body">请假</div>
 						</div>
 					</div>
@@ -142,6 +92,7 @@
 	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 {
 		mapGetters,
 		mapMutations
@@ -167,15 +118,18 @@
 					queryDate: '',
 					alarmConfigId: '',
 					companyId: '',
+					pageIndex: 1,
+					pageSize: 10,
+					totalPage: 1,
+					resultN: ''
 				},
 				absentCount: 0,
 				workCount: 0,
 				leaveEarlyCount: 0,
 				lateCount: 0,
+				businessCount: 0,
+				vacationCount: 0,
 				recordList: [],
-				tempRecordList: [],
-				timeList: [],
-				timeName: '',
 
 				companyList: [],
 				isLast: false,
@@ -186,25 +140,17 @@
 					hasNext: true,
 				}],
 
-				resultColor: ['colorfe616c', 'color55f868', 'colorf8b155', 'colorf8b155'],
-
-				filterStatus: '-1',
 			}
 		},
 		created() {
 			this.subForm.queryDate = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
 		},
 		methods: {
-			//获取列表
-			getList() {
-				//if (this.isLast) {
-					this.getPersonList();
-				//} else {
-					this.getCompanyList();
-				//}
-			},
 			//获取公司列表
 			getCompanyList() {
+				//切换公司人员选第一页
+				this.subForm.pageIndex = 1;
+
 				this.isLoading = true;
 				API_Attendance.getCompanyList(this.subForm).then(response => {
 					this.isLoading = false;
@@ -213,6 +159,8 @@
 					//如果只有一条数据，自动点到里面一层
 					if (this.companyList.length == 1 && this.nowLevel == 0) {
 						this.reloadNext(this.companyList[0]);
+					} else {
+						this.getPersonList();
 					}
 
 				}).catch(error => {
@@ -234,15 +182,33 @@
 			//获取人员列表
 			getPersonList() {
 				this.isLoading = true;
-				API_Attendance.getPersonList(this.subForm).then(response => {
+				API_Attendance.getNewPrsonList(this.subForm).then(response => {
 					this.isLoading = false;
 
-					this.recordList = response.groupList;
-					this.tempRecordList = this.recordList;
+					if (response.groupList.length > 0) {
+						if (this.subForm.pageIndex == 1) {
+							this.recordList = response.groupList[0].personList;
+							//this.subForm.pageIndex = response.groupList[0].pageNumber;
+							//this.subForm.totalPage = response.groupList[0].totalPage;
+						} else {
+							this.recordList = [
+								...this.recordList,
+								...response.groupList[0].personList
+							];
+						}
+
+						this.subForm.pageIndex = response.groupList[0].pageNumber;
+						this.subForm.totalPage = response.groupList[0].totalPage;
+					}
+					this.subForm.pageIndex++;
+
+					//this.recordList = response.groupList;
 					this.absentCount = response.absentCount;
 					this.workCount = response.workCount;
 					this.leaveEarlyCount = response.leaveEarlyCount;
 					this.lateCount = response.lateCount;
+					this.businessCount = response.businessCount;
+					this.vacationCount = response.vacationCount;
 
 				}).catch(error => {
 					this.isLoading = false;
@@ -281,102 +247,124 @@
 				});
 				picker.show(function(rs) {
 					_this.subForm.queryDate = rs.text;
-					//获取时段列表
-					_this.getTimeList();
+					//获取公司列表
+					_this.getCompanyList();
 					picker.dispose();
 				});
 			},
-			//获取时段列表
-			getTimeList() {
-				this.isLoading = true;
-				API_Attendance.getAttednanceTimeList(this.subForm).then(response => {
-					this.isLoading = false;
+			//获取跳转详情的id
+			getBusinessId(status, id) {
+				if (status != '0') {
+					this.isLoading = true;
+					API_Attendance.getBusinessId(id).then(response => {
+						this.isLoading = false;
 
-					let timeList = [];
-					if (response.length > 0) {
-						for (var i = 0; i < response.length; i++) {
-							timeList.push({
-								value: response[i]['alarmConfigId'],
-								text: response[i]['timeRange']
-							})
-						}
-						this.subForm.alarmConfigId = timeList[0]['value'];
-						this.timeName = timeList[0]['text'];
-						this.getList();
-					} else {
-						this.subForm.alarmConfigId = '';
-						this.timeName = '';
-					}
-					this.timeList = timeList;
+						this.goToInfo(status, response.id);
 
-				}).catch(error => {
-					this.isLoading = false;
-					mui.toast(error);
-				})
-			},
-			//选择时间段
-			selectTime() {
-				var picker = new mui.PopPicker();
-				picker.setData(this.timeList);
-				var _this = this;
-				picker.show(function(selectItems) {
-					_this.subForm.alarmConfigId = selectItems[0].value;
-					_this.timeName = selectItems[0].text;
-					_this.getCompanyList();
-					_this.getPersonList();
-				})
+					}).catch(error => {
+						this.isLoading = false;
+						mui.toast(error);
+					})
+				}
 			},
 			//跳转到详情页
-			goToInfo(iten) {
-				if (iten.type) {
-					if (iten.type == '0' && iten.personDeviceLogId) {
+			goToInfo(status, id) {
+				if (status != '0') {
+					if (status == '1') {
 						//设备打卡
 						this.$router.push({
 							name: 'MasterAttendanceTemperatureInfo',
 							query: {
-								id: iten.personDeviceLogId
+								id: id
 							}
 						})
-					} else if (iten.type == '1' && iten.fillAttendanceId) {
-						//外勤打卡
+					} else if (status == '2') {
+						//请假详情
 						this.$router.push({
-							name: 'MasterAttendanceInfo',
+							name: 'MasterAttendanceLeaveInfo',
 							query: {
-								id: iten.fillAttendanceId
+								id: id
 							}
 						})
-					} else if (iten.type == '2' && iten.fillAttendanceId) {
-						//补卡
+					} else if (status == '3') {
+						//外勤、补卡详情
 						this.$router.push({
 							name: 'MasterAttendanceInfo',
 							query: {
-								id: iten.fillAttendanceId
+								id: id
 							}
 						})
 					}
 				}
 			},
-			//过滤显示
+			//下拉事件
+			handleScrool() {
+				if (isReachBottom()) {
+					console.log('到达底部')
+					if (this.subForm.pageIndex < this.subForm.totalPage && this.isLoading == false) {
+						this.getPersonList();
+					} else {
+						return;
+					}
+				}
+			},
+			//过滤筛选条件
 			filter(status, num) {
 				if (num > 0) {
-					if (this.filterStatus == status) {
-						this.filterStatus = '-1';
+					if (this.subForm.resultN == status) {
+						this.subForm.resultN = '';
 					} else {
-						this.filterStatus = status;
+						this.subForm.resultN = status;
 					}
+					this.subForm.pageIndex = 1;
+					this.getPersonList();
 				}
 			},
+			//设置颜色
+			setColor(value, type) {
+				var color = '';
+				if (type == 'result') {
+					if (value == '0') {
+						color = '#FF6666'
+					} else if (value == '1') {
+						color = '#389E0D;'
+					} else if (value == '2') {
+						color = '#FF8800;'
+					} else if (value == '3') {
+						color = '#FF8800;'
+					} else if (value == '4') {
+						color = '#FF8800;'
+					}
+				} else if (type == 'workStatus') {
+					if (value == '1') {
+						color = '#3385FF';
+					} else if (value == '2') {
+						color = '#FF8800';
+					} else if (value == '3') {
+						color = '#FF8800';
+					} else if (value == '4') {
+						color = '#8855FF';
+					}
+				}
+
+				return 'border-color:' + color + ';color:' + color + '; ';
+			},
 			asynCallBack() {
 
 			},
 		},
 		mounted() {
-			//获取时段列表
-			this.getTimeList();
 			//获取列表
-			this.getList();
+			this.getCompanyList();
+			//监控下拉加载事件
+			var _this = this;
+			window.addEventListener('scroll', _this.handleScrool);
+		},
+		destroyed() {
+			//销毁监听事件
+			var _this = this;
+			window.removeEventListener('scroll', _this.handleScrool);
 		},
-		destroyed() {},
 		computed: {
 			...mapGetters({
 				openId: 'wx_openid',
@@ -385,19 +373,6 @@
 				person_popedom: 'person_popedom',
 			})
 		},
-		watch: {
-			'subForm.companyId': {
-				handler(newValue) {
-					if (newValue) {
-						this.getPersonList();
-					} else {
-						this.recordList = [];
-					}
-				},
-				immediate: true,
-				deep: true
-			},
-		}
 	}
 </script>