Abizrh
51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { Trash2 } from 'lucide-vue-next'
|
|
|
|
interface Diagnosa {
|
|
id: number
|
|
diagnosa: string
|
|
icd: string
|
|
}
|
|
|
|
const modelValue = defineModel<Diagnosa[]>({ default: [] })
|
|
|
|
function removeItem(id: number) {
|
|
modelValue.value = modelValue.value.filter((item) => item.id !== id)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="rounded-lg border bg-white shadow-sm">
|
|
<Table>
|
|
<TableHeader class="bg-gray-50">
|
|
<TableRow>
|
|
<TableHead class="w-[50px] text-center">NO.</TableHead>
|
|
<TableHead>DIAGNOSA</TableHead>
|
|
<TableHead class="w-[120px]">ICD-X</TableHead>
|
|
<TableHead class="w-[80px] text-center">AKSI</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
|
|
<TableBody>
|
|
<TableRow
|
|
v-for="(item, i) in modelValue"
|
|
:key="item.id"
|
|
>
|
|
<TableCell class="text-center font-medium">{{ i + 1 }}</TableCell>
|
|
<TableCell>{{ item.code }}</TableCell>
|
|
<TableCell>{{ item.name }}</TableCell>
|
|
<TableCell class="text-center">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
@click="removeItem(item.id)"
|
|
>
|
|
<Trash2 class="h-4 w-4 text-gray-500 hover:text-red-500" />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</template>
|