one-pipe-system/src/views/asset-management/record-management/asset-assign/detail.vue

<template>
  <div class="asset-assign-detail">
    <ElCard shadow="never">
      <!-- 页面头部 -->
      <div class="detail-header">
        <ElButton @click="handleBack">
          <template #icon>
            <ElIcon><ArrowLeft /></ElIcon>
          </template>
          返回
        </ElButton>
        <h2 class="detail-title">资产分配详情</h2>
        <ElButton
          v-if="recordAuditTarget && hasAuth(recordAuditPermission)"
          type="primary"
          plain
          @click="openAuditInvestigation(recordAuditTarget)"
        >
          {{ userType === 3 ? '活动记录' : '分配审计' }}
        </ElButton>
        <ElButton
          v-if="assetAuditTarget && hasAuth(AUDIT_PERMISSIONS.resourceTimeline)"
          type="primary"
          plain
          @click="openAuditInvestigation(assetAuditTarget)"
        >
          资产审计
        </ElButton>
      </div>

      <!-- 详情内容 -->
      <DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />

      <!-- 加载中 -->
      <div v-if="loading" class="loading-container">
        <ElIcon class="is-loading"><Loading /></ElIcon>
        <span>加载中...</span>
      </div>
    </ElCard>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref, onMounted } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { ElCard, ElButton, ElIcon, ElMessage } from 'element-plus'
  import { ArrowLeft, Loading } from '@element-plus/icons-vue'
  import DetailPage from '@/components/common/DetailPage.vue'
  import type { DetailSection } from '@/components/common/DetailPage.vue'
  import { CardService } from '@/api/modules'
  import type { AssetAllocationRecord } from '@/types/api/card'
  import { formatDateTime } from '@/utils/business/format'
  import { useAuth } from '@/composables/useAuth'
  import { useUserStore } from '@/store/modules/user'
  import { AUDIT_PERMISSIONS } from '@/config/constants/audit'
  import { resolveAuditResourceTarget } from '@/utils/business/auditNavigation'
  import { openAuditInvestigation } from '@/components/business/audit/investigationController'

  defineOptions({ name: 'AssetAssignDetail' })

  const route = useRoute()
  const router = useRouter()
  const { hasAuth } = useAuth()
  const userStore = useUserStore()

  const loading = ref(false)
  const detailData = ref<AssetAllocationRecord | null>(null)
  const userType = computed(() => Number(userStore.info.user_type))
  const recordAuditPermission = computed(() =>
    userType.value === 3 ? AUDIT_PERMISSIONS.agentActivity : AUDIT_PERMISSIONS.resourceTimeline
  )
  const recordAuditTarget = computed(() => {
    if (!detailData.value || userType.value === 4) return null
    return resolveAuditResourceTarget({
      userType: userType.value,
      resourceType: 'asset_allocation_record',
      internalId: detailData.value.id,
      businessIdentifier: detailData.value.allocation_no
    })
  })
  const assetAuditTarget = computed(() => {
    if (!detailData.value || ![1, 2].includes(userType.value)) return null
    return resolveAuditResourceTarget({
      userType: userType.value,
      resourceType: detailData.value.asset_type,
      internalId: detailData.value.asset_id
    })
  })

  // 详情页配置
  const detailSections: DetailSection[] = [
    {
      title: '基本信息',
      fields: [
        { label: '分配单号', prop: 'allocation_no' },
        {
          label: '分配类型',
          formatter: (_, data) => data.allocation_name || '-'
        },
        {
          label: '资产类型',
          formatter: (_, data) => data.asset_type_name || '-'
        },
        { label: '资产标识符', prop: 'asset_identifier' },
        { label: '来源所有者', prop: 'from_owner_name' },
        {
          label: '来源类型',
          formatter: (_, data) => {
            const typeMap: Record<string, string> = {
              platform: '平台',
              shop: '店铺'
            }
            return typeMap[data.from_owner_type] || data.from_owner_type || '-'
          }
        },
        { label: '目标所有者', prop: 'to_owner_name' },
        {
          label: '目标类型',
          formatter: (_, data) => {
            const typeMap: Record<string, string> = {
              platform: '平台',
              shop: '店铺'
            }
            return typeMap[data.to_owner_type] || data.to_owner_type || '-'
          }
        },
        { label: '操作人', prop: 'operator_name' },
        { label: '关联卡数量', prop: 'related_card_count' },
        { label: '创建时间', prop: 'created_at', formatter: (value) => formatDateTime(value) },
        { label: '备注', prop: 'remark', formatter: (value) => value || '-' }
      ]
    }
  ]

  // 返回上一页
  const handleBack = () => {
    router.back()
  }

  // 获取详情数据
  const fetchDetail = async () => {
    const id = Number(route.params.id)
    if (!id) {
      ElMessage.error('缺少ID参数')
      return
    }

    loading.value = true
    try {
      const res = await CardService.getAssetAllocationRecordDetail(id)
      if (res.code === 0) {
        detailData.value = res.data
      }
    } catch (error) {
      console.error(error)
    } finally {
      loading.value = false
    }
  }

  onMounted(() => {
    fetchDetail()
  })
</script>

<style scoped lang="scss">
  .asset-assign-detail {
    padding: 20px;
  }

  .detail-header {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-bottom: 16px;

    .detail-title {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
  }

  .loading-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--el-text-color-secondary);

    .el-icon {
      font-size: 32px;
    }
  }
</style>