考勤统计与详情

config/pages.js

@@ -200,7 +200,7 @@ const config = {
 				entry: 'src/projects/home/main.js',
 				template: 'index/home/index.html',
 				filename: 'index.html',
-				title: '' + title,
+				title: '小鹏管家' + title,
 			}
 		},
 		outputDir: 'dist/home',

src/projects/business/apis/HouseKeeper/admin.js

@@ -55,20 +55,20 @@ export function switchCompany(params) {
 	})
 }
 
-//获取考勤列表数据
-export function getAttednance(params) {
+//获取考勤统计时段列表
+export function getAttednanceTimeList(params) {
 	return request({
-		url: '',
-		data: Qs.stringify(params),
-		method: 'post',
+		url: '/mobile/workAttendance/findAttendancePeriod',
+		params: params,
+		method: 'get',
 	})
 }
 
-//获取异地打卡详情
-export function getAttednanceOutsideInfo(params) {
+//获取考勤列表数据
+export function getAttednance(params) {
 	return request({
-		url: '',
-		data: Qs.stringify(params),
-		method: 'post',
+		url: '/mobile/workAttendance/workAttendanceStat',
+		params: params,
+		method: 'get',
 	})
-}
+}

src/projects/business/views/HouseKeeper/Admin/Attendance/List.vue

@@ -6,72 +6,18 @@
 		<div class="mui-content vongi-admin-kqtj">
 			<div class="fyy-temper-date">
 				<a class="mui-col-xs-6" @click="selectData">{{subForm.queryDate}}<span class="mui-icon iconfont icon-xiajiantou"></span></a>
-				<a class="mui-col-xs-6">08:00-09:00<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>
-			<h6>本时段考勤统计: 已打卡<span class="color55f868">30</span>人/缺卡<span class="colorfe616c">2</span>人</h6>
+			<h6>本时段考勤统计: 已打卡<span class="color55f868" v-text="absentCount"></span>人/缺卡<span class="colorfe616c" v-text="workCount"></span>人</h6>
 			<ul class="mui-table-view mui-table-view-chevron">
-				<li class="mui-table-view-cell mui-collapse vongi-work">
-					<a class="mui-navigate-right" href="#">信息工程中心</a>
+				<li v-for="(item,index) in recordList" class="mui-table-view-cell mui-collapse vongi-work">
+					<a class="mui-navigate-right" v-text="item.companyName"></a>
 					<ul class="mui-table-view mui-table-view-chevron">
-						<li class="mui-table-view-cell">
-							姓名
+						<li v-for="(iten,inden) in item.personList" class="mui-table-view-cell" @click="goToInfo(iten)">
+							{{iten.name}}
 							<div class="mui-media-body">
-								<button type="button" class="mui-btn  mui-btn-primary mui-btn-outlined">设备打卡</button>
-								<span class="color55f868">正常</span>
-							</div>
-						</li>
-						<li class="mui-table-view-cell">
-							姓名
-							<div class="mui-media-body">
-								<button type="button" class="mui-btn  mui-btn-danger mui-btn-outlined">异地打卡</button>
-								<span class="colorf8b155">早退</span>
-							</div>
-						</li>
-						<li class="mui-table-view-cell">
-							姓名
-							<div class="mui-media-body">
-								<button type="button" class="mui-btn  mui-btn-royal mui-btn-outlined">补 卡</button>
-								<span class="colorf8b155">迟到</span>
-							</div>
-						</li>
-						<li class="mui-table-view-cell">
-							姓名
-							<div class="mui-media-body">
-								<button type="button" class="mui-btn  mui-btn-primary mui-btn-outlined">设备打卡</button>
-								<span class="colorfe616c">缺卡</span>
-							</div>
-						</li>
-					</ul>
-				</li>
-				<li class="mui-table-view-cell mui-collapse vongi-work">
-					<a class="mui-navigate-right" href="#">保卫科</a>
-					<ul class="mui-table-view mui-table-view-chevron">
-						<li class="mui-table-view-cell">
-							姓名
-							<div class="mui-media-body">
-								<button type="button" class="mui-btn  mui-btn-primary mui-btn-outlined">设备打卡</button>
-								<span class="color55f868">正常</span>
-							</div>
-						</li>
-						<li class="mui-table-view-cell">
-							姓名
-							<div class="mui-media-body">
-								<button type="button" class="mui-btn  mui-btn-danger mui-btn-outlined">异地打卡</button>
-								<span class="colorf8b155">早退</span>
-							</div>
-						</li>
-						<li class="mui-table-view-cell">
-							姓名
-							<div class="mui-media-body">
-								<button type="button" class="mui-btn  mui-btn-royal mui-btn-outlined">补 卡</button>
-								<span class="colorf8b155">迟到</span>
-							</div>
-						</li>
-						<li class="mui-table-view-cell">
-							姓名
-							<div class="mui-media-body">
-								<button type="button" class="mui-btn  mui-btn-primary mui-btn-outlined">设备打卡</button>
-								<span class="colorfe616c">缺卡</span>
+								<button type="button" class="mui-btn  mui-btn-primary mui-btn-outlined" v-show="iten.remark" v-text="iten.remark"></button>
+								<span class="color55f868" v-show="iten.result" v-text="iten.result"></span>
 							</div>
 						</li>
 					</ul>
@@ -111,9 +57,14 @@
 				isLoading: false,
 
 				subForm: {
-					queryDate: ''
+					queryDate: '',
+					alarmConfigId: ''
 				},
+				absentCount: 0,
+				workCount: 0,
 				recordList: [],
+				timeList: [],
+				timeName: '',
 			}
 		},
 		created() {
@@ -124,10 +75,12 @@
 			getList() {
 				this.isLoading = true;
 				API_Admin.getAttednance(this.subForm).then(response => {
+					this.isLoading = false;
 
-					this.recordList = response;
+					this.recordList = response.groupList;
+					this.absentCount = response.absentCount
+					this.workCount = response.workCount
 
-					this.isLoading = false;
 				}).catch(error => {
 					this.isLoading = false;
 					mui.toast(error);
@@ -145,15 +98,87 @@
 				});
 				picker.show(function(rs) {
 					_this.subForm.queryDate = rs.text;
-					_this.getList();
+					//获取时段列表
+					_this.getTimeList();
 					picker.dispose();
 				});
 			},
+			//获取时段列表
+			getTimeList() {
+				this.isLoading = true;
+				API_Admin.getAttednanceTimeList(this.subForm).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;
+
+				}).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.getList();
+				})
+			},
+			//跳转到详情页
+			goToInfo(iten) {
+				if (iten.type) {
+					if (iten.type == '0' && iten.personDeviceLogId) {
+						//设备打卡
+						this.$router.push({
+							name: 'HouseKeeperAdminAttendanceTemperatureInfo',
+							query: {
+								id: iten.personDeviceLogId
+							}
+						})
+					} else if (iten.type == '1' && iten.fillAttendanceId) {
+						//异地打卡
+						this.$router.push({
+							name: 'HouseKeeperAdminAttendanceOutsideInfo',
+							query: {
+								id: iten.personDeviceLogId
+							}
+						})
+					} else if (iten.type == '2' && iten.fillAttendanceId) {
+						//补卡
+						this.$router.push({
+							name: 'HouseKeeperAdminAttendanceSupplementInfo',
+							query: {
+								id: iten.fillAttendanceId
+							}
+						})
+					}
+				}
+			},
 			asynCallBack() {
 
 			},
 		},
 		mounted() {
+			//获取时段列表
+			this.getTimeList();
 			//获取列表
 			this.getList();
 		},

src/projects/business/views/HouseKeeper/Admin/Attendance/OutsideInfo.vue

@@ -1,20 +1,19 @@
 <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>
+		<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" v-image-preview>
 				</div>
 				<div class="mui-media-body">
-					冯银银
-					<p class='mui-ellipsis'><span class="colorfe616c">异地打卡</span>申请</p>
+					{{detail.personName}}
+					<p class='mui-ellipsis'><span class="colorfe616c">{{detail.typeN}}</span>申请</p>
 				</div>
-				<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">
-					异地打卡
+				<button type="button" :class="'mui-btn mui-btn-success mui-btn-outlined '+(detail.status>0?(detail.status==1?'status_a':'status_r'):'')">
+					{{detail.status>0?(detail.status==1?'已同意':'已拒绝'):'未审核'}}
 				</button>
 			</div>
 
@@ -22,19 +21,23 @@
 				<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 class="colorf6f448">2020-04-19 07:30-09:00</span>
+						<span class="colorf6f448" v-text="detail.fillAttendanceDayAndTime"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">申请时间</div>
-						<span>2020-04-19 07:30:56</span>
+						<span v-text="detail.createTime"></span>
+					</li>
+					<li class="mui-table-view-cell mui-media">
+						<div class="mui-media-body">申请理由</div>
+						<span class="colorf8b155" v-text="detail.content"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">打卡位置</div>
@@ -43,17 +46,8 @@
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">相关照片</div>
 						<span class="vongi-yddk-dat-photo flew">
-							<div class="mui-col-xs-3">
-								<img src="~$project/assets/img/zhaop1.jpg" width="100%" />
-							</div>
-							<div class="mui-col-xs-3">
-								<img src="~$project/assets/img/zhaop1.jpg" width="100%" />
-							</div>
-							<div class="mui-col-xs-3">
-								<img src="~$project/assets/img/zhaop1.jpg" width="100%" />
-							</div>
-							<div class="mui-col-xs-3">
-								<img src="~$project/assets/img/zhaop1.jpg" width="100%" />
+							<div class="mui-col-xs-3" v-for="(item,index) in picList">
+								<img :src="item" v-image-preview />
 							</div>
 						</span>
 					</li>
@@ -64,15 +58,7 @@
 				<ul class="mui-table-view">
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">审批人</div>
-						<span>郑强</span>
-					</li>
-					<li class="mui-table-view-cell mui-media">
-						<div class="mui-media-body">审批状态</div>
-						<span class="color55f868">同意</span>
-					</li>
-					<li class="mui-table-view-cell mui-media">
-						<div class="mui-media-body">审批意见</div>
-						<span class="colorf6f448">无</span>
+						<span v-text="detail.approvalPersonName"></span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">审批时间</div>
@@ -80,7 +66,11 @@
 					</li>
 					<li class="mui-table-view-cell mui-media">
 						<div class="mui-media-body">审批编号</div>
-						<span>20200419115613532321135</span>
+						<span v-text="detail.approvalNo"></span>
+					</li>
+					<li class="mui-table-view-cell mui-media">
+						<div class="mui-media-body">审批意见</div>
+						<span class="colorf6f448" v-text="detail.approvalContent"></span>
 					</li>
 				</ul>
 			</div>
@@ -89,10 +79,93 @@
 </template>
 
 <script>
+	import * as API_Attendance from '@/apis/Master/attendance'
+	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: 'HouseKeeperAdminAttendanceOutsideInfo',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '补卡详情',
+
+				isLoading: false,
+
+				subForm: {
+					id: this.$route.query.id
+				},
+				detail: {},
+			}
+		},
+		created() {
+
+		},
+		methods: {
+			//获取详情
+			getDetail() {
+				this.isLoading = true;
+				API_Attendance.getApplyInfo(this.subForm).then(response => {
+
+					this.detail = response;
+
+					this.isLoading = false;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			asynCallBack() {
+
+			},
+		},
+		mounted() {
+			//获取详情
+			this.getDetail();
+		},
+		destroyed() {},
+		computed: {
+			picList: {
+				// getter
+				get: function() {
+					if (this.detail && this.detail.fillAttendanceFilesUrl) {
+						return this.detail.fillAttendanceFilesUrl.split(',');
+					} else {
+						return [];
+					}
+				},
+				// setter
+				set: function(newValue) {
+					console.log(newValue)
+				}
+			},
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+			})
+		}
+	}
 </script>
 
 <style scoped src="$project/assets/css/sczpfyy.css"></style>
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style src="$project/assets/css/iconfont.css"></style>
 <style scoped>
+	.status_r {
+		color: #fe616c !important;
+		border: 1px solid #fe616c !important;
+	}
+
+	.status_a {
+		color: #05c8af !important;
+		border: 1px solid #05c8af !important;
+	}
 </style>