新主题，先不要发版

src/styles/page/file/records.scss

@@ -0,0 +1,22 @@
+@import "collection";
+
+.batch-set{
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    .batch-set-input{
+        width: 80px;
+    }
+}
+.set-table{
+    height: calc(100% - 42px);
+}
+
+.panel-body .el-checkbox{
+    white-space: normal;
+    height: auto;
+}
+.panel-body .el-radio-group{
+    width: auto ;
+
+}

src/views/file/records.vue

@@ -1,101 +1,80 @@
 <template>
-    <div class="hc-page-layout-box">
-        <div class="hc-layout-left-box" :style="`width:${leftWidth}px;`">
-            <div class="hc-project-box">
-                <div class="hc-project-icon-box">
-                    <HcIcon name="stack" />
-                </div>
-                <div class="ml-2 project-name-box">
-                    <span class="text-xl text-cut project-alias">{{ projectInfo.projectAlias }}</span>
-                    <div class="text-xs text-cut project-name">
-                        {{ projectInfo.name }}
+    <hc-body class="hc-file-records-page">
+        <div class="relative h-full flex">
+            <div :id="`hc_tree_card_${uuid}`">
+                <hc-new-card class="hc-page-left-tree">
+                    <template #header>
+                        <div class="hc-project-box">
+                            <div class="hc-project-icon-box">
+                                <HcIcon name="stack" />
+                            </div>
+                            <div class="ml-2 project-name">{{ projectInfo.name }}</div>
+                        </div>
+                    </template>
+                    <div v-loading="treeLoading" class="hc-tree-box" element-loading-text="加载中...">
+                        <el-scrollbar>
+                            <HcTree :project-id="projectId" :contract-id="contractId" :auto-expand-keys="treeAutoExpandKeys" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading" @menuTap="ElTreeMenuClick" />
+                        </el-scrollbar>
                     </div>
-                </div>
-            </div>
-            <div v-loading="treeLoading" class="hc-tree-box" element-loading-text="加载中...">
-                <el-scrollbar>
-                    <HcTree :project-id="projectId" :contract-id="contractId" :auto-expand-keys="treeAutoExpandKeys" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading" @menuTap="ElTreeMenuClick" />
-                </el-scrollbar>
+                </hc-new-card>
             </div>
-            <!-- 左右拖动 -->
-            <div class="horizontal-drag-line" @mousedown="onmousedown" />
-        </div>
-        <div class="hc-page-content-box">
-            <HcCard>
-                <template #header>
-                    <div class="w-64 ml-2">
-                        <el-input v-model="searchForm.queryValue" size="large" placeholder="请输入案卷题名、档号进行搜索" clearable @keyup="keyUpEvent" />
-                    </div>
-                    <div class="ml-2 mr-5">
-                        <el-button type="primary" hc-btn @click="searchClick">
-                            <HcIcon name="search-2" />
-                            <span>搜索</span>
-                        </el-button>
-                    </div>
-                    <HcTooltip keys="file_records_btn_download">
-                        <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" :loading="downloadLoading" @click="batchDownload">
-                            <HcIcon name="download" />
-                            <span>下载</span>
-                        </el-button>
-                    </HcTooltip>
-                    <HcTooltip keys="file_records_btn_edit">
-                        <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" @click="batchEditClick">
-                            <HcIcon name="edit" />
-                            <span>编辑</span>
-                        </el-button>
-                    </HcTooltip>
-                    <HcTooltip keys="file_records_btn_del">
-                        <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" @click="delModalClick">
-                            <HcIcon name="delete-bin" />
-                            <span>删除</span>
-                        </el-button>
-                    </HcTooltip>
-                </template>
-                <template #extra>
-                    <HcTooltip keys="file_records_btn_upload_scanned_files">
-                        <el-button type="primary" hc-btn @click="uploadModalClick">
-                            <HcIcon name="qr-scan" />
-                            <span>扫描上传案卷</span>
-                        </el-button>
-                    </HcTooltip>
-                    <HcTooltip keys="file_records_btn_moves">
-                        <el-button type="primary" hc-btn @click="movesClick">
-                            <HcIcon name="arrow-left-right" />
-                            <span>跨目录移动</span>
-                        </el-button>
-                    </HcTooltip>
-                </template>
-                <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableSelection">
-                    <template #table-column-header-num>
-                        <HcTooltip keys="file_records_btn_sort">
-                            <span class="text-link text-lg" @click="tableSortClick">
-                                <HcIcon name="arrow-up-down" />
-                            </span>
+            <div :id="`hc_table_card_${uuid}`" class="flex-1">
+                <hc-new-card>
+                    <template #header>
+                        <div class="w-64">
+                            <el-input v-model="searchForm.queryValue" placeholder="请输入案卷题名、档号进行搜索" clearable @keyup="keyUpEvent" />
+                        </div>
+                        <div class="ml-2 mr-5">
+                            <el-button type="primary" hc-btn @click="searchClick">搜索</el-button>
+                        </div>
+                        <HcTooltip keys="file_records_btn_download">
+                            <el-button hc-btn type="success" :disabled="tableCheckedKeys.length <= 0" :loading="downloadLoading" @click="batchDownload">下载</el-button>
+                        </HcTooltip>
+                        <HcTooltip keys="file_records_btn_edit">
+                            <el-button hc-btn type="warning" :disabled="tableCheckedKeys.length <= 0" @click="batchEditClick">编辑</el-button>
+                        </HcTooltip>
+                        <HcTooltip keys="file_records_btn_del">
+                            <el-button hc-btn type="danger" :disabled="tableCheckedKeys.length <= 0" @click="delModalClick">删除</el-button>
                         </HcTooltip>
                     </template>
-                    <template #name="{ row }">
-                        <span class="text-link" @click="tableRowName(row)">{{ row?.name }}</span>
-                    </template>
-                    <template #secretLevel="{ row }">
-                        {{ row.secretLevelValue }}
-                    </template>
-                    <template #storageTime="{ row }">
-                        {{ row.storageTimeValue }}
+                    <template #extra>
+                        <HcTooltip keys="file_records_btn_upload_scanned_files">
+                            <el-button type="primary" hc-btn @click="uploadModalClick">扫描上传案卷</el-button>
+                        </HcTooltip>
+                        <HcTooltip keys="file_records_btn_moves">
+                            <el-button type="primary" hc-btn @click="movesClick">跨目录移动</el-button>
+                        </HcTooltip>
                     </template>
-                    <template #dates="{ row }">
-                        <div v-if="row?.endDate !== '' || row?.startDate !== ''" class="content">
-                            {{ `${splitDate(row?.startDate)}~${splitDate(row?.endDate)}` }}
-                        </div>
-                        <div v-else class="content" />
+                    <HcTable
+                        ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading"
+                        is-new :index-style="{ width: 70 }" is-check :check-style="{ width: 29 }"
+                        @selection-change="tableSelection"
+                    >
+                        <template #table-column-header-num>
+                            <HcTooltip keys="file_records_btn_sort">
+                                <span class="text-link text-lg" @click="tableSortClick">
+                                    <HcIcon name="arrow-up-down" />
+                                </span>
+                            </HcTooltip>
+                        </template>
+                        <template #name="{ row }">
+                            <span class="text-link" @click="tableRowName(row)">{{ row?.name }}</span>
+                        </template>
+                        <template #secretLevel="{ row }">{{ row.secretLevelValue }}</template>
+                        <template #storageTime="{ row }">{{ row.storageTimeValue }}</template>
+                        <template #dates="{ row }">
+                            <div v-if="row?.endDate !== '' || row?.startDate !== ''" class="content">
+                                {{ `${splitDate(row?.startDate)}~${splitDate(row?.endDate)}` }}
+                            </div>
+                            <div v-else class="content" />
+                        </template>
+                    </HcTable>
+                    <template #action>
+                        <HcPages :pages="searchForm" :sizes="[10, 20, 30, 40, 50]" @change="pageChange" />
                     </template>
-                </HcTable>
-                <template #action>
-                    <HcPages :pages="searchForm" :sizes="[10, 20, 30, 40, 50]" @change="pageChange" />
-                </template>
-            </HcCard>
+                </hc-new-card>
+            </div>
         </div>
-
-
         <!-- 跨目录移动 -->
         <HcDialog :show="movesModal" title="跨目录移动" widths="990px" is-table :loading="movesModalLoading" @close="movesModalClose" @save="movesModalSave">
             <div class="hc-moves-transfer-box">
@@ -306,7 +285,7 @@
             @success="HcUploadFileSuccess"
             @finish="HcUploadFileChange"
         />
-    </div>
+    </hc-body>
 </template>
 
 <script setup>
@@ -320,7 +299,7 @@ import archiveFileApi from '~api/archiveFile/archiveFileAuto.js'
 import { getStoreValue, setStoreValue } from '~src/utils/storage'
 import tasksApi from '~api/tasks/data'
 import ossApi from '~api/oss'
-import { arrKeySort, deepClone, downloadBlob, getArrValue, getObjVal } from 'js-fast-way'
+import { arrKeySort, deepClone, downloadBlob, getArrValue, getObjVal, getRandom } from 'js-fast-way'
 
 //变量
 const useAppState = useAppStore()
@@ -334,6 +313,8 @@ const userInfo = ref(useAppState.getUserInfo)
 const HcUploadFileRef = ref(null)
 const uploadsLoading = ref(false)
 
+const uuid = getRandom(4)
+
 //监听
 watch(() => [
     useAppState.getCollapse,
@@ -350,8 +331,23 @@ onMounted(() => {
     getStoragePeriod()
 
     getSecurityLevel()
+
+    setSplitRef()
 })
 
+
+//初始化设置拖动分割线
+const setSplitRef = () => {
+    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
+    nextTick(() => {
+        window.$split(['#hc_tree_card_' + uuid, '#hc_table_card_' + uuid], {
+            sizes: [20, 80],
+            snapOffset: 0,
+            minSize: [50, 500],
+        })
+    })
+}
+
 //上传配置
 const UploadFileOptions = {
     headers: getTokenHeader(),
@@ -386,7 +382,7 @@ const newHcUploadFileSuccess = (res, row) => {
     nextTick(()=>{
         HcUploadFileRef?.value.setModalShow(false)
     })
-  
+
 
 
 }
@@ -488,13 +484,13 @@ const tableColumn = ref([])
 //设置表头
 const setTableColumns = () => {
     tableColumn.value = [
-        { key:'fileNumber', name: '档号', width: 110 },
+        { key:'fileNumber', name: '档号', width: 160, align: 'center' },
         { key:'name', name: '案卷题名' },
-        { key:'secretLevel', name: '密级', width: 100 },
-        { key:'storageTime', name: '保管期限', width: 100 },
-        { key:'pageN', name: '页数', width: 100 },
-        { key:'unit', name: '立卷单位', width: 140 },
-        { key:'dates', name: '起止日期', width: 140, autoWidth: true },
+        { key:'secretLevel', name: '密级', width: 80, align: 'center' },
+        { key:'storageTime', name: '保管期限', width: 80, align: 'center' },
+        { key:'pageN', name: '页数', width: 80, align: 'center' },
+        { key:'unit', name: '立卷单位', width: 150, align: 'center' },
+        { key:'dates', name: '起止日期', width: 190, align: 'center' },
     ]
 }
 const tableData = ref([])
@@ -1172,7 +1168,7 @@ const batchUploadSave = async () => {
                     element.endDate = element.dates[1]
                 }
 
-               
+
                 if (tableUploadType.value === 'add') {
                      element.autoFileSort = index + 1
                 }
@@ -1462,30 +1458,6 @@ const onmousedown = () => {
 }
 </script>
 
-<style lang="scss" scoped>
-@import '~style/file/scoped/collection.scss';
-
-.batch-set{
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-    .batch-set-input{
-        width: 80px;
-    }
-}
-.set-table{
-    height: calc(100% - 42px);
-}
-</style>
-
 <style lang="scss">
-@import '~style/file/collection.scss';
-.panel-body .el-checkbox{
-    white-space: normal;
-    height: auto;
-}
-.panel-body .el-radio-group{
-    width: auto ;
-    
-}
+@import '~style/file/records.scss';
 </style>