fix: block list filters not clearing

packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue

@@ -5,9 +5,9 @@
       <div class="block-filters-item-value">
         <tiny-checkbox-group
           v-if="!filter.usingSelect"
-          v-model="state.checkGroup[filter.id]"
+          v-model="state.filterValues[filter.id]"
           type="checkbox"
-          @change="getFilters($event, filter.id)"
+          @change="handleValueChange"
         >
           <tiny-checkbox
             v-for="item in selectOptions[filter.id]"
@@ -18,11 +18,11 @@
         </tiny-checkbox-group>
         <tiny-select
           v-else
-          v-model="state.checkGroup[filter.id]"
+          v-model="state.filterValues[filter.id]"
           size="mini"
           multiple
           is-drop-inherit-width
-          @change="getFilters($event, filter.id)"
+          @change="handleValueChange"
         >
           <tiny-option
             v-for="item in selectOptions[filter.id]"
@@ -54,15 +54,19 @@ export default {
     }
   },
   setup(props, { emit }) {
-    const filters = {}
-    const state = reactive({
-      checkGroup: props.filters.reduce(
+    const initFilterValues = () => {
+      return props.filters.reduce(
         (result, filter) => ({
           ...result,
           [filter.id]: []
         }),
         {}
       )
+    }
+
+    const state = reactive({
+      // filterValues 是一个对象。key 为 filter id，value 为选中的值，是一个数组
+      filterValues: initFilterValues()
     })
 
     // 不同的filter，值所在的字段可能是id或者name。这里把实际的值都映射到value字段
@@ -79,16 +83,19 @@ export default {
       )
     })
 
-    const getFilters = (checked, id) => {
-      filters[id] = checked
+    const handleValueChange = () => {
+      emit('search', state.filterValues)
+    }
 
-      emit('search', null, filters)
+    const clearFilters = () => {
+      state.filterValues = initFilterValues()
     }
 
     return {
       state,
       selectOptions,
-      getFilters
+      handleValueChange,
+      clearFilters
     }
   }
 }

packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue

@@ -9,14 +9,18 @@
     <template #content>
       <div class="block-add-content">
         <div class="block-add-content-title">区块列表</div>
-        <block-group-filters :filters="state.filters" @search="searchBlocks"></block-group-filters>
+        <block-group-filters
+          ref="groupFiltersRef"
+          :filters="state.filters"
+          @search="searchBlocks"
+        ></block-group-filters>
         <block-group-transfer v-model:blockList="state.blockList">
           <template #search>
             <tiny-search
               class="transfer-order-search"
               v-model="state.searchValue"
               placeholder="请输入关键词"
-              @update:modelValue="searchBlocks"
+              @update:modelValue="searchBlocks(state.filterValues)"
             >
               <template #prefix>
                 <tiny-icon-search />
@@ -106,9 +110,18 @@ export default {
           children: [],
           usingSelect: true
         }
-      ]
+      ],
+      filterValues: {}
     })
 
+    const groupFiltersRef = ref(null)
+
+    const clearSearchParams = () => {
+      state.searchValue = ''
+      state.filterValues = {}
+      groupFiltersRef.value?.clearFilters()
+    }
+
     const addBlocks = () => {
       const groupId = selectedGroup.value.groupId
       fetchGroupBlocksById({ groupId })
@@ -142,7 +155,7 @@ export default {
             useMaterial().updateCanvasDependencies(addedBlocks)
 
             isRefresh.value = true
-            state.searchValue = ''
+            clearSearchParams()
             selectedBlockArray.value.length = 0
             useResource().fetchResource({ isInit: false }) // 添加区块分组，不需要重新init页面或者区块。
             useNotify({
@@ -165,7 +178,7 @@ export default {
     }
 
     const closeGroupPanel = () => {
-      state.searchValue = ''
+      clearSearchParams()
       selectedBlockArray.value.length = 0
       panelState.isBlockGroupPanel = false
       closePanel()
@@ -180,7 +193,8 @@ export default {
       return blocks.filter((block) => !isInBlockGroup(block) && !isSelectedBlock(block))
     }
 
-    const searchBlocks = (value, filters) => {
+    const searchBlocks = (filters) => {
+      state.filterValues = filters
       nextTick(() => {
         const params = {
           groupId: selectedGroup.value.groupId,
@@ -202,10 +216,7 @@ export default {
       })
     }
 
-    const fetchBlocks = () => {
-      const groupId = selectedGroup.value.groupId
-      if (!groupId || isDefaultGroupId(groupId)) return
-
+    const fetchBlocks = (groupId) => {
       fetchAvailableBlocks({ groupId })
         .then((data) => {
           initGruopBlockMap(getGroupList())
@@ -220,10 +231,6 @@ export default {
     }
 
     const getFilters = () => {
-      const groupId = selectedGroup.value.groupId
-      if (!groupId || isDefaultGroupId(groupId)) {
-        return
-      }
       Promise.allSettled([fetchTenants(), fetchUsers(), fetchTags()]).then((results) => {
         state.filters[0].children = [
           {
@@ -248,17 +255,25 @@ export default {
       })
     }
 
-    watch([() => panel.show, () => selectedGroup.value.groupId], (values) => {
-      if (values[0]) {
-        panelState.isBlockGroupPanel = true
-        fetchBlocks()
-        getFilters()
+    watch([() => panel.show, () => selectedGroup.value.groupId], ([show, groupId]) => {
+      if (!show) {
+        return
+      }
+
+      if (!groupId || isDefaultGroupId(groupId)) {
+        return
       }
+
+      panelState.isBlockGroupPanel = true
+      clearSearchParams()
+      fetchBlocks(groupId)
+      getFilters()
     })
 
     return {
       selectedGroup,
       state,
+      groupFiltersRef,
       panel,
       closeGroupPanel,
       addBlocks,