|
|
|
@ -29,15 +29,9 @@ function showModal() {
|
|
|
|
const config = configStore.getConfig
|
|
|
|
const config = configStore.getConfig
|
|
|
|
const customConfig = configStore.getCustomConfig
|
|
|
|
const customConfig = configStore.getCustomConfig
|
|
|
|
|
|
|
|
|
|
|
|
if (config == null || customConfig == null)
|
|
|
|
if (config == null || customConfig == null) { return }
|
|
|
|
return
|
|
|
|
if (tempList.value.length > 0 && isEqual(tempList.value, configStore.getFilterConfig)) { return }
|
|
|
|
if (tempList.value.length > 0 && isEqual(tempList.value, configStore.getFilterConfig))
|
|
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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,7 +40,7 @@ function showModal() {
|
|
|
|
onList.value = showList
|
|
|
|
onList.value = showList
|
|
|
|
offList.value = hideList
|
|
|
|
offList.value = hideList
|
|
|
|
// 重置全选状态
|
|
|
|
// 重置全选状态
|
|
|
|
checkAll.value = hideList.every(item => item.checked)
|
|
|
|
checkAll.value = hideList.every((item: any) => item.checked)
|
|
|
|
// 重置输入框查询条件
|
|
|
|
// 重置输入框查询条件
|
|
|
|
offKeyword.value = ''
|
|
|
|
offKeyword.value = ''
|
|
|
|
onKeyword.value = ''
|
|
|
|
onKeyword.value = ''
|
|
|
|
@ -136,17 +130,14 @@ function generatList(config, customConfig) {
|
|
|
|
const fixedList = generateDefaultList(config)
|
|
|
|
const fixedList = generateDefaultList(config)
|
|
|
|
offList.unshift(...fixedList)
|
|
|
|
offList.unshift(...fixedList)
|
|
|
|
onList.unshift(...fixedList)
|
|
|
|
onList.unshift(...fixedList)
|
|
|
|
console.log('原始筛选条件customConfig', customConfig)
|
|
|
|
|
|
|
|
// onList按照customConfig排序
|
|
|
|
// onList按照customConfig排序
|
|
|
|
const tempOnList = cloneDeep(onList)
|
|
|
|
const tempOnList = cloneDeep(onList)
|
|
|
|
console.log('原始筛选条件tempOnList', tempOnList)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
return item
|
|
|
|
})
|
|
|
|
})
|
|
|
|
console.log('原始筛选条件sortKeyList', sortKeyList)
|
|
|
|
|
|
|
|
const sortList: any = []
|
|
|
|
const sortList: any = []
|
|
|
|
if (sortKeyList.length > 0) {
|
|
|
|
if (sortKeyList.length > 0) {
|
|
|
|
sortKeyList.map((key) => {
|
|
|
|
sortKeyList.map((key) => {
|
|
|
|
@ -162,8 +153,6 @@ function generatList(config, customConfig) {
|
|
|
|
return key
|
|
|
|
return key
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
console.log('原始筛选条件sortList', sortList)
|
|
|
|
|
|
|
|
console.log('原始筛选条件configStore.getFilterConfig', configStore.getFilterConfig)
|
|
|
|
|
|
|
|
// return { showList: onList, hideList: offList }
|
|
|
|
// return { showList: onList, hideList: offList }
|
|
|
|
return { showList: sortList, hideList: offList }
|
|
|
|
return { showList: sortList, hideList: offList }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -172,16 +161,11 @@ configStore.$subscribe(() => {
|
|
|
|
const config = configStore.getConfig
|
|
|
|
const config = configStore.getConfig
|
|
|
|
const customConfig = configStore.getCustomConfig
|
|
|
|
const customConfig = configStore.getCustomConfig
|
|
|
|
|
|
|
|
|
|
|
|
if (config == null || customConfig == null)
|
|
|
|
if (config == null || customConfig == null) { return }
|
|
|
|
return
|
|
|
|
if (tempList.value.length > 0 && isEqual(tempList.value, configStore.getFilterConfig)) { return }
|
|
|
|
console.log('tempList.value-----------', tempList.value)
|
|
|
|
|
|
|
|
console.log('configStore.getFilterConfig-----------', configStore.getFilterConfig)
|
|
|
|
|
|
|
|
if (tempList.value.length > 0 && isEqual(tempList.value, configStore.getFilterConfig))
|
|
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { showList, hideList } = generatList(config, customConfig)
|
|
|
|
const { showList, hideList } = generatList(config, customConfig)
|
|
|
|
tempList.value = cloneDeep(showList)
|
|
|
|
tempList.value = cloneDeep(showList)
|
|
|
|
console.log('克隆条件', tempList.value)
|
|
|
|
|
|
|
|
if (tempList.value.length > 0)
|
|
|
|
if (tempList.value.length > 0)
|
|
|
|
configStore.setFilterConfig(tempList.value)
|
|
|
|
configStore.setFilterConfig(tempList.value)
|
|
|
|
|
|
|
|
|
|
|
|
@ -201,16 +185,13 @@ async function handleSumbit(e: MouseEvent) {
|
|
|
|
|
|
|
|
|
|
|
|
await setFilter({ searchcount: param, type: 0 })
|
|
|
|
await setFilter({ searchcount: param, type: 0 })
|
|
|
|
const obj = await configStore.fetchCustomConfig()
|
|
|
|
const obj = await configStore.fetchCustomConfig()
|
|
|
|
console.log('obj-------------------------------', obj)
|
|
|
|
|
|
|
|
const tempOnList = cloneDeep(onList.value)
|
|
|
|
const tempOnList = cloneDeep(onList.value)
|
|
|
|
console.log('原始筛选条件tempOnList', tempOnList)
|
|
|
|
|
|
|
|
const sortList: any = []
|
|
|
|
const sortList: any = []
|
|
|
|
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
|
|
|
|
return key
|
|
|
|
})
|
|
|
|
})
|
|
|
|
console.log('configStore.sortList---------------', sortList)
|
|
|
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
// setTimeout(() => {
|
|
|
|
if (sortList.length > 0)
|
|
|
|
if (sortList.length > 0)
|
|
|
|
configStore.setFilterConfig(sortList)
|
|
|
|
configStore.setFilterConfig(sortList)
|
|
|
|
@ -336,16 +317,10 @@ const rightInputHandler = debounce((keyword) => {
|
|
|
|
}, 300)
|
|
|
|
}, 300)
|
|
|
|
|
|
|
|
|
|
|
|
async function getfield() {
|
|
|
|
async function getfield() {
|
|
|
|
let res
|
|
|
|
await getAllfieldList(3)
|
|
|
|
res = await getAllfieldList(3)
|
|
|
|
|
|
|
|
const userStore = useUser()
|
|
|
|
const userStore = useUser()
|
|
|
|
const userInfo = userStore.getUserInfo
|
|
|
|
const userInfo = userStore.getUserInfo
|
|
|
|
res = await getfieldList(3, userInfo.id)
|
|
|
|
await getfieldList(3, userInfo.id)
|
|
|
|
}
|
|
|
|
|
|
|
|
function onMove(e) {
|
|
|
|
|
|
|
|
// 这里的e表示即将停靠的元素。
|
|
|
|
|
|
|
|
if (e?.related?.className?.indexOf('fix') !== -1)
|
|
|
|
|
|
|
|
return false
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
onMounted(() => {
|
|
|
|
@ -355,13 +330,7 @@ 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
|
|
|
|
<n-card class="cardstyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
|
|
|
|
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">
|
|
|
|
@ -373,10 +342,7 @@ 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"
|
|
|
|
:title="allCount" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small"
|
|
|
|
class="dragcardStyle"
|
|
|
|
|
|
|
|
:segmented="{ content: true, footer: true }"
|
|
|
|
|
|
|
|
size="small"
|
|
|
|
|
|
|
|
:bordered="false"
|
|
|
|
:bordered="false"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div class="input_wrap">
|
|
|
|
<div class="input_wrap">
|
|
|
|
@ -385,29 +351,20 @@ onMounted(() => {
|
|
|
|
<SvgIcon size="14px" name="magnifying-1-color999" />
|
|
|
|
<SvgIcon size="14px" name="magnifying-1-color999" />
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</n-input>
|
|
|
|
</n-input>
|
|
|
|
<n-scrollbar
|
|
|
|
<n-scrollbar style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px">
|
|
|
|
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
|
|
|
|
<n-checkbox
|
|
|
|
v-model:checked="checkAll"
|
|
|
|
v-model:checked="checkAll" label="全选" :indeterminate="!checkAll"
|
|
|
|
label="全选"
|
|
|
|
|
|
|
|
:indeterminate="!checkAll"
|
|
|
|
|
|
|
|
@update:checked="onCheckAllChange"
|
|
|
|
@update:checked="onCheckAllChange"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
v-for="item in offList"
|
|
|
|
v-for="item in offList" v-show="item.name.includes(offKeyword)" :key="item.id"
|
|
|
|
v-show="item.name.includes(offKeyword)"
|
|
|
|
:class="{ 'disable-check': item.fix }" class="draggable-li"
|
|
|
|
:key="item.id"
|
|
|
|
|
|
|
|
:class="{ 'disable-check': item.fix }"
|
|
|
|
|
|
|
|
class="draggable-li"
|
|
|
|
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<n-checkbox
|
|
|
|
<n-checkbox
|
|
|
|
v-model:checked="item.checked"
|
|
|
|
v-model:checked="item.checked" :label="item.name" :disabled="item.fix"
|
|
|
|
:label="item.name"
|
|
|
|
|
|
|
|
:disabled="item.fix"
|
|
|
|
|
|
|
|
@update:checked="onCheckChange($event, item)"
|
|
|
|
@update:checked="onCheckChange($event, item)"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -421,10 +378,7 @@ onMounted(() => {
|
|
|
|
</n-grid-item>
|
|
|
|
</n-grid-item>
|
|
|
|
<n-grid-item span="11">
|
|
|
|
<n-grid-item span="11">
|
|
|
|
<NCard
|
|
|
|
<NCard
|
|
|
|
:title="selectCount"
|
|
|
|
:title="selectCount" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small"
|
|
|
|
class="dragcardStyle"
|
|
|
|
|
|
|
|
:segmented="{ content: true, footer: true }"
|
|
|
|
|
|
|
|
size="small"
|
|
|
|
|
|
|
|
:bordered="false"
|
|
|
|
:bordered="false"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<template #header-extra>
|
|
|
|
<template #header-extra>
|
|
|
|
@ -436,31 +390,17 @@ onMounted(() => {
|
|
|
|
<SvgIcon size="14px" name="magnifying-1-color999" />
|
|
|
|
<SvgIcon size="14px" name="magnifying-1-color999" />
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</n-input>
|
|
|
|
</n-input>
|
|
|
|
<n-scrollbar
|
|
|
|
<n-scrollbar style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px" class="scroll">
|
|
|
|
style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px"
|
|
|
|
<VueDraggable v-model="onList" class="draggable-ul" :animation="150" group="shared">
|
|
|
|
class="scroll"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<VueDraggable
|
|
|
|
|
|
|
|
v-model="onList"
|
|
|
|
|
|
|
|
class="draggable-ul"
|
|
|
|
|
|
|
|
:animation="150"
|
|
|
|
|
|
|
|
group="shared"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
v-for="item in onList"
|
|
|
|
v-for="item in onList" v-show="item.name.includes(onKeyword)" :key="item.id" :draggable="true"
|
|
|
|
v-show="item.name.includes(onKeyword)"
|
|
|
|
|
|
|
|
:key="item.id"
|
|
|
|
|
|
|
|
:draggable="true"
|
|
|
|
|
|
|
|
class="cursor-move draggable-li"
|
|
|
|
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"
|
|
|
|
v-if="!item.fix" size="16px" style="display: block; margin-left: auto; cursor: pointer"
|
|
|
|
size="16px"
|
|
|
|
name="clear" @click="removeHandler(item.id)"
|
|
|
|
style="display: block; margin-left: auto; cursor: pointer"
|
|
|
|
|
|
|
|
name="clear"
|
|
|
|
|
|
|
|
@click="removeHandler(item.id)"
|
|
|
|
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</VueDraggable>
|
|
|
|
</VueDraggable>
|
|
|
|
@ -475,11 +415,7 @@ onMounted(() => {
|
|
|
|
<n-button type="info" @click="handleSumbit">
|
|
|
|
<n-button type="info" @click="handleSumbit">
|
|
|
|
确定
|
|
|
|
确定
|
|
|
|
</n-button>
|
|
|
|
</n-button>
|
|
|
|
<n-button
|
|
|
|
<n-button secondary style="margin-left: 15px; border: 1px solid #cad2dd" @click="closeModal">
|
|
|
|
secondary
|
|
|
|
|
|
|
|
style="margin-left: 15px; border: 1px solid #cad2dd"
|
|
|
|
|
|
|
|
@click="closeModal"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
取消
|
|
|
|
取消
|
|
|
|
</n-button>
|
|
|
|
</n-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -508,9 +444,11 @@ 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;
|
|
|
|
@ -537,6 +475,7 @@ onMounted(() => {
|
|
|
|
.dragcardStyle {
|
|
|
|
.dragcardStyle {
|
|
|
|
--n-padding-bottom: 0px !important;
|
|
|
|
--n-padding-bottom: 0px !important;
|
|
|
|
--n-padding-left: 0px !important;
|
|
|
|
--n-padding-left: 0px !important;
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep(.n-card__content) {
|
|
|
|
::v-deep(.n-card__content) {
|
|
|
|
padding-left: 0 !important;
|
|
|
|
padding-left: 0 !important;
|
|
|
|
padding-right: 0 !important;
|
|
|
|
padding-right: 0 !important;
|
|
|
|
@ -586,32 +525,39 @@ 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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
LiZhong
1 year ago