|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { computed, onMounted, onUpdated, reactive, ref, watch } from 'vue'
|
|
|
|
|
import { computed, onMounted, onUnmounted, onUpdated, reactive, ref, watch } from 'vue'
|
|
|
|
|
import Masonry from 'masonry-layout'
|
|
|
|
|
import { useInfiniteScroll } from '@vueuse/core'
|
|
|
|
|
import { debounce } from 'lodash-es'
|
|
|
|
@ -7,8 +7,14 @@ import imagesloaded from 'imagesloaded'
|
|
|
|
|
import { timeOptions, viewOptions } from '@/config/home'
|
|
|
|
|
import { off, on } from '@/utils/domUtils'
|
|
|
|
|
import { useTask } from '@/store/modules/task'
|
|
|
|
|
import { getTaskDetailPictureList } from '@/api/work/work'
|
|
|
|
|
import { getTaskDetailInfo, getTaskDetailPictureList } from '@/api/work/work'
|
|
|
|
|
import type { PictureSortParam } from '/#/api'
|
|
|
|
|
import emitter from '@/utils/mitt'
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits<{
|
|
|
|
|
(e: 'reject', params: any)
|
|
|
|
|
(e: 'approval', params: any)
|
|
|
|
|
}>()
|
|
|
|
|
|
|
|
|
|
const cardStyle = {
|
|
|
|
|
'--n-padding-bottom': '40px',
|
|
|
|
@ -38,6 +44,7 @@ const taskStore = useTask()
|
|
|
|
|
const masonryRef = ref<ComponentRef>(null)
|
|
|
|
|
const el = ref<HTMLDivElement | null>(null)
|
|
|
|
|
const listData = ref<any[]>([])
|
|
|
|
|
const taskDetailInfo = ref<any>({})
|
|
|
|
|
const pagination = reactive({
|
|
|
|
|
pageNo: 1,
|
|
|
|
|
pageSize: 30,
|
|
|
|
@ -100,13 +107,7 @@ async function featchList() {
|
|
|
|
|
pagination.pageNo += 1
|
|
|
|
|
canloadMore = pageCount >= pagination.pageNo
|
|
|
|
|
|
|
|
|
|
const list = data.map((item) => {
|
|
|
|
|
return {
|
|
|
|
|
imgUrl: item.imgurl,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
return list
|
|
|
|
|
return data
|
|
|
|
|
}
|
|
|
|
|
catch (error) {
|
|
|
|
|
return []
|
|
|
|
@ -134,8 +135,11 @@ onUpdated(() => {
|
|
|
|
|
let start: { x: number, y: number } | null = null
|
|
|
|
|
let selectionBox: HTMLDivElement | null
|
|
|
|
|
const selectIds = ref<string[]>([])
|
|
|
|
|
const selectItems = ref<any[]>([])
|
|
|
|
|
|
|
|
|
|
function downHandler(event: MouseEvent) {
|
|
|
|
|
event.stopPropagation()
|
|
|
|
|
|
|
|
|
|
if (!selectionBox)
|
|
|
|
|
return
|
|
|
|
|
|
|
|
|
@ -163,10 +167,6 @@ function imUpdateSelectIds(x: number, y: number, w: number, h: number) {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function isSelected(id: number) {
|
|
|
|
|
return selectIds.value.includes(String(id))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function moveHandler(e: MouseEvent) {
|
|
|
|
|
if (!selectionBox || !start)
|
|
|
|
|
return
|
|
|
|
@ -197,22 +197,30 @@ const gridHeight = computed(() => {
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
function addListeners() {
|
|
|
|
|
selectionBox = document.querySelector('.selection-box') as HTMLDivElement
|
|
|
|
|
// selectionBox = document.querySelector('.selection-box') as HTMLDivElement
|
|
|
|
|
|
|
|
|
|
// on(el.value!, 'mousedown', downHandler)
|
|
|
|
|
// on(el.value!, 'mousemove', moveHandler)
|
|
|
|
|
// on(document, 'mouseup', upHandler)
|
|
|
|
|
|
|
|
|
|
on(el.value!, 'mousedown', downHandler)
|
|
|
|
|
on(el.value!, 'mousemove', moveHandler)
|
|
|
|
|
on(document, 'mouseup', upHandler)
|
|
|
|
|
emitter.on('refresh', refreshHandler)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function removeListeners() {
|
|
|
|
|
off(el.value!, 'mousedown', downHandler)
|
|
|
|
|
on(el.value!, 'mousemove', moveHandler)
|
|
|
|
|
on(document, 'mouseup', upHandler)
|
|
|
|
|
// off(el.value!, 'mousedown', downHandler)
|
|
|
|
|
// on(el.value!, 'mousemove', moveHandler)
|
|
|
|
|
// on(document, 'mouseup', upHandler)
|
|
|
|
|
|
|
|
|
|
emitter.off('refresh', refreshHandler)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function afterEnter() {
|
|
|
|
|
addListeners()
|
|
|
|
|
|
|
|
|
|
const packageid = taskStore.getPackageid
|
|
|
|
|
const taskId = taskStore.getActiveId
|
|
|
|
|
taskDetailInfo.value = await getTaskDetailInfo(taskId, packageid)
|
|
|
|
|
|
|
|
|
|
const list = await featchList()
|
|
|
|
|
listData.value = list
|
|
|
|
|
}
|
|
|
|
@ -248,8 +256,6 @@ function backHandler() {
|
|
|
|
|
taskStore.back()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const selectItems = ref<any[]>([])
|
|
|
|
|
|
|
|
|
|
function onCheckChange(checked: any, item: any) {
|
|
|
|
|
const index = selectItems.value.indexOf(item)
|
|
|
|
|
item.checked = checked
|
|
|
|
@ -260,6 +266,60 @@ function onCheckChange(checked: any, item: any) {
|
|
|
|
|
else
|
|
|
|
|
selectItems.value.splice(index, 1)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// watch(() => selectIds.value.length, () => {
|
|
|
|
|
// const list = listData.value
|
|
|
|
|
// for (const item of list) {
|
|
|
|
|
// if (selectIds.value.includes(item.id))
|
|
|
|
|
// item.checked = true
|
|
|
|
|
// else
|
|
|
|
|
// item.checked = false
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
const batch = ref(false)
|
|
|
|
|
|
|
|
|
|
const showActions = computed(() => {
|
|
|
|
|
return selectItems.value.length > 0 && batch
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
function setBatch(value: boolean) {
|
|
|
|
|
batch.value = value
|
|
|
|
|
if (value === false) {
|
|
|
|
|
selectItems.value.forEach(item => item.checked = false)
|
|
|
|
|
selectItems.value.length = 0
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function reject() {
|
|
|
|
|
emit('reject', selectItems.value)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function approval() {
|
|
|
|
|
emit('approval', selectItems.value)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function refreshHandler() {
|
|
|
|
|
pagination.pageNo = 1
|
|
|
|
|
pagination.pageSize = 30
|
|
|
|
|
|
|
|
|
|
const list = await featchList()
|
|
|
|
|
listData.value = list
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
watch(() => taskStore.activeId, async (newValue, oldValue) => {
|
|
|
|
|
const packageid = taskStore.getPackageid
|
|
|
|
|
const taskId = taskStore.getActiveId
|
|
|
|
|
taskDetailInfo.value = await getTaskDetailInfo(taskId, packageid)
|
|
|
|
|
|
|
|
|
|
pagination.pageNo = 1
|
|
|
|
|
pagination.pageSize = 30
|
|
|
|
|
listData.value.length = 0
|
|
|
|
|
|
|
|
|
|
const list = await featchList()
|
|
|
|
|
listData.value = list
|
|
|
|
|
layout()
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
@ -306,12 +366,12 @@ function onCheckChange(checked: any, item: any) {
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
张三丰
|
|
|
|
|
{{ taskDetailInfo?.createusername }}
|
|
|
|
|
</td>
|
|
|
|
|
<td>待审批</td>
|
|
|
|
|
<td>2023-12-02 14:20:11</td>
|
|
|
|
|
<td>网络截图</td>
|
|
|
|
|
<td>15</td>
|
|
|
|
|
<td>{{ taskDetailInfo?.states }}</td>
|
|
|
|
|
<td>{{ taskDetailInfo?.ocrPicture?.createTime }}</td>
|
|
|
|
|
<td>{{ taskDetailInfo?.fromsourceid }}</td>
|
|
|
|
|
<td>{{ taskDetailInfo?.ocpictureid.split(',').length }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
@ -334,11 +394,25 @@ function onCheckChange(checked: any, item: any) {
|
|
|
|
|
</n-popselect>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>移除可疑文件夹</div>
|
|
|
|
|
<div class="wrapper-content-form-button">
|
|
|
|
|
<div v-show="!showActions" class="wrapper-content-form-button" @click="setBatch(true)">
|
|
|
|
|
<SvgIcon style="margin-right: 6px;" size="14" name="tf" />
|
|
|
|
|
批量审批
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="showActions" class="batch">
|
|
|
|
|
<n-button text @click="setBatch(false)">
|
|
|
|
|
<template #icon>
|
|
|
|
|
<SvgIcon name="revoke" />
|
|
|
|
|
</template>
|
|
|
|
|
返回
|
|
|
|
|
</n-button>
|
|
|
|
|
<div style="cursor: pointer;margin-left: 16px;" @click="reject">
|
|
|
|
|
<SvgIcon width="64" height="28" name="a1" />
|
|
|
|
|
</div>
|
|
|
|
|
<SvgIcon size="24" name="vs" />
|
|
|
|
|
<div style="cursor: pointer;" @click="approval">
|
|
|
|
|
<SvgIcon width="64" height="28" name="a2" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@ -346,16 +420,18 @@ function onCheckChange(checked: any, item: any) {
|
|
|
|
|
<!-- <n-scrollbar :on-scroll="scrollHandler"> -->
|
|
|
|
|
<div ref="masonryRef" class="grid">
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in listData" :key="index" :data-id="index"
|
|
|
|
|
:class="{ 'grid-item-selected': isSelected(index) }" :style="{ height: gridHeight }"
|
|
|
|
|
v-for="(item, index) in listData" :key="index" :data-id="item.id" :style="{ height: gridHeight }"
|
|
|
|
|
class="grid-item"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
class="wrapper-content-item-img"
|
|
|
|
|
:class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
|
|
|
|
|
:class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgurl"
|
|
|
|
|
>
|
|
|
|
|
<div class="top">
|
|
|
|
|
<n-checkbox v-model:checked="item.checked" @click.stop @update:checked="onCheckChange($event, item)" />
|
|
|
|
|
<n-checkbox
|
|
|
|
|
v-show="batch" v-model:checked="item.checked" @click.prevent
|
|
|
|
|
@update:checked="onCheckChange($event, item)"
|
|
|
|
|
/>
|
|
|
|
|
<div class="percent">
|
|
|
|
|
30%
|
|
|
|
|
</div>
|
|
|
|
@ -460,6 +536,11 @@ function onCheckChange(checked: any, item: any) {
|
|
|
|
|
&-form {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background: #FFF;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
height: 36px;
|
|
|
|
|
|
|
|
|
|
&-dropdown {
|
|
|
|
|
display: flex;
|
|
|
|
@ -483,6 +564,7 @@ function onCheckChange(checked: any, item: any) {
|
|
|
|
|
justify-content: center;
|
|
|
|
|
color: #FFF;
|
|
|
|
|
margin-left: 18px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
@ -539,7 +621,7 @@ function onCheckChange(checked: any, item: any) {
|
|
|
|
|
|
|
|
|
|
.scroll {
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
height: calc(100vh - 282px);
|
|
|
|
|
height: calc(100vh - 320px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|