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

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

@ -10,263 +10,281 @@ import {
shallowRef,
unref,
watch,
} from "vue";
import { CustomFilterModalVue, FilterModalVue, NewFilterModalVue } from "./comp/modals";
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();
} from 'vue'
import dayjs from 'dayjs'
import { cloneDeep, isEqual } from 'lodash-es'
import { CustomFilterModalVue, FilterModalVue, NewFilterModalVue } from './comp/modals'
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'
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) => {
const entity = asideMap[key];
const { defaultValue } = entity;
asideValue[key] = defaultValue;
});
const filterModalRef: any = ref(null);
const newFilterModalRef = 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);
const entity = asideMap[key]
const { defaultValue } = entity
asideValue[key] = defaultValue
})
const filterModalRef: any = ref(null)
const newFilterModalRef = 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) {
const modal = unref(modalRef)! as any;
modal.showModal();
const modal = unref(modalRef)! as any
modal.showModal()
}
onMounted(() => {
nextTick(() => {
computeSlideHeight();
let tempAsideValue = cloneDeep(asideValue);
computeSlideHeight()
const tempAsideValue = cloneDeep(asideValue)
// configStore.setAsideValue(tempAsideValue);
console.log("asideMap和asideValue", tempAsideValue);
});
});
console.log('asideMap和asideValue', tempAsideValue)
})
})
const collapse = ref(false);
const mousetrap = inject("mousetrap") as any;
mousetrap.bind("[", collapseHandler);
const collapse = ref(false)
const mousetrap = inject('mousetrap') as any
mousetrap.bind('[', collapseHandler)
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 () => {
configStore.fetchConfig();
configStore.fetchCustomConfig();
});
configStore.fetchConfig()
configStore.fetchCustomConfig()
})
nextTick(()=>{
nextTick(() => {
configStore.$subscribe(() => {
const config = configStore.getConfig;
const customConfig = configStore.getCustomConfig;
if (
configFilterRef.value.length > 0 &&
isEqual(configFilterRef.value, configStore.getFilterConfig) &&
customObjRef.value &&
isEqual(customObjRef.value, customTempObjRef.value)
) {
return;
}
if (config == null || customConfig == null) return;
// console.log("config", config, "customConfig", customConfig);
/* rao
const config = configStore.getConfig
const customConfig = configStore.getCustomConfig
if (
configFilterRef.value.length > 0
&& isEqual(configFilterRef.value, configStore.getFilterConfig)
&& customObjRef.value
&& isEqual(customObjRef.value, customTempObjRef.value)
)
return
if (config == null || customConfig == null)
return
// console.log("config", config, "customConfig", customConfig);
/* rao
const showKeys = [...customConfig].filter(key => !asideMap[key].isDefaultFilter)// 获取customConfig 非isDefaultFilter的选项
const defaultKeys = Object.keys(asideMap).filter(key => asideMap[key].isDefaultFilter)// 获取asideMap isDefaultFilter的选项
showKeys.unshift(...defaultKeys)
*/
let sortKeyList: any = [];
configStore.getFilterConfig.map((item: any) => {
sortKeyList.push(item?.id);
});
const showKeys = [...sortKeyList];
Object.keys(config).forEach((key) => {
if (key.startsWith("iz") && asideMap[key] !== undefined)
asideVisible[key] =
(showKeys.includes(key) || asideMap[key].isDefaultFilter) && config[key] === "Y";
});
if (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(",");
const sortKeyList: any = []
configStore.getFilterConfig.map((item: any) => {
sortKeyList.push(item?.id)
return item
})
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) => {
// TODO hasOwnProperty避免直接调用
// if (asideMap.hasOwnProperty(key)) {
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]; // 赋值
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;
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])
}
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;
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];// 赋值
}
// 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 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;
return key
})
customTempObjRef.value = customObjRef.value
console.log('asideValue直接处理后的结果', asideValue)
console.log('customTempObjRef.value', customTempObjRef.value)
const tempobj = cloneDeep(asideValue)
console.log('tempObj', tempobj)
configStore.setAsideValue(tempobj)
}
}, []);
console.log("showItems=================================", items);
showItems.value = items;
configFilterRef.value = configStore.getFilterConfig;
});
// 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('showItems=================================', items)
showItems.value = items
configFilterRef.value = configStore.getFilterConfig
})
})
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;
showSearch.value = value
}
const newFilterOk = () => {
function newFilterOk() {
filterModalRef.value.query(
filterModalRef.value.pagination.page,
filterModalRef.value.pagination.pageSize
);
filterModalRef.value.showModal();
};
filterModalRef.value.pagination.pageSize,
)
filterModalRef.value.showModal()
}
// 滚动容器，让key对应模块处于可视区域
function scrollHandler(key: string) {
const element = document.querySelector(`#${key}`);
element?.scrollIntoView(true);
const element = document.querySelector(`#${key}`)
element?.scrollIntoView(true)
}
// 选择某个过滤配置，刷新图片墙 -> 筛选搜索条件
async function filterHandler(searchId: string) {
// emitter.emit('filter', searchId)
const res = await getFilterList({ userSearchId: 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[] = [];
if (res.code == 'OK') {
const obj = res.data
customObjRef.value = res.data
const showKeys: any[] = []
Object.keys(obj).map((key) => {
if (asideMap.hasOwnProperty(key)) {
showKeys.push(key);
}
});
// TODO hasOwnProperty避免直接调用
// if (asideMap.hasOwnProperty(key)) {
if (Object.prototype.hasOwnProperty.call(asideMap, key))
showKeys.push(key)
return key
})
// console.log(showKeys);
configStore.setCustomConfig(showKeys);
configStore.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)
}
function updateComponent(key, e) {
console.log("跟新值", key, e);
console.log("tempAsideValue跟新值", configStore.getAsideValue, asideValue);
console.log('跟新值', key, e)
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;
const tempobj = cloneDeep(asideValue)
console.log(tempobj, 'tempobj')
tempobj[key] = e
console.log(tempobj, 'tempobj After')
customObjRef.value = tempobj
// asideValue = Object.assign({}, asideValue, tempobj);
console.log("asideValue跟新值", tempobj);
configStore.setAsideValue(tempobj);
console.log('asideValue跟新值', tempobj)
configStore.setAsideValue(tempobj)
}
const handleOk = (item: any) => {
console.log("handleOk", item);
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('')
}
};
}
// watch(asideValue, (newVal) => {
// console.log("asideValue处理后", newVal);
@ -297,22 +315,22 @@ const handleOk = (item: any) => {
<!-- 高级筛选 -->
<AdvanceFilter
v-show="!showSearch"
ref="AdvanceFilterRef"
:type="0"
@select="filterHandler"
@update:search="setShowSearch(true)"
@show-custom="showModal(customModalRef)"
@show-filter="showModal(filterModalRef)"
ref="AdvanceFilterRef"
/>
</div>
<component
:is="item.config.component"
v-for="(item, index) in showItems"
:is="item.config?.component"
v-for="item 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)"
/>
@ -321,10 +339,10 @@ const handleOk = (item: any) => {
ref="filterModalRef"
@edit-filter="editFilter"
@show-new-filter="showModal(newFilterModalRef)"
@handleOk="handleOk"
@handle-ok="handleOk"
/>
<!-- 新增过滤 -->
<NewFilterModalVue ref="newFilterModalRef" @onOk="newFilterOk" />
<NewFilterModalVue ref="newFilterModalRef" @on-ok="newFilterOk" />
<!-- 筛选 -->
<CustomFilterModalVue ref="customModalRef" />
</n-scrollbar>

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

@ -1,16 +1,12 @@
<script lang="ts" setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import { debounce } from 'lodash-es'
import { useRoute } from 'vue-router'
import { asideMap } from '@/config/aside'
import type { SearchEntity } from '/#/home'
import { useConfig } from '@/store/modules/asideConfig'
import { useRoute } from 'vue-router'
import { useFinal } from "@/store/modules/final";
const finalStore = useFinal();
import { useFinal } from '@/store/modules/final'
const route = useRoute()
const searchContent = route.query.searchContent as string;
defineOptions({ name: 'Search' })
const emit = defineEmits<{
@ -20,13 +16,17 @@ const emit = defineEmits<{
(e: 'showSearch'): void
}>()
const finalStore = useFinal()
const route = useRoute()
const searchContent = route.query.searchContent as string
const data = ref<SearchEntity[]>([])
const popover = ref<ComponentRef | null>(null)
const configStore = useConfig()
const searchKeyword = ref('')
const inputHandler = debounce((keyword) => {
searchKeyword.value = keyword;
searchKeyword.value = keyword
emit('inputChange', keyword)
}, 300)
@ -42,7 +42,7 @@ configStore.$subscribe(() => {
return
const list = keys.map((key) => {
const name = asideMap[key].label
const name = asideMap[key]?.label
return {
key,
@ -59,30 +59,25 @@ function selectHandler(item: SearchEntity) {
}
// 模糊搜索
const searchName = () => {
configStore.setSearchValue(searchKeyword.value);
finalStore.setSearchValue(searchKeyword.value);
emit('inputChange', searchKeyword.value);
function searchName() {
configStore.setSearchValue(searchKeyword.value)
finalStore.setSearchValue(searchKeyword.value)
emit('inputChange', searchKeyword.value)
}
const close = () => {
searchKeyword.value = "";
configStore.setSearchValue(searchKeyword.value);
finalStore.setSearchValue(searchKeyword.value);
emit('close');
function close() {
searchKeyword.value = ''
configStore.setSearchValue(searchKeyword.value)
finalStore.setSearchValue(searchKeyword.value)
emit('close')
}
const initSerach = () => {
function initSerach() {
if (searchContent) {
emit('showSearch')
const id_param = searchContent.match(/-\d+-/);
const id_param = searchContent.match(/-\d+-/)
if (id_param) {
searchKeyword.value = id_param[0].slice(1, -1);
searchKeyword.value = id_param[0].slice(1, -1)
emit('inputChange', searchKeyword.value)
}
}
@ -94,13 +89,28 @@ onMounted(() => {
<template>
<div class="wrapper">
<n-popover ref="popover" :style="{ padding: '0px' }" style="width: 248px" :show-arrow="false"
placement="bottom-start" trigger="focus">
<n-popover
ref="popover"
:style="{ padding: '0px' }"
style="width: 248px"
:show-arrow="false"
placement="bottom-start"
trigger="focus"
>
<template #trigger>
<n-input v-model:value="searchKeyword" style="width: 260px;height: 32px;" placeholder="请输入你需要搜索的内容"
@input="inputHandler">
<n-input
v-model:value="searchKeyword"
style="width: 260px; height: 32px"
placeholder="请输入你需要搜索的内容"
@input="inputHandler"
>
<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>
</n-input>
</template>
@ -113,7 +123,12 @@ onMounted(() => {
</div> -->
</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>
</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 selectIds = ref<string[]>([])
const tempList = ref<string[]>([])
// 左侧隐藏列表
const offList = ref<any[]>([])
// 右侧显示列表
const onList = ref<any[]>([])
const offKeyword = ref('')
const onKeyword = ref('')
function showModal() {
show.value = true
@ -27,7 +34,10 @@ function showModal() {
if (tempList.value.length > 0 && isEqual(tempList.value, configStore.getFilterConfig))
return
console.log('开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------', customConfig)
console.log(
'开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------',
customConfig,
)
const { showList, hideList } = generatList(config, customConfig)
tempList.value = cloneDeep(showList)
if (tempList.value.length > 0)
@ -46,11 +56,6 @@ function closeModal() {
show.value = false
}
// 左侧隐藏列表
const offList = ref<any[]>([])
// 右侧显示列表
const onList = ref<any[]>([])
const allCount = computed(() => {
return `全部筛选(共${offList.value.length}个)`
})
@ -138,7 +143,8 @@ function generatList(config, customConfig) {
const sortKeyList: any = []
configStore.getFilterConfig.map((item: any) => {
sortKeyList.push(item.id)
sortKeyList.push(item?.id)
return item
})
console.log('原始筛选条件sortKeyList', sortKeyList)
const sortList: any = []
@ -146,12 +152,14 @@ function generatList(config, customConfig) {
sortKeyList.map((key) => {
const tempItem = tempOnList.find(item => item.id == key)
sortList.push(tempItem)
return key
})
}
else {
customConfig.map((key) => {
const tempItem = tempOnList.find(item => item.id == key)
sortList.push(tempItem)
return key
})
}
console.log('原始筛选条件sortList', sortList)
@ -185,9 +193,11 @@ configStore.$subscribe(() => {
async function handleSumbit(e: MouseEvent) {
e.preventDefault()
const param = onList.value.map((item) => {
return item.id
}).join(',')
const param = onList.value
.map((item) => {
return item.id
})
.join(',')
await setFilter({ searchcount: param, type: 0 })
const obj = await configStore.fetchCustomConfig()
@ -198,6 +208,7 @@ async function handleSumbit(e: MouseEvent) {
obj.map((key) => {
const tempItem = tempOnList.find(item => item.id == key)
sortList.push(tempItem)
return key
})
console.log('configStore.sortList---------------', sortList)
// setTimeout(() => {
@ -228,8 +239,7 @@ function onCheckChange(checked: any, item: any) {
if (index === -1 && checked)
selectIds.value.push(item.id)
else
index !== -1 && selectIds.value.splice(index, 1)
else index !== -1 && selectIds.value.splice(index, 1)
checkAll.value = offList.value.every(item => item.checked)
}
@ -247,7 +257,10 @@ watch(
return
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)
return
@ -314,9 +327,6 @@ function removeHandler(id: string) {
onList.value.splice(index, 1)
}
const offKeyword = ref('')
const onKeyword = ref('')
const leftInputHandler = debounce((keyword) => {
offKeyword.value = keyword
}, 300)
@ -345,7 +355,13 @@ onMounted(() => {
<template>
<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">
<span class="wrapper-title">自定义筛选</span>
<div class="wrapper-bar">
@ -357,7 +373,10 @@ onMounted(() => {
<n-grid cols="24" class="mt-4 proCard" responsive="screen" :x-gap="24">
<n-grid-item span="11">
<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"
>
<div class="input_wrap">
@ -366,17 +385,29 @@ onMounted(() => {
<SvgIcon size="14px" name="magnifying-1-color999" />
</template>
</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-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
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"
>
<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)"
/>
</div>
@ -385,12 +416,15 @@ onMounted(() => {
</div>
</NCard>
</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" />
</n-grid-item>
<n-grid-item span="11">
<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"
>
<template #header-extra>
@ -402,14 +436,31 @@ onMounted(() => {
<SvgIcon size="14px" name="magnifying-1-color999" />
</template>
</n-input>
<n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;" 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">
<n-scrollbar
style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px"
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" />
<span class="ml-2">{{ item.name }}</span>
<SvgIcon
v-if="!item.fix" size="16px" style="display:block;margin-left: auto;cursor: pointer;"
name="clear" @click="removeHandler(item.id)"
v-if="!item.fix"
size="16px"
style="display: block; margin-left: auto; cursor: pointer"
name="clear"
@click="removeHandler(item.id)"
/>
</div>
</VueDraggable>
@ -424,7 +475,11 @@ onMounted(() => {
<n-button type="info" @click="handleSumbit">
确定
</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>
</div>
@ -453,10 +508,10 @@ onMounted(() => {
&-footer {
display: flex;
justify-content: flex-end;
.n-button--info-type{
background: #507AFD !important;
.n-button--info-type {
background: #507afd !important;
}
.n-button--default-type{
.n-button--default-type {
background: #fff !important;
color: #333333;
}
@ -468,7 +523,7 @@ onMounted(() => {
font-size: 14px;
&:before {
background-color: #1980FF;
background-color: #1980ff;
content: "";
width: 5px;
border-radius: 2px;
@ -498,7 +553,7 @@ onMounted(() => {
.textbtnStyle {
cursor: pointer;
color: #1980FF;
color: #1980ff;
}
.draggable-ul {
@ -531,33 +586,33 @@ onMounted(() => {
--n-padding-top: 0px;
--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-size: 14px;
color: #666;
}
::v-deep(.n-scrollbar){
::v-deep(.n-scrollbar) {
border-left: 1px solid #cad2dd !important;
border-right: 1px solid #cad2dd !important;
border-bottom: 1px solid #E8E8E8 !important;
border-top: 1px solid #E8E8E8 !important;
border-bottom: 1px solid #e8e8e8 !important;
border-top: 1px solid #e8e8e8 !important;
}
::v-deep(.n-card__content){
padding: 20px 24px 0 24px !important;
::v-deep(.n-card__content) {
padding: 20px 24px 0 24px !important;
}
::v-deep(.n-card__footer){
::v-deep(.n-card__footer) {
padding: 0 24px 16px 24px !important;
}
::v-deep(.n-input .n-input-wrapper){
::v-deep(.n-input .n-input-wrapper) {
height: 44px !important;
border: 1px solid #cad2dd !important;
border-bottom: none !important;
// margin-bottom: -3px;
.n-input__input input{
.n-input__input input {
height: 44px !important;
}
}
::v-deep(.n-button--info-type){
background: #507AFD !important;
::v-deep(.n-button--info-type) {
background: #507afd !important;
}
</style>

Write Preview
Loading…
Cancel
Save