besure_app/src/pages_function/pages/moldInspectionPlan/detail.vue

<template>
  <view class="page-container">
    <view class="fixed-header">
      <NavBar :title="t('moldInspectionPlan.detailTitle')" />
    </view>

    <scroll-view scroll-y class="detail-scroll">
      <view class="content-section">
        <!-- 基础信息 -->
        <view class="info-card">
          <view class="card-title">{{ t('moldInspectionPlan.basicInfo') }}</view>
          <view class="info-list">
            <view class="info-row">
              <text class="info-label">{{ t('moldInspectionPlan.planName') }}</text>
              <text class="info-value">{{ textValue(detailData.planName) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('moldInspectionPlan.planType') }}</text>
              <text class="info-value">{{ planTypeText }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('moldInspectionPlan.description') }}</text>
              <text class="info-value">{{ textValue(detailData.description) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('moldInspectionPlan.creatorName') }}</text>
              <text class="info-value">{{ textValue(detailData.creatorName) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('moldInspectionPlan.createTime') }}</text>
              <text class="info-value">{{ formatDateTime(detailData.createTime) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('moldInspectionPlan.updateTime') }}</text>
              <text class="info-value">{{ formatDateTime(detailData.updateTime) }}</text>
            </view>
          </view>
        </view>

        <!-- 关联点检项 -->
        <view class="info-card">
          <view class="card-title">{{ t('moldInspectionPlan.subjectListTitle') }}</view>
          <view v-if="subjectLoading" class="hint">{{ t('functionCommon.loading') }}</view>
          <view v-else-if="!subjectList.length" class="hint">{{ t('moldInspectionPlan.noSubjectData') }}</view>
          <view v-else class="subject-list">
            <view v-for="(item, index) in subjectList" :key="item.id || index" class="subject-card">
              <view class="subject-index">{{ index + 1 }}</view>
              <view class="subject-body">
                <view class="subject-row">
                  <text class="subject-label">{{ t('moldInspectionPlan.subjectCode') }}</text>
                  <text class="subject-value">{{ textValue(item.subjectCode) }}</text>
                </view>
                <view class="subject-row">
                  <text class="subject-label">{{ t('moldInspectionPlan.subjectName') }}</text>
                  <text class="subject-value">{{ textValue(item.subjectName) }}</text>
                </view>
                <view class="subject-row">
                  <text class="subject-label">{{ t('moldInspectionPlan.inspectionMethod') }}</text>
                  <text class="subject-value">{{ getInspectionMethodLabel(item.inspectionMethod) }}</text>
                </view>
                <view class="subject-row">
                  <text class="subject-label">{{ t('moldInspectionPlan.judgmentCriteria') }}</text>
                  <text class="subject-value">{{ textValue(item.judgmentCriteria) }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import NavBar from '@/components/common/NavBar.vue'
import { DICT_TYPE, getDictLabel, initAllDict } from '@/utils/dict'
import { getMoldInspectionPlanDetail } from '@/api/mes/moldInspectionPlan'

const { t } = useI18n()

const detailData = reactive({})
const subjectList = ref([])
const subjectLoading = ref(false)

const planTypeText = computed(() => {
  const v = detailData.planType
  if (v === 1) return t('moldInspectionPlan.planTypeMaintain')
  if (v === 2) return t('moldInspectionPlan.planTypeInspect')
  return textValue(v)
})

function textValue(v) {
  if (v === 0) return '0'
  if (v === null || v === undefined) return '-'
  const s = String(v).trim()
  return s || '-'
}

function getInspectionMethodLabel(value) {
  return getDictLabel(DICT_TYPE.INSPECTION_METHOD, value, textValue(value))
}

function formatDateTime(v) {
  if (!v) return '-'
  if (Array.isArray(v) && v.length >= 3) {
    const [y, m, d, hh = 0, mm = 0, ss = 0] = v
    const p = (n) => String(n).padStart(2, '0')
    return `${y}-${p(m)}-${p(d)} ${p(hh)}:${p(mm)}:${p(ss)}`
  }
  const d = new Date(Number(v))
  if (Number.isNaN(d.getTime())) return textValue(v)
  const p = (n) => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
}

onLoad(async (query) => {
  const id = query?.id
  if (!id) {
    uni.showToast({ title: t('functionCommon.noIdView'), icon: 'none' })
    return
  }
  await initAllDict()
  try {
    const cached = uni.getStorageSync('moldInspectionPlanDetail')
    if (cached) {
      const data = JSON.parse(cached)
      Object.assign(detailData, data)
      uni.removeStorageSync('moldInspectionPlanDetail')
    }
  } catch (e) {}
  subjectLoading.value = true
  try {
    const res = await getMoldInspectionPlanDetail(id)
    const root = res && res.data !== undefined ? res.data : res
    const subjects = Array.isArray(root) ? root : root?.list || root?.data?.list || []
    subjectList.value = Array.isArray(subjects) ? subjects : []
  } catch (e) {
    uni.showToast({ title: t('functionCommon.loadFailed'), icon: 'none' })
  } finally {
    subjectLoading.value = false
  }
})
</script>

<style lang="scss" scoped>
.page-container { min-height: 100vh; background-color: #f0f2f5; }
.fixed-header { position: sticky; top: 0; z-index: 20; }
.detail-scroll { height: calc(100vh - 88rpx); }
.content-section { padding: 0 24rpx 24rpx; }
.info-card { margin-top: 20rpx; background: #fff; border-radius: 20rpx; padding: 28rpx; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); }
.card-title { font-size: 32rpx; color: #1a3a5c; font-weight: 700; margin-bottom: 18rpx; }
.info-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 18rpx 0; border-bottom: 1rpx solid #edf0f3; }
.info-label { font-size: 27rpx; color: #8a9099; width: 220rpx; }
.info-value { flex: 1; text-align: right; font-size: 28rpx; color: #303133; line-height: 1.45; }
.hint { text-align: center; color: #909399; padding: 24rpx 0; font-size: 26rpx; }
.subject-list { display: flex; flex-direction: column; gap: 16rpx; }
.subject-card { display: flex; background: #f7f9fc; border-radius: 14rpx; padding: 20rpx; gap: 16rpx; }
.subject-index { min-width: 48rpx; height: 48rpx; border-radius: 10rpx; background: #1a3a5c; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24rpx; font-weight: 700; }
.subject-body { flex: 1; display: flex; flex-direction: column; gap: 8rpx; }
.subject-row { display: flex; justify-content: space-between; align-items: center; }
.subject-label { font-size: 24rpx; color: #8a9099; }
.subject-value { font-size: 26rpx; color: #30363d; max-width: 60%; text-align: right; }
</style>