orchestra-app/src/school/orchestra/create-orchestra/select-teacher.tsx

import OHeader from '@/components/o-header'
import OPopup from '@/components/o-popup'
import OSticky from '@/components/o-sticky'
import { Button, Cell, CellGroup, Dialog, Field, showDialog, showToast } from 'vant'
import { defineComponent, reactive } from 'vue'
import TeacherList from '../modal/teacher-list'
import styles from './select-teacher.module.less'
import { state as baseState } from '@/state'
import { createState as state, resestState } from './create'
import { useRouter } from 'vue-router'
import request from '@/helpers/request'

export default defineComponent({
  name: 'teacher-list',
  emits: ['close'],
  setup() {
    const router = useRouter()
    const forms = reactive({
      teacherStatus: false,
      status: false
    })

    const onSubmit = async () => {
      // forms.status = true
      showDialog({
        title: '提示',
        message: '是否创建乐团？',
        showCancelButton: true
      }).then(async () => {
        try {
          const selectSubjects = state.selectLastTeacherSubjects || []
          const tempSelects: any = []
          selectSubjects.forEach((item: any) => {
            tempSelects.push({
              teacherId: item.teacher.id,
              type: item.type,
              subjectId: item.id,
              studentIdList: [...item.students]
            })
          })

          console.log(tempSelects, 'tempselects')
          // return
          await request.post('/api-school/orchestra/addOrchestra', {
            data: {
              schoolId: baseState.user.data.school.id,
              name: state.orchestraName,
              classGroupList: [...tempSelects]
            }
          })

          showToast('创建成功')
          forms.status = true
        } catch {
          //
        }
      })
    }

    const onConfirm = () => {
      resestState()
      router.replace('/train-planning')
    }
    // 取消
    const onCancel = () => {
      resestState()
      router.replace('/my-orchestra')
    }
    return () => (
      <div>
        <OHeader title="选择老师" />

        <CellGroup inset class={styles.cellGroup}>
          {state.selectLastTeacherSubjects.map((subject: any) => (
            <Cell
              center
              onClick={() => {
                forms.teacherStatus = true
                state.selectTeacher = subject
              }}
              isLink
            >
              {{
                title: () => <span class={styles.title}>{subject.name}</span>,
                value: () => (
                  <>
                    {subject.teacher?.nickname ? (
                      <p class={styles.name}>{subject.teacher?.nickname || ''}</p>
                    ) : (
                      <p class={styles.tips}>请选择老师</p>
                    )}
                  </>
                )
              }}
            </Cell>
          ))}
        </CellGroup>

        <OSticky position="bottom">
          <div class={['btnGroup']}>
            <Button type="primary" round block onClick={onSubmit}>
              创建成功
            </Button>
          </div>
        </OSticky>

        <OPopup v-model:modelValue={forms.teacherStatus} position="bottom">
          <TeacherList
            onClose={() => (forms.teacherStatus = false)}
            onSelect={(item: any) => {
              state.selectTeacher.teacher = item
              forms.teacherStatus = false

              console.log(state.selectTeacher, 'select')
              console.log(state.selectSubjects, 'state.selectSubjects')
            }}
          />
        </OPopup>

        <Dialog
          v-model:show={forms.status}
          message="乐团创建完成，是否需要排课？"
          messageAlign="left"
          confirmButtonText="去排课"
          cancelButtonText="暂不排课"
          showCancelButton
          onConfirm={onConfirm}
          onCancel={onCancel}
        >
          {{
            title: () => (
              <div class={styles.dialogTitle}>
                <i></i>
                创建成功
              </div>
            )
          }}
        </Dialog>
      </div>
    )
  }
})