feat: support checking all blocks in material add block panel (#923)

物料插件-区块分组-添加区块，区块列表没有全选功能改动点： 1. 给区块列表添加全选功能 2. 抽取了一个 SelectAll 组件到 common 包
opentiny · Dec 13, 2024 · 0a308db · 0a308db
1 parent e1806b3
commit 0a308db
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 10 deletions.
diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
@@ -1,6 +1,8 @@
 <template>
   <div v-if="blockStyle === BlockStyles.Mini" class="header">
-    <div class="col-checkbox"></div>
+    <div class="col-checkbox" v-if="showCheckbox">
+      <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>
     <div class="col-created-by">创建人</div>
@@ -143,6 +145,7 @@ import { Progress, Tooltip } from '@opentiny/vue'
 import PluginBlockItemImg from './PluginBlockItemImg.vue'
 import SearchEmpty from './SearchEmpty.vue'
 import SvgButton from './SvgButton.vue'
+import SelectAll from './SelectAll.vue'
 
 const BlockStyles = {
   Default: 'default',
@@ -160,7 +163,8 @@ export default {
     TinyTooltip: Tooltip,
     PluginBlockItemImg,
     SvgButton,
-    SearchEmpty
+    SearchEmpty,
+    SelectAll
   },
   props: {
     data: {
@@ -234,7 +238,7 @@ export default {
       default: 2
     }
   },
-  emits: ['click', 'iconClick', 'add', 'deleteBlock', 'openVersionPanel', 'editBlock'],
+  emits: ['click', 'iconClick', 'add', 'deleteBlock', 'openVersionPanel', 'editBlock', 'checkAll', 'cancelCheckAll'],
   setup(props, { emit }) {
     const panelState = inject('panelState', {})
     const blockUsers = inject('blockUsers')
@@ -361,6 +365,14 @@ export default {
       }
     )
 
+    const handleSelectAll = (items) => {
+      if (Array.isArray(items)) {
+        emit('checkAll', items)
+      } else {
+        emit('cancelCheckAll')
+      }
+    }
+
     return {
       BlockStyles,
       isShortcutPanel: panelState.isShortcutPanel,
@@ -379,7 +391,8 @@ export default {
       handleSettingMouseOver,
       handleShowVersionMenu,
       editBlock,
-      format
+      format,
+      handleSelectAll
     }
   }
 }
@@ -446,6 +459,11 @@ export default {
   }
 }
 
+.col-checkbox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 .col-checkbox,
 .block-item-small-list:deep(.table-selection) {
   width: 40px;

diff --git a/packages/common/component/SelectAll.vue b/packages/common/component/SelectAll.vue
@@ -0,0 +1,42 @@
+<template>
+  <tiny-checkbox class="block-select-all" :indeterminate="isIndeterminate" v-model="selectedAll">
+    {{ hiddenLabel ? '' : '全选' }}
+  </tiny-checkbox>
+</template>
+
+<script setup>
+import { Checkbox as TinyCheckbox } from '@opentiny/vue'
+import { computed, defineEmits, defineProps } from 'vue'
+
+const props = defineProps({
+  allItems: {
+    type: Array,
+    default: () => []
+  },
+  selected: {
+    type: Array,
+    default: () => []
+  },
+  hiddenLabel: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['selectAll'])
+
+const selectedAll = computed({
+  get() {
+    return props.allItems.length > 0 && props.allItems.length === props.selected.length
+  },
+  set(value) {
+    if (value) {
+      emit('selectAll', props.allItems)
+    } else {
+      emit('selectAll', null)
+    }
+  }
+})
+
+const isIndeterminate = computed(() => props.selected.length > 0 && props.selected.length !== props.allItems.length)
+</script>
diff --git a/packages/common/component/index.js b/packages/common/component/index.js
@@ -35,6 +35,7 @@ export { default as BlockLinkField } from './BlockLinkField.vue'
 export { default as BlockLinkEvent } from './BlockLinkEvent.vue'
 export { default as BlockDescription } from './BlockDescription.vue'
 export { default as PluginBlockList } from './PluginBlockList.vue'
+export { default as SelectAll } from './SelectAll.vue'
 export { default as ButtonGroup } from './ButtonGroup.vue'
 export { default as CloseIcon } from './CloseIcon.vue'
 export { default as LifeCycles } from './LifeCycles.vue'

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
@@ -157,6 +157,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,13 @@
 <template>
   <div class="block-add-transfer">
     <div class="block-add-transfer-footer">
+      <select-all
+        v-if="state.displayType === 'grid'"
+        class="block-select-all"
+        :allItems="state.blockList"
+        :selected="selectedBlockArray"
+        @select-all="handleSelectAll"
+      ></select-all>
       <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>
@@ -18,6 +25,8 @@
         :checked="selectedBlockArray"
         :grid-columns="6"
         @check="checkBlock"
+        @checkAll="checkAll"
+        @cancelCheckAll="cancelCheckAll"
       ></block-list>
     </div>
   </div>
@@ -26,6 +35,7 @@
 <script>
 import { computed, onMounted, provide, reactive, watch } from 'vue'
 import { useBlock, useModal } from '@opentiny/tiny-engine-meta-register'
+import { SelectAll } from '@opentiny/tiny-engine-common'
 import BlockList from './BlockList.vue'
 import BlockGroupArrange from './BlockGroupArrange.vue'
 import { Select, Option } from '@opentiny/vue'
@@ -35,6 +45,7 @@ export default {
   components: {
     BlockList,
     BlockGroupArrange,
+    SelectAll,
     TinySelect: Select,
     TinyOption: Option
   },
@@ -45,7 +56,7 @@ export default {
     }
   },
   setup(props) {
-    const { cancelCheck, check, selectedBlockArray, sort } = useBlock()
+    const { check, cancelCheck, checkAll, cancelCheckAll, selectedBlockArray, sort } = useBlock()
 
     const sortList = [
       {
@@ -136,10 +147,21 @@ export default {
       blockSort(state.selectedSort)
     })
 
+    const handleSelectAll = (items) => {
+      if (Array.isArray(items)) {
+        checkAll(items)
+      } else {
+        cancelCheckAll()
+      }
+    }
+
     return {
       state,
       selectedBlockArray,
-      checkBlock
+      checkBlock,
+      checkAll,
+      cancelCheckAll,
+      handleSelectAll
     }
   }
 }
@@ -164,6 +186,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/plugins/materials/src/meta/block/src/BlockList.vue b/packages/plugins/materials/src/meta/block/src/BlockList.vue
@@ -16,6 +16,8 @@
     @openVersionPanel="openVersionPanel"
     @add="setBlockPanelVisible(true)"
     @deleteBlock="deleteBlock"
+    @checkAll="(items) => checkAll(items)"
+    @cancelCheckAll="cancelCheckAll"
   ></plugin-block-list>
 </template>
 
@@ -72,7 +74,7 @@ export default {
       default: 2
     }
   },
-  emits: ['check', 'close'],
+  emits: ['check', 'close', 'checkAll', 'cancelCheckAll'],
   setup(props, { emit }) {
     const { generateNode, registerBlock } = useMaterial()
     const { isDefaultGroupId, isAllGroupId, selectedBlock, selectedGroup, isRefresh, getBlockAssetsByVersion } =
@@ -196,6 +198,14 @@ export default {
       confirm({ title, status, message: messageRender, exec })
     }
 
+    const checkAll = (items) => {
+      emit('checkAll', items)
+    }
+
+    const cancelCheckAll = () => {
+      emit('cancelCheckAll')
+    }
+
     return {
       blockRef,
       state,
@@ -204,7 +214,9 @@ export default {
       closeDetail,
       setBlockPanelVisible,
       openVersionPanel,
-      deleteBlock
+      deleteBlock,
+      checkAll,
+      cancelCheckAll
     }
   }
 }

diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
@@ -536,7 +536,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);
     }