新主题，先不要发版

src/styles/page/file/collection.scss

@@ -1,10 +1,32 @@
-.flex-center{
+.flex-center {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     flex-direction: column;
 }
+.hc-file-collection-page {
+    .hc-project-box {
+        position: relative;
+        display: flex;
+        align-items: flex-start;
+        .hc-project-icon-box {
+            font-size: 28px;
+            color: var(--el-color-primary);
+        }
+        .project-name {
+            flex: auto;
+            position: relative;
+            overflow: hidden;
+            font-size: 15px;
+            color: var(--el-color-primary);
+        }
+    }
+    .hc-tree-box {
+        position: relative;
+        height: 100%;
+    }
+}
 
 .hc-moves-transfer-box {
     position: relative;

src/views/file/collection.vue

@@ -1,16 +1,117 @@
 <template>
     <hc-body class="hc-file-collection-page">
+        <div class="relative h-full flex">
+            <div :id="`hc_tree_card_${uuid}`">
+                <hc-new-card>
+                    <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
+                                ref="treeRef"
+                                :project-id="projectId"
+                                :contract-id="contractId"
+                                :auto-expand-keys="treeAutoExpandKeys"
+                                :menus="ElTreeMenu"
+                                @nodeTap="projectTreeClick"
+                                @nodeLoading="treeNodeLoading"
+                                @menuTap="ElTreeMenuClick"
+                            />
+                        </el-scrollbar>
+                    </div>
+                </hc-new-card>
+            </div>
+            <div :id="`hc_table_card_${uuid}`" class="flex-1">
+                <hc-new-card>
+                    <template #header>
+                        <HcTooltip keys="file_collection_btn_upload_scanned_files">
+                            <el-button type="primary" hc-btn @click="uploadModalClick">上传扫描文件</el-button>
+                        </HcTooltip>
+                        <HcTooltip keys="file_collection_btn_sorting">
+                            <el-button type="success" hc-btn @click="sortingClick">分盒整理</el-button>
+                        </HcTooltip>
+                        <HcTooltip keys="file_collection_btn_download">
+                            <el-button hc-btn :disabled="tableCheckedKeys.length <= 0">下载</el-button>
+                        </HcTooltip>
+                        <HcTooltip keys="file_collection_btn_certified">
+                            <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" @click="certificationModalClick">认证</el-button>
+                        </HcTooltip>
+                        <HcTooltip keys="file_collection_btn_report">
+                            <el-button hc-btn type="warning" :disabled="tableCheckedKeys.length <= 0" @click="reportModalClick">上报</el-button>
+                        </HcTooltip>
+                        <HcTooltip keys="file_collection_btn_edit">
+                            <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" @click="batchEditClick">编辑</el-button>
+                        </HcTooltip>
+                        <HcTooltip keys="file_collection_btn_repeal">
+                            <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" @click="repealModalClick">废除</el-button>
+                        </HcTooltip>
+                        <HcTooltip keys="file_collection_btn_del">
+                            <el-button hc-btn type="danger" :disabled="tableCheckedKeys.length <= 0" @click="delModalClick">删除</el-button>
+                        </HcTooltip>
+                    </template>
+                    <template #extra>
+                        <HcTooltip keys="file_collection_btn_moves">
+                            <el-button hc-btn color="#626aef" @click="movesClick">跨目录移动</el-button>
+                        </HcTooltip>
+                    </template>
+                    <template #search>
+                        <div class="w-40">
+                            <el-select v-model="searchForm.isApprovalValue" placeholder="审批状态" clearable>
+                                <el-option v-for="item in approvalStatus" :key="item.value" :label="item.label" :value="item.value" />
+                            </el-select>
+                        </div>
+                        <div class="w-40 ml-2">
+                            <el-select v-model="searchForm.isCertificationValue" placeholder="认证状态" clearable>
+                                <el-option v-for="item in certifiedStatus" :key="item.value" :label="item.label" :value="item.value" />
+                            </el-select>
+                        </div>
+                        <div class="w-64 ml-2">
+                            <el-input v-model="searchForm.queryValue" placeholder="请输入名称关键词检索" clearable @keyup="keyUpEvent" />
+                        </div>
+                        <div class="ml-2">
+                            <el-button type="primary" @click="searchClick">搜索</el-button>
+                        </div>
+                    </template>
+                    <HcTable
+                        ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading"
+                        is-new :index-style="{ width: 80 }" is-check :check-style="{ width: 29 }"
+                        @selection-change="tableSelection"
+                    >
+                        <template #table-column-header-num>
+                            <HcTooltip keys="file_collection_btn_sort">
+                                <span class="text-link text-lg" @click="tableSortClick">
+                                    <HcIcon name="arrow-up-down" />
+                                </span>
+                            </HcTooltip>
+                        </template>
+                        <template #fileName="{ row }">
+                            <span class="text-link" @click="tableRowName(row)">{{ row?.fileName }}</span>
+                        </template>
+                        <template #sourceType="{ row }">
+                            <span>{{ row?.sourceType === 1 ? '原生' : '数字化' }}</span>
+                        </template>
+                    </HcTable>
+                    <template #action>
+                        <HcPages :pages="searchForm" @change="pageChange" />
+                    </template>
+                </hc-new-card>
+            </div>
+        </div>
         <!-- 预组卷整理 -->
-        <HcDialog :show="sortingModal" title="预组卷整理" widths="850px" is-table is-row-footer @close="sortingModalClose">
+        <hc-new-dialog v-model="sortingModal" title="预组卷整理" widths="850px" is-table is-row-footer @close="sortingModalClose">
             <div class="hc-sorting-modal-collapse">
                 <el-collapse v-model="sortingActiveKey">
                     <template v-for="(item, index) in sortingItemData" :key="index">
                         <el-collapse-item :id="`item-${index}`" :name="`item-${index}`" disabled>
                             <template #title>
                                 <div class="hc-collapse-item-header">
-                                    <div class="item-index">
-                                        盒{{ index + 1 }}
-                                    </div>
+                                    <div class="item-index">盒{{ index + 1 }}</div>
                                     <el-divider direction="vertical" />
                                     <div class="item-input">
                                         <el-input
@@ -23,18 +124,15 @@
                                     </div>
                                     <el-divider direction="vertical" />
                                     <div class="item-action">
-                                        <el-button type="primary" @click="sortingSelectFile(item, index)">
-                                            选择文件
-                                        </el-button>
-                                        <el-button type="danger" @click="sortingDelData(item, index)">
-                                            删除
-                                        </el-button>
+                                        <el-button type="primary" @click="sortingSelectFile(item, index)">选择文件</el-button>
+                                        <el-button type="danger" @click="sortingDelData(item, index)">删除</el-button>
                                     </div>
                                 </div>
                             </template>
                             <HcTable
-                                ref="sorTableRef" :column="sortingTableColumn" :datas="item.list" :loading="sortingTableLoading" is-check @selection-change="rows => sortingTableSelection(rows, item.list, index)"
-                                @single-select="singleCheck"
+                                ref="sorTableRef" :column="sortingTableColumn" :datas="item.list" :loading="sortingTableLoading"
+                                is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
+                                @selection-change="rows => sortingTableSelection(rows, item.list, index)" @single-select="singleCheck"
                             >
                                 <template #name="{ row }">
                                     <span class="text-link">{{ row?.fileName }}</span>
@@ -60,10 +158,10 @@
                     <span>确认</span>
                 </el-button>
             </template>
-        </HcDialog>
+        </hc-new-dialog>
 
         <!-- 预组卷整理 无数据 -->
-        <HcDialog :show="sortingNoneModal" title="预组卷整理" widths="850px" is-table is-row-footer @close="sortingNoneModalClose">
+        <hc-new-dialog v-model="sortingNoneModal" title="预组卷整理" widths="850px" is-table is-row-footer @close="sortingNoneModalClose">
             <div class="flex-center">
                 <i class="el-icon" data-v-029747aa="" style="font-size: 200px;color:#81b337;cursor: pointer;" @click="toSortingModal">
                     <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa="">
@@ -72,21 +170,17 @@
                 </i>
                 <span>添加分盒</span>
             </div>
-        </HcDialog>
+        </hc-new-dialog>
 
         <!-- 跨目录移动 -->
-        <HcDialog :show="movesModal" title="跨目录移动" widths="990px" is-table :loading="movesModalLoading" @close="movesModalClose" @save="movesModalSave">
+        <hc-new-dialog v-model="movesModal" title="跨目录移动" widths="990px" is-table :loading="movesModalLoading" @close="movesModalClose" @save="movesModalSave">
             <div class="hc-moves-transfer-box">
                 <div class="hc-moves-transfer-panel">
                     <div class="panel-header">
                         <div class="panel-header-label">
-                            <el-checkbox v-model="movesCheckAll" class="size-xl space" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
-                                选择需要迁移的文件
-                            </el-checkbox>
-                        </div>
-                        <div class="panel-header-extra">
-                            {{ checkedMoves.length }}/{{ fileDatasList.length }}
+                            <el-checkbox v-model="movesCheckAll" class="size-xl space" :indeterminate="isIndeterminate" @change="handleCheckAllChange">选择需要迁移的文件</el-checkbox>
                         </div>
+                        <div class="panel-header-extra">{{ checkedMoves.length }}/{{ fileDatasList.length }}</div>
                     </div>
                     <div class="panel-body">
                         <el-scrollbar v-loading="fileDatasListLoading">
@@ -107,9 +201,7 @@
                                 >
                                     <template #default="{ item, index }">
                                         <div :key="index">
-                                            <el-checkbox class="size-xl space mt-5 " :label="item">
-                                                {{ item.fileName }}
-                                            </el-checkbox>
+                                            <el-checkbox class="size-xl space mt-5 " :label="item">{{ item.fileName }}</el-checkbox>
                                         </div>
                                     </template>
                                 </recycle-scroller>
@@ -121,9 +213,7 @@
                     <HcIcon type="primary" name="arrow-right-double" style="font-size: 22px;" />
                 </div>
                 <div class="hc-moves-transfer-panel">
-                    <div class="panel-header">
-                        选择移动目录
-                    </div>
+                    <div class="panel-header">选择移动目录</div>
                     <div v-loading="treePanelLoading" class="panel-body">
                         <el-scrollbar>
                             <HcTree id-prefix="hc-tree-moves-" :project-id="projectId" :contract-id="contractId" is-radio :show-radio-fun="showRadioFun" :is-show-menu="false" @radioChange="radioChange" @nodeLoading="panelTreeLoading" />
@@ -131,15 +221,15 @@
                     </div>
                 </div>
             </div>
-        </HcDialog>
+        </hc-new-dialog>
 
         <!-- 调整排序 -->
-        <HcDialog :show="sortModal" title="调整排序" widths="80vw" is-table is-row-footer @close="sortModalClose">
+        <hc-new-dialog v-model="sortModal" title="调整排序" widths="80vw" is-table is-row-footer @close="sortModalClose">
             <el-alert title="可拖动排序，也可在后面点击图标，切换排序" type="error" :closable="false" />
             <div class="hc-table-h">
                 <HcTable
-                    ui="hc-table-row-drop" is-row-drop quick-sort
-                    :column="sortTableColumn" :datas="sortTableData" :loading="sortTableLoading"
+                    ui="hc-table-row-drop" :column="sortTableColumn" :datas="sortTableData" :loading="sortTableLoading"
+                    is-row-drop quick-sort is-new :index-style="{ width: 80 }"
                     @row-drop="sortTableRowDrop" @row-sort="sortTableRowDrop"
                 >
                     <template #key2="{ row }">
@@ -168,11 +258,14 @@
             <template #rightRowFooter>
                 <HcPages :pages="sortSearchForm" :sizes="[10, 20, 50, 100, 200, 300, 400, 500, 600]" @change="sortPageChange" />
             </template>
-        </HcDialog>
+        </hc-new-dialog>
 
         <!-- 新增编辑文件 -->
-        <HcDialog :show="showUploadModal" title="上传工程文件" widths="90vw" is-table @close="uploadModalClose">
-            <HcTable ui="hc-form-table" is-sort :column="tableUploadColumn" :datas="tableUploadData" :loading="uploadSaveLoading" @row-sort="tableUploadRowSort">
+        <hc-new-dialog v-model="showUploadModal" title="上传工程文件" widths="90vw" is-table @close="uploadModalClose">
+            <HcTable
+                ui="hc-form-table" :column="tableUploadColumn" :datas="tableUploadData" :loading="uploadSaveLoading"
+                is-sort is-new :index-style="{ width: 80 }" @row-sort="tableUploadRowSort"
+            >
                 <template #fileNumber="{ row }">
                     <!-- <el-input v-model="row.fileNumber" :class="row['isFileNumber'] ? 'is-error' : ''" @input="tableIsInput($event, row, 'isFileNumber')"/> -->
                     <el-input v-model="row.fileNumber" />
@@ -225,13 +318,9 @@
                             <el-button :loading="row['newBtnLoading']" plain size="small" type="primary">替换</el-button>
                     </HcFileUpload1> -->
                     <HcUploadFile v-if="tableUploadType == 'edit'" ref="HcUploadFileRef" :options="UploadFileOptions" style="display:inline-block" @progress="HcUploadFileProgress" @success="newHcUploadFileSuccess($event, row)">
-                        <el-button :loading="row.newBtnLoading" plain size="small" type="primary">
-                            替换
-                        </el-button>
+                        <el-button :loading="row.newBtnLoading" plain size="small" type="primary">替换</el-button>
                     </HcUploadFile>
-                    <el-button type="danger" plain size="small" :loading="row.delBtnLoading" class="ml-2" @click="delUploadData(row, index)">
-                        删除
-                    </el-button>
+                    <el-button type="danger" plain size="small" :loading="row.delBtnLoading" class="ml-2" @click="delUploadData(row, index)">删除</el-button>
                 </template>
             </HcTable>
             <template #footer>
@@ -254,17 +343,19 @@
                     </div>
                 </div>
             </template>
-        </HcDialog>
+        </hc-new-dialog>
 
         <!-- 批量认证 -->
-        <el-dialog v-model="showCertificationModal" title="批量认证" width="80vw" class="hc-modal-border hc-modal-table">
+        <hc-new-dialog v-model="showCertificationModal" title="批量认证" widths="80vw" is-table>
             <div class="hc-card-body-flex">
                 <div class="flex-table">
-                    <HcTable ui="hc-form-table" :column="CertColumns" :datas="CertData" @row-click="CertRowClick">
+                    <HcTable
+                        ui="hc-form-table" :column="CertColumns" :datas="CertData"
+                        is-new :index-style="{ width: 80 }"
+                        @row-click="CertRowClick"
+                    >
                         <template #action="{ row, index }">
-                            <el-button type="primary" plain size="small" @click.stop="CertRowClick2(row)">
-                                预览
-                            </el-button>
+                            <el-button type="primary" plain size="small" @click.stop="CertRowClick2(row)">预览</el-button>
                         </template>
                     </HcTable>
                 </div>
@@ -274,9 +365,7 @@
                 <div v-else class="flex-iframe hc-no-table-form">
                     <div class="table-form-no">
                         <img :src="notableform" alt="">
-                        <div class="desc">
-                            暂无 PDF 数据
-                        </div>
+                        <div class="desc">暂无 PDF 数据</div>
                     </div>
                 </div>
             </div>
@@ -292,7 +381,7 @@
                     </el-button>
                 </div>
             </template>
-        </el-dialog>
+        </hc-new-dialog>
 
         <HcUploadFile ref="HcUploadFileRef" :options="UploadFileOptions" @progress="HcUploadFileProgress" @success="HcUploadFileSuccess" @finish="HcUploadFileFinish" />
 
@@ -312,7 +401,7 @@ import { rowsToId } from '~uti/tools'
 import { delMessageV2 } from '~com/message/index.js'
 import archiveFileApi from '~api/archiveFile/archiveFile'
 import tasksFlowApi from '~api/tasks/flow'
-import { arrKeySort, arrToId, deepClone, getArrValue, getObjVal } from 'js-fast-way'
+import { arrKeySort, arrToId, deepClone, getArrValue, getObjVal, getRandom } from 'js-fast-way'
 import { getTokenHeader } from '~src/api/request/header'
 import tasksApi from '~api/tasks/data'
 import ossApi from '~api/oss'
@@ -331,6 +420,8 @@ const uploadsLoading = ref(false)
 
 const treeRef = ref(null)
 
+const uuid = getRandom(4)
+
 //监听
 watch(() => [
     useAppState.getCollapse,
@@ -342,7 +433,21 @@ watch(() => [
 onMounted(() => {
     treeLoading.value = true
     setTableColumns()
+    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 ElTreeMenu = ref([
     { icon: 'add-circle', label: '新增', key: 'add' },
@@ -405,9 +510,6 @@ const newHcUploadFileSuccess = (res, row) => {
     nextTick(()=>{
         HcUploadFileRef?.value.setModalShow(false)
     })
-
-
-
 }
 
 // 文件全部上传成功
@@ -593,7 +695,6 @@ const sortingClick = async () => {
                 sortingNoneModal.value = true
             }
         }
-
     } else {
         window?.$message?.warning('请先选择一个子节点')
     }
@@ -1531,23 +1632,6 @@ const reportModalClick = () => {
 const reportFinish = () => {
     searchClick()
 }
-
-
-//左右拖动，改变树形结构宽度
-const leftWidth = ref(382)
-const onmousedown = () => {
-    const leftNum = isCollapse.value ? 142 : 272
-    document.onmousemove = (ve) => {
-        let diffVal = ve.clientX - leftNum
-        if (diffVal >= 310 && diffVal <= 900) {
-            leftWidth.value = diffVal
-        }
-    }
-    document.onmouseup = () => {
-        document.onmousemove = null
-        document.onmouseup = null
-    }
-}
 </script>
 
 <style lang="scss">