smartSchoolClockApp/pages/editRules/editRules.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 class="button2" @click="handleDelete">删除</view>
	</view>
</template>

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

		uni.$on('updateRuleGroup', data => {
			let temList = []
			this.groupIds = []
			data.forEach(ele => {
				temList.push(ele.name)
				this.groupIds.push(ele.id)
			})
			this.group = temList.join('，')
		})

		this.id = option.id
		this.getData()
	},
	onShow() {
		let rulePlace = uni.getStorageSync('chooseList')
		let flag_place = uni.getStorageSync('flag_place')

		if (rulePlace) {
			this.locations = rulePlace
			let temList = []
			rulePlace.forEach(ele => {
				temList.push(ele.name)
			})
			this.place = temList.join('，')
		}
		if (rulePlace.length == 0 && flag_place) {
			this.place = '未设置'
		}

		let ruleTime = uni.getStorageSync('ruleTime')
		let flag = uni.getStorageSync('flag')

		if (ruleTime.length == 0 && flag) {
			this.time = '未设置'
		}
		if (ruleTime.length > 0) {
			this.time = ruleTime
		}
	},
	methods: {
		// 获取规则详细信息
		async getData() {
			let res = await this.$myRequest_clockIn({
				url: `/attendance/api/settings/rule/detail/${this.id}`
			})
			// console.log(res);
			if (res.code == 200) {
				// 规则名称
				this.ruleName = res.data.name

				// 考勤组
				let temList = []
				this.groupIds = []
				res.data.groups.forEach(ele => {
					temList.push(ele.name)
					this.groupIds.push(ele.id)
				})
				this.group = temList.join('，')

				// 打卡时间
				this.time = res.data.timeGroups

				// 打卡地点
				let temList2 = []
				this.locations = res.data.locations
				res.data.locations.forEach(ele => {
					temList2.push(ele.name)
				})
				this.place = temList2.join('，')

				// 提前通知
				this.value = res.data.noticeTime

				// 法定节假日
				this.holiday = res.data.holiday
				// 人脸识别
				this.faceRecognition = res.data.faceRecognition
				// 场景照片
				this.takePicture = res.data.takePicture
			}
		},
		// 点击确认按钮回调
		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 == '未设置' || 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/update',
							method: 'put',
							header: {
								'content-type': 'application/json'
							},
							data: {
								// 编辑的规则id
								id: this.id,
								// 是否需要人脸识别
								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: '编辑成功'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						}
					}
				}
			})
		},
		// 点击删除按钮回调
		handleDelete() {
			uni.showModal({
				title: '提示',
				content: '确定删除吗？',
				success: async res => {
					if (res.confirm) {
						let res = await this.$myRequest_clockIn({
							url: '/attendance/api/settings/rule/delete',
							method: 'delete',
							data: {
								ids: [this.id]
							}
						})
						// console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: '删除成功'
							})
							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
			// console.log(this.holiday);
		},
		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() {
			let time = JSON.stringify(this.time)
			uni.navigateTo({
				url: `/pages/punchTime/punchTime?time=${time}`
			})
		},
		// 点击打卡地点跳转回调
		goPagePunchLocation() {
			let locations = JSON.stringify(this.locations)
			uni.navigateTo({
				url: `/pages/punchLocation/punchLocation?locations=${locations}`
			})
		},
		// 格式化时间
		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
		},
		// 格式化时间
		formatTime(val) {
			let tem = '2021-11-22 ' + val + ':00'
			// console.log(tem);
			let date = new Date(tem)
			let time = date.getTime()
			return time
		}
	}
}
</script>

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

	.box {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		height: 90rpx;
		font-size: 30rpx;
		border-bottom: 1rpx solid #cccccc;
		background-color: #fff;

		.name {
			flex: 1;
		}

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

			.ele {
				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 {
				margin-left: 20rpx;
				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;
	}

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