|
|
|
|
@ -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) => {
|
|
|
|
|
const param = onList.value
|
|
|
|
|
.map((item) => {
|
|
|
|
|
return item.id
|
|
|
|
|
}).join(',')
|
|
|
|
|
})
|
|
|
|
|
.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){
|
|
|
|
|
::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>
|
|
|
|
|
|
LiZhong
1 year ago