New Feature menu Radiodiagnostik verifikasi Hasil
This commit is contained in:
62
result-verification-radiodiagnostik/components/mainVerif.vue
Normal file
62
result-verification-radiodiagnostik/components/mainVerif.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<v-app id="inspire">
|
||||
<one-navbar></one-navbar>
|
||||
<v-main>
|
||||
<div class=" bg-primary-lighten ml-2 rounded-xl h-100">
|
||||
<v-row>
|
||||
<v-col cols="12" md="7" sm="12" xs="12" class="mt-5">
|
||||
<search-component-left></search-component-left>
|
||||
</v-col>
|
||||
<v-col cols="12" md="5" sm="12" xs="12" class="mt-5">
|
||||
<search-component-right></search-component-right>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="7" sm="12" xs="12" class="mt-1">
|
||||
<list-verif-left-component></list-verif-left-component>
|
||||
</v-col>
|
||||
<v-col cols="12" md="5" sm="12" xs="12" class="mt-1">
|
||||
<list-verif-right-component></list-verif-right-component>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-main>
|
||||
</v-app>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
<script type="module">
|
||||
import NavbarComponent from "../../globalcomponent/one-navbar.vue";
|
||||
import listVerifLeftComponent from "./verificationLeftList.vue";
|
||||
import searchComponentLeft from "./searchVerificationtLeft.vue";
|
||||
import searchComponentRight from "./searchVerificationRight.vue";
|
||||
import listVerifRightComponent from "./verificationRightList.vue";
|
||||
export default {
|
||||
name: "MainVerif",
|
||||
components: {
|
||||
"one-navbar": NavbarComponent,
|
||||
"search-component-left": searchComponentLeft,
|
||||
"search-component-right": searchComponentRight,
|
||||
"list-verif-left-component": listVerifLeftComponent,
|
||||
"list-verif-right-component": listVerifRightComponent
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
wacth: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container class="bg-white rounded-lg" fluid>
|
||||
<v-row class="pa-0">
|
||||
<v-col cols="4" class="pl-0">
|
||||
<v-autocomplete :label="$t('message.search.resultcollection')" variant="outlined" hide-details
|
||||
menu-icon="mdi-chevron-down"
|
||||
:items="['Semua', 'Ambil Sendiri', 'dikirim WA', 'Dari kurir']"></v-autocomplete>
|
||||
</v-col>
|
||||
<v-col cols="7" class="pl-0">
|
||||
<v-text-field :label="$t('message.search.noreg')" variant="outlined" hide-details
|
||||
append-inner-icon="mdi-magnify"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="1" class="pl-0 pr-2">
|
||||
<v-btn variant="flat" small style="height: 100%;" class="bg-primary rounded-lg" v-if="btn_hide === false">
|
||||
<iconify-icon style="font-size: 2rem;" icon="fluent:send-20-regular" @click="doSend"></iconify-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
<script type="module">
|
||||
export default {
|
||||
name: "SearchVerificationRight",
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
btn_hide: {
|
||||
get() {
|
||||
return this.$store.state.verification.btn_hide
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("verification/update_btn_hide", val)
|
||||
}
|
||||
},
|
||||
selected_transaction() {
|
||||
// Akses selected_transaction dari Vuex atau beri nilai default
|
||||
return this.$store.state.verification.selected_transaction || [];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doSend() {
|
||||
this.btn_hide = true;
|
||||
|
||||
// Filter untuk mendapatkan item yang dipilih berdasarkan nilai 'chex'
|
||||
const selectedItems = this.selected_transaction
|
||||
// Periksa jika ada item yang dipilih
|
||||
if (selectedItems.length > 0) {
|
||||
console.log({
|
||||
selected: selectedItems // Daftar item yang dipilih
|
||||
});
|
||||
} else {
|
||||
console.log("Tidak ada item yang dipilih");
|
||||
}
|
||||
|
||||
this.btn_hide = false;
|
||||
}
|
||||
},
|
||||
wacth: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container class="bg-white rounded-lg" fluid>
|
||||
<v-row>
|
||||
<v-col cols="3">
|
||||
<v-autocomplete :label="$t('message.search.resulttype')" variant="outlined" hide-details
|
||||
menu-icon="mdi-chevron-down" :items="resulttype"></v-autocomplete>
|
||||
</v-col>
|
||||
<v-col cols="3">
|
||||
<v-autocomplete :label="$t('message.search.examination')" variant="outlined" hide-details
|
||||
menu-icon="mdi-chevron-down"
|
||||
:items="['Ultrasonografi', 'Biopsi', 'Spirometri', 'CT Scan (Computed Tomography)', 'Rontgen (X-ray)', 'Endoskopi']"></v-autocomplete>
|
||||
</v-col>
|
||||
<v-col cols="2.5">
|
||||
<v-text-field :label="$t('message.search.noreg')" variant="outlined" hide-details
|
||||
append-inner-icon="mdi-magnify"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="2.5">
|
||||
<v-autocomplete :label="$t('message.search.status')" variant="outlined" hide-details
|
||||
menu-icon="mdi-chevron-down" :items="['belum verifikasi', 'sudah verifikasi',]"></v-autocomplete>
|
||||
</v-col>
|
||||
<v-col cols="1">
|
||||
<v-btn variant="flat" small style="height: 100%;" class="bg-primary rounded-lg">
|
||||
<iconify-icon style="font-size: 2rem;" icon="fluent:search-20-regular"></iconify-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
<script type="module">
|
||||
export default {
|
||||
name: "SearchVerificationLeft",
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
resulttype() {
|
||||
return this.$store.state.verification.result_type;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
wacth: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container class="bg-white rounded-lg" fluid>
|
||||
|
||||
<v-data-table :headers="headers" :items="xpatients" return-object hide-default-footer class="row-pointer">
|
||||
<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 v-bind:class="{ 'bg-primary-lighten': isSelected(item) }" @click="selectMe(item)">
|
||||
<td class="text-center">
|
||||
<div>
|
||||
<p class="mt-2 mb-2">{{ item.ordernumber }}</p>
|
||||
<p class="mb-2">
|
||||
<v-chip label size="small">
|
||||
{{ item.orderdate }}
|
||||
</v-chip>
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td >
|
||||
<p>{{ item.patient_fullname }}</p>
|
||||
</td>
|
||||
<td >
|
||||
<p class="font-weight-medium">{{ item.test_name }}</p>
|
||||
</td>
|
||||
<td class="text-center" >
|
||||
<div class="d-flex justify-center">
|
||||
<div :dark="item.validation_old != 'Y'"
|
||||
class="pointer bg-error-lighten rounded-lg"
|
||||
style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;">
|
||||
<iconify-icon class="text-error" style="font-size: 1.5rem;"
|
||||
icon="fluent:dismiss-24-regular"></iconify-icon>
|
||||
</div>
|
||||
<div :disabled="item.validation == 'Y'"
|
||||
class="pointer bg-success-lighten rounded-lg ml-2"
|
||||
style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;">
|
||||
<iconify-icon class="text-success" style="font-size: 1.5rem;"
|
||||
icon="fluent:checkmark-24-regular"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.row-pointer>>>tbody tr :hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="module">
|
||||
export default {
|
||||
name: "verificationLeftList",
|
||||
data() {
|
||||
return {
|
||||
headers: [
|
||||
{
|
||||
align: 'center',
|
||||
key: 'name',
|
||||
sortable: false,
|
||||
width: "10%",
|
||||
title: this.$t('message.tableListPatient.noreg'),
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
key: 'name',
|
||||
sortable: false,
|
||||
width: "40%",
|
||||
title: this.$t('message.tableListPatient.name'),
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
key: 'name',
|
||||
sortable: false,
|
||||
width: "45%",
|
||||
title: this.$t('message.tableListPatient.examination'),
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
key: 'validasi',
|
||||
sortable: false,
|
||||
width: "5%",
|
||||
title: this.$t('message.tableListPatient.verification'),
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
xpatients() {
|
||||
return this.$store.state.verification.patients
|
||||
},
|
||||
selected_patient: {
|
||||
get() {
|
||||
return this.$store.state.verification.selected_patient
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("verification/setSelectedPatient", val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isSelected(p) {
|
||||
return p.trx_id == this.$store.state.verification.selected_patient.trx_id
|
||||
},
|
||||
selectMe(data) {
|
||||
this.$store.commit("verification/setSelectedPatient", data)
|
||||
}
|
||||
},
|
||||
wacth: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container class="bg-white rounded-lg" fluid>
|
||||
<v-data-table :headers="headers" :items="xdetails" return-object hide-default-footer class="pt-5">
|
||||
<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>
|
||||
<td class="text-center">
|
||||
<v-checkbox v-model="item.chex" @change="selectMe()" />
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<div>
|
||||
<p class="mt-2 mb-2">{{ item.ordernumber }}</p>
|
||||
<p class="mb-2">
|
||||
<v-chip label size="small">
|
||||
{{ item.orderdate }}
|
||||
</v-chip>
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<p class="font-weight-medium">{{ item.patient_fullname }}</p>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<p class="mt-2 mb-2">{{ item.group_name }}</p>
|
||||
<p class="mb-2">
|
||||
<v-chip label size="small">
|
||||
{{ item.delivery }}
|
||||
</v-chip>
|
||||
</p>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<p>{{ item.test_name }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.v-table .v-table__wrapper>table>tbody>tr:not(:last-child)>td,
|
||||
.v-table .v-table__wrapper>table>tbody>tr:not(:last-child)>th,
|
||||
.v-table .v-table__wrapper>table>thead>tr>th {
|
||||
border-bottom: dashed 1px #EEEEEE;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="module">
|
||||
export default {
|
||||
name: "verificationRightList",
|
||||
data() {
|
||||
return {
|
||||
menu: false,
|
||||
headers: [
|
||||
{
|
||||
align: 'center',
|
||||
key: 'select',
|
||||
sortable: false,
|
||||
width: "5%",
|
||||
title: "", // kolom untuk checkbox
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
key: 'noreg',
|
||||
sortable: false,
|
||||
width: "25%",
|
||||
title: this.$t('message.tableDetailPatient.noreg'),
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
key: 'name',
|
||||
sortable: false,
|
||||
width: "25%",
|
||||
title: this.$t('message.tableDetailPatient.name'),
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
key: 'group',
|
||||
sortable: false,
|
||||
width: "25%",
|
||||
title: this.$t('message.tableDetailPatient.group'),
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
key: 'examination',
|
||||
sortable: false,
|
||||
width: "25%",
|
||||
title: this.$t('message.tableDetailPatient.examination'),
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
xdetails() {
|
||||
return this.$store.state.verification.details
|
||||
},
|
||||
btn_hide: {
|
||||
get() {
|
||||
return this.$store.state.verification.btn_hide
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("verification/update_btn_hide", val)
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
selectMe() {
|
||||
this.btn_hide = true
|
||||
// Ambil item yang dipilih
|
||||
var selectedItems = this.xdetails.filter(item => item.chex);
|
||||
console.log("Selected items:", selectedItems);
|
||||
if (selectedItems.length > 0) {
|
||||
this.btn_hide = false
|
||||
}
|
||||
|
||||
// Kirim data yang dipilih ke store
|
||||
this.$store.commit("verification/setSelectedTransaction", selectedItems);
|
||||
}
|
||||
},
|
||||
wacth: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user