跨目录移动列表修改

package-lock.json

@@ -26,6 +26,7 @@
                 "split.js": "^1.6.5",
                 "vue": "^3.3.4",
                 "vue-router": "^4.2.4",
+                "vue-virtual-scroller": "^2.0.0-beta.8",
                 "vuedraggable": "^4.1.0"
             },
             "devDependencies": {
@@ -4748,6 +4749,22 @@
                 "eslint": ">=6.0.0"
             }
         },
+        "node_modules/vue-observe-visibility": {
+            "version": "2.0.0-alpha.1",
+            "resolved": "http://47.110.251.215:9000/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz",
+            "integrity": "sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==",
+            "peerDependencies": {
+                "vue": "^3.0.0"
+            }
+        },
+        "node_modules/vue-resize": {
+            "version": "2.0.0-alpha.1",
+            "resolved": "http://47.110.251.215:9000/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
+            "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
+            "peerDependencies": {
+                "vue": "^3.0.0"
+            }
+        },
         "node_modules/vue-router": {
             "version": "4.2.4",
             "resolved": "http://47.110.251.215:9000/vue-router/-/vue-router-4.2.4.tgz",
@@ -4763,6 +4780,24 @@
                 "vue": "^3.2.0"
             }
         },
+        "node_modules/vue-virtual-scroller": {
+            "version": "2.0.0-beta.8",
+            "resolved": "http://47.110.251.215:9000/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.8.tgz",
+            "integrity": "sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==",
+            "dependencies": {
+                "mitt": "^2.1.0",
+                "vue-observe-visibility": "^2.0.0-alpha.1",
+                "vue-resize": "^2.0.0-alpha.1"
+            },
+            "peerDependencies": {
+                "vue": "^3.2.0"
+            }
+        },
+        "node_modules/vue-virtual-scroller/node_modules/mitt": {
+            "version": "2.1.0",
+            "resolved": "http://47.110.251.215:9000/mitt/-/mitt-2.1.0.tgz",
+            "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+        },
         "node_modules/vuedraggable": {
             "version": "4.1.0",
             "resolved": "http://47.110.251.215:9000/vuedraggable/-/vuedraggable-4.1.0.tgz",
@@ -7845,6 +7880,18 @@
                 "semver": "^7.3.6"
             }
         },
+        "vue-observe-visibility": {
+            "version": "2.0.0-alpha.1",
+            "resolved": "http://47.110.251.215:9000/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz",
+            "integrity": "sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==",
+            "requires": {}
+        },
+        "vue-resize": {
+            "version": "2.0.0-alpha.1",
+            "resolved": "http://47.110.251.215:9000/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
+            "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
+            "requires": {}
+        },
         "vue-router": {
             "version": "4.2.4",
             "resolved": "http://47.110.251.215:9000/vue-router/-/vue-router-4.2.4.tgz",
@@ -7853,6 +7900,23 @@
                 "@vue/devtools-api": "^6.5.0"
             }
         },
+        "vue-virtual-scroller": {
+            "version": "2.0.0-beta.8",
+            "resolved": "http://47.110.251.215:9000/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.8.tgz",
+            "integrity": "sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==",
+            "requires": {
+                "mitt": "^2.1.0",
+                "vue-observe-visibility": "^2.0.0-alpha.1",
+                "vue-resize": "^2.0.0-alpha.1"
+            },
+            "dependencies": {
+                "mitt": {
+                    "version": "2.1.0",
+                    "resolved": "http://47.110.251.215:9000/mitt/-/mitt-2.1.0.tgz",
+                    "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+                }
+            }
+        },
         "vuedraggable": {
             "version": "4.1.0",
             "resolved": "http://47.110.251.215:9000/vuedraggable/-/vuedraggable-4.1.0.tgz",

package.json

@@ -31,6 +31,8 @@
         "split.js": "^1.6.5",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4",
+        "vue-virtual-scroll-list": "^2.3.5",
+        "vue-virtual-scroller": "^2.0.0-beta.8",
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {

src/main.js

@@ -1,10 +1,10 @@
-import "./styles/app/tailwind.scss"
+import './styles/app/tailwind.scss'
 import 'animate.css'
 
 //主要
 import { createApp } from 'vue'
-import setupPinia from "./store/init"
-import router,{ setupRouter } from './router'
+import setupPinia from './store/init'
+import router, { setupRouter } from './router'
 import App from './App.vue'
 
 //饿了么UI
@@ -24,19 +24,21 @@ import 'hc-vue3-ui/style/index.scss'
 import './styles/app/main.scss'
 import './styles/app/element.scss'
 import './styles/app/theme.scss'
-
+//虚拟列表
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' // 引入它的 css
+import VueVirtualScroller from 'vue-virtual-scroller' // 引入它
 //创建实例
 async function bootstrap() {
-    const app = createApp(App);
+    const app = createApp(App)
 
     // 挂载状态管理
     app.use(setupPinia)
-
+    app.use(VueVirtualScroller) // use 虚拟列表
     // 挂载路由
-    await setupRouter(app);
+    await setupRouter(app)
 
     // 路由准备就绪后挂载APP实例
-    await router.isReady();
+    await router.isReady()
 
     // 饿了么UI框架
     app.use(ElementPlus, {
@@ -47,9 +49,9 @@ async function bootstrap() {
     app.use(HcVue3UI)
 
     // 组件注册全局
-    setupComponents(app);
+    setupComponents(app)
 
-    app.mount('#app');
+    app.mount('#app')
 }
 
-void bootstrap();
+void bootstrap()

src/views/file/records.vue

@@ -113,11 +113,28 @@
                     <div class="panel-body">
                         <el-scrollbar v-loading="treePanelLoading">
                             <el-checkbox-group v-model="checkedMoves" @change="handleCheckedMovesChange">
-                                <div v-for="item in fileDatasList" :key="item.id" class="hc-file-checkbox">
+                                <!-- <div v-for="item in fileDatasList" :key="item.id" class="hc-file-checkbox">
                                     <el-checkbox class="size-xl space mt-5 " :label="item">
                                         {{ `${item.fileNumber}--${item.name}` }}
                                     </el-checkbox>
-                                </div>
+                                </div> -->
+                                <recycle-scroller
+                                    class="virtual-list"
+                                    :buffer="1000"
+                                    :prerender="200"
+                                    style="height: 900px"
+                                    :item-size="110"
+                                    key-field="id"
+                                    :items="fileDatasList"
+                                >
+                                    <template #default="{ item, index }">
+                                        <div :key="index" class="list-item">
+                                            <el-checkbox class="size-xl space mt-5 " :label="item">
+                                                {{ `${item.fileNumber}--${item.name}` }}
+                                            </el-checkbox>
+                                        </div>
+                                    </template>
+                                </recycle-scroller>
                             </el-checkbox-group>
                         </el-scrollbar>
                     </div>
@@ -740,6 +757,7 @@ const movesModal = ref(false)
 const movesClick = async () => {
     movesModal.value = true
     treePanelLoading.value = true
+    checkedMoves.value = []
     const { error, code, data } = await archiveFileApi.getarchiveFilePage({
         ...searchForm.value,
         size:9999,

yarn.lock

@@ -1602,6 +1602,11 @@ minimatch@^5.1.0:
   dependencies:
     brace-expansion "^2.0.1"
 
+mitt@^2.1.0:
+  version "2.1.0"
+  resolved "http://47.110.251.215:9000/mitt/-/mitt-2.1.0.tgz#f740577c23176c6205b121b2973514eade1b2230"
+  integrity sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==
+
 mitt@^3.0.1:
   version "3.0.1"
   resolved "http://47.110.251.215:9000/mitt/-/mitt-3.0.1.tgz"
@@ -2412,6 +2417,16 @@ vue-eslint-parser@^9.3.0:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-observe-visibility@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "http://47.110.251.215:9000/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz#1e4eda7b12562161d58984b7e0dea676d83bdb13"
+  integrity sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==
+
+vue-resize@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "http://47.110.251.215:9000/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz#43eeb79e74febe932b9b20c5c57e0ebc14e2df3a"
+  integrity sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==
+
 vue-router@^4.2.4:
   version "4.2.4"
   resolved "http://47.110.251.215:9000/vue-router/-/vue-router-4.2.4.tgz"
@@ -2419,6 +2434,20 @@ vue-router@^4.2.4:
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
+vue-virtual-scroll-list@^2.3.5:
+  version "2.3.5"
+  resolved "http://47.110.251.215:9000/vue-virtual-scroll-list/-/vue-virtual-scroll-list-2.3.5.tgz#b589ac6245faf857c35090f854e59d653e90626c"
+  integrity sha512-YFK6u5yltqtAOfTBcij/KGAS2SoZvzbNIAf9qTULauPObEp53xj22tDuohrrM2vNkgoD5kejXICIUBt2Q4ZDqQ==
+
+vue-virtual-scroller@^2.0.0-beta.8:
+  version "2.0.0-beta.8"
+  resolved "http://47.110.251.215:9000/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.8.tgz#eeceda57e4faa5ba1763994c873923e2a956898b"
+  integrity sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==
+  dependencies:
+    mitt "^2.1.0"
+    vue-observe-visibility "^2.0.0-alpha.1"
+    vue-resize "^2.0.0-alpha.1"
+
 vue@^3.3.4:
   version "3.3.4"
   resolved "http://47.110.251.215:9000/vue/-/vue-3.3.4.tgz"