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

fix: 修复终审页面无法跳转首页问题

Browse Source
pull/182/head
刘释隆 1 year ago
parent 122a38c381
commit 5156b9ccae
4 changed files with 353 additions and 269 deletions
Show Stats Download Patch File Download Diff File

6
components.d.ts vendored
Unescape View File

@ -23,7 +23,6 @@ declare module 'vue' {
NDivider: typeof import('naive-ui')['NDivider'] NDivider: typeof import('naive-ui')['NDivider']
NDropdown: typeof import('naive-ui')['NDropdown'] NDropdown: typeof import('naive-ui')['NDropdown']
NEllipsis: typeof import('naive-ui')['NEllipsis'] NEllipsis: typeof import('naive-ui')['NEllipsis']
NEmpty: typeof import('naive-ui')['NEmpty']
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'] NGi: typeof import('naive-ui')['NGi']
@ -38,17 +37,14 @@ declare module 'vue' {
NPopconfirm: typeof import('naive-ui')['NPopconfirm'] NPopconfirm: typeof import('naive-ui')['NPopconfirm']
NPopover: typeof import('naive-ui')['NPopover'] NPopover: typeof import('naive-ui')['NPopover']
NPopselect: typeof import('naive-ui')['NPopselect'] NPopselect: typeof import('naive-ui')['NPopselect']
NProgress: typeof import('naive-ui')['NProgress']
NScrollbar: typeof import('naive-ui')['NScrollbar'] NScrollbar: typeof import('naive-ui')['NScrollbar']
NSelect: typeof import('naive-ui')['NSelect'] NSelect: typeof import('naive-ui')['NSelect']
NSlider: typeof import('naive-ui')['NSlider'] NSlider: typeof import('naive-ui')['NSlider']
NSpace: typeof import('naive-ui')['NSpace'] NSpace: typeof import('naive-ui')['NSpace']
NSpin: typeof import('naive-ui')['NSpin'] NSpin: typeof import('naive-ui')['NSpin']
NSwitch: typeof import('naive-ui')['NSwitch'] NSwitch: typeof import('naive-ui')['NSwitch']
NTabPane: typeof import('naive-ui')['NTabPane']
NTabs: typeof import('naive-ui')['NTabs']
NTag: typeof import('naive-ui')['NTag'] NTag: typeof import('naive-ui')['NTag']
NTimeline: typeof import('naive-ui')['NTimeline']
NTimelineItem: typeof import('naive-ui')['NTimelineItem']
NTooltip: typeof import('naive-ui')['NTooltip'] NTooltip: typeof import('naive-ui')['NTooltip']
NUpload: typeof import('naive-ui')['NUpload'] NUpload: typeof import('naive-ui')['NUpload']
NUploadDragger: typeof import('naive-ui')['NUploadDragger'] NUploadDragger: typeof import('naive-ui')['NUploadDragger']

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

@ -10,263 +10,281 @@ 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()
}); })
nextTick(()=>{ nextTick(() => {
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)
// console.log("config", config, "customConfig", customConfig); return
/* rao // console.log("config", config, "customConfig", customConfig);
/* rao
const showKeys = [...customConfig].filter(key => !asideMap[key].isDefaultFilter)// 获取customConfig 非isDefaultFilter的选项 const showKeys = [...customConfig].filter(key => !asideMap[key].isDefaultFilter)// 获取customConfig 非isDefaultFilter的选项
const defaultKeys = Object.keys(asideMap).filter(key => asideMap[key].isDefaultFilter)// 获取asideMap isDefaultFilter的选项 const defaultKeys = Object.keys(asideMap).filter(key => asideMap[key].isDefaultFilter)// 获取asideMap isDefaultFilter的选项
showKeys.unshift(...defaultKeys) showKeys.unshift(...defaultKeys)
*/ */
let sortKeyList: any = []; const sortKeyList: any = []
configStore.getFilterConfig.map((item: any) => { configStore.getFilterConfig.map((item: any) => {
sortKeyList.push(item?.id); sortKeyList.push(item?.id)
}); return item
const showKeys = [...sortKeyList]; })
const showKeys = [...sortKeyList]
Object.keys(config).forEach((key) => {
if (key.startsWith("iz") && asideMap[key] !== undefined) Object.keys(config).forEach((key) => {
asideVisible[key] = if (key.startsWith('iz') && asideMap[key] !== undefined) {
(showKeys.includes(key) || asideMap[key].isDefaultFilter) && config[key] === "Y"; asideVisible[key]
}); = (showKeys.includes(key) || asideMap[key].isDefaultFilter)
if (customObjRef.value) { && config[key] === 'Y'
// 赋值 }
Object.keys(customObjRef.value).map((key) => { })
if (asideMap.hasOwnProperty(key)) { if (customObjRef.value) {
const str = key.toLowerCase(); // 赋值
// console.log("customObjRef.value[str]1111111111111", customObjRef.value[str]); Object.keys(customObjRef.value).map((key) => {
if (str == "izsimilarity") { // TODO hasOwnProperty避免直接调用
if (typeof customObjRef.value[str] == "string") { // if (asideMap.hasOwnProperty(key)) {
customObjRef.value[str] = customObjRef.value[str].split(","); if (Object.prototype.hasOwnProperty.call(customObjRef.value, 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])
} }
asideValue[key] = customObjRef.value[str]; // 赋值 else if (str == 'izyear') {
console.log("相似度2222222222", asideValue[key]); if (typeof customObjRef.value[str] == 'string') {
} else if (str == "izyear") { const time = customObjRef.value[str].split('-')
if (typeof customObjRef.value[str] == "string") { time[0] = new Date(time[0]).getTime()
let time = customObjRef.value[str].split("-"); time[1] = new Date(time[1]).getTime()
time[0] = new Date(time[0]).getTime(); customObjRef.value[str] = time
time[1] = new Date(time[1]).getTime(); }
customObjRef.value[str] = time; asideValue[key] = customObjRef.value[str] // 赋值
console.log('时间2222222222', asideValue[key])
} }
asideValue[key] = customObjRef.value[str]; // 赋值 else if (
console.log("时间2222222222", asideValue[key]); str != 'izsimilarity'
} else if (str != "izsimilarity" && str != "izyear" && customObjRef.value[str]) { && str != 'izyear'
console.log("customObjRef.value[str]222222", customObjRef.value[str]); && customObjRef.value[str]
// let list = customObjRef.value[str].split(','); ) {
// console.log("list222222", list); console.log('customObjRef.value[str]222222', customObjRef.value[str])
asideValue[key] = customObjRef.value[str]; // 赋值 // let list = customObjRef.value[str].split(',');
} else { // console.log("list222222", list);
asideValue[key] = null; asideValue[key] = customObjRef.value[str] // 赋值
}
else {
asideValue[key] = null
}
// asideMap[str].defaultValue = customObjRef.value[str];// 赋值
} }
// asideMap[str].defaultValue = customObjRef.value[str];// 赋值 return key
} })
}); 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); const tempobj = cloneDeep(asideValue)
let tempobj = cloneDeep(asideValue); console.log('tempObj', tempobj)
console.log("tempObj", tempobj); configStore.setAsideValue(tempobj)
configStore.setAsideValue(tempobj);
}
// console.log("showKeys", showKeys);
const items = showKeys.reduce((acc, key) => {
const currentData = asideMap[key];
const render = currentData?.render;
if (render !== false) {
const str = key?.toLowerCase();
const o = {
key: str,
config: asideMap[str],
};
return [...acc, o];
} else {
return acc;
} }
}, []); // console.log("showKeys", showKeys);
console.log("showItems=================================", items); const items = showKeys.reduce((acc, key) => {
showItems.value = items; const currentData = asideMap[key]
configFilterRef.value = configStore.getFilterConfig; const render = currentData?.render
}); if (render !== false) {
const str = key?.toLowerCase()
const o = {
key: str,
config: asideMap[str],
}
return [...acc, o]
}
else {
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,
); )
filterModalRef.value.showModal(); filterModalRef.value.showModal()
}; }
// 滚动容器，让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)) { // TODO hasOwnProperty避免直接调用
showKeys.push(key); // if (asideMap.hasOwnProperty(key)) {
} if (Object.prototype.hasOwnProperty.call(asideMap, key))
}); showKeys.push(key)
return 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("高级筛选"); else {
filterHandler(""); AdvanceFilterRef.value.setCurrentlySelectedAdvanced('高级筛选')
filterHandler('')
} }
}; }
// watch(asideValue, (newVal) => { // watch(asideValue, (newVal) => {
// console.log("asideValue处理后", newVal); // console.log("asideValue处理后", newVal);
@ -297,22 +315,22 @@ 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>
<component <component
:is="item.config.component" :is="item.config?.component"
v-for="(item, index) in showItems" v-for="item in showItems"
:id="item.key" :id="item.key"
:key="item.key" :key="item.key"
v-model:value="asideValue[item.key]" v-model:value="asideValue[item.key]"
:label="item.config.label" :label="item.config?.label"
@update:value="(e) => updateComponent(item.key, e)" @update:value="(e) => updateComponent(item.key, e)"
/> />
@ -321,10 +339,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>

77
src/views/home/aside/comp/Search.vue
Unescape View File

@ -1,16 +1,12 @@
<script lang="ts" setup> <script lang="ts" setup>
import { nextTick, onMounted, ref, watch } from 'vue' import { nextTick, onMounted, ref, watch } from 'vue'
import { debounce } from 'lodash-es' import { debounce } from 'lodash-es'
import { useRoute } from 'vue-router'
import { asideMap } from '@/config/aside' import { asideMap } from '@/config/aside'
import type { SearchEntity } from '/#/home' import type { SearchEntity } from '/#/home'
import { useConfig } from '@/store/modules/asideConfig' import { useConfig } from '@/store/modules/asideConfig'
import { useRoute } from 'vue-router' import { useFinal } from '@/store/modules/final'
import { useFinal } from "@/store/modules/final";
const finalStore = useFinal();
const route = useRoute()
const searchContent = route.query.searchContent as string;
defineOptions({ name: 'Search' }) defineOptions({ name: 'Search' })
const emit = defineEmits<{ const emit = defineEmits<{
@ -20,13 +16,17 @@ const emit = defineEmits<{
(e: 'showSearch'): void (e: 'showSearch'): void
}>() }>()
const finalStore = useFinal()
const route = useRoute()
const searchContent = route.query.searchContent as string
const data = ref<SearchEntity[]>([]) const data = ref<SearchEntity[]>([])
const popover = ref<ComponentRef | null>(null) const popover = ref<ComponentRef | null>(null)
const configStore = useConfig() const configStore = useConfig()
const searchKeyword = ref('') const searchKeyword = ref('')
const inputHandler = debounce((keyword) => { const inputHandler = debounce((keyword) => {
searchKeyword.value = keyword; searchKeyword.value = keyword
emit('inputChange', keyword) emit('inputChange', keyword)
}, 300) }, 300)
@ -42,7 +42,7 @@ configStore.$subscribe(() => {
return return
const list = keys.map((key) => { const list = keys.map((key) => {
const name = asideMap[key].label const name = asideMap[key]?.label
return { return {
key, key,
@ -59,30 +59,25 @@ function selectHandler(item: SearchEntity) {
} }
// 模糊搜索 // 模糊搜索
const searchName = () => { function searchName() {
configStore.setSearchValue(searchKeyword.value); configStore.setSearchValue(searchKeyword.value)
finalStore.setSearchValue(searchKeyword.value); finalStore.setSearchValue(searchKeyword.value)
emit('inputChange', searchKeyword.value); emit('inputChange', searchKeyword.value)
} }
function close() {
searchKeyword.value = ''
configStore.setSearchValue(searchKeyword.value)
const close = () => { finalStore.setSearchValue(searchKeyword.value)
searchKeyword.value = ""; emit('close')
configStore.setSearchValue(searchKeyword.value);
finalStore.setSearchValue(searchKeyword.value);
emit('close');
} }
function initSerach() {
const initSerach = () => {
if (searchContent) { if (searchContent) {
emit('showSearch') emit('showSearch')
const id_param = searchContent.match(/-\d+-/); const id_param = searchContent.match(/-\d+-/)
if (id_param) { if (id_param) {
searchKeyword.value = id_param[0].slice(1, -1); searchKeyword.value = id_param[0].slice(1, -1)
emit('inputChange', searchKeyword.value) emit('inputChange', searchKeyword.value)
} }
} }
@ -94,13 +89,28 @@ onMounted(() => {
<template> <template>
<div class="wrapper"> <div class="wrapper">
<n-popover ref="popover" :style="{ padding: '0px' }" style="width: 248px" :show-arrow="false" <n-popover
placement="bottom-start" trigger="focus"> ref="popover"
:style="{ padding: '0px' }"
style="width: 248px"
:show-arrow="false"
placement="bottom-start"
trigger="focus"
>
<template #trigger> <template #trigger>
<n-input v-model:value="searchKeyword" style="width: 260px;height: 32px;" placeholder="请输入你需要搜索的内容" <n-input
@input="inputHandler"> v-model:value="searchKeyword"
style="width: 260px; height: 32px"
placeholder="请输入你需要搜索的内容"
@input="inputHandler"
>
<template #suffix> <template #suffix>
<SvgIcon size="14px" name="magnifying-1" @click="searchName" style="cursor: pointer;" /> <SvgIcon
size="14px"
name="magnifying-1"
style="cursor: pointer"
@click="searchName"
/>
</template> </template>
</n-input> </n-input>
</template> </template>
@ -113,7 +123,12 @@ onMounted(() => {
</div> --> </div> -->
</n-popover> </n-popover>
<SvgIcon size="16px" style="margin-left: 6px;cursor: pointer;" name="clear" @click="close" /> <SvgIcon
size="16px"
style="margin-left: 6px; cursor: pointer"
name="clear"
@click="close"
/>
</div> </div>
</template> </template>

147
src/views/home/aside/comp/modals/CustomFilterModal.vue
Unescape View File

@ -14,6 +14,13 @@ const configStore = useConfig()
const checkAll = ref(false) const checkAll = ref(false)
const selectIds = ref<string[]>([]) const selectIds = ref<string[]>([])
const tempList = ref<string[]>([]) const tempList = ref<string[]>([])
// 左侧隐藏列表
const offList = ref<any[]>([])
// 右侧显示列表
const onList = ref<any[]>([])
const offKeyword = ref('')
const onKeyword = ref('')
function showModal() { function showModal() {
show.value = true show.value = true
@ -27,7 +34,10 @@ function showModal() {
if (tempList.value.length > 0 && isEqual(tempList.value, configStore.getFilterConfig)) if (tempList.value.length > 0 && isEqual(tempList.value, configStore.getFilterConfig))
return return
console.log('开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------', customConfig) console.log(
'开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------',
customConfig,
)
const { showList, hideList } = generatList(config, customConfig) const { showList, hideList } = generatList(config, customConfig)
tempList.value = cloneDeep(showList) tempList.value = cloneDeep(showList)
if (tempList.value.length > 0) if (tempList.value.length > 0)
@ -46,11 +56,6 @@ function closeModal() {
show.value = false show.value = false
} }
// 左侧隐藏列表
const offList = ref<any[]>([])
// 右侧显示列表
const onList = ref<any[]>([])
const allCount = computed(() => { const allCount = computed(() => {
return `全部筛选(共${offList.value.length}个)` return `全部筛选(共${offList.value.length}个)`
}) })
@ -138,7 +143,8 @@ function generatList(config, customConfig) {
const sortKeyList: any = [] const sortKeyList: any = []
configStore.getFilterConfig.map((item: any) => { configStore.getFilterConfig.map((item: any) => {
sortKeyList.push(item.id) sortKeyList.push(item?.id)
return item
}) })
console.log('原始筛选条件sortKeyList', sortKeyList) console.log('原始筛选条件sortKeyList', sortKeyList)
const sortList: any = [] const sortList: any = []
@ -146,12 +152,14 @@ function generatList(config, customConfig) {
sortKeyList.map((key) => { sortKeyList.map((key) => {
const tempItem = tempOnList.find(item => item.id == key) const tempItem = tempOnList.find(item => item.id == key)
sortList.push(tempItem) sortList.push(tempItem)
return key
}) })
} }
else { else {
customConfig.map((key) => { customConfig.map((key) => {
const tempItem = tempOnList.find(item => item.id == key) const tempItem = tempOnList.find(item => item.id == key)
sortList.push(tempItem) sortList.push(tempItem)
return key
}) })
} }
console.log('原始筛选条件sortList', sortList) console.log('原始筛选条件sortList', sortList)
@ -185,9 +193,11 @@ configStore.$subscribe(() => {
async function handleSumbit(e: MouseEvent) { async function handleSumbit(e: MouseEvent) {
e.preventDefault() e.preventDefault()
const param = onList.value.map((item) => { const param = onList.value
return item.id .map((item) => {
}).join(',') return item.id
})
.join(',')
await setFilter({ searchcount: param, type: 0 }) await setFilter({ searchcount: param, type: 0 })
const obj = await configStore.fetchCustomConfig() const obj = await configStore.fetchCustomConfig()
@ -198,6 +208,7 @@ async function handleSumbit(e: MouseEvent) {
obj.map((key) => { obj.map((key) => {
const tempItem = tempOnList.find(item => item.id == key) const tempItem = tempOnList.find(item => item.id == key)
sortList.push(tempItem) sortList.push(tempItem)
return key
}) })
console.log('configStore.sortList---------------', sortList) console.log('configStore.sortList---------------', sortList)
// setTimeout(() => { // setTimeout(() => {
@ -228,8 +239,7 @@ function onCheckChange(checked: any, item: any) {
if (index === -1 && checked) if (index === -1 && checked)
selectIds.value.push(item.id) selectIds.value.push(item.id)
else else index !== -1 && selectIds.value.splice(index, 1)
index !== -1 && selectIds.value.splice(index, 1)
checkAll.value = offList.value.every(item => item.checked) checkAll.value = offList.value.every(item => item.checked)
} }
@ -247,7 +257,10 @@ watch(
return return
const action = newVal > oldVal ? 'add' : 'remove' const action = newVal > oldVal ? 'add' : 'remove'
const diff = action === 'add' ? difference(selectIds.value, showIds.value) : difference(showIds.value, selectIds.value) const diff
= action === 'add'
? difference(selectIds.value, showIds.value)
: difference(showIds.value, selectIds.value)
if (diff.length === 0) if (diff.length === 0)
return return
@ -314,9 +327,6 @@ function removeHandler(id: string) {
onList.value.splice(index, 1) onList.value.splice(index, 1)
} }
const offKeyword = ref('')
const onKeyword = ref('')
const leftInputHandler = debounce((keyword) => { const leftInputHandler = debounce((keyword) => {
offKeyword.value = keyword offKeyword.value = keyword
}, 300) }, 300)
@ -345,7 +355,13 @@ onMounted(() => {
<template> <template>
<n-modal v-model:show="show" transform-origin="center" :mask-closable="false"> <n-modal v-model:show="show" transform-origin="center" :mask-closable="false">
<n-card class="cardstyle" :bordered="false" size="huge" role="dialog" aria-modal="true"> <n-card
class="cardstyle"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
<div class="wrapper"> <div class="wrapper">
<span class="wrapper-title">自定义筛选</span> <span class="wrapper-title">自定义筛选</span>
<div class="wrapper-bar"> <div class="wrapper-bar">
@ -357,7 +373,10 @@ onMounted(() => {
<n-grid cols="24" class="mt-4 proCard" responsive="screen" :x-gap="24"> <n-grid cols="24" class="mt-4 proCard" responsive="screen" :x-gap="24">
<n-grid-item span="11"> <n-grid-item span="11">
<NCard <NCard
:title="allCount" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small" :title="allCount"
class="dragcardStyle"
:segmented="{ content: true, footer: true }"
size="small"
:bordered="false" :bordered="false"
> >
<div class="input_wrap"> <div class="input_wrap">
@ -366,17 +385,29 @@ onMounted(() => {
<SvgIcon size="14px" name="magnifying-1-color999" /> <SvgIcon size="14px" name="magnifying-1-color999" />
</template> </template>
</n-input> </n-input>
<n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;"> <n-scrollbar
style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px"
>
<div class="draggable-ul"> <div class="draggable-ul">
<div class="draggable-li"> <div class="draggable-li">
<n-checkbox v-model:checked="checkAll" label="全选" :indeterminate="!checkAll" @update:checked="onCheckAllChange" /> <n-checkbox
v-model:checked="checkAll"
label="全选"
:indeterminate="!checkAll"
@update:checked="onCheckAllChange"
/>
</div> </div>
<div <div
v-for="item in offList" v-show="item.name.includes(offKeyword)" :key="item.id" :class="{ 'disable-check': item.fix }" v-for="item in offList"
v-show="item.name.includes(offKeyword)"
:key="item.id"
:class="{ 'disable-check': item.fix }"
class="draggable-li" class="draggable-li"
> >
<n-checkbox <n-checkbox
v-model:checked="item.checked" :label="item.name" :disabled="item.fix" v-model:checked="item.checked"
:label="item.name"
:disabled="item.fix"
@update:checked="onCheckChange($event, item)" @update:checked="onCheckChange($event, item)"
/> />
</div> </div>
@ -385,12 +416,15 @@ onMounted(() => {
</div> </div>
</NCard> </NCard>
</n-grid-item> </n-grid-item>
<n-grid-item style="display: flex;align-items: center;" span="2"> <n-grid-item style="display: flex; align-items: center" span="2">
<SvgIcon size="20" name="switchsvg" /> <SvgIcon size="20" name="switchsvg" />
</n-grid-item> </n-grid-item>
<n-grid-item span="11"> <n-grid-item span="11">
<NCard <NCard
:title="selectCount" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small" :title="selectCount"
class="dragcardStyle"
:segmented="{ content: true, footer: true }"
size="small"
:bordered="false" :bordered="false"
> >
<template #header-extra> <template #header-extra>
@ -402,14 +436,31 @@ onMounted(() => {
<SvgIcon size="14px" name="magnifying-1-color999" /> <SvgIcon size="14px" name="magnifying-1-color999" />
</template> </template>
</n-input> </n-input>
<n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;" class="scroll"> <n-scrollbar
<VueDraggable v-model="onList" class="draggable-ul" :animation="150" group="shared"> style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px"
<div v-for="item in onList" v-show="item.name.includes(onKeyword)" :key="item.id" :draggable="true" class="cursor-move draggable-li"> class="scroll"
>
<VueDraggable
v-model="onList"
class="draggable-ul"
:animation="150"
group="shared"
>
<div
v-for="item in onList"
v-show="item.name.includes(onKeyword)"
:key="item.id"
:draggable="true"
class="cursor-move draggable-li"
>
<SvgIcon name="drag" size="24" /> <SvgIcon name="drag" size="24" />
<span class="ml-2">{{ item.name }}</span> <span class="ml-2">{{ item.name }}</span>
<SvgIcon <SvgIcon
v-if="!item.fix" size="16px" style="display:block;margin-left: auto;cursor: pointer;" v-if="!item.fix"
name="clear" @click="removeHandler(item.id)" size="16px"
style="display: block; margin-left: auto; cursor: pointer"
name="clear"
@click="removeHandler(item.id)"
/> />
</div> </div>
</VueDraggable> </VueDraggable>
@ -424,7 +475,11 @@ onMounted(() => {
<n-button type="info" @click="handleSumbit"> <n-button type="info" @click="handleSumbit">
确定 确定
</n-button> </n-button>
<n-button secondary style="margin-left:15px; border: 1px solid #CAD2DD;" @click="closeModal"> <n-button
secondary
style="margin-left: 15px; border: 1px solid #cad2dd"
@click="closeModal"
>
取消 取消
</n-button> </n-button>
</div> </div>
@ -453,10 +508,10 @@ onMounted(() => {
&-footer { &-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.n-button--info-type{ .n-button--info-type {
background: #507AFD !important; background: #507afd !important;
} }
.n-button--default-type{ .n-button--default-type {
background: #fff !important; background: #fff !important;
color: #333333; color: #333333;
} }
@ -468,7 +523,7 @@ onMounted(() => {
font-size: 14px; font-size: 14px;
&:before { &:before {
background-color: #1980FF; background-color: #1980ff;
content: ""; content: "";
width: 5px; width: 5px;
border-radius: 2px; border-radius: 2px;
@ -498,7 +553,7 @@ onMounted(() => {
.textbtnStyle { .textbtnStyle {
cursor: pointer; cursor: pointer;
color: #1980FF; color: #1980ff;
} }
.draggable-ul { .draggable-ul {
@ -531,33 +586,33 @@ onMounted(() => {
--n-padding-top: 0px; --n-padding-top: 0px;
--n-padding-bottom: 12px; --n-padding-bottom: 12px;
} }
::v-deep(.n-card > .n-card-header .n-card-header__main){ ::v-deep(.n-card > .n-card-header .n-card-header__main) {
font-weight: lighter !important; font-weight: lighter !important;
font-size: 14px; font-size: 14px;
color: #666; color: #666;
} }
::v-deep(.n-scrollbar){ ::v-deep(.n-scrollbar) {
border-left: 1px solid #cad2dd !important; border-left: 1px solid #cad2dd !important;
border-right: 1px solid #cad2dd !important; border-right: 1px solid #cad2dd !important;
border-bottom: 1px solid #E8E8E8 !important; border-bottom: 1px solid #e8e8e8 !important;
border-top: 1px solid #E8E8E8 !important; border-top: 1px solid #e8e8e8 !important;
} }
::v-deep(.n-card__content){ ::v-deep(.n-card__content) {
padding: 20px 24px 0 24px !important; padding: 20px 24px 0 24px !important;
} }
::v-deep(.n-card__footer){ ::v-deep(.n-card__footer) {
padding: 0 24px 16px 24px !important; padding: 0 24px 16px 24px !important;
} }
::v-deep(.n-input .n-input-wrapper){ ::v-deep(.n-input .n-input-wrapper) {
height: 44px !important; height: 44px !important;
border: 1px solid #cad2dd !important; border: 1px solid #cad2dd !important;
border-bottom: none !important; border-bottom: none !important;
// margin-bottom: -3px; // margin-bottom: -3px;
.n-input__input input{ .n-input__input input {
height: 44px !important; height: 44px !important;
} }
} }
::v-deep(.n-button--info-type){ ::v-deep(.n-button--info-type) {
background: #507AFD !important; background: #507afd !important;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save