|
|
|
@ -198,13 +198,27 @@ const selectIds = ref<string[]>([]);
|
|
|
|
|
|
|
|
|
|
function onCheckAllChange(value) {
|
|
|
|
|
const ids: string[] = [];
|
|
|
|
|
|
|
|
|
|
for (const item of offList.value) {
|
|
|
|
|
if (!item.fix) {
|
|
|
|
|
item.checked = value;
|
|
|
|
|
ids.push(item.id);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (value) {
|
|
|
|
|
offList.value.map((v) => {
|
|
|
|
|
if (!v.checked) {
|
|
|
|
|
onList.value.push(v);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
onList.value = [];
|
|
|
|
|
fixLeftList.value = [];
|
|
|
|
|
offList.value.map((v) => {
|
|
|
|
|
if (v.fix) {
|
|
|
|
|
fixLeftList.value.push(v);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
selectIds.value = value ? ids : [];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -310,6 +324,20 @@ function removeHandler(id: string, type: "fix" | "unfix") {
|
|
|
|
|
fixLeftList.value[index].checked = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const indeterminate = computed(() => {
|
|
|
|
|
let baseNum = 0;
|
|
|
|
|
offList.value.map((v) => {
|
|
|
|
|
if (v.fix) {
|
|
|
|
|
baseNum += 1;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
return (
|
|
|
|
|
onList.value.length + fixLeftList.value.length - baseNum > 0 &&
|
|
|
|
|
offList.value.length - baseNum >
|
|
|
|
|
onList.value.length + fixLeftList.value.length - baseNum
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
@ -344,11 +372,12 @@ function removeHandler(id: string, type: "fix" | "unfix") {
|
|
|
|
|
</template>
|
|
|
|
|
</n-input>
|
|
|
|
|
<div class="draggable-ul left-wrap">
|
|
|
|
|
<div class="draggable-li">
|
|
|
|
|
<div class="draggable-li" :class="{ checkAll: indeterminate }">
|
|
|
|
|
<n-checkbox
|
|
|
|
|
v-model:checked="checkAll"
|
|
|
|
|
label="全部"
|
|
|
|
|
@update:checked="onCheckAllChange"
|
|
|
|
|
:indeterminate="indeterminate"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content">
|
|
|
|
@ -380,7 +409,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
|
|
|
|
|
:bordered="false"
|
|
|
|
|
>
|
|
|
|
|
<template #header-extra>
|
|
|
|
|
<span class="textbtnStyle" @click="clearDragSource">清空</span>
|
|
|
|
|
<span class="textbtnStyle" @click="clearDragSource">恢复默认</span>
|
|
|
|
|
</template>
|
|
|
|
|
<div>
|
|
|
|
|
<n-input placeholder="搜索关键字">
|
|
|
|
@ -402,7 +431,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
|
|
|
|
|
:class="{ fix: item.fix }"
|
|
|
|
|
class="cursor-move draggable-item"
|
|
|
|
|
>
|
|
|
|
|
<SvgIcon name="drag" size="24" />
|
|
|
|
|
<SvgIcon name="drag" size="14" color="#666666" />
|
|
|
|
|
<span class="ml-2">{{ item.name }}</span>
|
|
|
|
|
<SvgIcon
|
|
|
|
|
v-if="!item.fix"
|
|
|
|
@ -426,7 +455,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
|
|
|
|
|
:class="{ fix: item.fix }"
|
|
|
|
|
class="cursor-move draggable-item"
|
|
|
|
|
>
|
|
|
|
|
<SvgIcon name="drag" size="24" />
|
|
|
|
|
<SvgIcon name="drag" size="14" color="#666666" />
|
|
|
|
|
<span class="ml-2">{{ item.name }}</span>
|
|
|
|
|
<SvgIcon
|
|
|
|
|
v-if="!item.fix"
|
|
|
|
@ -446,7 +475,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
|
|
|
|
|
|
|
|
|
|
<template #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>
|
|
|
|
@ -483,7 +512,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
|
|
|
|
|
position: relative;
|
|
|
|
|
color: #333333;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
background: #F8F8F8;
|
|
|
|
|
background: #f8f8f8;
|
|
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
|
background-color: #1980ff;
|
|
|
|
@ -513,7 +542,8 @@ function removeHandler(id: string, type: "fix" | "unfix") {
|
|
|
|
|
|
|
|
|
|
.textbtnStyle {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #1980ff;
|
|
|
|
|
color: #507AFD;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drag-wrapper {
|
|
|
|
@ -544,7 +574,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
|
|
|
|
|
color: #333;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-bottom: 1px solid #e8e8e8;
|
|
|
|
|
// border-bottom: 1px solid #e8e8e8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.disable-check {
|
|
|
|
@ -571,10 +601,24 @@ function removeHandler(id: string, type: "fix" | "unfix") {
|
|
|
|
|
::v-deep(.n-button--info-type) {
|
|
|
|
|
background: #507afd !important;
|
|
|
|
|
}
|
|
|
|
|
.left-wrap{
|
|
|
|
|
.left-wrap {
|
|
|
|
|
border: 1px solid #cbd3de;
|
|
|
|
|
}
|
|
|
|
|
// ::v-deep(.n-card__content){
|
|
|
|
|
// padding: 20px 24px 0 24px !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;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|