wanzai_school_app/pages/grade/grade.vue

<template>
	<view class="container">
		<!-- 背景图片区域 -->
		<img class="img_bg" src="../../static/images/center-bg.png" />
		<!-- input组件区域 -->
		<headerInput @changeInputValue="changeInputValue" />
		<!-- 学校年级班级区域 -->
		<!-- <view class="school">万载三中/{{ gradeName ? gradeName + '/' : '' }}{{ className ? className : '' }}</view> -->
		<view class="school">
			<uni-data-picker
				placeholder="请选择班级"
				popup-title="请选择班级"
				:clear-icon="false"
				:map="{ text: 'name', value: 'classId' }"
				:localdata="dataTree_student"
				v-model="classes_student"
				@nodeclick="clickNode"
			></uni-data-picker>
		</view>

		<!-- 学生列表区域 -->
		<listView :list="list" :appType="appType" />
	</view>
</template>

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

// 学生列表数组
const list = ref([])
// 年级信息
const gradeName = ref('')
// 班级信息
const className = ref('')

const appType = ref('')

const dataTree_student = ref([])

const classes_student = ref('')

const gradeId = ref('')

onLoad((options) => {
	appType.value = options.type || ''
	const id = uni.getStorageSync('userInfo').id
	getManageClass(id)
})

// 获取管理的班级数组
const getManageClass = async (id) => {
	const res = await myRequest({
		url: '/wanzai/api/smartUser/getManageClass',
		data: {
			id
		}
	})
	// console.log(res)
	const result = JSON.parse(decryptDes(res.data))
	// console.log(result)
	dataTree_student.value = result
	classes_student.value = result[0].classId
	gradeId.value = result[0].gradeId
	getData()
}

// 输入框组件自定义事件
const changeInputValue = (value) => {
	// console.log(value)
	// console.log(value.trim())
	if (value.trim()) {
		let temList = []
		list.value.forEach((ele) => {
			if (ele.name.indexOf(value.trim()) != -1) {
				temList.push(ele)
			}
		})
		list.value = temList
	} else {
		getData()
	}
}

const getData = async () => {
	const res = await myRequest({
		url: '/wanzai/api/wechat/queryPhoneBook',
		data: {
			id: uni.getStorageSync('userInfo').id,
			gradeId: gradeId.value,
			classId: classes_student.value
		}
	})
	// console.log(res)

	res.data.forEach((ele) => {
		let temlist
		ele.classBookList.forEach((item, index, arr) => {
			if (item.bookUserList.length) {
				// 所在年级学生的数据
				list.value = item.bookUserList
				// 班级信息
				className.value = arr[index].className

				temlist = arr
			}
		})
		if (ele.classBookList == temlist) {
			gradeName.value = ele.gradeName
		}
	})
	// console.log(list.vlaue)

	if (className.value) {
		uni.setNavigationBarTitle({
			title: gradeName.value + className.value
		})
	}
}

// 学生部门筛选框选择时的回调
const clickNode = (e) => {
	// console.log(e)
	classes_student.value = e.classId
	gradeId.value = e.gradeId
	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 {
		margin-top: 30rpx;
		color: #808080;
		font-size: 28rpx;
	}
}
</style>