From bba565500f8f10b5f55de36c6a915710f649ee5d Mon Sep 17 00:00:00 2001 From: Dragon <> Date: Wed, 10 Apr 2024 09:53:40 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/modules/final.ts | 15 ++ src/views/final/aside/Aside.vue | 338 ++++++++++++++++++++++---------- src/views/home/aside/Aside.vue | 329 ++++++++++++++++--------------- 3 files changed, 417 insertions(+), 265 deletions(-) diff --git a/src/store/modules/final.ts b/src/store/modules/final.ts index b9ffa2f..c4f83ba 100644 --- a/src/store/modules/final.ts +++ b/src/store/modules/final.ts @@ -6,6 +6,7 @@ export interface ConfigState { customConfig: string[] | null asideValue: any listKey: number + filterConfig: any[] } export const useFinalStore = defineStore({ @@ -14,6 +15,7 @@ export const useFinalStore = defineStore({ customConfig: null, asideValue: null, listKey: 0, + filterConfig: [], }), getters: { getCustomConfig(): string[] | null { @@ -22,20 +24,33 @@ export const useFinalStore = defineStore({ getAsideValue(): any { return this.asideValue }, + getFilterConfig(): any { + return this.filterConfig + }, }, actions: { setAsideValue(value) { this.asideValue = value }, + // 设置个性化配置 + setCustomConfig(value) { + this.customConfig = value + }, setListKey() { this.listKey = new Date().getTime() }, + setFilterConfig(value) { + this.filterConfig = value + }, // 获取终审个性化配置 async fetchCustomConfig() { const res = await getFilter(1) + console.log(res.data) + console.log(898989) const { data } = res const list = data && data.searchcount ? data.searchcount.split(',') : [] this.customConfig = list + console.log(list) return list }, }, diff --git a/src/views/final/aside/Aside.vue b/src/views/final/aside/Aside.vue index 76d70bb..df25a4d 100644 --- a/src/views/final/aside/Aside.vue +++ b/src/views/final/aside/Aside.vue @@ -10,173 +10,299 @@ 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"; - -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 { getFilterList } from '@/api/home/main' +import type { AsideEntity } from '@/config/aside' +import { asideMap } from '@/config/final' +import type { AsideConfig } from '/#/api' +import emitter from '@/utils/mitt' + +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 showItems = shallowRef<{ key: string, config: AsideEntity }[]>([]) Object.keys(asideMap).forEach((key) => { - const { defaultValue, inFilterList } = asideMap[key]; - if (inFilterList !== false) asideValue[key] = defaultValue; -}); - -const filterModalRef = ref(null); -const newFilterModalRef = ref(null); -const customModalRef = ref(null); -const AdvanceFilterRef: any = ref(null); + const { defaultValue, inFilterList } = asideMap[key] + if (inFilterList !== false) + asideValue[key] = defaultValue +}) + +const filterModalRef = ref(null) +const newFilterModalRef = ref(null) +const customModalRef = ref(null) +const AdvanceFilterRef: any = ref(null) +const customObjRef = ref(null) // 获取高级筛选获取的值 +const customTempObjRef = ref(null) // 获取高级筛选获取的值(作对比) +const configFilterRef = ref([]) // 获取排序的值 function showModal(modalRef: any) { - const modal = unref(modalRef)! as any; - modal.showModal(); + const modal = unref(modalRef)! as any + modal.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.$subscribe(() => { - const customConfig = finalStore.getCustomConfig; - - if (customConfig === null) return; - - const showKeys: string[] = [...customConfig]; + finalStore.fetchCustomConfig() +}) + +function initFilter(args, state) { + const customConfig = finalStore.getCustomConfig + console.log(9999) + console.log(customConfig) + console.log('args===>', args) + console.log('state===>', state) + if ( + customObjRef.value + && isEqual(customObjRef.value, customTempObjRef.value) + ) + return + if (customConfig === null) + return + // const sortKeyList: any = [] + // finalStore.getFilterConfig.map((item: any) => { + // sortKeyList.push(item.id) + // }) + // const showKeys = [...sortKeyList] + // console.log(showKeys) + // Object.keys(customConfig).forEach((key) => { + // if (key.startsWith('iz') && asideMap[key] !== undefined) { + // asideVisible[key] + // = (showKeys.includes(key) || asideMap[key].isDefaultFilter) && customConfig[key] === 'Y' + // } + // }) + console.log(9999) + + const showKeys: string[] = [...customConfig] const defaultKeys = Object.keys(asideMap).filter( - (key) => asideMap[key].isDefaultFilter - ); - showKeys.unshift(...defaultKeys); - + key => asideMap[key].isDefaultFilter, + ) + console.log(defaultKeys) + showKeys.unshift(...defaultKeys) + console.log(asideMap) Object.keys(asideMap).forEach((key) => { // 设置显示的或者默认显示的 - if (key.startsWith("iz")) - asideVisible[key] = - asideMap[key] && (showKeys.includes(key) || asideMap[key].isDefaultFilter); - }); - + console.log(key) + if (key.startsWith('iz')) { + asideVisible[key] + = asideMap[key] && (showKeys.includes(key) || asideMap[key].isDefaultFilter) + } + }) + console.log(asideVisible) + if (customObjRef.value) { + console.log('*******') + console.log('customObjRef.value', customObjRef.value) + // 赋值 + Object.keys(customObjRef.value).map((key) => { + console.log(key) + console.log(asideMap) + + if (asideMap.hasOwnProperty(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') { + 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 (str != 'izsimilarity' && str != 'izyear' && customObjRef.value[str]) { + console.log('customObjRef.value[str]222222', customObjRef.value[str]) + // let list = customObjRef.value[str].split(','); + // console.log("list222222", list); + 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) + const tempobj = cloneDeep(asideValue) + console.log('tempObj', tempobj) + finalStore.setAsideValue(tempobj) + } const items = showKeys.reduce((acc, key) => { if (asideMap[key]) { const config = { key, config: asideMap[key], - }; - return [...acc, config]; - } else { - return acc; + } + return [...acc, config] } - }, []); + else { + return acc + } + }, []) + console.log(items) - showItems.value = items; -}); + showItems.value = items + configFilterRef.value = finalStore.getFilterConfig +} + +finalStore.$subscribe((args, state) => { + initFilter(args, state) +}) 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) } -function filterHandler(searchId: string) { - emitter.emit("filter-final", searchId); +// function filterHandler(searchId: string) { +// console.log(searchId) +// emitter.emit('filter-final', searchId) +// } + +// 选择某个过滤配置，刷新图片墙 -> 筛选搜索条件 +async function filterHandler(searchId: string) { + // emitter.emit('filter', searchId) + const res = await getFilterList({ userSearchId: searchId }) + // console.log("顾虑结果", res); + if (res.code == 'OK') { + const obj = res.data + customObjRef.value = { + izproject: null, + izcustomtype: null, + izcustomlevel: null, + izcustomname: null, + iztaskrrom: null, + iztaskstatus: [5], + izstatus: [5], + izvisitpro: null, + izfirm: null, + izproductname: null, + izprojecttype: null, + izupuser: null, + izplan: null, + izsimilarity: null, + izshow: null, + izyear: null, + izpicturetype: null, + izvisitcity: null, + izYeardddd: null, + } + const showKeys: any[] = [] + Object.keys(obj).map((key) => { + if (asideMap.hasOwnProperty(key)) + showKeys.push(key) + }) + console.log(showKeys) + initFilter() + // 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); + finalStore.setAsideValue(newVal) +}) + +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('') } -}; +}