考勤打卡接口联调完成(距离等实际测试的时候再弄)

components/CusCalendar/index.vue

@@ -6,7 +6,7 @@
 		<div class="date">
 			<div class="d_pre" v-for="(pre,idx) in calendarList" :key="idx" @tap="selectDay(pre,idx)">
 				<div class="day" :class="{'dq':pre.iscurrentday,'select':pre.select,'wd':pre.isweekday}">{{pre.day}}</div>
-				<div class="status" :class="{'zc':pre.status==1,'yc':pre.status==2}" v-if="pre.isweekday"></div>
+				<div class="status" :class="{'zc':pre.status===0,'yc':pre.status===1}" v-if="pre.status<2"></div>
 			</div>
 		</div>
 	</view>
@@ -19,12 +19,13 @@
 				weekList:['一','二','三','四','五','六','日'],
 				year:new Date().getFullYear(),
 				month:new Date().getMonth()+1,
-				calendarList:[]
+				calendarList:[],
+				clockList:[]
 			}
 		},
-		created() {
-			this.getDataByMonth(this.year,this.month);
-		},
+		// created() {
+		// 	this.getDataByMonth(this.year,this.month);
+		// },
 		methods:{
 			getDataByMonth(year,month){
 				const daysInMonth = new Date(year, month, 0).getDate();
@@ -48,7 +49,12 @@
 				this.calendarList = JSON.parse(JSON.stringify(list));
 				this.calendarList.forEach((c,i)=>{
 					this.$set(this.calendarList[i],'select',false);
-					this.$set(this.calendarList[i],'status',1);
+					let t = this.clockList.find(l=>l.attendanceDate==c.nyr);
+					if(t&&c.month==month){
+						this.$set(this.calendarList[i],'status',t?.isLeave===0?0:1);
+						this.$set(this.calendarList[i],'id',t?.id);
+					} 
+					else this.$set(this.calendarList[i],'status',2);
 				})
 			},
 			insertDays(year,month,calendar){
@@ -90,19 +96,33 @@
 				return list
 			},
 			async selectDay(pre,idx){
+				let info = {
+					clockTimes:0,
+					workHours:0,
+					sbTime:'',
+					xbTime:'',
+					status:0
+				}
+				if(pre.id){
+					let res = await this.$api.get('/wms/outsourced/attendance/'+pre?.id||'');
+					if(res.data.code!==0) return this.$showToast(res.data.msg)
+					let d = res.data.data;
+					info.clockTimes = d.isLeave===0?2:((d.isLeave===1||d.isLeave===2)?1:0);
+					info.workHours = d.workingHours;
+					info.sbTime = (d.isLeave===0||d.isLeave===2)?d.checkInTime:'';
+					info.xbTime = (d.isLeave===0||d.isLeave===1)?d.clockOutTime:'';
+					info.status = 1;
+				}
+				this.$emit('selectInfo',info);
+				
 				if(pre?.month==this.month){
 					this.calendarList.forEach((c,i)=>{
 						this.$set(this.calendarList[i],'select',i===idx);
 					})
 				}else{
-					this.year = pre.year;
-					this.month = pre.month;
-					await this.getDataByMonth(pre.year,pre.month)
-					let idx = this.calendarList.findIndex(c=>c.month==pre.month);
-					this.$set(this.calendarList[idx],'select',true);
 					this.$emit('selectDay',pre);
 				}
-			},
+			}
 		}
 	}
 </script>

pages.json

@@ -1,27 +1,19 @@
 {
 	"pages": [
-		// {
-		// 	"path": "pages/operation/index",
-		// 	"style": {
-		// 		"navigationStyle": "custom"
-		// 	}
-		// },
-		
 		{
-			"path": "pagesClockin/index",
+			"path": "pages/login/wxLogin",
 			"style": {
 				"navigationStyle": "custom"
 			}
 		},
-		
 		{
-			"path": "pages/login/wxLogin",
+			"path": "pages/my/info",
 			"style": {
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path": "pages/my/info",
+			"path": "pages/operation/index",
 			"style": {
 				"navigationStyle": "custom"
 			}
@@ -276,17 +268,17 @@
 				}
 			]
 		},
-		// {
-		// 	"root": "pagesClockin",
-		// 	"pages": [
-		// 		{
-		// 			"path": "index",
-		// 			"style": {
-		// 				"navigationStyle": "custom"
-		// 			}
-		// 		}
-		// 	]
-		// },
+		{
+			"root": "pagesClockin",
+			"pages": [
+				{
+					"path": "index",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				}
+			]
+		},
 		{
 			"root": "pagesStatistics",
 			"pages": [

pages/login/wxLogin.vue

@@ -25,7 +25,8 @@
 			decryptPhoneNumber(e){
 				if(uni.getStorageSync('token')){
 					uni.reLaunch({
-						url:'/pagesStorage/home'
+						// url:'/pagesStorage/home'
+						url:'/pagesClockin/index'
 					})
 					return
 				}
@@ -53,7 +54,8 @@
 								that.$showToast('登录成功');
 								setTimeout(()=>{
 									uni.reLaunch({
-										url:'/pagesStorage/home'
+										// url:'/pagesStorage/home'
+										url:'/pagesClockin/index'
 									})
 								},1500)
 							}else that.$showToast(res.data.msg)

pagesClockin/index.vue

@@ -17,29 +17,31 @@
 				<div class="cw_pre">
 					<p>上班08:30</p>
 					<div class="cwp_time">
-						<image :src="imgBase+'clockingin/checked_active.png'"></image>
+						<image :src="imgBase+'clockingin/checked_active.png'" v-if="sbClockTime"></image>
+						<image :src="imgBase+'clockingin/checked_inactive.png'" v-else></image>
 						<span>打卡{{sbClockTime||'- -'}}</span>
 					</div>
-					<div class="cwp_status active">已打卡</div>
+					<div class="cwp_status" :class="{'active':sbClockTime,'inactive':!sbClockTime}">{{sbClockTime?'已打卡':'未打卡'}}</div>
 				</div>
 				<div class="cw_pre">
 					<p>下班20:00</p>
 					<div class="cwp_time">
-						<image :src="imgBase+'clockingin/checked_inactive.png'"></image>
+						<image :src="imgBase+'clockingin/checked_active.png'" v-if="xbClockTime"></image>
+						<image :src="imgBase+'clockingin/checked_inactive.png'" v-else></image>
 						<span>{{xbClockTime||'- -'}}</span>
 					</div>
-					<div class="cwp_status inactive">未打卡</div>
+					<div class="cwp_status" :class="{'active':xbClockTime,'inactive':!xbClockTime}">{{xbClockTime?'已打卡':'未打卡'}}</div>
 				</div>
 			</div>
 			<div class="c_clock">
-				<div class="cc_box" :style="{'background-image':'url('+imgBase+'clockingin/clock_active_bg.png)'}" @tap="clock">
+				<div class="cc_box" :style="{'background-image':'url('+imgBase+(canClock?'clockingin/clock_active_bg.png':'clockingin/clock_inactive_bg.png')+')'}" @tap="clock">
 					<p>{{isSW?'上班':'下班'}}打卡</p>
 					<p class="time">{{currentSFM}}</p>
 				</div>
 				<div class="cc_location">
-					<image :src="imgBase+'clockingin/location_active.png'"></image>
-					<span>已进入考勤范围：谷锐特设备自动化有限公司</span>
-					<!-- <span>当前定位不在考勤范围内</span> -->
+					<image :src="imgBase+(canClock?'clockingin/location_active.png':'clockingin/location_inactive.png')"></image>
+					<span v-if="canClock">已进入考勤范围：谷锐特设备自动化有限公司</span>
+					<span v-else>当前定位不在考勤范围内</span>
 				</div>
 			</div>
 		</div>
@@ -69,33 +71,49 @@
 		components:{ Tabbar },
 		data(){
 			return {
-				username:'王勇毅',
+				username:'',
 				dateweek:'',
-				sbClockTime:'08::24',
+				sbClockTime:'',
 				xbClockTime:'',
-				isSW:true,//是否是上午，12点前是上午，12点后是下午
+				isSW:true,//是否是上午，12点前是上午/12点前上午打过卡就是下午了，12点后是下午
 				currentSFM:new Date().Format('hh:mm:ss'),
 				show:false,
+				canClock:false,
 				clockTime:'',
 				distance: null,
 				targetLocation: { //谷锐特 31.962084,117.020446  /跨境电商大厦 31.865786,117.15297
 					latitude: 31.865786,
 					longitude: 117.15297
-				}
+				},
+				userInfo:null
 			}
 		},
 		created() {
 			this.getDateWeek();
 			this.getCurrentSFM();
 			this.getCurrentHour();
+			if(uni.getStorageSync('userInfo')){
+				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
+				this.username = this.userInfo.realName;
+			}
 		},
 		onUnload() {
 			clearInterval(timer)
 		},
 		mounted() {
 			this.getCurrentLocation();
+			this.getUserInfo();
 		},
 		methods:{
+			getUserInfo(){
+				this.$api.get('/wms/outsourced/attendance/getAttendanceByUserId/'+this.userInfo?.id).then(res=>{
+					if(res.data.code!==0) return this.$showToast(res.data.msg)
+					this.sbClockTime = res.data.data?.checkInTime;
+					this.xbClockTime = res.data.data?.clockOutTime;
+					if(new Date().getHours()<12&&!this.sbClockTime) this.isSW = true
+					else this.isSW = false;
+				})
+			},
 			getDateWeek(){
 				let date = new Date().Format('yyyy年MM月dd日');
 				let cfg = {0:'天',1:'一',2:'二',3:'三',4:'四',5:'五',6:'六'};
@@ -111,11 +129,19 @@
 				this.isSW =  new Date().getHours()>12?false:true;
 			},
 			clock(){
-				this.clockTime = new Date().Format('hh:mm');
-				this.show = true;
+				if(!this.canClock) return
+				let url = this.isSW?'/wms/outsourced/attendance/checkIn':'/wms/outsourced/attendance/clockOut';
+				let params = {outUserId:this.userInfo?.id};
+				params[this.isSW?'checkInTime':'clockOutTime'] = new Date().Format('hh:mm');
+				this.$api.post(url,params).then(res=>{
+					if(res.data.code!==0) return this.$showToast(res.data.msg);
+					this.clockTime = new Date().Format('hh:mm');
+					this.show = true;
+				})
 			},
 			close(){
 				this.show = false;
+				this.getUserInfo();
 			},
 			// 获取当前位置
 			async getCurrentLocation() {
@@ -124,7 +150,6 @@
 				  type: 'gcj02 ', // 腾讯地图使用GCJ-02坐标系/
 				  isHighAccuracy: true
 				});
-				console.log(res);
 				this.calculateDistance(
 				  res[1].latitude, 
 				  res[1].longitude,
@@ -132,6 +157,7 @@
 				  this.targetLocation.longitude
 				);
 				console.log(this.distance,'distance');
+				this.canClock = this.distance<=10;
 			  } catch (err) {
 				uni.showToast({
 				  title: '获取位置失败，请检查权限设置',

pagesStatistics/index.vue

@@ -8,40 +8,46 @@
 			</div>
 			<div class="c_nums">
 				<div class="cn_pre">
-					<p>{{16}}</p>
+					<p>{{clockDays}}</p>
 					<p class="text">出勤天数</p>
 				</div>
 				<div class="cn_pre">
-					<p>{{416}}</p>
+					<p>{{workHours}}</p>
 					<p class="text">总工时</p>
 				</div>
 				<div class="cn_pre">
-					<p>{{46}}</p>
+					<p>{{mealTimes}}</p>
 					<p class="text">餐补次数</p>
 				</div>
 			</div>
 			<div class="c_calendar">
-				<Calendar ref="calendarRef" @selectDay="selectDay"></Calendar>
+				<Calendar ref="calendarRef" @selectDay="selectDay" @selectInfo="selectInfo"></Calendar>
 			</div>
 			<div class="c_tip">当日班次：{{'固定上下班'}} 班次 {{'08:30-17:30'}}</div>
-			<div class="c_tip">出勤统计：打卡{{2}}次，工时{{10}}小时</div>
-			<div class="c_time">
+			<div class="c_tip">出勤统计：打卡{{info.clockTimes||0}}次，工时{{info.workHours||0}}小时</div>
+			<div class="c_time" v-if="info&&info.status==1">
 				<image :src="imgBase+'clockingin/time_line.png'"></image>
 				<div class="ct_info">
-					<div class="cti_pre">
-						<div class="ctip_left">上班 {{'08:19'}}</div>
+					<div class="cti_pre" v-if="info.sbTime">
+						<div class="ctip_left">上班 {{info.sbTime}}</div>
 						<div class="ctip_right">
 							<image :src="imgBase+'clockingin/location_inactive.png'"></image>
 							<span>{{'谷锐特设备自动化有限公司'}}</span>
 						</div>
 					</div>
-					<div class="cti_pre">
-						<div class="ctip_left">下班 {{'20:30'}}</div>
+					<div class="cti_pre" v-else>
+						<div class="ctip_left">未打卡</div>
+					</div>
+					<div class="cti_pre" v-if="info.xbTime">
+						<div class="ctip_left">下班 {{info.xbTime}}</div>
 						<div class="ctip_right">
 							<image :src="imgBase+'clockingin/location_inactive.png'"></image>
 							<span>{{'谷锐特设备自动化有限公司'}}</span>
 						</div>
 					</div>
+					<div class="cti_pre" v-else>
+						<div class="ctip_left">未打卡</div>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -59,15 +65,25 @@
 			return {
 				currentDay:'',
 				currentTime:'',
+				clockDays:'',
+				workHours:'',
+				mealTimes:'',
 				show:false,
 				yearMonth:new Date().Format('yyyy-MM'),
 				minDate:'',
 				maxDate:'',
+				userInfo:null,
+				list:[],
+				info:null
 			}
 		},
 		onLoad() {
 			this.currentDay = new Date().Format('yyyy MM.dd');
 			this.currentTime = new Date().Format('yyyy-MM-dd hh:mm');
+			if(uni.getStorageSync('userInfo')){
+				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
+			}
+			this.getUserMonthClock(new Date().getFullYear(),new Date().getMonth()+1);
 		},
 		mounted() {
 			let d = new Date();
@@ -75,8 +91,31 @@
 			this.maxDate = new Date().getTime();	
 		},
 		methods:{
-			selectDay(obj){
+			getUserMonthClock(year,month){
+				this.$api.get('/wms/outsourced/attendance/listByUserId',{
+					outUserId:this.userInfo.id,
+					queryMoth:this.yearMonth
+				}).then(res=>{
+					if(res.data.code!==0) return this.$showToast(res.data.msg)
+					this.clockDays = res.data.data.filter(d=>d.isLeave!=3)?.length;
+					this.workHours = res.data.data.reduce((a,b)=>a+Number(b.workingHours),0);
+					this.mealTimes = res.data.data.reduce((a,b)=>a+Number(b.mealTimes),0);
+					
+					this.$refs.calendarRef.clockList = res.data.data||[];
+					this.$refs.calendarRef.getDataByMonth(year,month);
+				})
+			},
+			async selectDay(obj){
 				this.currentDay = new Date(obj.year,obj.month-1,1).Format('yyyy MM.dd');
+				this.$refs.calendarRef.year = obj.year;
+				this.$refs.calendarRef.month = obj.month;
+				this.yearMonth = new Date(obj.year,obj.month-1,1).Format('yyyy-MM');
+				this.getUserMonthClock(obj.year,obj.month);
+				// let idx = this.$refs.calendarList.findIndex(c=>c.month==obj.month);
+				// this.$set(this.$refs.calendarList[idx],'select',true);
+			},
+			selectInfo(info){
+				this.info = info;
 			},
 			confirm(e){
 				this.currentDay = new Date(e.value).Format('yyyy MM.dd');
@@ -84,7 +123,9 @@
 				let month = Number(new Date(e.value).Format('MM'));
 				this.$refs.calendarRef.year = year;
 				this.$refs.calendarRef.month = month;
-				this.$refs.calendarRef.getDataByMonth(year,month);
+				this.yearMonth = new Date(e.value).Format('yyyy-MM');
+				this.getUserMonthClock(year,month);
+				this.info = {status:0}
 				this.show = false;
 			},
 		}