tjy-uniapp/src/pages/pendingRatify/preViewReport/index.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '报告审批预览',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="preview-container">
    <!-- 导航栏 -->
    <NavBar title="报告审批预览" />

    <!-- 头部视图 -->
    <HeadView
      v-if="reportList.length > 0"
      :report-list="reportList"
      :select-report="selectReport"
      @update:select-report="handleReportSelect"
    />

    <!-- PDF 预览区域 -->
    <view class="pdf-container">
      <text class="preview-tip">报告预览功能待完善</text>
      <text class="preview-info">当前报告：{{ selectReport?.reportName || '-' }}</text>
      <text class="preview-info">报告类型：{{ getReportTypeName(selectReport?.reportType) }}</text>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <view class="button-row">
        <button class="action-btn reject-btn" @click="handleReject">
          <text class="action-btn-text">退回</text>
        </button>
        <button class="action-btn approve-btn" @click="handleApprove">
          <text class="action-btn-text">通过审批</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { finishApi, rollbackApi } from '@/api/pendingRatify'
import HeadView from '@/pages/pendingVerification/preViewReport/HeadView.vue'
import NavBar from '@/components/NavBar/NavBar.vue'

defineOptions({
  name: 'PendingRatifyPreview',
})

// 从路由参数获取数据
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1] as any
const options = currentPage.options || {}

const id = ref(options.id || '')
const orderId = ref(options.orderId || '')
const reportDOList = ref<any[]>([])
const equipCode = ref(options.equipCode || '')

// 解析报告列表
try {
  if (options.reportDOList) {
    reportDOList.value = JSON.parse(decodeURIComponent(options.reportDOList))
  }
} catch (error) {
  console.error('解析报告列表失败:', error)
}

const reportList = ref<any[]>(reportDOList.value)
const selectReport = ref<any>(reportList.value?.[0] || null)

// 处理报告选择
const handleReportSelect = (report: any) => {
  selectReport.value = report
  console.log('选择报告:', report)
}

// 获取报告类型名称
const getReportTypeName = (reportType: string) => {
  const typeMap: Record<string, string> = {
    '100': '主报告',
    '200': '附件报告',
  }
  return typeMap[reportType] || reportType
}

// 退回
const handleReject = async () => {
  if (!selectReport.value) {
    return uni.showToast({ title: '请选择报告', icon: 'error' })
  }

  uni.showModal({
    title: '退回确认',
    content: '确定要退回该报告吗？',
    success: async (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '退回中...' })

        try {
          const result: any = await rollbackApi({
            id: selectReport.value.reportId,
            reason: '审批退回',
          })

          uni.hideLoading()

          if (result?.code === 0) {
            uni.showToast({ title: '退回成功', icon: 'success' })
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          } else {
            uni.showToast({ title: result?.msg || '退回失败', icon: 'error' })
          }
        } catch (error) {
          console.error('退回失败:', error)
          uni.hideLoading()
          uni.showToast({ title: '退回失败，请重试', icon: 'error' })
        }
      }
    },
  })
}

// 通过审批
const handleApprove = async () => {
  if (!selectReport.value) {
    return uni.showToast({ title: '请选择报告', icon: 'error' })
  }

  uni.showModal({
    title: '通过确认',
    content: '确定要通过该报告的审批吗？',
    success: async (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '提交中...' })

        try {
          const result: any = await finishApi({
            id: selectReport.value.reportId,
          })

          uni.hideLoading()

          if (result?.code === 0) {
            uni.showToast({ title: '审批通过', icon: 'success' })
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          } else {
            uni.showToast({ title: result?.msg || '审批失败', icon: 'error' })
          }
        } catch (error) {
          console.error('审批失败:', error)
          uni.hideLoading()
          uni.showToast({ title: '审批失败，请重试', icon: 'error' })
        }
      }
    },
  })
}

onMounted(() => {
  console.log('报告列表:', reportList.value)
  console.log('当前选择:', selectReport.value)
})
</script>

<style lang="scss" scoped>
.preview-container {
  display: flex;
  flex-direction: column;
  min-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;
}

.pdf-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  margin: 10px;
  border-radius: 5px;
}

.preview-tip {
  font-size: 18px;
  color: #666;
  margin-bottom: 20px;
}

.preview-info {
  font-size: 14px;
  color: #999;
  margin: 5px 0;
}

.action-buttons {
  padding: 20px;
  background-color: #fff;
}

.button-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 15px;
}

.action-btn {
  flex: 1;
  height: 44px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  font-size: 16px;
}

.reject-btn {
  background-color: #FF4445;
  color: #fff;
}

.approve-btn {
  background-color: #2f8eff;
  color: #fff;
}

.action-btn-text {
  color: #fff;
  font-size: 16px;
}
</style>