Files
FE_CPONE/test/vuex/cpone-spk-home-service/components/oneHomeServiceOrder.vue
2026-04-27 10:13:31 +07:00

837 lines
32 KiB
Vue

<template>
<div>
<!-- alert dialog error start -->
<v-dialog v-model="dialogerror" persistent max-width="290">
<v-card>
<v-card-title color="error" class="headline">Error !</v-card-title>
<v-card-text>
{{ msgerror }}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat @click="closeDialogError">OK</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- alert dialog error end -->
<v-dialog v-model="dialogrelease" persistent max-width="290">
<v-card>
<v-card-title dark class="headline teal pt-2 pb-2" primary-title style="color: white">
<h4 dark>Konfirmasi</h4>
</v-card-title>
<v-card-text>
{{ msgrelease }}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn small color="error darken-1 text-sm-right" flat
@click="dialogrelease = false">Batal</v-btn>
<v-btn small color="primary darken-1 text-sm-left" flat @click="doRelease()">Release</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- Alert dialog Form Kosong Start -->
<v-dialog v-model="dialogalertshow" max-width="30%">
<v-card>
<v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
Peringatan!
</v-card-title>
<v-card-text class="pt-2 pb-2">
<v-layout row>
<v-flex xs12 d-flex>
<v-layout row>
<v-flex pb-1 xs12>
<v-layout row>
<v-flex pt-2 pr-2 xs12>
<!-- <p id="error-break-line">{{ msgalertshow }}</p> -->
<p style="white-space:pre-wrap;">{{ msgalertshow }}</p>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" flat @click="dialogalertshow = false">
Tutup
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- End alert dialog Form Kosong End -->
<v-layout class="mb-2" column >
<v-card>
<v-layout row>
<v-flex xs12>
<v-subheader red--text text--lighten-1> SPK HOME SERVICE
<span v-if="xact === 'edit'"> &nbsp;[ <span style="color:#2196F3;font-weight: 900;">{{ selected_transaction.SpkHomeServiceNumber }}</span>]</span>
<v-flex text-md-right>
<v-btn v-if="selected_transaction.SpkHomeServiceStatus == 'R'" @click="doprint()" small dark color="blue-grey">Print</v-btn>
</v-flex>
</v-subheader>
<v-divider></v-divider>
<v-layout row wrap>
<v-flex xs12 pa-2>
<v-layout mb-2 row>
<v-flex xs4 pa-1>
<v-menu class="xs4 pl-2"
v-model="menufilterdateend"
:close-on-content-click="false"
:nudge-right="40"
lazy
transition="scale-transition"
offset-y
full-width
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
class="mt-1"
v-model="filterComputedDateFormattedEnd"
label="Tanggal spk"
outline
readonly
hide-details
v-on="on"
@blur="date = deFormatedDate(filterComputedDateFormattedEnd)"
></v-text-field>
</template>
<v-date-picker v-model="xdate" no-title @input="menufilterdateend = false"></v-date-picker>
</v-menu>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 pa-1>
<v-data-table
:headers="headers"
:items="xlistorder"
:loading="isLoading"
hide-actions
class="elevation-1">
<template v-slot:items="props">
<tr :key="props.index">
<td class="text-xs-center pa-2" >
{{ props.item.PreregisterOnlineOrderNumber }}
<p class="red--text mono font-weight-bold caption">{{props.item.PreregisterOnlineQRCode}}</p>
</td>
<td class="text-xs-center pa-2" >
{{props.item.M_PatientName}}
</td>
<td class="text-xs-center pa-2" >
{{props.item.test_name}}
</td>
<td class="text-xs-center pa-2" >
<v-btn v-if="orderExist(props.item)" @click="addToOrders(props.item)" small color="primary">Pilih</v-btn>
<v-btn v-if="!orderExist(props.item)" @click="removeFromOrders(props.item)" small color="success">Telah Dipilih</v-btn>
</td>
</tr>
</template>
</v-data-table>
<v-divider></v-divider>
<v-pagination
style="margin-top:10px;margin-bottom:10px"
v-model="curr_page"
:length="xtotal_page"
></v-pagination>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-card>
</v-layout>
<v-layout class="mb-2" column>
<v-card>
<v-subheader red--text text--lighten-1>
DAFTAR STAFF
</v-subheader>
<v-divider></v-divider>
<v-card-text>
<v-layout align-center row>
<v-flex xs4 pa-1>
<v-autocomplete
v-model="xselected_staff"
:items="xstaffs"
return-object
label="Staff*"
class="mini-select"
item-text="name"
flat
outline
hide-no-data
hide-details
></v-autocomplete>
<p v-if="checkError('requirestaff')" class="error pl-2 pr-2" style="color:#fff">Staff, dipilih dulu</p>
</v-flex>
<v-flex pa-1>
<v-btn small @click="addStaff" color="warning">Tambahkan</v-btn>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 mt-2>
<v-data-table
:headers="headersstaff"
:items="xliststaff"
:loading="isLoading"
hide-actions
class="elevation-1">
<template v-slot:items="props">
<tr :key="props.index">
<td class="text-xs-left pa-2" >
{{props.item.name}}
</td>
<td class="text-xs-center pa-2" >
<v-btn title="hapus" style="min-width:20px" @click="deleterow(props.index)" small color="error"><v-icon small>delete</v-icon></v-btn>
</td>
</tr>
</template>
</v-data-table>
</v-flex>
</v-layout>
<v-layout row>
<v-flex grow class="mt-4">
<v-btn v-if="selected_transaction.SpkHomeServiceStatus == 'N'" v-show="savehide" outline color="primary" @click="releaseOrderx()" class="white--text">
Release
</v-btn>
</v-flex>
<v-flex shrink class="mt-4">
<v-btn v-if="isSave()" v-show="savehide" color="primary" @click="saveOrderx()" class="white--text">Simpan</v-btn>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-layout>
<one-dialog-print :title="printtitle" :width="printwidth" :height="500" :status="openprint" :urlprint="urlprint" @close-dialog-print="openprint=false"></one-dialog-print>
</div>
</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;
}
table.v-table tbody td,table.v-table tbody th {
height: 40px;
}
table.v-table thead tr {
height: 40px;
}
.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 = {
components : {
'one-dialog-print':httpVueLoader('../../common/oneDialogPrintX.vue')
},
data: () => ({
menufilterdatestart:false,
date: new Date().toISOString().substr(0, 10),
menufilterdateend:false,
dialogalertshow: false,
msgalertshow: '',
searchCompany:'',
xbarcode:'',
xform:'NEW',
search_dialog:'',
xalmariname:'',
xrackcode:'',
openprint:false,
urlprint:'',
printtitle:'',
printwidth:600,
xrow:0,
xcol:0,
indeterminate:false,
indeterminatex:false,
rackrows:[],
rackcols:[],
headers: [
{
text: "ORDER NUMBER ONLINE",
align: "center",
sortable: false,
width: "15%",
class: "pl-2 pt-1 pb-1 pr-2 blue-grey text-xs-center white--text"
},
{
text: "PASIEN",
align: "center",
sortable: false,
width: "25%",
class: "pl-2 pt-1 pb-1 pr-2 blue-grey text-xs-center white--text"
},
{
text: "PEMERIKSAAN",
align: "center",
sortable: false,
width: "35%",
class: "pl-2 pt-1 pb-1 pr-2 blue-grey text-xs-center white--text"
},
{
text: "AKSI",
align: "center",
sortable: false,
width: "15%",
class: "pl-2 pt-1 pb-1 pr-2 blue-grey text-xs-centert white--text"
}
],
headersstaff: [
{
text: "STAFF",
align: "center",
sortable: false,
width: "90%",
class: "pl-2 pt-1 pb-1 pr-2 blue-grey text-xs-left white--text"
},
{
text: "AKSI",
align: "center",
sortable: false,
width: "10%",
class: "pl-2 pt-1 pb-1 pr-2 blue-grey text-xs-center white--text"
}
],
}),
computed: {
xstaffs(){
return this.$store.state.form.staffs
},
xselected_staff:{
get() {
return this.$store.state.form.selected_staff
},
set(val) {
this.$store.commit("form/update_selected_staff",val)
this.$store.commit("service/update_no_save",1)
}
},
xliststaff:{
get() {
return this.$store.state.form.liststaff
},
set(val) {
this.$store.commit("form/update_liststaff",val)
}
},
xlistorder(){
return this.$store.state.form.listorder
},
isLoading() {
return this.$store.state.form.get_data_status == 1
},
curr_page: {
get() {
return this.$store.state.form.current_page
},
set(val) {
this.$store.commit("form/update_current_page",val)
if (this.xact == 'new') {
this.$store.dispatch("form/getorder", {current_page: val})
} else {
this.$store.dispatch("form/getorderbyid",{spkHomeServiceId: this.selected_transaction.SpkHomeServiceID})
}
}
},
xtotal_page: {
get() {
return this.$store.state.form.total_page
},
set(val) {
this.$store.commit("form/update_total_page", val)
}
},
selected_orders: {
get() {
return this.$store.state.form.selected_orders;
},
set(val) {
this.$store.commit("form/update_selected_orders", val);
},
},
filterComputedDateFormattedStart () {
return this.formatDate(this.xfilterdate)
},
filterComputedDateFormattedEnd () {
return this.formatDate(this.xdate)
},
xdate:{
get() {
return this.$store.state.form.transaction_date
},
set(val) {
this.$store.commit("form/update_transaction_date",val)
this.$store.commit("service/update_no_save",1)
}
},
dialogerror: {
get() {
return this.$store.state.form.dialog_error;
},
set(val) {
this.$store.commit("form/update_dialog_error", val);
},
},
savehide: {
get() {
return this.$store.state.form.save_hide;
},
set(val) {
this.$store.commit("form/update_save_hide", val);
},
},
msgerror() {
return this.$store.state.form.msg_error;
},
selected_transaction(){
return this.$store.state.service.selected_transaction
},
xact(){
return this.$store.state.service.act
},
dialogrelease: {
get() {
return this.$store.state.form.dialog_release
},
set(val) {
this.$store.commit("form/update_dialog_release", val)
}
},
msgrelease() {
return this.$store.state.form.msg_release
}
// end
// bar_chx_all: {
// get() {
// return this.$store.state.form.bar_chx_all
// },
// set(val) {
// this.$store.commit("form/update_bar_chx_all",val)
// }
// },
// bar_chx_allx: {
// get() {
// return this.$store.state.form.bar_chx_allx
// },
// set(val) {
// this.$store.commit("form/update_bar_chx_allx",val)
// }
// },
// xnumber: {
// get() {
// return this.$store.state.form.transaction_number
// },
// set(val) {
// this.$store.commit("form/update_transaction_number",val)
// // this.$store.commit("form/update_liststaff",[])
// }
// },
// xfilterdate:{
// get() {
// return this.$store.state.form.xfilterdate
// },
// set(val) {
// this.$store.commit("form/update_xfilterdate",val)
// }
// },
// xtime:{
// get() {
// return this.$store.state.form.transaction_time
// },
// set(val) {
// this.$store.commit("form/update_transaction_time",val)
// }
// },
// xnote:{
// get() {
// return this.$store.state.form.transaction_note
// },
// set(val) {
// this.$store.commit("form/update_transaction_note",val)
// // this.$store.commit("service/update_no_save",1)
// // this.$store.commit("form/update_liststaff",[])
// }
// },
// xmgmmcus(){
// return this.$store.state.form.mgmmcus
// },
// xkecamatans(){
// return this.$store.state.form.kecamatans
// },
// companies(){
// return this.$store.state.form.companies
// },
// xtypes(){
// return this.$store.state.form.types
// },
// xracks(){
// return this.$store.state.form.racks
// },
// filter_search:{
// get() {
// return this.$store.state.form.filter_search
// },
// set(val) {
// this.$store.commit("form/update_filter_search",val)
// }
// },
// xselected_mgmmcu:{
// get() {
// return this.$store.state.form.selected_mgmmcu
// },
// set(val) {
// this.$store.commit("form/update_selected_mgmmcu",val)
// // this.$store.commit("form/update_liststaff",[])
// }
// },
// selected_company:{
// get() {
// return this.$store.state.form.selected_company
// },
// set(val) {
// this.$store.commit("form/update_selected_company",val)
// var kec = this.$store.state.form.selected_kecamatan
// var type = this.$store.state.form.selected_type
// this.dialogSearch(val,{'id':'0','name':'Semua'},{'id':'0','name':'Semua'})
// }
// },
// xselected_kecamatan:{
// get() {
// return this.$store.state.form.selected_kecamatan
// },
// set(val) {
// this.$store.commit("form/update_selected_kecamatan",val)
// var company = this.$store.state.form.selected_company
// var type = this.$store.state.form.selected_type
// this.dialogSearch(company,val,{'id':'0','name':'Semua'})
// }
// },
// xselected_type:{
// get() {
// return this.$store.state.form.selected_type
// },
// set(val) {
// this.$store.commit("form/update_selected_type",val)
// var company = this.$store.state.form.selected_company
// var kec = this.$store.state.form.selected_kecamatan
// this.dialogSearch(company,kec,val)
// }
// },
// xselected_rack:{
// get() {
// return this.$store.state.form.selected_rack
// },
// set(val) {
// this.$store.commit("form/update_selected_rack",val)
// }
// },
// details(){
// return this.$store.state.form.details
// },
// xsamples(){
// return this.$store.state.form.samples
// },
// xopenalmari(){
// return this.$store.state.form.open_almari
// },
// xopenrack(){
// return this.$store.state.form.open_rack
// },
// xrackcontents(){
// return this.$store.state.form.rack_contents
// },
// dialogsearchsample:{
// get() {
// return this.$store.state.form.dialog_search_sample
// },
// set(val) {
// this.$store.commit("form/update_dialog_search_sample",val)
// }
// },
// curr_page_search: {
// get() {
// return this.$store.state.form.current_page_search
// },
// set(val) {
// this.$store.commit("form/update_current_page_search",val)
// this.$store.dispatch("form/searchall",{
// kecamatan: this.xselected_kecamatan,
// current_page:val,
// lastid:-1
// })
// }
// },
// xtotal_page_search: {
// get() {
// return this.$store.state.form.total_page_search
// },
// set(val) {
// this.$store.commit("form/update_total_page_search",val)
// }
// },
// show_delete:{
// get(){
// return this.$store.state.form.show_delete
// },
// set(val) {
// this.$store.commit("form/update_show_delete",val)
// }
// }
},
methods : {
checkError(value){
var errors = this.$store.state.form.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')}`
},
resetOfficer() {
this.$store.commit("form/update_selected_staff",{})
},
addStaff() {
this.$store.commit("form/update_errors",[])
var errors = this.$store.state.form.errors
if(_.isEmpty(this.xselected_staff)){
errors.push("requirestaff")
}
if (errors.length === 0) {
let liststaff = this.xliststaff
this.$store.commit("form/update_trx_id",0)
liststaff.push({
trx_id: this.$store.state.form.trx_id,
staffid:this.xselected_staff.id,
name:this.xselected_staff.name
})
if (this.xliststaff.length > 0) {
this.resetOfficer()
}
}
},
orderExist(item) {
var selected_orders = this.selected_orders;
var idx = _.findIndex(selected_orders, function (o) {
return parseInt(o.PreregisterOnlineID) === parseInt(item.PreregisterOnlineID);
});
if (idx === -1) {
return true;
} else {
return false;
}
},
addToOrders(item) {
var selected_orders = this.selected_orders;
selected_orders.push(item);
},
removeFromOrders(item) {
var selected_orders = this.selected_orders;
var idx = _.findIndex(selected_orders, function (o) {
return parseInt(o.PreregisterOnlineID) === parseInt(item.PreregisterOnlineID);
});
selected_orders.splice(idx, 1);
this.$store.commit("service/update_no_save",1)
},
saveOrderx() {
var savex = true;
if (savex) {
if (this.selected_orders.length == 0) {
this.$store.commit("service/update_open_dialog_info", true)
this.$store.commit("service/update_msg_info", "Anda belum memilih order. Silahkan pilih dulu!!")
} else if (this.xliststaff.length == 0) {
this.$store.commit("service/update_open_dialog_info", true)
this.$store.commit("service/update_msg_info", "Anda belum memilih staff. Silahkan pilih dulu!!")
} else {
var prm = {};
prm.date = this.xdate
prm.arrOrders = this.selected_orders
prm.arrStaff = this.xliststaff
prm.act = this.xact
prm.spkHomeServiceId = Object.keys(this.$store.state.service.selected_transaction).length == 0 ? 0 : this.$store.state.service.selected_transaction.SpkHomeServiceID
// console.log('prm save edit', prm)
this.$store.dispatch("form/saveOrder", prm)
this.$store.commit("form/update_save_hide", false)
}
// if (this.xact === "new") {
// if (this.selected_orders.length == 0 || this.$store.state.service.no_save != 0) {
// this.$store.commit("service/update_open_dialog_info", true)
// this.$store.commit("service/update_msg_info", "Anda belum memilih order. Silahkan pilih dulu!!")
// } else if (this.xliststaff.length == 0 || this.$store.state.service.no_save != 0) {
// this.$store.commit("service/update_open_dialog_info", true)
// this.$store.commit("service/update_msg_info", "Anda belum memilih staff. Silahkan pilih dulu!!")
// } else {
// var prm = {};
// prm.date = this.xdate
// prm.arrOrders = this.selected_orders
// prm.arrStaff = this.xliststaff
// prm.act = this.xact
// prm.spkHomeServiceId = 0
// // console.log('prm save edit', prm)
// this.$store.dispatch("form/saveOrder", prm)
// this.$store.commit("form/update_save_hide", false)
// }
// } else {
// if (this.$store.state.service.no_save == 1) {
// this.$store.commit("service/update_open_dialog_info", true)
// this.$store.commit("service/update_msg_info", "Anda belum memilih order. Silahkan pilih dulu!!")
// } else if (this.$store.state.service.no_save == 1) {
// this.$store.commit("service/update_open_dialog_info", true)
// this.$store.commit("service/update_msg_info", "Anda belum memilih staff. Silahkan pilih dulu!!")
// } else {
// var prm = {};
// prm.date = this.xdate
// prm.arrOrders = this.selected_orders
// prm.arrStaff = this.xliststaff
// prm.act = this.xact
// prm.spkHomeServiceId = Object.keys(this.$store.state.service.selected_transaction).length == 0 ? 0 : this.$store.state.service.selected_transaction.SpkHomeServiceID
// // console.log('prm save edit', prm)
// this.$store.dispatch("form/saveOrder", prm)
// this.$store.commit("form/update_save_hide", false)
// }
// }
}
},
cancelOrder() {
this.selected_orders = []
this.xliststaff = []
var datenow = moment(new Date()).format('DD-MM-YYYY')
this.xdate = this.formatDate(datenow)
this.$store.dispatch("form/getorder", {current_page: 1})
},
isSave() {
if (this.selected_transaction.SpkHomeServiceStatus == 'R') {
return false
} else {
return true
}
},
closeDialogError() {
this.$store.commit("form/update_dialog_error", false);
},
releaseOrderx() {
if (this.$store.state.service.no_save == 0) {
var msg = "Yakin, akan melakukan release dan register ?"
this.$store.commit("form/update_msg_release", msg)
this.$store.commit("form/update_dialog_release", true)
} else {
this.$store.commit("service/update_open_alert_confirmation",true)
}
},
doRelease() {
var prm = {}
prm.spkHomeServiceId = this.selected_transaction.SpkHomeServiceID
prm.number = this.selected_transaction.SpkHomeServiceNumber
this.$store.dispatch("form/releaseOrder", prm)
},
deleterow(idx) {
this.$store.dispatch('form/removeOfficer', idx);
this.$store.commit("service/update_no_save",1)
},
doprint(){
var idx = this.selected_transaction.SpkHomeServiceID
this.printwidth = 1028
this.printtitle = ""
let user = one_user()
var d = new Date();
var n = d.getTime()
var rptname = ''
var folder = 'rekap'
var rptname = 'rpt_spk_001'
var xurl = ""
xurl = "/birt/run?__report=report/one/"+folder+"/"+rptname+".rptdesign&__format=pdf&username="+user.M_UserUsername+"&PID="+idx+'&tm='+n
this.urlprint = xurl
this.openprint = true
},
// end
},
watch: {
},
}
</script>