折叠 宫格 触底加载

src/views/department/MyFile.vue

@@ -245,7 +245,7 @@
 
                                 </el-table>
                                 <PlaceGridFolder v-else @folderClick="folderClick" :folderList="folderList" :restName="restName"
-                                    :collectFolder="collectFolder" @folderRClick="folderRClick" :getAllTop="getAllTop" @folderBack="folderBack"  :thisFolder="thisFolder" :impDirId="impDirId">
+                                    :collectFolder="collectFolder" @setScroll="setScroll" @folderRClick="folderRClick" :getAllTop="getAllTop" @folderBack="folderBack"  :thisFolder="thisFolder" :impDirId="impDirId">
                                 </PlaceGridFolder>
                             </el-collapse-item>
                         </el-collapse>
@@ -312,8 +312,8 @@
                                         </template>
                                     </el-table-column>
                                 </el-table>
-                                <PalaceGridFile v-else @showFile="showFile" :getAllTop="getAllTop" @navBack="navBack"
-                                    @lastBB="lastBB" @handleRowClick="handleRowClick" @onlineCase="onlineCase" @shareBack="shareBack"  :thisFolder="thisFolder" :fileList="fileList"></PalaceGridFile>
+                                <PalaceGridFile v-else :fileHeight="fileHeight" @showFile="showFile" :getAllTop="getAllTop" @navBack="navBack"
+                                    @lastBB="lastBB" @setScroll="setScroll" @handleRowClick="handleRowClick" @onlineCase="onlineCase" @shareBack="shareBack"  :thisFolder="thisFolder" :fileList="fileList"></PalaceGridFile>
                             </el-collapse-item>
                         </el-collapse>
                         <div :class="{'setCli':!noMenuItem}" v-if="cliCC" :style="{ left: xz + 'px', top: yz -100 + 'px' }">
@@ -471,8 +471,10 @@ import CreateFloder from './modalComponebts/CreateFloder.vue'
 import FileCollect from './modalComponebts/FileCollect.vue'
 import FolderReName from './modalComponebts/FolderReName.vue'
 import SpaceBig from './modalComponebts/SpaceBig.vue'
-import PlaceGridFolder from './components/PlaceGridFolder.vue'
-import PalaceGridFile from './components/PalaceGridFile.vue'
+// import PlaceGridFolder from './components/PlaceGridFolder.vue'
+// import PalaceGridFile from './components/PalaceGridFile.vue'
+import PlaceGridFolder from '@/views/myfile/components/PlaceGridFolder.vue'
+import PalaceGridFile from '@/views/myfile/components/PalaceGridFile.vue'
 import ImgFile from "./jsComponents/ImgFile"
 import { Search } from '@element-plus/icons-vue'
 import blueLeft from '../../assets/images/blueLeft.png'
@@ -728,14 +730,29 @@ export default {
         const isList = ref(false); //控制显示方式
         const openScan = ref(false)//控制扫描文档显示
         const scanFileArr = ref([]) //认领的扫描文件数组
-        const changeShow = (fileGrids) => {
-        //   isList.value = !isList.value;
-        //   fileGrid.value = fileGrids
-        //   folderGrid.value = fileGrids;
+        const changeShow =async (fileGrids) => {
+        filePageNum.value = 1
         if(fileGrid.value == 1){
-            fileGrid.value = 0
+            fileGrid.value = 0 // 变宫格
+            pageSize.value = 20+pageSize.value
+            const query = `${thisFolder.value.dirId}?pageSize=${pageSize.value}&pageNum=${filePageNum.value}`
+            const res = await myfile.getById(query)
+              console.log('filessetScrollres',res);
+            if (res.code === 200) {
+                // const newarr = res.rows.concat(toRaw(fileList.value))
+                const newarr = res.rows
+                console.log('newarr',newarr);
+                fileList.value = JSON.parse(JSON.stringify(newarr))
+                if(newarr.length < tableTotal.value){
+                    //获取后的数量<total就可以再次获取
+                    setTimeout(()=>{
+                        tableBeEnd.value = false 
+                    },1000)
+                }
+            }
         }else{
             fileGrid.value = 1
+            pageSize.value = 20
         }
         sessionStorage.setItem('fileGrid',fileGrid.value)
 
@@ -1892,10 +1909,15 @@ export default {
             filePageNum.value = 1
             if(!newValue.length){
                 fileHeight.value = '75vh'
-                pageSize.value = 20
+                if(!thisFolder.value.dirId)return
+                if(fileGrid.value = 0){
+                    pageSize.value = 20
+                    }else{
+                    pageSize.value = 80
+                }
                  const query = `${thisFolder.value.dirId}?pageSize=${pageSize.value}&pageNum=${filePageNum.value}`
                  const res = await myfile.getById(query)
-                 console.log('filessetScrollres',res);
+                //  console.log('filessetScrollres',res);
                  if (res.code === 200) {
                     // const newarr = res.rows.concat(toRaw(fileList.value))
                     const newarr = res.rows
@@ -1909,11 +1931,16 @@ export default {
                     }
                 }
             }else{
-                pageSize.value = 10
+                if(fileGrid.value = 0){
+                    pageSize.value = 10
+                    }else{
+                    pageSize.value = 40
+                }
                 fileHeight.value = '38vh'
+                 if(!thisFolder.value.dirId)return
                  const query = `${thisFolder.value.dirId}?pageSize=${pageSize.value}&pageNum=${filePageNum.value}`
                  const res = await myfile.getById(query)
-                 console.log('filessetScrollres',res);
+                //  console.log('filessetScrollres',res);
                  if (res.code === 200) {
                     // const newarr = res.rows.concat(toRaw(fileList.value))
                     const newarr = res.rows

src/views/myfile/MyFile.vue

@@ -264,7 +264,7 @@
                                         </el-table-column>
                                     </el-table>
                                     <PlaceGridFolder v-else @folderClick="folderClick" :folderList="folderList" :restName="restName"
-                                        :collectFolder="collectFolder" @folderRClick="folderRClick" :getAllTop="getAllTop" @folderBack="folderBack" :thisFolder="thisFolder">
+                                        :collectFolder="collectFolder" @setScroll="setScroll" @folderRClick="folderRClick" :getAllTop="getAllTop" @folderBack="folderBack" :thisFolder="thisFolder">
                                     </PlaceGridFolder>
                                 </el-collapse-item>
                             </el-collapse>
@@ -330,8 +330,8 @@
                                             </template>
                                         </el-table-column>
                                     </el-table>
-                                    <PalaceGridFile v-else :getAllTop="getAllTop" @navBack="navBack"
-                                        @lastBB="lastBB" @handleRowClick="handleRowClick" @onlineCase="onlineCase" @shareBack="shareBack" :thisFolder="thisFolder" :fileList="fileList"></PalaceGridFile>
+                                    <PalaceGridFile v-else :fileHeight="fileHeight" :getAllTop="getAllTop" @navBack="navBack"
+                                        @lastBB="lastBB" @setScroll="setScroll" @handleRowClick="handleRowClick" @onlineCase="onlineCase" @shareBack="shareBack" :thisFolder="thisFolder" :fileList="fileList"></PalaceGridFile>
                                 </el-collapse-item>
                             </el-collapse>
                             <div class="setCli" v-if="cliCC" :style="{ left: xz + 'px', top: yz - 260 + 'px' }">
@@ -741,14 +741,29 @@ export default {
         const isList = ref(false); //控制显示方式
         const openScan = ref(false)//控制扫描文档显示
         const scanFileArr = ref([]) //认领的扫描文件数组
-        const changeShow = (fileGrids) => {
-        //   isList.value = !isList.value;
-        //   fileGrid.value = fileGrids
-        //   folderGrid.value = fileGrids;
+        const changeShow =async (fileGrids) => {
+            filePageNum.value = 1
         if(fileGrid.value == 1){
-            fileGrid.value = 0
+            fileGrid.value = 0 // 变宫格
+            pageSize.value = 20+pageSize.value
+            const query = `${thisFolder.value.dirId}?pageSize=${pageSize.value}&pageNum=${filePageNum.value}`
+            const res = await myfile.getById(query)
+              console.log('filessetScrollres',res);
+            if (res.code === 200) {
+                // const newarr = res.rows.concat(toRaw(fileList.value))
+                const newarr = res.rows
+                console.log('newarr',newarr);
+                fileList.value = JSON.parse(JSON.stringify(newarr))
+                if(newarr.length < tableTotal.value){
+                    //获取后的数量<total就可以再次获取
+                    setTimeout(()=>{
+                        tableBeEnd.value = false 
+                    },1000)
+                }
+            }
         }else{
             fileGrid.value = 1
+            pageSize.value = 20
         }
         sessionStorage.setItem('fileGrid',fileGrid.value)
 
@@ -1984,10 +1999,15 @@ export default {
             filePageNum.value = 1
             if(!newValue.length){
                 fileHeight.value = '75vh'
-                pageSize.value = 20
+                if(!thisFolder.value.dirId)return
+                if(fileGrid.value = 0){
+                    pageSize.value = 20
+                    }else{
+                    pageSize.value = 80
+                }
                  const query = `${thisFolder.value.dirId}?pageSize=${pageSize.value}&pageNum=${filePageNum.value}`
                  const res = await myfile.getById(query)
-                 console.log('filessetScrollres',res);
+                //  console.log('filessetScrollres',res);
                  if (res.code === 200) {
                     // const newarr = res.rows.concat(toRaw(fileList.value))
                     const newarr = res.rows
@@ -2001,11 +2021,16 @@ export default {
                     }
                 }
             }else{
-                pageSize.value = 10
+                if(fileGrid.value = 0){
+                    pageSize.value = 10
+                    }else{
+                    pageSize.value = 40
+                }
                 fileHeight.value = '38vh'
+                if(!thisFolder.value.dirId)return
                  const query = `${thisFolder.value.dirId}?pageSize=${pageSize.value}&pageNum=${filePageNum.value}`
                  const res = await myfile.getById(query)
-                 console.log('filessetScrollres',res);
+                //  console.log('filessetScrollres',res);
                  if (res.code === 200) {
                     // const newarr = res.rows.concat(toRaw(fileList.value))
                     const newarr = res.rows

src/views/myfile/components/PalaceGridFile.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <!-- flex盒子 -->
-        <div class="bigBox" style="height: 38vh; overflow: auto;" v-if="fileList?.length">
+        <div class="bigBox" v-infinite-scroll="setScrollFn" infinite-scroll-distance="30" style="overflow: auto;" :style="{'height':fileHeight}" v-if="fileList?.length">
             <template v-for="(item, index) in fileList" :key="index">
                 <!-- 循环盒子 -->
                 <div class="flexBox" @contextmenu="rightClick(item, $event)">
@@ -92,6 +92,10 @@ export default {
         fileList:{
             type:Array,
             require:true
+        },
+        fileHeight:{
+            type:String,
+            require:''
         }
     },
     setup(props, { emit }) {
@@ -231,6 +235,9 @@ export default {
             })
 
         }
+        const setScrollFn = ()=>{
+            emit('setScroll')
+        }
         // 筛选后缀图片
         function getImage(file) {
             if (file === '.txt') {
@@ -498,7 +505,8 @@ export default {
             fileNameChange,
             editOnline,
             goLock,
-            setImg
+            setImg,
+            setScrollFn
         }
     },
     components: {
@@ -520,6 +528,7 @@ export default {
     justify-content: flex-start;
     // align-items: center;
     flex-wrap: wrap;
+    align-content: flex-start;
 }
 
 .imgBox {

src/views/myfile/components/PlaceGridFolder.vue

@@ -2,7 +2,7 @@
     <div>
         <div>
             <!-- flex盒子 -->
-            <div class="bigBox" style="height: 37vh; overflow: auto;" v-if="folderList?.length">
+            <div class="bigBox" v-infinite-scroll="setScrollFn" infinite-scroll-distance="30" style="height: 37vh; overflow: auto;" v-if="folderList?.length">
                 <template v-for="(item, index) in folderList" :key="index">
                     <!-- 循环盒子 -->
                     <div class="flexBox" @contextmenu="rightClick(item, $event)" @click="folderClickGrid(item)">
@@ -172,6 +172,9 @@ export default {
            console.log('item', item)
             emit("folderClick", item)
         }
+        const setScrollFn = ()=>{
+            // emit('setScroll')
+        }
         onMounted(() => {
             // props.getAllTop()
             // getAllTop()
@@ -208,7 +211,8 @@ export default {
             copyNma,
             copyFir,
             folderClickGrid,
-            folderList
+            folderList,
+            setScrollFn
         }
     },
     components:{
@@ -226,6 +230,7 @@ export default {
     justify-content: flex-start;
     // align-items: center;
     flex-wrap: wrap;
+    align-content: flex-start;
     padding-top: 16px;
 }
 

src/views/publicment/MyFile.vue

@@ -243,7 +243,7 @@
 
                                 </el-table>
                                 <PlaceGridFolder v-else  @folderClick="folderClick" :folderList="folderList" :restName="restName"
-                                    :collectFolder="collectFolder" @folderRClick="folderRClick" :getAllTop="getAllTop" @folderBack="folderBack" :thisFolder="thisFolder">
+                                    :collectFolder="collectFolder"  @setScroll="setScroll" @folderRClick="folderRClick" :getAllTop="getAllTop" @folderBack="folderBack" :thisFolder="thisFolder">
                                 </PlaceGridFolder>
                             </el-collapse-item>
                     </el-collapse>
@@ -310,8 +310,8 @@
                                         </template>
                                     </el-table-column>
                                 </el-table>
-                                <PalaceGridFile v-else @showFile="showFile" :getAllTop="getAllTop" @navBack="navBack"
-                                    @lastBB="lastBB" @handleRowClick="handleRowClick" @onlineCase="onlineCase" @shareBack="shareBack" :thisFolder="thisFolder" :fileList="fileList"></PalaceGridFile>
+                                <PalaceGridFile v-else :fileHeight="fileHeight" @showFile="showFile" :getAllTop="getAllTop" @navBack="navBack"
+                                    @lastBB="lastBB" @setScroll="setScroll" @handleRowClick="handleRowClick" @onlineCase="onlineCase" @shareBack="shareBack" :thisFolder="thisFolder" :fileList="fileList"></PalaceGridFile>
                             </el-collapse-item>
                         </el-collapse>
                         <div :class="{'setCli':!noMenuItem}" v-if="cliCC" :style="{ left: xz + 'px', top: yz -100 + 'px' }">
@@ -468,8 +468,10 @@ import CreateFloder from './modalComponebts/CreateFloder.vue'
 import FileCollect from './modalComponebts/FileCollect.vue'
 import FolderReName from './modalComponebts/FolderReName.vue'
 import SpaceBig from './modalComponebts/SpaceBig.vue'
-import PlaceGridFolder from './components/PlaceGridFolder.vue'
-import PalaceGridFile from './components/PalaceGridFile.vue'
+// import PlaceGridFolder from './components/PlaceGridFolder.vue'
+// import PalaceGridFile from './components/PalaceGridFile.vue'
+import PlaceGridFolder from '@/views/myfile/components/PlaceGridFolder.vue'
+import PalaceGridFile from '@/views/myfile/components/PalaceGridFile.vue'
 import ImgFile from "./jsComponents/ImgFile"
 import { Search } from '@element-plus/icons-vue'
 import blueLeft from '../../assets/images/blueLeft.png'
@@ -737,14 +739,29 @@ export default {
         const isList = ref(false); //控制显示方式
         const openScan = ref(false)//控制扫描文档显示
         const scanFileArr = ref([]) //认领的扫描文件数组
-        const changeShow = (fileGrids) => {
-        //   isList.value = !isList.value;
-        //   fileGrid.value = fileGrids
-        //   folderGrid.value = fileGrids;
+        const changeShow =async (fileGrids) => {
+        filePageNum.value = 1
         if(fileGrid.value == 1){
-            fileGrid.value = 0
+            fileGrid.value = 0 // 变宫格
+            pageSize.value = 20+pageSize.value
+            const query = `${thisFolder.value.dirId}?pageSize=${pageSize.value}&pageNum=${filePageNum.value}`
+            const res = await myfile.getById(query)
+              console.log('filessetScrollres',res);
+            if (res.code === 200) {
+                // const newarr = res.rows.concat(toRaw(fileList.value))
+                const newarr = res.rows
+                console.log('newarr',newarr);
+                fileList.value = JSON.parse(JSON.stringify(newarr))
+                if(newarr.length < tableTotal.value){
+                    //获取后的数量<total就可以再次获取
+                    setTimeout(()=>{
+                        tableBeEnd.value = false 
+                    },1000)
+                }
+            }
         }else{
             fileGrid.value = 1
+            pageSize.value = 20
         }
         sessionStorage.setItem('fileGrid',fileGrid.value)
 
@@ -1905,10 +1922,15 @@ export default {
             filePageNum.value = 1
             if(!newValue.length){
                 fileHeight.value = '75vh'
-                pageSize.value = 20
+                if(!thisFolder.value.dirId)return
+                if(fileGrid.value = 0){
+                    pageSize.value = 20
+                    }else{
+                    pageSize.value = 80
+                }
                  const query = `${thisFolder.value.dirId}?pageSize=${pageSize.value}&pageNum=${filePageNum.value}`
                  const res = await myfile.getById(query)
-                 console.log('filessetScrollres',res);
+                //  console.log('filessetScrollres',res);
                  if (res.code === 200) {
                     // const newarr = res.rows.concat(toRaw(fileList.value))
                     const newarr = res.rows
@@ -1922,11 +1944,16 @@ export default {
                     }
                 }
             }else{
-                pageSize.value = 10
+                    if(fileGrid.value = 0){
+                    pageSize.value = 10
+                    }else{
+                    pageSize.value = 40
+                }
                 fileHeight.value = '38vh'
+                if(!thisFolder.value.dirId)return
                  const query = `${thisFolder.value.dirId}?pageSize=${pageSize.value}&pageNum=${filePageNum.value}`
                  const res = await myfile.getById(query)
-                 console.log('filessetScrollres',res);
+                //  console.log('filessetScrollres',res);
                  if (res.code === 200) {
                     // const newarr = res.rows.concat(toRaw(fileList.value))
                     const newarr = res.rows

src/views/scanner/info/index.vue

@@ -175,6 +175,7 @@ import {
   deptTreeSelect,
 } from "@/api/system/user";
 import { ElMessageBox } from 'element-plus'
+import { onMounted } from 'vue';
 const { proxy } = getCurrentInstance()
 const { sys_yes_no } = proxy.useDict('sys_yes_no')
 
@@ -250,12 +251,13 @@ function reset() {
     scannerIp: null,
     isPublic: "N",
     userId: null,
-    deptId: userDeptId.value,
+    deptId: null,
     createBy: null,
     createTime: null,
     updateBy: null,
     updateTime: null
   }
+  form.value.deptId = userDeptId.value
   proxy.resetForm('infoRef')
 }
 
@@ -300,6 +302,9 @@ function handleUpdate(row) {
 function submitForm() {
   proxy.$refs['infoRef'].validate((valid) => {
     if (valid) {
+      if(form.value.isPublic === "Y"){
+        form.value.deptId = null
+      }
       if (form.value.scannerId != null) {
         updateInfo(form.value).then((response) => {
           proxy.$modal.msgSuccess('修改成功')
@@ -307,6 +312,7 @@ function submitForm() {
           getList()
         })
       } else {
+         console.log('form.value',form.value);
             addInfo(form.value).then((response) => {
               const data = response.data
               const pass=decode(data.pass);
@@ -376,11 +382,14 @@ console.log('arr',arr);
   console.log('row',row);
 }
 const getUserInfo =async ()=>{
-const infoRes = await getUserInfoApi();
-userDeptId.value = infoRes.user.deptId
-console.log('infoRes',infoRes);
+  const infoRes = await getUserInfoApi();
+  userDeptId.value = infoRes.user.deptId
+  console.log('infoRes',infoRes);
 }
-getUserInfo()
+onMounted(()=>{
+
+  getUserInfo()
+})
 getDeptTree();
 getList()
 </script>