|
|
|
@ -1,157 +1,283 @@
|
|
|
|
<script lang="ts" setup>
|
|
|
|
<script lang="ts" setup>
|
|
|
|
import { computed, inject, nextTick, onBeforeMount, onMounted, reactive, ref, shallowRef, unref, watch } from 'vue'
|
|
|
|
import {
|
|
|
|
import { CustomFilterModalVue, FilterModalVue, NewFilterModalVue } from './comp/modals'
|
|
|
|
computed,
|
|
|
|
import Search from './comp/Search.vue'
|
|
|
|
inject,
|
|
|
|
import AdvanceFilter from './comp/AdvanceFilter.vue'
|
|
|
|
nextTick,
|
|
|
|
import { getViewportOffset } from '@/utils/domUtils'
|
|
|
|
onBeforeMount,
|
|
|
|
import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
|
|
|
|
onMounted,
|
|
|
|
import { useConfig } from '@/store/modules/asideConfig'
|
|
|
|
reactive,
|
|
|
|
import type { Filter } from '/#/home'
|
|
|
|
ref,
|
|
|
|
import type { AsideEntity } from '@/config/aside'
|
|
|
|
shallowRef,
|
|
|
|
import { asideMap } from '@/config/aside'
|
|
|
|
unref,
|
|
|
|
import type { AsideConfig } from '/#/api'
|
|
|
|
watch,
|
|
|
|
import emitter from '@/utils/mitt'
|
|
|
|
} from "vue";
|
|
|
|
|
|
|
|
import { CustomFilterModalVue, FilterModalVue, NewFilterModalVue } from "./comp/modals";
|
|
|
|
const configStore = useConfig()
|
|
|
|
import Search from "./comp/Search.vue";
|
|
|
|
|
|
|
|
import AdvanceFilter from "./comp/AdvanceFilter.vue";
|
|
|
|
|
|
|
|
import { getViewportOffset } from "@/utils/domUtils";
|
|
|
|
|
|
|
|
import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
|
|
|
|
|
|
|
|
import { useConfig } from "@/store/modules/asideConfig";
|
|
|
|
|
|
|
|
import type { Filter } from "/#/home";
|
|
|
|
|
|
|
|
import type { AsideEntity } from "@/config/aside";
|
|
|
|
|
|
|
|
import { asideMap } from "@/config/aside";
|
|
|
|
|
|
|
|
import type { AsideConfig } from "/#/api";
|
|
|
|
|
|
|
|
import emitter from "@/utils/mitt";
|
|
|
|
|
|
|
|
import { getFilterList } from "@/api/home/main";
|
|
|
|
|
|
|
|
import dayjs from "dayjs";
|
|
|
|
|
|
|
|
import { cloneDeep, isEqual } from "lodash-es";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const configStore = useConfig();
|
|
|
|
|
|
|
|
|
|
|
|
// 所有左侧模块的值
|
|
|
|
// 所有左侧模块的值
|
|
|
|
const asideValue: Record<keyof typeof asideMap, any> = reactive({})
|
|
|
|
let 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 = 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 customTempObjRef = ref<any>(null); // 获取高级筛选获取的值(作对比)
|
|
|
|
|
|
|
|
const configFilterRef = ref<any>([]); // 获取排序的值
|
|
|
|
|
|
|
|
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);
|
|
|
|
})
|
|
|
|
// configStore.setAsideValue(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 (config == null || customConfig == null)
|
|
|
|
configFilterRef.value.length > 0 &&
|
|
|
|
return
|
|
|
|
isEqual(configFilterRef.value, configStore.getFilterConfig) &&
|
|
|
|
|
|
|
|
customObjRef.value &&
|
|
|
|
const showKeys = [...customConfig].filter(key => !asideMap[key].isDefaultFilter)
|
|
|
|
isEqual(customObjRef.value, customTempObjRef.value)
|
|
|
|
const defaultKeys = Object.keys(asideMap).filter(key => asideMap[key].isDefaultFilter)
|
|
|
|
) {
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (config == null || customConfig == null) return;
|
|
|
|
|
|
|
|
// console.log("config", config, "customConfig", customConfig);
|
|
|
|
|
|
|
|
/* rao
|
|
|
|
|
|
|
|
const showKeys = [...customConfig].filter(key => !asideMap[key].isDefaultFilter)// 获取customConfig 非isDefaultFilter的选项
|
|
|
|
|
|
|
|
const defaultKeys = Object.keys(asideMap).filter(key => asideMap[key].isDefaultFilter)// 获取asideMap isDefaultFilter的选项
|
|
|
|
showKeys.unshift(...defaultKeys)
|
|
|
|
showKeys.unshift(...defaultKeys)
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
Object.keys(config).forEach((key) => {
|
|
|
|
let sortKeyList: any = [];
|
|
|
|
if (key.startsWith('iz') && asideMap[key] !== undefined)
|
|
|
|
configStore.getFilterConfig.map((item: any) => {
|
|
|
|
asideVisible[key] = (showKeys.includes(key) || asideMap[key].isDefaultFilter) && config[key] === 'Y'
|
|
|
|
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 (customObjRef.value) {
|
|
|
|
|
|
|
|
// 赋值
|
|
|
|
|
|
|
|
Object.keys(customObjRef.value).map((key) => {
|
|
|
|
|
|
|
|
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") {
|
|
|
|
|
|
|
|
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]; // 赋值
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
let tempobj = cloneDeep(asideValue);
|
|
|
|
|
|
|
|
console.log("tempObj", tempobj);
|
|
|
|
|
|
|
|
configStore.setAsideValue(tempobj);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// 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);
|
|
|
|
else {
|
|
|
|
showItems.value = items;
|
|
|
|
return acc
|
|
|
|
configFilterRef.value = configStore.getFilterConfig;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
showItems.value = items
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 = () => {
|
|
|
|
|
|
|
|
filterModalRef.value.query(
|
|
|
|
|
|
|
|
filterModalRef.value.pagination.page,
|
|
|
|
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 选择某个过滤配置，刷新图片墙
|
|
|
|
// 选择某个过滤配置，刷新图片墙 -> 筛选搜索条件
|
|
|
|
function filterHandler(searchId: string) {
|
|
|
|
async function filterHandler(searchId: string) {
|
|
|
|
emitter.emit('filter', searchId)
|
|
|
|
// emitter.emit('filter', 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(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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
watch(asideValue, (newVal) => {
|
|
|
|
function updateComponent(key, e) {
|
|
|
|
configStore.setAsideValue(newVal)
|
|
|
|
console.log("跟新值", key, e);
|
|
|
|
}, { deep: true })
|
|
|
|
console.log("tempAsideValue跟新值", configStore.getAsideValue, asideValue);
|
|
|
|
|
|
|
|
// let tempAsideValue = configStore.getAsideValue || asideValue;
|
|
|
|
|
|
|
|
let 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);
|
|
|
|
|
|
|
|
configStore.setAsideValue(tempobj);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleOk = (item: any) => {
|
|
|
|
|
|
|
|
console.log("handleOk", item);
|
|
|
|
|
|
|
|
if (item) {
|
|
|
|
|
|
|
|
AdvanceFilterRef.value.setCurrentlySelectedAdvanced(item.searchname);
|
|
|
|
|
|
|
|
filterHandler(item.id);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
AdvanceFilterRef.value.setCurrentlySelectedAdvanced("高级筛选");
|
|
|
|
|
|
|
|
filterHandler("");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// watch(asideValue, (newVal) => {
|
|
|
|
|
|
|
|
// console.log("asideValue处理后", newVal);
|
|
|
|
|
|
|
|
// configStore.setAsideValue(newVal)
|
|
|
|
|
|
|
|
// }, { deep: true })
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="aside" :style="asideStyle" @mouseenter="asideEnter = true" @mouseleave="asideEnter = false">
|
|
|
|
<div
|
|
|
|
|
|
|
|
class="aside"
|
|
|
|
|
|
|
|
:style="asideStyle"
|
|
|
|
|
|
|
|
@mouseenter="asideEnter = true"
|
|
|
|
|
|
|
|
@mouseleave="asideEnter = false"
|
|
|
|
|
|
|
|
>
|
|
|
|
<div v-show="showCollapse" class="aside-collapse">
|
|
|
|
<div v-show="showCollapse" class="aside-collapse">
|
|
|
|
<div class="aside-collapse-btn" @click="collapseHandler">
|
|
|
|
<div class="aside-collapse-btn" @click="collapseHandler">
|
|
|
|
<SvgIcon :name="collapseIcon" size="40" />
|
|
|
|
<SvgIcon :name="collapseIcon" size="40" />
|
|
|
|
@ -160,23 +286,42 @@ watch(asideValue, (newVal) => {
|
|
|
|
<n-scrollbar trigger="none">
|
|
|
|
<n-scrollbar trigger="none">
|
|
|
|
<div class="aside-header">
|
|
|
|
<div class="aside-header">
|
|
|
|
<!-- 搜索跳转模块 -->
|
|
|
|
<!-- 搜索跳转模块 -->
|
|
|
|
<Search v-show="showSearch" @select="scrollHandler" @close="setShowSearch(false)" />
|
|
|
|
<Search
|
|
|
|
|
|
|
|
v-show="showSearch"
|
|
|
|
|
|
|
|
@select="scrollHandler"
|
|
|
|
|
|
|
|
@close="setShowSearch(false)"
|
|
|
|
|
|
|
|
/>
|
|
|
|
<!-- 高级筛选 -->
|
|
|
|
<!-- 高级筛选 -->
|
|
|
|
<AdvanceFilter
|
|
|
|
<AdvanceFilter
|
|
|
|
v-show="!showSearch" :type="0" @select="filterHandler" @update:search="setShowSearch(true)"
|
|
|
|
v-show="!showSearch"
|
|
|
|
@show-custom="showModal(customModalRef)" @show-filter="showModal(filterModalRef)"
|
|
|
|
:type="0"
|
|
|
|
|
|
|
|
@select="filterHandler"
|
|
|
|
|
|
|
|
@update:search="setShowSearch(true)"
|
|
|
|
|
|
|
|
@show-custom="showModal(customModalRef)"
|
|
|
|
|
|
|
|
@show-filter="showModal(filterModalRef)"
|
|
|
|
|
|
|
|
ref="AdvanceFilterRef"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<component
|
|
|
|
<component
|
|
|
|
:is="item.config.component" v-for="(item, index) in showItems" :id="item.key" :key="index" v-model:value="asideValue[item.key]"
|
|
|
|
:is="item.config.component"
|
|
|
|
|
|
|
|
v-for="(item, index) in showItems"
|
|
|
|
|
|
|
|
:id="item.key"
|
|
|
|
|
|
|
|
:key="item.key"
|
|
|
|
|
|
|
|
v-model:value="asideValue[item.key]"
|
|
|
|
:label="item.config.label"
|
|
|
|
:label="item.config.label"
|
|
|
|
|
|
|
|
@update:value="(e) => updateComponent(item.key, e)"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 过滤列表 -->
|
|
|
|
<!-- 过滤列表 -->
|
|
|
|
<FilterModalVue ref="filterModalRef" @edit-filter="editFilter" @show-new-filter="showModal(newFilterModalRef)" />
|
|
|
|
<FilterModalVue
|
|
|
|
|
|
|
|
ref="filterModalRef"
|
|
|
|
|
|
|
|
@edit-filter="editFilter"
|
|
|
|
|
|
|
|
@show-new-filter="showModal(newFilterModalRef)"
|
|
|
|
|
|
|
|
@handleOk="handleOk"
|
|
|
|
|
|
|
|
/>
|
|
|
|
<!-- 新增过滤 -->
|
|
|
|
<!-- 新增过滤 -->
|
|
|
|
<NewFilterModalVue ref="newFilterModalRef" />
|
|
|
|
<NewFilterModalVue ref="newFilterModalRef" @onOk="newFilterOk" />
|
|
|
|
<!-- 筛选 -->
|
|
|
|
<!-- 筛选 -->
|
|
|
|
<CustomFilterModalVue ref="customModalRef" />
|
|
|
|
<CustomFilterModalVue ref="customModalRef" />
|
|
|
|
</n-scrollbar>
|
|
|
|
</n-scrollbar>
|
|
|
|
@ -188,7 +333,7 @@ watch(asideValue, (newVal) => {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
background: #FFF;
|
|
|
|
background: #fff;
|
|
|
|
border: 1px solid #efeff5;
|
|
|
|
border: 1px solid #efeff5;
|
|
|
|
border-radius: 3px;
|
|
|
|
border-radius: 3px;
|
|
|
|
box-sizing: border-box;
|
|
|
|
box-sizing: border-box;
|
|
|
|
@ -225,11 +370,17 @@ watch(asideValue, (newVal) => {
|
|
|
|
right: -20px;
|
|
|
|
right: -20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep(.n-collapse .n-collapse-item.n-collapse-item--right-arrow-placement .n-collapse-item__header .n-collapse-item-arrow) {
|
|
|
|
::v-deep(.n-collapse
|
|
|
|
|
|
|
|
.n-collapse-item.n-collapse-item--right-arrow-placement
|
|
|
|
|
|
|
|
.n-collapse-item__header
|
|
|
|
|
|
|
|
.n-collapse-item-arrow) {
|
|
|
|
margin-left: 8px;
|
|
|
|
margin-left: 8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep(.n-collapse .n-collapse-item .n-collapse-item__header .n-collapse-item__header-main) {
|
|
|
|
::v-deep(.n-collapse
|
|
|
|
|
|
|
|
.n-collapse-item
|
|
|
|
|
|
|
|
.n-collapse-item__header
|
|
|
|
|
|
|
|
.n-collapse-item__header-main) {
|
|
|
|
font-weight: bold;
|
|
|
|
font-weight: bold;
|
|
|
|
justify-content: space-between;
|
|
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -242,11 +393,18 @@ watch(asideValue, (newVal) => {
|
|
|
|
border-top: 0px;
|
|
|
|
border-top: 0px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep(.n-collapse .n-collapse-item .n-collapse-item__content-wrapper .n-collapse-item__content-inner) {
|
|
|
|
::v-deep(.n-collapse
|
|
|
|
|
|
|
|
.n-collapse-item
|
|
|
|
|
|
|
|
.n-collapse-item__content-wrapper
|
|
|
|
|
|
|
|
.n-collapse-item__content-inner) {
|
|
|
|
padding-top: 10px;
|
|
|
|
padding-top: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep(.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar) {
|
|
|
|
::v-deep(.n-scrollbar
|
|
|
|
|
|
|
|
> .n-scrollbar-rail.n-scrollbar-rail--vertical
|
|
|
|
|
|
|
|
> .n-scrollbar-rail__scrollbar, .n-scrollbar
|
|
|
|
|
|
|
|
+ .n-scrollbar-rail.n-scrollbar-rail--vertical
|
|
|
|
|
|
|
|
> .n-scrollbar-rail__scrollbar) {
|
|
|
|
width: 0px;
|
|
|
|
width: 0px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
