侧边栏优化

src/MAR/archivesMag/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="'click'" :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="'click'" :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 }}{{
@@ -51,11 +52,13 @@
           </div>
         </template>
       </a-tree>
+      </div>
     </div>
     <!-- 右侧内容 -->
     <div class="list-content">
       <listTemp @handleData="handleData" ref="list" keyRouteName="title" :param="param" tableName="coursewaretTable"
-        :searchType="searchType" :detailPage="{ name: 'archivesDetail', idname: 'sat_coursewareid' }">
+        :searchType="searchType" :detailPage="{ name: 'archivesDetail', idname: 'sat_coursewareid' }"
+        :scrollY="tableScrollY">
         <template #operation>
           <Add v-if="utils.hasPermission('insert')" ref="addRef" @back="delRow" :disabled="false"
             :selectedClass="selectedClassNode"></Add>
@@ -76,7 +79,7 @@
 </template>
 <script setup>
 import listTemp from '@/components/listTemplate/index.vue';
-import { ref, onMounted, nextTick, provide } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick, provide } from 'vue'
 import { useRouter, useRoute } from "vue-router";
 import Api from '@/api/api'
 import utils from '@/utils/utils'
@@ -93,6 +96,13 @@ const addClassRef = ref()
 const editClassRef = ref()
 const addRef = ref(null)
 
+// 表格滚动高度
+const tableScrollY = ref(0)
+const calcTableScrollY = () => {
+  tableScrollY.value = window.innerHeight - 366
+}
+const onResize = () => calcTableScrollY()
+
 // 分类相关变量
 let classList = ref([])
 let selectedClassKeys = ref([]) // 当前选中的分类节点key
@@ -809,7 +819,6 @@ const getClassList = async () => {
 
   addLevelToNodes(res.data)
   classList.value = res.data
-  searchType.value[0].dataSource = classList.value
   console.log(classList.value, '分类');
 
   // 恢复之前的展开状态
@@ -846,6 +855,12 @@ provide('classList', () => classList.value)
 
 onMounted(() => {
   getClassList()
+  calcTableScrollY()
+  window.addEventListener('resize', onResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onResize)
 })
 </script>
 <style scoped>
@@ -853,7 +868,7 @@ onMounted(() => {
 .archives-mag-container {
   display: flex;
   gap: 10px;
-  min-height: calc(100vh - 146px);
+  height: calc(100vh - 100px);
 }
 
 /* 左侧分类树 */
@@ -863,6 +878,9 @@ onMounted(() => {
   padding: 10px;
   border-radius: 4px;
   flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 /* 侧边栏头部 */
@@ -873,6 +891,7 @@ onMounted(() => {
   margin-bottom: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid #f0f0f0;
+  flex-shrink: 0;
 }
 
 .sidebar-header span {
@@ -888,6 +907,14 @@ onMounted(() => {
 .list-content {
   flex: 1;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.tree-scroll-wrapper {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden auto;
 }
 
 /* 树形组件选中样式 */
@@ -918,6 +945,8 @@ onMounted(() => {
 .node-operations {
   display: flex;
   gap: 4px;
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 /* 操作按钮样式 */

src/MAR/assetsStore/index.vue

@@ -866,7 +866,7 @@ onBeforeUnmount(() => {
 .tree-scroll-wrapper {
   flex: 1;
   min-height: 0;
-  overflow-y: auto;
+  overflow: hidden auto;
 }
 
 /* 树形组件选中样式 */

src/MAR/productManage/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" :style="{ width: 240 - node.level * 21 + 'px' }">
             <!-- 每少一级别，宽度减少21px -->
@@ -49,12 +50,14 @@
           </div>
         </template>
       </a-tree>
+      </div>
     </div>
 
     <!-- 右侧内容 -->
     <div class="list-content">
       <listTemp ref="list" @handleData="handleData" keyRouteName="name" :param="param" tableName="productListTable"
-        :searchType="searchType" :detailPage="{ name: 'productDetail', idname: 'sa_fadid' }">
+        :searchType="searchType" :detailPage="{ name: 'productDetail', idname: 'sa_fadid' }"
+        :scrollY="tableScrollY">
         <template #operation>
           <Add ref="addRef" :selectedClass="selectedClassNode" @back="delRow" v-if="utils.hasPermission('insert')">
           </Add>
@@ -95,7 +98,7 @@
 <script setup>
 import listTemp from '@/components/listTemplate/index.vue';
 import setClass from './modules/setClass/index.vue'
-import { ref, onMounted, nextTick, provide, reactive } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick, provide, reactive } from 'vue'
 import { useRouter } from "vue-router";
 import Api from '@/api/api'
 import utils from '@/utils/utils'
@@ -112,6 +115,13 @@ const addClassRef = ref()
 const editClassRef = ref()
 const addRef = ref(null) // Add组件引用
 
+// 表格滚动高度
+const tableScrollY = ref(0)
+const calcTableScrollY = () => {
+  tableScrollY.value = window.innerHeight - 366
+}
+const onResize = () => calcTableScrollY()
+
 // 操作函数
 const handleCreate = (node, e) => {
   // 防止事件冒泡，避免触发Tree的select事件
@@ -464,8 +474,6 @@ const getClassList = async () => {
     return keys
   }
   expandedKeys.value = getAllKeys(res.data)
-
-  searchType.value[2].dataSource = classList.value
   console.log(classList.value, '分类');
 }
 
@@ -816,6 +824,12 @@ const saveClassStructure = async (data, affectedParentIds) => {
 
 onMounted(() => {
   getClassList()
+  calcTableScrollY()
+  window.addEventListener('resize', onResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onResize)
 })
 </script>
 <style scoped>
@@ -823,7 +837,7 @@ onMounted(() => {
 .product-manage-container {
   display: flex;
   gap: 10px;
-  min-height: calc(100vh - 146px);
+  height: calc(100vh - 100px);
 }
 
 .class-sidebar {
@@ -832,6 +846,9 @@ onMounted(() => {
   border-radius: 4px;
   flex-shrink: 0;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .sidebar-header {
@@ -841,6 +858,7 @@ onMounted(() => {
   margin-bottom: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid #f0f0f0;
+  flex-shrink: 0;
 }
 
 .sidebar-header span {
@@ -852,6 +870,19 @@ onMounted(() => {
   color: #1890ff;
 }
 
+.list-content {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.tree-scroll-wrapper {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden auto;
+}
+
 /* 树形组件选中样式 */
 .custom-tree :deep(.ant-tree-node-selected) {
   background-color: #e6f7ff !important;