This commit is contained in:
zlwu committed 2025-08-14 22:13:35 +08:00
1 parent 31bedd12f4
commit 6aa2345f2e
3 files changed
+111 -3

No files matched your search

+37 -1
View File
@@ -168,6 +168,7 @@
:data="roomList"
row-key="id"
border
:height="tableMaxHeight"
:expand-row-keys="expandedRowKeys"
@expand-change="handleExpandChange"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@@ -297,7 +298,7 @@
</template>
<script setup name="ClassTeacherBedAllocation" lang="ts">
import { ref, computed, reactive, onMounted, nextTick, watch } from 'vue';
import { ref, computed, reactive, onMounted, onUnmounted, nextTick, watch } from 'vue';
import { InfoFilled, House, Avatar } from '@element-plus/icons-vue';
import type { DormBuildingTreeVO } from '@/api/xg/xgss/dormBedStudent/dormBedStudent/types';
import {
@@ -334,6 +335,9 @@ const showSearch = ref(true);
const loading = ref(false);
const expandedRowKeys = ref<string[]>([]);
// 窗口高度响应式变量
const windowHeight = ref(window.innerHeight);
// 加载状态:展开/收起/选择
const expandAllLoading = ref(false);
const collapseAllLoading = ref(false);
@@ -407,6 +411,30 @@ const selectiveAllocationDialog = reactive({
buildingInfo: undefined as DormBuildingTreeVO | undefined
});
// 表格最大高度计算
const tableMaxHeight = computed(() => {
// 根据不同屏幕尺寸动态调整预留空间
let reservedHeight = 300; // 基础预留高度(考虑到班级Tab和更多内容)
if (windowHeight.value < 768) {
// 小屏幕(手机/平板)- 预留更多空间
reservedHeight = 360;
} else if (windowHeight.value < 1024) {
// 中等屏幕
reservedHeight = 340;
} else {
// 大屏幕 - 预留较少空间,充分利用屏幕
reservedHeight = 300;
}
return Math.max(400, windowHeight.value - reservedHeight);
});
// 处理窗口大小变化
const handleResize = () => {
windowHeight.value = window.innerHeight;
};
/** 通过条件过滤节点 */
const filterNode = (value: string, data: DormBuildingTreeVO) => {
if (!value) return true;
@@ -1041,6 +1069,14 @@ onMounted(async () => {
currentController.abort();
currentController = null;
}
// 添加窗口大小变化监听器
window.addEventListener('resize', handleResize);
});
// 组件卸载时移除事件监听器
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
});
</script>
+37 -1
View File
@@ -197,6 +197,7 @@
:data="roomList"
row-key="id"
border
:height="tableMaxHeight"
:expand-row-keys="expandedRowKeys"
@expand-change="handleExpandChange"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@@ -358,7 +359,7 @@
</template>
<script setup name="DormRoomTreeManagement" lang="ts">
import { ref, computed, reactive, onMounted, nextTick, watch, getCurrentInstance } from 'vue';
import { ref, computed, reactive, onMounted, onUnmounted, nextTick, watch, getCurrentInstance } from 'vue';
import { InfoFilled, House, Avatar, UserFilled } from '@element-plus/icons-vue';
import type { DormBuildingTreeVO } from '@/api/xg/xgss/dormBedStudent/dormBedStudent/types';
import type { DormTreeNode, BedInfo } from '@/api/xg/xgss/xsssfjgl/types';
@@ -389,6 +390,9 @@ const showSearch = ref(true);
const loading = ref(false);
const expandedRowKeys = ref<string[]>([]);
// 窗口高度响应式变量
const windowHeight = ref(window.innerHeight);
// 加载状态:展开/收起/选择
const expandAllLoading = ref(false);
const collapseAllLoading = ref(false);
@@ -468,6 +472,30 @@ const studentTreeRef = ref();
const studentSearchKey = ref('');
const studentTreeData = ref<XgStudentTreeVO[]>([]);
// 表格最大高度计算
const tableMaxHeight = computed(() => {
// 根据不同屏幕尺寸动态调整预留空间
let reservedHeight = 280; // 基础预留高度
if (windowHeight.value < 768) {
// 小屏幕(手机/平板)- 预留更多空间
reservedHeight = 320;
} else if (windowHeight.value < 1024) {
// 中等屏幕
reservedHeight = 300;
} else {
// 大屏幕 - 预留较少空间,充分利用屏幕
reservedHeight = 260;
}
return Math.max(400, windowHeight.value - reservedHeight);
});
// 处理窗口大小变化
const handleResize = () => {
windowHeight.value = window.innerHeight;
};
/** 通过条件过滤节点 */
const filterNode = (value: string, data: DormTreeNode) => {
if (!value) return true;
@@ -1163,6 +1191,14 @@ onMounted(() => {
currentController.abort();
currentController = null;
}
// 添加窗口大小变化监听器
window.addEventListener('resize', handleResize);
});
// 组件卸载时移除事件监听器
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
});
</script>
+37 -1
View File
@@ -197,6 +197,7 @@
:data="roomList"
row-key="id"
border
:height="tableMaxHeight"
:expand-row-keys="expandedRowKeys"
@expand-change="handleExpandChange"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@@ -356,7 +357,7 @@
</template>
<script setup name="DormRoomTreeManagement" lang="ts">
import { ref, computed, reactive, onMounted, nextTick, watch, getCurrentInstance } from 'vue';
import { ref, computed, reactive, onMounted, onUnmounted, nextTick, watch, getCurrentInstance } from 'vue';
import { InfoFilled, House, Avatar, UserFilled } from '@element-plus/icons-vue';
import type { DormTreeNode, BedInfo } from '@/api/xg/xgss/xsssfjgl/types';
import type { DormRoomVO } from '@/api/xg/xgss/dormRoom/types';
@@ -386,6 +387,9 @@ const showSearch = ref(true);
const loading = ref(false);
const expandedRowKeys = ref<string[]>([]);
// 窗口高度响应式变量
const windowHeight = ref(window.innerHeight);
// 加载状态:展开/收起/选择
const expandAllLoading = ref(false);
const collapseAllLoading = ref(false);
@@ -465,6 +469,30 @@ const studentTreeRef = ref();
const studentSearchKey = ref('');
const studentTreeData = ref<XgStudentTreeVO[]>([]);
// 表格最大高度计算
const tableMaxHeight = computed(() => {
// 根据不同屏幕尺寸动态调整预留空间
let reservedHeight = 320; // 基础预留高度(考虑到搜索区域、操作按钮、统计信息等内容)
if (windowHeight.value < 768) {
// 小屏幕(手机/平板)- 预留更多空间
reservedHeight = 380;
} else if (windowHeight.value < 1024) {
// 中等屏幕
reservedHeight = 350;
} else {
// 大屏幕 - 预留较少空间,充分利用屏幕
reservedHeight = 320;
}
return Math.max(400, windowHeight.value - reservedHeight);
});
// 处理窗口大小变化
const handleResize = () => {
windowHeight.value = window.innerHeight;
};
/** 通过条件过滤节点 */
const filterNode = (value: string, data: DormTreeNode) => {
if (!value) return true;
@@ -1164,6 +1192,14 @@ onMounted(() => {
currentController.abort();
currentController = null;
}
// 添加窗口大小变化监听器
window.addEventListener('resize', handleResize);
});
// 组件卸载时移除事件监听器
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
});
</script>