|
|
|
@ -17,6 +17,21 @@ const selectIds = ref<string[]>([])
|
|
|
|
|
|
|
|
|
|
|
|
function showModal() {
|
|
|
|
function showModal() {
|
|
|
|
show.value = true
|
|
|
|
show.value = true
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 重置左右列表数据
|
|
|
|
|
|
|
|
const config = configStore.getConfig
|
|
|
|
|
|
|
|
const customConfig = configStore.getCustomConfig
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (config == null || customConfig == null)
|
|
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
const { showList, hideList } = generatList(config, customConfig)
|
|
|
|
|
|
|
|
onList.value = showList
|
|
|
|
|
|
|
|
offList.value = hideList
|
|
|
|
|
|
|
|
// 重置全选状态
|
|
|
|
|
|
|
|
checkAll.value = hideList.every(item => item.checked);
|
|
|
|
|
|
|
|
// 重置输入框查询条件
|
|
|
|
|
|
|
|
offKeyword.value = ''
|
|
|
|
|
|
|
|
onKeyword.value = ''
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function closeModal() {
|
|
|
|
function closeModal() {
|
|
|
|
@ -29,7 +44,7 @@ const offList = ref<any[]>([])
|
|
|
|
const onList = ref<any[]>([])
|
|
|
|
const onList = ref<any[]>([])
|
|
|
|
|
|
|
|
|
|
|
|
const allCount = computed(() => {
|
|
|
|
const allCount = computed(() => {
|
|
|
|
return `全部筛选(共${offList.value.length - 1}个)`
|
|
|
|
return `全部筛选(共${offList.value.length}个)`
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const selectCount = computed(() => {
|
|
|
|
const selectCount = computed(() => {
|
|
|
|
@ -83,8 +98,9 @@ function generatList(config, customConfig) {
|
|
|
|
fix: isDefaultFilter,
|
|
|
|
fix: isDefaultFilter,
|
|
|
|
checked: isChecked,
|
|
|
|
checked: isChecked,
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
if (isChecked && selectIds.value.indexOf(key) === -1) {
|
|
|
|
isChecked && selectIds.value.push(key)
|
|
|
|
isChecked && selectIds.value.push(key)
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -125,8 +141,7 @@ configStore.$subscribe(() => {
|
|
|
|
|
|
|
|
|
|
|
|
async function handleSumbit(e: MouseEvent) {
|
|
|
|
async function handleSumbit(e: MouseEvent) {
|
|
|
|
e.preventDefault()
|
|
|
|
e.preventDefault()
|
|
|
|
|
|
|
|
const param = onList.value.map((item) => {
|
|
|
|
const param = onList.value.filter(item => !asideMap[item.id].isDefaultFilter).map((item) => {
|
|
|
|
|
|
|
|
return item.id
|
|
|
|
return item.id
|
|
|
|
}).join(',')
|
|
|
|
}).join(',')
|
|
|
|
|
|
|
|
|
|
|
|
@ -156,7 +171,9 @@ 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
|
|
|
|
selectIds.value.splice(index, 1)
|
|
|
|
index !== -1 && selectIds.value.splice(index, 1)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
checkAll.value = offList.value.every(item => item.checked);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const showIds = computed(() => {
|
|
|
|
const showIds = computed(() => {
|
|
|
|
@ -180,11 +197,13 @@ watch(
|
|
|
|
if (action === 'add') {
|
|
|
|
if (action === 'add') {
|
|
|
|
for (const item of offList.value) {
|
|
|
|
for (const item of offList.value) {
|
|
|
|
if (!item.fix && diff.includes(item.id)) {
|
|
|
|
if (!item.fix && diff.includes(item.id)) {
|
|
|
|
onList.value.push({
|
|
|
|
if (item.checked) {
|
|
|
|
id: item.id,
|
|
|
|
onList.value.push({
|
|
|
|
name: item.name || '未配置',
|
|
|
|
id: item.id,
|
|
|
|
fix: item.fix || false,
|
|
|
|
name: item.name || '未配置',
|
|
|
|
})
|
|
|
|
fix: item.fix || false,
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -248,15 +267,21 @@ const rightInputHandler = debounce((keyword) => {
|
|
|
|
onKeyword.value = keyword
|
|
|
|
onKeyword.value = keyword
|
|
|
|
}, 300)
|
|
|
|
}, 300)
|
|
|
|
|
|
|
|
|
|
|
|
async function getfield(){
|
|
|
|
async function getfield() {
|
|
|
|
let res;
|
|
|
|
let res;
|
|
|
|
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)
|
|
|
|
res = await getfieldList(3, userInfo.id)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function onMove(e) {
|
|
|
|
|
|
|
|
// 这里的e表示即将停靠的元素。
|
|
|
|
|
|
|
|
if (e?.related?.className?.indexOf('fix') !== -1) {
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(()=>{
|
|
|
|
onMounted(() => {
|
|
|
|
getfield();
|
|
|
|
getfield();
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
@ -280,9 +305,9 @@ onMounted(()=>{
|
|
|
|
:bordered="false"
|
|
|
|
:bordered="false"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<n-input placeholder="搜索关键字" @input="leftInputHandler">
|
|
|
|
<n-input placeholder="搜索关键词" @input="leftInputHandler">
|
|
|
|
<template #suffix>
|
|
|
|
<template #suffix>
|
|
|
|
<SvgIcon size="14px" name="magnifying-1" />
|
|
|
|
<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;">
|
|
|
|
@ -316,23 +341,18 @@ onMounted(()=>{
|
|
|
|
<span class="textbtnStyle" @click="clearDragSource">清空</span>
|
|
|
|
<span class="textbtnStyle" @click="clearDragSource">清空</span>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<n-input placeholder="搜索关键字" @input="rightInputHandler">
|
|
|
|
<n-input placeholder="搜索关键词" @input="rightInputHandler">
|
|
|
|
<template #suffix>
|
|
|
|
<template #suffix>
|
|
|
|
<SvgIcon size="14px" name="magnifying-1" />
|
|
|
|
<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 style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;" class="scroll">
|
|
|
|
<VueDraggable v-model="onList" filter=".draggable-li[draggable='false']" class="draggable-ul" :animation="150" group="shared">
|
|
|
|
<VueDraggable v-model="onList" class="draggable-ul" :animation="150" group="shared" >
|
|
|
|
<div
|
|
|
|
<div v-for="item in onList" v-show="item.name.includes(onKeyword)" :key="item.id" :draggable="true" class="cursor-move draggable-li">
|
|
|
|
v-for="item in onList" v-show="item.name.includes(onKeyword)" :key="item.id" :draggable="!item.fix" :class="{ fix: item.fix }"
|
|
|
|
<SvgIcon name="drag" size="24" />
|
|
|
|
class="cursor-move draggable-li"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<SvgIcon v-show="!item.fix" name="drag" size="24" />
|
|
|
|
|
|
|
|
<span class="ml-2">{{ item.name }}</span>
|
|
|
|
<span class="ml-2">{{ item.name }}</span>
|
|
|
|
<SvgIcon
|
|
|
|
<SvgIcon size="16px" style="display:block;margin-left: auto;cursor: pointer;"
|
|
|
|
v-if="!item.fix" size="16px" style="display:block;margin-left: auto;cursor: pointer;"
|
|
|
|
name="clear" @click="removeHandler(item.id)" />
|
|
|
|
name="clear" @click="removeHandler(item.id)"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</VueDraggable>
|
|
|
|
</VueDraggable>
|
|
|
|
</n-scrollbar>
|
|
|
|
</n-scrollbar>
|
|
|
|
@ -366,9 +386,10 @@ onMounted(()=>{
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&-bar {
|
|
|
|
&-bar {
|
|
|
|
background-color: #e8e8e8;
|
|
|
|
background-color: #f8f8f8;
|
|
|
|
width: 100%;
|
|
|
|
width: calc(100% + 12px);
|
|
|
|
margin-top: 20px;
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
|
|
color: #333333;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&-footer {
|
|
|
|
&-footer {
|
|
|
|
@ -422,6 +443,10 @@ onMounted(()=>{
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.fix {
|
|
|
|
|
|
|
|
cursor: default !important;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.disable-check {
|
|
|
|
.disable-check {
|
|
|
|
color: gainsboro;
|
|
|
|
color: gainsboro;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
Dragon
1 year ago
