Files
FE_CPONE/test/vuex/one-receive-reference-distribution-courier/components/oneReceiveReferenceDistributionCourierDetail.vue
2026-04-27 10:13:31 +07:00

638 lines
34 KiB
Vue

<template>
<v-layout class="mb-2" column>
<v-dialog v-model="dialogconfirmationdelete" persistent max-width="290">
<v-card>
<v-card-title dark class="headline error pt-2 pb-2" primary-title style="color:white">
<h4 dark>Konfirmasi</h4>
</v-card-title>
<v-card-text>
{{msgconfirmationdelete}}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn small color="error darken-1 text-sm-left" flat @click="doDeleteTrx()">Hapus</v-btn>
<v-btn small color="primary darken-1 text-sm-right" flat @click="dialogconfirmationdelete = 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()">Ya</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="dialogformpatient" persistent max-width="650">
<v-card>
<v-card-title>
<span class="headline">Daftar Pasien</span>
</v-card-title>
<v-card-text class="pt-0 pb-0">
<v-layout row wrap>
<v-flex xs12 pt-2 pb-1>
<table style="
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
border: 0px;
" class="px">
<tr>
<td style="border: 1px solid #fff;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;" class="blue lighten-3 white--text text-md-center pt-2 pb-2">NO LAB
</td>
<td style="border: 1px solid #fff;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;" class="blue lighten-3 white--text text-md-center pt-2 pb-2">PASIEN
</td>
<td style="border: 1px solid #fff;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;" class="blue lighten-3 white--text text-md-center pt-2 pb-2">JENIS KELAMIN
</td>
<td style=" border: 1px solid #fff;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;" class="blue lighten-3 white--text text-md-center pt-2 pb-2">DOB
</td>
<td style="border: 1px solid #fff;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;" class="blue lighten-3 white--text text-md-center pt-2 pb-2">SAMPEL
</td>
</tr>
<tr v-if="xordertests.length > 0" class="mini-input" v-for="(vpx,idx) in xordertests">
<td style="border: 1px solid #fff;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;
padding: 8px;" class="text-md-left pl-3">{{vpx.labnumberref}}</td>
<td style="border: 1px solid #fff;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;
padding: 8px;" class="text-md-left pr-2">{{vpx.patient_fullname}}</td>
<td style="border: 1px solid #fff;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;
padding: 8px;" class="text-md-left pr-2">{{vpx.M_SexName}}</td>
<td style="border: 1px solid #fff;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;
padding: 8px;" class="text-md-left pr-2">{{vpx.dob}}</td>
<td style="border: 1px solid #fff;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;
padding: 8px;" class="text-md-left pr-2">{{vpx.samplename}}</td>
</tr>
<tr v-if="xordertests.length === 0" class="mini-input">
<td style="border: 1px solid #fff;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;
padding: 8px;" align="center" colspan="6">Belum ada data</td>
</tr>
</table>
</v-flex>
</v-layout>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat @click="dialogformpatient = false">Tutup</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-layout row>
<v-flex xs12>
<v-card>
<v-subheader red--text text--lighten-1> FORM PENYERAHAN KURIR
<span v-if="xact !== 'new'"> &nbsp;[ <span style="color:#2196F3;font-weight: 900;">{{xnumbering}}</span> ]</span>
<span v-if="xact !== 'new' && currStatus === 'CREATED'">
<v-btn small @click="releaseToCourier()" color="warning">SERAHKAN KE KURIR</v-btn>
</span>
<!--
<span v-if="xact !== 'new' && currStatus === 'RELEASEC'">
<v-btn small @click="receiveCompany()" color="info">DITERIMA LAB PERUJUK</v-btn>
</span>
<span v-if="xact !== 'new' && currStatus === 'RCVDOC'">
<v-btn small @click="receiveFromCourier()" color="primary">TERIMA DARI KURIR</v-btn>
</span>
<span v-if="xact !== 'new' && currStatus === 'PARTDONE'">
<v-btn small @click="forceClose()" color="success">TUTUP TRANSAKSI MANUAL</v-btn>
</span>
-->
<v-flex text-md-right>
<v-btn v-if="xact !== 'new' && currStatus === 'CREATED'" @click="deleteTrx()" small color="error">Hapus</v-btn>
<v-btn v-if="( xact !== 'new' && currStatus === 'CREATED') || xact === 'new'" @click="saveTrx()" small color="primary">Simpan</v-btn>
</v-flex>
</v-subheader>
<v-divider></v-divider>
<v-layout class="pb-2" row wrap>
<v-flex xs12 pa-2>
<v-layout row>
<v-flex xs6 pa-1>
<v-text-field label="Tanggal Transaksi*" placeholder="dd-mm-yyyy" mask="##-##-####" v-model="xtrxdate" :disabled="xact === 'edit' && currStatus !== 'CREATED'"></v-text-field>
</v-flex>
<v-flex pa-1 xs6>
<v-select :search-input.sync="searchCourier" item-text="name" return-object :disabled="xact === 'edit'" :items="xcouriers" v-model="xselectedcourier"
label="Kurir" autocomplete></v-select>
<p v-if="checkError('requirecourier')" class="error pl-2 pr-2" style="color:#fff">Yang ngirim siapa dong ?</p>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 pa-1>
<v-textarea filled outline label="Catatan" v-model="xnote" rows="3"></v-textarea>
</v-flex>
</v-layout>
<span v-if="xact !== 'new'"> &nbsp;Total Uang Muka :<span style="color:#2196F3;font-weight: 900;">{{convertMoney(xtotaldp)}}</span></span>
</v-flex>
</v-layout>
</v-card>
<v-layout class="pt-2 mb-2" column>
<v-card>
<v-layout row>
<v-flex xs12>
<v-subheader red--text text--lighten-1> DETAIL TRANSAKSI</v-subheader>
<v-divider></v-divider>
<v-layout row wrap>
<v-flex xs12 pa-2>
<v-layout v-if="xact === 'new'" row>
<v-flex xs12 pa-1>
<v-data-table :headers="headers" :items="details" :loading="isLoading" hide-actions class="elevation-1">
<template slot="items" slot-scope="props">
<td class="text-xs-left pa-2">{{ props.item.tanggalsj }}</td>
<td class="text-xs-left pa-2">{{ props.item.nosj }}</td>
<td class="text-xs-center pa-2">{{ props.item.namaperusahaan }}</td>
<td class="text-xs-center pa-2">{{ props.item.alamatperusahaan }}</td>
<td class="text-xs-center pa-2">
<div>
<v-btn @click="changeActive(props.item)" v-if="props.item.active === 'N'" small color="error">
<v-icon left>close</v-icon></v-btn>
<v-btn @click="changeActive(props.item)" v-if="props.item.active === 'Y'" flat small color="success">
<v-icon left>check</v-icon></v-btn>
<v-btn @click="editPatient(props.item)" small color="primary">
<v-icon left>list</v-icon></v-btn>
</div>
</template>
</v-data-table>
</v-flex>
</v-layout>
<v-layout v-if="xact !== 'new'" row>
<v-flex xs12 pa-1>
<v-data-table :headers="headerreceive" :items="details" :loading="isLoading" hide-actions class="elevation-1">
<template slot="items" slot-scope="props">
<td class="text-xs-left pa-2">{{ props.item.tanggalsj }}</td>
<td class="text-xs-left pa-2">{{ props.item.nosj }}</td>
<td class="text-xs-center pa-2">{{ props.item.namaperusahaan }}</td>
<td class="text-xs-center pa-2">{{ props.item.alamatperusahaan }}</td>
<td class="text-xs-center pa-2">
<div>
<v-btn @click="changeFlagResultReceive(props.item)" v-if="props.item.flag_result_receive === 'N'" small color="error">
<v-icon left>close</v-icon></v-btn>
<v-btn @click="changeFlagResultReceive(props.item)" v-if="props.item.flag_result_receive === 'Y'" flat small color="success">
<v-icon left>check</v-icon></v-btn>
<v-btn @click="editPatient(props.item)" small color="primary">
<v-icon left>list</v-icon></v-btn>
</div>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-flex>
</v-flex>
</v-card>
</v-layout>
</v-flex>
</v-flex>
</v-layout>
</template>
<style scoped>
table,
td,
th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 8px;
padding-right: 5px;
}
.mini-input .v-input {
margin-top: 0px;
}
.mini-input .v-input,
.mini-input .v-input--selection-controls,
.mini-input .v-input__slot {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 3px;
}
.mini-input .v-messages {
min-height: 0px;
}
input.fhm-input {
border: 1px solid black;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
0 0 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
0 0 4px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
0 0 4px rgba(0, 0, 0, 0.1);
padding: 2px 4px;
background: rgba(255, 255, 255, 0.5);
margin: 0 0 1px 0;
width: 30px;
text-align: center;
}
</style>
<script>
module.exports = {
data: () => ({
menutrxdate: false,
date: new Date().toISOString().substr(0, 10),
searchCourier: '',
isLoading: false,
headers: [{
text: "TANGGAL",
align: "center",
sortable: false,
width: "25%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "NO. SURAT JALAN",
align: "left",
sortable: false,
width: "15%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "PERUSAHAAN",
align: "left",
sortable: false,
width: "20%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "ALAMAT PERUSAHAAN",
align: "left",
sortable: false,
width: "20%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "AKSI",
align: "left",
sortable: false,
width: "10%",
class: "pa-2 blue lighten-3 white--text"
},
],
headerreceive: [{
text: "TANGGAL",
align: "center",
sortable: false,
width: "25%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "NO. SURAT JALAN",
align: "left",
sortable: false,
width: "15%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "PERUSAHAAN",
align: "left",
sortable: false,
width: "20%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "ALAMAT PERUSAHAAN",
align: "left",
sortable: false,
width: "20%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "AKSI",
align: "left",
sortable: false,
width: "10%",
class: "pa-2 blue lighten-3 white--text"
}
],
}),
computed: {
xact: {
get() {
return this.$store.state.receivereferencedistributioncourier.act
},
set(val) {
this.$store.commit("receivereferencedistributioncourier/update_act", val)
}
},
xnumbering() {
if (this.$store.state.receivereferencedistributioncourier.selected_transaction)
return this.$store.state.receivereferencedistributioncourier.selected_transaction.trx_numbering
else
return '-'
},
xtotaldp() {
if (this.$store.state.receivereferencedistributioncourier.selected_transaction)
return this.$store.state.receivereferencedistributioncourier.selected_transaction.trx_totaldp
else
return '0'
},
currStatus() {
if (this.$store.state.receivereferencedistributioncourier.selected_transaction)
return this.$store.state.receivereferencedistributioncourier.selected_transaction.status
else
return 'NONE'
},
xselectedtransaction() {
return this.$store.state.receivereferencedistributioncourier.selected_transaction
},
xtrxdate: {
get() {
return this.$store.state.receivereferencedistributioncourier.trx_date
},
set(val) {
this.$store.commit("receivereferencedistributioncourier/update_trx_date", val)
}
},
dialogconfirmationdelete: {
get() {
return this.$store.state.receivereferencedistributioncourier.dialog_confirmation_delete
},
set(val) {
this.$store.commit("receivereferencedistributioncourier/update_dialog_confirmation_delete",
val)
}
},
msgconfirmationdelete() {
return this.$store.state.receivereferencedistributioncourier.msg_confirmation_delete
},
filterComputedDateFormattedTrx() {
return this.formatDate(this.xtrxdate)
},
xselectedcompany: {
get() {
return this.$store.state.receivereferencedistributioncourier.selected_company
},
set(val) {
this.$store.commit("receivereferencedistributioncourier/update_selected_company", val)
}
},
xcompanys() {
return this.$store.state.receivereferencedistributioncourier.companys
},
xselectedcourier: {
get() {
return this.$store.state.receivereferencedistributioncourier.selected_courier
},
set(val) {
this.$store.commit("receivereferencedistributioncourier/update_selected_courier", val)
this.$store.dispatch("receivereferencedistributioncourier/getordersamples", {
courierid: val.id
})
}
},
xcouriers() {
return this.$store.state.receivereferencedistributioncourier.couriers
},
xnote: {
get() {
return this.$store.state.receivereferencedistributioncourier.trx_note
},
set(val) {
this.$store.commit("receivereferencedistributioncourier/update_trx_note", val)
}
},
details() {
return this.$store.state.receivereferencedistributioncourier.details
},
xdialogaction: {
get() {
return this.$store.state.receivereferencedistributioncourier.dialog_action
},
set(val) {
this.$store.commit("receivereferencedistributioncourier/update_dialog_action", val)
}
},
xmsgaction: {
get() {
return this.$store.state.receivereferencedistributioncourier.msg_action
},
set(val) {
this.$store.commit("receivereferencedistributioncourier/update_msg_action", val)
}
},
dialogformpatient: {
get() {
return this.$store.state.receivereferencedistributioncourier.dialog_form_patient
},
set(val) {
this.$store.commit("receivereferencedistributioncourier/update_dialog_form_patient", val)
}
},
xordertests() {
return this.$store.state.receivereferencedistributioncourier.ordertests
}
},
methods: {
checkError(value) {
var errors = this.$store.state.receivereferencedistributioncourier.errors
if (errors.includes(value)) {
return true
} else {
return false
}
},
formatDate(date) {
if (!date) return null
const [year, month, day] = date.split('-')
return `${day}-${month}-${year}`
},
deFormatedDate(date) {
if (!date) return null
const [day, month, year] = date.split('-')
return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
},
convertMoney(money) {
return one_money(money)
},
saveTrx() {
this.$store.commit("receivereferencedistributioncourier/update_errors", [])
var errors = this.$store.state.receivereferencedistributioncourier.errors
if (_.isEmpty(this.xselectedcourier)) {
errors.push("requirecourier")
}
if (errors.length === 0) {
if (this.$store.state.receivereferencedistributioncourier.details.length > 0) {
var details = this.$store.state.receivereferencedistributioncourier.details
var prm = {}
console.log(this.xact)
if (this.xact === 'new')
prm.trx_id = 0
else
prm.trx_id = this.$store.state.receivereferencedistributioncourier.selected_transaction
.trx_id
console.log(prm.trx_id)
prm.details = details
prm.trx_date = moment(this.xtrxdate,'DDMMYYYY',true)
prm.trx_note = this.xnote
prm.courier = this.xselectedcourier
prm.startdate = this.$store.state.receivereferencedistributioncourier.start_date
prm.enddate = this.$store.state.receivereferencedistributioncourier.end_date
prm.search = this.$store.state.receivereferencedistributioncourier.name_lab
prm.lastid = -1
this.$store.dispatch("receivereferencedistributioncourier/save", prm)
} else {
var msg = "Belum ada sample yang dipilih dong "
this.$store.commit("receivereferencedistributioncourier/update_msg_info", msg)
this.$store.commit("receivereferencedistributioncourier/update_open_dialog_info", true)
}
}
},
changeFlagImage(value) {
console.log('changeFlagImage')
if (this.xact === 'new' || (this.xact !== 'new' && this.currStatus === 'CREATED')) {
let arr = this.$store.state.receivereferencedistributioncourier.details
var idx = _.findIndex(arr, item => item.orderid === value.orderid && item.sampleid === value.sampleid)
arr[idx].flag_image = value.flag_image === 'N' ? 'Y' : 'N'
this.$store.commit("receivereferencedistributioncourier/update_details", arr)
}
},
changeActive(value) {
console.log('changeActive')
if (this.xact === 'new' || (this.xact !== 'new' && this.currStatus === 'CREATED')) {
let arr = this.$store.state.receivereferencedistributioncourier.details
var idx = _.findIndex(arr, item => item.sjid === value.sjid)
arr[idx].active = value.active === 'N' ? 'Y' : 'N'
this.$store.commit("receivereferencedistributioncourier/update_details", arr)
}
},
changeFlagImageReceive(value) {
console.log('changeFlagImageReceive')
if (this.xact !== 'new' && this.currStatus !== 'DONE') {
let arr = this.$store.state.receivereferencedistributioncourier.details
var idx = _.findIndex(arr, item => item.orderid === value.orderid && item.sampleid === value.sampleid)
arr[idx].flag_image_receive = value.flag_image_receive === 'N' ? 'Y' : 'N'
this.$store.commit("receivereferencedistributioncourier/update_details", arr)
}
},
changeFlagResultReceive(value) {
console.log('changeFlagResultReceive')
if (this.xact !== 'new' && this.currStatus !== 'DONE') {
let arr = this.$store.state.receivereferencedistributioncourier.details
var idx = _.findIndex(arr, item => item.T_ReceiverefDistributCourierDetailT_ReceiveReferenceDeliveryID === value.T_ReceiverefDistributCourierDetailT_ReceiveReferenceDeliveryID)
arr[idx].active = value.active === 'N' ? 'Y' : 'N'
this.$store.commit("receivereferencedistributioncourier/update_details", arr)
}
},
deleteTrx() {
var trx = this.$store.state.receivereferencedistributioncourier.selected_transaction
console.log(trx)
let msg = "Yakin, akan menghapus data transaksi " + trx.trx_numbering + " ?"
this.$store.commit("receivereferencedistributioncourier/update_msg_confirmation_delete", msg)
this.$store.commit("receivereferencedistributioncourier/update_dialog_confirmation_delete", true)
},
doDeleteTrx() {
var trx = this.$store.state.receivereferencedistributioncourier.selected_transaction
this.$store.dispatch("receivereferencedistributioncourier/deletetrx", trx)
},
releaseToCourier() {
var trx = this.$store.state.receivereferencedistributioncourier.selected_transaction
var msg = "Anda yakin akan menyerahkan dokumen transaksi " + trx.trx_numbering + " ke kurir ? "
this.$store.commit("receivereferencedistributioncourier/update_msg_action", msg)
this.$store.commit("receivereferencedistributioncourier/update_act", 'RELEASEC')
this.$store.commit("receivereferencedistributioncourier/update_dialog_action", true)
},
receiveCompany() {
var trx = this.$store.state.receivereferencedistributioncourier.selected_transaction
var msg = "Dokumen transaksi " + trx.trx_numbering + " telah diterima lab perujuk ? "
this.$store.commit("receivereferencedistributioncourier/update_msg_action", msg)
this.$store.commit("receivereferencedistributioncourier/update_act", 'RCVLAB')
this.$store.commit("receivereferencedistributioncourier/update_dialog_action", true)
},
receiveFromCourier() {
var trx = this.$store.state.receivereferencedistributioncourier.selected_transaction
var msg = "Dokumen transaksi " + trx.trx_numbering + " diterima dari kurir ? "
this.$store.commit("receivereferencedistributioncourier/update_msg_action", msg)
this.$store.commit("receivereferencedistributioncourier/update_act", 'DONE')
this.$store.commit("receivereferencedistributioncourier/update_dialog_action", true)
},
forceClose() {
var trx = this.$store.state.receivereferencedistributioncourier.selected_transaction
var msg = "Dokumen transaksi " + trx.trx_numbering + " ditutup ? "
this.$store.commit("receivereferencedistributioncourier/update_msg_action", msg)
this.$store.commit("receivereferencedistributioncourier/update_act", 'FORCEDONE')
this.$store.commit("receivereferencedistributioncourier/update_dialog_action", true)
},
closeDialogAction() {
var act = this.$store.state.receivereferencedistributioncourier.act
var trx = this.$store.state.receivereferencedistributioncourier.selected_transaction
let arrtrx = this.$store.state.receivereferencedistributioncourier.transactions
var idx = _.findIndex(arrtrx, item => item.trx_id === trx.trx_id)
var prm = {}
prm.act = act
prm.trx = trx
prm.startdate = this.$store.state.receivereferencedistributioncourier.start_date
prm.enddate = this.$store.state.receivereferencedistributioncourier.end_date
prm.search = this.$store.state.receivereferencedistributioncourier.name_lab
prm.stationid = this.$store.state.receivereferencedistributioncourier.selected_station.id
prm.lastid = idx
prm.details = this.$store.state.receivereferencedistributioncourier.details
prm.trx_note = this.xnote
this.$store.dispatch("receivereferencedistributioncourier/doaction", prm)
},
editPatient(value) {
this.$store.commit("receivereferencedistributioncourier/update_ordertests", value.labs)
this.$store.commit("receivereferencedistributioncourier/update_dialog_form_patient", true)
}
}
}
</script>