classroom-instruments/src/views/prepare-lessons/model/select-music/search-group.tsx

import { defineComponent, reactive, onMounted } from 'vue';
import styles from './index.module.less';
import { NButton, NForm, NFormItem, NSpace } from 'naive-ui';
import TheSearch from '/src/components/TheSearch';
import { useCatchStore } from '/src/store/modules/catchData';
import { useThrottleFn } from '@vueuse/core';

export default defineComponent({
  name: 'search-group',
  emits: ['search', 'add'],
  setup(props, { emit }) {
    const catchStore = useCatchStore();
    const forms = reactive({
      keyword: '',
      musicSheetCategoriesId: null
    });

    const onSearch = () => {
      emit('search', forms);
    };

    const throttledFn = useThrottleFn(() => {
      onSearch();
    }, 500);

    onMounted(async () => {
      // 获取教材分类列表
      await catchStore.getMusicSheetCategory();
      // 获取声部列表
      await catchStore.getSubjects();
    });
    return () => (
      <div class={styles.searchGroup}>
        <NForm labelAlign="left" labelPlacement="left">
          <NFormItem label="教材：">
            <NSpace class={styles.spaceSection}>
              {catchStore.getAllMusicCategories.map((music: any) => (
                <NButton
                  secondary={forms.musicSheetCategoriesId === music.id}
                  quaternary={forms.musicSheetCategoriesId !== music.id}
                  strong
                  focusable={false}
                  type={
                    forms.musicSheetCategoriesId === music.id
                      ? 'primary'
                      : 'default'
                  }
                  onClick={() => {
                    forms.musicSheetCategoriesId = music.id;
                    throttledFn();
                  }}>
                  {music.name}
                </NButton>
              ))}
            </NSpace>
          </NFormItem>
          <TheSearch
            class={styles.inputSearch}
            round
            onSearch={(val: string) => {
              forms.keyword = val;
              throttledFn();
            }}
          />
        </NForm>
      </div>
    );
  }
});