andy/westone-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New Feature menu Radiodiagnostik verifikasi Hasil

Browse Source
This commit is contained in:
Stephen
2024-11-13 16:58:31 +07:00
parent 0f7bf12ef0
commit 4cdfc00116
8 changed files with 867 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
result-verification-radiodiagnostik/components/mainVerif.vue Normal file
View 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>

70
result-verification-radiodiagnostik/components/searchVerificationRight.vue Normal file
View File

@@ -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>

54
result-verification-radiodiagnostik/components/searchVerificationtLeft.vue Normal file
View File

@@ -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>

129
result-verification-radiodiagnostik/components/verificationLeftList.vue Normal file
View File

@@ -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>

143
result-verification-radiodiagnostik/components/verificationRightList.vue Normal file
View File

@@ -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>

116
result-verification-radiodiagnostik/index.html Normal file
View File

@@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WESTONE</title>
<!-- Vuetify CSS -->
<link href="../css/vuetify.css" rel="stylesheet" />
<!-- Local Stylesheet for Fonts -->
<link rel="stylesheet" href="../css/styles.css" />
<link href="../css/materialdesignicon.css" rel="stylesheet" />
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
</head>
<body>
<div id="app"></div>
<!-- Moment -->
<script src="../libraries/moment.js"></script>
<!-- Vue.js -->
<!-- DEV -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- PROD -->
<!-- <script src="../libraries/vue3.4.36.global.prod.js"></script> -->
<!-- Vuex -->
<script src="../libraries/vuex.js"></script>
<!-- Vuetify -->
<script src="../libraries/vuetify3.js"></script>
<!-- vue-i18n -->
<script src="../libraries/vue-i18n.global.js"></script>
<!-- Axios -->
<script src="../libraries/axios.js"></script>
<script src="../globalscript/theme.js"></script>
<!-- loader single file component -->
<script src="../libraries/vue3-sfc-loader.js"></script>
<script src="./language.js"></script>
<script type="module">
const { loadModule } = window["vue3-sfc-loader"];
import verification from "./modules/verification.js";
import system from "../globalstore/globalstore.js";
const store = Vuex.createStore({
modules: {
system: system,
verification: verification,
},
});
const options = {
moduleCache: {
vue: Vue,
},
getFile(url) {
return fetch(url).then((response) =>
response.ok ? response.text() : Promise.reject(response)
);
},
addStyle(textContent) {
const style = document.createElement("style");
style.textContent = textContent;
const ref = document.head.getElementsByTagName("style")[0] || null;
document.head.insertBefore(style, ref);
},
};
// Locale messages
const messages = CustomMessages;
// Get the browser's preferred language
const browserLocale = navigator.language || navigator.languages[0];
// Initialize vue-i18n
const i18n = VueI18n.createI18n({
locale: browserLocale.startsWith("id") ? "id" : "en", // Set locale based on browser setting
fallbackLocale: "en", // Set fallback locale
messages, // Set locale messages
});
// Vue App
const app = Vue.createApp({
data() {
return {};
},
template: `
<main-verif-component></main-verif-component>
`,
});
const vuetify = Vuetify.createVuetify({
theme: {
themes: CustomTheme,
},
});
app.use(store);
app.use(vuetify);
app.use(i18n);
const components = {
"main-verif-component": "./components/mainVerif.vue",
};
Promise.all(
Object.entries(components).map(([name, path]) => {
return loadModule(path, options).then((component) => {
app.component(name, component);
});
})
)
.then(() => {
app.mount("#app");
})
.catch((error) => {
console.error("Error loading components:", error);
});
</script>
</body>
</html>

51
result-verification-radiodiagnostik/language.js Normal file
View File

@@ -0,0 +1,51 @@
var CustomMessages = {
en: {
message: {
search: {
resulttype: "Result Type",
examination:"Examination",
noreg: "No. Reg / Name",
status: "Status",
resultcollection: "Result Collection",
},
toolbalTitle: "PATIENT",
tableListPatient: {
noreg: "NO. REG",
name: "NAME",
examination: "EXAMINATION",
verification: "VERIFICATION",
},
tableDetailPatient: {
noreg: "NO. REG",
name: "NAMA",
group: "GROUP",
examination: "EXAMINATION"
}
},
},
id: {
message: {
search: {
resulttype: "Tipe Hasil",
examination:"Pemeriksaan",
noreg: "No. Reg / Nama",
status: "Status",
resultcollection: "Pengambilan Hasil",
},
toolbalTitle: "PASIEN",
tableListPatient: {
noreg: "NO. REG",
name: "NAMA",
examination: "PEMERIKSAAN",
verification: "VERIFIKASI",
},
tableDetailPatient: {
noreg: "NO. REG",
name: "NAMA",
group:"GROUP",
examination: "PEMERIKSAAN"
}
},
},
};

242
result-verification-radiodiagnostik/modules/verification.js Normal file
View File

@@ -0,0 +1,242 @@
const store = {
namespaced: true,
state() {
return {
startdateleft: new Date(),
enddateleft: new Date(),
patients: [
{
"trx_id": "29144",
"status_val2": "N",
"orderid": "130716",
"ids": "1587254",
"status": "X",
"ordernumber": "02300010DB",
"ordernumber_ext": "023M4M36DB",
"patient_fullname": "NY SAFINA",
"sexname": "PEREMPUAN.",
"orderdate": "30-11-2021 11:35",
"dob": "19-03-1947",
"umur": "74 TAHUN 8 BULAN 11 HARI",
"languange_name": "Bahasa Indonesia",
"test_name": "Thorax PA (CR)",
"details": "",
"verifications": [
{
"id": "1",
"xid": "0",
"chex": false,
"note": "",
"label": "Hasil , image, dan amplop belum sesuai"
}
],
"iscito": "N",
"type": "xray"
},
{
"trx_id": "29165",
"status_val2": "N",
"orderid": "130806",
"ids": "1589374",
"status": "X",
"ordernumber": "02900018DB",
"ordernumber_ext": "029G4P36DB",
"patient_fullname": "TN NANANG RUDY U",
"sexname": "LAKI - LAKI ",
"orderdate": "28-05-2022 11:08",
"dob": "06-05-1979",
"umur": "43 TAHUN 0 BULAN 22 HARI",
"languange_name": "Bahasa Indonesia",
"test_name": "Thorax PA (CR)",
"details": "",
"verifications": [
{
"id": "1",
"xid": "0",
"chex": false,
"note": "",
"label": "Hasil , image, dan amplop belum sesuai"
}
],
"iscito": "N",
"type": "xray"
},
{
"trx_id": "29340",
"status_val2": "N",
"orderid": "131898",
"ids": "1618084",
"status": "X",
"ordernumber": "04700009LA",
"ordernumber_ext": "047U9S92LA",
"patient_fullname": "TN ALBINUS SUIPNO",
"sexname": "LAKI - LAKI ",
"orderdate": "02-11-2023 08:26",
"dob": "04-02-1990",
"umur": "33 TAHUN 8 BULAN 28 HARI",
"languange_name": "Bahasa Indonesia",
"test_name": "Thorax PA (CR)",
"details": "",
"verifications": [
{
"id": "1",
"xid": "0",
"chex": false,
"note": "",
"label": "Hasil , image, dan amplop belum sesuai"
}
],
"iscito": "N",
"type": "xray"
},
{
"trx_id": "29421",
"status_val2": "N",
"orderid": "132157",
"ids": "1622402",
"status": "X",
"ordernumber": "05300003LA",
"ordernumber_ext": "053N4G33LA",
"patient_fullname": "SDRI YACOBA",
"sexname": "PEREMPUAN.",
"orderdate": "03-05-2024 11:04",
"dob": "27-05-1950",
"umur": "73 TAHUN 11 BULAN 6 HARI",
"languange_name": "Bahasa Indonesia",
"test_name": "Thorax PA (CR)",
"details": "",
"verifications": [
{
"id": "1",
"xid": "0",
"chex": false,
"note": "",
"label": "Hasil , image, dan amplop belum sesuai"
}
],
"iscito": "N",
"type": "xray"
},
],
result_type: [
"Ultrasonografi", "Biopsi", "Spirometri", "Rontgen (X-ray)"
],
selected_patient: {},
selected_transaction: [],
btn_hide: true,
details: [
{
"xid": "31",
"ids": "411",
"deliveries_id": "24^1^1",
"deliveries_name": "Ambil Sendiri",
"patient_fullname": "Mr COBA",
"orderdate": "09-09-2020 17:23",
"promise_datetime": "10-09-2020 13:00",
"orderid": "13",
"ordernumber": "00900013LA",
"ordernumber_ext": "009P8M39LA",
"group_id": "4",
"group_name": "Rontgen",
"delivery": "Ambil Sendiri",
"chex": false,
"test_name": "Thorax PA (CR)",
"test_id": "2146",
"group_flag_test": "N",
"promise_id": "39"
},
{
"xid": "31",
"ids": "411",
"deliveries_id": "25^3^3",
"deliveries_name": "Email Pasien",
"patient_fullname": "Mr COBA",
"orderdate": "09-09-2020 17:23",
"promise_datetime": "10-09-2020 13:00",
"orderid": "13",
"ordernumber": "00900013LA",
"ordernumber_ext": "009P8M39LA",
"group_id": "4",
"group_name": "Rontgen",
"delivery": "Email Pasien",
"chex": false,
"test_name": "Thorax PA (CR)",
"test_id": "2146",
"group_flag_test": "N",
"promise_id": "39"
},
{
"xid": "31",
"ids": "411",
"deliveries_id": "26^4^6",
"deliveries_name": "Whatsapp Pasien",
"patient_fullname": "Mr COBA",
"orderdate": "09-09-2020 17:23",
"promise_datetime": "10-09-2020 13:00",
"orderid": "13",
"ordernumber": "00900013LA",
"ordernumber_ext": "009P8M39LA",
"group_id": "4",
"group_name": "Rontgen",
"delivery": "Whatsapp Pasien",
"chex": false,
"test_name": "Thorax PA (CR)",
"test_id": "2146",
"group_flag_test": "N",
"promise_id": "39"
},
{
"xid": "35312",
"ids": "1628590",
"deliveries_id": "180534^2^2",
"deliveries_name": "Alamat Pasien",
"patient_fullname": "Tn COCOBA / 654545",
"orderdate": "11-09-2024 15:08",
"promise_datetime": "11-09-2024 20:30",
"orderid": "132338",
"ordernumber": "05700053LA",
"ordernumber_ext": "057N9U96LA",
"group_id": "6",
"group_name": "USG",
"delivery": "Alamat Pasien",
"chex": false,
"test_name": "USG Leher",
"test_id": "2915",
"group_flag_test": "Y",
"promise_id": "226948"
}
]
};
},
mutations: {
setStartDateLeft(state, data) {
state.startdateleftdate = data;
},
setEndDateLeft(state, data) {
state.enddateleft = data;
},
setPatients(state, data) {
state.patients = data
},
setSelectedPatient(state, data) {
state.selected_patient = data
},
setSelectedTransaction(state, data) {
state.selected_transaction = data
},
setDetails(state, data) {
state.details = data
},
setResultTypes(state, data) {
state.result_type = data
},
update_btn_hide(state, val) {
state.btn_hide = val
},
},
actions: {
}
};
export default store