smartSchoolClockApp/pages/group/group.vue

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

		<!-- 新增考勤组区域 -->
		<view class="add">
			<view 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="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.title}}
										</view>
									</view>
								</template>
								<!-- 折叠内容区域 -->
								<view class="content">
									<view class="num">
										随机人数：{{item.num}}人
									</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">
								680人
							</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: "",
				flag: null,
				checkStatus: false,
				searchValue: "",
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#D43030'
					}
				}],
				list: [{
						id: 1,
						title: "全体学生",
						num: 56,
						checked: false,
						textArr: [{
							"name": "墨轩湖校区",
							"id": "1",
							"open": false,
							"children": [{
									"name": "学生",
									"id": "1-1",
									"open": false,
									"children": [{
											"name": "计算机专业",
											"id": "1-1-1",
											"open": false,
											"children": [{
													"name": "陈志斌",
													"id": "1-1-1-1",
													"open": false,
													"children": [],
												},
												{
													"name": "华志杰",
													"id": "1-1-1-2",
													"open": false,
													"children": [],
												},
												{
													"name": "刘子麟",
													"id": "1-1-1-3",
													"open": false,
													"children": [],
												},
											],
										},
										{
											"name": "文法分院",
											"id": "1-1-2",
											"open": false,
											"children": [],
										},
									]
								},
								{
									"name": "老师",
									"id": "1-2",
									"open": false,
									"children": [{
										"name": "辅导员",
										"id": "1-2-1",
										"open": false,
										"children": [],
									}]
								}
							]
						}, ],
					},

					{
						id: 2,
						title: "后勤人员",
						num: 36,
						checked: false,
						textArr: [{
							"name": "黄家湖校区",
							"id": "1",
							"open": false,
							"children": [{
									"name": "商户",
									"id": "1-1",
									"open": false,
									"children": [{
											"name": "食堂",
											"id": "1-1-1",
											"open": false,
											"children": [{
													"name": "饭",
													"id": "1-1-1-1",
													"open": false,
													"children": [],
												},
												{
													"name": "水",
													"id": "1-1-1-2",
													"open": false,
													"children": [],
												},
												{
													"name": "零食",
													"id": "1-1-1-3",
													"open": false,
													"children": [],
												},
											],
										},
										{
											"name": "商业街",
											"id": "1-1-2",
											"open": false,
											"children": [],
										},
									]
								},
								{
									"name": "清洁工",
									"id": "1-2",
									"open": false,
									"children": [{
										"name": "园丁",
										"id": "1-2-1",
										"open": false,
										"children": [],
									}]
								}
							]
						}, ],
					},
				],
				range: [{
						id: 1,
						name: '北京市',
						children: [{
							id: 11,
							name: '市辖区',
							children: [{
									id: 111,
									name: '西城区',
									children: [{
										id: 1111,
										name: '南河沿大街',
										children: [{
											id: 11111,
											name: '紫金宫饭店',
											// checked: true
										}, ]
									}, ]
								},
								{
									id: 112,
									name: '东城区',
								},
								{
									id: 113,
									name: '朝阳区',
								},
								{
									id: 114,
									name: '丰台区',
								}
							]
						}, ]
					},
					{
						id: 2,
						name: '河北省',
						children: [{
								id: 21,
								name: '石家庄市',
							},
							{
								id: 22,
								name: '唐山市',
							},
							{
								id: 23,
								name: '秦皇岛市',
							},
						]
					},
					{
						id: 3,
						name: '山东省',
						children: [{
								id: 31,
								name: '济南市',
								children: [{
										id: 311,
										name: '历下区',
										children: [{
											id: 3131,
											name: '解放路街道办事处',
										}, ]
									},
									{
										id: 312,
										name: '槐荫区',
									},
									{
										id: 313,
										name: '天桥区',
									},
									{
										id: 314,
										name: '历城区',
									},
									{
										id: 315,
										name: '长清区',
									}
								]
							},
							{
								id: 32,
								name: '青岛市',
							},
							{
								id: 33,
								name: '临沂市',
								children: [{
										id: 331,
										name: '兰山区',
										children: [{
											id: 3331,
											name: '金雀山街道',
										}, ]
									},
									{
										id: 332,
										name: '河东区',
									},
									{
										id: 333,
										name: '罗庄区',
										children: [{
											id: 3331,
											name: '盛庄街道',
										}, ]
									}
								]
							},
							{
								id: 34,
								name: '日照市',
							},
							{
								id: 35,
								name: '淄博市',
							},
							{
								id: 36,
								name: '枣庄市',
							},
							{
								id: 37,
								name: '东营市',
							},
							{
								id: 38,
								name: '潍坊市',
							},
							{
								id: 39,
								name: '烟台市',
							},
							{
								id: 40,
								name: '济宁市',
							},
							{
								id: 41,
								name: '泰安市',
							},
							{
								id: 42,
								name: '威海市',
							},
							{
								id: 43,
								name: '滨州市',
							},
							{
								id: 44,
								name: '菏泽市',
							},
						]
					}
				]
			};
		},
		onLoad(options) {
			this.flag = options.flag
			if (this.flag == 1) {
				this.checkStatus = true
			}
		},
		methods: {
			// 考勤组选择框确定回调事件
			treeConfirm(e) {
				// console.log(e)
				let temList = []
				e.forEach((ele) => {
					temList.push(ele.name)
				})
				this.group_scope = temList.join(",")
			},
			// 考勤组选择框取消回调事件
			treeCancel(e) {
				console.log(e)
				console.log("取消");
			},
			// 点击选择考勤组选择框回调
			handleChoose() {
				this.$refs.tkitree._show()
			},
			handleChange(item) {
				console.log(item);
				item.checked = !item.checked
			},
			// 点击弹窗保存按钮回调
			handleSave() {
				if (!this.group_name) {
					uni.showToast({
						title: "请输入考勤组名称",
						icon: "none"
					})
					return
				}
				if (!this.group_scope) {
					uni.showToast({
						title: "请选择考勤组范围",
						icon: "none"
					})
					return
				}
				if (!this.group_num) {
					uni.showToast({
						title: "请输入打卡人数",
						icon: "none"
					})
					return
				}
				this.$refs.popup.close()
			},
			// 点击弹窗取消按钮回调
			handleCancel() {
				this.$refs.popup.close()
			},
			// 点击新增考勤组按钮回调
			handleAdd() {
				this.$refs.popup.open()
			},
			// 点击关联考勤组按钮回调
			handleRelevancy() {
				console.log(456);
			},
			// 点击树状节点回调
			nodechange(ref) {
				this.$nextTick(() => {
					setTimeout(() => {
						this.$refs[ref][0].resize()
					}, 200)
				})
			},
			// 点击右侧删除按钮回调
			onClick(id) {
				console.log(id);
				uni.showModal({
					title: '提示',
					content: '确定删除该考勤组吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showToast({
								title: "删除成功",
								icon: 'success'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 搜索框失焦回调
			blur(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			// 搜索框输入时的回调
			input(res) {
				console.log('----input:', res)
			},
			// 清除搜索框内容时的回调
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
		}
	}
</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;
					}

					.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>