打卡功能

pages.json

@@ -1319,6 +1319,24 @@
             }
             
         }
+        ,{
+            "path" : "pages/clock/the_clock_record",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/clock/supp_clock",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"subpackages": [{
 			"root": "pageA",

pages/clock/supp_clock.vue

@@ -0,0 +1,254 @@
+<template>
+	<view>
+		<view class="wrap">
+			<view class="content">
+				<view class="c-row">
+					<view class="title">补卡原因</view>
+					<view class="con-list">
+						<u-radio-group v-model="typevalue">
+							<u-radio key="1" label="上班" name="1">上班</u-radio>
+							<u-radio key="3" label="下班" name="3">下班</u-radio>
+						</u-radio-group>
+					</view>
+				</view>
+				<view class="row no-boder">
+					<view class="left">申请理由</view>
+				</view>
+				<view style='position:relative;' class="row no-boder">
+					<u-input class='textarea' v-model="detailData.reasonForApplication" :type="type" :border="border"
+						:height="height" :auto-height="autoHeight" />
+					<view style='position:absolute;right:10px;bottom:20px;color:#AFB3BF;'>
+						{{detailData.reasonForApplication.length}}/150个字</view>
+				</view>
+
+			</view>
+
+		</view>
+		<view class="bottom">
+			<u-button type="primary" class="submit" hover-class="none" @click="submit">提交</u-button>
+		</view>
+		<u-toast ref="uToast" />
+	</view>
+
+</template>
+<script>
+	import {
+		mapState
+	} from 'vuex';
+
+	export default {
+		components: {
+
+		},
+		data() {
+			return {
+				isShowAlert: false,
+				content: '当前登入信息验证失败，是否重新登录？',
+				detailData: {
+					supplementClockType: '',
+					reasonForApplication: '',
+				},
+				typevalue: '1',
+				type: 'textarea',
+				border: true,
+				height: 150,
+				autoHeight: true,
+			}
+		},
+
+		onLoad() {
+
+		},
+		// #ifndef MP
+		onNavigationBarButtonTap(e) {
+			const index = e.index;
+			if (index === 0) {
+				this.navTo('/pages/set/set');
+			} else if (index === 1) {
+				// #ifdef APP-PLUS
+				const pages = getCurrentPages();
+				const page = pages[pages.length - 1];
+				const currentWebview = page.$getAppWebview();
+				currentWebview.hideTitleNViewButtonRedDot({
+					index
+				});
+				// #endif
+				uni.navigateTo({
+					url: '/pages/notice/notice'
+				})
+			}
+		},
+		// #endif
+		computed: {
+			...mapState(['hasLogin', 'userInfo']),
+		},
+		onShow() {
+			this.$api.doRequest('get', '/commonUser/api/checkSession').then(res => {
+				console.log("checkSession", res)
+				if (res.data.data == "INVALID") {
+					this.isShowAlert = true;
+					// uni.showModal({
+					// 	title: '提示',
+					// 	content: '当前登入信息验证失败，是否重新登录？',
+					// 	showCancel: true,
+					// 	confirmText: '登录',
+					// 	success: (e) => {
+					// 		if (e.confirm) {
+					// 			uni.navigateTo({
+					// 				url: '/pages/public/login'
+					// 			})
+					// 		}
+					// 	},
+					// 	fail: () => {},
+					// 	complete: () => {}
+					// })
+				}
+			})
+			console.log("hasLogin", this.hasLogin)
+		},
+		methods: {
+			/**
+			 * 统一跳转接口,拦截未登录路由
+			 * navigator标签现在默认没有转场动画，所以用view
+			 */
+			navTo(url) {
+				if (!this.hasLogin) {
+					url = '/pages/public/login';
+				}
+				uni.navigateTo({
+					url
+				})
+			},
+			cancelClick() {
+				this.isShowAlert = false
+			},
+			alertBtn() {
+				uni.navigateTo({
+					url: '/pages/public/login'
+				})
+			},
+			submit() {
+				if (!this.typevalue) {
+					this.$refs.uToast.show({
+						title: '补卡原因不能为空！',
+						type: 'error',
+					})
+				}
+				if (!this.detailData.reasonForApplication) {
+					this.$refs.uToast.show({
+						title: '申请理由不能为空！',
+						type: 'error',
+					})
+				}
+				var that = this
+				uni.showModal({
+					content: "确定提交补卡信息？",
+					showCancel: true,
+					confirmText: '提交',
+					success: function(res) {
+						if (res.confirm) {
+							that.detailData.compId = uni.getStorageSync('pcUserInfo').compId
+							that.detailData.commonId = uni.getStorageSync('pcUserInfo').userId
+							that.detailData.supplementClockType = that.typevalue
+							that.$api.doRequest('post','/clockInfo/api/suppClock',that.detailData)
+								.then(res => {
+									if (res.data.code == 200) {
+										that.$api.msg('提交成功')
+									} else {
+										that.$api.msg('提交失败')
+									}
+								})
+						}
+					}
+				})
+
+			}
+		}
+	}
+</script>
+<style lang='scss' scoped>
+	page {
+		background: #F5F6FA;
+		overflow: hidden;
+	}
+
+	.wrap {
+		background: #fff;
+		margin: 10px;
+		border-radius: 10px;
+		padding: 20rpx;
+	}
+
+	.content {
+		border-radius: 20rpx;
+		background: white;
+		padding: 20rpx;
+
+		.row {
+			width: 100%;
+			padding: 21rpx 0;
+
+			input {
+				background: #F9F9FA;
+				font-size: 28rpx;
+				color: #333333;
+				border: 1px solid #EEEEEE;
+				width: 100%;
+				padding: 21px;
+				border-radius: 3px;
+			}
+		}
+	.c-row {
+		display: -webkit-box;
+		display: -webkit-flex;
+		display: flex;
+		-webkit-box-align: center;
+		-webkit-align-items: center;
+		align-items: center;
+		padding: 10rpx -1rpx;
+		position: relative;
+	}
+	>.title {
+		padding: 10px 16px;
+	}
+		.row-bottom {
+			.right-bottom {
+				width: 100%;
+				margin-top: 10px;
+			}
+		}
+
+		.no-boder {
+			border: 0;
+		}
+	}
+
+	.con-list {
+		-webkit-box-flex: 1;
+		-webkit-flex: 1;
+		flex: 1;
+		display: -webkit-box;
+		display: -webkit-flex;
+		display: flex;
+		-webkit-box-orient: vertical;
+		-webkit-box-direction: normal;
+		-webkit-flex-direction: column;
+		flex-direction: column;
+		color: #303133;
+		line-height: 40rpx;
+		text-align: right;
+		margin-left: 130px;
+	}
+
+	.submit {
+		margin: 20px;
+		margin-top: 160rpx;
+		background: #22C572;
+		border-radius: 60rpx;
+	}
+
+	.textarea {
+		background: #F9F9FA;
+		border: 1px solid #EEEEEE;
+	}
+</style>

pages/clock/the_clock.vue

@@ -1,22 +1,15 @@
 <template>
-	<view >
+	<view>
 		<view class='wrap'>
 			<view class="c-row">
 				<view class="title">打卡原因</view>
 				<view class="con-list">
-					<u-radio-group @change="groupChange" v-model="typevalue">
-						<u-radio key="3" label="其他" name="3">其他</u-radio>
-						<u-radio key="1" label="上班/下班" name="1">上班/下班</u-radio>
+					<u-radio-group v-model="typevalue">
+						<u-radio key="3" label="下班" name="3">下班</u-radio>
+						<u-radio key="1" label="上班" name="1">上班</u-radio>
 					</u-radio-group>
 				</view>
 			</view>
-			<view class="c-row"  v-if='show1'>
-				<view class="title">其他原因</view>
-				<view class="con-list">
-					<input type="digit" @input='calculate' name="otherReasons" v-model='detailData.otherReasons'
-						placeholder="请输入其他原因"></input>
-				</view>
-			</view>
 			<view class="c-row">
 				<view class="title">目标位置</view>
 				<view class="con-list">
@@ -34,6 +27,7 @@
 			</view>
 		</view>
 		<view class="footer">
+			<view @click='clockRecord' class="button">记录</view>
 			<view @click='submit' class="button">提交</view>
 		</view>
 	</view>
@@ -45,17 +39,17 @@
 			return {
 				typevalue: '1',
 				show: false,
-				show1: false,
 				detailData: {
+					compId: '',
 					clockType: '',
 					otherReasons: '',
 					targetLocation: '请选择目标位置',
 					clockDistance: '重新获取',
 				},
-				clockDistance:"",
-				warehouseType:'1',
-				warehouseBaseInfoList:[],
-				
+				clockDistance: "",
+				warehouseType: '1',
+				warehouseBaseInfoList: [],
+
 			}
 		},
 		onLoad() {
@@ -68,16 +62,6 @@
 				query.selectAll('.left')
 				console.log(query)
 			},
-			groupChange(e) {
-				console.log(e)
-				this.detailData.clockType = e
-				if (e == 1 || e == null) {
-					this.show1 = false
-				}
-				else{
-					this.show1 = true
-				}
-			},
 			getWarehouse() {
 				this.$api.doRequest('get', '/warehouseBaseInfo/selectWarehouse', {
 					compId: uni.getStorageSync("pcUserInfo").compId,
@@ -94,51 +78,69 @@
 								console.log('当前位置的纬度：' + res.latitude);
 								this.lat2 = res.latitude
 								this.lng2 = res.longitude
-								if(this.warehouseBaseInfoList.length > 0){
-									this.clockDistance = this.utils.getDistance(this.warehouseBaseInfoList[0].warehousePositioning.split(',')[1],
-										this.warehouseBaseInfoList[0].warehousePositioning.split(',')[0], this.lat2, this.lng2)
+								if (this.warehouseBaseInfoList.length > 0) {
+									this.clockDistance = this.utils.getDistance(this
+										.warehouseBaseInfoList[0].warehousePositioning.split(',')[
+											1],
+										this.warehouseBaseInfoList[0].warehousePositioning.split(
+											',')[0], this.lat2, this.lng2)
 								}
 							},
-							fail:function(req){
+							fail: function(req) {
 								console.log(req)
 							}
 						});
-						
+
 					}
 				})
 			},
 			targetLPicker(e) {
 				this.detailData.targetLocation = this.warehouseBaseInfoList[e[0]].warehouseName
-				this.clockDistance = this.utils.getDistance(this.warehouseBaseInfoList[e[0]].warehousePositioning.split(',')[1],
+				this.clockDistance = this.utils.getDistance(this.warehouseBaseInfoList[e[0]].warehousePositioning.split(
+						',')[1],
 					this.warehouseBaseInfoList[e[0]].warehousePositioning.split(',')[0], this.lat2, this.lng2)
 			},
 			submit() {
-				// if (!this.detailData.clockType) {
-				// 	this.$api.msg('打卡原因不能为空')
-				// 	return
-				// }
-				// if (this.typevalue == 3) {
-				// 	if (!this.detailData.otherReasons) {
-				// 		this.$api.msg('其他原因不能为空')
-				// 		return
-				// 	}
-				// }
-				// if (!this.detailData.targetLocation) {
-				// 	this.$api.msg('目标位置不能为空')
-				// 	return
-				// }
+				if (!this.typevalue) {
+					this.$api.msg('打卡原因不能为空')
+					return
+				}
+				if (!this.detailData.targetLocation) {
+					this.$api.msg('请选择目标位置')
+					return
+				}
+				var that = this
 				uni.showModal({
 					content: "确定提交打卡信息？",
 					showCancel: true,
 					confirmText: '提交',
 					success: function(res) {
 						if (res.confirm) {
-							
+							that.detailData.compId = uni.getStorageSync('pcUserInfo').compId
+							that.detailData.commonId = uni.getStorageSync('pcUserInfo').userId
+							that.detailData.dept = uni.getStorageSync('pcUserInfo').deptName
+							that.detailData.phone = uni.getStorageSync('pcUserInfo').userMobilePhone
+							that.detailData.empName = uni.getStorageSync('userInfo').userName
+							that.detailData.clockType = that.typevalue
+							that.detailData.clockDistance = "100"
+							that.$api.doRequest('post','/clockInfo/api/addClock',that.detailData)
+								.then(res => {
+									if (res.data.code == 200) {
+										that.$api.msg('提交成功')
+									} else {
+										that.$api.msg('提交失败')
+									}
+								})
 						}
 					}
 				})
 			},
-		}
+			clockRecord(){
+				uni.navigateTo({
+					url:'/pages/clock/the_clock_record'
+				})
+			},
+		},
 	}
 </script>
 

pages/clock/the_clock_record.vue

@@ -0,0 +1,170 @@
+<template>
+	<view>
+		<view class="uni-container">
+			<view class="top">
+				<view class="center">月份</view>
+				<view @click='show=true'>{{createDate}}</view>
+				<u-picker v-model="show" mode="time" @confirm='dateChange($event)' :params="params"></u-picker>
+			</view>
+			<uni-table border stripe emptyText="暂无更多数据">
+				<!-- 表头行 -->
+				<uni-tr>
+					<uni-th align="center" width="50">日期</uni-th>
+					<uni-th align="center" width="50">上班时间</uni-th>
+					<uni-th align="center" width="50">下班时间</uni-th>
+				</uni-tr>
+				<!-- 表格数据行 -->
+				<uni-tr v-for="(item, index) in tableData" :key="index">
+					<uni-td  align="center" style="height: 30px;">{{ item.createDate.split(" ")[0]  }}</uni-td>
+					<uni-td  align="center" >
+						<view class="toClockDate" v-if="item.toClockDate">{{ item.toClockDate.split(" ")[1] }}</view>
+						<view class="toClockDate" v-else-if="!item.toClockDate">
+							<button @click='supp' class="uni-button" size="mini" type="primary" align="center" style="height: 30px;">补卡</button>
+						</view>
+						<view v-if='item.status=="审核中"' class='listitemStatus audit Regular'>审核中</view>
+						<view v-if='item.status=="补卡失败"' class='listitemStatus notPass Regular'>补卡失败</view>
+						<view v-if='item.status=="补卡成功"' class='listitemStatus pass Regular'>补卡成功</view>
+					</uni-td>
+					<uni-td  align="center" >
+						<view class="offClockDate" v-if="item.offClockDate">{{ item.offClockDate.split(" ")[1] }}</view>
+						<view class="offClockDate" v-else-if = "!item.offClockDate">
+							<button @click='supp' class="uni-button" size="mini" type="primary" align="center" style="height: 30px;">补卡</button>
+						</view>
+						<view v-if='item.status=="审核中"' class='listitemStatus audit Regular'>审核中</view>
+						<view v-if='item.status=="补卡失败"' class='listitemStatus notPass Regular'>补卡失败</view>
+						<view v-if='item.status=="补卡成功"' class='listitemStatus pass Regular'>补卡成功</view>
+					</uni-td>
+				</uni-tr>
+			</uni-table>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				tableData: [],
+				pageSize: 10,
+				currentPage: 1,
+				params: {
+					year: true,
+					month: true
+				},
+				isLoadMore:false
+			}
+		},
+		onPullDownRefresh() {
+		    this.getList()
+		     setTimeout(function () {
+		         uni.stopPullDownRefresh();  //关闭下拉刷新
+		     }, 1000);
+		 },
+		onShow() {
+			this.getList()
+		},
+		onLoad(options) {
+			let _day = new Date();
+			_day.setTime(_day.getTime());
+			this.createDate = _day.getFullYear() + "-" + (_day.getMonth() + 1);
+			
+		},
+		onReachBottom() { //上拉触底函数
+			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
+				this.currentPage += 1
+			}
+			this.getData()
+		},
+		methods: {
+			dateChange(e) {
+				console.log(e)
+				this.createDate = e.year + "-" + e.month
+			},
+			getData(){
+				this.isLoadMore=true
+					this.$api.doRequest('get','/clockInfo/selectClockInfo',{
+						pageSize: this.pageSize,
+						currentPage: this.currentPage,
+						pcFlag:0,
+						// phone:uni.getStorageSync('pcUserInfo').userMobilePhone,
+						compId : uni.getStorageSync('pcUserInfo').compId,
+						commonId : uni.getStorageSync('pcUserInfo').userId,
+							}).then(res => {
+					if(res.data.code==200){
+						this.isLoadMore=false
+						this.tableData=this.tableData.concat(res.data.data.records)
+					}
+				})
+			},
+			getList(){
+				this.isLoadMore=true
+					this.$api.doRequest('get','/clockInfo/selectClockInfo',{
+							pageSize: this.pageSize,
+							currentPage: this.currentPage,
+							pcFlag:0,
+							// phone:uni.getStorageSync('pcUserInfo').userMobilePhone,
+							compId : uni.getStorageSync('pcUserInfo').compId,
+							commonId : uni.getStorageSync('pcUserInfo').userId,
+							}).then(res => {
+					if(res.data.code==200){
+						this.isLoadMore=false
+						this.tableData=res.data.data.records
+						
+					}
+				})
+			},
+			supp(){
+				uni.navigateTo({
+					url:'/pages/clock/supp_clock'
+				})
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	uni-page-body {
+		overflow: hidden;
+	}
+	.uni-container {
+		margin: 10rpx;
+		padding: 10rpx 10rpx 300rpx 10rpx;
+
+		.top {
+			border-radius: 20rpx;
+			background: white;
+			padding: 20rpx;
+			display: flex;
+			margin-bottom: 20rpx;
+			align-items: center;
+			.center {
+				margin-right: 50rpx;
+			}
+		}
+	}
+	.listitemStatus.audit{
+		color:#FE6430;
+	}
+	.listitemStatus.notPass{
+		color:#FB1E1E;
+	}
+	.listitemStatus.pass{
+		color:#22C572;
+	}
+	.row {
+		display: flex;
+		justify-content: space-between;
+		border-bottom: 1px solid #EEEEEE;
+		padding: 21rpx 0;
+
+		.right,
+		input {
+			font-size: 28rpx;
+			color: #333333;
+		}
+	}
+	.uni-button{
+		margin-top: 6rpx;
+	}
+</style>