拖动显示表格高度

src/styles/page/archives/tuning.scss

@@ -67,13 +67,16 @@
         height: 300px;
         margin-top: 24px;
         background: #f1f5f8;
+        border: 1px solid var(--el-color-primary);
+        // padding: 10px;
+        border-radius: 10px;
         .header-box {
             border-bottom: initial;
             display: flex;
             justify-content: space-between;
-            height: 60px;
+            height: 40px;
             background-color: var(--el-fill-color-lighter);
-            line-height: 60px;
+            line-height: 40px;
             padding-left: 15px;
             padding-right: 15px;
             .hc-icon-close {
@@ -81,8 +84,10 @@
             }
         }
         .hc-file-table-box {
+            padding-left: 15px;
+            padding-right: 15px;
             position: relative;
-            height: calc(100% - 55px);
+            height: calc(100% - 60px);
         }
     }
     &.file-table .hc-c-table-box {

src/styles/theme/archives/tuning.scss

@@ -26,9 +26,9 @@ html.dark{
                 border-bottom: initial;
                 display: flex;
                 justify-content: space-between;
-                height: 60px;
+                height: 50px;
                 background-color: transparent;
-                line-height: 60px;
+                line-height: 50px;
                 padding-left: 15px;
                 padding-right: 15px;
                 .hc-icon-close {
@@ -37,7 +37,7 @@ html.dark{
             }
             .hc-file-table-box {
                 position: relative;
-                height: calc(100% - 55px);
+                height: calc(100% - 60px);
                 padding: 10px;
             }
         }

src/views/archives/manage/tuning.vue

@@ -69,8 +69,8 @@
                      </el-button>
                  </HcTooltip> -->
             </template>
-            <div :class="tableFileShow ? 'file-table' : ''" class="body">
-                <div class="hc-c-table-box">
+            <div class="flex-container body">
+                <div class="hc-c-table-box" :style="{ flex: tableFileShow ? '1' : 'auto' }">
                     <HcTable
                         ref="tableRef" :check-style="{ width: 29 }" :column="tableColumn" :datas="tableData"
                         :index-style="{ width: 70 }" :is-arr-index="false" :loading="tableLoading" :ui="hoverHand ? 'hover-hand' : ''"
@@ -89,14 +89,24 @@
                         </template>
                     </HcTable>
                 </div>
-                <div v-if="tableFileShow" class="hc-f-table-box">
+                <div v-if="tableFileShow" class="hc-f-table-box" :style="{ flex: tableFileShow ? 'auto' : '0' }">
                     <div class="header-box">
                         <div class="header">卷内文件</div>
+                       
+                        <el-tooltip
+                           
+                            effect="light"
+                            content="按住鼠标拖动可改变表格高度"
+                            placement="top"
+                        >
+                            <HcIcon class="hc-icon-close text-hover" name="arrow-up-double" style="color:rgb(64, 149, 229);" @mousedown="startDrag($event)" />
+                        </el-tooltip>
                         <div>
                             <HcIcon class="hc-icon-close text-hover" name="edit" style=" color:rgb(64, 149, 229);" @click="batchEditClick(2)" />
-                            <!-- <HcIcon name="delete-bin" @click="delModalClick" class="hc-icon-close text-hover"
-                                    style="margin-left:5px;margin-right:5px;color: rgb(189, 49, 36);"/> -->
-                            <HcIcon class="hc-icon-close 'text-hover'" name="close" style=" color:rgb(64, 149, 229);" @click="closetableFile" />
+                        
+                  
+                         
+                            <HcIcon class="hc-icon-close text-hover" name="close" style=" color:rgb(64, 149, 229);" @click="closetableFile" />
                         </div>
                     </div>
                     <div class="hc-file-table-box">
@@ -299,7 +309,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from 'vue'
+import { nextTick, onMounted, ref, watch } from 'vue'
 import { useAppStore } from '~src/store'
 import HcTree from '~src/components/tree/hc-tree.vue'
 import { arrToId, deepClone, getArrValue } from 'js-fast-way'
@@ -482,6 +492,31 @@ const tableSelection = (rows) => {
 const intableSelection = (rows) => {
     intableCheckedKeys.value = rows
 }
+const isDragging = ref(false) // 添加一个标志来跟踪鼠标是否按下
+const startDrag = (event) => {
+    isDragging.value = true // 鼠标按下时设置标志为true
+    const startY = event.clientY
+    const initialHeight = document.querySelector('.hc-f-table-box').offsetHeight
+
+    document.onmousemove = (moveEvent) => {
+        console.log(isDragging.value, 'isDragging.value')
+        
+        if (isDragging.value) { // 确保只有在鼠标按下时才会改变高度
+            const moveY = moveEvent.clientY
+            const deltaY = startY - moveY // 修改这里，使用 startY 减去 moveY
+            const newHeight = Math.max(50, initialHeight + deltaY) // 最小高度设为50
+
+            document.querySelector('.hc-f-table-box').style.height = `${newHeight}px`
+        }
+    }
+
+    document.onmouseup = () => {
+   
+        document.onmousemove = null
+        document.onmouseup = null
+        isDragging.value = false // 鼠标释放时设置标志为false
+    }
+}
 //删除
 const delModalClick = () => {
 
@@ -657,10 +692,20 @@ const checkInid = ref('')
 const checkRow = ref({})
 const tableRowClick = ({ row }) => {
     tableFileShow.value = true
+
     checkRow.value = row
     checkInid.value = row.id
     setInnertableColumn()
     getintableData()
+
+     // 限制 hc-f-table-box 的初始高度不超过容器的一半
+     nextTick(()=>{
+               const containerHeight = document.querySelector('.flex-container').clientHeight
+                const maxHeight = containerHeight / 6
+                const initialHeight = Math.min(document.querySelector('.hc-f-table-box').offsetHeight, maxHeight)
+                document.querySelector('.hc-f-table-box').style.height = `${initialHeight}px`
+     })
+ 
 }
 //收起卷内文件
 const closetableFile = () => {
@@ -1134,3 +1179,31 @@ const combinationClick = async ()=>{
     height: auto;
 }
 </style>
+
+<style lang="scss" scoped>
+@import '~style/archives/tuning.scss';
+
+.flex-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.hc-c-table-box {
+    flex: 1; /* 默认占据所有空间 */
+    overflow-y: auto; /* 允许垂直滚动 */
+}
+
+.hc-f-table-box {
+    flex: 0; /* 初始时不占据空间 */
+    overflow-y: auto; /* 允许垂直滚动 */
+    transition: flex 0.3s ease; /* 添加过渡效果 */
+}
+.drag-icon {
+    cursor: ns-resize;
+    user-select: none;
+    position: absolute;
+    right: 20px;
+    top: 10px;
+}
+</style>

src/views/file/records.vue

@@ -54,7 +54,7 @@
                 <template #splitStatus="{ row, index }">
                     <span v-if="row?.splitStatus === 1"> <HcIcon name="checkbox-circle" /></span>
                     <span v-if="row?.splitStatus === 2"> <HcIcon name="loader" /></span>
-                    <span v-else> -</span>
+                    <span v-if="row?.splitStatus !== 2 && row?.splitStatus !== 1"> -</span>
                 </template>
                 <template #name="{ row }">
                     <span class="text-link" @click="tableRowName(row)">{{ row?.name }}</span>