488 lines
22 KiB
Vue
488 lines
22 KiB
Vue
<template>
|
|
<v-layout v-if="sampletype" class="mb-2 mt-2" column >
|
|
<v-dialog v-model="xdialogdelete" persistent max-width="290">
|
|
<v-card>
|
|
<v-card-title
|
|
dark
|
|
class="headline error pt-2 pb-2"
|
|
primary-title
|
|
style="color:white"
|
|
>
|
|
<h4 dark>Peringatan !</h4>
|
|
</v-card-title>
|
|
<v-card-text v-html="xmsgdelete">
|
|
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn small color="error darken-1 text-sm-left" flat @click="doDeletePhoto()">Hapus</v-btn>
|
|
<v-btn small color="primary darken-1 text-sm-right" flat @click="xdialogdelete = false">Batal</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
<v-dialog v-model="xdialogaction" persistent max-width="350">
|
|
<v-card>
|
|
<v-card-title color="warning" class="headline">Konfirmasi</v-card-title>
|
|
<v-card-text v-html="xmsgaction">
|
|
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="primary darken-1" flat @click="closeDialogAction()">OK</v-btn>
|
|
<v-btn color="error darken-1" flat @click="xdialogaction = false">Tutup</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
<v-dialog v-model="xdialogimage" persistent max-width="650" max-height="500">
|
|
<v-card color="amber lighten-5">
|
|
<v-container grid-list-sm fluid>
|
|
<v-layout row wrap>
|
|
<v-flex>
|
|
<v-card flat tile class="d-flex">
|
|
<v-img
|
|
:src="ximage"
|
|
aspect-ratio="1"
|
|
class="grey lighten-2"
|
|
>
|
|
<template v-slot:placeholder>
|
|
<v-layout
|
|
fill-height
|
|
align-center
|
|
justify-center
|
|
ma-0
|
|
>
|
|
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
|
|
</v-layout>
|
|
</template>
|
|
</v-img>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
<v-card-actions>
|
|
<v-btn color="error darken-1" v-if="sampletype.status !== 'V'" @click="deleteImage()">Hapus</v-btn>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="black" dark @click="xdialogimage = false">Tutup</v-btn>
|
|
</v-card-actions>
|
|
<v-card>
|
|
</v-dialog>
|
|
<v-card v-if="sampletype">
|
|
<v-layout row>
|
|
<v-flex xs12>
|
|
<v-subheader>
|
|
<span class="font-weight-black">LEGENDA : </span>
|
|
<v-btn depressed color="warning"><v-icon left>alarm</v-icon> Waktu Proses </v-btn>
|
|
<v-btn depressed color="success"><v-icon left>alarm</v-icon> Waktu Selesai </v-btn>
|
|
<v-btn depressed color="primary"><v-icon left>alarm_on</v-icon> Waktu Verifikasi </v-btn>
|
|
</v-subheader>
|
|
<v-divider></v-divider>
|
|
<v-layout pa-2 row wrap>
|
|
<v-flex md6 mb-2>
|
|
<v-layout>
|
|
<v-flex xs12>
|
|
<v-card style="border:1px solid black" flat class="text">
|
|
<v-layout pa-1>
|
|
<v-flex xs4>
|
|
<v-img
|
|
src="/one-ui/libs/image/body.jpg"
|
|
height="125px"
|
|
contain
|
|
></v-img>
|
|
</v-flex>
|
|
<v-flex xs8>
|
|
<v-card-title style="padding-top:0">
|
|
<div>
|
|
<div style="font-size:large" class="font-weight-light font-condensed pl-2">{{sampletype.T_SampleTypeName}}</div>
|
|
<div>
|
|
<v-btn block depressed color="warning"><v-icon left>alarm</v-icon>{{sampletype.process_date}} {{sampletype.process_time}}</v-btn>
|
|
<v-btn block depressed color="success"><v-icon left>alarm</v-icon>{{sampletype.done_date}} {{sampletype.done_time}}</v-btn>
|
|
</div>
|
|
</div>
|
|
</v-card-title>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-divider></v-divider>
|
|
<v-card-actions class="pt-2 pb-2">
|
|
<v-layout v-if="sampletype.status !== 'V'" row>
|
|
<v-flex pa-1 pl-3 xs6>
|
|
<v-btn block @click="reject(sampletype)" color="error">TOLAK</v-btn>
|
|
</v-flex>
|
|
<v-flex pa-1 pr-3 xs6>
|
|
<v-btn block @click="verify(sampletype)" color="primary">VERIFIKASI</v-btn>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout v-if="sampletype.status === 'V'" align-center row>
|
|
<v-flex xs7>
|
|
<!--<v-chip label color="primary" text-color="white">
|
|
<v-icon left>alarm_on</v-icon>{{sampletype.verify_date}} {{sampletype.verify_time}}
|
|
</v-chip>-->
|
|
<v-btn block depressed color="primary"><v-icon left>alarm_on</v-icon>{{sampletype.verify_date}} {{sampletype.verify_time}}</v-btn>
|
|
</v-flex>
|
|
<v-flex xs5>
|
|
<v-chip close label @click="unverify(sampletype)" color="red" text-color="white">
|
|
Batal Verifikasi
|
|
</v-chip>
|
|
<!--<v-btn block v-if="sampletype.status === 'V'" @click="unverify(sampletype)" color="error"><v-icon>lock_open</v-icon></v-btn>-->
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
<v-flex pl-2 v-if="sampletype.status !== 'V'" md6>
|
|
<form enctype="multipart/form-data" novalidate v-if="isInitial || isSaving">
|
|
|
|
<div class="dropbox">
|
|
<input type="file" multiple :name="uploadFieldName" :disabled="isSaving" @change="filesChange($event.target.name, $event.target.files); fileCount = $event.target.files.length"
|
|
accept="image/*" class="input-file">
|
|
<p v-if="isInitial">
|
|
Geret photo ke sini untuk memulai upload<br> atau klik untuk mencari
|
|
</p>
|
|
<p v-if="isSaving">
|
|
Sedang meng-upload {{ fileCount }} photo...
|
|
</p>
|
|
</div>
|
|
</form>
|
|
<div class="dropbox text-xs-center" v-if="isFailed">
|
|
<h2 style="color:#f44336">Photo gagal diupload !</h2>
|
|
<p>
|
|
<a href="javascript:void(0)" @click="reset()">Klik untuk upload lagi</a>
|
|
</p>
|
|
</div>
|
|
<div class="dropbox text-xs-center" v-if="isSuccess">
|
|
<h2>Photo berhasil diupload.</h2>
|
|
<p>
|
|
<a href="javascript:void(0)" @click="reset()">Klik untuk upload lagi</a>
|
|
</p>
|
|
</div>
|
|
</v-flex>
|
|
<v-flex pl-2 v-if="sampletype.status === 'V'" md6>
|
|
<div class="dropbox_verify">
|
|
<p>
|
|
fitur upload photo sudah tidak tersedia
|
|
</p>
|
|
<p><v-icon x-medium color="#fff">not_interested</v-icon></p>
|
|
</div>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-divider></v-divider>
|
|
<v-layout align-center justify-center row fill-height>
|
|
<v-flex xs12 pt-3 pb-3 sm8>
|
|
<v-card color="amber lighten-5">
|
|
<v-container grid-list-sm fluid>
|
|
<v-layout justify-center row v-if="xphotos.length === 0">
|
|
<h5>Belum ada photo yang diupload</h5>
|
|
</v-layout>
|
|
<v-layout row v-if="xphotos.length > 0" wrap>
|
|
<v-flex
|
|
v-for="photo in xphotos"
|
|
:key="photo.id"
|
|
pa-1
|
|
>
|
|
<v-card flat tile class="d-flex">
|
|
<v-img
|
|
:src="photo.newname"
|
|
aspect-ratio="1"
|
|
class="grey lighten-2"
|
|
@click="openImage(photo)"
|
|
>
|
|
<template v-slot:placeholder>
|
|
<v-layout
|
|
fill-height
|
|
align-center
|
|
justify-center
|
|
ma-0
|
|
>
|
|
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
|
|
</v-layout>
|
|
</template>
|
|
</v-img>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dropbox {
|
|
outline: 2px dashed grey; /* the dash box */
|
|
outline-offset: -10px;
|
|
background: lightcyan;
|
|
color: dimgray;
|
|
padding-top:45px;
|
|
height: 204px; /* minimum height */
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropbox_verify {
|
|
outline: 2px dashed #fff; /* the dash box */
|
|
outline-offset: -10px;
|
|
background: #382f2f;
|
|
color: #fff;
|
|
padding-top:45px;
|
|
height: 200px; /* minimum height */
|
|
position: relative;
|
|
cursor: pointer;
|
|
text-align:center;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.input-file {
|
|
opacity: 0; /* invisible but it's there! */
|
|
width: 100%;
|
|
height: 200px;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropbox:hover {
|
|
background: lightblue; /* when mouse over to the drop zone, change color */
|
|
}
|
|
|
|
.dropbox p {
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
padding: 50px 0;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
mounted() {
|
|
this.reset()
|
|
},
|
|
data: () => ({
|
|
uploadFieldName: 'photos[]',
|
|
fileCount:0,
|
|
weigthdiv:4,
|
|
chip2:true
|
|
}),
|
|
computed: {
|
|
sampletype(){
|
|
return this.$store.state.sample.selected_transaction
|
|
},
|
|
currentStatus:{
|
|
get() {
|
|
return this.$store.state.sample.current_status
|
|
},
|
|
set(val) {
|
|
this.$store.commit("sample/update_current_status",val)
|
|
}
|
|
},
|
|
uploadedFiles:{
|
|
get() {
|
|
return this.$store.state.sample.uploaded_files
|
|
},
|
|
set(val) {
|
|
this.$store.commit("sample/update_uploaded_files",val)
|
|
}
|
|
},
|
|
uploadError:{
|
|
get() {
|
|
return this.$store.state.sample.uploaded_error
|
|
},
|
|
set(val) {
|
|
this.$store.commit("sample/update_uploaded_error",val)
|
|
}
|
|
},
|
|
isInitial() {
|
|
return this.currentStatus === 'STATUS_INITIAL';
|
|
},
|
|
isSaving() {
|
|
return this.currentStatus === 'STATUS_SAVING';
|
|
},
|
|
isSuccess() {
|
|
return this.currentStatus === 'STATUS_SUCCESS';
|
|
},
|
|
isFailed() {
|
|
return this.currentStatus === 'STATUS_FAILED';
|
|
},
|
|
xdialogaction:{
|
|
get() {
|
|
return this.$store.state.sample.dialog_action
|
|
},
|
|
set(val) {
|
|
this.$store.commit("sample/update_dialog_action",val)
|
|
}
|
|
},
|
|
xmsgaction:{
|
|
get() {
|
|
return this.$store.state.sample.msg_action
|
|
},
|
|
set(val) {
|
|
this.$store.commit("sample/update_msg_action",val)
|
|
}
|
|
},
|
|
xphotos() {
|
|
return this.$store.state.sample.photos
|
|
},
|
|
xdialogimage:{
|
|
get() {
|
|
return this.$store.state.sample.dialog_image
|
|
},
|
|
set(val) {
|
|
this.$store.commit("sample/update_dialog_image",val)
|
|
}
|
|
},
|
|
ximage() {
|
|
return this.$store.state.sample.image
|
|
},
|
|
xdialogdelete:{
|
|
get() {
|
|
return this.$store.state.sample.dialog_confirmation_delete
|
|
},
|
|
set(val) {
|
|
this.$store.commit("sample/update_dialog_confirmation_delete",val)
|
|
}
|
|
},
|
|
xmsgdelete:{
|
|
get() {
|
|
return this.$store.state.sample.msg_confirmation_delete
|
|
},
|
|
set(val) {
|
|
this.$store.commit("sample/update_msg_confirmation_delete",val)
|
|
}
|
|
},
|
|
xdialoginfo:{
|
|
get() {
|
|
return this.$store.state.sample.open_dialog_info
|
|
},
|
|
set(val) {
|
|
this.$store.commit("sample/update_open_dialog_info",val)
|
|
}
|
|
},
|
|
xmsginfo:{
|
|
get() {
|
|
return this.$store.state.sample.msg_info
|
|
},
|
|
set(val) {
|
|
this.$store.commit("sample/update_msg_info",val)
|
|
}
|
|
},
|
|
showtooltip(){
|
|
if(this.$store.state.sample.selected_transaction.status === 'V'){
|
|
return true
|
|
}
|
|
else{
|
|
return false
|
|
}
|
|
}
|
|
},
|
|
methods : {
|
|
reset() {
|
|
console.log('reset')
|
|
this.currentStatus = 'STATUS_INITIAL';
|
|
this.uploadedFiles = [];
|
|
this.uploadError = null;
|
|
},
|
|
save(formData) {
|
|
this.currentStatus = 'STATUS_SAVING'
|
|
this.$store.dispatch("sample/upload",formData)
|
|
},
|
|
filesChange(fieldName, fileList) {
|
|
const formData = new FormData()
|
|
if (!fileList.length) return
|
|
Array
|
|
.from(Array(fileList.length).keys())
|
|
.map(x => {
|
|
formData.append(fieldName, fileList[x], fileList[x].name)
|
|
})
|
|
formData.append ('ordernumber', this.sampletype.T_OrderHeaderLabNumber)
|
|
formData.append ('orderid', this.sampletype.T_OrderHeaderID)
|
|
formData.append ('sampletype', this.sampletype.T_SampleTypeID)
|
|
formData.append ('token', one_token())
|
|
formData.append ('doctorid', this.$store.state.sample.selected_doctor.id)
|
|
formData.append ('doctoraddressid', this.$store.state.sample.selected_doctor_address.id)
|
|
this.save(formData);
|
|
},
|
|
closeDialogAction(){
|
|
var act = this.$store.state.sample.act
|
|
var statusnextid = 4
|
|
var trxs = this.$store.state.sample.transactions
|
|
var trx = this.$store.state.sample.selected_transaction
|
|
var idx = _.findIndex(trxs, item => item.T_OrderHeaderID === trx.T_OrderHeaderID && item.T_SampleTypeID === trx.T_SampleTypeID)
|
|
this.$store.dispatch("sample/doaction",{
|
|
act:act,
|
|
orderid:trx.T_OrderHeaderID,
|
|
sampleid:trx.T_SampleTypeID,
|
|
namelab:this.$store.state.sample.name_lab,
|
|
startdate:this.$store.state.sample.start_date,
|
|
enddate: this.$store.state.sample.end_date,
|
|
stationid:this.$store.state.sample.selected_station.id,
|
|
statusnextid : statusnextid,
|
|
doctor:this.$store.state.sample.selected_doctor,
|
|
doctoraddress:this.$store.state.sample.selected_doctor_address,
|
|
current_page:1,
|
|
lastid:idx
|
|
})
|
|
|
|
},
|
|
reject(value){
|
|
var msg = "Anda yakin akan menolak sample "+value.T_SampleTypeName+" dari pasien "+value.patient_fullname+" ? "
|
|
this.$store.commit("sample/update_msg_action",msg)
|
|
this.$store.commit("sample/update_act",'reject')
|
|
this.$store.commit("sample/update_dialog_action",true)
|
|
},
|
|
verify(value){
|
|
this.$store.commit("sample/update_errors",[])
|
|
var errors = this.$store.state.sample.errors
|
|
if(_.isEmpty(this.$store.state.sample.selected_doctor) || this.$store.state.sample.selected_doctor.name === null){
|
|
errors.push("requiredoctor")
|
|
}
|
|
if(_.isEmpty(this.$store.state.sample.selected_doctor_address)){
|
|
errors.push("requiredoctoraddress")
|
|
}
|
|
if(errors.length === 0){
|
|
var msg = "Anda yakin akan me-verifikasi sample "+value.T_SampleTypeName+" dari pasien "+value.patient_fullname+" ? "
|
|
this.$store.commit("sample/update_msg_action",msg)
|
|
this.$store.commit("sample/update_act",'verify')
|
|
this.$store.commit("sample/update_dialog_action",true)
|
|
}
|
|
},
|
|
unverify(value){
|
|
var msg = "Anda yakin akan membatalkan verifikasi "+value.T_SampleTypeName+" dari pasien "+value.patient_fullname+" ? "
|
|
this.$store.commit("sample/update_msg_action",msg)
|
|
this.$store.commit("sample/update_act",'unverify')
|
|
this.currentStatus === 'STATUS_INITIAL'
|
|
this.$store.commit("sample/update_dialog_action",true)
|
|
},
|
|
openImage(value){
|
|
this.$store.commit("sample/update_selected_photo",value)
|
|
this.$store.commit("sample/update_image",value.newname)
|
|
this.$store.commit("sample/update_dialog_image",true)
|
|
},
|
|
deleteImage(){
|
|
this.$store.commit("sample/update_dialog_image",false)
|
|
var msg = "<p>Yakin akan menghapus photo ?</p>"
|
|
this.$store.commit("sample/update_msg_confirmation_delete",msg)
|
|
this.$store.commit("sample/update_dialog_confirmation_delete",true)
|
|
},
|
|
doDeletePhoto(){
|
|
var id = this.$store.state.sample.selected_photo.id
|
|
var trxs = this.$store.state.sample.transactions
|
|
var trx = this.$store.state.sample.selected_transaction
|
|
var idx = _.findIndex(trxs, item => item.T_OrderHeaderID === trx.T_OrderHeaderID && item.T_SampleTypeID === trx.T_SampleTypeID)
|
|
this.$store.dispatch("sample/deletephoto",{
|
|
id:id,
|
|
orderid:trx.T_OrderHeaderID,
|
|
sampleid:trx.T_SampleTypeID,
|
|
namelab:this.$store.state.sample.name_lab,
|
|
startdate:this.$store.state.sample.start_date,
|
|
enddate: this.$store.state.sample.end_date,
|
|
stationid:this.$store.state.sample.selected_station.id,
|
|
lastid:idx
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|