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

import {
  Button,
  Cell,
  CellGroup,
  Checkbox,
  CheckboxGroup,
  DatePicker,
  Dialog,
  Field,
  Icon,
  Picker,
  Popup,
  Radio,
  RadioGroup,
  showLoadingToast,
  showToast,
  Sticky,
  Tag
} from 'vant'
import { defineComponent, onMounted, 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'
import OPopup from '@/components/o-popup'
import ClassList from '../../modal/class-list'
import request from '@/helpers/request'
import { state } from '@/state'
import OSticky from '@/components/o-sticky'
import { formatterDatePicker } from '@/helpers/utils'

export default defineComponent({
  name: 'practice',
  props: {
    address: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const router = useRouter()

    // 查询没有设置指导老师的班级
    // const getClasses = async (show = true) => {
    //   try {
    //     const { data } = await request.post('/api-school/classGroup/page', {
    //       data: {
    //         page: 1,
    //         rows: 200,
    //         schoolId: state.user.data.school.id,
    //         hasTeacher: false,
    //         orchestraType: 'DELIVERY'
    //       }
    //     })
    //     // 班级数据
    //     forms.classList = data.rows || []
    //     // 判断没有设置伴学指导的班级
    //     if (forms.classList.length > 0 && show) {
    //       forms.status = true
    //     }
    //   } catch {
    //     //
    //   }
    // }

    const onSubmit = () => {
      // showLoadingToast({
      //   message: '加载中...',
      //   forbidClick: true,
      //   loadingType: 'spinner'
      // })
      // setTimeout(() => {
      //   showToast('请选择课程类型请选择课程类型')
      // }, 1000)
      // return
      // 判断是否有班级没有设置伴学指导
      if (forms.classList.length > 0) {
        forms.status = true
        return
      }

      if (forms.classType.length <= 0) {
        showToast('请选择课程类型')
        return
      }

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

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

      if (!props.address) {
        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')
    }

    onMounted(() => {
      // getClasses()
    })
    return () => (
      <div
        class={styles.practice}
        style={{
          minHeight: 'calc(100vh - var(--header-height) - var(--van-tabs-line-height))',
          overflow: 'hidden'
        }}
      >
        <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"
                    color={!forms.classType.includes('SINGLE') ? '#EAEAEA' : '#FF8057'}
                    textColor={!forms.classType.includes('SINGLE') ? '#AAA' : '#FFF'}
                    class={styles.radioSection}
                  >
                    <Checkbox class={styles.radioItem} name={'SINGLE'}></Checkbox>声部课
                  </Tag>
                  <Tag
                    size="large"
                    type="primary"
                    color={!forms.classType.includes('MUSIC_THEORY') ? '#EAEAEA' : '#FF8057'}
                    textColor={!forms.classType.includes('MUSIC_THEORY') ? '#AAA' : '#FFF'}
                    class={styles.radioSection}
                  >
                    <Checkbox class={styles.radioItem} name={'MUSIC_THEORY'}></Checkbox>乐理课
                  </Tag>
                  <Tag
                    size="large"
                    type="primary"
                    color={
                      !forms.classType.includes('INSTRUMENTAL_ENSEMBLE') ? '#EAEAEA' : '#FF8057'
                    }
                    textColor={!forms.classType.includes('INSTRUMENTAL_ENSEMBLE') ? '#AAA' : '#FFF'}
                    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.calendarTimeStatus = 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"
                    color={!(forms.skipHoliday === 1) ? '#EAEAEA' : '#FF8057'}
                    textColor={!(forms.skipHoliday === 1) ? '#AAA' : '#FFF'}
                    class={styles.radioSection}
                    round
                  >
                    <Radio class={styles.radioItem} name={1}></Radio>是
                  </Tag>
                  <Tag
                    size="large"
                    type="primary"
                    color={!(forms.skipHoliday === 0) ? '#EAEAEA' : '#FF8057'}
                    textColor={!(forms.skipHoliday === 0) ? '#AAA' : '#FFF'}
                    class={styles.radioSection}
                    round
                  >
                    <Radio class={styles.radioItem} name={0}></Radio>否
                  </Tag>
                </RadioGroup>
              )
            }}
          </Cell>
        </CellGroup>

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

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

        {/* 训练开始日期 */}
        <Popup
          v-model:show={forms.calendarTimeStatus}
          position="bottom"
          round
          class={'popupBottomSearch'}
          teleport={'body'}
        >
          <DatePicker
            minDate={new Date()}
            v-model={forms.classDate}
            formatter={formatterDatePicker}
            onCancel={() => (forms.calendarTimeStatus = false)}
            onConfirm={(date: any) => {
              forms.calendarTimeStatus = 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>

        {/* <Dialog
          v-model:show={forms.status}
          message={`您有${forms.classList.length}个班级尚未指定伴学指导，请完成指定后再进行训练规划。`}
          messageAlign="left"
          confirmButtonText="去设置"
          cancelButtonText="暂不设置"
          showCancelButton
          onConfirm={() => {
            forms.classStatus = true
          }}
        >
          {{
            title: () => (
              <div class={styles.dialogTitle}>
                <i></i>
                指定伴学指导
              </div>
            )
          }}
        </Dialog>

        <OPopup
          v-model:modelValue={forms.classStatus}
          position="bottom"
          style={{ background: '#F6F6F6' }}
          destroy
        >
          <ClassList
            classList={forms.classList}
            onClose={() => (forms.classStatus = false)}
            onConfirm={() => {
              getClasses(false)
            }}
          />
        </OPopup> */}
      </div>
    )
  }
})