滚动 协作菜单显示

src/layout/NewIndex.vue

@@ -15,8 +15,12 @@
       :allSearching="allSearching"
       :highSearching="highSearching"
       :tableFileData="tableFileData"
+      :highEnd="highEnd"
+      :allEnd="allEnd"
       @changeSearch="changeSearch"
       @openMaxmin="openMaxmin"
+      @highSearch="highSearch"
+      @allSearch="allSearch"
     ></DefaultPage>
     <div class="footer"></div>
   </div>
@@ -54,6 +58,8 @@ const allDataTotal = ref(); // 全域搜索数据总数
 const allSearching = ref(false);
 const highSearching = ref(false);
 const tableFileData = ref([]);
+const highEnd = ref(true);
+const allEnd = ref(true);
 
 // 将标签信息保存到本地
 const openMaxmin = (title, path) => {
@@ -272,13 +278,13 @@ const changeSearch = (val, text) => {
     const query = {
       keyword: searchText.value,
       page: 1,
-      size: 999,
+      size: 10,
     };
     const allQuery = {
       keyword: searchText.value,
       isAsc: "asc",
       orderByColumn: "createTime",
-      pageSize: 99999,
+      pageSize: 20,
       pageNum: 1,
     };
     // 全域搜索
@@ -286,6 +292,9 @@ const changeSearch = (val, text) => {
       allData.value = res2.rows;
       allDataTotal.value = res2.total;
       allSearching.value = false;
+      if (allData.value.length < allDataTotal.value) {
+        allEnd.value = false;
+      }
 
       // console.log("allData", res2);
     });
@@ -296,10 +305,52 @@ const changeSearch = (val, text) => {
       // if (res.data) {
       hightData.value = res.data;
       hightDataTotal.value = res.total;
+      if (hightData.value.length < hightDataTotal.value) {
+        highEnd.value = false;
+      }
       // }
     });
   }
 };
+const highSearch = (page) => {
+  // highSearching.value = true;
+  highEnd.value = true;
+  const query = {
+    keyword: searchText.value,
+    page: page,
+    size: 10,
+  };
+  //高级搜索
+  searchAll(query).then((res) => {
+    highSearching.value = false;
+    // if (res.data) {
+    res.data.forEach((item) => hightData.value.push(item));
+    hightDataTotal.value = res.total;
+    if (hightData.value.length < hightDataTotal.value) {
+      highEnd.value = false;
+    }
+    // }
+  });
+};
+const allSearch = (page) => {
+  allEnd.value = true;
+  const query = {
+    keyword: searchText.value,
+    isAsc: "asc",
+    orderByColumn: "createTime",
+    pageSize: 20,
+    pageNum: page,
+  };
+  // 全域搜索
+  flieSearch(query).then((res2) => {
+    res2.rows.forEach((item) => allData.value.push(item));
+    allSearching.value = false;
+    allDataTotal.value = res2.total;
+    if (allData.value.length < allDataTotal.value) {
+      allEnd.value = false;
+    }
+  });
+};
 </script>
 
 <style lang="scss" scoped>

src/layout/components/DefaultPage/DefaultPage.vue

@@ -50,7 +50,11 @@
         <div v-loading="highLoading" v-if="highLoading" class="lodingBox"></div>
         <div v-else class="mainBox">
           <div class="title">共查询到{{ props.hightDataTotal }}个相关结果</div>
-          <div class="list">
+          <div
+            class="list"
+            v-infinite-scroll="setScroll"
+            infinite-scroll-distance="30"
+          >
             <div
               class="oneBox"
               v-for="item in hightData"
@@ -87,6 +91,8 @@
             ref="container"
             height="584"
             scrollbar-always-on
+            v-el-table-infinite-scroll="allScroll"
+            :infinite-scroll-distance="10"
             @row-click="toFile"
           >
             <el-table-column type="index" width="70" />
@@ -137,7 +143,7 @@
           />
           <span class="text1">上传你的文件</span>
         </el-upload>
-        <p class="text2">将文件拖到此处或 <span>选择文件</span></p>
+        <p class="text2">将文件拖到此处或点击选择文件</p>
         <div class="line"></div>
         <img
           src="@/assets/images/newIndex/scan.png"
@@ -241,7 +247,7 @@ import { listInfo, selectInfo, getFileByScanerId } from "@/api/scanner/info.js";
 import documents from "@/api/document/document";
 import uploadApi from "@/api/upload/upload";
 import bus from "@/utils/bus.js";
-
+import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
 const copyFileType = ref();
 const previewData = ref();
 const loadingPreview = ref(false);
@@ -267,9 +273,18 @@ const hightData = ref([]); // 高级搜索数据
 const allData = ref([]); // 全域搜索数据
 const canSearch = ref(true);
 const allLoading = ref(false);
-const highLoading= ref(false);
+const highLoading = ref(false);
+const highPage = ref(1);
+const allPage = ref(1);
+const highEnd = ref(false)
+const allEnd = ref(false)
 
-const emit = defineEmits(["openMaxmin", "changeSearch"]);
+const emit = defineEmits([
+  "openMaxmin",
+  "changeSearch",
+  "highSearch",
+  "allSearch",
+]);
 const props = defineProps({
   showSearch: {
     type: Boolean,
@@ -303,6 +318,14 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  highEnd: {
+    type: Boolean,
+    default: false,
+  },
+  allEnd: {
+    type: Boolean,
+    default: false,
+  },
 });
 //搜索事件
 const searchBtn = () => {
@@ -322,6 +345,8 @@ const searchBtn = () => {
     });
     return;
   }
+  highPage.value = 1;
+  allPage.value = 1;
   emit("changeSearch", true, searchText.value);
 };
 
@@ -345,6 +370,19 @@ const toFile = async (row) => {
     loadingPreview.value = false;
   }
 };
+// 高级搜索触底加载
+const setScroll = async () => {
+  if (highEnd.value) return;
+    highPage.value++;
+    emit("highSearch", highPage.value);
+};
+// all搜索触底加载
+const allScroll = async () => {
+  if (allEnd.value) 
+    return;
+    allPage.value++;
+    emit("allSearch", allPage.value);
+};
 // 设置icon
 const setImg = (type) => {
   return setIcon(type);
@@ -566,6 +604,26 @@ watch(
     deep: true,
   }
 );
+watch(
+  () => props.highEnd,
+  (newValue, oldValue) => {
+    highEnd.value = newValue;
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+watch(
+  () => props.allEnd,
+  (newValue, oldValue) => {
+    allEnd.value = newValue;
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
 onMounted(() => {
   getSpaceList();
   getDirId();
@@ -718,7 +776,7 @@ onMounted(() => {
     }
     .text1 {
       font-style: 18px;
-      color: #030102;
+      color: #2e8bf6;
       font-weight: bold;
       margin-top: 16px;
       margin-bottom: 8px;
@@ -840,7 +898,7 @@ onMounted(() => {
     border-radius: 16px 16px 16px 16px;
     background: #ffffff;
     padding: 24px;
-    .mainBox{
+    .mainBox {
       width: 100%;
       height: 100%;
     }

src/views/myjoin/MyJoin.vue

@@ -260,7 +260,7 @@ export default {
             e.preventDefault();
             e.stopPropagation();
             xz.value = e.pageX
-            yz.value = e.pageY
+            yz.value = e.pageY + 70
             if (cliCC.value === true) {
                 cliCC.value = false
             } else {