From 3b2f46e984e968f87163a028c3dccc0b2ed300b9 Mon Sep 17 00:00:00 2001 From: raofuzi <2641346316@qq.com> Date: Sat, 13 Apr 2024 17:27:32 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/components.d.ts b/components.d.ts index e12f925..11049e1 100644 --- a/components.d.ts +++ b/components.d.ts @@ -11,7 +11,6 @@ declare module 'vue' { BasicModal: typeof import('./src/components/Modal/BasicModal.vue')['default'] DataHeader: typeof import('./src/components/DataHeader/index.vue')['default'] NAvatar: typeof import('naive-ui')['NAvatar'] - NBackTop: typeof import('naive-ui')['NBackTop'] NButton: typeof import('naive-ui')['NButton'] NCard: typeof import('naive-ui')['NCard'] NCheckbox: typeof import('naive-ui')['NCheckbox'] @@ -22,8 +21,6 @@ declare module 'vue' { NDialogProvider: typeof import('naive-ui')['NDialogProvider'] NDivider: typeof import('naive-ui')['NDivider'] NDropdown: typeof import('naive-ui')['NDropdown'] - NEllipsis: typeof import('naive-ui')['NEllipsis'] - NEmpty: typeof import('naive-ui')['NEmpty'] NForm: typeof import('naive-ui')['NForm'] NFormItem: typeof import('naive-ui')['NFormItem'] NGi: typeof import('naive-ui')['NGi'] @@ -35,20 +32,16 @@ declare module 'vue' { NModal: typeof import('naive-ui')['NModal'] NNotificationProvider: typeof import('naive-ui')['NNotificationProvider'] NotPassed: typeof import('./src/components/NotPassed.vue')['default'] - NPopconfirm: typeof import('naive-ui')['NPopconfirm'] 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'] - NTabPane: typeof import('naive-ui')['NTabPane'] - NTabs: typeof import('naive-ui')['NTabs'] NTag: typeof import('naive-ui')['NTag'] - NTimeline: typeof import('naive-ui')['NTimeline'] - NTimelineItem: typeof import('naive-ui')['NTimelineItem'] NTooltip: typeof import('naive-ui')['NTooltip'] NUpload: typeof import('naive-ui')['NUpload'] NUploadDragger: typeof import('naive-ui')['NUploadDragger'] From d40509e29425888b2a7099b44f7b1bf7daa4572c Mon Sep 17 00:00:00 2001 From: raofuzi <2641346316@qq.com> Date: Sat, 13 Apr 2024 18:25:25 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 24 - src/layout/components/Header/RecycleModal.vue | 446 +++++++++--------- src/views/final/aside/Aside.vue | 373 ++++++++------- 3 files changed, 411 insertions(+), 432 deletions(-) diff --git a/components.d.ts b/components.d.ts index 11049e1..ddd3db7 100644 --- a/components.d.ts +++ b/components.d.ts @@ -10,41 +10,17 @@ declare module 'vue' { Application: typeof import('./src/components/Application/Application.vue')['default'] BasicModal: typeof import('./src/components/Modal/BasicModal.vue')['default'] DataHeader: typeof import('./src/components/DataHeader/index.vue')['default'] - NAvatar: typeof import('naive-ui')['NAvatar'] NButton: typeof import('naive-ui')['NButton'] - NCard: typeof import('naive-ui')['NCard'] NCheckbox: typeof import('naive-ui')['NCheckbox'] - NCollapse: typeof import('naive-ui')['NCollapse'] - NCollapseItem: typeof import('naive-ui')['NCollapseItem'] NConfigProvider: typeof import('naive-ui')['NConfigProvider'] - NDatePicker: typeof import('naive-ui')['NDatePicker'] NDialogProvider: typeof import('naive-ui')['NDialogProvider'] - NDivider: typeof import('naive-ui')['NDivider'] - NDropdown: typeof import('naive-ui')['NDropdown'] NForm: typeof import('naive-ui')['NForm'] 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'] NMessageProvider: typeof import('naive-ui')['NMessageProvider'] NModal: typeof import('naive-ui')['NModal'] NNotificationProvider: typeof import('naive-ui')['NNotificationProvider'] 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'] Robot: typeof import('./src/components/Robot/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/src/layout/components/Header/RecycleModal.vue b/src/layout/components/Header/RecycleModal.vue index 4ae54e0..7122402 100644 --- a/src/layout/components/Header/RecycleModal.vue +++ b/src/layout/components/Header/RecycleModal.vue @@ -3,36 +3,35 @@ import Masonry from 'masonry-layout' import { useDialog, useMessage } from 'naive-ui' 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 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 { formatToDateHMS } from '@/utils/dateUtil' import { off, on } from '@/utils/domUtils' -import ConfrimModal from "./ConfrimModal.vue" const cardStyle = { '--n-padding-bottom': '40px', '--n-padding-left': '120px', } -let startTime = 0; -let endTime = 0; -let startCalTime = false; +let startTime = 0 +let endTime = 0 +let startCalTime = false const message = useMessage() const timeRange = ref('desc') const similarRange = ref('desc') const batch = ref(false) -const imageRef = ref(); -let filterId = null; +const imageRef = ref() +const filterId = null const isTop = ref(false) let sortObj: any = { - orderByUptime: 'desc' -}; + orderByUptime: 'desc', +} const timeOptions = [{ label: '升序', @@ -68,12 +67,12 @@ const viewLabel = computed(() => { }) const maxHeight = computed(() => { - let height = "800"; - const screenWidth = window.screen.width; - if(screenWidth <= 1920) { - height = "600"; - } - return height + 'px'; + let height = '800' + const screenWidth = window.screen.width + if (screenWidth <= 1920) + height = '600' + + return `${height}px` }) const masonryRef = ref(null) @@ -87,10 +86,10 @@ const pagination = reactive({ let loading = false let _masonry: null | Masonry = null const show = ref(false) -const selectedApproveItems = ref([]); // 审核批量选中 -const dialog = useDialog(); -let processItems: any[] = []; -const confrimModalRef = ref(); +const selectedApproveItems = ref([]) // 审核批量选中 +const dialog = useDialog() +let processItems: any[] = [] +const confrimModalRef = ref() const layout = debounce(() => { if (!show.value) @@ -111,11 +110,11 @@ const layout = debounce(() => { const scrollHeight = el.value!.scrollHeight const clientHeight = el.value!.clientHeight const top = scrollHeight - clientHeight - 20 - if(isTop.value) { + if (isTop.value) el.value!.scrollTo({ top: 0, behavior: 'instant' }) - }else { + else el.value!.scrollTo({ top, behavior: 'instant' }) - } + // let height = 800 - 15; // const screenWidth = window.screen.width; // if(screenWidth <= 1920) { @@ -123,28 +122,28 @@ const layout = debounce(() => { // } // el.value!.scrollTo({ top: height, behavior: 'instant' }) loading = false - console.log("loading---------------", loading); - console.log("pagination.pageNo---------------", pagination.pageNo); - if(pagination.pageNo == 3) { - let timer; - if(timer) { - clearTimeout(timer); - } + console.log('loading---------------', loading) + console.log('pagination.pageNo---------------', pagination.pageNo) + if (pagination.pageNo == 3) { + let timer + if (timer) + clearTimeout(timer) + timer = setTimeout(() => { isTop.value = false - console.log("isTop.value---------------", isTop.value); + console.log('isTop.value---------------', isTop.value) }, 1000) } }) }, 300) watch(viewMode, () => { - isTop.value = true; + isTop.value = true layout() }) onBeforeMount(async () => { - + }) let canloadMore = true @@ -153,7 +152,7 @@ useInfiniteScroll( el as any, () => { loading = false - console.log("加载了000000000000000---------------------------"); + console.log('加载了000000000000000---------------------------') loadMore() }, { distance: 10, canLoadMore: () => canloadMore }, @@ -163,15 +162,15 @@ async function featchList() { loading = true try { // 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 }) // TODO：测试数据 // result.data = Array.from({ length: 30 }) const { data, pageCount } = result // canloadMore = pageCount >= pagination.pageNo && pageCount > 0; - canloadMore = data.pages >= pagination.pageNo && data.pages > 0; - console.log("canloadMore------------", canloadMore); - + canloadMore = data.pages >= pagination.pageNo && data.pages > 0 + console.log('canloadMore------------', canloadMore) + return result.data.records // const list = data.map((item) => { // return { @@ -181,32 +180,31 @@ async function featchList() { // return list } catch (error) { - canloadMore = false; + canloadMore = false return [] } } async function loadMore() { - - console.log("执行l------------------------", loading, el.value, pagination.pageNo); + console.log('执行l------------------------', loading, el.value, pagination.pageNo) if (loading || el.value == null) return // loading = true - pagination.pageNo = pagination.pageNo + 1; + pagination.pageNo = pagination.pageNo + 1 const more = await featchList() - console.log("more------------------------", more); + console.log('more------------------------', more) listData.value.push(...more) layout() } onUpdated(() => { - if(startCalTime) { - endTime = new Date().getTime(); - if(endTime - startTime > 500) { + if (startCalTime) { + endTime = new Date().getTime() + if (endTime - startTime > 500) createDom() - } - }else { + } + else { removeDom() } // if(elwc.value) { @@ -220,8 +218,8 @@ let selectionBox: HTMLDivElement | null const selectIds = ref([]) function downHandler(event: MouseEvent) { - startTime = new Date().getTime(); - startCalTime = true; + startTime = new Date().getTime() + startCalTime = true if (!selectionBox) return @@ -264,17 +262,14 @@ function imUpdateSelectIds(x: number, y: number, w: number, h: number) { // selectedApproveItems.value.splice(tempApproveIndex, 1); // } }) - selectedApproveItems.value = []; + selectedApproveItems.value = [] // 选中复选框 - listData.value.map(item => { - if(selectIds.value.includes(String(item.pictureId))) { - item.checked = true; - selectedApproveItems.value.push(item); + listData.value.forEach((item) => { + if (selectIds.value.includes(String(item.pictureId))) { + item.checked = true + selectedApproveItems.value.push(item) } - }); - - - + }) } function isSelected(pictureId: number) { @@ -282,12 +277,12 @@ function isSelected(pictureId: number) { } function moveHandler(e: MouseEvent) { - if(startCalTime) { - endTime = new Date().getTime(); - if(endTime - startTime > 500) { + if (startCalTime) { + endTime = new Date().getTime() + if (endTime - startTime > 500) createDom() - } - }else { + } + else { removeDom() } if (!selectionBox || !start) @@ -307,68 +302,66 @@ function moveHandler(e: MouseEvent) { } function createDom() { - let dom = document.createElement('div'); - dom.className = "selection-box"; - dom.style.width = "1px"; - dom.style.border = "1px dotted black"; - dom.style.position = "absolute"; - dom.style.display = "block"; - dom.style.zIndex = '9999'; - document.body.appendChild(dom); + const dom = document.createElement('div') + dom.className = 'selection-box' + dom.style.width = '1px' + dom.style.border = '1px dotted black' + dom.style.position = 'absolute' + dom.style.display = 'block' + dom.style.zIndex = '9999' + document.body.appendChild(dom) selectionBox = document.querySelector('.selection-box') as HTMLDivElement } function removeDom() { - let dom = document.getElementsByClassName("selection-box")[0]; - if(dom) { - document.body.removeChild(dom); - } + const dom = document.getElementsByClassName('selection-box')[0] + if (dom) + document.body.removeChild(dom) } function upHandler(event: MouseEvent) { - endTime = new Date().getTime(); - startCalTime = false; - if(endTime - startTime > 500) { + endTime = new Date().getTime() + startCalTime = false + if (endTime - startTime > 500) createDom() - }else { + else removeDom() - } + if (!selectionBox) - return + return selectionBox.style.display = 'none' start = null - if(selectionBox.style.width == "0px") { + if (selectionBox.style.width == '0px') { removeDom() - if(event.target?.className.indexOf("n-checkbox-box__border") != -1 ) { + if (event.target?.className.indexOf('n-checkbox-box__border') != -1) return - } + selectIds.value = [] - selectedApproveItems.value.forEach((item) => (item.checked = false)); - selectedApproveItems.value.length = 0; - listData.value.map(item => { - item.checked = false; - }); + selectedApproveItems.value.forEach(item => (item.checked = false)) + selectedApproveItems.value.length = 0 + listData.value.forEach((item) => { + item.checked = false + }) // batch.value = false; } } const gridHeight = computed(() => { // return viewMode.value !== 'masonry' ? '157px' : '' - let height = ""; - if (viewMode.value === "masonry") { - height = ""; - } else if (viewMode.value === "horizontalVersion") { - height = "145px"; - } else if (viewMode.value === "verticalVersion") { - height = "300px"; - } else if (viewMode.value === "3:4") { - height = "240px"; - } - return height; + let height = '' + if (viewMode.value === 'masonry') + height = '' + else if (viewMode.value === 'horizontalVersion') + height = '145px' + else if (viewMode.value === 'verticalVersion') + height = '300px' + else if (viewMode.value === '3:4') + height = '240px' + + return height }) function addListeners() { - // selectionBox.style['z-index'] = '-1' on(el.value!, 'mousedown', downHandler) on(el.value!, 'mousemove', moveHandler) @@ -391,7 +384,7 @@ function afterLeave() { removeListeners() } -onMounted(async() => { +onMounted(async () => { show.value && addListeners() removeDom() }) @@ -406,38 +399,38 @@ async function showModal() { } async function onChange() { - if(timeRange.value == "desc") { - timeRange.value = "asc"; - }else { - timeRange.value = "desc"; - } + if (timeRange.value == 'desc') + timeRange.value = 'asc' + else + timeRange.value = 'desc' + sortObj = { // orderbyname: val, - orderByUptime: timeRange.value + orderByUptime: timeRange.value, } - pagination.pageNo = 1; - canloadMore = true; + pagination.pageNo = 1 + canloadMore = true const list = await featchList() listData.value = list - isTop.value = true; + isTop.value = true layout() } async function onChangeView() { - if(similarRange.value == "desc") { - similarRange.value = "asc"; - }else { - similarRange.value = "desc"; - } + if (similarRange.value == 'desc') + similarRange.value = 'asc' + else + similarRange.value = 'desc' + sortObj = { // orderbyname: val, - orderBySimilarity: similarRange.value + orderBySimilarity: similarRange.value, } - pagination.pageNo = 1; - canloadMore = true; + pagination.pageNo = 1 + canloadMore = true const list = await featchList() listData.value = list - isTop.value = true; + isTop.value = true layout() } @@ -454,6 +447,7 @@ async function commit() { const list = await featchList() listData.value = list layout() + setBatch(false) } } function remove() { @@ -465,17 +459,16 @@ function remove() { confrimModalRef?.value?.showModal() } - function setBatch(value) { - if (value && batch.value) { - batch.value = !value; - } else { - batch.value = value; - } + if (value && batch.value) + batch.value = !value + else + batch.value = value + if (value === false) { selectIds.value = [] - selectedApproveItems.value.forEach((item) => (item.checked = false)); - selectedApproveItems.value.length = 0; + selectedApproveItems.value.forEach(item => (item.checked = false)) + selectedApproveItems.value.length = 0 } } @@ -485,26 +478,24 @@ defineExpose({ const notPassModalRef = ref(null) const showActions = computed(() => { - return selectedApproveItems.value.length > 0 && batch; -}); - + return selectedApproveItems.value.length > 0 && batch +}) function onCheckChange(checked: any, item: any) { - item.checked = checked - const index = selectedApproveItems.value.indexOf(item); - const picIndex = selectIds.value.indexOf(item.pictureId); + const index = selectedApproveItems.value.indexOf(item) + const picIndex = selectIds.value.indexOf(item.pictureId) - if (index === -1 && checked) { + if (index === -1 && checked) selectedApproveItems.value.push(item) - } else { - selectedApproveItems.value.splice(index, 1); - } - if (picIndex === -1 && checked) { - selectIds.value.push(item.pictureId); - } else { - selectIds.value.splice(picIndex, 1); - } + else + selectedApproveItems.value.splice(index, 1) + + if (picIndex === -1 && checked) + selectIds.value.push(item.pictureId) + else + selectIds.value.splice(picIndex, 1) + setTimeout(() => { nextTick(() => { batch.value = true @@ -518,28 +509,29 @@ function rejectHandler() { } function reset() { - batch.value = false; + batch.value = false // pagination.pageNo = 1; - pagination.pageNo = 1; - pagination.pageSize = 20; - selectIds.value = []; - selectedApproveItems.value.length = 0; - loading = false; - canloadMore = true; - layout(); + pagination.pageNo = 1 + pagination.pageSize = 20 + selectIds.value = [] + selectedApproveItems.value.length = 0 + loading = false + canloadMore = true + layout() } function validate(items: any[]) { - if (items.length === 0) return "至少选中一个任务"; - return null; + if (items.length === 0) + return '至少选中一个任务' + return null } function approvalHandler(items?: any) { // if (batch.value) { - processItems = selectedApproveItems.value + processItems = selectedApproveItems.value // } // 任务包图片 => 点击 => 通过/不通过按钮 if (items !== undefined && !(items instanceof PointerEvent)) processItems = [items] - console.log("batch-------------",batch.value,selectedApproveItems.value,processItems); + console.log('batch-------------', batch.value, selectedApproveItems.value, processItems) const msg = validate(processItems) if (msg !== null) { @@ -586,9 +578,8 @@ function doAudit(param: any) { message.info(res.message) // emitter.emit('refresh') refreshHandler() - } - else message.error(res.message) + else { message.error(res.message) } }) } function reloadList() { @@ -597,11 +588,11 @@ function reloadList() { async function refreshHandler(filtersearchId?: any) { // 注释 rao start reset() - pagination.pageNo = 1; + pagination.pageNo = 1 const list = await featchList() listData.value = list layout() -// 注释 rao end + // 注释 rao end // reset(); // if (filtersearchId) { @@ -613,53 +604,51 @@ async function refreshHandler(filtersearchId?: any) { useInfiniteScroll( el as any, () => { - console.log("加载了333333333333333333333333---------------------------"); - loadMore(); + console.log('加载了333333333333333333333333---------------------------') + loadMore() }, - { distance: 10, canLoadMore: () => canloadMore } - ); - }, 300); - }); -} - -watch(() => show.value, - async(newVal) => { - if(show.value) { - pagination.pageNo = 1; - const list = await featchList() - listData.value = list - console.log("加载了1111111111111---------------------------", listData.value); - layout() - } - }, -) + { distance: 10, canLoadMore: () => canloadMore }, + ) + }, 300) + }) +} +watch(() => show.value, async (newVal) => { + if (show.value) { + pagination.pageNo = 1 + const list = await featchList() + listData.value = list + console.log('加载了1111111111111---------------------------', listData.value) + layout() + } +}) -watch(() => pagination.pageNo, - (newVal, oldVal) => { - console.log("加载了22222222222222222---------------------------", newVal, oldVal, canloadMore); - if(newVal == oldVal) { - return - } - if((newVal == 1 || newVal == 2) && canloadMore) { - setTimeout(() => { - nextTick(() => { - loading = false - loadMore(); - }) - }, 500) - } - }, -); +watch(() => pagination.pageNo, (newVal, oldVal) => { + console.log('加载了22222222222222222---------------------------', newVal, oldVal, canloadMore) + if (newVal == oldVal) + return + if ((newVal == 1 || newVal == 2) && canloadMore) { + setTimeout(() => { + nextTick(() => { + loading = false + loadMore() + }) + }, 500) + } +}) @@ -977,7 +971,6 @@ watch(() => pagination.pageNo, } } - .scroll { overflow-y: auto; // height: calc(100vh - 282px); @@ -1005,4 +998,5 @@ watch(() => pagination.pageNo, height: 100%; object-fit: cover; } -} +} + diff --git a/src/views/final/aside/Aside.vue b/src/views/final/aside/Aside.vue index 7a743c6..fa794a3 100644 --- a/src/views/final/aside/Aside.vue +++ b/src/views/final/aside/Aside.vue @@ -10,109 +10,110 @@ import { shallowRef, unref, watch, -} from "vue"; -import { CustomFilterModalVue, FilterModal, NewFilterModal } from "@/views/final/comp"; -import Search from "@/views/home/aside/comp/Search.vue"; -import AdvanceFilter from "@/views/home/aside/comp/AdvanceFilter.vue"; -import { getViewportOffset } from "@/utils/domUtils"; -import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn"; -import { useFinal } from "@/store/modules/final"; -import type { Filter } from "/#/home"; -import type { AsideEntity } from "@/config/aside"; -import { asideMap } from "@/config/final"; -import type { AsideConfig } from "/#/api"; -import emitter from "@/utils/mitt"; -import { getFilterList } from "@/api/home/main"; -import { cloneDeep, isEqual } from "lodash-es"; - -const emit = defineEmits(["inputChange"]); -const finalStore = useFinal(); +} from 'vue' +import { cloneDeep, isEqual } from 'lodash-es' +import { CustomFilterModalVue, FilterModal, NewFilterModal } from '@/views/final/comp' +import Search from '@/views/home/aside/comp/Search.vue' +import AdvanceFilter from '@/views/home/aside/comp/AdvanceFilter.vue' +import { getViewportOffset } from '@/utils/domUtils' +import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn' +import { useFinal } from '@/store/modules/final' +import type { Filter } from '/#/home' +import type { AsideEntity } from '@/config/aside' +import { asideMap } from '@/config/final' +import type { AsideConfig } from '/#/api' +import emitter from '@/utils/mitt' +import { getFilterList } from '@/api/home/main' + +const emit = defineEmits(['inputChange']) +const finalStore = useFinal() // 所有左侧模块的值 -const asideValue: Record = reactive({}); +const asideValue: Record = reactive({}) // 左侧某个模块是否显示: 个人配置 -const asideVisible: Partial> = reactive({}); +const asideVisible: Partial> = reactive({}) // 当前显示的模块，按照数组顺序显示 -const showItems = shallowRef<{ key: string; config: AsideEntity }[]>([]); -const initAsideValueRef = ref(null); // 所有左侧模块的值(初始值) -const customObjRef = ref(null); // 获取高级筛选获取的值 -const customTempObjRef = ref(null); // 获取高级筛选获取的值(作对比) -const configFilterRef = ref([]); // 获取排序的值 +const showItems = shallowRef<{ key: string, config: AsideEntity }[]>([]) +const initAsideValueRef = ref(null) // 所有左侧模块的值(初始值) +const customObjRef = ref(null) // 获取高级筛选获取的值 +const customTempObjRef = ref(null) // 获取高级筛选获取的值(作对比) +const configFilterRef = ref([]) // 获取排序的值 -initAsideValueRef.value = cloneDeep(asideMap); +initAsideValueRef.value = cloneDeep(asideMap) onBeforeMount(async () => { - finalStore.fetchConfig(); - finalStore.fetchCustomConfig(); -}); + finalStore.fetchConfig() + finalStore.fetchCustomConfig() +}) Object.keys(asideMap).forEach((key) => { - const { defaultValue, inFilterList } = asideMap[key]; - if (inFilterList !== false) asideValue[key] = defaultValue; -}); + const { defaultValue, inFilterList } = asideMap[key] + if (inFilterList !== false) + asideValue[key] = defaultValue +}) -const filterModalRef:any = ref(null); -const newFilterModalRef = ref(null); -const customModalRef = ref(null); -const AdvanceFilterRef: any = ref(null); +const filterModalRef: any = ref(null) +const newFilterModalRef = ref(null) +const customModalRef = ref(null) +const AdvanceFilterRef: any = ref(null) function showModal(modalRef: any) { - const modal = unref(modalRef)! as any; - modal.showModal(); + const modal = unref(modalRef)! as any + modal.showModal() } -const newFilterOk = () => { +function newFilterOk() { filterModalRef.value.query( filterModalRef.value.pagination.page, - filterModalRef.value.pagination.pageSize - ); - filterModalRef.value.showModal(); -}; + filterModalRef.value.pagination.pageSize, + ) + filterModalRef.value.showModal() +} -const mousetrap = inject("mousetrap") as any; -mousetrap.bind("[", collapseHandler); +const mousetrap = inject('mousetrap') as any +mousetrap.bind('[', collapseHandler) onMounted(() => { nextTick(() => { - computeSlideHeight(); - }); -}); + computeSlideHeight() + }) +}) -const collapse = ref(false); +const collapse = ref(false) function collapseHandler() { - collapse.value = !collapse.value; + collapse.value = !collapse.value } const asideWidth = computed(() => { - return collapse.value ? 0 : 308; -}); + return collapse.value ? 0 : 308 +}) -const asideHeight = ref(500); +const asideHeight = ref(500) const asideStyle = computed(() => { return { width: `${asideWidth.value}px`, height: `${asideHeight.value}px`, - }; -}); + } +}) const collapseIcon = computed(() => { - return collapse.value ? "expand-cir" : "collapse-cir"; -}); + return collapse.value ? 'expand-cir' : 'collapse-cir' +}) function computeSlideHeight() { - const headEl = document.querySelector(".aside-header")!; - const { bottomIncludeBody } = getViewportOffset(headEl); - const height = bottomIncludeBody; - asideHeight.value = height - 24; + const headEl = document.querySelector('.aside-header')! + const { bottomIncludeBody } = getViewportOffset(headEl) + const height = bottomIncludeBody + asideHeight.value = height - 24 } -useWindowSizeFn(computeSlideHeight, 280); +useWindowSizeFn(computeSlideHeight, 280) onBeforeMount(async () => { - finalStore.fetchCustomConfig(); -}); + finalStore.fetchCustomConfig() +}) -nextTick(()=>{ +nextTick(() => { finalStore.$subscribe(() => { // const customConfig = finalStore.getCustomConfig; // console.log("customConfig订阅aside---------------", customConfig); @@ -144,17 +145,18 @@ nextTick(()=>{ // }, []); // console.log("showItems111111111---------------", items); // showItems.value = items; - const config = finalStore.getSystemConfig; - const customConfig = finalStore.getCustomConfig; + const config = finalStore.getSystemConfig + const customConfig = finalStore.getCustomConfig if ( - configFilterRef.value.length > 0 && - isEqual(configFilterRef.value, finalStore.getFilterConfig) && - customObjRef.value && - isEqual(customObjRef.value, customTempObjRef.value) - ) { - return; - } - if (config == null || customConfig == null) return; + configFilterRef.value.length > 0 + && isEqual(configFilterRef.value, finalStore.getFilterConfig) + && customObjRef.value + && isEqual(customObjRef.value, customTempObjRef.value) + ) + return + + if (config == null || customConfig == null) + return // console.log("config", config, "customConfig", customConfig); /* rao const showKeys = [...customConfig].filter(key => !asideMap[key].isDefaultFilter)// 获取customConfig 非isDefaultFilter的选项 @@ -162,166 +164,173 @@ nextTick(()=>{ showKeys.unshift(...defaultKeys) */ - let sortKeyList: any = []; - finalStore.getFilterConfig.map((item: any) => { - sortKeyList.push(item?.id); - }); - const showKeys = [...sortKeyList]; + const sortKeyList: any = [] + finalStore.getFilterConfig.forEach((item: any) => { + sortKeyList.push(item?.id) + }) + const showKeys = [...sortKeyList] Object.keys(config).forEach((key) => { - if (key.startsWith("iz") && asideMap[key] !== undefined) - asideVisible[key] = - (showKeys.includes(key) || asideMap[key].isDefaultFilter) && config[key] === "Y"; - }); + if (key.startsWith('iz') && asideMap[key] !== undefined) { + asideVisible[key] + = (showKeys.includes(key) || asideMap[key].isDefaultFilter) && config[key] === 'Y' + } + }) if (customObjRef.value) { // 赋值 - Object.keys(customObjRef.value).map((key) => { - if (asideMap.hasOwnProperty(key)) { - const str = key.toLowerCase(); + Object.keys(customObjRef.value).forEach((key) => { + // if (asideMap.hasOwnProperty(key)) { + if (Object.prototype.hasOwnProperty.call(asideMap, key)) { + const str = key.toLowerCase() // console.log("customObjRef.value[str]1111111111111", customObjRef.value[str]); - if (str == "izsimilarity") { - if (typeof customObjRef.value[str] == "string") { - 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") { - let time = customObjRef.value[str].split("-"); - time[0] = new Date(time[0]).getTime(); - time[1] = new Date(time[1]).getTime(); - customObjRef.value[str] = time; + if (str == 'izsimilarity') { + if (typeof customObjRef.value[str] == 'string') + 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]; // 赋值 - console.log("时间2222222222", asideValue[key]); - } else if (customObjRef.value[str]) { - console.log("customObjRef.value[str]222222", customObjRef.value[str]); + asideValue[key] = customObjRef.value[str] // 赋值 + console.log('时间2222222222', asideValue[key]) + } + else if (customObjRef.value[str]) { + console.log('customObjRef.value[str]222222', customObjRef.value[str]) // let list = customObjRef.value[str].split(','); // console.log("list222222", list); - if (typeof customObjRef.value[str] == "string") { - customObjRef.value[str] = customObjRef.value[str].split(","); - asideValue[key] = customObjRef.value[str]; // 赋值 - }else { - asideValue[key] = customObjRef.value[str]; // 赋值 + if (typeof customObjRef.value[str] == 'string') { + customObjRef.value[str] = customObjRef.value[str].split(',') + asideValue[key] = customObjRef.value[str] // 赋值 } - } else { - asideValue[key] = null; + else { + asideValue[key] = customObjRef.value[str] // 赋值 + } + } + else { + asideValue[key] = null } // asideMap[str].defaultValue = customObjRef.value[str];// 赋值 } - }); - customTempObjRef.value = customObjRef.value; - console.log("asideValue直接处理后的结果", asideValue); - console.log("customTempObjRef.value", customTempObjRef.value); - let tempobj = cloneDeep(asideValue); - console.log("tempObj", tempobj); - finalStore.setAsideValue(tempobj); + }) + customTempObjRef.value = customObjRef.value + console.log('asideValue直接处理后的结果', asideValue) + console.log('customTempObjRef.value', customTempObjRef.value) + const tempobj = cloneDeep(asideValue) + console.log('tempObj', tempobj) + finalStore.setAsideValue(tempobj) } // console.log("showKeys", showKeys); const items = showKeys.reduce((acc, key) => { - const currentData = asideMap[key]; - const render = currentData?.render; + const currentData = asideMap[key] + const render = currentData?.render if (render !== false) { - const str = key?.toLowerCase(); + const str = key?.toLowerCase() const o = { key: str, config: asideMap[str], - }; - return [...acc, o]; - } else { - return acc; + } + return [...acc, o] + } + else { + return acc } - }, []); - console.log("showItems=================================", items); - showItems.value = items; - configFilterRef.value = finalStore.getFilterConfig; - }); + }, []) + console.log('showItems=================================', items) + showItems.value = items + configFilterRef.value = finalStore.getFilterConfig + }) }) watch(asideVisible, (newVal) => { 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(() => { - return collapse.value ? true : asideEnter.value; -}); + return collapse.value ? true : asideEnter.value +}) -const showSearch = ref(false); +const showSearch = ref(false) function setShowSearch(value: boolean) { - showSearch.value = value; - if(!value){ + showSearch.value = value + if (!value) inputChange('') - } } // 滚动容器，让key对应模块处于可视区域 function scrollHandler(key: string) { - const element = document.querySelector(`#${key}`); - element?.scrollIntoView(true); + const element = document.querySelector(`#${key}`) + element?.scrollIntoView(true) } async function filterHandler(searchId: string) { - emitter.emit("filter-final", searchId); - const res = await getFilterList({ userSearchId: searchId }); + // emitter.emit("filter-final", searchId); + const res = await getFilterList({ userSearchId: searchId }) // console.log("顾虑结果", res); - if (res.code == "OK") { - let obj = res.data; - customObjRef.value = res.data; - let showKeys: any[] = []; - Object.keys(obj).map((key) => { - if (asideMap.hasOwnProperty(key)) { - showKeys.push(key); - } - }); - console.log("showKeys1111111111111111", showKeys); - finalStore.setCustomConfig(showKeys); + if (res.code == 'OK') { + const obj = res.data + customObjRef.value = res.data + const showKeys: any[] = [] + Object.keys(obj).forEach((key) => { + // if (asideMap.hasOwnProperty(key)) { + if (Object.prototype.hasOwnProperty.call(asideMap, key)) + showKeys.push(key) + }) + console.log('showKeys1111111111111111', showKeys) + finalStore.setCustomConfig(showKeys) } } function editFilter(filter: any) { - const modal = unref(newFilterModalRef)! as any; - modal.showModal(); - modal.edit(filter); + const modal = unref(newFilterModalRef)! as any + modal.showModal() + modal.edit(filter) } // watch(asideValue, (newVal) => { // finalStore.setAsideValue(newVal); // }); -const inputChange = (keyword) => { - emit("inputChange", keyword); -}; -const handleOk = (item: any) => { - console.log("handleOk", item); +function inputChange(keyword) { + emit('inputChange', keyword) +} +function handleOk(item: any) { + console.log('handleOk', item) if (item) { - AdvanceFilterRef.value.setCurrentlySelectedAdvanced(item.searchname); - filterHandler(item.id); - } else { - AdvanceFilterRef.value.setCurrentlySelectedAdvanced("高级筛选"); - filterHandler(""); + AdvanceFilterRef.value.setCurrentlySelectedAdvanced(item.searchname) + filterHandler(item.id) } -}; + else { + AdvanceFilterRef.value.setCurrentlySelectedAdvanced('高级筛选') + filterHandler('') + } +} function updateComponent(key, e) { - console.log("跟新值", key, e); - console.log("tempAsideValue跟新值", finalStore.getAsideValue, asideValue); + console.log('跟新值', key, e) + console.log('tempAsideValue跟新值', finalStore.getAsideValue, asideValue) // let tempAsideValue = finalStore.getAsideValue || asideValue; - let tempobj = cloneDeep(asideValue); - console.log(tempobj, "tempobj"); - tempobj[key] = e; - console.log(tempobj, "tempobj After"); - customObjRef.value = tempobj; + const tempobj = cloneDeep(asideValue) + console.log(tempobj, 'tempobj') + tempobj[key] = e + console.log(tempobj, 'tempobj After') + customObjRef.value = tempobj // asideValue = Object.assign({}, asideValue, tempobj); - console.log("asideValue跟新值", tempobj); - finalStore.setAsideValue(tempobj); + console.log('asideValue跟新值', tempobj) + finalStore.setAsideValue(tempobj) } -