classroom-instruments/src/views/prepare-lessons/components/directory-main/index.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import { NIcon, NSpin, NScrollbar, NModal } from 'naive-ui';
import { lessonCoursewareDetail, lessonCoursewarePage } from '../../api';
import SelectLessonware from './select-lessonware';
import TheEmpty from '/src/components/TheEmpty';
import { usePrepareStore } from '/src/store/modules/prepareLessons';

export default defineComponent({
  name: 'directory-main',
  setup() {
    const prepareStore = usePrepareStore();
    const show = ref(true);
    const forms = reactive({
      showSelectBookStatus: false,
      coursewareStatus: false
    });

    const getLessonCourseware = async () => {
      try {
        const { data } = await lessonCoursewarePage({
          page: 1,
          rows: 1,
          type: 'COURSEWARE',
          enableFlag: 1
        });

        if (data.rows.length > 0) {
          prepareStore.setBaseCourseware(data.rows[0]);
        }
        forms.showSelectBookStatus = true;
      } catch {
        //
      }
    };

    const getLessonCoursewareDetail = async () => {
      try {
        const baseCourseware: any = prepareStore.getBaseCourseware;
        if (!baseCourseware.id) return;
        const { data } = await lessonCoursewareDetail({
          id: baseCourseware.id
        });
        const tempList: any = data.lessonList || [];
        tempList.forEach((item: any, index: number) => {
          item.selected = false;
          if (index === 0) {
            item.selected = true;
            const temp = item['knowledgeList'][0];
            prepareStore.setSelectKey(temp?.id);
            prepareStore.setLessonCoursewareId(temp?.lessonCoursewareId);
            prepareStore.setLessonCoursewareDetailId(
              temp?.lessonCoursewareDetailId
            );
          }
        });
        prepareStore.setTreeList(tempList);
      } catch {
        //
      }
    };

    onMounted(async () => {
      show.value = true;
      await getLessonCourseware();
      await getLessonCoursewareDetail();
      show.value = false;
    });
    return () => (
      <div class={styles.directoryList}>
        {forms.showSelectBookStatus && (
          <div
            class={styles['select-directory']}
            onClick={() => (forms.coursewareStatus = true)}>
            <span
              class={['cr-ellipsis']}
              title={prepareStore.getBaseCourseware.name}>
              {prepareStore.getBaseCourseware.name || '请选择教材'}
            </span>
            <NIcon class={styles.iconArrow}>
              <svg
                width="11px"
                height="15px"
                viewBox="0 0 11 15"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg">
                <g
                  stroke="none"
                  stroke-width="1"
                  fill="none"
                  fill-rule="evenodd"
                  opacity="0.699999988">
                  <g
                    transform="translate(-445.000000, -137.000000)"
                    fill="#131415">
                    <g transform="translate(152.000000, 120.000000)">
                      <path
                        d="M299.326227,20.2118001 L304.934089,28.4366632 C305.245211,28.8929759 305.127511,29.515105 304.671198,29.8262273 C304.505147,29.9394437 304.308836,30 304.107861,30 L292.892139,30 C292.339854,30 291.892139,29.5522847 291.892139,29 C291.892139,28.7990254 291.952695,28.6027139 292.065911,28.4366632 L297.673773,20.2118001 C297.984895,19.7554873 298.607024,19.6377872 299.063337,19.9489096 C299.16663,20.0193364 299.255801,20.1085074 299.326227,20.2118001 Z"
                        id="三角形"
                        transform="translate(298.500000, 24.500000) rotate(-270.000000) translate(-298.500000, -24.500000) "></path>
                    </g>
                  </g>
                </g>
              </svg>
            </NIcon>
          </div>
        )}

        <NScrollbar class={styles.scrollBar}>
          <NSpin show={show.value}>
            <div
              class={[
                styles.listSection,
                !show.value && prepareStore.getTreeList.length <= 0
                  ? styles.emptySection
                  : ''
              ]}>
              {prepareStore.getTreeList.map((item: any, index: number) => (
                <div class={styles.treeParent} key={'parent' + index}>
                  <div
                    class={[styles.treeItem, styles.parentItem]}
                    onClick={() => {
                      prepareStore.getTreeList.forEach((child: any) => {
                        if (item.id !== child.id) {
                          child.selected = false;
                        }
                      });
                      item.selected = item.selected ? false : true;
                    }}>
                    {item.knowledgeList && item.knowledgeList.length > 0 && (
                      <span
                        class={[
                          styles.arrow,
                          item.selected ? styles.arrowSelect : ''
                        ]}></span>
                    )}
                    <p
                      class={[
                        styles.title,
                        item.selected ? styles.titleSelect : ''
                      ]}>
                      {item.name}
                    </p>
                  </div>

                  {item.selected &&
                    item.knowledgeList &&
                    item.knowledgeList.map((child: any, j: number) => (
                      <div
                        key={'child' + j}
                        class={[
                          styles.treeItem,
                          styles.childItem,
                          styles.animation,
                          prepareStore.getSelectKey === child.id
                            ? styles.childSelect
                            : ''
                        ]}
                        onClick={() => {
                          prepareStore.setSelectKey(child.id);
                          prepareStore.setLessonCoursewareId(
                            child.lessonCoursewareId
                          );
                          prepareStore.setLessonCoursewareDetailId(
                            child.lessonCoursewareDetailId
                          );
                        }}>
                        <span class={styles.childArrow}></span>
                        <p class={styles.title}>{child.name}</p>
                      </div>
                    ))}
                </div>
              ))}
            </div>
            {!show.value && prepareStore.getTreeList.length <= 0 && (
              <TheEmpty />
            )}
          </NSpin>
        </NScrollbar>

        {/* 选择教材 */}
        <NModal
          v-model:show={forms.coursewareStatus}
          preset="card"
          showIcon={false}
          class={['modalTitle background', styles.coursewareModal]}
          title={'选择教材'}
          blockScroll={false}>
          <SelectLessonware
            onClose={() => (forms.coursewareStatus = false)}
            onConfirm={(item: any) => {
              prepareStore.setBaseCourseware(item);
              getLessonCoursewareDetail();
            }}
          />
        </NModal>
      </div>
    );
  }
});