提交
This commit is contained in:
1 parent
31bedd12f4
commit
6aa2345f2e
3 files changed
+111
-3
No files matched your search
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in new issue
Block a user