smartSchoolClockApp/pages/addRules/addRules.vue

<template>
	<view class="container">
		<!-- 每一个选项区域 -->
		<view class="box">
			<view class="name">规则名称：</view>
			<view class="val" @click="goPageRuleName">
				<view class="ele" v-if="ruleName == '未设置'">{{ ruleName }}</view>
				<view class="ele black" v-else>{{ ruleName }}</view>
				<view class="right"><img src="../../static/imgs/right.png" /></view>
			</view>
		</view>

		<view class="box">
			<view class="name">考 勤 组：</view>
			<view class="val" @click="goPageGroup">
				<view class="ele" v-if="group == '未设置'">{{ group }}</view>
				<view class="ele black" v-else>{{ group }}</view>
				<view class="right"><img src="../../static/imgs/right.png" /></view>
			</view>
		</view>

		<view class="box">
			<view class="name">打卡时间：</view>
			<view class="val" @click="goPagePunchTime">
				<view class="ele" v-if="time == '未设置'">{{ time }}</view>
				<view class="ele black" v-else>
					<span v-for="(item, index) in time" :key="index + '1'">
						<span v-for="(item_week, index_week) in item.dayOfWeeks" :key="index_week + '2'">{{ arr[item_week] }}</span>
						<span v-for="(item_time, index_time) in item.periods" :key="index_time + '3'">
							{{ format_time(item_time.beginTime) }}-{{ format_time(item_time.endTime) }}
						</span>
					</span>
				</view>
				<view class="right"><img src="../../static/imgs/right.png" /></view>
			</view>
		</view>

		<view class="box">
			<view class="name">打卡地点：</view>
			<view class="val" @click="goPagePunchLocation">
				<view class="ele" v-if="place == '未设置'">{{ place }}</view>
				<view class="ele black" v-else>{{ place }}</view>
				<view class="right"><img src="../../static/imgs/right.png" /></view>
			</view>
		</view>

		<view class="box">
			<view class="name">提前通知：</view>
			<picker :value="index" :range="array" @change="changeSelect">
				<view class="val">
					<view class="ele" v-if="value == '未设置'">{{ value }}</view>
					<view class="ele black" v-else>{{ value }}分钟</view>
					<view class="right"><img src="../../static/imgs/right.png" /></view>
				</view>
			</picker>
		</view>

		<view class="box">
			<view class="name">除去法定节假：</view>
			<view class="val2"><switch style="transform:scale(0.8)" color="#3396FB" :checked="holiday" @change="switchChange" /></view>
		</view>

		<view class="box">
			<view class="name">是否需要拍摄场景照片：</view>
			<view class="val2"><switch style="transform:scale(0.8)" color="#3396FB" :checked="takePicture" @change="switchChange_takePicture" /></view>
		</view>

		<view class="box">
			<view class="name">是否需要人脸识别：</view>
			<view class="val2"><switch style="transform:scale(0.8)" color="#3396FB" :checked="faceRecognition" @change="switchChange_faceRecognition" /></view>
		</view>

		<view class="box">
			<view class="name">是否提前通知全部人员：</view>
			<view class="val2"><switch style="transform:scale(0.8)" color="#3396FB" :checked="notifyAll" @change="switchChange_notifyAll" /></view>
		</view>

		<!-- 确认按钮区域 -->
		<view class="button" @click="handleConfirm">确认</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 规则名称
			ruleName: '未设置',
			// 考勤组
			group: '未设置',
			// 打卡时间
			time: '未设置',
			// 打卡地点
			place: '未设置',
			// 提前通知时间
			value: '未设置',
			// 提前通知时间选择数组
			array: ['5分钟', '10分钟', '15分钟', '20分钟'],
			// 提前通知时间选择数组默认选择的索引
			index: 0,
			// 考勤组id数组
			groupIds: [],
			// 打卡地点数组
			locations: [],
			// 是否同步节假日
			holiday: false,
			// 是否需要拍摄场景照片
			takePicture: false,
			// 是否需要人脸识别
			faceRecognition: false,
			// 是否提前通知全部人员
			notifyAll: false,
			// 星期映射数组
			arr: ['', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
		}
	},
	onLoad() {
		// 监听updateRuleName事件修改规则名称
		uni.$on('updateRuleName', data => {
			this.ruleName = data
		})

		// 监听updateRuleGroup事件修改考勤组
		uni.$on('updateRuleGroup', data => {
			let temList = []
			this.groupIds = []
			data.forEach(ele => {
				temList.push(ele.name)
				this.groupIds.push(ele.id)
			})
			this.group = temList.join('，')
		})
	},
	onShow() {
		// 从缓存获取打卡时间数据
		let ruleTime = uni.getStorageSync('ruleTime')
		// 从缓存获取打卡时间数据是否为空的标识 true为空数组 false不为空
		let flag = uni.getStorageSync('flag')

		// 如果打卡时间数组不为空,将数组赋值给time
		if (ruleTime) {
			this.time = ruleTime
		}
		// 如果打卡时间数组为空,修改time的值
		if (ruleTime.length == 0 && flag) {
			this.time = '未设置'
		}

		// 从缓存获取打卡地点数据
		let temPlace = uni.getStorageSync('chooseList')
		// 从缓存获取打卡地点数据是否为空的标识 true为空数组 false不为空
		let flag_place = uni.getStorageSync('flag_place')
		// 如果打卡地点数组不为空,将数组赋值给locations
		if (temPlace) {
			this.locations = temPlace
			let temList = []
			temPlace.forEach(ele => {
				temList.push(ele.name)
			})
			this.place = temList.join('，')
		}
		// 如果打卡地点数组为空,修改place的值
		if (temPlace.length == 0 && flag_place) {
			this.place = '未设置'
		}
	},
	methods: {
		// 点击确认按钮回调
		handleConfirm() {
			if (this.ruleName == '未设置') {
				uni.showToast({
					title: '请设置规则名称',
					icon: 'none'
				})
				return
			}

			if (this.group == '未设置') {
				uni.showToast({
					title: '请设置考勤组',
					icon: 'none'
				})
				return
			}

			if (this.time == '未设置') {
				uni.showToast({
					title: '请设置打卡时间',
					icon: 'none'
				})
				return
			}

			if (this.place == '未设置') {
				uni.showToast({
					title: '请设置打卡地点',
					icon: 'none'
				})
				return
			}

			if (this.value == '未设置') {
				uni.showToast({
					title: '请设置提前通知时间',
					icon: 'none'
				})
				return
			}

			uni.showModal({
				title: '提示',
				content: '确定新增吗？',
				success: async res => {
					if (res.confirm) {
						let res = await this.$myRequest_clockIn({
							url: '/attendance/api/settings/rule/add',
							method: 'post',
							header: {
								'content-type': 'application/json'
							},
							data: {
								// 是否需要人脸识别
								faceRecognition: this.faceRecognition,
								// 考勤组ID列表
								groupIds: this.groupIds,
								// 是否同步节假日
								holiday: this.holiday,
								// 是否可选择本地图片
								localPicture: false,
								// 规则名称
								name: this.ruleName,
								// 提前通知时间
								noticeTime: this.value,
								// 是否需要场景拍照
								takePicture: this.takePicture,
								// 打卡地点列表
								locations: this.locations,
								// 打卡时间列表
								timeGroups: this.time,
								// 是否提前通知全部人员
								notifyAll: this.notifyAll
							}
						})
						// console.log(res)
						if (res.code == 200) {
							uni.showToast({
								title: '添加成功',
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						}
					}
				}
			})
		},
		// 提前通知选择框点击回调
		changeSelect(e) {
			let index = e.detail.value
			this.value = this.array[index]
			let index2 = this.value.indexOf('分', 0)
			this.value = this.value.substring(0, index2)
		},
		// switch的值改变回调
		switchChange(e) {
			this.holiday = e.detail.value
		},
		switchChange_takePicture(e) {
			this.takePicture = e.detail.value
		},
		switchChange_faceRecognition(e) {
			this.faceRecognition = e.detail.value
		},
		switchChange_notifyAll(e) {
			this.notifyAll = e.detail.value
		},
		// 点击规则名称跳转回调
		goPageRuleName() {
			uni.navigateTo({
				url: `/pages/ruleName/ruleName`
			})
		},
		// 点击考勤组跳转回调
		goPageGroup() {
			uni.navigateTo({
				url: `/pages/group/group?flag=2`
			})
		},
		// 点击打卡时间跳转回调
		goPagePunchTime() {
			uni.navigateTo({
				url: '/pages/punchTime/punchTime'
			})
		},
		// 点击打卡地点跳转回调
		goPagePunchLocation() {
			uni.navigateTo({
				url: '/pages/punchLocation/punchLocation'
			})
		},
		// 格式化时间
		formatTime(val) {
			let tem = '2021-11-22 ' + val + ':00'
			// console.log(tem);
			let date = new Date(tem)
			let time = date.getTime()
			return time
		},
		// 格式化时间
		format_time(timestamp) {
			//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var date = new Date(timestamp)
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
			var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
			let strDate = h + m
			return strDate
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	background-color: #fff;

	.box {
		display: flex;
		align-items: center;
		margin: 0 30rpx;
		width: 690rpx;
		height: 90rpx;
		font-size: 30rpx;
		border-bottom: 1rpx solid #cccccc;

		.name {
			flex: 1;
		}

		.val {
			flex: 3;
			display: flex;
			align-items: center;

			.ele {
				margin-right: 20rpx;
				display: inline-block;
				width: 460rpx;
				text-align: end;
				color: #a6a6a6;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				span {
					margin-right: 10rpx;
				}
			}

			.black {
				color: #000;
			}

			.right {
				width: 40rpx;
				display: inline-flex;
				justify-content: center;
				align-items: center;

				img {
					width: 16rpx;
					height: 25rpx;
				}
			}
		}

		.val2 {
			flex: 1;
			margin-right: 20rpx;
			text-align: end;
		}
	}

	.button {
		margin: auto;
		margin-top: 52rpx;
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
		border-radius: 16rpx;
		background-color: #3396fb;
	}
}
</style>