orchestra-app/src/school/train-planning/component/train-content/index.tsx

import OEmpty from '@/components/o-empty'
import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { trainCourseEmnu } from '@/constant'
import request from '@/helpers/request'
import { state } from '@/state'
import dayjs from 'dayjs'
import { Button, Cell, CellGroup, Tag } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { forms, weekFormat } from '../../create'
import styles from './index.module.less'

export default defineComponent({
  name: 'train-content',
  setup() {
    // SINGLE_DELIVERY("单交付团"),
    // MULTIPLE_DELIVERY("多交付常规团"),
    // MULTIPLE_DELIVERY_SCHOOL("多交付合并团"),
    // SINGLE("单技"),
    // MUSIC_THEORY("乐理"),
    // INSTRUMENTAL_ENSEMBLE("合奏");
    /**
     * 1、单交付团，所在课程时间为120分钟
     * 2、多交付团，乐理45分钟，其它60分钟
     * 3、多交付合并团，单技60分钟，合奏60分钟
     * */
    const router = useRouter()
    const base = reactive({
      contentList: [] as any,
      SINGLE_DELIVERY: {
        SINGLE: 120,
        MUSIC_THEORY: 120
      },
      MULTIPLE_DELIVERY: {
        SINGLE: 45,
        MUSIC_THEORY: 60,
        INSTRUMENTAL_ENSEMBLE: 60
      },
      MULTIPLE_DELIVERY_SCHOOL: {
        SINGLE: 60,
        MUSIC_THEORY: 60,
        INSTRUMENTAL_ENSEMBLE: 60
      },
      disabled: false // 判断是否有班级
    })
    const getClasses = async () => {
      try {
        const { data } = await request.get(
          '/api-school/orchestra/trainingContent/' + state.user.data.school.id
        )
        base.contentList = data || []
      } catch {
        //
      }
    }

    const onSubmit = async () => {
      try {
        const list = base.contentList
        const trainingPlanClassList: any = []

        console.log(forms, 'forms')
        list.forEach((item: any) => {
          trainingPlanClassList.push({
            orchestraId: item.orchestraId,
            classGroupIdList: item.classGroupIdList,
            courseNum: forms.times,
            startTime: dayjs(forms.trainStartTime).format('HH:mm:ss'),
            endTime: dayjs(forms.trainStartTime).add(120, 'minute').format('HH:mm:ss'),
            singleCourseTime: base[item.deliveryType][item.classType]
          })
        })
        const params = {
          week: forms.week,
          schoolId: state.user.data.school.id,
          skipHoliday: forms.skipHoliday ? true : false,
          type: 'STANDARD',
          startDate: dayjs(forms.trainStartDate).format('YYYY-MM-DD'),
          trainingPlanClassList
        }

        const { data } = await request.post('/api-school/orchestra/trainingPlanList', {
          data: {
            ...params
          }
        })
        // 初始化 课程预览时选中的乐团编号 课程预览时选中的课程组编号
        forms.selectOrchestraId = null
        forms.selectClassGroupId = null

        console.log(data, 'date')
        router.push({
          path: '/course-preview',
          query: {
            cacheId: data
          }
        })
      } catch {
        //
      }
    }

    onMounted(() => {
      getClasses()
    })

    return () => (
      <div class={base.contentList.length <= 0 && 'emptyRootContainer'}>
        <OHeader />
        {/* 训练内容 */}

        {base.contentList.map((item: any) => (
          <CellGroup inset class={styles.cellGroup}>
            <Cell center>
              {{
                title: () => (
                  <div class={styles.classType}>
                    {trainCourseEmnu[item.classType]}
                    <Tag round type="primary" size="medium" class={styles.classNum}>
                      {forms.times}课时
                    </Tag>
                  </div>
                ),
                value: () => (
                  <span class={styles.classTime}>
                    每{weekFormat(forms.week)} {dayjs(forms.trainStartTime || '').format('HH:mm')}-
                    {dayjs(forms.trainStartTime || '')
                      .add(base[item.deliveryType][item.classType], 'minute')
                      .format('HH:mm')}
                  </span>
                )
              }}
            </Cell>
            <Cell center>
              {{
                title: () => (
                  <div class={styles.orchestra}>
                    <p class={styles.name}>{item.orchestraName}</p>
                    <p class={styles.class}>
                      共<span>{item.classGroupIdList && item.classGroupIdList.length}</span>个班级
                    </p>
                  </div>
                )
              }}
            </Cell>
          </CellGroup>
        ))}

        {base.contentList && base.contentList.length <= 0 && (
          <OEmpty btnStatus={false} tips="暂无训练内容" />
        )}

        <OSticky position="bottom">
          <div class={'btnGroup'}>
            <Button round type="primary" block onClick={onSubmit}>
              下一步
            </Button>
          </div>
        </OSticky>
      </div>
    )
  }
})