|
@@ -1,22 +1,24 @@
|
|
-import { diffArrayChange } from "@/utils";
|
|
|
|
|
|
+import { debounce, diffArrayChange } from "@/utils";
|
|
import { computed, ref, Ref, watch } from "vue";
|
|
import { computed, ref, Ref, watch } from "vue";
|
|
|
|
|
|
export const useSelects = <T extends { id: any }>(items: Ref<T[]>, test = false) => {
|
|
export const useSelects = <T extends { id: any }>(items: Ref<T[]>, test = false) => {
|
|
const selects = ref<T[]>([]);
|
|
const selects = ref<T[]>([]);
|
|
|
|
|
|
const updateSelect = (item: T, select: boolean) => {
|
|
const updateSelect = (item: T, select: boolean) => {
|
|
- console.error('select', item.id, select)
|
|
|
|
const ndx = selects.value.findIndex((s) => s.id === item.id);
|
|
const ndx = selects.value.findIndex((s) => s.id === item.id);
|
|
|
|
+ test && console.log('updateSelect', item.id, select)
|
|
if (select) {
|
|
if (select) {
|
|
- ~ndx || selects.value.push(item as any);
|
|
|
|
|
|
+ if (~ndx) {
|
|
|
|
+ selects.value[ndx] = item as any
|
|
|
|
+ } else {
|
|
|
|
+ selects.value.push(item as any);
|
|
|
|
+ }
|
|
} else {
|
|
} else {
|
|
~ndx && selects.value.splice(ndx, 1);
|
|
~ndx && selects.value.splice(ndx, 1);
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const updateSelectId = (id: any, select: boolean) => {
|
|
const updateSelectId = (id: any, select: boolean) => {
|
|
- console.log('===>', [...items.value], id, select)
|
|
|
|
const item = items.value.find((s) => s.id === id);
|
|
const item = items.value.find((s) => s.id === id);
|
|
- console.log('===>', item)
|
|
|
|
if (item) {
|
|
if (item) {
|
|
updateSelect(item, select);
|
|
updateSelect(item, select);
|
|
} else {
|
|
} else {
|
|
@@ -35,22 +37,24 @@ export const useSelects = <T extends { id: any }>(items: Ref<T[]>, test = false)
|
|
items.map((item) => item.id),
|
|
items.map((item) => item.id),
|
|
oldItems.map((item) => item.id)
|
|
oldItems.map((item) => item.id)
|
|
);
|
|
);
|
|
- console.error([...items], 'itemChange', added, deleted)
|
|
|
|
|
|
+ test && console.error('added', added)
|
|
|
|
+ test && console.error('deleted', deleted)
|
|
|
|
+
|
|
added.forEach((id) => updateSelectId(id, true));
|
|
added.forEach((id) => updateSelectId(id, true));
|
|
deleted.forEach((id) => updateSelectId(id, false));
|
|
deleted.forEach((id) => updateSelectId(id, false));
|
|
oldItems.length = 0;
|
|
oldItems.length = 0;
|
|
oldItems.push(...items);
|
|
oldItems.push(...items);
|
|
},
|
|
},
|
|
- { deep: true }
|
|
|
|
|
|
+ { deep: true, flush: 'post' }
|
|
);
|
|
);
|
|
|
|
|
|
return {
|
|
return {
|
|
selects,
|
|
selects,
|
|
- unSelects: computed(() => items.value.filter(item => !selects.value.includes(item as any))),
|
|
|
|
|
|
+ unSelects: computed(() => items.value.filter(item => !selects.value.find(s => s.id === item.id))),
|
|
all: computed({
|
|
all: computed({
|
|
get: () => items.value.length === selects.value.length,
|
|
get: () => items.value.length === selects.value.length,
|
|
set: (select: boolean) => {
|
|
set: (select: boolean) => {
|
|
- console.error('select', select)
|
|
|
|
|
|
+ test && console.error('select', select)
|
|
items.value.forEach(item => updateSelect(item, select))
|
|
items.value.forEach(item => updateSelect(item, select))
|
|
}
|
|
}
|
|
}),
|
|
}),
|