wanzai_school_app/pages/set/set.vue

<template>
	<view class="container">
		<!-- 学生部门区域 -->
		<view class="box">
			<view class="box_key">学生部门</view>
			<view class="box_input">
				<uni-data-picker
					placeholder="请选择部门"
					popup-title="请选择部门"
					:map="{ text: 'name', value: 'id' }"
					:localdata="dataTree_student"
					v-model="classes_student"
					@change="onchange_student"
				></uni-data-picker>
			</view>
		</view>

		<!-- 家属部门区域 -->
		<view class="box">
			<view class="box_key">家属部门</view>
			<view class="box_input">
				<uni-data-picker
					placeholder="请选择部门"
					popup-title="请选择部门"
					:map="{ text: 'name', value: 'id' }"
					:localdata="dataTree_family"
					v-model="classes_family"
					@change="onchange_family"
				></uni-data-picker>
			</view>
		</view>

		<!-- 确认按钮区域 -->
		<view class="btn" @click="clickBtn">确认</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { myRequest } from '@/utils/api.js'

// 学生部门数组
const dataTree_student = ref([])
// 学生部门筛选框绑定数据
const classes_student = ref()

// 家属部门数组
const dataTree_family = ref([])
// 家属部门筛选框绑定数据
const classes_family = ref()

onLoad(() => {
	// 获取学生部门数据
	getData_student()

	// 获取家属部门数据
	getData_family()
})

// 获取学生部门数据
const getData_student = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smartDepartment/studentDepartment'
	})
	// console.log(res)
	dataTree_student.value = res.data
}

// 获取家属部门数据
const getData_family = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smartDepartment/patriarchDepartment'
	})
	// console.log(res)
	dataTree_family.value = res.data
}

// 学生部门筛选框选择时的回调
const onchange_student = (e) => {
	console.log(e.detail.value)
	console.log(classes_student.value)
}

// 家属部门筛选框选择时的回调
const onchange_family = (e) => {
	console.log(e.detail.value)
	console.log(classes_family.value)
}

// 点击确认按钮回调
const clickBtn = () => {
	console.log(classes_student.value)
	console.log(classes_family.value)
	uni.reLaunch({
		url: '/pages/studentManage/studentManage'
	})
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx;

	.box {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		height: 80rpx;

		.box_key {
			width: 120rpx;
			font-size: 28rpx;
		}

		.box_input {
			flex: 1;
			margin-left: 20rpx;
			overflow: hidden;
		}
	}

	.btn {
		position: absolute;
		left: 50%;
		bottom: 50rpx;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 300rpx;
		height: 80rpx;
		font-size: 28rpx;
		color: #fff;
		border-radius: 10rpx;
		background-color: #0061ff;
	}
}
</style>