guoxiangbin
/
ocr-web
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: 修改滚动bug

Browse Source
pull/185/head
raofuzi 2 years ago
parent 3b2f46e984
commit d40509e294
3 changed files with 411 additions and 432 deletions
Show Stats Download Patch File Download Diff File

24
components.d.ts vendored
Unescape View File

@ -10,41 +10,17 @@ declare module 'vue' {
Application: typeof import('./src/components/Application/Application.vue')['default'] Application: typeof import('./src/components/Application/Application.vue')['default']
BasicModal: typeof import('./src/components/Modal/BasicModal.vue')['default'] BasicModal: typeof import('./src/components/Modal/BasicModal.vue')['default']
DataHeader: typeof import('./src/components/DataHeader/index.vue')['default'] DataHeader: typeof import('./src/components/DataHeader/index.vue')['default']
NAvatar: typeof import('naive-ui')['NAvatar']
NButton: typeof import('naive-ui')['NButton'] NButton: typeof import('naive-ui')['NButton']
NCard: typeof import('naive-ui')['NCard']
NCheckbox: typeof import('naive-ui')['NCheckbox'] NCheckbox: typeof import('naive-ui')['NCheckbox']
NCollapse: typeof import('naive-ui')['NCollapse']
NCollapseItem: typeof import('naive-ui')['NCollapseItem']
NConfigProvider: typeof import('naive-ui')['NConfigProvider'] NConfigProvider: typeof import('naive-ui')['NConfigProvider']
NDatePicker: typeof import('naive-ui')['NDatePicker']
NDialogProvider: typeof import('naive-ui')['NDialogProvider'] NDialogProvider: typeof import('naive-ui')['NDialogProvider']
NDivider: typeof import('naive-ui')['NDivider']
NDropdown: typeof import('naive-ui')['NDropdown']
NForm: typeof import('naive-ui')['NForm'] NForm: typeof import('naive-ui')['NForm']
NFormItem: typeof import('naive-ui')['NFormItem'] NFormItem: typeof import('naive-ui')['NFormItem']
NGi: typeof import('naive-ui')['NGi']
NGrid: typeof import('naive-ui')['NGrid']
NGridItem: typeof import('naive-ui')['NGridItem']
NImage: typeof import('naive-ui')['NImage']
NInput: typeof import('naive-ui')['NInput'] NInput: typeof import('naive-ui')['NInput']
NMessageProvider: typeof import('naive-ui')['NMessageProvider'] NMessageProvider: typeof import('naive-ui')['NMessageProvider']
NModal: typeof import('naive-ui')['NModal'] NModal: typeof import('naive-ui')['NModal']
NNotificationProvider: typeof import('naive-ui')['NNotificationProvider'] NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
NotPassed: typeof import('./src/components/NotPassed.vue')['default'] NotPassed: typeof import('./src/components/NotPassed.vue')['default']
NPopover: typeof import('naive-ui')['NPopover']
NPopselect: typeof import('naive-ui')['NPopselect']
NProgress: typeof import('naive-ui')['NProgress']
NScrollbar: typeof import('naive-ui')['NScrollbar']
NSelect: typeof import('naive-ui')['NSelect']
NSlider: typeof import('naive-ui')['NSlider']
NSpace: typeof import('naive-ui')['NSpace']
NSpin: typeof import('naive-ui')['NSpin']
NSwitch: typeof import('naive-ui')['NSwitch']
NTag: typeof import('naive-ui')['NTag']
NTooltip: typeof import('naive-ui')['NTooltip']
NUpload: typeof import('naive-ui')['NUpload']
NUploadDragger: typeof import('naive-ui')['NUploadDragger']
Quill: typeof import('./src/components/RichEditor/Quill.vue')['default'] Quill: typeof import('./src/components/RichEditor/Quill.vue')['default']
Robot: typeof import('./src/components/Robot/index.vue')['default'] Robot: typeof import('./src/components/Robot/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']

396
src/layout/components/Header/RecycleModal.vue
Unescape View File

@ -3,36 +3,35 @@ import 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, nextTick, onBeforeMount, onMounted, onUpdated, reactive, ref, unref, watch } from 'vue'
import { dubiousfilelist, removeFiles } from '@/api/task/task'
import { viewOptions } from '@/config/home'
import { useInfiniteScroll } from '@vueuse/core' import { useInfiniteScroll } from '@vueuse/core'
import imagesloaded from 'imagesloaded' import imagesloaded from 'imagesloaded'
import { debounce, cloneDeep } from 'lodash-es' import { cloneDeep, debounce } from 'lodash-es'
import ConfrimModal from './ConfrimModal.vue'
import { audit, dubiousfilelist, removeFiles } from '@/api/task/task'
import { viewOptions } from '@/config/home'
import { audit } from '@/api/task/task'
import NotPassed from '@/components/Approval/NotPassed.vue' import NotPassed from '@/components/Approval/NotPassed.vue'
import { formatToDateHMS } from '@/utils/dateUtil' import { formatToDateHMS } from '@/utils/dateUtil'
import { off, on } from '@/utils/domUtils' import { off, on } from '@/utils/domUtils'
import ConfrimModal from "./ConfrimModal.vue"
const cardStyle = { const cardStyle = {
'--n-padding-bottom': '40px', '--n-padding-bottom': '40px',
'--n-padding-left': '120px', '--n-padding-left': '120px',
} }
let startTime = 0; let startTime = 0
let endTime = 0; let endTime = 0
let startCalTime = false; let startCalTime = false
const message = useMessage() const message = useMessage()
const timeRange = ref('desc') const timeRange = ref('desc')
const similarRange = ref('desc') const similarRange = ref('desc')
const batch = ref(false) const batch = ref(false)
const imageRef = ref<ComponentElRef | null>(); const imageRef = ref<ComponentElRef | null>()
let filterId = null; const filterId = null
const isTop = ref(false) const isTop = ref(false)
let sortObj: any = { let sortObj: any = {
orderByUptime: 'desc' orderByUptime: 'desc',
}; }
const timeOptions = [{ const timeOptions = [{
label: '升序', label: '升序',
@ -68,12 +67,12 @@ const viewLabel = computed(() => {
}) })
const maxHeight = computed(() => { const maxHeight = computed(() => {
let height = "800"; let height = '800'
const screenWidth = window.screen.width; const screenWidth = window.screen.width
if(screenWidth <= 1920) { if (screenWidth <= 1920)
height = "600"; height = '600'
}
return height + 'px'; return `${height}px`
}) })
const masonryRef = ref<ComponentRef>(null) const masonryRef = ref<ComponentRef>(null)
@ -87,10 +86,10 @@ const pagination = reactive({
let loading = false let loading = false
let _masonry: null | Masonry = null let _masonry: null | Masonry = null
const show = ref(false) const show = ref(false)
const selectedApproveItems = ref<any[]>([]); // 审核批量选中 const selectedApproveItems = ref<any[]>([]) // 审核批量选中
const dialog = useDialog(); const dialog = useDialog()
let processItems: any[] = []; let processItems: any[] = []
const confrimModalRef = ref<any>(); const confrimModalRef = ref<any>()
const layout = debounce(() => { const layout = debounce(() => {
if (!show.value) if (!show.value)
@ -111,11 +110,11 @@ const layout = debounce(() => {
const scrollHeight = el.value!.scrollHeight const scrollHeight = el.value!.scrollHeight
const clientHeight = el.value!.clientHeight const clientHeight = el.value!.clientHeight
const top = scrollHeight - clientHeight - 20 const top = scrollHeight - clientHeight - 20
if(isTop.value) { if (isTop.value)
el.value!.scrollTo({ top: 0, behavior: 'instant' }) el.value!.scrollTo({ top: 0, behavior: 'instant' })
}else { else
el.value!.scrollTo({ top, behavior: 'instant' }) el.value!.scrollTo({ top, behavior: 'instant' })
}
// let height = 800 - 15; // let height = 800 - 15;
// const screenWidth = window.screen.width; // const screenWidth = window.screen.width;
// if(screenWidth <= 1920) { // if(screenWidth <= 1920) {
@ -123,23 +122,23 @@ const layout = debounce(() => {
// } // }
// el.value!.scrollTo({ top: height, behavior: 'instant' }) // el.value!.scrollTo({ top: height, behavior: 'instant' })
loading = false loading = false
console.log("loading---------------", loading); console.log('loading---------------', loading)
console.log("pagination.pageNo---------------", pagination.pageNo); console.log('pagination.pageNo---------------', pagination.pageNo)
if(pagination.pageNo == 3) { if (pagination.pageNo == 3) {
let timer; let timer
if(timer) { if (timer)
clearTimeout(timer); clearTimeout(timer)
}
timer = setTimeout(() => { timer = setTimeout(() => {
isTop.value = false isTop.value = false
console.log("isTop.value---------------", isTop.value); console.log('isTop.value---------------', isTop.value)
}, 1000) }, 1000)
} }
}) })
}, 300) }, 300)
watch(viewMode, () => { watch(viewMode, () => {
isTop.value = true; isTop.value = true
layout() layout()
}) })
@ -153,7 +152,7 @@ useInfiniteScroll(
el as any, el as any,
() => { () => {
loading = false loading = false
console.log("加载了000000000000000---------------------------"); console.log('加载了000000000000000---------------------------')
loadMore() loadMore()
}, },
{ distance: 10, canLoadMore: () => canloadMore }, { distance: 10, canLoadMore: () => canloadMore },
@ -163,14 +162,14 @@ async function featchList() {
loading = true loading = true
try { try {
// const result = await dubiousfilelist({ ...pagination, orderbyname: timeRange.value }) // const result = await dubiousfilelist({ ...pagination, orderbyname: timeRange.value })
console.log("pagination.pageNo------------", pagination.pageNo); console.log('pagination.pageNo------------', pagination.pageNo)
const result = await dubiousfilelist({ ...pagination, ...sortObj }) const result = await dubiousfilelist({ ...pagination, ...sortObj })
// TODO：测试数据 // TODO：测试数据
// result.data = Array.from({ length: 30 }) // result.data = Array.from({ length: 30 })
const { data, pageCount } = result const { data, pageCount } = result
// canloadMore = pageCount >= pagination.pageNo && pageCount > 0; // canloadMore = pageCount >= pagination.pageNo && pageCount > 0;
canloadMore = data.pages >= pagination.pageNo && data.pages > 0; canloadMore = data.pages >= pagination.pageNo && data.pages > 0
console.log("canloadMore------------", canloadMore); console.log('canloadMore------------', canloadMore)
return result.data.records return result.data.records
// const list = data.map((item) => { // const list = data.map((item) => {
@ -181,32 +180,31 @@ async function featchList() {
// return list // return list
} }
catch (error) { catch (error) {
canloadMore = false; canloadMore = false
return [] return []
} }
} }
async function loadMore() { async function loadMore() {
console.log('执行l------------------------', loading, el.value, pagination.pageNo)
console.log("执行l------------------------", loading, el.value, pagination.pageNo);
if (loading || el.value == null) if (loading || el.value == null)
return return
// loading = true // loading = true
pagination.pageNo = pagination.pageNo + 1; pagination.pageNo = pagination.pageNo + 1
const more = await featchList() const more = await featchList()
console.log("more------------------------", more); console.log('more------------------------', more)
listData.value.push(...more) listData.value.push(...more)
layout() layout()
} }
onUpdated(() => { onUpdated(() => {
if(startCalTime) { if (startCalTime) {
endTime = new Date().getTime(); endTime = new Date().getTime()
if(endTime - startTime > 500) { if (endTime - startTime > 500)
createDom() createDom()
} }
}else { else {
removeDom() removeDom()
} }
// if(elwc.value) { // if(elwc.value) {
@ -220,8 +218,8 @@ let selectionBox: HTMLDivElement | null
const selectIds = ref<string[]>([]) const selectIds = ref<string[]>([])
function downHandler(event: MouseEvent) { function downHandler(event: MouseEvent) {
startTime = new Date().getTime(); startTime = new Date().getTime()
startCalTime = true; startCalTime = true
if (!selectionBox) if (!selectionBox)
return return
@ -264,17 +262,14 @@ function imUpdateSelectIds(x: number, y: number, w: number, h: number) {
// selectedApproveItems.value.splice(tempApproveIndex, 1); // selectedApproveItems.value.splice(tempApproveIndex, 1);
// } // }
}) })
selectedApproveItems.value = []; selectedApproveItems.value = []
// 选中复选框 // 选中复选框
listData.value.map(item => { listData.value.forEach((item) => {
if(selectIds.value.includes(String(item.pictureId))) { if (selectIds.value.includes(String(item.pictureId))) {
item.checked = true; item.checked = true
selectedApproveItems.value.push(item); selectedApproveItems.value.push(item)
} }
}); })
} }
function isSelected(pictureId: number) { function isSelected(pictureId: number) {
@ -282,12 +277,12 @@ function isSelected(pictureId: number) {
} }
function moveHandler(e: MouseEvent) { function moveHandler(e: MouseEvent) {
if(startCalTime) { if (startCalTime) {
endTime = new Date().getTime(); endTime = new Date().getTime()
if(endTime - startTime > 500) { if (endTime - startTime > 500)
createDom() createDom()
} }
}else { else {
removeDom() removeDom()
} }
if (!selectionBox || !start) if (!selectionBox || !start)
@ -307,68 +302,66 @@ function moveHandler(e: MouseEvent) {
} }
function createDom() { function createDom() {
let dom = document.createElement('div'); const dom = document.createElement('div')
dom.className = "selection-box"; dom.className = 'selection-box'
dom.style.width = "1px"; dom.style.width = '1px'
dom.style.border = "1px dotted black"; dom.style.border = '1px dotted black'
dom.style.position = "absolute"; dom.style.position = 'absolute'
dom.style.display = "block"; dom.style.display = 'block'
dom.style.zIndex = '9999'; dom.style.zIndex = '9999'
document.body.appendChild(dom); document.body.appendChild(dom)
selectionBox = document.querySelector('.selection-box') as HTMLDivElement selectionBox = document.querySelector('.selection-box') as HTMLDivElement
} }
function removeDom() { function removeDom() {
let dom = document.getElementsByClassName("selection-box")[0]; const dom = document.getElementsByClassName('selection-box')[0]
if(dom) { if (dom)
document.body.removeChild(dom); document.body.removeChild(dom)
}
} }
function upHandler(event: MouseEvent) { function upHandler(event: MouseEvent) {
endTime = new Date().getTime(); endTime = new Date().getTime()
startCalTime = false; startCalTime = false
if(endTime - startTime > 500) { if (endTime - startTime > 500)
createDom() createDom()
}else { else
removeDom() removeDom()
}
if (!selectionBox) if (!selectionBox)
return return
selectionBox.style.display = 'none' selectionBox.style.display = 'none'
start = null start = null
if(selectionBox.style.width == "0px") { if (selectionBox.style.width == '0px') {
removeDom() removeDom()
if(event.target?.className.indexOf("n-checkbox-box__border") != -1 ) { if (event.target?.className.indexOf('n-checkbox-box__border') != -1)
return return
}
selectIds.value = [] selectIds.value = []
selectedApproveItems.value.forEach((item) => (item.checked = false)); selectedApproveItems.value.forEach(item => (item.checked = false))
selectedApproveItems.value.length = 0; selectedApproveItems.value.length = 0
listData.value.map(item => { listData.value.forEach((item) => {
item.checked = false; item.checked = false
}); })
// batch.value = false; // batch.value = false;
} }
} }
const gridHeight = computed(() => { const gridHeight = computed(() => {
// return viewMode.value !== 'masonry' ? '157px' : '' // return viewMode.value !== 'masonry' ? '157px' : ''
let height = ""; let height = ''
if (viewMode.value === "masonry") { if (viewMode.value === 'masonry')
height = ""; height = ''
} else if (viewMode.value === "horizontalVersion") { else if (viewMode.value === 'horizontalVersion')
height = "145px"; height = '145px'
} else if (viewMode.value === "verticalVersion") { else if (viewMode.value === 'verticalVersion')
height = "300px"; height = '300px'
} else if (viewMode.value === "3:4") { else if (viewMode.value === '3:4')
height = "240px"; height = '240px'
}
return height; return height
}) })
function addListeners() { function addListeners() {
// selectionBox.style['z-index'] = '-1' // selectionBox.style['z-index'] = '-1'
on(el.value!, 'mousedown', downHandler) on(el.value!, 'mousedown', downHandler)
on(el.value!, 'mousemove', moveHandler) on(el.value!, 'mousemove', moveHandler)
@ -391,7 +384,7 @@ function afterLeave() {
removeListeners() removeListeners()
} }
onMounted(async() => { onMounted(async () => {
show.value && addListeners() show.value && addListeners()
removeDom() removeDom()
}) })
@ -406,38 +399,38 @@ async function showModal() {
} }
async function onChange() { async function onChange() {
if(timeRange.value == "desc") { if (timeRange.value == 'desc')
timeRange.value = "asc"; timeRange.value = 'asc'
}else { else
timeRange.value = "desc"; timeRange.value = 'desc'
}
sortObj = { sortObj = {
// orderbyname: val, // orderbyname: val,
orderByUptime: timeRange.value orderByUptime: timeRange.value,
} }
pagination.pageNo = 1; pagination.pageNo = 1
canloadMore = true; canloadMore = true
const list = await featchList() const list = await featchList()
listData.value = list listData.value = list
isTop.value = true; isTop.value = true
layout() layout()
} }
async function onChangeView() { async function onChangeView() {
if(similarRange.value == "desc") { if (similarRange.value == 'desc')
similarRange.value = "asc"; similarRange.value = 'asc'
}else { else
similarRange.value = "desc"; similarRange.value = 'desc'
}
sortObj = { sortObj = {
// orderbyname: val, // orderbyname: val,
orderBySimilarity: similarRange.value orderBySimilarity: similarRange.value,
} }
pagination.pageNo = 1; pagination.pageNo = 1
canloadMore = true; canloadMore = true
const list = await featchList() const list = await featchList()
listData.value = list listData.value = list
isTop.value = true; isTop.value = true
layout() layout()
} }
@ -454,6 +447,7 @@ async function commit() {
const list = await featchList() const list = await featchList()
listData.value = list listData.value = list
layout() layout()
setBatch(false)
} }
} }
function remove() { function remove() {
@ -465,17 +459,16 @@ function remove() {
confrimModalRef?.value?.showModal() confrimModalRef?.value?.showModal()
} }
function setBatch(value) { function setBatch(value) {
if (value && batch.value) { if (value && batch.value)
batch.value = !value; batch.value = !value
} else { else
batch.value = value; batch.value = value
}
if (value === false) { if (value === false) {
selectIds.value = [] selectIds.value = []
selectedApproveItems.value.forEach((item) => (item.checked = false)); selectedApproveItems.value.forEach(item => (item.checked = false))
selectedApproveItems.value.length = 0; selectedApproveItems.value.length = 0
} }
} }
@ -485,26 +478,24 @@ defineExpose({
const notPassModalRef = ref(null) const notPassModalRef = ref(null)
const showActions = computed(() => { const showActions = computed(() => {
return selectedApproveItems.value.length > 0 && batch; return selectedApproveItems.value.length > 0 && batch
}); })
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)
const picIndex = selectIds.value.indexOf(item.pictureId); const picIndex = selectIds.value.indexOf(item.pictureId)
if (index === -1 && checked) { if (index === -1 && checked)
selectedApproveItems.value.push(item) selectedApproveItems.value.push(item)
} else { else
selectedApproveItems.value.splice(index, 1); selectedApproveItems.value.splice(index, 1)
}
if (picIndex === -1 && checked) { if (picIndex === -1 && checked)
selectIds.value.push(item.pictureId); selectIds.value.push(item.pictureId)
} else { else
selectIds.value.splice(picIndex, 1); selectIds.value.splice(picIndex, 1)
}
setTimeout(() => { setTimeout(() => {
nextTick(() => { nextTick(() => {
batch.value = true batch.value = true
@ -518,19 +509,20 @@ function rejectHandler() {
} }
function reset() { function reset() {
batch.value = false; batch.value = false
// pagination.pageNo = 1; // pagination.pageNo = 1;
pagination.pageNo = 1; pagination.pageNo = 1
pagination.pageSize = 20; pagination.pageSize = 20
selectIds.value = []; selectIds.value = []
selectedApproveItems.value.length = 0; selectedApproveItems.value.length = 0
loading = false; loading = false
canloadMore = true; canloadMore = true
layout(); layout()
} }
function validate(items: any[]) { function validate(items: any[]) {
if (items.length === 0) return "至少选中一个任务"; if (items.length === 0)
return null; return '至少选中一个任务'
return null
} }
function approvalHandler(items?: any) { function approvalHandler(items?: any) {
// if (batch.value) { // if (batch.value) {
@ -539,7 +531,7 @@ function approvalHandler(items?: any) {
// 任务包图片 => 点击 => 通过/不通过按钮 // 任务包图片 => 点击 => 通过/不通过按钮
if (items !== undefined && !(items instanceof PointerEvent)) if (items !== undefined && !(items instanceof PointerEvent))
processItems = [items] processItems = [items]
console.log("batch-------------",batch.value,selectedApproveItems.value,processItems); console.log('batch-------------', batch.value, selectedApproveItems.value, processItems)
const msg = validate(processItems) const msg = validate(processItems)
if (msg !== null) { if (msg !== null) {
@ -586,9 +578,8 @@ function doAudit(param: any) {
message.info(res.message) message.info(res.message)
// emitter.emit('refresh') // emitter.emit('refresh')
refreshHandler() refreshHandler()
} }
else message.error(res.message) else { message.error(res.message) }
}) })
} }
function reloadList() { function reloadList() {
@ -597,11 +588,11 @@ function reloadList() {
async function refreshHandler(filtersearchId?: any) { async function refreshHandler(filtersearchId?: any) {
// 注释 rao start // 注释 rao start
reset() reset()
pagination.pageNo = 1; pagination.pageNo = 1
const list = await featchList() const list = await featchList()
listData.value = list listData.value = list
layout() layout()
// 注释 rao end // 注释 rao end
// reset(); // reset();
// if (filtersearchId) { // if (filtersearchId) {
@ -613,53 +604,51 @@ async function refreshHandler(filtersearchId?: any) {
useInfiniteScroll( useInfiniteScroll(
el as any, el as any,
() => { () => {
console.log("加载了333333333333333333333333---------------------------"); console.log('加载了333333333333333333333333---------------------------')
loadMore(); loadMore()
}, },
{ distance: 10, canLoadMore: () => canloadMore } { distance: 10, canLoadMore: () => canloadMore },
); )
}, 300); }, 300)
}); })
} }
watch(() => show.value, watch(() => show.value, async (newVal) => {
async(newVal) => { if (show.value) {
if(show.value) { pagination.pageNo = 1
pagination.pageNo = 1;
const list = await featchList() const list = await featchList()
listData.value = list listData.value = list
console.log("加载了1111111111111---------------------------", listData.value); console.log('加载了1111111111111---------------------------', listData.value)
layout() layout()
} }
}, })
)
watch(() => pagination.pageNo, watch(() => pagination.pageNo, (newVal, oldVal) => {
(newVal, oldVal) => { console.log('加载了22222222222222222---------------------------', newVal, oldVal, canloadMore)
console.log("加载了22222222222222222---------------------------", newVal, oldVal, canloadMore); if (newVal == oldVal)
if(newVal == oldVal) {
return return
}
if((newVal == 1 || newVal == 2) && canloadMore) { if ((newVal == 1 || newVal == 2) && canloadMore) {
setTimeout(() => { setTimeout(() => {
nextTick(() => { nextTick(() => {
loading = false loading = false
loadMore(); loadMore()
}) })
}, 500) }, 500)
} }
}, })
);
</script> </script>
<template> <template>
<div> <div>
<n-modal v-model:show="show" :mask-closable="false" style="position: relative;" transform-origin="center" <n-modal
@after-enter="afterEnter" @after-leave="afterLeave"> v-model:show="show" :mask-closable="false" style="position: relative;" transform-origin="center"
<n-card ref="elwc" :style="cardStyle" class="card card-1" style="position: fixed;top:64px" :bordered="false" size="huge" @after-enter="afterEnter" @after-leave="afterLeave"
role="dialog" aria-modal="true"> >
<n-card
ref="elwc" :style="cardStyle" class="card card-1" style="position: fixed;top:64px" :bordered="false" size="huge"
role="dialog" aria-modal="true"
>
<div class="wrapper"> <div class="wrapper">
<div class="wrapper-m32"> <div class="wrapper-m32">
<SvgIcon name="recycle" size="16" /> <SvgIcon name="recycle" size="16" />
@ -709,7 +698,7 @@ watch(() => pagination.pageNo,
<div class="remove" @click="remove"> <div class="remove" @click="remove">
移除可疑文件夹 移除可疑文件夹
</div> </div>
<div class="wrapper-content-form-button" @click="setBatch(true)" v-show="!showActions"> <div v-show="!showActions" class="wrapper-content-form-button" @click="setBatch(true)">
<SvgIcon style="margin-right: 6px;" size="14" name="tf" /> <SvgIcon style="margin-right: 6px;" size="14" name="tf" />
批量审批 批量审批
</div> </div>
@ -731,12 +720,14 @@ watch(() => pagination.pageNo,
</div> </div>
</div> </div>
<div ref="el" class="scroll" :style="{height: maxHeight}"> <div ref="el" class="scroll" :style="{ height: maxHeight }">
<!-- <n-scrollbar :on-scroll="scrollHandler"> --> <!-- <n-scrollbar :on-scroll="scrollHandler"> -->
<div ref="masonryRef" class="grid"> <div ref="masonryRef" class="grid">
<div v-for="(item, index) in listData" :key="item.pictureId" :data-id="item.pictureId" <div
v-for="(item) in listData" :key="item.pictureId" :data-id="item.pictureId"
:class="{ 'grid-item-selected': isSelected(item.pictureId) }" :style="{ height: gridHeight }" :class="{ 'grid-item-selected': isSelected(item.pictureId) }" :style="{ height: gridHeight }"
class="grid-item"> class="grid-item"
>
<n-image <n-image
ref="imageRef" ref="imageRef"
:src="item.imgUrl" :src="item.imgUrl"
@ -746,17 +737,21 @@ watch(() => pagination.pageNo,
'img-fit': viewMode === 'horizontalVersion', 'img-fit': viewMode === 'horizontalVersion',
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }"
/> />
<n-checkbox v-if="batch && item.historyStates === 1" v-model:checked="item.checked" <n-checkbox
v-if="batch && item.historyStates === 1" v-model:checked="item.checked"
style="position:absolute;left:20px;top:20px" @click.prevent.stop style="position:absolute;left:20px;top:20px" @click.prevent.stop
@update:checked="onCheckChange($event, item)" /> @update:checked="onCheckChange($event, item)"
/>
<img v-if="item.historyStates === 2" class="tag-status" src="@/assets/images/task/tag-pass.png" alt=""> <img v-if="item.historyStates === 2" class="tag-status" src="@/assets/images/task/tag-pass.png" alt="">
<img v-if="item.historyStates === 3" class="tag-status" src="@/assets/images/task/tag-not-pass.png" <img
alt=""> v-if="item.historyStates === 3" class="tag-status" src="@/assets/images/task/tag-not-pass.png"
alt=""
>
<div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent"> <div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent">
{{ item.similarityScore }}<span class="percent-unit">%</span> {{ item.similarityScore }}<span class="percent-unit">%</span>
</div> </div>
<div class="time" > <div class="time">
<!-- <div class="time-item"> <!-- <div class="time-item">
<SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" /> <SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />
<span>{{ item?.photoDateTimestamp ? <span>{{ item?.photoDateTimestamp ?
@ -769,13 +764,13 @@ watch(() => pagination.pageNo,
</div> --> </div> -->
<div class="time-item" style="margin-bottom: 4px;"> <div class="time-item" style="margin-bottom: 4px;">
<SvgIcon color="#FFF" size="16" name="camera" style="margin-right: 4px;" /> <SvgIcon color="#FFF" size="16" name="camera" style="margin-right: 4px;" />
<span class="time-value">{{ item?.photoDateTimestamp ? <span class="time-value">{{ item?.photoDateTimestamp
formatToDateHMS(Number(item.photoDateTimestamp)) : '-' }} </span> ? formatToDateHMS(Number(item.photoDateTimestamp)) : '-' }} </span>
</div> </div>
<div class="time-item"> <div class="time-item">
<SvgIcon class="svg-time" color="#FFF" size="16" name="time" /> <SvgIcon class="svg-time" color="#FFF" size="16" name="time" />
<span>{{ item.submitDateTimestamp ? <span>{{ item.submitDateTimestamp
formatToDateHMS(Number(item.submitDateTimestamp)) : '-' }}</span> ? formatToDateHMS(Number(item.submitDateTimestamp)) : '-' }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -791,8 +786,7 @@ watch(() => pagination.pageNo,
</n-card> </n-card>
</n-modal> </n-modal>
<NotPassed ref="notPassModalRef" @success="reloadList" /> <NotPassed ref="notPassModalRef" @success="reloadList" />
<ConfrimModal ref="confrimModalRef" @commit="commit" :selectedTotal="selectIds.length" /> <ConfrimModal ref="confrimModalRef" :selected-total="selectIds.length" @commit="commit" />
</div> </div>
</template> </template>
@ -977,7 +971,6 @@ watch(() => pagination.pageNo,
} }
} }
.scroll { .scroll {
overflow-y: auto; overflow-y: auto;
// height: calc(100vh - 282px); // height: calc(100vh - 282px);
@ -1005,4 +998,5 @@ watch(() => pagination.pageNo,
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
}</style> }
</style>

371
src/views/final/aside/Aside.vue
Unescape View File

@ -10,109 +10,110 @@ import {
shallowRef, shallowRef,
unref, unref,
watch, watch,
} from "vue"; } from 'vue'
import { CustomFilterModalVue, FilterModal, NewFilterModal } from "@/views/final/comp"; import { cloneDeep, isEqual } from 'lodash-es'
import Search from "@/views/home/aside/comp/Search.vue"; import { CustomFilterModalVue, FilterModal, NewFilterModal } from '@/views/final/comp'
import AdvanceFilter from "@/views/home/aside/comp/AdvanceFilter.vue"; import Search from '@/views/home/aside/comp/Search.vue'
import { getViewportOffset } from "@/utils/domUtils"; import AdvanceFilter from '@/views/home/aside/comp/AdvanceFilter.vue'
import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn"; import { getViewportOffset } from '@/utils/domUtils'
import { useFinal } from "@/store/modules/final"; import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
import type { Filter } from "/#/home"; import { useFinal } from '@/store/modules/final'
import type { AsideEntity } from "@/config/aside"; import type { Filter } from '/#/home'
import { asideMap } from "@/config/final"; import type { AsideEntity } from '@/config/aside'
import type { AsideConfig } from "/#/api"; import { asideMap } from '@/config/final'
import emitter from "@/utils/mitt"; import type { AsideConfig } from '/#/api'
import { getFilterList } from "@/api/home/main"; import emitter from '@/utils/mitt'
import { cloneDeep, isEqual } from "lodash-es"; import { getFilterList } from '@/api/home/main'
const emit = defineEmits(["inputChange"]); const emit = defineEmits(['inputChange'])
const finalStore = useFinal(); const finalStore = useFinal()
// 所有左侧模块的值 // 所有左侧模块的值
const asideValue: Record<keyof typeof asideMap, any> = reactive({}); const asideValue: Record<keyof typeof asideMap, any> = reactive({})
// 左侧某个模块是否显示: 个人配置 // 左侧某个模块是否显示: 个人配置
const asideVisible: Partial<Record<keyof AsideConfig, boolean>> = reactive({}); const asideVisible: Partial<Record<keyof AsideConfig, boolean>> = reactive({})
// 当前显示的模块，按照数组顺序显示 // 当前显示的模块，按照数组顺序显示
const showItems = shallowRef<{ key: string; config: AsideEntity }[]>([]); const showItems = shallowRef<{ key: string, config: AsideEntity }[]>([])
const initAsideValueRef = ref<any>(null); // 所有左侧模块的值(初始值) const initAsideValueRef = ref<any>(null) // 所有左侧模块的值(初始值)
const customObjRef = ref<any>(null); // 获取高级筛选获取的值 const customObjRef = ref<any>(null) // 获取高级筛选获取的值
const customTempObjRef = ref<any>(null); // 获取高级筛选获取的值(作对比) const customTempObjRef = ref<any>(null) // 获取高级筛选获取的值(作对比)
const configFilterRef = ref<any>([]); // 获取排序的值 const configFilterRef = ref<any>([]) // 获取排序的值
initAsideValueRef.value = cloneDeep(asideMap); initAsideValueRef.value = cloneDeep(asideMap)
onBeforeMount(async () => { onBeforeMount(async () => {
finalStore.fetchConfig(); finalStore.fetchConfig()
finalStore.fetchCustomConfig(); finalStore.fetchCustomConfig()
}); })
Object.keys(asideMap).forEach((key) => { Object.keys(asideMap).forEach((key) => {
const { defaultValue, inFilterList } = asideMap[key]; const { defaultValue, inFilterList } = asideMap[key]
if (inFilterList !== false) asideValue[key] = defaultValue; if (inFilterList !== false)
}); asideValue[key] = defaultValue
})
const filterModalRef:any = ref(null); const filterModalRef: any = ref(null)
const newFilterModalRef = ref(null); const newFilterModalRef = ref(null)
const customModalRef = ref(null); const customModalRef = ref(null)
const AdvanceFilterRef: any = ref(null); const AdvanceFilterRef: any = ref(null)
function showModal(modalRef: any) { function showModal(modalRef: any) {
const modal = unref(modalRef)! as any; const modal = unref(modalRef)! as any
modal.showModal(); modal.showModal()
} }
const newFilterOk = () => { function newFilterOk() {
filterModalRef.value.query( filterModalRef.value.query(
filterModalRef.value.pagination.page, filterModalRef.value.pagination.page,
filterModalRef.value.pagination.pageSize filterModalRef.value.pagination.pageSize,
); )
filterModalRef.value.showModal(); filterModalRef.value.showModal()
}; }
const mousetrap = inject("mousetrap") as any; const mousetrap = inject('mousetrap') as any
mousetrap.bind("[", collapseHandler); mousetrap.bind('[', collapseHandler)
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
computeSlideHeight(); computeSlideHeight()
}); })
}); })
const collapse = ref(false); const collapse = ref(false)
function collapseHandler() { function collapseHandler() {
collapse.value = !collapse.value; collapse.value = !collapse.value
} }
const asideWidth = computed(() => { const asideWidth = computed(() => {
return collapse.value ? 0 : 308; return collapse.value ? 0 : 308
}); })
const asideHeight = ref(500); const asideHeight = ref(500)
const asideStyle = computed(() => { const asideStyle = computed(() => {
return { return {
width: `${asideWidth.value}px`, width: `${asideWidth.value}px`,
height: `${asideHeight.value}px`, height: `${asideHeight.value}px`,
}; }
}); })
const collapseIcon = computed(() => { const collapseIcon = computed(() => {
return collapse.value ? "expand-cir" : "collapse-cir"; return collapse.value ? 'expand-cir' : 'collapse-cir'
}); })
function computeSlideHeight() { function computeSlideHeight() {
const headEl = document.querySelector(".aside-header")!; const headEl = document.querySelector('.aside-header')!
const { bottomIncludeBody } = getViewportOffset(headEl); const { bottomIncludeBody } = getViewportOffset(headEl)
const height = bottomIncludeBody; const height = bottomIncludeBody
asideHeight.value = height - 24; asideHeight.value = height - 24
} }
useWindowSizeFn(computeSlideHeight, 280); useWindowSizeFn(computeSlideHeight, 280)
onBeforeMount(async () => { onBeforeMount(async () => {
finalStore.fetchCustomConfig(); finalStore.fetchCustomConfig()
}); })
nextTick(()=>{ nextTick(() => {
finalStore.$subscribe(() => { finalStore.$subscribe(() => {
// const customConfig = finalStore.getCustomConfig; // const customConfig = finalStore.getCustomConfig;
// console.log("customConfig订阅aside---------------", customConfig); // console.log("customConfig订阅aside---------------", customConfig);
@ -144,17 +145,18 @@ nextTick(()=>{
// }, []); // }, []);
// console.log("showItems111111111---------------", items); // console.log("showItems111111111---------------", items);
// showItems.value = items; // showItems.value = items;
const config = finalStore.getSystemConfig; const config = finalStore.getSystemConfig
const customConfig = finalStore.getCustomConfig; const customConfig = finalStore.getCustomConfig
if ( if (
configFilterRef.value.length > 0 && configFilterRef.value.length > 0
isEqual(configFilterRef.value, finalStore.getFilterConfig) && && isEqual(configFilterRef.value, finalStore.getFilterConfig)
customObjRef.value && && customObjRef.value
isEqual(customObjRef.value, customTempObjRef.value) && isEqual(customObjRef.value, customTempObjRef.value)
) { )
return; return
}
if (config == null || customConfig == null) return; if (config == null || customConfig == null)
return
// console.log("config", config, "customConfig", customConfig); // console.log("config", config, "customConfig", customConfig);
/* rao /* rao
const showKeys = [...customConfig].filter(key => !asideMap[key].isDefaultFilter)// 获取customConfig 非isDefaultFilter的选项 const showKeys = [...customConfig].filter(key => !asideMap[key].isDefaultFilter)// 获取customConfig 非isDefaultFilter的选项
@ -162,166 +164,173 @@ nextTick(()=>{
showKeys.unshift(...defaultKeys) showKeys.unshift(...defaultKeys)
*/ */
let sortKeyList: any = []; const sortKeyList: any = []
finalStore.getFilterConfig.map((item: any) => { finalStore.getFilterConfig.forEach((item: any) => {
sortKeyList.push(item?.id); sortKeyList.push(item?.id)
}); })
const showKeys = [...sortKeyList]; const showKeys = [...sortKeyList]
Object.keys(config).forEach((key) => { Object.keys(config).forEach((key) => {
if (key.startsWith("iz") && asideMap[key] !== undefined) if (key.startsWith('iz') && asideMap[key] !== undefined) {
asideVisible[key] = asideVisible[key]
(showKeys.includes(key) || asideMap[key].isDefaultFilter) && config[key] === "Y"; = (showKeys.includes(key) || asideMap[key].isDefaultFilter) && config[key] === 'Y'
}); }
})
if (customObjRef.value) { if (customObjRef.value) {
// 赋值 // 赋值
Object.keys(customObjRef.value).map((key) => { Object.keys(customObjRef.value).forEach((key) => {
if (asideMap.hasOwnProperty(key)) { // if (asideMap.hasOwnProperty(key)) {
const str = key.toLowerCase(); if (Object.prototype.hasOwnProperty.call(asideMap, key)) {
const str = key.toLowerCase()
// console.log("customObjRef.value[str]1111111111111", customObjRef.value[str]); // console.log("customObjRef.value[str]1111111111111", customObjRef.value[str]);
if (str == "izsimilarity") { if (str == 'izsimilarity') {
if (typeof customObjRef.value[str] == "string") { if (typeof customObjRef.value[str] == 'string')
customObjRef.value[str] = customObjRef.value[str].split(","); customObjRef.value[str] = customObjRef.value[str].split(',')
asideValue[key] = customObjRef.value[str] // 赋值
console.log('相似度2222222222', asideValue[key])
}
else if (str == 'izyear') {
if (typeof customObjRef.value[str] == 'string') {
const time = customObjRef.value[str].split('-')
time[0] = new Date(time[0]).getTime()
time[1] = new Date(time[1]).getTime()
customObjRef.value[str] = time
} }
asideValue[key] = customObjRef.value[str]; // 赋值 asideValue[key] = customObjRef.value[str] // 赋值
console.log("相似度2222222222", asideValue[key]); console.log('时间2222222222', asideValue[key])
} else if (str == "izyear") {
if (typeof customObjRef.value[str] == "string") {
let time = customObjRef.value[str].split("-");
time[0] = new Date(time[0]).getTime();
time[1] = new Date(time[1]).getTime();
customObjRef.value[str] = time;
} }
asideValue[key] = customObjRef.value[str]; // 赋值 else if (customObjRef.value[str]) {
console.log("时间2222222222", asideValue[key]); console.log('customObjRef.value[str]222222', customObjRef.value[str])
} else if (customObjRef.value[str]) {
console.log("customObjRef.value[str]222222", customObjRef.value[str]);
// let list = customObjRef.value[str].split(','); // let list = customObjRef.value[str].split(',');
// console.log("list222222", list); // console.log("list222222", list);
if (typeof customObjRef.value[str] == "string") { if (typeof customObjRef.value[str] == 'string') {
customObjRef.value[str] = customObjRef.value[str].split(","); customObjRef.value[str] = customObjRef.value[str].split(',')
asideValue[key] = customObjRef.value[str]; // 赋值 asideValue[key] = customObjRef.value[str] // 赋值
}else { }
asideValue[key] = customObjRef.value[str]; // 赋值 else {
asideValue[key] = customObjRef.value[str] // 赋值
} }
} else { }
asideValue[key] = null; else {
asideValue[key] = null
} }
// asideMap[str].defaultValue = customObjRef.value[str];// 赋值 // asideMap[str].defaultValue = customObjRef.value[str];// 赋值
} }
}); })
customTempObjRef.value = customObjRef.value; customTempObjRef.value = customObjRef.value
console.log("asideValue直接处理后的结果", asideValue); console.log('asideValue直接处理后的结果', asideValue)
console.log("customTempObjRef.value", customTempObjRef.value); console.log('customTempObjRef.value', customTempObjRef.value)
let tempobj = cloneDeep(asideValue); const tempobj = cloneDeep(asideValue)
console.log("tempObj", tempobj); console.log('tempObj', tempobj)
finalStore.setAsideValue(tempobj); finalStore.setAsideValue(tempobj)
} }
// console.log("showKeys", showKeys); // console.log("showKeys", showKeys);
const items = showKeys.reduce((acc, key) => { const items = showKeys.reduce((acc, key) => {
const currentData = asideMap[key]; const currentData = asideMap[key]
const render = currentData?.render; const render = currentData?.render
if (render !== false) { if (render !== false) {
const str = key?.toLowerCase(); const str = key?.toLowerCase()
const o = { const o = {
key: str, key: str,
config: asideMap[str], config: asideMap[str],
};
return [...acc, o];
} else {
return acc;
} }
}, []); return [...acc, o]
console.log("showItems=================================", items); }
showItems.value = items; else {
configFilterRef.value = finalStore.getFilterConfig; return acc
}); }
}, [])
console.log('showItems=================================', items)
showItems.value = items
configFilterRef.value = finalStore.getFilterConfig
})
}) })
watch(asideVisible, (newVal) => { watch(asideVisible, (newVal) => {
Object.keys(asideValue).forEach((key) => { Object.keys(asideValue).forEach((key) => {
if (newVal[key] === false) asideValue[key] = asideMap[key].defaultValue; if (newVal[key] === false)
}); asideValue[key] = asideMap[key].defaultValue
}); })
})
const asideEnter = ref(false); const asideEnter = ref(false)
const showCollapse = computed(() => { const showCollapse = computed(() => {
return collapse.value ? true : asideEnter.value; return collapse.value ? true : asideEnter.value
}); })
const showSearch = ref(false); const showSearch = ref(false)
function setShowSearch(value: boolean) { function setShowSearch(value: boolean) {
showSearch.value = value; showSearch.value = value
if(!value){ if (!value)
inputChange('') inputChange('')
}
} }
// 滚动容器，让key对应模块处于可视区域 // 滚动容器，让key对应模块处于可视区域
function scrollHandler(key: string) { function scrollHandler(key: string) {
const element = document.querySelector(`#${key}`); const element = document.querySelector(`#${key}`)
element?.scrollIntoView(true); element?.scrollIntoView(true)
} }
async function filterHandler(searchId: string) { async function filterHandler(searchId: string) {
emitter.emit("filter-final", searchId); // emitter.emit("filter-final", searchId);
const res = await getFilterList({ userSearchId: searchId }); const res = await getFilterList({ userSearchId: searchId })
// console.log("顾虑结果", res); // console.log("顾虑结果", res);
if (res.code == "OK") { if (res.code == 'OK') {
let obj = res.data; const obj = res.data
customObjRef.value = res.data; customObjRef.value = res.data
let showKeys: any[] = []; const showKeys: any[] = []
Object.keys(obj).map((key) => { Object.keys(obj).forEach((key) => {
if (asideMap.hasOwnProperty(key)) { // if (asideMap.hasOwnProperty(key)) {
showKeys.push(key); if (Object.prototype.hasOwnProperty.call(asideMap, key))
} showKeys.push(key)
}); })
console.log("showKeys1111111111111111", showKeys); console.log('showKeys1111111111111111', showKeys)
finalStore.setCustomConfig(showKeys); finalStore.setCustomConfig(showKeys)
} }
} }
function editFilter(filter: any) { function editFilter(filter: any) {
const modal = unref(newFilterModalRef)! as any; const modal = unref(newFilterModalRef)! as any
modal.showModal(); modal.showModal()
modal.edit(filter); modal.edit(filter)
} }
// watch(asideValue, (newVal) => { // watch(asideValue, (newVal) => {
// finalStore.setAsideValue(newVal); // finalStore.setAsideValue(newVal);
// }); // });
const inputChange = (keyword) => { function inputChange(keyword) {
emit("inputChange", keyword); emit('inputChange', keyword)
}; }
const handleOk = (item: any) => { function handleOk(item: any) {
console.log("handleOk", item); console.log('handleOk', item)
if (item) { if (item) {
AdvanceFilterRef.value.setCurrentlySelectedAdvanced(item.searchname); AdvanceFilterRef.value.setCurrentlySelectedAdvanced(item.searchname)
filterHandler(item.id); filterHandler(item.id)
} else { }
AdvanceFilterRef.value.setCurrentlySelectedAdvanced("高级筛选"); else {
filterHandler(""); AdvanceFilterRef.value.setCurrentlySelectedAdvanced('高级筛选')
filterHandler('')
} }
}; }
function updateComponent(key, e) { function updateComponent(key, e) {
console.log("跟新值", key, e); console.log('跟新值', key, e)
console.log("tempAsideValue跟新值", finalStore.getAsideValue, asideValue); console.log('tempAsideValue跟新值', finalStore.getAsideValue, asideValue)
// let tempAsideValue = finalStore.getAsideValue || asideValue; // let tempAsideValue = finalStore.getAsideValue || asideValue;
let tempobj = cloneDeep(asideValue); const tempobj = cloneDeep(asideValue)
console.log(tempobj, "tempobj"); console.log(tempobj, 'tempobj')
tempobj[key] = e; tempobj[key] = e
console.log(tempobj, "tempobj After"); console.log(tempobj, 'tempobj After')
customObjRef.value = tempobj; customObjRef.value = tempobj
// asideValue = Object.assign({}, asideValue, tempobj); // asideValue = Object.assign({}, asideValue, tempobj);
console.log("asideValue跟新值", tempobj); console.log('asideValue跟新值', tempobj)
finalStore.setAsideValue(tempobj); finalStore.setAsideValue(tempobj)
} }
</script> </script>
<template> <template>
@ -343,18 +352,18 @@ function updateComponent(key, e) {
v-show="showSearch" v-show="showSearch"
@select="scrollHandler" @select="scrollHandler"
@close="setShowSearch(false)" @close="setShowSearch(false)"
@inputChange="inputChange" @input-change="inputChange"
@showSearch="setShowSearch(true)" @show-search="setShowSearch(true)"
/> />
<!-- 高级筛选 --> <!-- 高级筛选 -->
<AdvanceFilter <AdvanceFilter
v-show="!showSearch" v-show="!showSearch"
ref="AdvanceFilterRef"
:type="1" :type="1"
@select="filterHandler" @select="filterHandler"
@update:search="setShowSearch(true)" @update:search="setShowSearch(true)"
@show-custom="showModal(customModalRef)" @show-custom="showModal(customModalRef)"
@show-filter="showModal(filterModalRef)" @show-filter="showModal(filterModalRef)"
ref="AdvanceFilterRef"
/> />
</div> </div>
@ -375,10 +384,10 @@ function updateComponent(key, e) {
ref="filterModalRef" ref="filterModalRef"
@edit-filter="editFilter" @edit-filter="editFilter"
@show-new-filter="showModal(newFilterModalRef)" @show-new-filter="showModal(newFilterModalRef)"
@handleOk="handleOk" @handle-ok="handleOk"
/> />
<!-- 新增过滤 --> <!-- 新增过滤 -->
<NewFilterModal ref="newFilterModalRef" @onOk="newFilterOk" /> <NewFilterModal ref="newFilterModalRef" @on-ok="newFilterOk" />
</n-scrollbar> </n-scrollbar>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save