waterElectricityMinApp/pagesClockIn/ruleSet/ruleSet.vue

<template>
	<view class="container">
		<view class="placeholder"></view>
		<!-- 头部新增规则区域 -->
		<view class="add" @click="toPageAddRules">
			<view class="icon">
				<img src="../static/imgs/add.png">
			</view>
			<view class="title">
				新增规则
			</view>
		</view>

		<!-- 具体规则区域 -->
		<view class="rules">
			<!-- 每一个规则区域 -->
			<view class="box" v-for="item in list" :key="item.id" @click="toPageEditRules(item.id)">
				<view class="box_title">
					<view class="icon">
						<img src="../static/imgs/my1.png">
					</view>
					<view class="msg">
						{{item.name}}
					</view>
					<view class="right">
						<img src="../static/imgs/right.png">
					</view>
				</view>

				<view class="box_info">
					考勤组：{{item.groups}}
				</view>

				<view class="box_info">
					<span>时 间：{{(item.temList).join("，")}}</span>
					<span v-for="(time_item,index) in item.periods" :key="index">
						{{format_time(time_item.beginTime)}}-{{format_time(time_item.endTime)}}
					</span>
				</view>

				<view class="box_info">
					打卡地点：{{item.locations}}
				</view>

				<view class="box_info">
					提前通知：提前{{item.noticeTime}}分钟通知
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 规则列表数组
				list: []
			};
		},
		onShow() {
			// 清空缓存
			uni.removeStorageSync("flag_place")
			uni.removeStorageSync("flag")
			uni.removeStorageSync("chooseList")
			uni.removeStorageSync('ruleTime');
			// 获取最新打卡规则列表数据
			this.getRuleList()
		},
		methods: {
			// 获取打卡规则列表数据
			async getRuleList() {
				let res = await this.$myRequest_clockIn({
					url: "/attendance/api/settings/rule/list"
				})
				// console.log(res);
				if (res.code == 200) {
					this.list = res.data.list
					this.list.forEach((ele) => {
						ele.groups = ele.groups.join("，")
						ele.locations = ele.locations.join("，")
						ele.dayOfWeeks.sort((a, b) => {
							return a - b
						})
						let arr = ["", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"]
						ele.temList = ele.dayOfWeeks.map((item) => {
							return item = arr[item]
						})
					})
				}
			},
			// 点击每一项跳转编辑规则页面
			toPageEditRules(id) {
				// console.log(id);
				uni.navigateTo({
					url: `/pagesClockIn/editRules/editRules?id=${id}`
				})
			},
			// 新增规则跳转页面回调
			toPageAddRules() {
				uni.navigateTo({
					url: "/pagesClockIn/addRules/addRules"
				})
			},
			// 格式化时间
			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 {
		min-width: 100vw;
		min-height: 100vh;
		background-color: #F2F2F2;

		.placeholder {
			height: 30rpx;
		}

		.add {
			margin-bottom: 30rpx;
			display: flex;
			width: 750rpx;
			height: 110rpx;
			background-color: #fff;

			.icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 88rpx;

				img {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.title {
				line-height: 110rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #0082FC;
			}
		}

		.rules {
			width: 750rpx;

			.box {
				padding: 0 30rpx;
				margin-bottom: 20rpx;
				height: 348rpx;
				background-color: #fff;

				.box_title {
					display: flex;
					height: 90rpx;

					.icon {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;

						img {
							width: 35rpx;
							height: 35rpx;
						}
					}

					.msg {
						flex: 10;
						line-height: 90rpx;
						font-size: 30rpx;
						font-weight: 400;
					}

					.right {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;

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

				.box_info {
					display: flex;
					margin: 15rpx 0;
					height: 44rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #808080;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					span {
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>