入住信息列表搜索区

2025-10-25 03:20:44 +08:00
parent 14fe56b734
commit b1e82d0ba3
3 changed files with 432 additions and 53 deletions
--- a/api/dms/studentDormInfo/index.js
+++ b/api/dms/studentDormInfo/index.js
@@ -57,3 +57,21 @@ export function listAllRoomByFloor(id) {
    method: 'get'
  })
 }
+
+// 修改证件照
+export function submitOwnInfo(data){
+  return request({
+    url:'/comprehensive/extraInfo/submitOwnInfo',
+    method:'POST',
+    data
+  })
+}
+
+// 查询年级列表
+export function listGrade(query = null) {
+  return request({
+    url: '/cph/grade/list',
+    method: 'get',
+    params: query
+  })
+}
--- a/pages/dormitory/studentDormInfo/index.vue
+++ b/pages/dormitory/studentDormInfo/index.vue
@@ -1,11 +1,86 @@
 <template>
 	<view class="page-container">
+		<!-- 搜索区 -->
+		<view class="fixed-search-wrap">
+			<!-- 搜索区内容 -->
+			<view class="search-content">
+				<view class="search-card">
+					<!-- 搜索输入框 -->
+					<view class="search-row">
+						<uni-icons type="search" size="28rpx" color="#1890FF" class="search-icon"></uni-icons>
+						<input v-model="queryParams.stuName" placeholder="输入学生姓名搜索" @input="handleSearchInput"
+							class="search-input" />
+					</view>
+
+					<!-- 筛选行 -->
+					<view class="filter-row">
+						<!-- 年级筛选 -->
+						<view class="filter-item">
+							<text class="filter-label">年级</text>
+							<picker mode="selector" :range="gradeList" :range-key="'gradeName'" :value="gradeIndex"
+								@change="handleGradeChange" class="filter-picker">
+								<view class="picker-content">
+									<!-- 添加空值判断 -->
+									<text
+										class="picker-text">{{ gradeList[gradeIndex] ? gradeList[gradeIndex].gradeName : '全部' }}</text>
+									<uni-icons type="bottom" size="20rpx" color="#999"></uni-icons>
+								</view>
+							</picker>
+						</view>
+
+						<!-- 宿舍区筛选 -->
+						<view class="filter-item">
+							<text class="filter-label">宿舍区</text>
+							<picker mode="selector" :range="dormAreaList" :range-key="'name'" :value="dormAreaIndex"
+								@change="handleDormAreaChange" class="filter-picker">
+								<view class="picker-content">
+									<text
+										class="picker-text">{{ dormAreaList[dormAreaIndex] ? dormAreaList[dormAreaIndex].name : '全部' }}</text>
+									<uni-icons type="bottom" size="20rpx" color="#999"></uni-icons>
+								</view>
+							</picker>
+						</view>
+
+						<!-- 园区筛选 -->
+						<view class="filter-item">
+							<text class="filter-label">园区</text>
+							<picker mode="selector" :range="parkList" :range-key="'name'" :value="parkIndex" @change="handleParkChange"
+								class="filter-picker">
+								<view class="picker-content">
+									<text class="picker-text">{{ parkList[parkIndex] ? parkList[parkIndex].name : '全部' }}</text>
+									<uni-icons type="bottom" size="20rpx" color="#999"></uni-icons>
+								</view>
+							</picker>
+						</view>
+
+						<!-- 宿舍号筛选 -->
+						<!-- <view class="filter-item">
+							<text class="filter-label">宿舍号</text>
+							<input v-model="queryParams.roomNo" placeholder="输入" @input="handleSearchInput"
+								class="filter-input" />
+						</view> -->
+					</view>
+
+					<!-- 操作按钮 -->
+					<view class="action-row">
+						<button class="reset-btn" @click="resetFilter">
+							<uni-icons type="clear" size="24rpx" color="#1890FF" class="btn-icon"></uni-icons>
+							重置
+						</button>
+						<button class="search-btn" @click="handleSearch">
+							<uni-icons type="search" size="24rpx" color="#fff" class="btn-icon"></uni-icons>
+							搜索
+						</button>
+					</view>
+				</view>
+			</view>
+		</view>
+
 		<!-- 添加信息收集按钮 -->
 		<view class="add" @click="addDormInfo">+</view>

-		<!-- 滚动容器（使用scroll-view确保事件生效） -->
-		<scroll-view class="scroll-container" scroll-y @scrolltolower="loadNextPage" refresher-enabled
-			@refresherrefresh="handleRefresh">
+		<!-- 滚动容器 -->
+		<scroll-view class="scroll-container" scroll-y @scrolltolower="loadNextPage" @refresherrefresh="handleRefresh">
 			<!-- 入住收集列表 -->
 			<view class="dorm-list">
 				<view class="dorm-item" v-for="(item, index) in dormInfo"
@@ -20,7 +95,8 @@
 						<view>学号: {{ item.stuNo }}</view>
 						<view>班级: {{ item.className }}</view>
 						<view>院系: {{ item.deptName }}</view>
-						<view>宿舍: {{ item.parkName }} {{ item.buildingName }} {{ item.floorName }}楼{{ item.roomNo }}室
+						<view>宿舍: {{ item.parkName }} {{ item.buildingName }}
+							{{ item.floorName }}楼{{ item.roomNo }}室
 						</view>
 						<view>入住时间: {{ item.checkinTime }}</view>
 						<view>状态: {{ item.inStatus === '1' ? '已入住' : '未入住' }}</view>
@@ -38,12 +114,16 @@

 <script>
 	import {
+		listAllCampus,
+		listParkByCampus,
 		listStudent
 	} from "@/api/dms/studentDormInfo/index.js"
 	import {
 		getUserProfile
 	} from '@/api/system/user'
-
+	import {
+		listGrade
+	} from "@/api/dms/studentDormInfo/index.js"
 	export default {
 		data() {
 			return {
@@ -58,16 +138,33 @@
 					checkinTime: null,
 					inStatus: null,
 					stuName: null,
+					gradeId: null,
+					campusId: null,
+					parkId:null,
+					dormArea: null, // 宿舍区筛选参数
+					parkName: null // 园区筛选参数
 				},
 				dormInfo: [],
 				isLoading: false,
-				hasMore: true
+				hasMore: true,
+				// 筛选下拉选项数据
+				gradeList: [],
+				dormAreaList: [],
+				parkList: [],
+				// 筛选选中索引
+				gradeIndex: 0,
+				dormAreaIndex: 0,
+				parkIndex: 0,
+				searchTimer: null,
+				roleGroup: null
 			}
 		},
 		onShow() {
 			// 每次显示页面时重置数据并重新加载
 			this.resetData()
 			this.getUserProfile()
+			this.listGrade()
+			this.listAllCampus()
 		},
 		methods: {
 			// 重置分页数据（用于刷新或重新加载）
@@ -79,18 +176,18 @@

 			// 查询列表数据
 			async getList() {
-				if (this.isLoading || !this.hasMore) return
+				if (this.isLoading || !this.hasMore) {
+					// 若无需加载，直接停止刷新
+					uni.stopPullDownRefresh()
+					return
+				}
 				this.isLoading = true

 				try {
 					const res = await listStudent(this.queryParams)
 					if (res.code === 200) {
 						const newData = res.rows || []
-						// 第一页覆盖数据，后续页追加
-						this.dormInfo = this.queryParams.pageNum === 1 ?
-							newData :
-							[...this.dormInfo, ...newData]
-						// 判断是否还有更多数据（当前页数据量等于页大小，说明可能有下一页）
+						this.dormInfo = this.queryParams.pageNum === 1 ? newData : [...this.dormInfo, ...newData]
 						this.hasMore = newData.length === this.queryParams.pageSize
 					} else {
 						uni.showToast({
@@ -106,7 +203,7 @@
 					})
 				} finally {
 					this.isLoading = false
-					// 停止下拉刷新
+					// 最终兜底：无论如何都停止刷新
 					uni.stopPullDownRefresh()
 				}
 			},
@@ -124,7 +221,19 @@
 			handleRefresh() {
 				console.log('触发下拉刷新')
 				this.resetData()
-				this.getList()
+				// 直接先停止一次（防止初始动画卡住）
+				uni.stopPullDownRefresh()
+				// 执行数据加载，加载完成后再次停止
+				this.getList().then(() => {
+					// 延迟300ms确保动画正常结束（兼容快速加载场景）
+					setTimeout(() => {
+						uni.stopPullDownRefresh()
+					}, 300)
+				}).catch(() => {
+					setTimeout(() => {
+						uni.stopPullDownRefresh()
+					}, 300)
+				})
 			},

 			// 获取用户信息
@@ -132,7 +241,8 @@
 				try {
 					const res = await getUserProfile()
 					console.log('当前用户信息:', res)
-					if (res.roleGroup == "学生") {
+					this.roleGroup = res.roleGroup
+					if (res.roleGroup === "学生") {
 						this.queryParams.stuName = res.data.nickName
 					}
 					this.getList()
@@ -143,6 +253,7 @@

 			// 跳转添加页面
 			addDormInfo() {
+				if (this.roleGroup === "学生") {
 					if (this.dormInfo.length > 0) {
 						uni.showToast({
 							title: '请勿重复提交',
@@ -150,6 +261,7 @@
 						});
 						return
 					}
+				}
 				uni.navigateTo({
 					url: `/pages/dormitory/studentDormInfo/informationCollection`
 				})
@@ -160,7 +272,99 @@
 				console.log('点击学生信息:', item)
 				// 可添加跳转详情页逻辑
 				// uni.navigateTo({ url: `/pages/detail?id=${item.id}` })
+			},
+
+			// 获取年级
+			async listGrade() {
+				let res = await listGrade()
+				this.gradeList = [{
+					gradeName: '全部'
+				}, ...res.rows]
+			},
+
+			// 获取校区数据
+			async listAllCampus() {
+				let res = await listAllCampus()
+				if (res.code == 200) {
+					this.dormAreaList = [{
+						name: '全部'
+					}, ...res.data]
 				}
+			},
+
+			// 搜索输入防抖
+			handleSearchInput() {
+				clearTimeout(this.searchTimer)
+				this.searchTimer = setTimeout(() => {
+					this.resetData()
+					this.getList()
+				}, 1000)
+			},
+
+			// 年级筛选
+			handleGradeChange(e) {
+				this.gradeIndex = e.detail.value
+				const selectedGrade = this.gradeList[this.gradeIndex]
+				// 修复：“全部”选项无gradeId，设为null
+				this.queryParams.gradeId = selectedGrade.gradeId || null
+				this.resetData()
+				this.getList()
+			},
+
+			// 宿舍区筛选
+			async handleDormAreaChange(e) {
+				this.dormAreaIndex = e.detail.value
+				const selectedArea = this.dormAreaList[this.dormAreaIndex]
+				this.queryParams.campusId = selectedArea.id || null
+				this.resetData()
+				this.getList()
+
+				if (this.queryParams.campusId) {
+					// 根据校区id获取园区
+					let res = await listParkByCampus(this.queryParams.campusId)
+					if (res.code == 200) {
+						this.parkList = [{
+							name: '全部'
+						}, ...res.data]
+					}
+				}
+			},
+
+			// 园区筛选
+			handleParkChange(e) {
+				this.parkIndex = e.detail.value
+				const selectedPark = this.parkList[this.parkIndex]
+				this.queryParams.parkId = selectedPark.id || null
+				this.resetData()
+				this.getList()
+			},
+
+			// 重置筛选
+			resetFilter() {
+				this.gradeIndex = 0
+				this.dormAreaIndex = 0
+				this.parkIndex = 0
+				// 重置筛选参数，保留分页基础参数
+				this.queryParams = {
+					...this.queryParams,
+					gradeId: null,
+					dormArea: null,
+					parkName: null,
+					roomNo: null,
+					stuName: null
+				}
+				this.resetData()
+				this.getList()
+			},
+
+			// 手动搜索
+			handleSearch() {
+				this.resetData()
+				this.getList()
+			},
+		},
+		destroyed() {
+			clearTimeout(this.searchTimer)
 		}
 	}
 </script>
@@ -169,20 +373,63 @@
 	.page-container {
 		position: relative;
 		height: 100vh;
+		padding-top: 44px;
+		/* 预留原生title高度 */
 		background-color: #f5f7fa;
-	}
-
-	/* 滚动容器 */
-	.scroll-container {
-		height: 100%;
-		/* 必须设置高度才能滚动 */
-		width: 100%;
-		padding-bottom: 120rpx;
-		/* 预留底部按钮空间 */
 		box-sizing: border-box;
 	}

-	/* 添加按钮 */
+	/* 固定搜索区：收缩时无空白 */
+	.fixed-search-wrap {
+		position: fixed;
+		top: 44px;
+		left: 0;
+		right: 0;
+		z-index: 90;
+		background-color: #fff;
+		/* 背景改为白色，与页面融合 */
+		border-bottom: 1px solid #eee;
+		padding: 14px;
+	}
+
+	/* 触发器：样式简洁，点击区域大 */
+	.search-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 20rpx;
+		cursor: pointer;
+		border-bottom: 1px solid #f5f5f5;
+	}
+
+	.search-header-title {
+		font-size: 28rpx;
+		font-weight: 500;
+		color: #333;
+	}
+
+	/* 搜索内容*/
+	.search-content {
+		transition: all 0.3s ease;
+		/* 动画过渡更自然 */
+	}
+
+	.search-card {
+		padding: 20rpx;
+		box-shadow: none;
+		/* 收缩时去掉阴影，更简洁 */
+	}
+
+	/* 滚动容器：调整顶部内边距，适应搜索区高度变化 */
+	.scroll-container {
+		height: 100%;
+		width: 100%;
+		padding-top: 290rpx;
+		padding-bottom: 120rpx;
+		box-sizing: border-box;
+	}
+
+	/* 以下为原有样式，无需修改 */
 	.add {
 		position: fixed;
 		bottom: 50rpx;
@@ -200,12 +447,10 @@
 		z-index: 99;
 	}

-	/* 列表容器 */
 	.dorm-list {
 		padding: 20rpx;
 	}

-	/* 列表项 */
 	.dorm-item {
 		background-color: #fff;
 		border-radius: 16rpx;
@@ -217,10 +462,8 @@

 	.dorm-item:active {
 		transform: scale(0.99);
-		/* 点击反馈 */
 	}

-	/* 列表项头部 */
 	.item-header {
 		display: flex;
 		justify-content: space-between;
@@ -247,7 +490,6 @@
 		background-color: #28a745;
 	}

-	/* 列表项内容 */
 	.item-content {
 		font-size: 28rpx;
 		color: #666;
@@ -262,7 +504,6 @@
 		margin-bottom: 0;
 	}

-	/* 加载状态 */
 	.loading,
 	.no-more,
 	.no-data {
@@ -275,4 +516,94 @@
 	.no-data {
 		padding: 100rpx 0;
 	}
+
+	.search-row {
+		display: flex;
+		align-items: center;
+		background-color: #f5f7fa;
+		border-radius: 60rpx;
+		padding: 14rpx 20rpx;
+		margin-bottom: 24rpx;
+	}
+
+	.search-icon {
+		margin-right: 12rpx;
+	}
+
+	.search-input {
+		flex: 1;
+		font-size: 28rpx;
+		color: #333;
+	}
+
+	.filter-row {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 16rpx;
+		margin-bottom: 24rpx;
+	}
+
+	.filter-item {
+		flex: 1;
+		min-width: 120rpx;
+		display: flex;
+		flex-direction: column;
+		gap: 8rpx;
+	}
+
+	.filter-label {
+		font-size: 24rpx;
+		color: #666;
+		padding-left: 4rpx;
+	}
+
+	.picker-content,
+	.filter-input {
+		display: flex;
+		align-items: center;
+		font-size: 26rpx;
+		color: #333;
+		padding: 14rpx 16rpx;
+		background-color: #f5f7fa;
+		border-radius: 12rpx;
+		height: 60rpx;
+		box-sizing: border-box;
+	}
+
+	.filter-input::placeholder {
+		color: #999;
+	}
+
+	.action-row {
+		display: flex;
+		gap: 16rpx;
+	}
+
+	.reset-btn,
+	.search-btn {
+		flex: 1;
+		height: 72rpx;
+		line-height: 72rpx;
+		border-radius: 36rpx;
+		font-size: 28rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.reset-btn {
+		background-color: #fff;
+		color: #1890FF;
+		border: 1px solid #1890FF;
+	}
+
+	.search-btn {
+		background-color: #1890FF;
+		color: #fff;
+		border: none;
+	}
+
+	.btn-icon {
+		margin-right: 6rpx;
+	}
 </style>
--- a/pages/dormitory/studentDormInfo/informationCollection.vue
+++ b/pages/dormitory/studentDormInfo/informationCollection.vue
@@ -92,13 +92,13 @@
 				<text>上传图片</text>
 			</view>
 			<view class="upload-tip">当前设置：最多上传1张图片，单个图片10MB以内</view>
-			<view class="upload-preview" v-if="form.photo">
-				<image :src="form.photo" mode="aspectFill" />
+			<view class="upload-preview" v-if="form.photoData">
+				<image :src="form.photoData" mode="aspectFill" />
 			</view>
 		</view>

 		<!-- 提交按钮 -->
-		<button class="submit-btn" @click="handleSubmit" v-hasPermi="['dms:dormStu:add']">提交</button>
+		<button class="submit-btn" @click="handleSubmit">提交</button>
 	</view>
 </template>

@@ -109,11 +109,19 @@
 		listBuildingByPark,
 		listFloorByBuilding,
 		listAllRoomByFloor,
-		addStudent
+		addStudent,
+		submitOwnInfo as submitExtraInfo
 	} from "@/api/dms/studentDormInfo/index.js"
 	import {
 		getUserProfile
 	} from '@/api/system/user'
+	import {
+		previewImg
+	} from "@/utils/uploadImg.js"
+	import {
+		checkPic
+	} from "@/utils/checkPic.js"
+	import uploadFile from "@/plugins/upload.js";
 	export default {
 		data() {
 			return {
@@ -135,6 +143,7 @@
 					stuName: '',
 					displayText: '',
 					isInStudentsleep: '是',
+					photoData: ''
 				},
 				// 校区选项
 				campusOptions: [],
@@ -292,13 +301,25 @@
 			// 证件照上传
 			handleUpload() {
 				uni.chooseImage({
-					count: 1,
-					sizeType: ['compressed'],
-					sourceType: ['album', 'camera'],
-					success: (res) => {
-						this.form.photo = res.tempFilePaths[0];
+					count: 3,
+					success: async (img) => {
+						let bool = await checkPic(img.tempFiles[0]);
+						if (bool) {
+							uploadFile('/common/upload', img.tempFilePaths[0]).then((res) => {
+								// if (this.form.photo !== "") {
+								// 	this.form.photo = this.form.photo + "," + JSON.parse(res)
+								// 		.fileName;
+								// } else {
+								// 	this.form.photo = JSON.parse(res).fileName;
+								// }
+								this.form.photoData = img.tempFilePaths[0];
+								this.form.photo = JSON.parse(res).fileName;
+							})
 						}
-				});
+
+					}
+				})
+				
 			},
 			// 提交表单
 			async handleSubmit() {
@@ -334,6 +355,15 @@
 						title: '提交成功',
 						icon: 'success'
 					});
+					// 上次图片头像
+					let data = submitExtraInfo({
+						userId: this.user.data.userId,
+						whitePhoto: this.form.photo
+					})
+					// if (data.code == 200) {
+					// 	console.log(data);
+					// }
+					
 					setTimeout(() => {
 						// 重置表单
 						this.form = {