orchestra-app/src/school/train-planning/modal/class-list/index.tsx

import OEmpty from '@/components/o-empty'
import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import request from '@/helpers/request'
import TeacherList from '@/school/orchestra/modal/teacher-list'
import { Button, Cell, Popup, showToast, Sticky } from 'vant'
import { defineComponent, onMounted, reactive, watch } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'class-list',
  props: {
    classList: {
      type: Array,
      default: () => []
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { slots, attrs, emit }) {
    const state = reactive({
      teacherStatus: false,
      list: [] as any,
      isClick: false,
      selectItem: {} as any // 选择的班级
    })

    // 可以不用全部设置完
    const onSubmit = async () => {
      try {
        const tempList: any = []
        state.list.forEach((item: any) => {
          // 判断是否已经设置过伴学老师
          if (item.teacherId) {
            tempList.push({
              classGroupId: item.id,
              teacherId: item.teacherId
            })
          }
        })
        if (tempList.length <= 0) {
          emit('close')
          return
        }
        state.isClick = true
        await request.post('/api-school/classGroup/updateTeacher', {
          data: tempList
        })

        state.isClick = false
        emit('confirm')
        emit('close')
      } catch {
        //
        state.isClick = false
      }
      // emit('close')
    }

    // 监听变化
    watch(
      () => props.classList,
      () => {
        state.list = [...props.classList]
      }
    )

    onMounted(() => {
      state.list = [...props.classList]
    })
    return () => (
      <div class={[styles.classList, state.list.length <= 0 && 'emptyRootContainer']}>
        <OHeader title="指定伴学老师" desotry={false} />

        {state.list.map((item: any) => (
          <Cell
            class={styles.cell}
            center
            isLink
            onClick={() => {
              state.selectItem = item
              state.teacherStatus = true
            }}
            valueClass={[styles.teacherName, 'van-ellipsis']}
          >
            {{
              title: () => (
                <div class={styles.content}>
                  <div class={styles.title}>
                    <i></i>
                    {item.name}
                  </div>
                  <div class={[styles.name, 'van-ellipsis']}>{item.orchestraName}</div>
                </div>
              ),
              value: () => (
                <div
                  style={{
                    color: item.teacherName ? '' : 'var(--van-primary)'
                  }}
                >
                  {item.teacherName ? item.teacherName : '去设置'}
                </div>
              )
            }}
          </Cell>
        ))}
        {/* 判断是否有班级没有设置伴学老师 */}
        {props.classList.length <= 0 && <OEmpty btnStatus={false} tips="暂无班级" />}

        <Sticky position="bottom" style={{ width: '100%' }}>
          <div class={'btnGroup'}>
            <Button round block type="primary" onClick={onSubmit} disabled={state.isClick}>
              完成
            </Button>
          </div>
        </Sticky>

        <Popup v-model:show={state.teacherStatus} position="bottom" round style={{ height: '80%' }}>
          <TeacherList
            header={false}
            mode={'sticky'}
            courseType={state.selectItem.courseType}
            onClose={() => (state.teacherStatus = false)}
            onSelect={(val: any) => {
              state.selectItem.teacherId = val.id
              state.selectItem.teacherName = val.nickname
            }}
          />
        </Popup>
      </div>
    )
  }
})