feat: support checking all blocks in material add block panel

opentiny · Dec 4, 2024 · 78742fc · 78742fc
1 parent 7d0956f
commit 78742fc
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 4 deletions.
diff --git a/packages/plugins/block/src/composable/useBlock.js b/packages/plugins/block/src/composable/useBlock.js
@@ -699,6 +699,14 @@ const cancelCheck = (block) => {
   selectedBlockArray.value = selectedBlockArray.value.filter((item) => item.id !== block.id)
 }
 
+const checkAll = (blockList) => {
+  selectedBlockArray.value = blockList
+}
+
+const cancelCheckAll = () => {
+  selectedBlockArray.value = []
+}
+
 const getBlockAssetsByVersion = (block, version) => {
   let assets = block.assets
 
@@ -737,6 +745,8 @@ export default function () {
     sort,
     check,
     cancelCheck,
+    checkAll,
+    cancelCheckAll,
     getBlockList,
     setBlockList,
     getBlockI18n,

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
@@ -77,7 +77,7 @@ export default {
     TinyIconSearch: iconSearch()
   },
   setup() {
-    const { isDefaultGroupId, isRefresh, selectedGroup, selectedBlockArray, getGroupList } = useBlock()
+    const { isDefaultGroupId, isRefresh, selectedGroup, selectedBlockArray, getGroupList, cancelCheckAll } = useBlock()
     const { panel, closePanel } = useGroupPanel()
     const { message } = useModal()
     const getAppId = () => getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id
@@ -155,6 +155,9 @@ export default {
             status: 'error'
           })
         })
+        .finally(() => {
+          cancelCheckAll()
+        })
       panelState.isBlockGroupPanel = false
       closePanel()
     }

diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="block-add-transfer">
     <div class="block-add-transfer-footer">
+      <tiny-checkbox class="block-select-all" :indeterminate="isIndeterminate" v-model="selectedAll">
+        全选</tiny-checkbox
+      >
       <slot name="search"></slot>
       <tiny-select v-model="state.selectedSort" class="transfer-order-select" placeholder="请选择">
         <tiny-option v-for="item in state.sortList" :key="item.id" :label="item.text" :value="item.id"></tiny-option>
@@ -28,13 +31,14 @@ import { computed, onMounted, provide, reactive, watch } from 'vue'
 import { useBlock, useModal } from '@opentiny/tiny-engine-meta-register'
 import BlockList from './BlockList.vue'
 import BlockGroupArrange from './BlockGroupArrange.vue'
-import { Select, Option } from '@opentiny/vue'
+import { Checkbox, Select, Option } from '@opentiny/vue'
 import { fetchBlockById } from './http.js'
 
 export default {
   components: {
     BlockList,
     BlockGroupArrange,
+    TinyCheckbox: Checkbox,
     TinySelect: Select,
     TinyOption: Option
   },
@@ -45,7 +49,7 @@ export default {
     }
   },
   setup(props) {
-    const { cancelCheck, check, selectedBlockArray, sort } = useBlock()
+    const { check, cancelCheck, checkAll, cancelCheckAll, selectedBlockArray, sort } = useBlock()
 
     const sortList = [
       {
@@ -94,6 +98,25 @@ export default {
       state.blockList = sort(state.blockList, type)
     }
 
+    const selectedAll = computed({
+      get() {
+        return state.blockList.length > 0 && state.blockList.length === selectedBlockArray.value.length
+      },
+      set(value) {
+        if (value) {
+          checkAll(state.blockList)
+        } else {
+          cancelCheckAll()
+        }
+      }
+    })
+
+    const isIndeterminate = computed({
+      get() {
+        return selectedBlockArray.value.length > 0 && selectedBlockArray.value.length !== state.blockList.length
+      }
+    })
+
     const checkBlock = (block) => {
       if (selectedBlockArray.value.some((item) => item.id === block.id)) {
         cancelCheck(block)
@@ -139,6 +162,8 @@ export default {
     return {
       state,
       selectedBlockArray,
+      selectedAll,
+      isIndeterminate,
       checkBlock
     }
   }
@@ -164,6 +189,9 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    .block-select-all {
+      margin-right: 20px;
+    }
     .transfer-order-select {
       width: 120px;
       margin-left: 8px;

diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
@@ -521,7 +521,8 @@
 // 15、checkbox 复选框适配
 .tiny-checkbox.tiny-checkbox {
   .tiny-checkbox__input {
-    &.is-checked .tiny-checkbox__inner {
+    &.is-checked .tiny-checkbox__inner,
+    &.is-indeterminate .tiny-checkbox__inner {
       background-color: var(--te-common-bg-primary-checked);
       border-color: var(--te-common-border-checked);
     }