Files
FE_CPONE/test/vuex/one-sampling-handling/components/oneSamplingHandlingVerify.vue
2026-04-27 10:13:31 +07:00

431 lines
18 KiB
Vue

<template>
<v-layout class="fill-height" column>
<v-card class="grow">
<v-layout column ma-3>
<v-flex xs12>
<h3 class="title mb-2">INFORMASI SPECIMEN :</h3>
</v-flex>
<v-flex xs12>
<v-layout row>
<v-flex xs4>
<v-text-field
label="Durasi Sampling"
outline
v-model="duration_sampling"
readonly
hide-details
></v-text-field>
</v-flex>
<v-flex xs8 ml-2>
<v-text-field
label="Petugas Sampling"
outline
v-model="user_sampling"
readonly
hide-details
></v-text-field>
</v-flex>
</v-layout>
</v-flex>
<v-flex xs12 mt-1>
<v-layout row>
<v-flex xs6>
<v-text-field
label="Petugas Verifikasi"
outline
v-model="user_verification"
readonly
hide-details
></v-text-field>
</v-flex>
<v-flex xs6 ml-2>
<v-text-field
label="Catatan Verifikasi"
outline
v-model="verification_note"
readonly
hide-details
></v-text-field>
</v-flex>
</v-layout>
</v-flex>
<v-divider class="mb-0 mt-2"></v-divider>
<v-flex xs12>
<v-layout row wrap v-show="verification_show">
<v-flex xs12 pt-2>
<v-card color="blue lighten-3 white--text" outlined flat v-show="true">
<v-card-text class="pt-2 pb-2">
<v-layout row wrap>
<v-flex xs6>
<p class="title mb-0 mt-2">Sampling Verification</p>
</v-flex>
<v-flex xs6 class="text-xs-right">
<v-btn
:color="req_status_handling == 'N' ? 'red' : 'white'"
:dark="req_status_handling == 'N'"
class="one-btn-icon mr-1 ma-0" @click="req_handling_notok">
<v-icon>clear</v-icon>
</v-btn>
<v-btn
:color="req_status_handling == 'Y' ? 'green' : 'white'" class="one-btn-icon ma-0" @click="req_handling_ok"
:dark="req_status_handling == 'Y'">
<v-icon>done</v-icon>
</v-btn>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
<v-card v-if="false">
<v-card-text class="pb-2 pt-2">
<v-layout row wrap>
<v-flex v-bind:class="this.reqs_handling.length <= 5 ? 'xs12' : 'xs6'">
<v-layout row wrap>
<v-flex xs12 v-for="(req, i) in reqs_odd_handling" v-bind:key="i">
<v-checkbox :label="req.req_name" :value="req.req_id"
hide-details
class="mt-2"></v-checkbox>
</v-flex>
</v-layout>
</v-flex>
<v-flex xs6 v-if="this.reqs_handling.length > 5">
<v-layout row wrap>
<v-flex xs12 v-for="(req, i) in reqs_even_handling" v-bind:key="i">
<v-checkbox :label="req.req_name" :value="req.req_id"
hide-details
class="mt-2"></v-checkbox>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12 pt-4>
<v-textarea
auto-grow
label="Catatan"
rows="3"
outline
></v-textarea>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
<v-card v-if="true">
<v-card-text class="pb-2 pt-2">
<v-btn :color="selected_reqs_handling.indexOf(req.req_id) > -1 ? 'red' : 'black'" outline flat depressed small dark
v-for="(req, i) in reqs_handling" v-bind:key="i"
class="mt-1 mr-1 ma-0">
{{ req.req_name }}
</v-btn>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row wrap v-show="verification_show">
<v-flex xs12 pt-2>
<v-card color="blue lighten-3 white--text" outlined flat v-show="true">
<v-card-text class="pt-2 pb-2">
<v-layout row wrap>
<v-flex xs6>
<p class="title mb-0 mt-2">Pre Analitik</p>
</v-flex>
<v-flex xs6 class="text-xs-right">
<v-btn
:color="req_status_process == 'N' ? 'red' : 'white'"
:dark="req_status_process == 'N'"
class="one-btn-icon mr-1 ma-0" @click="req_process_notok">
<v-icon>clear</v-icon>
</v-btn>
<v-btn
:color="req_status_process == 'Y' ? 'green' : 'white'"
class="one-btn-icon ma-0" @click="req_process_ok"
:dark="req_status_process == 'Y'">
<v-icon>done</v-icon>
</v-btn>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
<v-card v-if="true">
<v-card-text class="pb-2 pt-2">
<v-btn :color="selected_reqs_process.indexOf(req.req_id) > -1 ? 'red' : 'black'" outline flat depressed small dark
v-for="(req, i) in reqs_process" v-bind:key="i"
class="mt-1 mr-1 ma-0">
{{ req.req_name }}
</v-btn>
</v-card-text>
</v-card>
<v-card v-if="false">
<v-card-text class="pb-2 pt-2">
<v-layout row wrap>
<v-flex v-bind:class="this.reqs_process.length <= 5 ? 'xs12' : 'xs6'">
<v-layout row wrap>
<v-flex xs12 v-for="(req, i) in reqs_odd_process" v-bind:key="i">
<v-checkbox :label="req.req_name" :value="req.req_id"
hide-details
class="mt-2"></v-checkbox>
</v-flex>
</v-layout>
</v-flex>
<v-flex xs6 v-if="this.reqs_process.length > 5">
<v-layout row wrap>
<v-flex xs12 v-for="(req, i) in reqs_even_process" v-bind:key="i">
<v-checkbox :label="req.req_name" :value="req.req_id"
hide-details
class="mt-2"></v-checkbox>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12 pt-4>
<v-textarea
auto-grow
label="Catatan"
rows="3"
outline
></v-textarea>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row wrap v-show="verification_show">
<v-flex xs12 pt-2>
<v-card color="blue lighten-3 white--text" outlined flat v-show="true">
<v-card-text class="pt-2 pb-2">
<v-layout row wrap>
<v-flex xs12 class="text-xs-right">
<v-btn color="red"
:dark="btn_process_enabled"
class="mr-1 ma-0"
@click="reject"
:disabled="!btn_process_enabled">
REJECT
</v-btn>
<v-btn color="green" class="ma-0"
:dark="btn_process_enabled"
@click="verify"
:disabled="!btn_process_enabled">
PROSES
</v-btn>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-card>
</v-layout>
</template>
<script>
module.exports = {
components : {
'one-field-verification' : httpVueLoader('./../../common/oneFieldVerification.vue')
},
computed : {
data () {
let x = this.$store.state.handling_patient.selected_patient.data
if (typeof x == "undefined")
return {clott_checked:false,lipemik_checked:false,lisis_checked:false,
clott_note:"",lipemik_note:"",lisis_note:""}
x.clott_checked = x.clott == "Y" ? true : false
x.lipemik_checked = x.lipemik == "Y" ? true : false
x.lisis_checked = x.lisis == "Y" ? true : false
return x
},
patient () {
return this.$store.state.handling_patient.selected_patient
},
user_sampling () {
let x = this.$store.state.handling_patient.selected_patient
if (typeof x.user_sampling == "undefined")
return '-'
return 'Sampling : ' + x.user_sampling + ' / Receive : ' + x.user_receive
},
duration_sampling () {
let x = this.$store.state.handling_patient.selected_patient
if (typeof x.sampling_duration == "undefined")
return '0'
return Math.round(moment.duration(x.sampling_duration).asMinutes()) + ' menit'
},
user_verification () {
let x = this.$store.state.handling_patient.selected_patient
if (typeof x.user_verification == "undefined")
return '-'
return x.user_verification
},
verification_note () {
let x = this.$store.state.handling_patient.selected_patient
if (typeof x.verification_note == "undefined")
return '-'
return x.verification_note
},
note : {
get () {
let x = this.$store.state.handling_patient.selected_patient.data
if (typeof x == "undefined")
return ""
return x.note
},
set (v) {
this.$store.commit('handling_patient/update_verification_note', v)
}
},
verification_show : {
get () {
return this.$store.state.handling_patient.verification_show
},
set (v) {
this.$store.commit('handling_patient/update_verification_show', v)
}
},
reqs_handling () {
return this.$store.state.handling_patient.reqs
},
reqs_process () {
return this.$store.state.handling_process_patient.reqs
},
req_status_handling () {
return this.$store.state.handling_patient.req_status
},
req_status_process () {
return this.$store.state.handling_process_patient.req_status
},
selected_reqs_handling () {
return this.$store.state.handling_patient.selected_reqs
},
selected_reqs_process () {
return this.$store.state.handling_process_patient.selected_reqs
},
reqs_odd_handling () {
if (!this.reqs_handling) return []
if (this.reqs_handling.length <= 5) return this.reqs_handling
if (this.reqs_handling <= 10) return this.reqs_handling.slice(0,4)
let x = Math.ceil(this.reqs_handling.length / 2)
return this.reqs_handling.slice(0, x-1)
},
reqs_even_handling () {
if (!this.reqs_handling) return []
if (this.reqs_handling.length <= 5) return []
if (this.reqs_handling.length <= 10) return this.reqs_handling.slice(5, this.reqs_handling.length-1)
let x = Math.ceil(this.reqs_handling.length / 2)
return this.reqs_handling.slice(x, this.reqs_handling.length-1)
},
reqs_odd_process () {
if (!this.reqs_process) return []
if (this.reqs_process.length <= 5) return this.reqs_process
if (this.reqs_process <= 10) return this.reqs_process.slice(0,4)
let x = Math.ceil(this.reqs_process.length / 2)
return this.reqs_process.slice(0, x-1)
},
reqs_even_process () {
if (!this.reqs_process) return []
if (this.reqs_process.length <= 5) return []
if (this.reqs_process.length <= 10) return this.reqs_process.slice(5, this.reqs_process.length-1)
let x = Math.ceil(this.reqs_process.length / 2)
return this.reqs_process.slice(x, this.reqs_process.length-1)
},
btn_process_enabled () {
if (this.req_status_handling == 'X' || this.req_status_process == 'X')
return false
return true
}
},
methods : {
req_handling_ok () {
this.$store.commit('handling_patient/update_req_status', {req_status:'Y', reqs:this.reqs_handling})
this.$store.commit('handling_patient/update_selected_reqs', [])
},
req_handling_notok () {
this.$store.commit('handling_patient/update_dialog_requirement', true)
},
req_process_ok () {
this.$store.commit('handling_process_patient/update_req_status', {req_status:'Y', reqs:this.reqs_process})
this.$store.commit('handling_process_patient/update_selected_reqs', [])
},
req_process_notok () {
this.$store.commit('handling_process_patient/update_dialog_requirement', true)
},
verify () {
this.$store.dispatch('handling_patient/verify')
},
reject () {
this.$store.dispatch('handling_patient/reject')
}
}
}
</script>