classroom-instruments/src/views/xiaoku-ai/index.tsx

import { defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import TheSearch from '@/components/TheSearch';
import { NButton, NImage, NSpace, NSpin } from 'naive-ui';
import { useRouter } from 'vue-router';
import { api_musicSheetCategoriesPage, api_musicTagTree } from './api';
import TheEmpty from '/src/components/TheEmpty';
import { useCatchStore } from '/src/store/modules/catchData';

export default defineComponent({
  name: 'XiaokuAi',
  setup() {
    const catchStore = useCatchStore();
    const router = useRouter();
    const forms = reactive({
      musicTagIds: [] as any[],
      enable: true,
      subjectId: null,
      keyword: '',
      page: 1,
      rows: 9999
    });
    const data = reactive({
      tags: [] as any[],
      tagChildren: [] as any[],
      tagActiveId: '',
      tagActive: {} as any,
      list: [] as any,
      loading: false
    });
    const getTags = async () => {
      const res = await api_musicTagTree();
      if (Array.isArray(res?.data) && res.data.length) {
        data.tags = res.data;
        data.tagActiveId = res.data[0].id;
        const list: any[] = [];
        renderTag(res.data[0].children, list);
        data.tagChildren = list;
      }
    };

    const getList = async () => {
      data.loading = true;
      try {
        const res = await api_musicSheetCategoriesPage({
          ...forms,
          musicTagIds: [data.tagActiveId, ...forms.musicTagIds].filter(Boolean)
        });
        if (Array.isArray(res?.data?.rows)) {
          data.list = res.data.rows;
        }
      } catch {
        //
      }
      data.loading = false;
    };

    // 递归渲染标签
    const renderTag = (_data: any[], _list: any[]): any => {
      if (!_data?.length) return;
      const item = {
        columnName: _data[0].columnName,
        list: [] as any[]
      };
      const childrens = [];
      for (let i = 0; i < _data.length; i++) {
        item.list.push({
          name: _data[i].name,
          id: _data[i].id,
          activeIndex: -1
        });
        if (_data[i].children) {
          childrens.push(..._data[i].children);
        }
      }
      _list.push(item);
      if (childrens.length) {
        renderTag(childrens, _list);
      }
    };
    onMounted(async () => {
      data.loading = true;
      try {
        await getTags();
        await getList();
        // 获取教材分类列表
        await catchStore.getSubjects();
      } catch {
        //
      }
      data.loading = false;
    });

    /** 改变顶级分类 */
    const changeTag = (item: any, index: number) => {
      data.tagActiveId = item.id;
      forms.musicTagIds = [];
      const list: any[] = [];
      renderTag(data.tags[index].children, list);
      data.tagChildren = list;
      getList();
    };

    /** 选中子选项 */
    const selectChildTag = (columnIndex: number, index: number) => {
      const oldActiveItem =
        data.tagChildren[columnIndex].list[
          data.tagChildren[columnIndex].activeIndex
        ];
      const activeItem = data.tagChildren[columnIndex].list[index];
      if (oldActiveItem && oldActiveItem.id !== activeItem.id) {
        forms.musicTagIds = forms.musicTagIds.filter(
          item => item !== oldActiveItem.id
        );
      }
      if (forms.musicTagIds.includes(activeItem.id)) {
        forms.musicTagIds = forms.musicTagIds.filter(
          item => item !== activeItem.id
        );
        data.tagChildren[columnIndex].activeIndex = -1;
      } else {
        forms.musicTagIds.push(activeItem.id);
        data.tagChildren[columnIndex].activeIndex = index;
      }
      getList();
    };
    return () => (
      <div class={styles.container}>
        <div class={styles.tools}>
          <div class={styles.tagWrap}>
            <div class={styles.tags}>
              <NSpace size={[20, 12]}>
                <span class={styles.firstButton}>
                  {data.tags?.[0]?.columnName}
                </span>

                {data.tags.map((item: any, index: number) => {
                  return (
                    <>
                      <NButton
                        round
                        secondary={data.tagActiveId === item.id ? false : true}
                        type={
                          data.tagActiveId === item.id ? 'primary' : 'default'
                        }
                        onClick={() => changeTag(item, index)}>
                        {item.name}
                      </NButton>
                    </>
                  );
                })}
              </NSpace>
            </div>

            {data.tagChildren.map((column: any, columnIndex: number) => {
              return (
                <div class={styles.tags}>
                  <NSpace size={[20, 12]}>
                    <span class={styles.firstButton}>{column.columnName}</span>

                    {column.list.map((item: any, index: number) => {
                      return (
                        <>
                          <NButton
                            round
                            secondary={
                              column.activeIndex === index ? false : true
                            }
                            type={
                              column.activeIndex === index
                                ? 'primary'
                                : 'default'
                            }
                            onClick={() => selectChildTag(columnIndex, index)}>
                            {item.name}
                          </NButton>
                        </>
                      );
                    })}
                  </NSpace>
                </div>
              );
            })}
            <div class={styles.tags}>
              <NSpace size={[20, 12]}>
                <span class={styles.firstButton}>声部</span>

                {catchStore.getSubjectAllList.map((item: any) => {
                  return (
                    <>
                      <NButton
                        round
                        secondary={item.id === forms.subjectId ? false : true}
                        type={
                          item.id === forms.subjectId ? 'primary' : 'default'
                        }
                        onClick={() => {
                          forms.subjectId = item.id;
                          getList();
                        }}>
                        {item.name}
                      </NButton>
                    </>
                  );
                })}
              </NSpace>
            </div>
          </div>
          <TheSearch
            round
            onSearch={val => {
              forms.keyword = val;
              getList();
            }}
          />
        </div>
        <NSpin show={data.loading}>
          <div
            class={[styles.content, data.loading ? styles.loadingContent : '']}>
            {data.list.length > 0 ? (
              <NSpace size={[50, 40]}>
                {data.list.map((item: any, index: number) => {
                  return (
                    <div
                      class={styles.item}
                      key={`item-${index}`}
                      onClick={() =>
                        router.push({
                          path: '/xiaoku-music',
                          query: {
                            id: item.id,
                            name: item.name
                          }
                        })
                      }>
                      <div class={styles.cover}>
                        <div class={styles.itemImg}>
                          <div class={styles.itemBg}></div>
                          <NImage
                            objectFit="cover"
                            src={item.coverImg}
                            lazy
                            previewDisabled={true}
                            onLoad={e => {
                              (e.target as any).dataset.loaded = 'true';
                            }}
                          />
                        </div>
                      </div>
                      <div class={styles.itemName}>{item.name}</div>
                    </div>
                  );
                })}
              </NSpace>
            ) : (
              ''
            )}
            {!data.loading && data.list.length <= 0 && <TheEmpty></TheEmpty>}
          </div>
        </NSpin>
      </div>
    );
  }
});