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

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

    <scroll-view scroll-y class="detail-scroll">
      <view class="content-section">
        <!-- 基础信息 -->
        <view class="info-card">
          <view class="card-title">{{ t('moldTaskConfig.basicInfo') }}</view>
          <view class="info-list">
            <view class="info-row">
              <text class="info-label">{{ t('moldTaskConfig.name') }}</text>
              <text class="info-value">{{ textValue(detailData.name) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('moldTaskConfig.taskType') }}</text>
              <text class="info-value">{{ taskTypeText }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('moldTaskConfig.moldList') }}</text>
              <text class="info-value">{{ moldListText }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('moldTaskConfig.projectFormName') }}</text>
              <text class="info-value">{{ textValue(detailData.projectFormName) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('moldTaskConfig.dateRange') }}</text>
              <text class="info-value">{{ formatDate(detailData.startDate) }} ~ {{ formatDate(detailData.endDate) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('moldTaskConfig.cronExpression') }}</text>
              <text class="info-value">{{ textValue(detailData.cronExpression) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('moldTaskConfig.operableUsers') }}</text>
              <text class="info-value">{{ operableUsersText }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('moldTaskConfig.enabled') }}</text>
              <text :class="['info-value', enabledClass]">{{ enabledText }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('moldTaskConfig.creatorName') }}</text>
              <text class="info-value">{{ textValue(detailData.creatorName) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('moldTaskConfig.createTime') }}</text>
              <text class="info-value">{{ formatDateTime(detailData.createTime) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">{{ t('moldTaskConfig.updateTime') }}</text>
              <text class="info-value">{{ formatDateTime(detailData.updateTime) }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { computed, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import NavBar from '@/components/common/NavBar.vue'

const { t } = useI18n()

const detailData = reactive({})

const taskTypeText = computed(() => {
  const v = detailData.taskType
  if (v === 1) return t('moldTaskConfig.taskTypeInspect')
  if (v === 2) return t('moldTaskConfig.taskTypeMaintain')
  return textValue(v)
})

const enabledText = computed(() => {
  const v = detailData.enabled
  if (v === true || v === 1 || v === '1' || v === 'true') return t('functionCommon.yes')
  if (v === false || v === 0 || v === '0' || v === 'false') return t('functionCommon.no')
  return textValue(v)
})

const enabledClass = computed(() => {
  const v = detailData.enabled
  if (v === true || v === 1 || v === '1' || v === 'true') return 'text-success'
  if (v === false || v === 0 || v === '0' || v === 'false') return 'text-danger'
  return ''
})

const moldListText = computed(() => {
  const v = detailData.moldList
  if (!v) return '-'
  if (Array.isArray(v)) return v.join(', ') || '-'
  return textValue(v)
})

const operableUsersText = computed(() => {
  const v = detailData.operableUsers
  if (!v) return '-'
  if (Array.isArray(v)) return v.join(', ') || '-'
  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 formatDate(v) {
  if (!v) return '-'
  if (Array.isArray(v) && v.length >= 3) {
    const [y, m, d] = v
    const p = (n) => String(n).padStart(2, '0')
    return `${y}-${p(m)}-${p(d)}`
  }
  const s = String(v).trim().substring(0, 10)
  return s || '-'
}

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 () => {
  try {
    const cached = uni.getStorageSync('moldTaskConfigDetail')
    if (cached) {
      const data = JSON.parse(cached)
      Object.assign(detailData, data)
      uni.removeStorageSync('moldTaskConfigDetail')
    }
  } catch (e) {}
})
</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; }
.text-success { color: #18bc37; }
.text-danger { color: #e34d59; }
</style>