orchestra-app/src/school/exercise-record/index.tsx

import OHeader from '@/components/o-header'
import OSearch from '@/components/o-search'
import OSticky from '@/components/o-sticky'
import dayjs from 'dayjs'
import {
  Cell,
  Icon,
  Popover,
  Tag,
  DatePicker,
  DatePickerColumnType,
  Popup,
  List,
  PullRefresh,
  ActionSheet,
  showToast
} from 'vant'
import StudentItem from './modals/student-item'
import { defineComponent, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import styles from './index.module.less'
import request from '@/helpers/request'

export default defineComponent({
  name: 'exercise-record',
  setup() {
    const router = useRouter()
    const state = reactive({
      showPopoverTime: false,
      showPopoverOrchestra: false,
      showPopoverSubject: false,
      showPopoverSort: false,
      actions: [
        { text: '全部乐团', color: 'var(--van-primary-color)' },
        { text: '交付团' },
        { text: '晋升团' }
      ],
      actionSorts: [
        { text: '按天数', value: 'PRACTICE_DAY' },
        { text: '按时长', value: 'PRACTICE_TIMES' }
      ],
      currentDate: [dayjs().format('YYYY'), dayjs().format('MM')]
    })
    const forms = reactive({
      practiceMonth: state.currentDate[0] + '' + state.currentDate[1],
      practiceMonthName: state.currentDate[0] + '年' + state.currentDate[1] + '月',
      orchestraId: '',
      orchestraName: '',
      subjectId: '',
      subjectName: '',
      sortType: '',
      sortTypeName: '',
      page: 1,
      rows: 20
    })
    const minDate = ref(new Date(dayjs().subtract(5, 'year').format('YYYY-MM-DD')))
    const maxDate = ref(new Date(dayjs().add(5, 'year').format('YYYY-MM-DD')))
    const columnsType = ref<DatePickerColumnType[]>(['year', 'month'])
    const refreshing = ref(false)
    const loading = ref(false)
    const finished = ref(false)
    const showContact = ref(false)
    const list = ref([])
    const onDetail = (item: any) => {
      console.log(item)
      router.push({
        path: '/orchestra-detail',
        query: {
          id: item
        }
      })
    }
    const getList = async () => {
      loading.value = true
      try {
        const res = await request.post('/api-school/student/page', {
          data: { ...forms }
        })
        if (refreshing.value) {
          list.value = []
          refreshing.value = false
        }
        if (list.value.length > 0 && res.data.pageNo === 1) {
          return
        }

        showContact.value = list.value.length > 0
        forms.page = res.data.current + 1
        list.value = list.value.concat(res.data.rows || [])
        loading.value = false

        finished.value = res.data.current >= res.data.pages
      } catch (e: any) {
        // console.log(e, 'e')
        const message = e.message
        showToast(message)
        showContact.value = false
        finished.value = true
      }
    }
    const onBack = () => {
      console.log('返回')
    }

    const checkTimer = (val: any) => {
      forms.practiceMonth = val.selectedValues[0] + val.selectedValues[1]
      forms.practiceMonthName = val.selectedValues[0] + '年' + val.selectedValues[1] + '月'
      state.showPopoverTime = false
      getList()
    }
    const checkSort = (val: any) => {
      forms.sortType = val.value
      forms.sortTypeName = val.text
      getList()
    }

    const onRefresh = () => {
      finished.value = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true
      getList()
    }
    return () => (
      <>
        <OSticky position="top" background="#F8F8F8">
          <OHeader isBack={true} onHeaderBack={onBack}></OHeader>
          <OSearch placeholder="学生编号" onSearch={getList}></OSearch>
          <div class={styles.chioseWrap}>
            <div style={{ padding: '12px 13px', background: '#F8F8F8' }}>
              <div
                class={styles.searchBand}
                onClick={() => {
                  state.showPopoverTime = true
                }}
              >
                {forms.practiceMonthName}
                <Icon name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'} />
              </div>
            </div>

            <div style={{ padding: '12px 13px', background: '#F8F8F8' }}>
              <Popover
                v-model:show={state.showPopoverSubject}
                actions={state.actions}
                showArrow={false}
                placement="bottom-start"
                offset={[0, 12]}
              >
                {{
                  reference: () => (
                    <div class={styles.searchBand}>
                      全部乐团
                      <Icon name={state.showPopoverSubject ? 'arrow-up' : 'arrow-down'} />
                    </div>
                  )
                }}
              </Popover>
            </div>
            <div style={{ padding: '12px 13px', background: '#F8F8F8' }}>
              <Popover
                v-model:show={state.showPopoverSubject}
                actions={state.actions}
                showArrow={false}
                placement="bottom-start"
                offset={[0, 12]}
              >
                {{
                  reference: () => (
                    <div class={styles.searchBand}>
                      全部声部
                      <Icon name={state.showPopoverSubject ? 'arrow-up' : 'arrow-down'} />
                    </div>
                  )
                }}
              </Popover>
            </div>

            <div style={{ padding: '12px 13px', background: '#F8F8F8' }}>
              <Popover
                v-model:show={state.showPopoverSort}
                actions={state.actionSorts}
                showArrow={false}
                placement="bottom-end"
                offset={[0, 12]}
                onSelect={checkSort}
              >
                {{
                  reference: () => (
                    <div class={styles.searchBand}>
                      按天数
                      <Icon name={state.showPopoverSort ? 'arrow-up' : 'arrow-down'} />
                    </div>
                  )
                }}
              </Popover>
            </div>
          </div>
        </OSticky>
        <PullRefresh v-model={refreshing.value} onRefresh={onRefresh}>
          <List
            v-model:loading={loading.value}
            finished={finished.value}
            finished-text="没有更多了"
            onLoad={getList}
          >
            {list.value.map((item: any) => (
              <StudentItem item={item} />
            ))}
          </List>
        </PullRefresh>

        <Popup v-model:show={state.showPopoverTime} position="bottom" style="{ height: '30%' }">
          <DatePicker
            onCancel={() => {
              state.showPopoverTime = false
            }}
            onConfirm={checkTimer}
            v-model={state.currentDate}
            title="选择年月"
            minDate={minDate.value}
            maxDate={maxDate.value}
            columnsType={columnsType.value}
          />
        </Popup>
      </>
    )
  }
})