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" />

		<!-- 输入框和设置按钮区域 -->
		<view class="header">
			<view class="header_input">
				<uni-icons type="search" size="28" color="#808080" @click="changeInputValue"></uni-icons>
				<input v-model="keyWord" class="input" type="text" placeholder="请输入学生姓名" />
			</view>
			<view class="header_set" @click="handleClickSet">
				<uni-icons type="gear" size="28" color="#383838"></uni-icons>
			</view>
		</view>

		<!-- 功能按钮区域 -->
		<view class="school" v-if="list.length">
			<!-- 邀请家长按钮区域 -->
			<view v-if="!showEdit" class="invite" @click="handleInvitation">
				<uni-icons type="personadd" size="22" color="#0061FF"></uni-icons>
				&nbsp;邀请家长
			</view>
			<!-- 批量修改按钮区域 -->
			<view v-if="!showEdit" class="school_edit" @click="handleEdit('修改')">
				<img class="img" src="@/static/images/edit2.png" />
				批量修改
			</view>

			<!-- 添加按钮区域 -->
			<view v-if="!showEdit" class="add" @click="handleAdd">
				<uni-icons type="plus" size="22" color="#0061FF"></uni-icons>
				&nbsp;添加
			</view>

			<!-- 删除按钮区域 -->
			<view v-if="!showEdit" class="delete" @click="handleDelete('删除')">
				<uni-icons type="trash" size="22" color="#D43030"></uni-icons>
				批量删除
			</view>
			<!-- 全选按钮区域 -->
			<view v-if="showEdit" 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">
			<uni-swipe-action>
				<view v-for="(item, index) in list" :key="index">
					<uni-swipe-action-item :right-options="options" @click="onClickItem(item)">
						<!-- 每一个学生区域 -->
						<view class="item_box" @click="handleClickItem(item)">
							<view class="box_info">
								<image class="info_img" src="/static/images/header.png" mode="aspectFill"></image>
								<view class="info_msg">
									<view class="msg_name">
										{{ item.name }}
									</view>
									<view class="msg_no">
										{{ item.cardNo }}
									</view>
								</view>
							</view>
							<view class="box_time">{{ item.timeGroup }}</view>

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

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

		<!-- 批量删除区域 -->
		<view class="btn" v-if="showEdit && currentType == '删除'">
			<view class="btn_box delete" @click="handleDeleteBatch">
				<uni-icons color="#fff" type="trash" 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)

const options = [
	{
		text: '删除',
		style: {
			backgroundColor: '#D43030'
		}
	}
]

const currentType = ref('')

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 handleInvitation = () => {
	uni.navigateTo({
		url: '/pages/invitation/invitation'
	})
}

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

// 点击添加按钮回调
const handleAdd = () => {
	uni.navigateTo({
		url: '/pages/addStudent/addStudent'
	})
}

// 批量删除按钮回调
const handleDelete = (type) => {
	currentType.value = type
	showEdit.value = true
	copyList.value = JSON.parse(JSON.stringify(list.value))
}

// 点击取消按钮回调
const handleCancel = () => {
	currentType.value = ''
	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 onClickItem = (item) => {
	uni.showModal({
		title: '提示',
		content: `确定把${item.name}移除吗？`,
		success: (res) => {
			if (res.confirm) {
				handleDeleteReq([item.id])
			}
		}
	})
}

// 删除请求
const handleDeleteReq = async (ids) => {
	const res = await myRequest({
		url: '/wanzai/api/smartUser/appRemoveClass',
		method: 'post',
		data: {
			ids: ids
		}
	})
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: res.message,
			icon: 'success'
		})
		setTimeout(() => {
			currentType.value = ''
			showEdit.value = false
			allChecked.value = false
			getData()
		}, 1500)
	}
}

// 点击每一个学生时的回调
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 handleDeleteBatch = () => {
	// 判断是否选择了学生
	const flag = list.value.find((ele) => ele.isChecked)

	if (!flag) {
		uni.showToast({
			title: '请至少选择一名学生',
			icon: 'none',
			mask: true
		})
	} else {
		uni.showModal({
			title: '提示',
			content: '确定批量移除吗？',
			success: (res) => {
				if (res.confirm) {
					let arr = []
					list.value.forEach((ele) => {
						if (ele.isChecked) {
							arr.push(ele.id)
						}
					})
					handleDeleteReq(arr)
				}
			}
		})
	}
}

// 输入框组件自定义事件
const changeInputValue = () => {
	getData()
}

// 设置图标点击回调
const handleClickSet = () => {
	uni.navigateTo({
		url: '/pages/set/set'
	})
}
</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;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 30rpx;

		.header_input {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-left: 40rpx;
			width: 589rpx;
			height: 100rpx;
			font-size: 28rpx;
			border-radius: 13rpx;
			border: 2rpx solid #cccccc;
			background-color: #fff;

			.input {
				padding: 0 20rpx;
				width: 425rpx;
			}
		}

		.header_set {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
			border-radius: 13rpx;
			border: 2rpx solid #cccccc;
			background-color: #fff;
		}
	}

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

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

		.school_edit {
			display: flex;
			align-items: center;
			margin-right: 80rpx;
			color: #00baad;

			.img {
				width: 45rpx;
				height: 45rpx;
			}
		}

		.add {
			display: flex;
			align-items: center;
			color: #0061ff;
		}

		.delete {
			display: flex;
			align-items: center;
			margin-left: auto;
			color: #d43030;
		}

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

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

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

	.list_box {
		padding-bottom: 30rpx;
		margin-top: 22rpx;
		background-color: #f1f6fe;

		.item_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			height: 167rpx;
			font-size: 28rpx;
			border-radius: 8rpx;
			background-color: #fff;

			.box_info {
				display: flex;

				.info_img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.info_msg {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 28rpx;

					.msg_name {
						font-size: 32rpx;
					}

					.msg_no {
						color: #808080;
					}
				}
			}

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

		.delete {
			background-color: #d43030;
		}
	}

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