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

import {
  Button,
  Cell,
  CellGroup,
  Checkbox,
  CheckboxGroup,
  DatePicker,
  Field,
  Icon,
  Picker,
  Popup,
  Radio,
  RadioGroup,
  showToast,
  Sticky,
  Tag
} from 'vant'
import { defineComponent, reactive } from 'vue'
import { weekdays, weekFormat } from '../../create'
import styles from './index.module.less'
import { forms } from '../../create'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'practice',
  setup() {
    const router = useRouter()
    const onSubmit = () => {
      if (forms.classType.length <= 0) {
        showToast('请选择课程类型')
        return
      }

      if (!forms.trainStartDate) {
        showToast('请选择课程开始日期')
        return
      }

      if (!forms.week) {
        showToast('请选择周次')
        return
      }

      // 初始化 训练详情
      const classPracticeList: any = []
      forms.classType.forEach((item: any) => {
        classPracticeList.push({
          classType: item,
          startTime: null as any,
          endTime: null as any,
          trainTimer: null as any,
          times: null as any,
          classIdList: [] as any
        })
      })

      forms.classPracticeList = classPracticeList

      router.push('/practice-detail')
    }
    return () => (
      <div class={styles.practice}>
        <div class={styles.tips}>
          <Icon name="warning" class={styles.icon} />
          乐团加练可对任意班级进行排课
        </div>

        <CellGroup inset class={styles.cellGroup}>
          <Cell title="课程类型" titleClass={styles.classType}>
            {{
              value: () => (
                <CheckboxGroup
                  checked-color="#FF8057"
                  v-model={forms.classType}
                  direction="horizontal"
                >
                  <Tag
                    size="large"
                    type="primary"
                    plain={!forms.classType.includes('SINGLE')}
                    color="#FF8057"
                    class={styles.radioSection}
                  >
                    <Checkbox class={styles.radioItem} name={'SINGLE'}></Checkbox>声部课
                  </Tag>
                  <Tag
                    size="large"
                    type="primary"
                    plain={!forms.classType.includes('MUSIC_THEORY')}
                    color="#FF8057"
                    class={styles.radioSection}
                  >
                    <Checkbox class={styles.radioItem} name={'MUSIC_THEORY'}></Checkbox>乐理课
                  </Tag>
                  <Tag
                    size="large"
                    type="primary"
                    plain={!forms.classType.includes('INSTRUMENTAL_ENSEMBLE')}
                    color="#FF8057"
                    class={styles.radioSection}
                  >
                    <Checkbox class={styles.radioItem} name={'INSTRUMENTAL_ENSEMBLE'}></Checkbox>
                    合奏课
                  </Tag>
                </CheckboxGroup>
              )
            }}
          </Cell>
          <Field
            label="课程开始日期"
            inputAlign="right"
            placeholder="请选择课程开始日期"
            readonly
            isLink
            modelValue={
              forms.trainStartDate ? dayjs(forms.trainStartDate).format('YYYY年MM月DD日') : ''
            }
            onClick={() => (forms.calendarStatus = true)}
          />
          <Field
            label="课程周次"
            inputAlign="right"
            placeholder="请选择课程周次"
            readonly
            modelValue={weekFormat(forms.week)}
            isLink
            onClick={() => {
              forms.weekStatus = true

              // if (!forms.trainStartDate) {
              //   showToast('请选择课程开始日期')
              //   return
              // }
            }}
          />

          <Cell title="跳过节假日">
            {{
              value: () => (
                <RadioGroup
                  checked-color="#FF8057"
                  v-model={forms.skipHoliday}
                  direction="horizontal"
                >
                  <Tag
                    size="large"
                    type="primary"
                    plain={!(forms.skipHoliday === 1)}
                    color="#FF8057"
                    class={styles.radioSection}
                  >
                    <Radio class={styles.radioItem} name={1}></Radio>是
                  </Tag>
                  <Tag
                    size="large"
                    type="primary"
                    plain={!(forms.skipHoliday === 0)}
                    color="#FF8057"
                    class={styles.radioSection}
                  >
                    <Radio class={styles.radioItem} name={0}></Radio>否
                  </Tag>
                </RadioGroup>
              )
            }}
          </Cell>
        </CellGroup>

        <Sticky position="bottom">
          <div class={'btnGroup'} style={{ marginTop: '24px' }}>
            <Button type="primary" block round size="large" onClick={onSubmit}>
              下一步
            </Button>
          </div>
        </Sticky>

        {/* 训练周次 */}
        <Popup v-model:show={forms.weekStatus} position="bottom" round>
          <Picker
            columns={weekdays}
            onCancel={() => (forms.weekStatus = false)}
            onConfirm={(val: any) => {
              forms.week = val.selectedValues[0]
              forms.weekStatus = false
            }}
          />
        </Popup>

        {/* 训练开始日期 */}
        <Popup v-model:show={forms.calendarStatus} position="bottom" round>
          <DatePicker
            minDate={new Date()}
            v-model={forms.classDate}
            onCancel={() => (forms.calendarStatus = false)}
            onConfirm={(date: any) => {
              forms.calendarStatus = false
              forms.trainStartDate = date.selectedValues.join('-')

              // const days = dayjs(forms.trainStartDate).day()
              // const selectDays = weekdays[days === 0 ? 6 : days - 1]
              // forms.week = selectDays.value
            }}
          />
        </Popup>
      </div>
    )
  }
})