wanzai_school_app/pages/studentManage/studentManage.vue

<template>
	<view class="container" :style="[showEdit ? 'padding-bottom:180rpx' : '', showPage ? 'overflow:hidden' : 'overflow:visible']">
		<!-- 背景图片区域 -->
		<img class="img_bg" src="../../static/images/center-bg.png" />

		<!-- input组件区域 -->
		<HeaderInput placeholder="请输入学生姓名或时间组名称" @changeInputValue="changeInputValue" />

		<!-- 学校年级班级区域 -->
		<view class="school" v-if="list.length">
			<view class="">{{ classInfo }}</view>
			<!-- 批量按钮区域 -->
			<view v-if="!showEdit" class="school_edit" @click="handleEdit">
				<img class="img" src="@/static/images/edit.png" />
				批量
			</view>
			<!-- 全选按钮区域 -->
			<view v-else class="school_btn">
				<view class="cancel" @click="handleCancel">取消</view>

				<radio color="#0061FF" style="transform: scale(0.7)" :checked="allChecked" @click="handleAllCheck" />
				<view class="all">全选</view>
			</view>
		</view>

		<!-- 学生列表区域 -->
		<view class="list_box" v-if="list.length">
			<!-- 每一个学生区域 -->
			<view class="item_box" v-for="(item, index) in list" :key="index" @click="handleClickItem(item)">
				<view class="box_name">{{ item.name }}（{{ item.cardNo }}）</view>
				<view class="box_time">{{ item.timeGroup }}</view>

				<radio v-if="showEdit" color="#0061FF" style="transform: scale(0.7)" :checked="item.isChecked" />
			</view>
		</view>

		<!-- 关联时间组按钮区域 -->
		<view class="btn" v-if="showEdit">
			<view class="btn_box" @click="handleBind">
				<uni-icons color="#fff" type="link" size="28"></uni-icons>
				<text class="text">关联时间组</text>
			</view>
		</view>

		<!-- 没有数据时展示的页面 -->
		<NoData v-if="!list.length" style="margin-top: 140rpx" />

		<!-- 弹窗区域 -->
		<uni-popup ref="popupDom">
			<view class="pop_up">
				<!-- 头部标题区域 -->
				<view class="popup_top">{{ headerName }} - 关联时间组</view>
				<!-- 时间组区域 -->
				<view class="popup_body">
					<!-- 每一个时间组区域 -->
					<view class="time_item" v-for="item in timeGroups" :key="item.id" @click="handleClickItemPop(item)">
						<view class="item_left">
							<view class="top">{{ item.name }}</view>
							<view class="bottom">{{ item.remark }}</view>
						</view>
						<radio color="#0061FF" style="transform: scale(0.9)" :checked="item.isChecked" />
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import HeaderInput from '@/components/headerInput.vue'
import NoData from '@/components/noData.vue'
import { myRequest } from '@/utils/api.js'
import { decryptDes } from '@/utils/des.js'

// 当前所处班级
const classInfo = ref()

// 搜索框绑定数据
const keyWord = ref('')

// 学生列表数据
const list = ref([])

// 缓存数据
const copyList = ref([])

// 是否显示全选radio
const showEdit = ref(false)

// 是否全选
const allChecked = ref(false)

// 弹窗DOM
const popupDom = ref()

// 时间组列表
const timeGroups = ref([])

// 弹窗标题
const headerName = ref('')
// 当前学生id
const studentId = ref()

// 滚动穿透控制
const showPage = ref(false)

onLoad(() => {
	getData()
})

// 获取学生列表数据
const getData = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smartUser/queryClassUser',
		data: {
			userId: uni.getStorageSync('userInfo').id,
			keyWord: keyWord.value
		}
	})
	// console.log(res)
	const result = JSON.parse(decryptDes(res.data))
	// console.log(result)
	list.value = result.userDetails
	list.value.forEach((ele) => {
		ele.isChecked = false
	})
	classInfo.value = result.name
	uni.setNavigationBarTitle({
		title: result.name
	})
}

// 点击批量按钮回调
const handleEdit = () => {
	showEdit.value = true
	copyList.value = JSON.parse(JSON.stringify(list.value))
}

// 点击取消按钮回调
const handleCancel = () => {
	showEdit.value = false
	allChecked.value = false
	list.value = copyList.value
}

// 点击全选按钮回调
const handleAllCheck = () => {
	if (!allChecked.value) {
		list.value.forEach((ele) => {
			ele.isChecked = true
		})
	} else {
		list.value.forEach((ele) => {
			ele.isChecked = false
		})
	}
	allChecked.value = !allChecked.value
}

// 点击每一个学生时的回调
const handleClickItem = (item) => {
	if (showEdit.value) {
		item.isChecked = !item.isChecked

		// 判断全选按钮的状态
		allChecked.value = list.value.every((ele) => ele.isChecked)
	} else {
		// 编辑单个学生
		showPage.value = true
		headerName.value = item.name
		studentId.value = item.id
		getTimeGroups()
		popupDom.value.open('center')
	}
}

// 获取时间组列表数据
const getTimeGroups = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smartUser/timeGroups'
	})
	// console.log(res)
	const result = JSON.parse(decryptDes(res.data))
	// console.log(result)
	timeGroups.value = result
	timeGroups.value.forEach((ele) => {
		ele.isChecked = false
	})
}

// 点击弹窗每一个时间组的回调
const handleClickItemPop = (item) => {
	timeGroups.value.forEach((ele) => {
		ele.isChecked = false
	})
	item.isChecked = !item.isChecked

	uni.showModal({
		title: '提示',
		content: '确定修改时间组吗？',
		success: async (res) => {
			if (res.confirm) {
				handleConfirm(item.id)
			}
		}
	})
}

const handleConfirm = async (timeGroupId) => {
	const res = await myRequest({
		url: '/wanzai/api/smartUser/setUserTimeGroup',
		method: 'post',
		data: {
			ids: [studentId.value],
			timeGroupId
		}
	})
	// console.log(res)
	uni.showToast({
		title: res.message,
		icon: 'none',
		mask: true
	})
	if (res.code == 200) {
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/studentManage/studentManage'
			})
		}, 1500)
	}
}

// 点击关联时间组按钮回调
const handleBind = () => {
	// 判断是否选择了学生
	const flag = list.value.find((ele) => ele.isChecked)

	if (!flag) {
		uni.showToast({
			title: '请至少选择一名学生',
			icon: 'none',
			mask: true
		})
	} else {
		let arr = []
		list.value.forEach((ele) => {
			if (ele.isChecked) {
				arr.push(ele.id)
			}
		})
		uni.navigateTo({
			url: `/pages/timeGroup/timeGroup?ids=${JSON.stringify(arr)}`
		})
	}
}

// 输入框组件自定义事件
const changeInputValue = (value) => {
	keyWord.value = value
	getData()
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	padding: 0 20rpx;
	min-height: 100vh;
	background-color: #f1f6fe;

	// 背景图片区域样式
	.img_bg {
		position: absolute;
		top: -70rpx;
		right: 0;
		width: 589rpx;
		height: 320rpx;
		pointer-events: none;
	}

	// 学校名称区域样式
	.school {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 38rpx;
		color: #808080;
		font-size: 28rpx;

		.school_edit {
			display: flex;
			align-items: center;
			margin-right: 30rpx;
			color: #0061ff;

			.img {
				margin-right: 10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.school_btn {
			display: flex;
			align-items: center;

			.cancel {
				margin-right: 20rpx;
				color: #d43030;
			}

			.all {
				margin-left: -10rpx;
			}
		}
	}

	.list_box {
		padding: 0 30rpx 30rpx;
		margin-top: 22rpx;
		background-color: #fff;

		.item_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 103rpx;
			font-size: 24rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.box_name {
			}

			.box_time {
			}
		}
	}

	.btn {
		position: fixed;
		bottom: 0;
		padding: 0 30rpx 30rpx;
		background-color: #fff;

		.btn_box {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 28rpx;
			width: 650rpx;
			height: 100rpx;
			color: #fff;
			font-size: 32rpx;
			border-radius: 8rpx;
			background-color: #0061ff;

			.text {
				margin-left: 10rpx;
			}
		}
	}

	.pop_up {
		width: 710rpx;
		height: 855rpx;
		border-radius: 22rpx;
		background-color: #fff;

		.popup_top {
			height: 94rpx;
			line-height: 94rpx;
			text-align: center;
			font-size: 28rpx;
			border-bottom: 1rpx solid #e6e6e6;
		}

		.popup_body {
			height: 760rpx;
			overflow-y: auto;

			.time_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 40rpx;
				height: 130rpx;
				border-bottom: 1rpx solid #e6e6e6;

				.item_left {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 80rpx;

					.top {
						font-size: 28rpx;
					}
					.bottom {
						font-size: 24rpx;
						color: #b3b3b3;
					}
				}
			}
		}
	}
}
</style>