|
|
@ -1,7 +1,7 @@
|
|
|
|
<script lang="ts" setup>
|
|
|
|
<script lang="ts" setup>
|
|
|
|
import type Masonry from 'masonry-layout'
|
|
|
|
import type Masonry from 'masonry-layout'
|
|
|
|
import { useDialog, useMessage } from 'naive-ui'
|
|
|
|
import { useDialog, useMessage } from 'naive-ui'
|
|
|
|
import { computed, nextTick, onBeforeMount, onMounted, onUpdated, reactive, ref, unref, watch } from 'vue'
|
|
|
|
import { computed, getCurrentInstance, nextTick, onBeforeMount, onMounted, onUpdated, reactive, ref, unref, watch } from 'vue'
|
|
|
|
|
|
|
|
|
|
|
|
import { useInfiniteScroll } from '@vueuse/core'
|
|
|
|
import { useInfiniteScroll } from '@vueuse/core'
|
|
|
|
import imagesloaded from 'imagesloaded'
|
|
|
|
import imagesloaded from 'imagesloaded'
|
|
|
@ -197,6 +197,12 @@ async function featchList() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const app = getCurrentInstance()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const updateHtml = debounce(() => {
|
|
|
|
|
|
|
|
app?.appContext.app.$waterfall?.forceUpdate()
|
|
|
|
|
|
|
|
}, 1600)
|
|
|
|
|
|
|
|
|
|
|
|
async function loadMore() {
|
|
|
|
async function loadMore() {
|
|
|
|
if (loading || el.value == null)
|
|
|
|
if (loading || el.value == null)
|
|
|
|
return
|
|
|
|
return
|
|
|
@ -218,7 +224,8 @@ async function loadMore() {
|
|
|
|
else {
|
|
|
|
else {
|
|
|
|
listData.value = listData.value.concat(more)
|
|
|
|
listData.value = listData.value.concat(more)
|
|
|
|
console.log('listData.value出来了2222222222', listData.value, pagination.pageNo)
|
|
|
|
console.log('listData.value出来了2222222222', listData.value, pagination.pageNo)
|
|
|
|
waterfallRef.value?.mix()
|
|
|
|
// waterfallRef.value?.mix()
|
|
|
|
|
|
|
|
updateHtml()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// layout()
|
|
|
|
// layout()
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -296,6 +303,8 @@ function imUpdateSelectIds(x: number, y: number, w: number, h: number) {
|
|
|
|
selectedApproveItems.value.push(item)
|
|
|
|
selectedApproveItems.value.push(item)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
updateHtml()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function isSelected(pictureId: number) {
|
|
|
|
function isSelected(pictureId: number) {
|
|
|
@ -401,6 +410,7 @@ function removeListeners() {
|
|
|
|
on(el.value!, 'mousemove', moveHandler)
|
|
|
|
on(el.value!, 'mousemove', moveHandler)
|
|
|
|
on(document, 'mouseup', upHandler)
|
|
|
|
on(document, 'mouseup', upHandler)
|
|
|
|
// on(elwc.value!, 'mouseup', upHandler)
|
|
|
|
// on(elwc.value!, 'mouseup', upHandler)
|
|
|
|
|
|
|
|
updateHtml()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function afterEnter() {
|
|
|
|
function afterEnter() {
|
|
|
@ -499,7 +509,8 @@ function setBatch(value) {
|
|
|
|
batch.value = !value
|
|
|
|
batch.value = !value
|
|
|
|
else
|
|
|
|
else
|
|
|
|
batch.value = value
|
|
|
|
batch.value = value
|
|
|
|
waterfallRef.value?.resize()
|
|
|
|
// waterfallRef.value?.resize()
|
|
|
|
|
|
|
|
updateHtml()
|
|
|
|
if (value === false) {
|
|
|
|
if (value === false) {
|
|
|
|
selectIds.value = []
|
|
|
|
selectIds.value = []
|
|
|
|
selectedApproveItems.value.forEach(item => (item.checked = false))
|
|
|
|
selectedApproveItems.value.forEach(item => (item.checked = false))
|
|
|
@ -516,6 +527,10 @@ const showActions = computed(() => {
|
|
|
|
return selectedApproveItems.value.length > 0 && batch
|
|
|
|
return selectedApproveItems.value.length > 0 && batch
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
watch(() => showActions.value, () => {
|
|
|
|
|
|
|
|
updateHtml()
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
function onCheckChange(checked: any, item: any) {
|
|
|
|
function onCheckChange(checked: any, item: any) {
|
|
|
|
item.checked = checked
|
|
|
|
item.checked = checked
|
|
|
|
const index = selectedApproveItems.value.indexOf(item)
|
|
|
|
const index = selectedApproveItems.value.indexOf(item)
|
|
|
@ -779,13 +794,13 @@ watch(() => show.value, async (newVal) => {
|
|
|
|
alt="加载错误"
|
|
|
|
alt="加载错误"
|
|
|
|
@click="
|
|
|
|
@click="
|
|
|
|
($event) => {
|
|
|
|
($event) => {
|
|
|
|
previewHandler(index, $event, item.serverThumbnailUrl, item.imgUrl);
|
|
|
|
previewHandler(index, $event, item.thumburl, item.imgUrl);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
"
|
|
|
|
"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<n-image
|
|
|
|
<n-image
|
|
|
|
ref="imageRef"
|
|
|
|
ref="imageRef"
|
|
|
|
:src="item?.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl"
|
|
|
|
:src="item?.thumburl ? item.thumburl : item.imgUrl"
|
|
|
|
:preview-src="item.imgUrl"
|
|
|
|
:preview-src="item.imgUrl"
|
|
|
|
:fallback-src="bgLoadingImg"
|
|
|
|
:fallback-src="bgLoadingImg"
|
|
|
|
class="img "
|
|
|
|
class="img "
|
|
|
@ -840,13 +855,13 @@ watch(() => show.value, async (newVal) => {
|
|
|
|
alt="加载错误"
|
|
|
|
alt="加载错误"
|
|
|
|
@click="
|
|
|
|
@click="
|
|
|
|
($event) => {
|
|
|
|
($event) => {
|
|
|
|
previewHandler(index, $event, item.serverThumbnailUrl, item.imgUrl);
|
|
|
|
previewHandler(index, $event, item.thumburl, item.imgUrl);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
"
|
|
|
|
"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<n-image
|
|
|
|
<n-image
|
|
|
|
ref="imageRef"
|
|
|
|
ref="imageRef"
|
|
|
|
:src="item?.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl"
|
|
|
|
:src="item?.thumburl ? item.thumburl : item.imgUrl"
|
|
|
|
:preview-src="item.imgUrl"
|
|
|
|
:preview-src="item.imgUrl"
|
|
|
|
:fallback-src="bgLoadingImg"
|
|
|
|
:fallback-src="bgLoadingImg"
|
|
|
|
class="img "
|
|
|
|
class="img "
|
|
|
|