|
|
@@ -81,7 +81,7 @@
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
<!-- 平铺 -->
|
|
|
- <div class="tile_box">
|
|
|
+ <div class="tile_box" @scroll="handleScrollG">
|
|
|
<div class="file_box" v-for="item in tableData" :key="item">
|
|
|
<img class="big_file_img" :src="setIcon(item.fileType)" alt="" />
|
|
|
<span class="missing">{{ item.fileName }}</span>
|
|
|
@@ -120,6 +120,7 @@ import file_zip from "@/assets/images/fileType/file_zip.png";
|
|
|
//----------------------------------------
|
|
|
const searchFor = ref(""); //搜索范围
|
|
|
const searchType = ref("all"); //搜索对象
|
|
|
+const fileTypes = ref()
|
|
|
const checkState = ref(false); //勾选框状态
|
|
|
const activeNames = ref(["folder", "file"]);
|
|
|
const isList = ref(true); //控制显示方式
|
|
|
@@ -150,29 +151,44 @@ const tableData = ref([]);
|
|
|
// 切换搜索范围
|
|
|
const changeSearchFor = async(name) => {
|
|
|
numnum = 1
|
|
|
+ numG = 1
|
|
|
const typeArr = setType(searchType.value);
|
|
|
let baseDataObj = toRaw(baseData.value);
|
|
|
- var fileTypes = ''
|
|
|
+ fileTypes.value = ''
|
|
|
if (name == 'all') {
|
|
|
- fileTypes = ''
|
|
|
+ fileTypes.value = ''
|
|
|
} else if(name == '1') {
|
|
|
- fileTypes = 1
|
|
|
+ fileTypes.value = 1
|
|
|
// tableData.value = toRaw(baseDataObj).filter(
|
|
|
// (item) => item.space.spaceType == name && typeArr.includes(item.fileType)
|
|
|
// );
|
|
|
}else if(name == '2'){
|
|
|
- fileTypes = 2
|
|
|
+ fileTypes.value = 2
|
|
|
}else if(name == '3'){
|
|
|
- fileTypes = 3
|
|
|
+ fileTypes.value = 3
|
|
|
}
|
|
|
- let res = await flieSearch({
|
|
|
- keyword:searchText.value,
|
|
|
- type:fileTypes,
|
|
|
- pageSize: 20,
|
|
|
- pageNum: 1,
|
|
|
- })
|
|
|
- console.log(res.rows,'filter');
|
|
|
+
|
|
|
+ if(isList.value){
|
|
|
+ let res = await flieSearch({
|
|
|
+ keyword:searchText.value,
|
|
|
+ type:fileTypes.value,
|
|
|
+ pageSize: 20,
|
|
|
+ pageNum: 1,
|
|
|
+ })
|
|
|
+ total.value = res.total;
|
|
|
+ tableData.value = res.rows
|
|
|
+ console.log(res,'filter',fileTypes.value);
|
|
|
+ }else{
|
|
|
+ let res = await flieSearch({
|
|
|
+ keyword:searchText.value,
|
|
|
+ type:fileTypes.value,
|
|
|
+ pageSize: 80,
|
|
|
+ pageNum: numG,
|
|
|
+ })
|
|
|
+ total.value = res.total;
|
|
|
tableData.value = res.rows
|
|
|
+ console.log(res,'filter',fileTypes.value);
|
|
|
+ }
|
|
|
};
|
|
|
// 切换搜索分类
|
|
|
const changeSearchType = (name) => {
|
|
|
@@ -341,16 +357,19 @@ function formatFileSize(fileSize) {
|
|
|
}
|
|
|
}
|
|
|
let numnum = 1
|
|
|
+let numG = 1
|
|
|
async function handleScroll(e) {
|
|
|
- // console.log(e, '出发了');
|
|
|
+ console.log(e, '出发了');
|
|
|
const tableContainer = e.target;
|
|
|
const scrollPosition = tableContainer.scrollTop + tableContainer.clientHeight;
|
|
|
const contentHeight = tableContainer.scrollHeight;
|
|
|
// console.log(scrollPosition, contentHeight, '对比');
|
|
|
if (scrollPosition + 0.40005 >= contentHeight) {
|
|
|
+ console.log('到底了');
|
|
|
numnum++
|
|
|
const query = {
|
|
|
keyword: searchText.value,
|
|
|
+ type:fileTypes.value,
|
|
|
isAsc: "asc",
|
|
|
orderByColumn: "createTime",
|
|
|
pageSize: 20,
|
|
|
@@ -360,6 +379,45 @@ async function handleScroll(e) {
|
|
|
tableData.value = [...tableData.value, ...res.rows]
|
|
|
}
|
|
|
}
|
|
|
+async function handleScrollG(e) {
|
|
|
+ if(tableData.value.length >= total.value) return
|
|
|
+ console.log(e, '出发了');
|
|
|
+ const tableContainer = e.target;
|
|
|
+ const scrollPosition = tableContainer.scrollTop + tableContainer.clientHeight;
|
|
|
+ const contentHeight = tableContainer.scrollHeight;
|
|
|
+ // console.log(scrollPosition, contentHeight, '对比');
|
|
|
+ if (scrollPosition + 0.40005 >= contentHeight) {
|
|
|
+ numG++
|
|
|
+ const query = {
|
|
|
+ keyword: searchText.value,
|
|
|
+ type:fileTypes.value,
|
|
|
+ isAsc: "asc",
|
|
|
+ orderByColumn: "createTime",
|
|
|
+ pageSize: 90,
|
|
|
+ pageNum: numG,
|
|
|
+ };
|
|
|
+ const res = await flieSearch(query);
|
|
|
+ tableData.value = [...tableData.value, ...res.rows]
|
|
|
+ }
|
|
|
+}
|
|
|
+watch(() => isList.value, (newValue, oldValue) => {
|
|
|
+ // console.log('editableTabs 发生改变了', newValue, oldValue);
|
|
|
+ numG = 1
|
|
|
+ if(!newValue){
|
|
|
+ console.log('切换到宫格了');
|
|
|
+ const query = {
|
|
|
+ keyword: searchText.value,
|
|
|
+ isAsc: "asc",
|
|
|
+ orderByColumn: "createTime",
|
|
|
+ pageSize: 90,
|
|
|
+ pageNum: numG,
|
|
|
+ };
|
|
|
+ flieSearch(query).then(res=>{
|
|
|
+
|
|
|
+ tableData.value = [ ...res.rows]
|
|
|
+ });
|
|
|
+ }
|
|
|
+});
|
|
|
onMounted(() => {
|
|
|
let antherContainer = container.value.$el.querySelector('.el-scrollbar__wrap')
|
|
|
antherContainer.addEventListener('scroll', handleScroll);
|
|
|
@@ -632,9 +690,12 @@ onMounted(() => {
|
|
|
//平铺
|
|
|
.tile_box {
|
|
|
width: 100%;
|
|
|
- height: 300px;
|
|
|
+ height: calc(98vh - 220px);
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
+ overflow-y:auto ;
|
|
|
+ align-items: flex-start;
|
|
|
+ align-content: flex-start;
|
|
|
|
|
|
.file_box {
|
|
|
width: 116px;
|
liuQiang