orchestra-app/src/school/companion-teacher/unbind.tsx

import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Button, Cell, CellGroup, Image, showDialog, showToast } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from './unbind.module.less'
import { state as baseState } from '@/state'
import { useRoute, useRouter } from 'vue-router'
import request from '@/helpers/request'
import OPopup from '@/components/o-popup'
import Teacher from './compontent/teacher'

export default defineComponent({
  name: 'unbind',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      teacherStatus: false,
      classList: [] as any,
      selectTeacher: {} as any,
      teacherId: route.query.id
    })
    const getClassDetail = async () => {
      try {
        const { data } = await request.post('/api-school/classGroup/page', {
          data: {
            teacherId: state.teacherId,
            schoolId: baseState.user.data.school.id,
            page: 1,
            rows: 100
          }
        })
        state.classList = data.rows || []
      } catch {
        //
      }
    }

    // 选择交接老师
    const onSelectTeacher = (item: any) => {
      state.teacherStatus = true
      state.selectTeacher = item
    }
    // 选择了交接老师之后
    const onSelectItem = (item: any) => {
      console.log(item, 'steacher')
      state.selectTeacher.sTeacher = item
    }

    const onSubmit = () => {
      console.log('submit')
      let isSelectAll = false // 是否有没有选择交接老师的数据
      const courseInfo = [] as any
      state.classList.forEach((item: any) => {
        if (!item.sTeacher || (item.sTeacher && !item.sTeacher.id)) {
          isSelectAll = true
        }

        if (item.sTeacher) {
          courseInfo.push({
            classGroupId: item.id,
            teacherId: item.sTeacher.id
          })
        }
      })

      if (isSelectAll) {
        showToast('请选择交接老师')
        return
      }

      try {
        showDialog({
          title: '提示',
          message: '是否确认交接',
          showCancelButton: true
        }).then(async () => {
          await request.post('/api-school/classGroup/handoverTeacher', {
            data: {
              teacherId: route.query.id,
              updateTeacherList: [...courseInfo]
            }
          })
          setTimeout(() => {
            showToast('交接成功')
          }, 100)
          setTimeout(() => {
            router.replace('/companion-teacher')
          }, 1000)
        })
      } catch {
        //
      }
    }

    onMounted(() => {
      getClassDetail()
    })
    return () => (
      <>
        <OHeader />

        <div class={styles.unbindTips}>该伴学老师存在以下班级及课程未开始，请选择交接老师</div>

        <CellGroup inset class={styles.detailCellGroup}>
          {state.classList.map((item: any) => (
            <Cell
              center
              class={styles.detailCell}
              isLink
              onClick={() => onSelectTeacher(item)}
              valueClass={styles.valueClass}
            >
              {{
                title: () => (
                  <div class={styles.teacherContent}>
                    <div class={styles.classInfo}>
                      <p class={styles.className}>{item.name}</p>
                      <p class={[styles.musicName, 'van-ellipsis']}>{item.orchestraName}</p>
                    </div>
                    <div class={styles.classNum}>
                      <p class={styles.nums}>
                        {item.courseScheduleNum - item.completeCourseScheduleNum}
                      </p>
                      <p class={styles.numTip}>剩余课时</p>
                    </div>
                  </div>
                ),
                value: () => (
                  <div class={[styles.teacherName, 'van-ellipsis']}>
                    {item.sTeacher && item.sTeacher.nickname}
                  </div>
                )
              }}
            </Cell>
          ))}
        </CellGroup>

        <OSticky position="bottom">
          <div class={['btnGroup']} style={{ paddingLeft: '13px', paddingRight: '13px' }}>
            <Button type="primary" round block onClick={onSubmit}>
              确认交接
            </Button>
          </div>
        </OSticky>

        <OPopup v-model:modelValue={state.teacherStatus}>
          <Teacher
            courseType={state.selectTeacher.courseType}
            teacherId={state.teacherId as any}
            onClose={() => (state.teacherStatus = false)}
            onSelect={onSelectItem}
          />
        </OPopup>
      </>
    )
  }
})