|
|
|
@ -5,8 +5,10 @@ import { useInfiniteScroll } from '@vueuse/core'
|
|
|
|
import { debounce } from 'lodash-es'
|
|
|
|
import { debounce } from 'lodash-es'
|
|
|
|
import imagesloaded from 'imagesloaded'
|
|
|
|
import imagesloaded from 'imagesloaded'
|
|
|
|
import { useMessage } from 'naive-ui'
|
|
|
|
import { useMessage } from 'naive-ui'
|
|
|
|
|
|
|
|
import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
|
|
|
|
|
|
|
|
import { getViewportOffset, off, on } from '@/utils/domUtils'
|
|
|
|
|
|
|
|
|
|
|
|
import { timeOptions, viewOptions } from '@/config/home'
|
|
|
|
import { timeOptions, viewOptions } from '@/config/home'
|
|
|
|
import { off, on } from '@/utils/domUtils'
|
|
|
|
|
|
|
|
import { useTask } from '@/store/modules/task'
|
|
|
|
import { useTask } from '@/store/modules/task'
|
|
|
|
import { TASK_STATUS_OBJ } from '@/enums/index'
|
|
|
|
import { TASK_STATUS_OBJ } from '@/enums/index'
|
|
|
|
import { formatToDateHMS } from '@/utils/dateUtil'
|
|
|
|
import { formatToDateHMS } from '@/utils/dateUtil'
|
|
|
|
@ -43,6 +45,7 @@ const viewLabel = computed(() => {
|
|
|
|
|
|
|
|
|
|
|
|
return item?.label
|
|
|
|
return item?.label
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
const deviceHeight = ref(600)
|
|
|
|
|
|
|
|
|
|
|
|
const taskStore = useTask()
|
|
|
|
const taskStore = useTask()
|
|
|
|
const masonryRef = ref<ComponentRef>(null)
|
|
|
|
const masonryRef = ref<ComponentRef>(null)
|
|
|
|
@ -64,6 +67,14 @@ const sortBy: any = {
|
|
|
|
const batch = ref(false)
|
|
|
|
const batch = ref(false)
|
|
|
|
let _imagesload: any
|
|
|
|
let _imagesload: any
|
|
|
|
const message = useMessage()
|
|
|
|
const message = useMessage()
|
|
|
|
|
|
|
|
async function computeListHeight() {
|
|
|
|
|
|
|
|
const headEl = document.querySelector('.wrapper-content')!
|
|
|
|
|
|
|
|
const { bottomIncludeBody } = getViewportOffset(headEl)
|
|
|
|
|
|
|
|
const height = bottomIncludeBody
|
|
|
|
|
|
|
|
deviceHeight.value = height - 40 - 16 - 24
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useWindowSizeFn(computeListHeight)
|
|
|
|
|
|
|
|
|
|
|
|
const layout = debounce(() => {
|
|
|
|
const layout = debounce(() => {
|
|
|
|
if (!show.value)
|
|
|
|
if (!show.value)
|
|
|
|
@ -74,6 +85,7 @@ const layout = debounce(() => {
|
|
|
|
|
|
|
|
|
|
|
|
_masonry = new Masonry(masonryRef.value as any, {
|
|
|
|
_masonry = new Masonry(masonryRef.value as any, {
|
|
|
|
itemSelector: '.grid-item',
|
|
|
|
itemSelector: '.grid-item',
|
|
|
|
|
|
|
|
gutter: 17,
|
|
|
|
columnWidth: 214,
|
|
|
|
columnWidth: 214,
|
|
|
|
percentPosition: true,
|
|
|
|
percentPosition: true,
|
|
|
|
stagger: 10,
|
|
|
|
stagger: 10,
|
|
|
|
@ -100,15 +112,17 @@ watch(viewMode, () => {
|
|
|
|
|
|
|
|
|
|
|
|
let canloadMore = true
|
|
|
|
let canloadMore = true
|
|
|
|
|
|
|
|
|
|
|
|
useInfiniteScroll(
|
|
|
|
// useInfiniteScroll(
|
|
|
|
el as any,
|
|
|
|
// el as any,
|
|
|
|
() => {
|
|
|
|
// () => {
|
|
|
|
loadMore()
|
|
|
|
// console.log(123456)
|
|
|
|
},
|
|
|
|
// loadMore()
|
|
|
|
{ distance: 10, canLoadMore: () => canloadMore },
|
|
|
|
// },
|
|
|
|
)
|
|
|
|
// { distance: 10, canLoadMore: () => canloadMore },
|
|
|
|
|
|
|
|
// )
|
|
|
|
|
|
|
|
|
|
|
|
async function loadMore() {
|
|
|
|
async function loadMore() {
|
|
|
|
|
|
|
|
console.log('loadMore')
|
|
|
|
if (loading.value || el.value == null)
|
|
|
|
if (loading.value || el.value == null)
|
|
|
|
return
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
|
|
@ -206,9 +220,9 @@ function upHandler(event: MouseEvent) {
|
|
|
|
start = null
|
|
|
|
start = null
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const gridHeight = computed(() => {
|
|
|
|
// const gridHeight = computed(() => {
|
|
|
|
return viewMode.value !== 'masonry' ? '157px' : ''
|
|
|
|
// return viewMode.value !== 'masonry' ? '157px' : ''
|
|
|
|
})
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
|
|
function addListeners() {
|
|
|
|
function addListeners() {
|
|
|
|
selectionBox = document.querySelector('.selection-box') as HTMLDivElement
|
|
|
|
selectionBox = document.querySelector('.selection-box') as HTMLDivElement
|
|
|
|
@ -234,6 +248,7 @@ async function afterEnter() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function afterLeave() {
|
|
|
|
function afterLeave() {
|
|
|
|
|
|
|
|
reload()
|
|
|
|
removeListeners()
|
|
|
|
removeListeners()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -285,8 +300,12 @@ const showActions = computed(() => {
|
|
|
|
|
|
|
|
|
|
|
|
function setBatch(value: boolean) {
|
|
|
|
function setBatch(value: boolean) {
|
|
|
|
batch.value = value
|
|
|
|
batch.value = value
|
|
|
|
if (value === false)
|
|
|
|
if (value === false) {
|
|
|
|
selectIds.value.length = 0
|
|
|
|
selectIds.value = []
|
|
|
|
|
|
|
|
listData.value.forEach((item) => {
|
|
|
|
|
|
|
|
item.checked = false
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function reject() {
|
|
|
|
function reject() {
|
|
|
|
@ -321,6 +340,7 @@ async function refreshHandler() {
|
|
|
|
taskDetailInfo.value = await getTaskDetailInfo(taskId.value, '')
|
|
|
|
taskDetailInfo.value = await getTaskDetailInfo(taskId.value, '')
|
|
|
|
|
|
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
nextTick(() => {
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
useInfiniteScroll(
|
|
|
|
useInfiniteScroll(
|
|
|
|
el as any,
|
|
|
|
el as any,
|
|
|
|
() => {
|
|
|
|
() => {
|
|
|
|
@ -328,6 +348,7 @@ async function refreshHandler() {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{ distance: 10, canLoadMore: () => canloadMore },
|
|
|
|
{ distance: 10, canLoadMore: () => canloadMore },
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
|
|
|
}, 300)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -337,14 +358,43 @@ watch(() => taskStore.activeId, async (newValue, oldValue) => {
|
|
|
|
refreshHandler()
|
|
|
|
refreshHandler()
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const listStyle = computed(() => {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
height: `${deviceHeight.value}px`,
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
function switchBatch() {
|
|
|
|
function switchBatch() {
|
|
|
|
setBatch(!batch.value)
|
|
|
|
setBatch(!batch.value)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function reload() {
|
|
|
|
function reload() {
|
|
|
|
selectIds.value = []
|
|
|
|
selectIds.value = []
|
|
|
|
|
|
|
|
setBatch(false)
|
|
|
|
refreshHandler()
|
|
|
|
refreshHandler()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function sortHandler(orderby: 'similarityScore' | 'createdate') {
|
|
|
|
|
|
|
|
sortBy.orderName = orderby
|
|
|
|
|
|
|
|
sortBy.orderType = sortBy.orderType === 'asc' ? 'desc' : 'asc'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
refreshHandler()
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const gridHeight = computed(() => {
|
|
|
|
|
|
|
|
let height = ''
|
|
|
|
|
|
|
|
if (viewMode.value === 'masonry')
|
|
|
|
|
|
|
|
height = ''
|
|
|
|
|
|
|
|
else if (viewMode.value === 'horizontalVersion')
|
|
|
|
|
|
|
|
height = '122px'
|
|
|
|
|
|
|
|
else if (viewMode.value === 'verticalVersion')
|
|
|
|
|
|
|
|
height = '300px'
|
|
|
|
|
|
|
|
else if (viewMode.value === '3:4')
|
|
|
|
|
|
|
|
height = '240px'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return height
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
defineExpose({
|
|
|
|
defineExpose({
|
|
|
|
showModal,
|
|
|
|
showModal,
|
|
|
|
reload,
|
|
|
|
reload,
|
|
|
|
@ -364,10 +414,10 @@ defineExpose({
|
|
|
|
<div class="wrapper">
|
|
|
|
<div class="wrapper">
|
|
|
|
<div class="wrapper-m32">
|
|
|
|
<div class="wrapper-m32">
|
|
|
|
<SvgIcon name="task-batch" size="16" />
|
|
|
|
<SvgIcon name="task-batch" size="16" />
|
|
|
|
<span style="margin-left: 8px;">任务审批</span>
|
|
|
|
<span style="margin-left: 8px;color: #666;">任务审批</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="wrapper-title wrapper-m32">
|
|
|
|
<div class="wrapper-title wrapper-m32">
|
|
|
|
<span>任务ID:{{ taskDetailInfo.fromtaskname }}</span>
|
|
|
|
<span style="color: #333;">任务ID:{{ taskDetailInfo.fromtaskname }}</span>
|
|
|
|
<SvgIcon size="22" class="forward" name="arrow-left" @click="backHandler" />
|
|
|
|
<SvgIcon size="22" class="forward" name="arrow-left" @click="backHandler" />
|
|
|
|
<SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" />
|
|
|
|
<SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -422,7 +472,7 @@ defineExpose({
|
|
|
|
<div class="wrapper-content">
|
|
|
|
<div class="wrapper-content">
|
|
|
|
<div class="wrapper-content-form wrapper-m32">
|
|
|
|
<div class="wrapper-content-form wrapper-m32">
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<n-popselect v-model:value="timeRange" :options="timeOptions" trigger="click" @change="onChange">
|
|
|
|
<!-- <n-popselect v-model:value="timeRange" :options="timeOptions" trigger="click" @change="onChange">
|
|
|
|
<div class="wrapper-content-form-dropdown">
|
|
|
|
<div class="wrapper-content-form-dropdown">
|
|
|
|
<span>{{ timeLabel || '时间模式' }}</span>
|
|
|
|
<span>{{ timeLabel || '时间模式' }}</span>
|
|
|
|
<SvgIcon class="wrapper-content-form-dropdown-gap" name="arrow-botton" size="14" />
|
|
|
|
<SvgIcon class="wrapper-content-form-dropdown-gap" name="arrow-botton" size="14" />
|
|
|
|
@ -433,7 +483,22 @@ defineExpose({
|
|
|
|
<span>{{ viewLabel || '视图模式' }}</span>
|
|
|
|
<span>{{ viewLabel || '视图模式' }}</span>
|
|
|
|
<SvgIcon class="wrapper-content-form-gap" name="arrow-botton" size="14" />
|
|
|
|
<SvgIcon class="wrapper-content-form-gap" name="arrow-botton" size="14" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</n-popselect> -->
|
|
|
|
|
|
|
|
<n-popselect v-model:value="viewMode" :options="viewOptions" trigger="click">
|
|
|
|
|
|
|
|
<div class="dropdown">
|
|
|
|
|
|
|
|
<!-- <span>{{ viewLabel || '请选择' }}</span> -->
|
|
|
|
|
|
|
|
<span>视图</span>
|
|
|
|
|
|
|
|
<SvgIcon class="gap" name="arrow-botton" size="14" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</n-popselect>
|
|
|
|
</n-popselect>
|
|
|
|
|
|
|
|
<div style="margin-left: 15px;cursor: pointer;color:#323233" @click="sortHandler('createdate')">
|
|
|
|
|
|
|
|
<span>时间排序</span>
|
|
|
|
|
|
|
|
<SvgIcon style="margin-left: 8px;" name="sort" size="12" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div style="margin-left: 15px;cursor: pointer;color:#323233" @click="sortHandler('similarityScore')">
|
|
|
|
|
|
|
|
<span>相似度排序</span>
|
|
|
|
|
|
|
|
<SvgIcon style="margin-left: 8px;" name="sort" size="12" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<div v-show="!showActions" class="wrapper-content-form-button" @click="switchBatch()">
|
|
|
|
<div v-show="!showActions" class="wrapper-content-form-button" @click="switchBatch()">
|
|
|
|
@ -458,18 +523,28 @@ defineExpose({
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div ref="el" class="scroll">
|
|
|
|
<n-spin :show="loading">
|
|
|
|
|
|
|
|
<div ref="el" class="scroll" :style="listStyle">
|
|
|
|
<!-- <n-scrollbar :on-scroll="scrollHandler"> -->
|
|
|
|
<!-- <n-scrollbar :on-scroll="scrollHandler"> -->
|
|
|
|
<div ref="masonryRef" class="grid">
|
|
|
|
<div ref="masonryRef" class="grid">
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
v-for="(item, index) in listData" :key="index" :data-id="item.id" :style="{ height: gridHeight }"
|
|
|
|
v-for="(item, index) in listData"
|
|
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
|
|
:style="{ height: gridHeight }"
|
|
|
|
class="grid-item"
|
|
|
|
class="grid-item"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div class="img-wrap">
|
|
|
|
<div>
|
|
|
|
<img
|
|
|
|
<n-image
|
|
|
|
class="wrapper-content-item-img"
|
|
|
|
ref="imageRef"
|
|
|
|
:class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
|
|
|
|
class="img"
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
|
|
:class="{
|
|
|
|
|
|
|
|
'img-fit': viewMode === 'horizontalVersion',
|
|
|
|
|
|
|
|
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
|
|
|
|
|
|
|
|
}"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:src="item.serverThumbnailUrl"
|
|
|
|
|
|
|
|
/>
|
|
|
|
<div class="small-mark" />
|
|
|
|
<div class="small-mark" />
|
|
|
|
<div class="time">
|
|
|
|
<div class="time">
|
|
|
|
<div v-if="item.photoDateTimestamp" class="time-item">
|
|
|
|
<div v-if="item.photoDateTimestamp" class="time-item">
|
|
|
|
@ -498,6 +573,7 @@ defineExpose({
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- </n-scrollbar> -->
|
|
|
|
<!-- </n-scrollbar> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</n-spin>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="close" @pointerdown="closeModal">
|
|
|
|
<div class="close" @pointerdown="closeModal">
|
|
|
|
@ -659,7 +735,7 @@ defineExpose({
|
|
|
|
margin-bottom: 10px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
th {
|
|
|
|
th {
|
|
|
|
color: #d7d7d7;
|
|
|
|
color: #999999;
|
|
|
|
text-align: left;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -676,7 +752,7 @@ defineExpose({
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&-m32 {
|
|
|
|
&-m32 {
|
|
|
|
margin-left: 19px;
|
|
|
|
// margin-left: 19px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&-content {
|
|
|
|
&-content {
|
|
|
|
@ -726,17 +802,40 @@ defineExpose({
|
|
|
|
display: block;
|
|
|
|
display: block;
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.img-fit {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.img {
|
|
|
|
|
|
|
|
border-radius: 7px;
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
// height: calc(100% - 25px);
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.img-full {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
|
|
&-img-fit {
|
|
|
|
::v-deep(img) {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
|
|
object-fit: cover;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.grid-item {
|
|
|
|
.grid-item {
|
|
|
|
width: 214px;
|
|
|
|
width: 214px;
|
|
|
|
padding: 16px;
|
|
|
|
// padding: 16px;
|
|
|
|
|
|
|
|
// width: 182px;
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
margin-bottom: 32px;
|
|
|
|
|
|
|
|
transition: 0.5s;
|
|
|
|
|
|
|
|
|
|
|
|
.check{
|
|
|
|
.check{
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
@ -782,4 +881,7 @@ defineExpose({
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep(.n-image img) {
|
|
|
|
|
|
|
|
width: 100%!important;
|
|
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
wendong551
1 year ago
