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

暂存

Browse Source
fix/finalHighSearch
Dragon 1 year ago
parent 921f8ee7f6
commit bba565500f
3 changed files with 417 additions and 265 deletions
Show Stats Download Patch File Download Diff File

15
src/store/modules/final.ts
Unescape View File

@ -6,6 +6,7 @@ export interface ConfigState {
customConfig: string[] | null customConfig: string[] | null
asideValue: any asideValue: any
listKey: number listKey: number
filterConfig: any[]
} }
export const useFinalStore = defineStore({ export const useFinalStore = defineStore({
@ -14,6 +15,7 @@ export const useFinalStore = defineStore({
customConfig: null, customConfig: null,
asideValue: null, asideValue: null,
listKey: 0, listKey: 0,
filterConfig: [],
}), }),
getters: { getters: {
getCustomConfig(): string[] | null { getCustomConfig(): string[] | null {
@ -22,20 +24,33 @@ export const useFinalStore = defineStore({
getAsideValue(): any { getAsideValue(): any {
return this.asideValue return this.asideValue
}, },
getFilterConfig(): any {
return this.filterConfig
},
}, },
actions: { actions: {
setAsideValue(value) { setAsideValue(value) {
this.asideValue = value this.asideValue = value
}, },
// 设置个性化配置
setCustomConfig(value) {
this.customConfig = value
},
setListKey() { setListKey() {
this.listKey = new Date().getTime() this.listKey = new Date().getTime()
}, },
setFilterConfig(value) {
this.filterConfig = value
},
// 获取终审个性化配置 // 获取终审个性化配置
async fetchCustomConfig() { async fetchCustomConfig() {
const res = await getFilter(1) const res = await getFilter(1)
console.log(res.data)
console.log(898989)
const { data } = res const { data } = res
const list = data && data.searchcount ? data.searchcount.split(',') : [] const list = data && data.searchcount ? data.searchcount.split(',') : []
this.customConfig = list this.customConfig = list
console.log(list)
return list return list
}, },
}, },

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

@ -10,173 +10,299 @@ 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 { getFilterList } from '@/api/home/main'
import type { AsideConfig } from "/#/api"; import type { AsideEntity } from '@/config/aside'
import emitter from "@/utils/mitt"; import { asideMap } from '@/config/final'
import type { AsideConfig } from '/#/api'
const emit = defineEmits(["inputChange"]); import emitter from '@/utils/mitt'
const finalStore = useFinal();
const emit = defineEmits(['inputChange'])
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 }[]>([])
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 = ref(null);
const newFilterModalRef = ref(null); const filterModalRef = ref(null)
const customModalRef = ref(null); const newFilterModalRef = ref(null)
const AdvanceFilterRef: any = ref(null); const customModalRef = ref(null)
const AdvanceFilterRef: any = ref(null)
const customObjRef = ref<any>(null) // 获取高级筛选获取的值
const customTempObjRef = ref<any>(null) // 获取高级筛选获取的值(作对比)
const configFilterRef = ref<any>([]) // 获取排序的值
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 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()
}); })
finalStore.$subscribe(() => { function initFilter(args, state) {
const customConfig = finalStore.getCustomConfig; const customConfig = finalStore.getCustomConfig
console.log(9999)
if (customConfig === null) return; console.log(customConfig)
console.log('args===>', args)
const showKeys: string[] = [...customConfig]; 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( const defaultKeys = Object.keys(asideMap).filter(
(key) => asideMap[key].isDefaultFilter key => asideMap[key].isDefaultFilter,
); )
showKeys.unshift(...defaultKeys); console.log(defaultKeys)
showKeys.unshift(...defaultKeys)
console.log(asideMap)
Object.keys(asideMap).forEach((key) => { Object.keys(asideMap).forEach((key) => {
// 设置显示的或者默认显示的 // 设置显示的或者默认显示的
if (key.startsWith("iz")) console.log(key)
asideVisible[key] = if (key.startsWith('iz')) {
asideMap[key] && (showKeys.includes(key) || asideMap[key].isDefaultFilter); 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) => { const items = showKeys.reduce((acc, key) => {
if (asideMap[key]) { if (asideMap[key]) {
const config = { const config = {
key, key,
config: asideMap[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) => { 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)
} }
function filterHandler(searchId: string) { // function filterHandler(searchId: string) {
emitter.emit("filter-final", searchId); // 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) { 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('')
} }
}; }
</script> </script>
<template> <template>
@ -198,17 +324,17 @@ const handleOk = (item: any) => {
v-show="showSearch" v-show="showSearch"
@select="scrollHandler" @select="scrollHandler"
@close="setShowSearch(false)" @close="setShowSearch(false)"
@inputChange="inputChange" @input-change="inputChange"
/> />
<!-- 高级筛选 --> <!-- 高级筛选 -->
<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>
@ -228,7 +354,7 @@ const handleOk = (item: any) => {
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" /> <NewFilterModal ref="newFilterModalRef" />

327
src/views/home/aside/Aside.vue
Unescape View File

@ -10,109 +10,110 @@ import {
shallowRef, shallowRef,
unref, unref,
watch, watch,
} from "vue"; } from 'vue'
import { CustomFilterModalVue, FilterModalVue, NewFilterModalVue } from "./comp/modals"; import dayjs from 'dayjs'
import Search from "./comp/Search.vue"; import { cloneDeep, isEqual } from 'lodash-es'
import AdvanceFilter from "./comp/AdvanceFilter.vue"; import { CustomFilterModalVue, FilterModalVue, NewFilterModalVue } from './comp/modals'
import { getViewportOffset } from "@/utils/domUtils"; import Search from './comp/Search.vue'
import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn"; import AdvanceFilter from './comp/AdvanceFilter.vue'
import { useConfig } from "@/store/modules/asideConfig"; import { getViewportOffset } from '@/utils/domUtils'
import type { Filter } from "/#/home"; import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
import type { AsideEntity } from "@/config/aside"; import { useConfig } from '@/store/modules/asideConfig'
import { asideMap } from "@/config/aside"; import type { Filter } from '/#/home'
import type { AsideConfig } from "/#/api"; import type { AsideEntity } from '@/config/aside'
import emitter from "@/utils/mitt"; import { asideMap } from '@/config/aside'
import { getFilterList } from "@/api/home/main"; import type { AsideConfig } from '/#/api'
import dayjs from "dayjs"; import emitter from '@/utils/mitt'
import { cloneDeep, isEqual } from "lodash-es"; import { getFilterList } from '@/api/home/main'
const configStore = useConfig(); const configStore = useConfig()
// 所有左侧模块的值 // 所有左侧模块的值
let 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 }[]>([])
Object.keys(asideMap).forEach((key) => { Object.keys(asideMap).forEach((key) => {
const entity = asideMap[key]; const entity = asideMap[key]
const { defaultValue } = entity; const { defaultValue } = entity
asideValue[key] = defaultValue; 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 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>([]) // 获取排序的值
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()
} }
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
computeSlideHeight(); computeSlideHeight()
let tempAsideValue = cloneDeep(asideValue); const tempAsideValue = cloneDeep(asideValue)
// configStore.setAsideValue(tempAsideValue); // configStore.setAsideValue(tempAsideValue);
console.log("asideMap和asideValue", tempAsideValue); console.log('asideMap和asideValue', tempAsideValue)
}); })
}); })
const collapse = ref(false); const collapse = ref(false)
const mousetrap = inject("mousetrap") as any; const mousetrap = inject('mousetrap') as any
mousetrap.bind("[", collapseHandler); mousetrap.bind('[', collapseHandler)
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 () => {
configStore.fetchConfig(); configStore.fetchConfig()
configStore.fetchCustomConfig(); configStore.fetchCustomConfig()
}); })
configStore.$subscribe(() => { configStore.$subscribe(() => {
const config = configStore.getConfig; const config = configStore.getConfig
const customConfig = configStore.getCustomConfig; const customConfig = configStore.getCustomConfig
if ( if (
configFilterRef.value.length > 0 && configFilterRef.value.length > 0
isEqual(configFilterRef.value, configStore.getFilterConfig) && && isEqual(configFilterRef.value, configStore.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的选项
@ -120,150 +121,160 @@ configStore.$subscribe(() => {
showKeys.unshift(...defaultKeys) showKeys.unshift(...defaultKeys)
*/ */
let sortKeyList: any = []; const sortKeyList: any = []
console.log('init')
configStore.getFilterConfig.map((item: any) => { configStore.getFilterConfig.map((item: any) => {
sortKeyList.push(item.id); console.log(item)
}); console.log('item')
const showKeys = [...sortKeyList];
sortKeyList.push(item.id)
})
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).map((key) => {
if (asideMap.hasOwnProperty(key)) { if (asideMap.hasOwnProperty(key)) {
const str = key.toLowerCase(); 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 (str != 'izsimilarity' && str != 'izyear' && customObjRef.value[str]) {
console.log("时间2222222222", asideValue[key]); console.log('customObjRef.value[str]222222', customObjRef.value[str])
} else if (str != "izsimilarity" && str != "izyear" && 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);
asideValue[key] = customObjRef.value[str]; // 赋值 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)
configStore.setAsideValue(tempobj); configStore.setAsideValue(tempobj)
} }
// console.log("showKeys", showKeys); // console.log("showKeys", showKeys);
const items = showKeys.reduce((acc, key) => { const items = showKeys.reduce((acc, key) => {
const { render } = asideMap[key]; const { render } = asideMap[key]
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 = configStore.getFilterConfig; return acc
}); }
}, [])
console.log('showItems=================================', items)
showItems.value = items
configFilterRef.value = configStore.getFilterConfig
})
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
} }
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,
); )
}; }
// 滚动容器，让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', searchId) // emitter.emit('filter', 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).map((key) => {
if (asideMap.hasOwnProperty(key)) { if (asideMap.hasOwnProperty(key))
showKeys.push(key); showKeys.push(key)
} })
}); console.log(showKeys)
// console.log(showKeys); configStore.setCustomConfig(showKeys)
configStore.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)
} }
function updateComponent(key, e) { function updateComponent(key, e) {
console.log("跟新值", key, e); console.log('跟新值', key, e)
console.log("tempAsideValue跟新值", configStore.getAsideValue, asideValue); console.log('tempAsideValue跟新值', configStore.getAsideValue, asideValue)
// let tempAsideValue = configStore.getAsideValue || asideValue; // let tempAsideValue = configStore.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)
configStore.setAsideValue(tempobj); configStore.setAsideValue(tempobj)
} }
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("高级筛选");
filterHandler("");
} }
}; else {
AdvanceFilterRef.value.setCurrentlySelectedAdvanced('高级筛选')
filterHandler('')
}
}
// watch(asideValue, (newVal) => { // watch(asideValue, (newVal) => {
// console.log("asideValue处理后", newVal); // console.log("asideValue处理后", newVal);
@ -294,12 +305,12 @@ const handleOk = (item: any) => {
<!-- 高级筛选 --> <!-- 高级筛选 -->
<AdvanceFilter <AdvanceFilter
v-show="!showSearch" v-show="!showSearch"
ref="AdvanceFilterRef"
:type="0" :type="0"
@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>
@ -318,10 +329,10 @@ const handleOk = (item: any) => {
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"
/> />
<!-- 新增过滤 --> <!-- 新增过滤 -->
<NewFilterModalVue ref="newFilterModalRef" @onOk="newFilterOk" /> <NewFilterModalVue ref="newFilterModalRef" @on-ok="newFilterOk" />
<!-- 筛选 --> <!-- 筛选 -->
<CustomFilterModalVue ref="customModalRef" /> <CustomFilterModalVue ref="customModalRef" />
</n-scrollbar> </n-scrollbar>

Write Preview
Loading…
Cancel
Save