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

import { NScrollbar, NSpin, NTabPane, NTabs } from 'naive-ui';
import { defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import CardType from '@/components/card-type';
import SearchGroup from './search-group';
import TheEmpty from '/src/components/TheEmpty';
import { useThrottleFn } from '@vueuse/core';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import { musicSheetPage } from '../../api';

export default defineComponent({
  name: 'select-music',
  emits: ['select', 'add'],
  setup(props, { emit }) {
    const prepareStore = usePrepareStore();
    const state = reactive({
      loading: false,
      finshed: false, // 是否加载完
      pagination: {
        page: 1,
        rows: 20
      },
      searchGroup: {
        keyword: '',
        musicSheetCategoriesId: '',
        status: 1,
        versionFlag: false,
        subjectId: null
      },
      tableList: [] as any
    });
    const getList = async () => {
      try {
        if (state.pagination.page === 1) {
          state.loading = true;
        }
        const { data } = await musicSheetPage({
          ...state.searchGroup,
          ...state.pagination,
          subjectId: prepareStore.getSubjectId
        });
        state.loading = false;
        const tempRows = data.rows || [];
        const temp: any = [];
        tempRows.forEach((row: any) => {
          temp.push({
            id: row.id,
            coverImg: row.titleImg,
            type: 'MUSIC',
            title: row.musicSheetName,
            isCollect: false,
            isSelected: true,
            content: row.id,
            xmlFileUrl: row.xmlFileUrl
          });
        });
        state.tableList.push(...temp);
        state.finshed = data.pages <= data.current ? true : false;
      } catch {
        state.loading = false;
      }
    };

    const onSearch = async (item: any) => {
      state.pagination.page = 1;
      state.tableList = [];
      state.searchGroup = Object.assign(state.searchGroup, item);
      getList();
    };

    const throttledFn = useThrottleFn(() => {
      state.pagination.page = state.pagination.page + 1;
      getList();
    }, 500);

    onMounted(() => {
      getList();
    });
    return () => (
      <div class={styles.selectMusic}>
        <NTabs
          animated
          defaultValue="shareResources"
          paneClass={styles.paneTitle}
          justifyContent="center"
          paneWrapperClass={styles.paneWrapperContainer}>
          <NTabPane name="shareResources" tab="选择曲目">
            <SearchGroup onSearch={(item: any) => onSearch(item)} />
            <NScrollbar
              class={styles.listContainer}
              onScroll={(e: any) => {
                const clientHeight = e.target?.clientHeight;
                const scrollTop = e.target?.scrollTop;
                const scrollHeight = e.target?.scrollHeight;
                // 是否到底，是否加载完
                if (
                  clientHeight + scrollTop + 20 >= scrollHeight &&
                  !state.finshed &&
                  !state.loading
                ) {
                  throttledFn();
                }
              }}>
              <NSpin show={state.loading} size={'small'}>
                <div
                  class={[
                    styles.listSection,
                    !state.loading && state.tableList.length <= 0
                      ? styles.emptySection
                      : ''
                  ]}>
                  {state.tableList.length > 0 && (
                    <div class={styles.list}>
                      {state.tableList.map((item: any) => (
                        <CardType
                          isShowAdd
                          item={item}
                          onAdd={() => emit('add', item)}
                        />
                      ))}
                    </div>
                  )}
                  {!state.loading && state.tableList.length <= 0 && (
                    <TheEmpty />
                  )}
                </div>
              </NSpin>
            </NScrollbar>
          </NTabPane>
        </NTabs>
      </div>
    );
  }
});