Yusron alamsyah
115 lines
5.4 KiB
Vue
115 lines
5.4 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
readonly?: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
readonly: false
|
|
});
|
|
|
|
const statusPasienData = defineModel<{
|
|
tanggalSelesai: string;
|
|
statusOperasi: string;
|
|
keteranganStatus: string;
|
|
}>({ required: true });
|
|
</script>
|
|
|
|
<template>
|
|
<v-card elevation="10">
|
|
<v-card-item>
|
|
<h5 class="text-h5 font-weight-bold">Data Status Pasien Operasi</h5>
|
|
</v-card-item>
|
|
<v-divider></v-divider>
|
|
<v-card-text>
|
|
<v-row>
|
|
<!-- Status Operasi -->
|
|
<v-col cols="12">
|
|
<v-label class="mb-2 font-weight-medium">Status Operasi <span class="text-error">*</span></v-label>
|
|
<v-row class="mt-2">
|
|
<v-col cols="12" sm="6" md="3">
|
|
<v-btn
|
|
block
|
|
size="large"
|
|
:variant="statusPasienData.statusOperasi === 'Belum' ? 'flat' : 'outlined'"
|
|
:color="statusPasienData.statusOperasi === 'Belum' ? 'primary' : 'default'"
|
|
@click="!readonly && (statusPasienData.statusOperasi = 'Belum')"
|
|
:disabled="readonly"
|
|
>
|
|
<v-icon left class="mr-2">{{ statusPasienData.statusOperasi === 'Belum' ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
|
|
Belum
|
|
</v-btn>
|
|
</v-col>
|
|
<v-col cols="12" sm="6" md="3">
|
|
<v-btn
|
|
block
|
|
size="large"
|
|
:variant="statusPasienData.statusOperasi === 'Selesai' ? 'flat' : 'outlined'"
|
|
:color="statusPasienData.statusOperasi === 'Selesai' ? 'primary' : 'default'"
|
|
@click="!readonly && (statusPasienData.statusOperasi = 'Selesai')"
|
|
:disabled="readonly"
|
|
>
|
|
<v-icon left class="mr-2">{{ statusPasienData.statusOperasi === 'Selesai' ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
|
|
Selesai
|
|
</v-btn>
|
|
</v-col>
|
|
<v-col cols="12" sm="6" md="3">
|
|
<v-btn
|
|
block
|
|
size="large"
|
|
:variant="statusPasienData.statusOperasi === 'Tunda' ? 'flat' : 'outlined'"
|
|
:color="statusPasienData.statusOperasi === 'Tunda' ? 'primary' : 'default'"
|
|
@click="!readonly && (statusPasienData.statusOperasi = 'Tunda')"
|
|
:disabled="readonly"
|
|
>
|
|
<v-icon left class="mr-2">{{ statusPasienData.statusOperasi === 'Tunda' ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
|
|
Tunda
|
|
</v-btn>
|
|
</v-col>
|
|
<v-col cols="12" sm="6" md="3">
|
|
<v-btn
|
|
block
|
|
size="large"
|
|
:variant="statusPasienData.statusOperasi === 'Batal' ? 'flat' : 'outlined'"
|
|
:color="statusPasienData.statusOperasi === 'Batal' ? 'primary' : 'default'"
|
|
@click="!readonly && (statusPasienData.statusOperasi = 'Batal')"
|
|
:disabled="readonly"
|
|
>
|
|
<v-icon left class="mr-2">{{ statusPasienData.statusOperasi === 'Batal' ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
|
|
Batal
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
|
|
<!-- Tanggal Selesai Operasi -->
|
|
<v-col cols="6">
|
|
<v-label class="mb-2 font-weight-medium">Tanggal Selesai Operasi</v-label>
|
|
<v-text-field
|
|
v-model="statusPasienData.tanggalSelesai"
|
|
type="date"
|
|
variant="outlined"
|
|
density="comfortable"
|
|
hide-details="auto"
|
|
:readonly="readonly"
|
|
:bg-color="readonly ? 'grey-lighten-3' : undefined"
|
|
></v-text-field>
|
|
</v-col>
|
|
|
|
<!-- Keterangan Status Pasien -->
|
|
<v-col cols="12">
|
|
<v-label class="mb-2 font-weight-medium">Keterangan Status Pasien</v-label>
|
|
<v-textarea
|
|
v-model="statusPasienData.keteranganStatus"
|
|
variant="outlined"
|
|
rows="3"
|
|
hide-details="auto"
|
|
:readonly="readonly"
|
|
:bg-color="readonly ? 'grey-lighten-3' : undefined"
|
|
placeholder="Keterangan status tunda / batal"
|
|
></v-textarea>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|