67 lines
3.0 KiB
Vue
67 lines
3.0 KiB
Vue
<script setup>
|
||
import { computed } from 'vue'
|
||
import { useRiskNotifier } from '@/composables/useRiskNotifier'
|
||
import { formatDateZh, formatMileageKm } from '@/utils/vehicleReportBlockMaps'
|
||
import { useVehiclePayload } from '@/composables/useVehiclePayload'
|
||
|
||
const props = defineProps({
|
||
data: Object,
|
||
params: Object,
|
||
apiId: { type: String, default: '' },
|
||
index: { type: Number, default: 0 },
|
||
notifyRiskStatus: { type: Function, default: () => {} },
|
||
})
|
||
|
||
const { obj, params } = useVehiclePayload(props)
|
||
|
||
const records = computed(() => (Array.isArray(obj.value.record) ? obj.value.record : []))
|
||
const hasData = computed(() => Object.keys(obj.value).length > 0)
|
||
const vin = computed(() => (records.value[0]?.vin) || params.value.vin_code || '')
|
||
const lastRecord = computed(() => (records.value.length ? records.value[records.value.length - 1] : null))
|
||
|
||
const riskScore = computed(() => 95)
|
||
useRiskNotifier(props, riskScore)
|
||
</script>
|
||
|
||
<template>
|
||
<div class="card space-y-3">
|
||
<div class="bg-gradient-to-br from-sky-50 to-blue-50 rounded-lg p-4 border border-sky-100">
|
||
<h3 class="text-lg font-bold">车辆维保简版查询</h3>
|
||
<p class="text-sm text-gray-600 mt-1">按时间轴展示维保与材料明细</p>
|
||
</div>
|
||
|
||
<template v-if="hasData">
|
||
<div class="bg-gray-50 rounded-lg p-4 border text-sm">
|
||
<div class="font-mono">VIN：{{ vin || '-' }}</div>
|
||
<div class="text-gray-600 mt-1">维保 {{ records.length }} 条
|
||
<span v-if="lastRecord"> · 最近 {{ formatDateZh(lastRecord.lastTime) }} · {{ formatMileageKm(lastRecord.mileage) }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="records.length" class="space-y-3">
|
||
<div v-for="(item, idx) in records" :key="idx" class="bg-white rounded-lg p-4 border border-gray-200">
|
||
<div class="flex justify-between font-medium">
|
||
<span>{{ formatDateZh(item.lastTime) }}</span>
|
||
<span class="text-blue-600">{{ formatMileageKm(item.mileage) }}</span>
|
||
</div>
|
||
<p class="text-sm text-gray-500 mt-1">{{ item.repairType || '维保' }} · VIN {{ item.vin || vin || '-' }}</p>
|
||
<div v-if="item.details?.length" class="mt-2 text-sm">
|
||
<div class="text-xs text-gray-500 mb-1">维修项目</div>
|
||
<div v-for="(det, di) in item.details" :key="di" class="py-1">
|
||
<span v-if="det.type" class="text-xs bg-blue-50 text-blue-700 px-1 rounded mr-1">{{ det.type }}</span>{{ det.content }}
|
||
</div>
|
||
</div>
|
||
<div v-if="item.materials?.length" class="mt-2 text-sm">
|
||
<div class="text-xs text-gray-500 mb-1">使用材料</div>
|
||
<div v-for="(m, mi) in item.materials" :key="mi" class="py-1">
|
||
<span v-if="m.type" class="text-xs bg-gray-100 px-1 rounded mr-1">{{ m.type }}</span>{{ m.content }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="text-center text-gray-500 py-6">暂无维保记录</div>
|
||
</template>
|
||
<div v-else class="text-center py-10 text-gray-500">暂无维保数据</div>
|
||
</div>
|
||
</template>
|