优化装备资源库滚动

src/MAR/assetsStore/index.vue

@@ -6,9 +6,10 @@
         <span class="title-color">素材分类</span>
         <a-button type="link" size="small" @click="openSetClass()">新建大类</a-button>
       </div>
-      <a-tree :tree-data="classList" :field-names="treeFieldNames" :selected-keys="selectedClassKeys"
-        :expanded-keys="expandedKeys" :expand-action="false" :autoExpandParent="true" @select="onClassSelect"
-        @expand="onTreeExpand" class="custom-tree" draggable @dragenter="onDragEnter" @drop="onDrop">
+      <div class="tree-scroll-wrapper">
+        <a-tree :tree-data="classList" :field-names="treeFieldNames" :selected-keys="selectedClassKeys"
+          :expanded-keys="expandedKeys" :expand-action="false" :autoExpandParent="true" @select="onClassSelect"
+          @expand="onTreeExpand" class="custom-tree" draggable @dragenter="onDragEnter" @drop="onDrop">
         <template #title="node">
           <div class="tree-node-content">
             <span class="node-title" :class="{ 'disabled-class': node.isenable === 0 }">{{ node.classname }}{{
@@ -47,12 +48,14 @@
           </div>
         </template>
       </a-tree>
+      </div>
     </div>
 
     <!-- 右侧内容 -->
     <div class="list-content">
       <listTemp ref="list" @handleData="handleData" keyRouteName="title" :param="param" tableName="signListTable"
-        :searchType="searchType" :detailPage="{ name: 'assetsStoreDetail', idname: 'sat_sharematerialid' }">
+        :searchType="searchType" :detailPage="{ name: 'assetsStoreDetail', idname: 'sat_sharematerialid' }"
+        :scrollY="tableScrollY">
         <template #operation>
           <AddData ref="addRef" :selectedClass="selectedClassNode" @back="delRow"
             v-if="utils.hasPermission('insert')" />
@@ -86,7 +89,7 @@
 </template>
 <script setup>
 import listTemp from '@/components/listTemplate/index.vue';
-import { ref, onMounted, provide, nextTick } from 'vue'
+import { ref, onMounted, onBeforeUnmount, provide, nextTick } from 'vue'
 import { useRouter } from "vue-router";
 import Api from '@/api/api'
 import utils from '@/utils/utils'
@@ -267,6 +270,14 @@ const showSetClass = ref(false)
 const setClassRef = ref()
 const addRef = ref(null) // Add组件引用
 
+// 表格滚动高度，动态计算使表体滚动而搜索区、翻页固定
+const tableScrollY = ref(0)
+const calcTableScrollY = () => {
+  // 100vh - 146(header) - search(~60) - cardTitle(~40) - cardPadding(20) - tableHeader(~40) - pagination(~50) - gap(10)
+  tableScrollY.value = window.innerHeight - 366
+}
+const onResize = () => calcTableScrollY()
+
 // 分类操作对话框
 const showCreateClassDialog = ref(false)
 const showEditClassDialog = ref(false)
@@ -447,7 +458,7 @@ const getClassList = async () => {
   }
   expandedKeys.value = getAllKeys(res.data)
 
-  searchType.value[0].dataSource = classList.value
+  // searchType.value[0].dataSource = classList.value
   console.log(classList.value, '分类');
 }
 
@@ -798,6 +809,12 @@ const saveClassStructure = async (data, affectedParentIds) => {
 
 onMounted(() => {
   getClassList()
+  calcTableScrollY()
+  window.addEventListener('resize', onResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onResize)
 })
 </script>
 <style scoped>
@@ -805,7 +822,7 @@ onMounted(() => {
 .assets-store-container {
   display: flex;
   gap: 10px;
-  min-height: calc(100vh - 146px);
+  height: calc(100vh - 100px);
 }
 
 .class-sidebar {
@@ -814,6 +831,9 @@ onMounted(() => {
   padding: 10px;
   border-radius: 4px;
   flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .sidebar-header {
@@ -823,6 +843,7 @@ onMounted(() => {
   margin-bottom: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid #f0f0f0;
+  flex-shrink: 0;
 }
 
 .sidebar-header span {
@@ -837,6 +858,15 @@ onMounted(() => {
 .list-content {
   flex: 1;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 树形滚动包装 */
+.tree-scroll-wrapper {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
 }
 
 /* 树形组件选中样式 */

src/components/listTemplate/index.vue

@@ -42,7 +42,7 @@
       </template>
       <template #extra>
       </template>
-      <a-table class="ant-table-small ant-table-red" :loading="loading" size="small" :dataSource="dataSource" :columns="columns" :pagination="{showSizeChanger:true,defaultPageSize:20,current:props.param.content.pageNumber,total:total,showTotal:total => `共 ${total} 条`}" :scroll="fullscreen?{x:'max-content',y:'86vh'}:{x:'max-content'}" :row-class-name="(_record, index) => formatter(_record, index)" @change="onChange" bordered>
+      <a-table class="ant-table-small ant-table-red" :loading="loading" size="small" :dataSource="dataSource" :columns="columns" :pagination="{showSizeChanger:true,defaultPageSize:20,current:props.param.content.pageNumber,total:total,showTotal:total => `共 ${total} 条`}" :scroll="fullscreen?{x:'max-content',y:'86vh'}:props.scrollY?{x:'max-content',y:props.scrollY}:{x:'max-content'}" :row-class-name="(_record, index) => formatter(_record, index)" @change="onChange" bordered>
         <template #headerCell="{ column }">
           <div style="width:100%;min-width:70px" v-if="column.filter == 1 || column.filter == 2">
             <a-input v-model:value="column.value" :placeholder="column.title" @change="setSearchParam(column.dataIndex,column.value)" @pressEnter="tableData" :bordered="true">
@@ -110,7 +110,8 @@
     searchType:Array,
     detailPage:Object,
     noAutoQuery:Boolean,
-    tableRowStyle:Function
+    tableRowStyle:Function,
+    scrollY: Number
   })
   const loading = ref(false)
   const columns = ref([])