tjy-uniapp/src/pages/workInstructionAudit/list/WorkInstructionAuditList.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '操作指导书批准',
    navigationStyle: 'custom',
    disableScroll: true,
    'app-plus': {
      bounce: 'none',
    },
  },
}
</route>

<template>
  <view class="audit-container">
    <NavBar title="操作指导书批准" />

    <RadioFilterBar
      v-model="rightType"
      :options="rightTypeList"
      type="radio"
      @change="handleRightRefresh"
    />

    <scroll-view class="list-scroll" scroll-y @scrolltolower="loadMore">
      <view v-for="item in listData" :key="item.id" class="item-box">
        <Item :item="item" :operate-text="'批准'" @handle-operation="pushAction(item)" />
      </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 } from 'vue'
import { useUserStore } from '@/store/user'
import { useConfigStore } from '@/store/config'
import Item from '@/pages/workInstructionAudit/components/Item.vue'
import NavBar from '@/components/NavBar/NavBar.vue'
import RadioFilterBar from '@/components/RadioFilterBar/RadioFilterBar.vue'
import { requestFunc, TaskOrderFuncName } from '@/api/ApiRouter/taskOrder'
import { onShow } from '@dcloudio/uni-app'

defineOptions({ name: 'WorkInstructionAuditList' })

const listData = ref<any[]>([])
const loading = ref(false)
const hasMore = ref(true)
const params = reactive({
  pageNo: 1,
  pageSize: 10,
  reportType: 700,
  bpmUserId: '',
  status: '100',
})

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
params.bpmUserId = userInfo.value?.id || ''
const equipType = useConfigStore().getEquipType()

const rightType = ref('100')
const rightTypeList = [
  // { value: '全部', id: '' },
  { value: '已通过', id: '200' },
  { value: '审核中', id: '100' },
  { value: '已拒绝', id: '300' },
]

const fetchList = async (refresh = false) => {
  if (loading.value) return

  if (params.status && params.status !== '100') {
    params.bpmUserId = null
    params.approverId = userInfo.value?.id
  } else if (params.status && params.status === '100') {
    params.bpmUserId = userInfo.value?.id || ''
    params.approverId = ''
  } else if (!params.status) {
    params.bpmUserId = userInfo.value?.id || ''
    params.approverId = null
    params.status = null
  }
  params.pageNo = refresh ? 1 : params.pageNo + 1
  loading.value = true
  try {
    const result: any = await requestFunc(TaskOrderFuncName.MajorIssuesAuditList, equipType, 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 handleRightRefresh = (value: string | number | boolean) => {
  rightType.value = value as string
  params.status = rightType.value
  refreshList()
}

const pushAction = (item: any) => {
  uni.navigateTo({
    url: `/pages/workInstructionAudit/preViewReport/index?id=${item.id}&reportName=${item.reportName}&templateId=${item.templateId}`,
  })
}

const refreshListener = () => refreshList()

onShow(() => {
  refreshList()
  uni.$on('onRefresh', refreshListener)
})
</script>

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

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

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

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

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