|
|
|
@ -1,46 +1,51 @@
|
|
|
|
<script lang="ts" setup>
|
|
|
|
<script lang="ts" setup>
|
|
|
|
import { debounce, difference } from 'lodash-es'
|
|
|
|
import { cloneDeep, debounce, difference, isEqual } from 'lodash-es'
|
|
|
|
import { computed, ref, watch, onMounted } from 'vue'
|
|
|
|
import { computed, onMounted, ref, watch } from 'vue'
|
|
|
|
import { VueDraggable } from 'vue-draggable-plus'
|
|
|
|
import { VueDraggable } from 'vue-draggable-plus'
|
|
|
|
import { setFilter } from '@/api/home/filter'
|
|
|
|
import { setFilter } from '@/api/home/filter'
|
|
|
|
import { asideMap } from '@/config/final'
|
|
|
|
import { asideMap } from '@/config/final'
|
|
|
|
import { useFinal } from '@/store/modules/final'
|
|
|
|
import { useFinal } from '@/store/modules/final'
|
|
|
|
import { cloneDeep, isEqual } from "lodash-es";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const show = ref(false)
|
|
|
|
const show = ref(false)
|
|
|
|
const finalStore = useFinal()
|
|
|
|
const finalStore = useFinal()
|
|
|
|
const checkAll = ref(false)
|
|
|
|
const checkAll = ref(false)
|
|
|
|
const selectIds = ref<string[]>([])
|
|
|
|
const selectIds = ref<string[]>([])
|
|
|
|
const tempList = ref<string[]>([])
|
|
|
|
const tempList = ref<string[]>([])
|
|
|
|
let extraCustomConfig :any = [];
|
|
|
|
const extraCustomConfig: any = []
|
|
|
|
|
|
|
|
// 左侧隐藏列表
|
|
|
|
|
|
|
|
const offList = ref<any[]>([])
|
|
|
|
|
|
|
|
// 右侧显示列表
|
|
|
|
|
|
|
|
const onList = ref<any[]>([])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const allCount = computed(() => {
|
|
|
|
|
|
|
|
return `全部筛选(共${offList.value.length}个)`
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const selectCount = computed(() => {
|
|
|
|
|
|
|
|
return `已选筛选(共${onList.value.length}个)`
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
const offKeyword = ref('')
|
|
|
|
|
|
|
|
const onKeyword = ref('')
|
|
|
|
|
|
|
|
|
|
|
|
Object.keys(asideMap).forEach((key) => {
|
|
|
|
Object.keys(asideMap).forEach((key) => {
|
|
|
|
const { isDefaultFilter } = asideMap[key];
|
|
|
|
const { isDefaultFilter } = asideMap[key]
|
|
|
|
if (isDefaultFilter) {
|
|
|
|
if (isDefaultFilter)
|
|
|
|
extraCustomConfig.push(key);
|
|
|
|
extraCustomConfig.push(key)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function showModal() {
|
|
|
|
function showModal() {
|
|
|
|
show.value = true
|
|
|
|
show.value = true
|
|
|
|
|
|
|
|
|
|
|
|
// 重置左右列表数据
|
|
|
|
// 重置左右列表数据
|
|
|
|
const config = finalStore.getSystemConfig
|
|
|
|
const config = finalStore.getSystemConfig
|
|
|
|
const customConfig = finalStore.getCustomConfig
|
|
|
|
const customConfig = finalStore.getCustomConfig
|
|
|
|
|
|
|
|
|
|
|
|
console.log('开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------',config, customConfig)
|
|
|
|
|
|
|
|
console.log('开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------',tempList.value, finalStore.getFilterConfig)
|
|
|
|
|
|
|
|
if (config == null || customConfig == null)
|
|
|
|
if (config == null || customConfig == null)
|
|
|
|
return
|
|
|
|
return
|
|
|
|
if (tempList.value.length > 0 && isEqual(tempList.value, finalStore.getFilterConfig))
|
|
|
|
if (tempList.value.length > 0 && isEqual(tempList.value, finalStore.getFilterConfig))
|
|
|
|
return
|
|
|
|
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开启了lllllllllllllllllll", showList, hideList);
|
|
|
|
|
|
|
|
if (tempList.value.length > 0)
|
|
|
|
if (tempList.value.length > 0)
|
|
|
|
finalStore.setFilterConfig(tempList.value)
|
|
|
|
finalStore.setFilterConfig(tempList.value)
|
|
|
|
|
|
|
|
|
|
|
|
onList.value = showList
|
|
|
|
onList.value = showList
|
|
|
|
offList.value = hideList
|
|
|
|
offList.value = hideList
|
|
|
|
// 重置全选状态
|
|
|
|
// 重置全选状态
|
|
|
|
@ -51,22 +56,11 @@ function showModal() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function closeModal() {
|
|
|
|
function closeModal() {
|
|
|
|
|
|
|
|
offKeyword.value = ''
|
|
|
|
|
|
|
|
onKeyword.value = ''
|
|
|
|
show.value = false
|
|
|
|
show.value = false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 左侧隐藏列表
|
|
|
|
|
|
|
|
const offList = ref<any[]>([])
|
|
|
|
|
|
|
|
// 右侧显示列表
|
|
|
|
|
|
|
|
const onList = ref<any[]>([])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const allCount = computed(() => {
|
|
|
|
|
|
|
|
return `全部筛选(共${offList.value.length}个)`
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const selectCount = computed(() => {
|
|
|
|
|
|
|
|
return `已选筛选(共${onList.value.length}个)`
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
defineExpose({
|
|
|
|
defineExpose({
|
|
|
|
showModal,
|
|
|
|
showModal,
|
|
|
|
})
|
|
|
|
})
|
|
|
|
@ -94,16 +88,13 @@ function generateDefaultList(config) {
|
|
|
|
function generatList(config, customConfig) {
|
|
|
|
function generatList(config, customConfig) {
|
|
|
|
const keys = Object.keys(config)
|
|
|
|
const keys = Object.keys(config)
|
|
|
|
let onList: object[] = []
|
|
|
|
let onList: object[] = []
|
|
|
|
let offList: any = []
|
|
|
|
const offList: any = []
|
|
|
|
let showKeys = [];
|
|
|
|
const showKeys = []
|
|
|
|
const tempShowKeys = [...customConfig, ...extraCustomConfig];
|
|
|
|
const tempShowKeys = [...customConfig, ...extraCustomConfig]
|
|
|
|
tempShowKeys.map(item => {
|
|
|
|
tempShowKeys.forEach((item) => {
|
|
|
|
if(!showKeys.includes(item)) {
|
|
|
|
if (!showKeys.includes(item))
|
|
|
|
showKeys.push(item);
|
|
|
|
showKeys.push(item)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
console.log('原始筛选条件showKeys', showKeys)
|
|
|
|
|
|
|
|
console.log('原始筛选条件config customConfig', config, customConfig)
|
|
|
|
|
|
|
|
// for (const key of keys) {
|
|
|
|
// for (const key of keys) {
|
|
|
|
// if (!key.startsWith('iz') || config[key] === 'N' || asideMap[key] === undefined)
|
|
|
|
// if (!key.startsWith('iz') || config[key] === 'N' || asideMap[key] === undefined)
|
|
|
|
// continue
|
|
|
|
// continue
|
|
|
|
@ -125,7 +116,7 @@ function generatList(config, customConfig) {
|
|
|
|
// isChecked && selectIds.value.push(key)
|
|
|
|
// isChecked && selectIds.value.push(key)
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
Object.keys(asideMap).map(key => {
|
|
|
|
Object.keys(asideMap).forEach((key) => {
|
|
|
|
const name = asideMap[key]?.label
|
|
|
|
const name = asideMap[key]?.label
|
|
|
|
const isDefaultFilter = asideMap[key]?.isDefaultFilter
|
|
|
|
const isDefaultFilter = asideMap[key]?.isDefaultFilter
|
|
|
|
|
|
|
|
|
|
|
|
@ -161,43 +152,30 @@ function generatList(config, customConfig) {
|
|
|
|
return acc
|
|
|
|
return acc
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [])
|
|
|
|
}, [])
|
|
|
|
console.log('原始筛选条件onList', onList)
|
|
|
|
|
|
|
|
const fixedList = generateDefaultList(config)
|
|
|
|
const fixedList = generateDefaultList(config)
|
|
|
|
// offList.unshift(...fixedList)
|
|
|
|
// offList.unshift(...fixedList)
|
|
|
|
console.log('原始筛选条件fixedList', 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 = []
|
|
|
|
finalStore.getFilterConfig.map((item: any) => {
|
|
|
|
finalStore.getFilterConfig.forEach((item: any) => {
|
|
|
|
console.log("tFilterConfig item000000000000000", item);
|
|
|
|
|
|
|
|
sortKeyList.push(item.id)
|
|
|
|
sortKeyList.push(item.id)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
console.log('原始筛选条件sortKeyList', sortKeyList)
|
|
|
|
|
|
|
|
console.log('原始筛选条件showKeys', showKeys)
|
|
|
|
|
|
|
|
const sortList: any = []
|
|
|
|
const sortList: any = []
|
|
|
|
if (sortKeyList.length > 0) {
|
|
|
|
if (sortKeyList.length > 0) {
|
|
|
|
sortKeyList.map((key) => {
|
|
|
|
sortKeyList.forEach((key) => {
|
|
|
|
const tempItem = tempOnList.find(item => item.id == key)
|
|
|
|
const tempItem = tempOnList.find(item => item.id == key)
|
|
|
|
if(tempItem) {
|
|
|
|
if (tempItem)
|
|
|
|
sortList.push(tempItem)
|
|
|
|
sortList.push(tempItem)
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
else {
|
|
|
|
showKeys.map((key) => {
|
|
|
|
showKeys.forEach((key) => {
|
|
|
|
const tempItem = tempOnList.find(item => item.id == key)
|
|
|
|
const tempItem = tempOnList.find(item => item.id == key)
|
|
|
|
if(tempItem) {
|
|
|
|
if (tempItem)
|
|
|
|
sortList.push(tempItem)
|
|
|
|
sortList.push(tempItem)
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
console.log('原始筛选条件showList', sortList)
|
|
|
|
|
|
|
|
console.log('原始筛选条件hideList', offList)
|
|
|
|
|
|
|
|
console.log('原始筛选条件configStore.getFilterConfig', finalStore.getFilterConfig)
|
|
|
|
|
|
|
|
// return { showList: onList, hideList: offList }
|
|
|
|
// return { showList: onList, hideList: offList }
|
|
|
|
return { showList: sortList, hideList: offList }
|
|
|
|
return { showList: sortList, hideList: offList }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -208,48 +186,36 @@ finalStore.$subscribe(() => {
|
|
|
|
|
|
|
|
|
|
|
|
if (config == null || customConfig == null)
|
|
|
|
if (config == null || customConfig == null)
|
|
|
|
return
|
|
|
|
return
|
|
|
|
console.log('订阅tempList.value-----------', tempList.value)
|
|
|
|
|
|
|
|
console.log('订阅finalStore.getFilterConfig-----------', finalStore.getFilterConfig)
|
|
|
|
|
|
|
|
if (tempList.value.length > 0 && isEqual(tempList.value, finalStore.getFilterConfig))
|
|
|
|
if (tempList.value.length > 0 && isEqual(tempList.value, finalStore.getFilterConfig))
|
|
|
|
return
|
|
|
|
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)
|
|
|
|
finalStore.setFilterConfig(tempList.value)
|
|
|
|
finalStore.setFilterConfig(tempList.value)
|
|
|
|
|
|
|
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
|
|
|
// }, 500);
|
|
|
|
|
|
|
|
console.log('订阅showList, hideList-----------', showList, hideList)
|
|
|
|
|
|
|
|
onList.value = showList
|
|
|
|
onList.value = showList
|
|
|
|
offList.value = hideList
|
|
|
|
offList.value = hideList
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
async function handleSumbit(e: MouseEvent) {
|
|
|
|
async function handleSumbit(e: MouseEvent) {
|
|
|
|
e.preventDefault()
|
|
|
|
e.preventDefault()
|
|
|
|
const param = onList.value.map((item) => {
|
|
|
|
const param = onList.value
|
|
|
|
|
|
|
|
.map((item) => {
|
|
|
|
return item.id
|
|
|
|
return item.id
|
|
|
|
}).join(',')
|
|
|
|
})
|
|
|
|
|
|
|
|
.join(',')
|
|
|
|
|
|
|
|
|
|
|
|
await setFilter({ searchcount: param, type: 1 })
|
|
|
|
await setFilter({ searchcount: param, type: 1 })
|
|
|
|
const obj = await finalStore.fetchCustomConfig()
|
|
|
|
const obj = await finalStore.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.forEach((key) => {
|
|
|
|
const tempItem = tempOnList.find(item => item.id == key)
|
|
|
|
const tempItem = tempOnList.find(item => item.id == key)
|
|
|
|
if(tempItem) {
|
|
|
|
if (tempItem)
|
|
|
|
sortList.push(tempItem)
|
|
|
|
sortList.push(tempItem)
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
console.log('finalStore.sortList提交---------------', sortList)
|
|
|
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
|
|
|
if (sortList.length > 0)
|
|
|
|
if (sortList.length > 0)
|
|
|
|
finalStore.setFilterConfig(sortList)
|
|
|
|
finalStore.setFilterConfig(sortList)
|
|
|
|
|
|
|
|
|
|
|
|
// }, 500);
|
|
|
|
|
|
|
|
closeModal()
|
|
|
|
closeModal()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -273,8 +239,7 @@ function onCheckChange(checked: any, item: any) {
|
|
|
|
|
|
|
|
|
|
|
|
if (index === -1 && checked)
|
|
|
|
if (index === -1 && checked)
|
|
|
|
selectIds.value.push(item.id)
|
|
|
|
selectIds.value.push(item.id)
|
|
|
|
else
|
|
|
|
else index !== -1 && selectIds.value.splice(index, 1)
|
|
|
|
index !== -1 && selectIds.value.splice(index, 1)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
checkAll.value = offList.value.every(item => item.checked)
|
|
|
|
checkAll.value = offList.value.every(item => item.checked)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -292,7 +257,10 @@ watch(
|
|
|
|
return
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
|
|
const action = newVal > oldVal ? 'add' : 'remove'
|
|
|
|
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)
|
|
|
|
if (diff.length === 0)
|
|
|
|
return
|
|
|
|
return
|
|
|
|
@ -359,9 +327,6 @@ function removeHandler(id: string) {
|
|
|
|
onList.value.splice(index, 1)
|
|
|
|
onList.value.splice(index, 1)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const offKeyword = ref('')
|
|
|
|
|
|
|
|
const onKeyword = ref('')
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const leftInputHandler = debounce((keyword) => {
|
|
|
|
const leftInputHandler = debounce((keyword) => {
|
|
|
|
offKeyword.value = keyword
|
|
|
|
offKeyword.value = keyword
|
|
|
|
}, 300)
|
|
|
|
}, 300)
|
|
|
|
@ -390,7 +355,13 @@ 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 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">
|
|
|
|
<div class="wrapper">
|
|
|
|
<span class="wrapper-title">自定义筛选</span>
|
|
|
|
<span class="wrapper-title">自定义筛选</span>
|
|
|
|
<div class="wrapper-bar">
|
|
|
|
<div class="wrapper-bar">
|
|
|
|
@ -402,7 +373,10 @@ 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" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small"
|
|
|
|
:title="allCount"
|
|
|
|
|
|
|
|
class="dragcardStyle"
|
|
|
|
|
|
|
|
:segmented="{ content: true, footer: true }"
|
|
|
|
|
|
|
|
size="small"
|
|
|
|
:bordered="false"
|
|
|
|
:bordered="false"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div class="input_wrap">
|
|
|
|
<div class="input_wrap">
|
|
|
|
@ -411,17 +385,29 @@ onMounted(() => {
|
|
|
|
<SvgIcon size="14px" name="magnifying-1-color999" />
|
|
|
|
<SvgIcon size="14px" name="magnifying-1-color999" />
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</n-input>
|
|
|
|
</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-ul">
|
|
|
|
<div class="draggable-li">
|
|
|
|
<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>
|
|
|
|
<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"
|
|
|
|
class="draggable-li"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<n-checkbox
|
|
|
|
<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)"
|
|
|
|
@update:checked="onCheckChange($event, item)"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -430,12 +416,15 @@ onMounted(() => {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</NCard>
|
|
|
|
</NCard>
|
|
|
|
</n-grid-item>
|
|
|
|
</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" />
|
|
|
|
<SvgIcon size="20" name="switchsvg" />
|
|
|
|
</n-grid-item>
|
|
|
|
</n-grid-item>
|
|
|
|
<n-grid-item span="11">
|
|
|
|
<n-grid-item span="11">
|
|
|
|
<NCard
|
|
|
|
<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"
|
|
|
|
:bordered="false"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<template #header-extra>
|
|
|
|
<template #header-extra>
|
|
|
|
@ -447,14 +436,31 @@ onMounted(() => {
|
|
|
|
<SvgIcon size="14px" name="magnifying-1-color999" />
|
|
|
|
<SvgIcon size="14px" name="magnifying-1-color999" />
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</n-input>
|
|
|
|
</n-input>
|
|
|
|
<n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;" class="scroll">
|
|
|
|
<n-scrollbar
|
|
|
|
<VueDraggable v-model="onList" class="draggable-ul" :animation="150" group="shared">
|
|
|
|
style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px"
|
|
|
|
<div v-for="item in onList" v-show="item.name.includes(onKeyword)" :key="item.id" :draggable="true" class="cursor-move draggable-li">
|
|
|
|
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" />
|
|
|
|
<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" size="16px" style="display:block;margin-left: auto;cursor: pointer;"
|
|
|
|
v-if="!item.fix"
|
|
|
|
name="clear" @click="removeHandler(item.id)"
|
|
|
|
size="16px"
|
|
|
|
|
|
|
|
style="display: block; margin-left: auto; cursor: pointer"
|
|
|
|
|
|
|
|
name="clear"
|
|
|
|
|
|
|
|
@click="removeHandler(item.id)"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</VueDraggable>
|
|
|
|
</VueDraggable>
|
|
|
|
@ -469,7 +475,11 @@ onMounted(() => {
|
|
|
|
<n-button type="info" @click="handleSumbit">
|
|
|
|
<n-button type="info" @click="handleSumbit">
|
|
|
|
确定
|
|
|
|
确定
|
|
|
|
</n-button>
|
|
|
|
</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>
|
|
|
|
</n-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -498,10 +508,10 @@ 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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -513,7 +523,7 @@ onMounted(() => {
|
|
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
&:before {
|
|
|
|
background-color: #1980FF;
|
|
|
|
background-color: #1980ff;
|
|
|
|
content: "";
|
|
|
|
content: "";
|
|
|
|
width: 5px;
|
|
|
|
width: 5px;
|
|
|
|
border-radius: 2px;
|
|
|
|
border-radius: 2px;
|
|
|
|
@ -543,7 +553,7 @@ onMounted(() => {
|
|
|
|
|
|
|
|
|
|
|
|
.textbtnStyle {
|
|
|
|
.textbtnStyle {
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
color: #1980FF;
|
|
|
|
color: #1980ff;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.draggable-ul {
|
|
|
|
.draggable-ul {
|
|
|
|
@ -576,33 +586,33 @@ 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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
