เส้นทางการตรวจสอบ
การใช้งานพื้นฐาน
แเ
อพ
แน
vue
<template>
<div class="spr-w-[400px]">
<SprAuditTrail :auditTrailLogs="mockTrailLogs" />
</div>
</template>
<script lang="ts" setup>
import SprAuditTrail from '@/components/audit-trail/audit-trail.vue';
import { ref } from 'vue';
const mockTrailLogs = [
{
userName: 'แม็กซ์ เวอร์สแตปเปน',
title: 'แม็กซ์ เวอร์สแตปเปน อัปเดตเมื่อวันที่ 22 ตุลาคม 2025 เวลา 10:30 น.',
logs: [
{
label: ['สถานะ'],
oldValue: 'ไม่ใช้งาน',
newValue: 'ใช้งาน',
},
{
label: ['ทดสอบ1', 'ทดสอบ2'],
oldValue: 'เท็จ',
newValue: 'จริง',
},
],
},
{
userName: 'ออสการ์ พิแอสทรี',
title: 'ออสการ์ พิแอสทรี อัปเดตเมื่อวันที่ 21 ตุลาคม 2025 เวลา 12:00 น.',
logs: [
{
label: ['สถานะ'],
oldValue: 'ไม่ใช้งาน',
newValue: 'ใช้งาน',
},
{
label: ['ทดสอบ1', 'ทดสอบ2', 'ทดสอบ3'],
oldValue: 'เท็จ',
newValue: 'จริง',
},
],
},
{
userName: 'แลนโด นอร์ริส',
title: 'แลนโด นอร์ริส สร้างเมื่อวันที่ 20 ตุลาคม 2025 เวลา 13:00 น.',
logs: [
{
label: ['สถานะ'],
oldValue: 'ไม่ใช้งาน',
newValue: 'ใช้งาน',
},
{
label: ['ทดสอบ1', 'ทดสอบ2', 'ทดสอบ3'],
oldValue: 'เท็จ',
newValue: 'จริง',
},
],
},
];
</script>API Reference
Props
| ชื่อ | คำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
auditTrailLogs | รายการรายการบันทึกเส้นทางการตรวจสอบ หากไม่ได้ระบุ avatarUrl จะแสดงอวาตาร์เริ่มต้น (ตัวอักษรย่อตาม userName) | { userName: string; title: string; avatarUrl?: string; logs: { label: string[]; oldValue: string; newValue: string; }[]; }[]; | [] |
alwaysOpen | เมื่อเป็นจริง รายการบันทึกจะยังคงเปิดเมื่อเปิดรายการอื่น | boolean | true |