classroom-instruments/src/views/prepare-lessons/model/add-other-source/index.tsx

import { defineComponent, reactive, ref } from 'vue';
import { NImage, NModal } from 'naive-ui';
import styles from './index.module.less';
import icon1 from '../../images/addSource/icon1.png';
import icon2 from '../../images/addSource/icon2.png';
import icon3 from '../../images/addSource/icon3.png';
import icon4 from '../../images/addSource/icon4.png';
import icon5 from '../../images/addSource/icon5.png';
import icon6 from '../../images/addSource/icon6.png';
import icon7 from '../../images/addSource/icon7.png';
import icon8 from '../../images/addSource/icon8.png';
import { useRouter } from 'vue-router';
import SourceRhythm from '../source-rhythm';
import SourceInstrument from '../source-instrument';
import SourceKnowledge from '../source-knowledge';
import SourceMusician from '../source-musician';
import SourceMusic from '../source-music';
import { eventGlobal } from '/src/utils';
import SubjectSync from '../subject-sync';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
import UploadModal, {
  formatUrlType
} from '/src/views/natural-resources/components/my-resources/upload-modal';
import SaveModal from '/src/views/natural-resources/components/my-resources/save-modal';
import { modalClickMask } from '/src/state';

export default defineComponent({
  name: 'add-other-source',
  emits: ['close', 'comfirm'],
  setup(props, { emit }) {
    const prepareStore = usePrepareStore();
    const router = useRouter();
    const sourceList = ref([
      {
        image: icon8,
        name: '上传资源',
        index: 7
      },
      {
        image: icon1,
        name: '听音练习',
        index: 0
      },
      {
        image: icon2,
        name: '节奏练习',
        index: 1
      },
      {
        image: icon3,
        name: '乐器百科',
        index: 2
      },
      {
        image: icon6,
        name: '名曲鉴赏',
        index: 3
      },
      {
        image: icon5,
        name: '音乐家',
        index: 4
      },
      {
        image: icon4,
        name: '乐理知识',
        index: 5
      }

      // {
      //   image: icon7,
      //   name: '制作曲谱',
      //   index: 6
      // }
    ]);
    const state = reactive({
      listenStatus: false, // 听音练习
      rhythmStatus: false, //节奏
      theoryStatus: false, //
      musicStatus: false, //
      instrumentStatus: false, //
      musicianStatus: false, //

      uploadStatus: false,
      saveStatus: false,
      editStatus: false, // 是否编辑
      editList: [] as any, // TOD
      editIds: [] as any, // 编辑的
      editOverIds: [] as any // 确认修改的数据
    });

    // LISTEN:听音,RHYTHM:节奏,THEORY:乐理知识,MUSIC_WIKI:曲目 INSTRUMENT:乐器 MUSICIAN:音乐家）

    const onDetail = (item: any) => {
      switch (item.index) {
        case 0:
          state.listenStatus = true;
          break;
        case 1:
          state.rhythmStatus = true;
          break;
        case 2:
          state.instrumentStatus = true;
          break;
        case 3:
          state.musicStatus = true;
          break;
        case 4:
          state.musicianStatus = true;
          break;
        case 5:
          state.theoryStatus = true;
          break;
        case 6:
          eventGlobal.emit('pageBeforeLeave', () => {
            // 直接跳转到制谱页面 (临时存储数据)
            sessionStorage.setItem('notation-open-create', '1');
            router.push('/notation');
          });
          break;
        case 7:
          // eventGlobal.emit('pageBeforeLeave', () => {
          //   // 直接跳转到制谱页面 (临时存储数据)
          //   sessionStorage.setItem('notation-open-create', '1');
          //   router.push('/notation');
          // });
          state.saveStatus = true;
          break;
        default:
          break;
      }
    };
    return () => (
      <>
        <div class={styles.addOtherSource}>
          {sourceList.value.map(source => (
            <div class={styles.sourceItem} onClick={() => onDetail(source)}>
              <NImage
                class={styles.coverImg}
                src={source.image}
                previewDisabled
              />
              <p class={styles.name}>{source.name}</p>
            </div>
          ))}
        </div>
        {/*
          百科: https://oss.dayaedu.com/ktqy/17101370093153448b2cd.png
          jianshang https://oss.dayaedu.com/ktqy/1710137009315eedcdeed.png
          jiezou https://oss.dayaedu.com/ktqy/171013700931689a322a6.png
          yinyuejia https://oss.dayaedu.com/ktqy/1710137009316fbd65d39.png
          yueli https://oss.dayaedu.com/ktqy/17101370093160d479afe.png
        */}
        {/* 节奏练习 */}
        <NModal
          maskClosable={modalClickMask}
          v-model:show={state.rhythmStatus}
          preset="card"
          class={['modalTitle background', styles.addOtherSourceModal]}
          title={'节奏练习'}>
          <SourceRhythm
            onClose={() => (state.rhythmStatus = false)}
            onConfirm={(item: any) => {
              state.rhythmStatus = false;
              emit('comfirm', {
                materialId: null,
                coverImg: item.coverImg,
                dataJson: item.dataJson,
                title: '节奏练习',
                isCollect: false,
                isSelected: false,
                content: null,
                type: 'RHYTHM'
              });
              emit('close');
            }}
          />
        </NModal>

        {/* 乐器百科 */}
        <NModal
          maskClosable={modalClickMask}
          v-model:show={state.instrumentStatus}
          preset="card"
          class={['modalTitle', styles.instrumentModal]}
          title={'乐器百科'}>
          <SourceInstrument
            onClose={() => (state.instrumentStatus = false)}
            onConfirm={(val: any) => {
              state.instrumentStatus = false;
              const value = val || [];
              const temp: any[] = [];
              value.forEach((item: any) => {
                temp.push({
                  materialId: item.materialId,
                  coverImg: item.coverImg,
                  dataJson: null,
                  title: item.title,
                  isCollect: false,
                  isSelected: false,
                  content: item.content,
                  type: 'INSTRUMENT'
                });
              });
              emit('comfirm', temp);
              emit('close');
            }}
          />
        </NModal>

        {/* 乐理知识 */}
        <NModal
          maskClosable={modalClickMask}
          v-model:show={state.theoryStatus}
          preset="card"
          class={['modalTitle', styles.theoryModal]}
          title={'乐理知识'}>
          <SourceKnowledge
            onClose={() => (state.theoryStatus = false)}
            onConfirm={(val: any) => {
              state.theoryStatus = false;
              const value = val || [];
              const temp: any[] = [];
              value.forEach((item: any) => {
                temp.push({
                  materialId: item.materialId,
                  coverImg: item.coverImg,
                  dataJson: null,
                  title: item.title,
                  isCollect: false,
                  isSelected: false,
                  content: item.content,
                  type: 'THEORY'
                });
              });
              emit('comfirm', temp);
              emit('close');
            }}
          />
        </NModal>

        {/* 音乐家 */}
        <NModal
          maskClosable={modalClickMask}
          v-model:show={state.musicianStatus}
          preset="card"
          class={['modalTitle', styles.instrumentModal]}
          title={'音乐家'}>
          <SourceMusician
            onClose={() => (state.musicianStatus = false)}
            onConfirm={(val: any) => {
              state.musicianStatus = false;
              const value = val || [];
              const temp: any[] = [];
              value.forEach((item: any) => {
                temp.push({
                  materialId: item.materialId,
                  coverImg: item.coverImg,
                  dataJson: null,
                  title: item.title,
                  isCollect: false,
                  isSelected: false,
                  content: item.content,
                  type: 'MUSICIAN'
                });
              });
              emit('comfirm', temp);
              emit('close');
            }}
          />
        </NModal>

        {/* 名曲鉴赏 */}
        <NModal
          maskClosable={modalClickMask}
          v-model:show={state.musicStatus}
          preset="card"
          class={['modalTitle', styles.musicModal]}
          title={'名曲鉴赏'}>
          <SourceMusic
            onClose={() => (state.musicStatus = false)}
            onConfirm={(val: any) => {
              state.musicStatus = false;
              const value = val || [];
              const temp: any[] = [];
              value.forEach((item: any) => {
                temp.push({
                  materialId: item.materialId,
                  coverImg: item.coverImg,
                  dataJson: null,
                  title: item.title,
                  isCollect: false,
                  isSelected: false,
                  content: item.content,
                  type: 'MUSIC_WIKI'
                });
              });
              emit('comfirm', temp);
              emit('close');
            }}
          />
        </NModal>

        {/* 听音练习 */}
        <NModal
          maskClosable={modalClickMask}
          v-model:show={state.listenStatus}
          preset="card"
          class={['modalTitle background', styles.subjectSyncModal]}
          title={'选择乐器'}>
          <SubjectSync
            // subjectId={prepareStore.getSubjectId as any}
            onClose={() => (state.listenStatus = false)}
            onConfirm={async (item: any) => {
              //
              try {
                state.musicStatus = false;
                const value = item.subjectCode || [];
                const temp: any[] = [];
                value.forEach((item: any) => {
                  temp.push({
                    materialId: item.materialId,
                    coverImg: item.coverImg,
                    dataJson: null,
                    title: item.title,
                    isCollect: false,
                    isSelected: false,
                    content: item.content,
                    type: 'LISTEN'
                  });
                });
                state.listenStatus = false;
                emit('comfirm', temp);
                emit('close');
              } catch {
                //
              }
            }}
          />
        </NModal>

        <NModal
          maskClosable={modalClickMask}
          v-model:show={state.uploadStatus}
          preset="card"
          showIcon={false}
          class={['modalTitle background', styles.attendClassModal]}
          title={state.editStatus ? '修改资源' : '上传资源'}
          blockScroll={false}>
          <UploadModal
            editStatus={state.editStatus}
            onClose={() => {
              state.uploadStatus = false;
            }}
            onConfirm={(item: any) => {
              state.editIds = [];
              state.editList = [];
              state.editOverIds = [];
              state.saveStatus = false;

              try {
                state.musicStatus = false;
                const value = item || [];
                const temp: any[] = [];
                value.forEach((item: any) => {
                  temp.push({
                    materialId: item.id,
                    coverImg: item.coverImg,
                    dataJson: null,
                    title: item.name,
                    isCollect: false,
                    isSelected: false,
                    content: item.content,
                    type: item.type
                  });
                });
                // state.listenStatus = false;
                emit('comfirm', temp);
                emit('close');
              } catch {
                //
              }
            }}
            list={state.editList}
          />
        </NModal>

        <NModal
          maskClosable={modalClickMask}
          v-model:show={state.saveStatus}
          preset="card"
          showIcon={false}
          class={['modalTitle background', styles.attendClassSaveModal]}
          title={'上传资源'}
          blockScroll={false}>
          <SaveModal
            onClose={() => (state.saveStatus = false)}
            onConfrim={(val: any) => {
              const list = val || [];
              const temp: any = [];
              list.forEach((item: any) => {
                temp.push({
                  subjectIds: null,
                  openFlag: false,
                  coverImg: item.coverImg,
                  title: item.name || '',
                  type: formatUrlType(item.content),
                  enableFlag: 1,
                  content: item.content,
                  id: null
                });
              });
              state.editList = temp;
              state.uploadStatus = true;
              state.editStatus = false;
            }}
          />
        </NModal>
      </>
    );
  }
});