classroom-instruments/src/views/attend-class/model/train-settings/index.tsx

import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NDatePicker,
  NEmpty,
  NModal,
  NScrollbar,
  NSpace
} from 'naive-ui';
import TrainType from '@/views/attend-class/model/train-type';
import TrainUpdate from '../train-update';
import SelectMusic from '@/views/prepare-lessons/model/select-music';

export default defineComponent({
  name: 'train-settings',
  emits: ['close'],
  setup(props, { emit }) {
    const trainForms = reactive({
      editStatus: false,
      selectMusicStatus: false
    });
    const list = [
      {
        id: 22078,
        src: 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-fixed/1675770786664-1.png',
        type: 'practice',
        name: '彩虹岛',
        typeList: ['1-12小节', '速度90', '20分钟']
      },
      {
        id: 22048,
        src: 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-fixed/1675839970286-1.png',
        type: 'evaluation',
        name: '彩云追月',
        typeList: ['入门级', '全部小节', '速度90', '20分钟']
      }
    ];
    return () => (
      <div class={styles.trainSettings}>
        <div class={styles.searchGroup}>
          <NButton onClick={() => (trainForms.selectMusicStatus = true)}>
            添加训练
          </NButton>

          <div class={styles.datetime}>
            <label>截止时间：</label>
            <NDatePicker
              style={{ width: '200px' }}
              value-format="yyyy-MM-dd"
              type="date"
              clearable
              placeholder="请选择截止日期"
            />
          </div>
        </div>
        <NScrollbar class={styles.trainList}>
          {/* <NEmpty description="暂无训练" /> */}
          {list.map((item: any) => (
            <TrainType
              item={item}
              onEdit={() => {
                console.log('edit');
                trainForms.editStatus = true;
              }}
            />
          ))}
        </NScrollbar>
        <NSpace class={styles.trainBtnGroup}>
          <NButton strong type="default" round onClick={() => emit('close')}>
            取消布置
          </NButton>
          <NButton strong type="primary" round>
            立即布置
          </NButton>
        </NSpace>

        <NModal
          v-model:show={trainForms.editStatus}
          class={['modalTitle background', styles.trainEditModal]}
          preset="card"
          title="训练设置">
          <TrainUpdate onClose={() => (trainForms.editStatus = false)} />
        </NModal>

        <NModal
          v-model:show={trainForms.selectMusicStatus}
          class={['modalTitle', styles.selectMusicModal]}
          preset="card"
          title={'选择曲目'}>
          <SelectMusic
            onSelect={() => {
              trainForms.selectMusicStatus = false;
              trainForms.editStatus = true;
            }}
          />
        </NModal>
      </div>
    );
  }
});