待总结...

<script setup lang="tsx">
const props = defineProps<{
  fundTypeCode: number | ''
  keyword: string
  selectedList: Fund[]
  handleCheck: (fund: Fund) => void
}>()

const page = ref(1)
const order = ref('chg_rate_nav')
const orderType = ref(-1)
const loading = ref(true)
const originTableData = ref([])
const initInfiniteScroll = ref(false)
const requestKey = ref(0)
const isLoadMore = ref(true)

const defaultSorter = computed(() => {
  let innerOrder
  if (orderType.value === -1) {
    innerOrder = 'desc'
  } else if (orderType.value === 1) {
    innerOrder = 'asc'
  }
  return { field: order.value, order: innerOrder }
})

watch([() => props.fundTypeCode, () => props.keyword], () => {
  order.value = undefined
  orderType.value = undefined
  isLoadMore.value = false
  loadData(requestKey.value++)
})

loadData(requestKey.value++)

// 排序
const handleSortChange = (el: TableChangeEvent) => {
  order.value = el.sorter.field
  if (el.sorter.order === 'desc') {
    orderType.value = -1
  } else if (el.sorter.order === 'asc') {
    orderType.value = 1
  } else {
    orderType.value = undefined
  }
  page.value = 1
  isLoadMore.value = false
  loadData(requestKey.value++)
}
const goToDetail = (fundId: number) => {
  const path = `/#/xxx?fundId=${fundId}`
  if (isApp()) {
    invoke('comprehensiveBridge', {
      type: 'openNewWebView',
      url: `${window.location.origin}${path}`,
    })
  } else {
    // router.push(path)
  }
}

const columns = [...]

function loadData(key: number) {
  loading.value = true
  getFunds({
    rows: 20,
    page: page.value,
    order: order.value,
    order_type: orderType.value,
    fund_type_level1_zyyx_code: props.fundTypeCode,
    keyword: props.keyword,
  })
    .then((res) => {
      if (key + 1 !== requestKey.value) return
      console.log({ '请求到公募列表数据：': res })
      if (!res?.data || !Array.isArray(res.data)) {
        if (
          res?.code === 1001 &&
          res?.message === '此次请求没有查询到相应内容'
        ) {
          console.log('没有搜索到相关内容')
          originTableData.value = []
        }
        return Promise.reject(new Error('数据结构不对'))
      }
      if (isLoadMore.value) {
        originTableData.value = [...originTableData.value, ...res.data]
      } else {
        const el = document.querySelector('.st-table-scroll-col')
        el && el?.scrollTo(0, 0)
        originTableData.value = res.data
        isLoadMore.value = true
      }
      if (!initInfiniteScroll.value) {
        initInfiniteScroll.value = true
        nextTick(() => {
          const el = document.querySelector(
            '.st-table-scroll-col',
          ) as HTMLElement
          useInfiniteScroll(
            el,
            () => {
              if (loading.value || el.clientHeight === el.scrollHeight) return

              page.value++
              loadData(requestKey.value++)
            },
            { distance: 10 },
          )
        })
      }
    })
    .catch((e) => {
      console.log(e)
    })
    .finally(() => {
      loading.value = false
    })
}
</script>
<template>
    <div class="flex flex-1 flex-col overflow-auto">
        <Spin
            v-if="loading"
            type="normal"
            class="fixed left-0 top-0 z-[110] flex h-full w-full items-center justify-center overflow-hidden"
        />
        <GDMTable
            v-if="originTableData.length !== 0"
            class="flex flex-1 flex-col overflow-auto"
            :data-source="originTableData"
            :columns="columns"
            :default-sorter="defaultSorter"
            @change="handleSortChange"
        />
        <GDMEmpty
            v-if="!loading && originTableData.length === 0"
            :image="emptyImg"
            :image-style="{
                marginTop: '88px',
                width: '212px',
                height: '140px'
            }"
        >
            <template #description>
                <template v-if="keyword"
                    >未找到包含“{{ keyword }}”的内容</template
                >
                <template v-else>暂无数据</template>
            </template>
            <template #prompt>
                <template v-if="keyword">换个词试试吧</template>
            </template>
        </GDMEmpty>
    </div>
</template>