simplify SelectAll component api

opentiny · Dec 9, 2024 · a97dc74 · a97dc74
1 parent 4c3ae20
commit a97dc74
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 25 deletions.
diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
@@ -1,13 +1,7 @@
 <template>
   <div v-if="blockStyle === BlockStyles.Mini" class="header">
     <div class="col-checkbox" v-if="showCheckbox">
-      <select-all
-        :items="data"
-        :selected="checked"
-        :hidden-label="true"
-        @select-all="(items) => handleSelectAll(items)"
-        @deselect-all="handleDeselectAll"
-      ></select-all>
+      <select-all :allItems="data" :selected="checked" :hidden-label="true" @select-all="handleSelectAll"></select-all>
     </div>
     <div class="col-name">区块名称</div>
     <div class="col-time">创建时间</div>
@@ -372,11 +366,11 @@ export default {
     )
 
     const handleSelectAll = (items) => {
-      emit('checkAll', items)
-    }
-
-    const handleDeselectAll = () => {
-      emit('cancelCheckAll')
+      if (Array.isArray(items)) {
+        emit('checkAll', items)
+      } else {
+        emit('cancelCheckAll')
+      }
     }
 
     return {
@@ -398,8 +392,7 @@ export default {
       handleShowVersionMenu,
       editBlock,
       format,
-      handleSelectAll,
-      handleDeselectAll
+      handleSelectAll
     }
   }
 }

diff --git a/packages/common/component/SelectAll.vue b/packages/common/component/SelectAll.vue
@@ -4,12 +4,12 @@
   </tiny-checkbox>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { Checkbox as TinyCheckbox } from '@opentiny/vue'
 import { computed, defineEmits, defineProps } from 'vue'
 
 const props = defineProps({
-  items: {
+  allItems: {
     type: Array,
     default: () => []
   },
@@ -23,20 +23,20 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['selectAll', 'deselectAll'])
+const emit = defineEmits(['selectAll'])
 
 const selectedAll = computed({
   get() {
-    return props.items.length > 0 && props.items.length === props.selected.length
+    return props.allItems.length > 0 && props.allItems.length === props.selected.length
   },
   set(value) {
     if (value) {
-      emit('selectAll', props.items)
+      emit('selectAll', props.allItems)
     } else {
-      emit('deselectAll')
+      emit('selectAll', null)
     }
   }
 })
 
-const isIndeterminate = computed(() => props.selected.length > 0 && props.selected.length !== props.items.length)
+const isIndeterminate = computed(() => props.selected.length > 0 && props.selected.length !== props.allItems.length)
 </script>
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
@@ -4,10 +4,9 @@
       <select-all
         v-if="state.displayType === 'grid'"
         class="block-select-all"
-        :items="state.blockList"
+        :allItems="state.blockList"
         :selected="selectedBlockArray"
-        @select-all="checkAll"
-        @deselect-all="cancelCheckAll"
+        @select-all="handleSelectAll"
       ></select-all>
       <slot name="search"></slot>
       <tiny-select v-model="state.selectedSort" class="transfer-order-select" placeholder="请选择">
@@ -148,12 +147,21 @@ export default {
       blockSort(state.selectedSort)
     })
 
+    const handleSelectAll = (items) => {
+      if (Array.isArray(items)) {
+        checkAll(items)
+      } else {
+        cancelCheckAll()
+      }
+    }
+
     return {
       state,
       selectedBlockArray,
       checkBlock,
       checkAll,
-      cancelCheckAll
+      cancelCheckAll,
+      handleSelectAll
     }
   }
 }