196 lines
8.5 KiB
Vue
196 lines
8.5 KiB
Vue
<template>
|
|
<v-timeline side="end" align="start">
|
|
<v-timeline-item
|
|
dot-color="white"
|
|
:fill-dot="true"
|
|
icon="mdi-check-circle"
|
|
icon-color="primary"
|
|
size="small"
|
|
>
|
|
<div style="min-width: 600px; max-width: 750px;">
|
|
<v-row>
|
|
<v-col cols="7" align="start">
|
|
<h4 class="font-weight-medium">Order diterima oleh ADMIN</h4>
|
|
</v-col>
|
|
<v-col cols="5" align="end">
|
|
<h4 class="font-weight-medium">21-08-2024 16:53</h4>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row no-gutters class="ml-2 mb-4 mt-2">
|
|
<v-col cols="3" align="start">
|
|
<h5 class="font-weight-medium text-grey">Kel. Pelanggan</h5>
|
|
</v-col>
|
|
<v-col cols="9" align="end">
|
|
<h5 class="font-weight-medium text-grey">PASIEN MANDIRI/PASIEN UMUM 2024</h5>
|
|
</v-col>
|
|
<v-col cols="3" align="start">
|
|
<h5 class="font-weight-medium text-grey">Pengirim</h5>
|
|
</v-col>
|
|
<v-col cols="9" align="end">
|
|
<h5 class="font-weight-medium text-grey">dr. A. B. WARDOYO, Sp. PD.</h5>
|
|
</v-col>
|
|
<v-col cols="3" align="start">
|
|
<h5 class="font-weight-medium text-grey">Alamat</h5>
|
|
</v-col>
|
|
<v-col cols="9" align="end">
|
|
<h5 class="font-weight-medium text-grey">JL. MH. THAMRIN NO. 1 BINTARO JAYA</h5>
|
|
</v-col>
|
|
<v-col cols="3" align="start">
|
|
<h5 class="font-weight-medium text-grey">Catatan</h5>
|
|
</v-col>
|
|
<v-col cols="9" align="end">
|
|
<h5 class="font-weight-medium text-grey">-</h5>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<div class="bg-secondary-lighten rounded-lg pa-2 mb-2">
|
|
<v-row>
|
|
<v-col cols="4">
|
|
<h4>Janji Hasil</h4>
|
|
</v-col>
|
|
<v-col cols="8" align="end">
|
|
<p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2 mr-2" style="display: inline-block; font-size: 12px;">21-08-2024 16:53</p>
|
|
<p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2" style="display: inline-block; font-size: 12px;">21-08-2024 20:53</p>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
<v-data-table
|
|
:items="orderdata"
|
|
:headers="headers"
|
|
hide-default-footer
|
|
>
|
|
<template v-slot:headers="{ columns }">
|
|
<tr>
|
|
<template v-for="column in columns" :key="column.key">
|
|
<td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
|
|
<span>{{ column.title }}</span>
|
|
</td>
|
|
</template>
|
|
</tr>
|
|
</template>
|
|
<template v-slot:item="{ item }">
|
|
<tr :class="[item.pemeriksaan === 'TOTAL' ? 'bg-primary-lighten' : '']">
|
|
<td align="start">
|
|
<p class="font-weight-medium">{{ item.pemeriksaan }}</p>
|
|
</td>
|
|
<td align="center">
|
|
<p class="font-weight-medium">{{ item.bruto }}</p>
|
|
</td>
|
|
<td align="center">
|
|
<p class="font-weight-medium">{{ item.diskon }}</p>
|
|
</td>
|
|
<td align="center">
|
|
<p class="font-weight-medium">{{ item.total }}</p>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</v-data-table>
|
|
<v-row no-gutters class="ml-2 mb-4 mt-2">
|
|
<v-col cols="3" align="start">
|
|
<h5 class="font-weight-medium text-grey">Alamat Sendiri</h5>
|
|
</v-col>
|
|
<v-col cols="9" align="end">
|
|
<h5 class="font-weight-medium text-grey">PASIEN MANDIRI/PASIEN UMUM 2024</h5>
|
|
</v-col>
|
|
<v-col cols="3" align="start">
|
|
<h5 class="font-weight-medium text-grey">Alamat Pasien</h5>
|
|
</v-col>
|
|
<v-col cols="9" align="end">
|
|
<h5 class="font-weight-medium text-grey">HRC 05/TELKOM MOJOKERTO Sawunggalung, Wonokromo, Surabaya</h5>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</v-timeline-item>
|
|
<v-timeline-item
|
|
dot-color="white"
|
|
:fill-dot="true"
|
|
icon="mdi-check-circle"
|
|
icon-color="primary"
|
|
size="small"
|
|
>
|
|
<div style="min-width: 600px; max-width: 750px;">
|
|
<v-row>
|
|
<v-col cols="7" align="start">
|
|
<h4 class="font-weight-medium">Pembayaran diterima oleh ADMIN</h4>
|
|
</v-col>
|
|
<v-col cols="5" align="end">
|
|
<h4 class="font-weight-medium">21-08-2024 21:53</h4>
|
|
</v-col>
|
|
</v-row>
|
|
<div class="bg-secondary-lighten rounded-lg pa-2 mt-2">
|
|
<v-row>
|
|
<v-col cols="4">
|
|
<h4>Janji Hasil</h4>
|
|
</v-col>
|
|
<v-col cols="8" align="end">
|
|
<h4>176.000</h4>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
<div class="bg-primary-lighten rounded-lg pa-2 mt-2">
|
|
<v-row>
|
|
<v-col cols="4">
|
|
<h4>TOTAL</h4>
|
|
</v-col>
|
|
<v-col cols="8" align="end">
|
|
<h4>176.000</h4>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</div>
|
|
</v-timeline-item>
|
|
</v-timeline>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "orderdialog",
|
|
components: {},
|
|
mounted() {},
|
|
data() {
|
|
return {
|
|
headers: [
|
|
{
|
|
title: 'PEMERIKSAAN',
|
|
align: "start",
|
|
sortable: false,
|
|
key: "pemeriksaan",
|
|
width: "40%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: 'BRUTO',
|
|
align: "center",
|
|
sortable: false,
|
|
key: "bruto",
|
|
width: "20%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: 'DISKON',
|
|
align: "center",
|
|
sortable: false,
|
|
key: "diskon",
|
|
width: "20%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: 'TOTAL',
|
|
align: "center",
|
|
sortable: false,
|
|
key: "total",
|
|
width: "20%",
|
|
class: "font-weight-bold",
|
|
},
|
|
]
|
|
};
|
|
},
|
|
computed: {
|
|
orderdata: {
|
|
get() {
|
|
return this.$store.state.stored.data_order;
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script> |