zlwu 1 год назад
Родитель
Сommit
6aa2345f2e

+ 37 - 1
web/src/views/xg/xgss/bzrfp/bzrfp.vue

@@ -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
web/src/views/xg/xgss/ejxyfp/ejxyfp.vue

@@ -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
web/src/views/xg/xgss/xsssfpejxy/index.vue

@@ -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>