|
|
|
@ -27,7 +27,7 @@ const emit = defineEmits<{
|
|
|
|
|
|
|
|
|
|
|
|
const data = ref<FilterEntity[]>([]);
|
|
|
|
const data = ref<FilterEntity[]>([]);
|
|
|
|
const unData = ref<FilterEntity[]>([]);
|
|
|
|
const unData = ref<FilterEntity[]>([]);
|
|
|
|
let loading = false;
|
|
|
|
const loading = ref(false);
|
|
|
|
const canloadMore = true;
|
|
|
|
const canloadMore = true;
|
|
|
|
const el = ref<HTMLDivElement | null>(null);
|
|
|
|
const el = ref<HTMLDivElement | null>(null);
|
|
|
|
const popover = ref<ComponentRef | null>(null);
|
|
|
|
const popover = ref<ComponentRef | null>(null);
|
|
|
|
@ -36,6 +36,7 @@ const pagination = reactive({
|
|
|
|
pageSize: 300,
|
|
|
|
pageSize: 300,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
const keyword = ref("");
|
|
|
|
const keyword = ref("");
|
|
|
|
|
|
|
|
const currentlySelectedAdvanced = ref("高级筛选");
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
onMounted(() => {
|
|
|
|
// data.value = generateDefaultConfig()
|
|
|
|
// data.value = generateDefaultConfig()
|
|
|
|
@ -73,12 +74,12 @@ useInfiniteScroll(
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{ distance: 10, interval: 300, canLoadMore: () => false }
|
|
|
|
{ distance: 10, interval: 300, canLoadMore: () => false }
|
|
|
|
);
|
|
|
|
);
|
|
|
|
const showClick = () => {
|
|
|
|
const showClick =async () => {
|
|
|
|
inputHandler("");
|
|
|
|
getSearchedList('')
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
async function loadMore() {
|
|
|
|
async function loadMore() {
|
|
|
|
if (loading || el.value == null) return;
|
|
|
|
if (loading.value || el.value == null) return;
|
|
|
|
|
|
|
|
|
|
|
|
const more = await featchList();
|
|
|
|
const more = await featchList();
|
|
|
|
|
|
|
|
|
|
|
|
@ -88,7 +89,7 @@ async function loadMore() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function featchList() {
|
|
|
|
async function featchList() {
|
|
|
|
loading = true;
|
|
|
|
loading.value = true;
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
const searchParam: FilterSearchParam = {
|
|
|
|
const searchParam: FilterSearchParam = {
|
|
|
|
search_searchname: { value: keyword.value, op: "like", type: "string" },
|
|
|
|
search_searchname: { value: keyword.value, op: "like", type: "string" },
|
|
|
|
@ -102,7 +103,7 @@ async function featchList() {
|
|
|
|
} catch (error) {
|
|
|
|
} catch (error) {
|
|
|
|
return [];
|
|
|
|
return [];
|
|
|
|
} finally {
|
|
|
|
} finally {
|
|
|
|
loading = false;
|
|
|
|
loading.value = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -123,7 +124,7 @@ function generateFilterEntityList(data) {
|
|
|
|
const reg = new RegExp(keyword.value, "gi");
|
|
|
|
const reg = new RegExp(keyword.value, "gi");
|
|
|
|
const hilightText = searchname.replace(
|
|
|
|
const hilightText = searchname.replace(
|
|
|
|
reg,
|
|
|
|
reg,
|
|
|
|
`<span style='color:#FF0000'>${keyword.value}</span>`
|
|
|
|
`<span>${keyword.value}</span>`
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
@ -133,6 +134,7 @@ function generateFilterEntityList(data) {
|
|
|
|
isDefaultFilter: false,
|
|
|
|
isDefaultFilter: false,
|
|
|
|
filterList: list,
|
|
|
|
filterList: list,
|
|
|
|
reorder,
|
|
|
|
reorder,
|
|
|
|
|
|
|
|
searchname
|
|
|
|
};
|
|
|
|
};
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
@ -141,10 +143,15 @@ function generateFilterEntityList(data) {
|
|
|
|
|
|
|
|
|
|
|
|
function selectHandler(item: FilterEntity) {
|
|
|
|
function selectHandler(item: FilterEntity) {
|
|
|
|
(popover.value as any).setShow(false);
|
|
|
|
(popover.value as any).setShow(false);
|
|
|
|
|
|
|
|
currentlySelectedAdvanced.value = item.searchname
|
|
|
|
emit("select", item.id);
|
|
|
|
emit("select", item.id);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const inputHandler = debounce((word) => {
|
|
|
|
const inputHandler = debounce((word) => {
|
|
|
|
|
|
|
|
getSearchedList(word)
|
|
|
|
|
|
|
|
}, 300);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getSearchedList(word) {
|
|
|
|
if (word) {
|
|
|
|
if (word) {
|
|
|
|
pagination.pageSize = 300;
|
|
|
|
pagination.pageSize = 300;
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
@ -163,13 +170,13 @@ const inputHandler = debounce((word) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
data.value = dataArr.sort(
|
|
|
|
data.value = dataArr.sort(
|
|
|
|
(a, b) => Number((a as any).reorder) - Number((b as any).reorder)
|
|
|
|
(a, b) => Number(new Date(a.createtime)) - Number(new Date(b.createtime))
|
|
|
|
);
|
|
|
|
);
|
|
|
|
unData.value = unDataArr.sort(
|
|
|
|
unData.value = unDataArr.sort(
|
|
|
|
(a, b) => Number((a as any).reorder) - Number((b as any).reorder)
|
|
|
|
(a, b) => Number((a as any).reorder) - Number((b as any).reorder)
|
|
|
|
);
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}, 300);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function favoriteHandler(event: MouseEvent, item: any) {
|
|
|
|
function favoriteHandler(event: MouseEvent, item: any) {
|
|
|
|
event.stopImmediatePropagation();
|
|
|
|
event.stopImmediatePropagation();
|
|
|
|
@ -226,7 +233,7 @@ const moveEnd = () => {
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<template #trigger>
|
|
|
|
<template #trigger>
|
|
|
|
<div class="wrapper-left-dropdown" @click="showClick">
|
|
|
|
<div class="wrapper-left-dropdown" @click="showClick">
|
|
|
|
<span style="font-size: 20px;color: #333333;font-weight: Medium;">高级筛选</span>
|
|
|
|
<span style="font-size: 20px;color: #333333;font-weight: Medium;">{{currentlySelectedAdvanced}}</span>
|
|
|
|
<SvgIcon :style="{ marginLeft: '5px' }" name="down" size="14" />
|
|
|
|
<SvgIcon :style="{ marginLeft: '5px' }" name="down" size="14" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
@ -234,7 +241,7 @@ const moveEnd = () => {
|
|
|
|
<div class="wrapper-left-popover">
|
|
|
|
<div class="wrapper-left-popover">
|
|
|
|
<n-input
|
|
|
|
<n-input
|
|
|
|
:style="{ '--n-border': '0px' }"
|
|
|
|
:style="{ '--n-border': '0px' }"
|
|
|
|
placeholder="请输入关键字"
|
|
|
|
placeholder="请输入关键词"
|
|
|
|
@input="inputHandler"
|
|
|
|
@input="inputHandler"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<template #prefix>
|
|
|
|
<template #prefix>
|
|
|
|
@ -257,20 +264,23 @@ const moveEnd = () => {
|
|
|
|
style="display: flex; align-items: center"
|
|
|
|
style="display: flex; align-items: center"
|
|
|
|
@click="selectHandler(item)"
|
|
|
|
@click="selectHandler(item)"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
|
|
|
|
<SvgIcon name="drag" size="18" color="#333333" style="margin-right:3px"/>
|
|
|
|
<SvgIcon
|
|
|
|
<SvgIcon
|
|
|
|
v-if="item.favorite && !item.isDefaultFilter"
|
|
|
|
v-if="item.favorite && !item.isDefaultFilter"
|
|
|
|
name="favorite-fill"
|
|
|
|
name="favorite-fill"
|
|
|
|
color="#fd9b0a"
|
|
|
|
color="#fd9b0a"
|
|
|
|
size="18"
|
|
|
|
size="18"
|
|
|
|
|
|
|
|
style="margin-right:3px"
|
|
|
|
@click="unFavoriteHandler($event, item)"
|
|
|
|
@click="unFavoriteHandler($event, item)"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<SvgIcon
|
|
|
|
<SvgIcon
|
|
|
|
v-else-if="!item.favorite && !item.isDefaultFilter"
|
|
|
|
v-else-if="!item.favorite && !item.isDefaultFilter"
|
|
|
|
name="favorite-unfill"
|
|
|
|
name="favorite-unfill"
|
|
|
|
size="18"
|
|
|
|
size="18"
|
|
|
|
|
|
|
|
style="margin-right:3px"
|
|
|
|
@click="favoriteHandler($event, item)"
|
|
|
|
@click="favoriteHandler($event, item)"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<div v-html="item.name" />
|
|
|
|
<div v-html="item.name" style="color: #333333;"/>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
<!-- filter=".draggable-li[draggable='false']" -->
|
|
|
|
<!-- filter=".draggable-li[draggable='false']" -->
|
|
|
|
<VueDraggable
|
|
|
|
<VueDraggable
|
|
|
|
@ -288,20 +298,25 @@ const moveEnd = () => {
|
|
|
|
class="cursor-move draggable-li fix"
|
|
|
|
class="cursor-move draggable-li fix"
|
|
|
|
:draggable="true"
|
|
|
|
:draggable="true"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
|
|
|
|
<SvgIcon name="drag" size="18" style="margin-right:3px"/>
|
|
|
|
<SvgIcon
|
|
|
|
<SvgIcon
|
|
|
|
v-if="item.favorite && !item.isDefaultFilter"
|
|
|
|
v-if="item.favorite && !item.isDefaultFilter"
|
|
|
|
name="favorite-fill"
|
|
|
|
name="favorite-fill"
|
|
|
|
color="#fd9b0a"
|
|
|
|
color="#fd9b0a"
|
|
|
|
size="18"
|
|
|
|
size="18"
|
|
|
|
|
|
|
|
fill="#666666"
|
|
|
|
|
|
|
|
style="cursor: pointer!important;margin-right:3px;"
|
|
|
|
@click="unFavoriteHandler($event, item)"
|
|
|
|
@click="unFavoriteHandler($event, item)"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<SvgIcon
|
|
|
|
<SvgIcon
|
|
|
|
v-else-if="!item.favorite && !item.isDefaultFilter"
|
|
|
|
v-else-if="!item.favorite && !item.isDefaultFilter"
|
|
|
|
name="favorite-unfill"
|
|
|
|
name="favorite-unfill"
|
|
|
|
size="18"
|
|
|
|
size="18"
|
|
|
|
|
|
|
|
fill="#666666"
|
|
|
|
|
|
|
|
style="cursor: pointer!important;margin-right:3px;"
|
|
|
|
@click="favoriteHandler($event, item)"
|
|
|
|
@click="favoriteHandler($event, item)"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<div v-html="item.name" />
|
|
|
|
<div v-html="item.name" style="color: #333333;"/>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
</VueDraggable>
|
|
|
|
</VueDraggable>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
@ -356,17 +371,17 @@ const moveEnd = () => {
|
|
|
|
height: 200px;
|
|
|
|
height: 200px;
|
|
|
|
overflow-x: hidden;
|
|
|
|
overflow-x: hidden;
|
|
|
|
overflow-y: auto;
|
|
|
|
overflow-y: auto;
|
|
|
|
scrollbar-width: none; /* firefox */
|
|
|
|
scrollbar-width: thin; /* firefox */
|
|
|
|
-ms-overflow-style: none; /* IE 10+ */
|
|
|
|
-ms-overflow-style: thin; /* IE 10+ */
|
|
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
display: none;
|
|
|
|
display: thin;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
li {
|
|
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
|
|
line-height: 22px;
|
|
|
|
line-height: 22px;
|
|
|
|
padding: 5px 12px;
|
|
|
|
padding: 8px 12px;
|
|
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
&:hover {
|
|
|
|
background-color: #f3f8ff;
|
|
|
|
background-color: #f3f8ff;
|
|
|
|
|
