classroom-instruments/src/views/home/modals/subject-modal/index.tsx

import { defineComponent, onMounted, ref } from 'vue';
import styles from './index.module.less';
import { NButton, NScrollbar, NSpace, NTabPane, NTabs } from 'naive-ui';
import { useCatchStore } from '/src/store/modules/catchData';
import iconSelect from '../../../prepare-lessons/images/icon-select.png';

export default defineComponent({
  name: 'subject-sync',
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const catchStore = useCatchStore();

    const tabId = ref('' as any);
    const selectSubjectId = ref(null as any);
    const subjectList = ref([] as any);

    const onSubmit = () => {
      const item = subjectList.value.find(
        (subject: any) => subject.id === selectSubjectId.value
      );

      if (item) {
        item.code = item.code ? item.code.split(',')[0] : '';
      }
      emit('confirm', item);
    };

    const formatSubjectList = () => {
      const subjects = catchStore.getEnableSubjects;
      const temp: any = [];
      subjects.forEach((subject: any) => {
        if (tabId.value === '' && subject.instruments) {
          temp.push(...subject.instruments);
        } else if (
          tabId.value &&
          subject.instruments &&
          Number(tabId.value) === subject.id
        ) {
          temp.push(...subject.instruments);
        }
      });

      subjectList.value = temp;
    };
    onMounted(async () => {
      // await catchStore.getSubjects();
      await catchStore.getSubjects();

      formatSubjectList();
    });
    return () => (
      <div class={styles.subjectSync}>
        <NTabs
          defaultValue=""
          paneClass={styles.paneTitle}
          justifyContent="start"
          paneWrapperClass={styles.paneWrapperContainer}
          value={tabId.value}
          onUpdate:value={(val: any) => {
            tabId.value = val;
            formatSubjectList();
          }}>
          {[{ name: '全部声部', id: '' }, ...catchStore.getEnableSubjects].map(
            (item: any) => (
              <NTabPane
                name={`${item.id}`}
                tab={item.name}
                displayDirective="if"></NTabPane>
            )
          )}
        </NTabs>
        <NScrollbar style={{ maxHeight: '50vh', minHeight: '50vh' }}>
          <div class={styles.subjectList}>
            {subjectList.value.map((subject: any) => (
              <div
                class={[
                  styles.subjectItem,
                  selectSubjectId.value === subject.id
                    ? styles.subjectSelect
                    : ''
                ]}
                onClick={() => {
                  selectSubjectId.value = subject.id;
                }}>
                <div class={styles.imgSection}>
                  <img src={subject.img} />

                  {selectSubjectId.value === subject.id && (
                    <img src={iconSelect} class={styles.iconSelect} />
                  )}
                </div>

                <p class={styles.subjectName}>{subject.name}</p>
              </div>
            ))}
          </div>
        </NScrollbar>

        <NSpace class={styles.btnGroupModal} justify="center">
          <NButton round onClick={() => emit('close')}>
            取消
          </NButton>
          <NButton round type="primary" onClick={onSubmit}>
            确认选择
          </NButton>
        </NSpace>
      </div>
    );
  }
});