FE-lab-xcx/pages_supplierCylinderManagement/views/gasCylinderManagement/selectLab.vue

<!-- 选择实验室 -->
<template>
	<view id="gasCylinderSelectLab">
		<view class="top-input-max-box">
			<view class="input-box">
				<uni-icons type="search" class="icon-box" color="#7C7C7C" size="25"></uni-icons>
				<input class="uni-input input-min" confirm-type="search" @confirm="getList()" v-model="inputData" maxlength="20"
					placeholder="搜索实验室" />
				<view class="button-p" @click="resetButton()">重置</view>
			</view>
			<view class="picker-box">
				<picker @change="bindPickerChangeA" :value="indexA" :range="arrayA">
					<view class="picker-min-box">
						<view>{{indexA==null?'学院':arrayA[indexA]}}</view>
						<uni-icons type="down" class="icon-box" size="15"></uni-icons>
					</view>
				</picker>
				<picker mode="multiSelector" @change="bindPickerChangeB" @columnchange="bindColumnChangeB" :value="multiIndexB"
					:range="multiArrayB" range-key="name"> <!-- ⚠️ 请替换为你接口中实际用于展示的字段名 -->

					<view class="picker-min-box">
						<!-- 展示当前选中的 校区-楼栋-楼层 -->
						<view v-if="multiIndexB[0]==null && multiIndexB[1]==null && multiIndexB[2]==null">请选择楼层</view>
						<!-- <view v-else>
							{{ multiArrayB[0][multiIndexB[0]].name }} -
							{{ multiArrayB[1][multiIndexB[1]].name }} -
							{{ multiArrayB[2][multiIndexB[2]].name }}
						</view> -->
						<view v-else>
							{{ multiArrayB[2][multiIndexB[2]].name }}
						</view>
						<uni-icons type="down" class="icon-box" size="15"></uni-icons>
					</view>
				</picker>
				<!-- <picker @change="bindPickerChangeB" :value="indexB" :range="arrayB" mode="multiSelector"
					range-key="buildFloorVoList">
					<view class="picker-min-box">
						<view>{{indexB==null?'楼栋':arrayB[indexB]}}</view>
						<uni-icons type="down" class="icon-box" size="15"></uni-icons>
					</view>
				</picker> -->
				<!-- <picker @change="bindPickerChangeC" :value="indexC" :range="arrayC">
					<view class="picker-min-box">
						<view>{{indexC==null?'楼层':arrayC[indexC]}}</view>
						<uni-icons type="down" class="icon-box" size="15"></uni-icons>
					</view>
				</picker> -->
			</view>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="content-box">
			<view class="null-p" v-if="!dataList[0]">暂无数据</view>
			<view class="for-max-big-box" @click="checkButton(item)" v-for="(item,index) in dataList" :key="index">
				<view class="for-title-box">
					<view>实验室名称：</view>
					<view>{{item.subName}}</view>
				</view>
				<view class="for-text-box">
					<view>楼栋：</view>
					<view>{{item.buildName}}</view>
				</view>
				<view class="for-text-box">
					<view>楼层：</view>
					<view>{{item.floorName}}</view>
				</view>
				<view class="for-text-box">
					<view>房间号：</view>
					<view>{{item.roomNum}}</view>
				</view>
			</view>
		</scroll-view>
		<uni-icons class="sao-code-box" type="scan" color="#fff" size="25"></uni-icons>
	</view>
</template>

<script>
	import {
		getDeptDropList,
		systemBuildingGetTreeList,
		airbottleNewQpAppletBottleSubjectsPage,
	} from '@/pages_supplierCylinderManagement/api/index.js'
	export default {
		data() {
			return {
				fromPage: '',
				inputData: '',
				listA: [],
				arrayA: [],
				indexA: null,
				// 三维数组：[ [所有校区], [当前选中校区下的楼栋], [当前选中楼栋下的楼层] ]
				multiArrayB: [
					[],
					[],
					[]
				],
				// 当前选中的索引，初始为 null 表示未选择
				multiIndexB: [null, null, null],
				// 存储完整的原始树形数据
				optionListB: [],
				dataList: [],
				// 查询参数
				getDataType: false,
				queryParams: {
					page: 1,
					pageSize: 10,
				},
				total: 0,
			}
		},
		onLoad(options) {
			this.fromPage = options.from;
		},
		onShow() {
			this.getDeptDropList();
			this.systemBuildingGetTreeList();
			this.getList();
		},

		methods: {
			bindPickerChangeA(e) {
				this.indexA = e.detail.value
				this.$set(this.queryParams, 'page', 1);
				this.getList();
			},
			//滚动加载事件
			scrollGet() {
				let self = this;
				if (self.total / self.queryParams.pageSize <= self.queryParams.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.queryParams.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},
			//搜索用户
			async getList() {
				let self = this;
				let obj = {
					page: this.queryParams.page,
					pageSize: this.queryParams.pageSize,
					searchValue: this.inputData,
					deptId: this.indexA == null ? '' : this.listA[this.indexA].deptId,
					buildId: this.multiIndexB[1] == null ? '' : this.multiArrayB[1][this.multiIndexB[1]].id,
					floorId: this.multiIndexB[2] == null ? '' : this.multiArrayB[2][this.multiIndexB[2]].id,
				};
				const {
					data
				} = await airbottleNewQpAppletBottleSubjectsPage(obj);
				if (data.code == 200) {
					if (self.queryParams.page == 1) {
						this.dataList = data.data.records;
						this.total = data.data.total;
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					} else {
						this.dataList = [...this.dataList, ...data.data.records]
						this.total = data.data.total;
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}
				}
			},
			async getDeptDropList() {
				const {
					data
				} = await getDeptDropList({
					deptName: '',
					level: 2,
					deptType: 1
				});
				if (data.code == 200) {
					let list = [];
					for (let i = 0; i < data.data.length; i++) {
						list.push(data.data[i].deptName);
					}
					this.$set(this, 'listA', data.data);
					this.$set(this, 'arrayA', list);
				}
			},
			async systemBuildingGetTreeList() {
				const {
					data
				} = await systemBuildingGetTreeList({});
				if (data.code == 200) {
					let list = JSON.parse(JSON.stringify(data.data));

					// 执行你原有的过滤逻辑
					this.pushNode(list);

					this.optionListB = list;

					// ✅ 核心：将树形结构转换为 multiSelector 需要的三维数组
					if (list.length > 0) {
						// 第一列：提取所有校区
						const campuses = list.map(item => item);
						// 第二列：默认取第一个校区下的楼栋列表
						const buildings = list[0].buildFloorVoList || [];
						// 第三列：默认取第一个楼栋下的楼层列表
						const floors = (buildings.length > 0) ? buildings[0].buildFloorVoList || [] : [];

						this.multiArrayB = [campuses, buildings, floors];
						// 重置选中索引为 null，实现默认不选中
						this.multiIndexB = [null, null, null];
					}
				}
			},
			// 辅助方法：你原有的树形节点过滤逻辑
			pushNode(list) {
				for (let i = 0; i < list.length; i++) {
					if (list[i].type != 3 && (!list[i].buildFloorVoList || list[i].buildFloorVoList.length === 0)) {
						list.splice(i, 1);
						i--;
					} else if (list[i].type == 3) {
						delete list[i].buildFloorVoList;
					} else {
						this.pushNode(list[i].buildFloorVoList);
					}
				}
			},

			// 2. 监听列变化（联动核心）
			bindColumnChangeB(e) {
				const column = e.detail.column; // 改变的列号 (0:校区, 1:楼栋, 2:楼层)
				const value = e.detail.value; // 改变后的索引

				// 更新当前列的索引
				this.multiIndexB[column] = value;

				if (column === 0) {
					// --- 第一列（校区）变化 ---
					// 1. 更新第二列（楼栋）的数据
					const currentCampus = this.optionListB[value];
					this.$set(this.multiArrayB, 1, currentCampus.buildFloorVoList || []);

					// 2. 更新第三列（楼层）的数据（基于新的楼栋列表的第一个）
					const newBuildings = this.multiArrayB[1];
					const newFloors = (newBuildings.length > 0) ? newBuildings[0].buildFloorVoList || [] : [];
					this.$set(this.multiArrayB, 2, newFloors);

					// 3. 重置后续列的索引
					this.multiIndexB[1] = 0;
					this.multiIndexB[2] = 0;

				} else if (column === 1) {
					// --- 第二列（楼栋）变化 ---
					// 1. 更新第三列（楼层）的数据
					const currentBuilding = this.multiArrayB[1][value];
					this.$set(this.multiArrayB, 2, currentBuilding.buildFloorVoList || []);

					// 2. 重置后续列的索引
					this.multiIndexB[2] = 0;
				}
				// 如果是第三列（楼层）变化，则无需更新其他列
			},

			// 3. 确认选择
			bindPickerChangeB(e) {
				this.multiIndexB = e.detail.value;

				// 获取最终选中的完整对象
				const selectedCampus = this.multiArrayB[0][this.multiIndexB[0]];
				const selectedBuilding = this.multiArrayB[1][this.multiIndexB[1]];
				const selectedFloor = this.multiArrayB[2][this.multiIndexB[2]];
				this.$set(this.queryParams, 'page', 1);
				this.getList();
				// 在这里将值赋值给表单字段
				// this.newData.campusId = selectedCampus.id;
				// this.newData.buildingId = selectedBuilding.id;
				// this.newData.floorId = selectedFloor.id;
			},
			//重置
			resetButton() {
				this.$set(this, 'inputData', '');
				this.$set(this, 'indexA', null);
				this.$set(this, 'multiIndexB', [null, null, null]);
				this.$set(this, 'dataList', []);
				this.$set(this, 'getDataType', false);
				this.$set(this, 'queryParams', {
					page: 1,
					pageSize: 10,
				});
				this.$set(this, 'total', 0);
				this.getList();
			},
			checkButton(item) {
				let obj = {
					subId:item.subId,
					deptId:item.deptId,
					subName:item.subName,
					buildName:item.buildName,
					floorName:item.floorName,
					roomNum:item.roomNum,
				}
				if (this.fromPage == 1) {
					uni.redirectTo({
						url: '/pages_supplierCylinderManagement/views/gasCylinderManagement/inbound?form=' + encodeURIComponent(
							JSON.stringify(obj)) + '&pageType=2'
					});
				} else if (this.fromPage == 2) {
					uni.redirectTo({
						url: '/pages_supplierCylinderManagement/views/gasCylinderManagement/outbound?form=' + encodeURIComponent(
							JSON.stringify(obj)) + '&pageType=2'
					});
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#gasCylinderSelectLab {
		height: 100%;
		width: 100%;
		display flex;
		flex-direction column;
		overflow: hidden;
		position: relative;

		.top-input-max-box {
			background-color: #fff;

			.input-box {
				display: flex;
				border-radius: 40rpx;
				background-color: #eeeeee;
				margin: 20rpx 20rpx 0 20rpx;
				color: #7C7C7C;

				.icon-box {
					margin: 15rpx;
				}

				.input-min {
					height: 80rpx;
					line-height: 80rpx;
					flex: 1;
				}

				.button-p {
					line-height: 80rpx;
					width: 120rpx;
					text-align: center;
					color: #333;
					font-size: 28rpx;
					background-color: #D4D4D4;
					border-top-right-radius: 40rpx;
					border-bottom-right-radius: 40rpx;
				}
			}

			.picker-box {
				display: flex;

				.picker-min-box {
					height: 80rpx;
					line-height: 80rpx;
					display: flex;
					padding: 0 30rpx;

					.icon-box {
						margin-left: 10rpx;
					}
				}
			}
		}

		.content-box {
			flex: 1;
			display flex;
			flex-direction column;
			overflow: scroll;
			padding-bottom: 40rpx;

			.null-p {
				text-align: center;
				line-height: 300rpx;
				color: #999;
			}

			.for-max-big-box {
				padding: 20rpx 30rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin: 25rpx 25rpx 0;

				.for-title-box {
					display: flex;
					margin-bottom: 20rpx;

					view {
						padding-bottom: 20rpx;
						line-height: 60rpx;
						border-bottom: 1rpx solid #dedede;
						font-weight: 700;
					}

					view:nth-child(1) {
						color: #666666;
					}

					view:nth-child(2) {
						flex: 1;
						text-align: right;
					}
				}

				.for-text-box {
					display: flex;

					view {
						line-height: 60rpx;
						font-weight: 700;
					}

					view:nth-child(1) {
						color: #666666;
					}

					view:nth-child(2) {
						flex: 1;
						text-align: right;
					}
				}
			}
		}

		.sao-code-box {
			width: 100rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			background-color: #266FFF;
			border-radius: 50%;
			position: absolute;
			bottom: 60rpx;
			left: 50%;
			margin-left: -50rpx;
		}
	}
</style>