|
|
|
|
@ -1,18 +1,53 @@
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { debounce, difference } from 'lodash-es'
|
|
|
|
|
import { computed, ref, watch } from 'vue'
|
|
|
|
|
import { computed, ref, watch, onMounted } from 'vue'
|
|
|
|
|
import { VueDraggable } from 'vue-draggable-plus'
|
|
|
|
|
import { setFilter } from '@/api/home/filter'
|
|
|
|
|
import { asideMap } from '@/config/final'
|
|
|
|
|
import { useFinal } from '@/store/modules/final'
|
|
|
|
|
import { cloneDeep, isEqual } from "lodash-es";
|
|
|
|
|
|
|
|
|
|
const show = ref(false)
|
|
|
|
|
const finalStore = useFinal()
|
|
|
|
|
const checkAll = ref(false)
|
|
|
|
|
const selectIds = ref<string[]>([])
|
|
|
|
|
const finalStore = useFinal()
|
|
|
|
|
const tempList = ref<string[]>([])
|
|
|
|
|
let extraCustomConfig :any = [];
|
|
|
|
|
|
|
|
|
|
Object.keys(asideMap).forEach((key) => {
|
|
|
|
|
const { isDefaultFilter } = asideMap[key];
|
|
|
|
|
if (isDefaultFilter) {
|
|
|
|
|
extraCustomConfig.push(key);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function showModal() {
|
|
|
|
|
show.value = true
|
|
|
|
|
|
|
|
|
|
// 重置左右列表数据
|
|
|
|
|
const config = finalStore.getSystemConfig
|
|
|
|
|
const customConfig = finalStore.getCustomConfig
|
|
|
|
|
|
|
|
|
|
console.log('开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------',config, customConfig)
|
|
|
|
|
console.log('开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------',tempList.value, finalStore.getFilterConfig)
|
|
|
|
|
if (config == null || customConfig == null)
|
|
|
|
|
return
|
|
|
|
|
if (tempList.value.length > 0 && isEqual(tempList.value, finalStore.getFilterConfig))
|
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
const { showList, hideList } = generatList(config, customConfig)
|
|
|
|
|
tempList.value = cloneDeep(showList)
|
|
|
|
|
console.log("tempList.value开启了lllllllllllllllllll", showList, hideList);
|
|
|
|
|
if (tempList.value.length > 0)
|
|
|
|
|
finalStore.setFilterConfig(tempList.value)
|
|
|
|
|
|
|
|
|
|
onList.value = showList
|
|
|
|
|
offList.value = hideList
|
|
|
|
|
// 重置全选状态
|
|
|
|
|
checkAll.value = hideList.every(item => item.checked)
|
|
|
|
|
// 重置输入框查询条件
|
|
|
|
|
offKeyword.value = ''
|
|
|
|
|
onKeyword.value = ''
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function closeModal() {
|
|
|
|
|
@ -36,16 +71,16 @@ defineExpose({
|
|
|
|
|
showModal,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
function generateDefaultList() {
|
|
|
|
|
function generateDefaultList(config) {
|
|
|
|
|
return Object.keys(asideMap).reduce((acc, key) => {
|
|
|
|
|
const { label, isDefaultFilter } = asideMap[key]
|
|
|
|
|
|
|
|
|
|
// 默认开启配置
|
|
|
|
|
if (isDefaultFilter) {
|
|
|
|
|
// 个人配置开启且系统配置开启
|
|
|
|
|
if (isDefaultFilter && config[key] === 'Y') {
|
|
|
|
|
const config = {
|
|
|
|
|
id: key,
|
|
|
|
|
name: label || '未配置',
|
|
|
|
|
fix: isDefaultFilter,
|
|
|
|
|
fix: true,
|
|
|
|
|
checked: true,
|
|
|
|
|
}
|
|
|
|
|
return [...acc, config]
|
|
|
|
|
@ -56,20 +91,46 @@ function generateDefaultList() {
|
|
|
|
|
}, [])
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function generatList(customConfig) {
|
|
|
|
|
const keys = Object.keys(asideMap)
|
|
|
|
|
function generatList(config, customConfig) {
|
|
|
|
|
const keys = Object.keys(config)
|
|
|
|
|
let onList: object[] = []
|
|
|
|
|
const offList: object[] = []
|
|
|
|
|
const showKeys = customConfig.map((key: string) => key.toLowerCase())
|
|
|
|
|
|
|
|
|
|
for (const key of keys) {
|
|
|
|
|
if (!key.startsWith('iz') || asideMap[key] === undefined)
|
|
|
|
|
continue
|
|
|
|
|
|
|
|
|
|
let offList: any = []
|
|
|
|
|
let showKeys = [];
|
|
|
|
|
const tempShowKeys = [...customConfig, ...extraCustomConfig];
|
|
|
|
|
tempShowKeys.map(item => {
|
|
|
|
|
if(!showKeys.includes(item)) {
|
|
|
|
|
showKeys.push(item);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
console.log('原始筛选条件showKeys', showKeys)
|
|
|
|
|
console.log('原始筛选条件config customConfig', config, customConfig)
|
|
|
|
|
// for (const key of keys) {
|
|
|
|
|
// if (!key.startsWith('iz') || config[key] === 'N' || asideMap[key] === undefined)
|
|
|
|
|
// continue
|
|
|
|
|
|
|
|
|
|
// const name = asideMap[key]?.label
|
|
|
|
|
// const isDefaultFilter = asideMap[key]?.isDefaultFilter
|
|
|
|
|
|
|
|
|
|
// // 系统配置为Y，且不是默认配置
|
|
|
|
|
// if (!isDefaultFilter) {
|
|
|
|
|
// const isChecked = asideMap[key].isDefaultFilter || showKeys.includes(key)
|
|
|
|
|
|
|
|
|
|
// offList.push({
|
|
|
|
|
// id: key,
|
|
|
|
|
// name: name || '未配置',
|
|
|
|
|
// fix: isDefaultFilter,
|
|
|
|
|
// checked: isChecked,
|
|
|
|
|
// })
|
|
|
|
|
// if (isChecked && !selectIds.value.includes(key))
|
|
|
|
|
// isChecked && selectIds.value.push(key)
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
Object.keys(asideMap).map(key => {
|
|
|
|
|
const name = asideMap[key]?.label
|
|
|
|
|
const isDefaultFilter = asideMap[key]?.isDefaultFilter
|
|
|
|
|
|
|
|
|
|
// 不是默认配置
|
|
|
|
|
// 系统配置为Y，且不是默认配置
|
|
|
|
|
// if (!isDefaultFilter) {
|
|
|
|
|
const isChecked = asideMap[key].isDefaultFilter || showKeys.includes(key)
|
|
|
|
|
|
|
|
|
|
offList.push({
|
|
|
|
|
@ -78,15 +139,17 @@ function generatList(customConfig) {
|
|
|
|
|
fix: isDefaultFilter,
|
|
|
|
|
checked: isChecked,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
if (isChecked && !selectIds.value.includes(key))
|
|
|
|
|
isChecked && selectIds.value.push(key)
|
|
|
|
|
}
|
|
|
|
|
// }
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
onList = showKeys.reduce((acc, key) => {
|
|
|
|
|
const isDefaultFilter = asideMap[key]?.isDefaultFilter
|
|
|
|
|
|
|
|
|
|
// 把默认显示的过滤掉(理论上不会出现这种情况)
|
|
|
|
|
if (isDefaultFilter === false) {
|
|
|
|
|
// 也需要系统配置开启（可能个人开启后，系统配置关闭） && 把默认显示的过滤掉(理论上不会出现这种情况)
|
|
|
|
|
if (config[key] === 'Y' && isDefaultFilter === false) {
|
|
|
|
|
// if (config[key] === 'Y') {
|
|
|
|
|
const config = {
|
|
|
|
|
id: key,
|
|
|
|
|
name: asideMap[key].label || '未配置',
|
|
|
|
|
@ -98,35 +161,95 @@ function generatList(customConfig) {
|
|
|
|
|
return acc
|
|
|
|
|
}
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
const fixedList = generateDefaultList()
|
|
|
|
|
console.log('原始筛选条件onList', onList)
|
|
|
|
|
const fixedList = generateDefaultList(config)
|
|
|
|
|
// offList.unshift(...fixedList)
|
|
|
|
|
console.log('原始筛选条件fixedList', fixedList)
|
|
|
|
|
onList.unshift(...fixedList)
|
|
|
|
|
return { showList: onList, hideList: offList }
|
|
|
|
|
console.log('原始筛选条件customConfig', customConfig)
|
|
|
|
|
// onList按照customConfig排序
|
|
|
|
|
const tempOnList = cloneDeep(onList)
|
|
|
|
|
console.log('原始筛选条件tempOnList', tempOnList)
|
|
|
|
|
|
|
|
|
|
const sortKeyList: any = []
|
|
|
|
|
finalStore.getFilterConfig.map((item: any) => {
|
|
|
|
|
console.log("tFilterConfig item000000000000000", item);
|
|
|
|
|
sortKeyList.push(item.id)
|
|
|
|
|
})
|
|
|
|
|
console.log('原始筛选条件sortKeyList', sortKeyList)
|
|
|
|
|
console.log('原始筛选条件showKeys', showKeys)
|
|
|
|
|
const sortList: any = []
|
|
|
|
|
if (sortKeyList.length > 0) {
|
|
|
|
|
sortKeyList.map((key) => {
|
|
|
|
|
const tempItem = tempOnList.find(item => item.id == key)
|
|
|
|
|
if(tempItem) {
|
|
|
|
|
sortList.push(tempItem)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
showKeys.map((key) => {
|
|
|
|
|
const tempItem = tempOnList.find(item => item.id == key)
|
|
|
|
|
if(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: sortList, hideList: offList }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
finalStore.$subscribe(() => {
|
|
|
|
|
const config = finalStore.getSystemConfig
|
|
|
|
|
const customConfig = finalStore.getCustomConfig
|
|
|
|
|
|
|
|
|
|
if (customConfig === null)
|
|
|
|
|
if (config == null || customConfig == null)
|
|
|
|
|
return
|
|
|
|
|
console.log('订阅tempList.value-----------', tempList.value)
|
|
|
|
|
console.log('订阅finalStore.getFilterConfig-----------', finalStore.getFilterConfig)
|
|
|
|
|
if (tempList.value.length > 0 && isEqual(tempList.value, finalStore.getFilterConfig))
|
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
const { showList, hideList } = generatList(customConfig)
|
|
|
|
|
const { showList, hideList } = generatList(config, customConfig)
|
|
|
|
|
tempList.value = cloneDeep(showList)
|
|
|
|
|
console.log('订阅克隆条件', tempList.value)
|
|
|
|
|
if (tempList.value.length > 0)
|
|
|
|
|
finalStore.setFilterConfig(tempList.value)
|
|
|
|
|
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
// }, 500);
|
|
|
|
|
console.log('订阅showList, hideList-----------', showList, hideList)
|
|
|
|
|
onList.value = showList
|
|
|
|
|
offList.value = hideList
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
async function handleSumbit(e: MouseEvent) {
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
|
|
|
|
|
const param = onList.value
|
|
|
|
|
.filter(item => !asideMap[item.id].isDefaultFilter)
|
|
|
|
|
.map((item) => {
|
|
|
|
|
const param = onList.value.map((item) => {
|
|
|
|
|
return item.id
|
|
|
|
|
})
|
|
|
|
|
.join(',')
|
|
|
|
|
}).join(',')
|
|
|
|
|
|
|
|
|
|
await setFilter({ searchcount: param, type: 1 })
|
|
|
|
|
finalStore.fetchCustomConfig()
|
|
|
|
|
const obj = await finalStore.fetchCustomConfig()
|
|
|
|
|
console.log('obj-------------------------------', obj)
|
|
|
|
|
const tempOnList = cloneDeep(onList.value)
|
|
|
|
|
console.log('提交筛选条件tempOnList', tempOnList)
|
|
|
|
|
const sortList: any = []
|
|
|
|
|
obj.map((key) => {
|
|
|
|
|
const tempItem = tempOnList.find(item => item.id == key)
|
|
|
|
|
if(tempItem) {
|
|
|
|
|
sortList.push(tempItem)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
console.log('finalStore.sortList提交---------------', sortList)
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
if (sortList.length > 0)
|
|
|
|
|
finalStore.setFilterConfig(sortList)
|
|
|
|
|
|
|
|
|
|
// }, 500);
|
|
|
|
|
closeModal()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -147,16 +270,18 @@ function onCheckChange(checked: any, item: any) {
|
|
|
|
|
const index = selectIds.value.indexOf(item.id)
|
|
|
|
|
|
|
|
|
|
item.checked = checked
|
|
|
|
|
const currentIndex = offList.value.findIndex(v => v.id == item.id)
|
|
|
|
|
offList.value[currentIndex].checked = item.checked
|
|
|
|
|
|
|
|
|
|
if (index === -1 && checked)
|
|
|
|
|
selectIds.value.push(item.id)
|
|
|
|
|
else selectIds.value.splice(index, 1)
|
|
|
|
|
else
|
|
|
|
|
index !== -1 && selectIds.value.splice(index, 1)
|
|
|
|
|
|
|
|
|
|
checkAll.value = offList.value.every(item => item.checked)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const showIds = computed(() => {
|
|
|
|
|
return onList.value.map((item) => {
|
|
|
|
|
return item.id
|
|
|
|
|
return item?.id
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
@ -167,10 +292,7 @@ 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
|
|
|
|
|
@ -178,6 +300,7 @@ watch(
|
|
|
|
|
if (action === 'add') {
|
|
|
|
|
for (const item of offList.value) {
|
|
|
|
|
if (!item.fix && diff.includes(item.id)) {
|
|
|
|
|
if (item.checked) {
|
|
|
|
|
onList.value.push({
|
|
|
|
|
id: item.id,
|
|
|
|
|
name: item.name || '未配置',
|
|
|
|
|
@ -186,6 +309,7 @@ watch(
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
const list = onList.value
|
|
|
|
|
for (let index = 0; index < list.length; index++) {
|
|
|
|
|
@ -245,62 +369,59 @@ const leftInputHandler = debounce((keyword) => {
|
|
|
|
|
const rightInputHandler = debounce((keyword) => {
|
|
|
|
|
onKeyword.value = keyword
|
|
|
|
|
}, 300)
|
|
|
|
|
|
|
|
|
|
// async function getfield() {
|
|
|
|
|
// let res
|
|
|
|
|
// res = await getAllfieldList(3)
|
|
|
|
|
// const userStore = useUser()
|
|
|
|
|
// const userInfo = userStore.getUserInfo
|
|
|
|
|
// res = await getfieldList(3, userInfo.id)
|
|
|
|
|
// }
|
|
|
|
|
function onMove(e) {
|
|
|
|
|
// 这里的e表示即将停靠的元素。
|
|
|
|
|
if (e?.related?.className?.indexOf('fix') !== -1)
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
// getfield()
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<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" style="color: #333333;">自定义筛选</span>
|
|
|
|
|
<span class="wrapper-title">自定义筛选</span>
|
|
|
|
|
<div class="wrapper-bar">
|
|
|
|
|
<div class="wrapper-info" style="background-color: #F8F8F8;">
|
|
|
|
|
<span :style="{ 'margin-left': '18px', 'color': '#333333' }">筛选项信息</span>
|
|
|
|
|
<div class="wrapper-info">
|
|
|
|
|
<span :style="{ 'margin-left': '18px' }">筛选项信息</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
<div class="input_wrap">
|
|
|
|
|
<n-input placeholder="搜索关键词" @input="leftInputHandler">
|
|
|
|
|
<template #suffix>
|
|
|
|
|
<SvgIcon size="14px" name="magnifying-1" color="#999999" />
|
|
|
|
|
<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" style="color:#666666">
|
|
|
|
|
<n-checkbox
|
|
|
|
|
v-model:checked="checkAll"
|
|
|
|
|
label="全选"
|
|
|
|
|
@update:checked="onCheckAllChange"
|
|
|
|
|
/>
|
|
|
|
|
<div class="draggable-li">
|
|
|
|
|
<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>
|
|
|
|
|
@ -309,55 +430,31 @@ const rightInputHandler = debounce((keyword) => {
|
|
|
|
|
</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>
|
|
|
|
|
<span class="textbtnStyle" @click="clearDragSource">清空</span>
|
|
|
|
|
</template>
|
|
|
|
|
<div>
|
|
|
|
|
<!-- j -->
|
|
|
|
|
<div class="input_wrap">
|
|
|
|
|
<n-input placeholder="搜索关键词" @input="rightInputHandler">
|
|
|
|
|
<template #suffix>
|
|
|
|
|
<SvgIcon size="14px" name="magnifying-1" color="#999999" />
|
|
|
|
|
<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"
|
|
|
|
|
filter=".draggable-li[draggable='false']"
|
|
|
|
|
:animation="150"
|
|
|
|
|
group="shared"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
v-for="item in onList"
|
|
|
|
|
v-show="item.name.includes(onKeyword)"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:draggable="!item.fix"
|
|
|
|
|
:class="{ fix: item.fix }"
|
|
|
|
|
class="cursor-move draggable-li"
|
|
|
|
|
>
|
|
|
|
|
<!-- v-show="!item.fix" 判断是否为固定值 -->
|
|
|
|
|
<SvgIcon name="drag" size="14" />
|
|
|
|
|
<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>
|
|
|
|
|
@ -372,7 +469,7 @@ const rightInputHandler = debounce((keyword) => {
|
|
|
|
|
<n-button type="info" @click="handleSumbit">
|
|
|
|
|
确定
|
|
|
|
|
</n-button>
|
|
|
|
|
<n-button secondary style="margin-left: 15px" @click="closeModal">
|
|
|
|
|
<n-button secondary style="margin-left:15px; border: 1px solid #CAD2DD;" @click="closeModal">
|
|
|
|
|
取消
|
|
|
|
|
</n-button>
|
|
|
|
|
</div>
|
|
|
|
|
@ -389,18 +486,25 @@ const rightInputHandler = debounce((keyword) => {
|
|
|
|
|
&-title {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #333333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-bar {
|
|
|
|
|
background-color: #e8e8e8;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: #f8f8f8 !important;
|
|
|
|
|
width: calc(100% + 12px);
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
color: #333333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-footer {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
.n-button--info-type{
|
|
|
|
|
background: #507AFD !important;
|
|
|
|
|
}
|
|
|
|
|
.n-button--default-type{
|
|
|
|
|
background: #fff !important;
|
|
|
|
|
color: #333333;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-info {
|
|
|
|
|
@ -409,7 +513,7 @@ const rightInputHandler = debounce((keyword) => {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
|
background-color: #1980ff;
|
|
|
|
|
background-color: #1980FF;
|
|
|
|
|
content: "";
|
|
|
|
|
width: 5px;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
@ -423,20 +527,23 @@ const rightInputHandler = debounce((keyword) => {
|
|
|
|
|
.dragcardStyle {
|
|
|
|
|
--n-padding-bottom: 0px !important;
|
|
|
|
|
--n-padding-left: 0px !important;
|
|
|
|
|
::v-deep(.n-card__content) {
|
|
|
|
|
padding-left: 0 !important;
|
|
|
|
|
padding-right: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cardstyle {
|
|
|
|
|
width: 620px;
|
|
|
|
|
height: 800px;
|
|
|
|
|
--n-padding-bottom: 16px;
|
|
|
|
|
--n-padding-bottom: 20px;
|
|
|
|
|
--n-padding-left: 24px;
|
|
|
|
|
--n-padding-right: 24px;
|
|
|
|
|
--n-padding-top: 20px;
|
|
|
|
|
// background-color: #f8f8f8 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.textbtnStyle {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #1980ff;
|
|
|
|
|
color: #1980FF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.draggable-ul {
|
|
|
|
|
@ -452,6 +559,10 @@ const rightInputHandler = debounce((keyword) => {
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fix {
|
|
|
|
|
cursor: default !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.disable-check {
|
|
|
|
|
color: gainsboro;
|
|
|
|
|
}
|
|
|
|
|
@ -468,20 +579,30 @@ const rightInputHandler = debounce((keyword) => {
|
|
|
|
|
::v-deep(.n-card > .n-card-header .n-card-header__main){
|
|
|
|
|
font-weight: lighter !important;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #666666;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
::v-deep(.n-scrollbar){
|
|
|
|
|
border-top: none !important;
|
|
|
|
|
border-left: 1px solid #cad2dd !important;
|
|
|
|
|
border-right: 1px solid #cad2dd !important;
|
|
|
|
|
border-bottom: 1px solid #E8E8E8 !important;
|
|
|
|
|
border-top: 1px solid #E8E8E8 !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep(.n-button--info-type) {
|
|
|
|
|
background: #507afd !important;
|
|
|
|
|
::v-deep(.n-card__content){
|
|
|
|
|
padding: 20px 24px 0 24px !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep(.n-card__footer){
|
|
|
|
|
padding: 0 16px 16px 16px !important;
|
|
|
|
|
padding: 0 24px 16px 24px !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep(.n-button--default-type) {
|
|
|
|
|
::v-deep(.n-input .n-input-wrapper){
|
|
|
|
|
height: 44px !important;
|
|
|
|
|
border: 1px solid #cad2dd !important;
|
|
|
|
|
color: #333333;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
border-bottom: none !important;
|
|
|
|
|
// margin-bottom: -3px;
|
|
|
|
|
.n-input__input input{
|
|
|
|
|
height: 44px !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
::v-deep(.n-button--info-type){
|
|
|
|
|
background: #507AFD !important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
zhouxiaoan
1 year ago
