school-developer/src/views/stuwork/dormbuilding/emptyRoomDialog.vue

<template>
	<el-dialog :title="dialogTitle" v-model="visible" :width="1000" :close-on-click-modal="false" draggable>
		<el-table :data="tableData" v-loading="loading" border style="width: 100%">
			<!-- 空宿舍列表：序号、宿舍、几人间、是否有空调 -->
			<template v-if="roomType === 'all'">
				<el-table-column type="index" label="序号" width="60" align="center" />
				<el-table-column prop="roomNo" label="宿舍" show-overflow-tooltip align="center" />
				<el-table-column prop="bedNum" label="几人间" show-overflow-tooltip align="center" />
				<el-table-column prop="isHaveAir" label="是否有空调" show-overflow-tooltip align="center">
					<template #default="scope">
						<span>{{ scope.row.isHaveAir === '1' || scope.row.isHaveAir === 1 ? '已安装' : '未安装' }}</span>
					</template>
				</el-table-column>
			</template>

			<!-- 空几人宿舍列表：宿舍、床位1-6、是否有空调 -->
			<template v-else>
				<el-table-column prop="roomNo" label="宿舍" show-overflow-tooltip align="center" />
				<el-table-column prop="bedNo1" label="床位1" show-overflow-tooltip align="center">
					<template #default="scope">
						<span>{{ scope.row.bedNo1 || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="bedNo2" label="床位2" show-overflow-tooltip align="center">
					<template #default="scope">
						<span>{{ scope.row.bedNo2 || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="bedNo3" label="床位3" show-overflow-tooltip align="center">
					<template #default="scope">
						<span>{{ scope.row.bedNo3 || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="bedNo4" label="床位4" show-overflow-tooltip align="center">
					<template #default="scope">
						<span>{{ scope.row.bedNo4 || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="bedNo5" label="床位5" show-overflow-tooltip align="center">
					<template #default="scope">
						<span>{{ scope.row.bedNo5 || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="bedNo6" label="床位6" show-overflow-tooltip align="center">
					<template #default="scope">
						<span>{{ scope.row.bedNo6 || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="isHaveAir" label="是否有空调" show-overflow-tooltip align="center">
					<template #default="scope">
						<span>{{ scope.row.isHaveAir === '1' || scope.row.isHaveAir === 1 ? '已安装' : '未安装' }}</span>
					</template>
				</el-table-column>
			</template>
		</el-table>

		<!-- 分页 -->
		<pagination v-if="isPage" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="pagination" />

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">关 闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="EmptyRoomDialog">
import { ref, reactive, computed } from 'vue';
import { queryEmptyRoomWithBuildingNo, queryEmtryRoomDetail } from '/@/api/stuwork/dormroomstudent';
import { useMessage } from '/@/hooks/message';

// 定义变量内容
const visible = ref(false);
const loading = ref(false);
const buildingNo = ref('');
const roomType = ref('');
const tableData = ref<any[]>([]);
const isPage = ref(false);
const pagination = reactive({
	current: 1,
	size: 10,
	total: 0,
	pageSizes: [10, 20, 50, 100],
	layout: 'total, sizes, prev, pager, next, jumper',
});

// 对话框标题
const dialogTitle = computed(() => {
	if (roomType.value === 'all') {
		return `空宿舍列表 - ${buildingNo.value}号楼`;
	} else {
		return `空${roomType.value}人宿舍列表 - ${buildingNo.value}号楼`;
	}
});

// 打开对话框
const openDialog = async (building: string, type: string) => {
	visible.value = true;
	buildingNo.value = building;
	roomType.value = type;
	tableData.value = [];
	pagination.current = 1;
	pagination.total = 0;

	await loadData();
};

// 加载数据
const loadData = async () => {
	loading.value = true;
	try {
		let res: any;
		if (roomType.value === 'all') {
			// 查询所有空宿舍
			res = await queryEmptyRoomWithBuildingNo(buildingNo.value);
		} else {
			// 查询空几人宿舍
			res = await queryEmtryRoomDetail(buildingNo.value, roomType.value);
		}

		// 处理返回数据
		if (res.data) {
			if (Array.isArray(res.data)) {
				tableData.value = res.data;
				isPage.value = false;
			} else if (res.data.records && Array.isArray(res.data.records)) {
				tableData.value = res.data.records;
				pagination.total = res.data.total || 0;
				isPage.value = true;
			} else if (res.data.list && Array.isArray(res.data.list)) {
				tableData.value = res.data.list;
				isPage.value = false;
			} else {
				tableData.value = [];
				isPage.value = false;
			}
		} else {
			tableData.value = [];
			isPage.value = false;
		}
	} catch (err: any) {
		useMessage().error(err.msg || '加载失败');
		tableData.value = [];
	} finally {
		loading.value = false;
	}
};

// 分页大小改变
const sizeChangeHandle = (val: number) => {
	pagination.size = val;
	pagination.current = 1;
	loadData();
};

// 当前页改变
const currentChangeHandle = (val: number) => {
	pagination.current = val;
	loadData();
};

// 暴露方法给父组件
defineExpose({
	openDialog,
});
</script>