tjy-uniapp/src/pages/securityCheck/detail/index copy.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '安全检查记录详情',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="detail-container">
    <!-- 导航栏 -->
    <NavBar>
      <template #title>
        <HeadView v-if="renderCenter" title="操作指导书批准详情" :btn-array="btnArray" />
        <text v-else class="nav-title">安全检查记录详情</text>
      </template>
    </NavBar>

    <!-- PDF 预览区域 -->
    <view class="pdf-container">
      <view v-if="loading" class="loading-container">
        <text class="loading-text">加载中...</text>
      </view>
      <SpreadPDFViewer
        ref="spreadPdfViewerRef"
        :businessConfig="businessConfig"
        :templateData="templateData"
        :templateBlob="templateBlob"
      />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import HeadView from '../components/HeadView.vue'
import NavBar from '@/components/NavBar/NavBar.vue'
import SpreadPDFViewer from '@/components/SpreadDesigner/SpreadPDFViewer.vue'

import { useConfigStore } from '@/store/config'

import { buildFileUrl } from '@/utils/index'
import { requestFunc, SecurityCheckFuncName } from '@/api/ApiRouter/taskOrderSecurityCheck'
import { getDynamicTbVal } from '@/api/task'
import { getStandardTemplate } from '@/api'


const configStore = useConfigStore()
const equipType = configStore.getEquipType()

// 路由参数
const detailItem = ref<any>({})
const orderId = ref('')
const unitContact = ref('')
const unitPhone = ref('')
const receiverEmail = ref('')
const templateId = ref('')
const spreadPdfViewerRef = ref<any>(null)

const templateBlob = ref<any>(null)
const businessConfig = ref<any>({
  businessType: 'AQJC',
  title: '安全检查记录编辑',
  disableNavigate: true, // 是否禁用跳转，默认不禁用

  ui: {
    title: '安全检查记录',
    saveButtonText: '保存',
    cancelButtonText: '取消',
    showAdditionalToolbar: true,
    customButtons: [],
  },
})
const templateData = ref<any>({})

onLoad((options) => {
  orderId.value = options.orderId || ''
  unitContact.value = options.unitContact || ''
  unitPhone.value = options.unitPhone || ''
  receiverEmail.value = options.receiverEmail || ''
  templateId.value = options.templateId || ''

  if (options.detailItem) {
    try {
      detailItem.value = JSON.parse(decodeURIComponent(options.detailItem))
    } catch (e) {
      console.error('解析 detailItem 失败:', e)
    }
  }
})

// 状态
const loading = ref(false)

// 是否显示操作按钮 (对应 PJ 中的 useMemo 计算)
const renderCenter = computed(() => {
  const { id } = detailItem.value || {}
  if (!id) return false
  return true
})

// 操作按钮数组 (与 PJ 版本一致，空数组)
const btnArray = computed(() => {
  const { signFilePdf, id } = detailItem.value || {}
  if (!id) return []

  return [
    // { value: signFilePdf ? '重新签名' : '签名', color: 'rgb(47,142,255)', click: handleToSign },
  ]
})

// 初始化
const init = async () => {
  loading.value = true
  try {
    // const tplParams = await handleGetTemplate()
    // await getAppServiceOrderPDF(tplParams)
    const id = detailItem.value?.id || ''
    if (!id) return
    const defaultTemplateResp = await requestFunc(SecurityCheckFuncName.getTemplate, equipType, { orderId: orderId.value })
    const res = await getStandardTemplate({ id: defaultTemplateResp.data?.templateId })
    const resData = (res as any).data
    const dataMap: any = {}
    const dynamicTbValResp = await getDynamicTbVal({ refId: id })
    const dynamicTb: any = dynamicTbValResp.data
    for (let i = 0; i < dynamicTb.dynamicTbValRespVOList.length; i++) {
      const item = dynamicTb.dynamicTbValRespVOList[i]
      dataMap[item.colCode] = item.valValue
    }
    // 组装templateData
    templateData.value = {
      schema: resData.bindingPathSchema ? JSON.parse(resData.bindingPathSchema) : {},
      data: {
        ...dataMap,
        templateId,
        templateUrl: resData.fileUrl,
      },
      pathNameMapping: JSON.parse(resData.bindingPathNameJson),
      template: templateId,
      templateUrl: resData.fileUrl,
    }

    console.log(templateData.value)
    // 获取 template 文件
    const fileUri = resData.fileUrl
    const fileUrl = buildFileUrl(fileUri)
    const fileBase64 = await spreadPdfViewerRef.value.downloadFileAsBase64(fileUrl)
    templateBlob.value = fileBase64
  } catch (error) {
    console.error('[Page] 初始化失败:', error)
    uni.showToast({ title: 'PDF 加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  await init()
})
</script>

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

.navigate-view {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.navigate-left {
  display: flex;
  align-items: center;
  width: 44px;
}

.back-icon {
  width: 20px;
  height: 20px;
}

.navigate-center {
  display: flex;
  flex: 1;
  justify-content: center;
}

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

.navigate-right {
  display: flex;
  align-items: center;
  width: 44px;
}

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

.pdf-container {
  flex: 1;
  background-color: #f5f5f5;
}
/* #ifdef H5 */
.pdf-viewer-container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px;
  text-align: center;
  background-color: #fff;
}
/* #endif */

.loading-container,
.empty-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.loading-text,
.empty-text {
  font-size: 14px;
  color: #999;
}
</style>