smartSchoolClockApp/pages/group/group.vue

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

		<!-- 新增考勤组区域 -->
		<view class="add">
			<view v-if="flag == 1" class="icon" @click="handleAdd"><img src="../../static/imgs/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/imgs/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: []
		}
	},
	onLoad(options) {
		this.flag = options.flag
		if (this.flag == 1) {
			this.checkStatus = true
		}
		this.getGroupData()
	},
	methods: {
		// 获取考勤组列表数据
		async getGroupData() {
			let res = await this.$myRequest_clockIn({
				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_clockIn({
				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_clockIn({
				url: '/attendance/api/settings/group/add',
				method: 'post',
				header: {
					'content-type': 'application/json'
				},
				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 {
				uni.$emit('updateRuleGroup', temList)
				uni.navigateBack({
					delta: 1
				})
			}
		},
		// 点击树状节点回调
		nodechange(ref) {
			// console.log(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_clockIn({
							url: '/attendance/api/settings/group/delete',
							method: 'delete',
							data: {
								ids: [id]
							}
						})
						// console.log(res);
						if (res.code == 200 && res.data) {
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
							setTimeout(() => {
								this.getGroupData()
							}, 1500)
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 3000
							})
						}
					} else if (res.cancel) {
					}
				}
			})
		},
		// 清除搜索框内容时的回调
		clear() {
			this.searchValue = ''
			this.getGroupData()
		}
	}
}
</script>

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

	.placeholder {
		height: 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>