tjy-uniapp/src/pages/pendingVerification/list/PendingVerificationList.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '记录校核',
    navigationStyle: 'custom',
    disableScroll: true,
    'app-plus': {
      bounce: 'none',
    },
  },
}
</route>

<template>
  <view class="verification-container">
    <!-- 导航栏 -->
    <NavBar title="记录校核" />

    <!-- 查询视图 -->
    <QueryView :query-type="queryType" @query-action="queryAction" />

    <!-- 列表 -->
    <scroll-view class="list-scroll" scroll-y @scrolltolower="loadMore">
      <view v-for="item in listData" :key="item.reportId" class="item-box">
        <Item
          :item="item"
          :report-do-list="reportDOList(item)"
          :operate-text="'校核'"
          @handle-operation="pushAction"
        />
      </view>

      <view v-if="loading" class="loading-text">加载中...</view>
      <view v-if="!hasMore && listData.length > 0" class="no-more-text">没有更多了</view>
      <view v-if="!loading && listData.length === 0" class="empty-text">
        <text>暂无数据</text>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '@/store/user'
import { getPendingVerificationListApi } from '@/api/pendingVerification'
import QueryView from '@/pages/pendingVerification/components/query/QueryView.vue'
import Item from '@/pages/pendingVerification/list/Item.vue'
import NavBar from '@/components/NavBar/NavBar.vue'

defineOptions({
  name: 'PendingVerificationList',
})

// 状态
const listData = ref<any[]>([])
const loading = ref(false)
const hasMore = ref(true)
const params = reactive({
  pageNo: 1,
  pageSize: 10,
  recheckStrIds: '',
})

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

// 初始化参数
params.recheckStrIds = userInfo.value?.id || ''

const queryType = { value: '校核人', id: 'recheckStrIds' }

// 获取列表数据
const fetchList = async (refresh = false) => {
  if (loading.value) return

  params.pageNo = refresh ? 1 : params.pageNo + 1

  loading.value = true
  try {
    const result = await getPendingVerificationListApi(params)
    const newList = result?.data?.list || []

    if (refresh) {
      listData.value = newList
    } else {
      listData.value = [...listData.value, ...newList]
    }

    hasMore.value = newList.length >= params.pageSize
  } catch (error) {
    console.error('获取列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 加载更多
const loadMore = () => {
  if (!loading.value && hasMore.value) {
    fetchList(false)
  }
}

// 刷新列表
const refreshList = () => {
  params.pageNo = 1
  fetchList(true)
}

// 查询动作
const queryAction = (exParams: Record<string, any>) => {
  Object.assign(params, exParams)
  // 过滤空值
  Object.keys(params).forEach((key) => {
    if (params[key] === '' || params[key] === null || params[key] === undefined) {
      delete params[key]
    }
  })
  refreshList()
}

// 生成报告列表
const reportDOList = (item: any) => {
  const recheckList = item.recheckList || []
  if (recheckList.length) {
    return recheckList
  }
  return [{
    id: item.id,
    reportId: item.reportId,
    reportName: item.reportName,
    reportType: item.reportType,
    image: item.image,
    video: item.video,
    attachment: item.attachment,
  }]
}

// 跳转操作
const pushAction = (item: any, reportDOList: any, isBatch: boolean) => {
  if (!item.reportId) {
    return uni.showToast({ title: '没有报告', icon: 'error' })
  }

  uni.navigateTo({
    url: `/pages/pendingVerification/preViewReport/index?id=${item.id}&orderId=${item.orderId}&reportId=${item.reportId}&reportDOList=${encodeURIComponent(JSON.stringify(reportDOList))}&equipCode=${item.equipCode}&isBatch=${isBatch ? '1' : '0'}`,
  })
}

// 监听刷新事件
const refreshListener = (data: any) => {
  refreshList()
}

onMounted(() => {
  refreshList()
  uni.$on('RefreshVerificationListApi', refreshListener)
})

onUnmounted(() => {
  uni.$off('RefreshVerificationListApi', refreshListener)
})
</script>

<style lang="scss" scoped>
.verification-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.navigate-view {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.navigate-title {
  font-size: 17px;
  font-weight: 500;
  color: #333;
}

.list-scroll {
  flex: 1;
  overflow: hidden;
}

.loading-text,
.no-more-text {
  text-align: center;
  padding: 15px;
  color: #999;
  font-size: 14px;
}

.empty-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #999;
  font-size: 14px;
}

.item-box {
  margin: 13px;
  background-color: #fff;
  border-radius: 5px;
}
</style>