smartSchoolClockApp/pages/group/group.vue

<template>
	<view class="container">
		<!-- 头部搜索栏区域 -->
		<view class="search">
			<uni-search-bar bgColor="#fff" placeholder="请输入搜索内容" cancelButton="none" v-model="searchValue"
				@clear="clear" @blur="getGroupData">
			</uni-search-bar>
		</view>

		<!-- 新增考勤组区域 -->
		<view class="add">
			<view v-if="flag==1" class="icon" @click="handleAdd">
				<img src="../../static/add.png">
			</view>
			<view v-if="flag==1" class="title" @click="handleAdd">
				新增考勤组
			</view>
			<view v-if="flag==2" class="icon" @click="handleRelevancy">
				<img src="../../static/add.png">
			</view>
			<view v-if="flag==2" class="title" @click="handleRelevancy">
				关联考勤组
			</view>
		</view>

		<!--考勤组列表区域 -->
		<view class="group">
			<uni-swipe-action>
				<!-- 每一个考勤组区域 -->
				<uni-swipe-action-item :auto-close="true" :right-options="options" @click="onClick(item.id)"
					v-for="item in list" :key="item.id">

					<view class="group_item">
						<uni-collapse :ref="item.id+'collapse'">
							<uni-collapse-item open>
								<!-- 自定义标题区域 -->
								<template v-slot:title>
									<view class="collapse_title">
										<checkbox class="collapse_check" :disabled="checkStatus" color="#0082FC"
											:checked="item.checked" @click.stop="handleChange(item)" />
										<view class="collapse_info">
											{{item.name}}
										</view>
									</view>
								</template>
								<!-- 折叠内容区域 -->
								<view class="content">
									<view class="num">
										随机人数：{{item.peopleCount}}人
									</view>
									<!-- 树状结构区域 -->
									<view class="tree">
										<dropDown :node="item.textArr" @nodechange="nodechange(item.id+'collapse')">
										</dropDown>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>
					</view>

				</uni-swipe-action-item>

			</uni-swipe-action>
		</view>

		<!-- 新增考勤组弹窗区域 -->
		<uni-popup ref="popup" :is-mask-click="false">
			<view class="popup_box">
				<view class="header">
					新增考勤组
				</view>
				<view class="body">
					<view class="name">
						<input type="text" placeholder="请输入考勤组名称" v-model="group_name">
					</view>

					<view class="scope" @click="handleChoose">
						<view class="notes" v-if="!group_scope">
							请选择考勤组范围
						</view>
						<view class="notes2" v-else>
							{{group_scope}}
						</view>
						<view class="icon">
							<img src="./imgs/bottom.png">
						</view>
					</view>

					<view class="num">
						<view class="count">
							<view class="icon">
								<img src="./imgs/people.png">
							</view>
							<view class="info">
								{{group_total}}人
							</view>
						</view>
						<view class="input">
							<input type="number" placeholder="请输入打卡人数" v-model="group_num">
						</view>
					</view>
				</view>
				<view class="foot">
					<view class="left" @click="handleCancel">
						取消
					</view>
					<view class="right" @click="handleSave">
						保存
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 选择考勤组范围区域 -->
		<tki-tree ref="tkitree" multiple :range="range" rangeKey="name" confirmColor="#3396FB" @confirm="treeConfirm"
			@cancel="treeCancel" />

	</view>
</template>

<script>
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	export default {
		components: {
			tkiTree
		},
		data() {
			return {
				// 新增考勤组名称
				group_name: "",
				// 新增考勤组范围
				group_scope: "",
				// 新增考勤组需要打卡人数
				group_num: null,
				// 新增考勤组总人数
				group_total: 0,
				// 新增考勤组ID数组
				userOrgList: [],
				flag: null,
				// 考勤组勾选框禁用标识
				checkStatus: false,
				// 搜索框绑定的值
				searchValue: "",
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#D43030'
					}
				}],
				// 考勤组列表数据
				list: [],
				range: [],
				type: ""
			};
		},
		onLoad(options) {
			this.flag = options.flag
			this.type = options.type
			if (this.flag == 1) {
				this.checkStatus = true
			}
			this.getGroupData()
		},
		methods: {
			// 获取考勤组列表数据
			async getGroupData() {
				let res = await this.$myRequest({
					url: "/attendance/api/settings/group/list",
					data: {
						name: this.searchValue,
						size: 999
					}
				})
				// console.log(res);
				if (res.code == 200) {
					res.data.list.forEach((ele) => {
						ele.checked = false
						ele.textArr = []
						ele.names.forEach((element) => {
							ele.textArr.push({
								name: element
							})
						})
					})
					this.list = res.data.list
				}
			},
			// 考勤组选择框确定回调事件
			treeConfirm(e) {
				// console.log(e)
				let count = 0
				let temList = []
				let userOrgList = []
				e.forEach((ele) => {
					temList.push(ele.name)
					userOrgList.push({
						orgId: ele.id,
						type: 2
					})
					count += ele.number
				})
				this.group_scope = temList.join(",")
				this.group_total = count
				this.userOrgList = userOrgList
			},
			// 考勤组选择框取消回调事件
			treeCancel(e) {
				// this.$refs.tkitree._hide()
			},
			// 点击选择考勤组选择框回调
			async handleChoose() {
				this.range = []
				let res = await this.$myRequest({
					url: "/attendance/api/settings/org/tree"
				})
				// console.log(res);
				if (res.code == 200) {
					this.range = res.data
					this.$refs.tkitree._show()
				}
			},
			handleChange(item) {
				// console.log(item);
				item.checked = !item.checked
			},
			// 点击弹窗保存按钮回调
			async handleSave() {
				if (!this.group_name) {
					uni.showToast({
						title: "请输入考勤组名称",
						icon: "none"
					})
					return
				}
				if (!this.group_scope) {
					uni.showToast({
						title: "请选择考勤组范围",
						icon: "none"
					})
					return
				}
				if (this.group_total == 0) {
					uni.showToast({
						title: "该考勤组范围中人数为0，请重新选择",
						icon: "none"
					})
					return
				}
				if (!this.group_num) {
					uni.showToast({
						title: "请输入打卡人数",
						icon: "none"
					})
					return
				}
				if (this.group_num - 0 > this.group_total - 0) {
					uni.showToast({
						title: "打卡人数不能超过总人数",
						icon: "none"
					})
					return
				}
				let res = await this.$myRequest({
					url: "/attendance/api/settings/group/add",
					method: "post",
					header: {
						'content-type': 'application/json',
						'Authorization': uni.getStorageSync("token") ||
							'eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjo1MDQ2LCJ1c2VyX3V1aWQiOjEzNDc3NzE0NzM1NTY5NzE1MiwibmJmIjoxNjcxMTU1ODQzfQ.u4-N762Ijfb9RkuuFOFkeMiJQI9uCi0IaheJlGwi5Ms'
					},
					data: {
						name: this.group_name,
						peopleCount: this.group_num,
						peopleTotal: this.group_total,
						userOrgList: this.userOrgList
					}
				})
				// console.log(res);
				if (res.code == 200) {
					this.$refs.popup.close()
					uni.showToast({
						title: "添加成功",
						icon: "none"
					})
					setTimeout(() => {
						this.getGroupData()
					}, 1500)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
				}
			},
			// 点击弹窗取消按钮回调
			handleCancel() {
				this.$refs.popup.close()
			},
			// 点击新增考勤组按钮回调
			handleAdd() {
				this.group_name = ""
				this.group_num = null
				this.group_total = 0
				this.group_scope = ""
				this.userOrgList = []
				this.$nextTick(() => {
					this.$refs.popup.open()
				})
			},
			// 点击关联考勤组按钮回调
			handleRelevancy() {
				let temList = []
				this.list.forEach((ele) => {
					if (ele.checked == true) {
						temList.push({
							name: ele.name,
							id: ele.id
						})
					}
				})
				if (temList.length == 0) {
					uni.showToast({
						title: "请先勾选考勤组",
						icon: "none"
					})
				} else {
					if (this.type == "edit") {
						uni.$emit('updateGroup', temList)
					} else {
						uni.setStorageSync("ruleGroup", temList)
					}
					uni.navigateBack({
						delta: 1
					})
				}
			},
			// 点击树状节点回调
			nodechange(ref) {
				this.$nextTick(() => {
					setTimeout(() => {
						this.$refs[ref][0].resize()
					}, 200)
				})
			},
			// 点击右侧删除按钮回调
			onClick(id) {
				// console.log(id);
				uni.showModal({
					title: '提示',
					content: '确定删除该考勤组吗？',
					success: async (res) => {
						if (res.confirm) {
							let res = await this.$myRequest({
								url: "/attendance/api/settings/group/delete",
								method: "delete",
								data: {
									ids: [id]
								}
							})
							// console.log(res);
							if (res.code == 200) {
								uni.showToast({
									title: "删除成功",
									icon: 'success'
								})
								setTimeout(() => {
									this.getGroupData()
								}, 1500)
							} else {
								uni.showToast({
									title: res.message,
									icon: 'success'
								})
							}
						} else if (res.cancel) {}
					}
				});
			},
			// 清除搜索框内容时的回调
			clear() {
				this.searchValue = ""
				this.getGroupData()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 20rpx;

		.search {
			box-sizing: border-box;
			padding: 0 30rpx;
			width: 750rpx;
			height: 90rpx;
			border-radius: 170rpx;
			background-color: #fff;
		}

		.add {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			width: 750rpx;
			height: 110rpx;
			background-color: #fff;

			.icon {
				margin: 0 20rpx 0 30rpx;
				width: 36rpx;
				height: 36rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.title {
				font-size: 30rpx;
				color: #0082FC;
			}
		}

		.group {
			margin-top: 20rpx;
			background-color: #F2F2F2;

			.group_item {
				margin-bottom: 20rpx;
				width: 750rpx;
				background-color: #fff;

				.collapse_title {
					display: flex;
					align-items: center;
					height: 79rpx;

					.collapse_check {
						margin-left: 30rpx;
					}

					.collapse_info {
						margin-left: 10rpx;
						font-size: 28rpx;
						font-weight: 600;
					}
				}

				.content {
					padding-bottom: 50rpx;

					.num {
						margin-left: 30rpx;
						height: 50rpx;
						font-size: 24rpx;
						color: #808080;
					}

					.tree {}
				}
			}
		}

		.popup_box {
			width: 630rpx;
			height: 610rpx;
			border-radius: 33rpx;
			background-color: #fff;

			.header {
				width: 630rpx;
				height: 97rpx;
				line-height: 97rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				border-bottom: 1rpx solid #E6E6E6;
			}

			.body {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 630rpx;
				height: 414rpx;
				border-bottom: 1rpx solid #E6E6E6;

				.name {
					margin-top: 42rpx;
					width: 570rpx;
					height: 80rpx;
					border-radius: 10rpx;
					border: 1rpx solid #ccc;

					input {
						padding: 0 24rpx;
						width: 90%;
						height: 100%;
						font-size: 28rpx;
					}
				}

				.scope {
					display: flex;
					align-items: center;
					margin-top: 32rpx;
					width: 570rpx;
					height: 80rpx;
					border-radius: 10rpx;
					border: 1rpx solid #ccc;

					.notes {
						padding-left: 24rpx;
						flex: 5;
						font-size: 28rpx;
						color: #808080;
					}

					.notes2 {
						padding-left: 24rpx;
						flex: 5;
						font-size: 28rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

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

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

				.num {
					display: flex;
					align-items: center;
					margin-top: 32rpx;
					width: 570rpx;
					height: 80rpx;
					border-radius: 10rpx;
					border: 1rpx solid #ccc;

					.count {
						flex: 2;
						display: flex;
						align-items: center;
						height: 50rpx;
						border-right: 1rpx solid #A6A6A6;

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

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

						.info {
							flex: 2;
							font-size: 28rpx;
						}
					}

					.input {
						flex: 4;

						input {
							padding: 0 45rpx;
							width: 80%;
							font-size: 28rpx;
						}
					}
				}
			}

			.foot {
				display: flex;
				justify-content: space-evenly;
				width: 630rpx;
				height: 99rpx;
				line-height: 99rpx;
				font-size: 28rpx;

				.left {
					flex: 1;
					text-align: center;
					border-right: 1rpx solid #CCC;
				}

				.right {
					flex: 1;
					text-align: center;
					color: #2A82E4;
				}
			}
		}
	}

	// 解决输入框不居中问题
	::v-deep .uni-searchbar {
		padding: 10rpx;
	}

	// 解决左滑区域突出问题
	::v-deep .uni-swipe_button-group {
		margin-bottom: 20rpx;
	}

	// 清除树状组件下边框
	::v-deep .uni-collapse-item__wrap-content.uni-collapse-item--border {
		border-bottom: none;
	}
</style>