orchestra-app/src/views/unit-test/unit-list/models/unit-student-list.tsx

import {
  ActionSheet,
  Button,
  Cell,
  CellGroup,
  Radio,
  CheckboxGroup,
  Icon,
  Image,
  List,
  RadioGroup,
  Tag
} from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from './unit-student.module.less'
import iconEdit from '../../images/icon-edit.png'
import iconMessage from '@common/images/icon-muit-message.png'
import iconTeacher from '@common/images/icon_teacher.png'
import { postMessage } from '@/helpers/native-message'
import { useRoute, useRouter } from 'vue-router'
import OEmpty from '@/components/o-empty'
import OFullRefresh from '@/components/o-full-refresh'
import dayjs from 'dayjs'
import request from '@/helpers/request'
import { unitTestStatus } from '@/constant'
export default defineComponent({
  name: 'unit-student-list',
  props: {
    type: {
      type: Number,
      default: 1
    }
  },
  setup(props) {
    const router = useRouter()
    const route = useRoute()
    const searchList = reactive({
      classGroupUnitExaminationId: route.query.id,
      status: '',
      page: 1
    })
    const form = reactive({
      list: [],
      listState: {
        dataShow: true, // 判断是否有数据
        loading: false,
        finished: false,
        refreshing: false,
        height: 0 // 页面头部高度，为了处理下拉刷新用的
      },
      oldValue: ''
    })
    const gotoMsg = () => {
      postMessage({
        api: 'joinChatGroup',
        content: {
          type: 'multi', // single 单人 multi 多人
          id: props.item?.imGroupId
        }
      })
    }
    onMounted(() => {
      getList()
    })
    const getList = async () => {
      try {
        const res = await request.post('/api-teacher/studentUnitExamination/studentDetail', {
          data: {
            ...searchList
          },
          requestType: 'form'
        })
        form.listState.loading = false
        form.listState.refreshing = false
        const result = res.data || {}
        // 处理重复请求数据
        if (form.list.length > 0 && result.current === 1) {
          return
        }
        form.list = form.list = result[1] || []
        // form.listState.finished = result.current >= result.pages
        // searchList.page = result.current + 1
        form.listState.dataShow = form.list.length > 0
        form.listState.finished = true
      } catch {
        form.listState.dataShow = false
        form.listState.finished = true
        // form.listState.refreshing = false
      }
    }

    const onSearch = () => {
      searchList.page = 1
      form.list = []
      form.listState.dataShow = true // 判断是否有数据
      form.listState.loading = false
      form.listState.finished = false
      getList()
    }

    const chisoStudent = (val) => {
      getList()
    }
    const checkRadio = (val) => {
      if (val == form.oldValue) {
        searchList.status = ''
        form.oldValue = ''
      } else {
        form.oldValue = val
      }
    }

    return () => (
      <div class={styles.unitList}>
        <RadioGroup
          checked-color="#FF8057"
          v-model={searchList.status}
          direction="horizontal"
          onChange={chisoStudent}
        >
          <Tag
            size="large"
            type="primary"
            color={searchList.status !== 'A_PASS' ? '#EAEAEA' : '#FF8057'}
            textColor={searchList.status !== 'A_PASS' ? '#AAA' : '#FFF'}
            class={styles.radioSection}
          >
            <Radio
              class={styles.radioItem}
              name={'A_PASS'}
              onClick={() => checkRadio('A_PASS')}
            ></Radio>
            {unitTestStatus['A_PASS']}
          </Tag>

          <Tag
            size="large"
            type="primary"
            color={searchList.status !== 'B_NO_PASS' ? '#EAEAEA' : '#FF8057'}
            textColor={searchList.status !== 'B_NO_PASS' ? '#AAA' : '#FFF'}
            class={styles.radioSection}
          >
            <Radio
              class={styles.radioItem}
              name={'B_NO_PASS'}
              onClick={() => checkRadio('B_NO_PASS')}
            ></Radio>{' '}
            {unitTestStatus['B_NO_PASS']}
          </Tag>
          <Tag
            size="large"
            type="primary"
            color={searchList.status !== 'C_ING' ? '#EAEAEA' : '#FF8057'}
            textColor={searchList.status !== 'C_ING' ? '#AAA' : '#FFF'}
            class={styles.radioSection}
          >
            <Radio
              class={styles.radioItem}
              name={'C_ING'}
              onClick={() => checkRadio('C_ING')}
            ></Radio>{' '}
            {unitTestStatus['C_ING']}
          </Tag>
          <Tag
            size="large"
            type="primary"
            color={searchList.status !== 'D_NO_SUBMIT' ? '#EAEAEA' : '#FF8057'}
            textColor={searchList.status !== 'D_NO_SUBMIT' ? '#AAA' : '#FFF'}
            class={styles.radioSection}
          >
            <Radio
              class={styles.radioItem}
              name={'D_NO_SUBMIT'}
              onClick={() => checkRadio('D_NO_SUBMIT')}
            ></Radio>
            {unitTestStatus['D_NO_SUBMIT']}
          </Tag>
        </RadioGroup>
        {form.listState.dataShow ? (
          <OFullRefresh
            v-model:modelValue={form.listState.refreshing}
            onRefresh={onSearch}
            style={{
              minHeight: `calc(100vh - ${form.listState.height}px)`
            }}
          >
            <List
              v-model:loading={form.listState.loading}
              finished={form.listState.finished}
              finishedText=" "
              class={[styles.liveList]}
              immediateCheck={false}
            >
              {form.list.map((item: any) => (
                <Cell center class={styles.manageCell}>
                  {{
                    icon: () => (
                      <Image class={styles.img} src={item.avatar ? item.avatar : iconTeacher} />
                    ),
                    title: () => (
                      <div class={styles.content}>
                        <div class={styles.TagWrap}>
                          {' '}
                          <p class={[styles.name, 'van-ellipsis']}>
                            {item.studentName ? item.studentName : '--'}
                          </p>
                          <div class={[styles.studentTag]}>{unitTestStatus[item.status]}</div>
                        </div>

                        <p class={styles.phone}>{item.submitTime}</p>
                      </div>
                    )
                    // value: () => (
                    //   <span class={[styles.status, item.status === 'LOCKED' ? styles.frozen : '']}>
                    //     {manageTeacherType[item.status]}
                    //   </span>
                    // )
                  }}
                </Cell>
              ))}
            </List>
          </OFullRefresh>
        ) : (
          <OEmpty btnStatus={false} tips="暂无学员" />
        )}
      </div>
    )
  }
})