|
|
@ -128,15 +128,23 @@ const selectIds = ref<string[]>([]);
|
|
|
|
|
|
|
|
|
|
|
|
function onCheckAllChange(value) {
|
|
|
|
function onCheckAllChange(value) {
|
|
|
|
const ids: string[] = [];
|
|
|
|
const ids: string[] = [];
|
|
|
|
|
|
|
|
|
|
|
|
for (const item of offList.value) {
|
|
|
|
for (const item of offList.value) {
|
|
|
|
if (!item.fix) {
|
|
|
|
if (!item.fix) {
|
|
|
|
item.checked = value;
|
|
|
|
item.checked = value;
|
|
|
|
ids.push(item.id);
|
|
|
|
ids.push(item.id);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
selectIds.value = value ? ids : [];
|
|
|
|
selectIds.value = value ? ids : [];
|
|
|
|
|
|
|
|
console.log(offList.value,'offList')
|
|
|
|
|
|
|
|
if (value) {
|
|
|
|
|
|
|
|
offList.value.map((v) => {
|
|
|
|
|
|
|
|
if (!v.checked) {
|
|
|
|
|
|
|
|
onList.value.push(v);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
onList.value = [];
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function onCheckChange(checked: any, item: any) {
|
|
|
|
function onCheckChange(checked: any, item: any) {
|
|
|
@ -277,6 +285,16 @@ onMounted(async () => {
|
|
|
|
console.log(offList.value, "offList.value");
|
|
|
|
console.log(offList.value, "offList.value");
|
|
|
|
console.log(useList, "useList");
|
|
|
|
console.log(useList, "useList");
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const indeterminate = computed(() => {
|
|
|
|
|
|
|
|
let baseNum = 0;
|
|
|
|
|
|
|
|
offList.value.map((v) => {
|
|
|
|
|
|
|
|
if (v.fix) {
|
|
|
|
|
|
|
|
baseNum += 1;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
return onList.value.length > 0 && offList.value.length - baseNum > onList.value.length;
|
|
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
@ -311,11 +329,12 @@ onMounted(async () => {
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</n-input>
|
|
|
|
</n-input>
|
|
|
|
<div class="draggable-ul">
|
|
|
|
<div class="draggable-ul">
|
|
|
|
<div class="draggable-li">
|
|
|
|
<div class="draggable-li" :class="{ checkAll: indeterminate }">
|
|
|
|
<n-checkbox
|
|
|
|
<n-checkbox
|
|
|
|
v-model:checked="checkAll"
|
|
|
|
v-model:checked="checkAll"
|
|
|
|
label="全部"
|
|
|
|
label="全部"
|
|
|
|
@update:checked="onCheckAllChange"
|
|
|
|
@update:checked="onCheckAllChange"
|
|
|
|
|
|
|
|
:indeterminate="indeterminate"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content">
|
|
|
@ -347,7 +366,7 @@ onMounted(async () => {
|
|
|
|
:bordered="false"
|
|
|
|
:bordered="false"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<template #header-extra>
|
|
|
|
<template #header-extra>
|
|
|
|
<span class="textbtnStyle" @click="clearDragSource">清空</span>
|
|
|
|
<span class="textbtnStyle" @click="clearDragSource">恢复默认</span>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<n-input placeholder="搜索关键字">
|
|
|
|
<n-input placeholder="搜索关键字">
|
|
|
@ -377,11 +396,11 @@ onMounted(async () => {
|
|
|
|
:class="{ fix: item.fix }"
|
|
|
|
:class="{ fix: item.fix }"
|
|
|
|
class="cursor-move draggable-item"
|
|
|
|
class="cursor-move draggable-item"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<SvgIcon name="drag" size="24" />
|
|
|
|
<SvgIcon name="drag" size="14" />
|
|
|
|
<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"
|
|
|
|
size="16"
|
|
|
|
style="display: block; margin-left: auto; cursor: pointer"
|
|
|
|
style="display: block; margin-left: auto; cursor: pointer"
|
|
|
|
name="clear"
|
|
|
|
name="clear"
|
|
|
|
@click="removeHandler(item.id)"
|
|
|
|
@click="removeHandler(item.id)"
|
|
|
@ -396,7 +415,7 @@ onMounted(async () => {
|
|
|
|
<template #footer>
|
|
|
|
<template #footer>
|
|
|
|
<div class="wrapper-footer">
|
|
|
|
<div class="wrapper-footer">
|
|
|
|
<n-button type="info" @click="handleSumbit"> 确认 </n-button>
|
|
|
|
<n-button type="info" @click="handleSumbit"> 确认 </n-button>
|
|
|
|
<n-button secondary style="margin-left: 15px" @click="closeModal">
|
|
|
|
<n-button secondary style="margin-left: 15px;" @click="closeModal">
|
|
|
|
取消
|
|
|
|
取消
|
|
|
|
</n-button>
|
|
|
|
</n-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -417,6 +436,7 @@ onMounted(async () => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&-bar {
|
|
|
|
&-bar {
|
|
|
|
|
|
|
|
background-color: #e8e8e8;
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
margin-top: 20px;
|
|
|
|
margin-top: 20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -430,7 +450,9 @@ onMounted(async () => {
|
|
|
|
font-weight: bold;
|
|
|
|
font-weight: bold;
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
color: #333333;
|
|
|
|
color: #333333;
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
background: #f8f8f8;
|
|
|
|
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
&:before {
|
|
|
|
background-color: #1980ff;
|
|
|
|
background-color: #1980ff;
|
|
|
|
content: "";
|
|
|
|
content: "";
|
|
|
@ -482,7 +504,7 @@ onMounted(async () => {
|
|
|
|
color: #333;
|
|
|
|
color: #333;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
border-bottom: 1px solid #E8E8E8;
|
|
|
|
border-bottom: 1px solid #e8e8e8;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.disable-check {
|
|
|
|
.disable-check {
|
|
|
@ -504,5 +526,30 @@ onMounted(async () => {
|
|
|
|
::v-deep(.n-scrollbar) {
|
|
|
|
::v-deep(.n-scrollbar) {
|
|
|
|
border-top: none !important;
|
|
|
|
border-top: none !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep(.checkAll .n-checkbox.n-checkbox--indeterminate .n-checkbox-box) {
|
|
|
|
|
|
|
|
background: none;
|
|
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep(.checkAll .n-checkbox-box__border) {
|
|
|
|
|
|
|
|
border: 1px solid #e8e8e8 !important;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep(.checkAll .n-checkbox-icon) {
|
|
|
|
|
|
|
|
border: 3px solid #fff;
|
|
|
|
|
|
|
|
background: #1980ff;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep(.checkAll .n-checkbox-icon svg) {
|
|
|
|
|
|
|
|
display: none !important;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep(.n-card > .n-card-header .n-card-header__main) {
|
|
|
|
|
|
|
|
font-weight: lighter !important;
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
color: #666666;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep(.n-button--info-type) {
|
|
|
|
|
|
|
|
background: #507afd !important;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep(.n-button--default-type){
|
|
|
|
|
|
|
|
border: 1px solid #cad2dd !important;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|