orchestra-app/src/school/approval-manage/components/end-approval.tsx

import OEmpty from '@/components/o-empty'
import OFullRefresh from '@/components/o-full-refresh'
import dayjs from 'dayjs'
import { List, PullRefresh, showToast } from 'vant'
import { defineComponent, reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import styles from './wait-approval.module.less'
import request from '@/helpers/request'
import ApprovalItem from './approval-item'
export default defineComponent({
  name: 'end-approval',
  setup() {
    const router = useRouter()
    const forms = reactive({
      page: 1,
      rows: 20
    })

    const refreshing = ref(false)
    const loading = ref(false)
    const finished = ref(false)
    const showContact = ref(false)
    const list = ref([])

    const getList = async () => {
      console.log('getList')

      loading.value = true
      try {
        if (refreshing.value) {
          forms.page = 1
          list.value = []
          refreshing.value = false
        }

        const res = await request.post('/api-school/userApproveRecord/page', {
          data: { ...forms, hasHandle: true }
        })

        if (list.value.length > 0 && res.data.pages === 1) {
          return
        }
        forms.page = res.data.current + 1
        list.value = list.value.concat(res.data.rows || [])
        showContact.value = list.value.length > 0
        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 onRefresh = () => {
      finished.value = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true
      getList()
    }
    onMounted(() => {
      getList()
    })
    const gotoDetail = (row: any) => {
      // leaveCategoryId 1请假 2退团
      router.push({ path: '/student-leave', query: { id: row.id, type: 'end' } })
    }
    return () => (
      <>
        <div
          class={[styles.approvalWrap, !showContact.value && 'emptyRootContainer']}
          style="min-height: calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.33333rem);"
        >
          {showContact.value ? (
            <OFullRefresh
              v-model:modelValue={refreshing.value}
              onRefresh={onRefresh}
              style="min-height: calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.33333rem);"
            >
              <List
                loading-text=" "
                // v-model:loading={loading.value}
                finished={finished.value}
                finished-text="没有更多了"
                onLoad={getList}
              >
                {list.value.map((item: any) => (
                  <div onClick={() => gotoDetail(item)}>
                    <ApprovalItem item={item} type="end"></ApprovalItem>
                  </div>
                ))}
              </List>
            </OFullRefresh>
          ) : (
            <OEmpty />
          )}
        </div>
      </>
    )
  }
})