Files
FE_CPONE/test/vuex/one-result-kurir-spk/components/oneSampleStorageForm.vue
2026-04-27 10:13:31 +07:00

836 lines
34 KiB
Vue

<template>
<div>
<v-dialog v-model="dialogsearchsample" persistent max-width="850">
<v-card>
<v-card-title color="warning" class="headline">
LISTING ORDER
</v-card-title>
<v-divider></v-divider>
<v-card-text>
<v-layout >
<v-menu class="xs6 pr-2 ml-1"
v-model="menufilterdatestart"
: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="filterComputedDateFormattedStart"
label="Janji Hasil"
outline
hide-details
v-on="on"
@blur="date = deFormatedDate(filterComputedDateFormattedStart)"
></v-text-field>
</template>
<v-date-picker v-model="xfilterdate" no-title @input="menufilterdatestart = false"></v-date-picker>
</v-menu>
<v-select class="xs6 pr-2 ml-1 mt-1 mini-select"
label="Filter Kecamatan"
outline
hide-details
item-text="name"
return-object
:items="xkecamatans"
v-model="xselected_kecamatan"
></v-select>
<v-select class="xs6 pr-2 ml-1 mt-1 mini-select"
label="Filter Tipe"
outline
hide-details
item-text="name"
return-object
:items="xtypes"
v-model="xselected_type"
></v-select>
<span @click="dialogSearch" class="icon-medium-fill-base white--text success iconsearch-search"></span>
</v-layout>
<v-layout row>
<v-flex xs12 mt-2>
<v-data-table
:headers="allheaders"
:items="xsamples"
:loading="isLoading"
hide-actions
class="elevation-1">
<template v-slot:headers="props">
<tr>
<th style="width:20px" class= "blue-grey white--text">
<v-checkbox style="padding-top:0;margin-top:0"
hide-details
color="white"
:indeterminate="indeterminate"
@change="changeCbxAll(bar_chx_all)"
v-model="bar_chx_all"
></v-checkbox>
</th>
<th
v-for="header in props.headers"
:key="header.text"
:class="header.class"
:width="header.width"
>
{{ header.text }}
</th>
</tr>
</template>
<template v-slot:items="props">
<td style="width:20px" class="text-xs-left">
<v-checkbox style="padding-top:0;margin-top:0"
color="blue-grey"
hide-details
v-model="props.item.chex"
@change="checkTop()"
></v-checkbox>
</td>
<td class="text-xs-left pa-2" >
<p class="mb-0">{{props.item.labnumber}}</p>
<p class="mb-0">{{props.item.patientname}}</p>
</td>
<td class="text-xs-center pa-2" >
{{ props.item.date_promise}}
</td>
<td class="text-xs-center pa-2" >
<p class="mb-0 caption"><span class=" font-weight-bold info--text">{{ props.item.delivery_name.toUpperCase()}}</span></p>
<p class="mb-0">{{ props.item.xaddress}}</p>
<p class="mb-0">[ <span class="warning--text">{{props.item.kelurahan}}</span> ]</p>
<p v-if="props.item.catatan !== ''" class="mt-1 mb-0 error">
<span class=" mono white--text">catatan : {{props.item.catatan}}</span>
</p>
</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat @click="closeDialogSample()">OK</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-layout class="mb-2" column >
<v-card>
<v-layout row>
<v-flex xs12>
<v-subheader red--text text--lighten-1> FORM TRANSAKSI KURIR SPK
<span v-if="xact === 'edit'"> &nbsp;[ <span style="color:#2196F3;font-weight: 900;">{{xnumbering}}</span> ]</span>
<v-flex text-md-right>
<v-btn v-if="(_.isEmpty(selected_transaction, true)) || (selected_transaction && selected_transaction.status === 'S') || !selected_transaction" @click="save()" small color="info">Simpan</v-btn>
<v-btn @click="print()" 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-text-field hide-details v-model="xdate" readonly="readonly" label="Tanggal Transaksi"></v-text-field>
</v-flex>
<v-flex xs2 pa-1>
<v-text-field placeholder="hh:mm" hide-details v-model="xtime" label="Jam Transaksi"></v-text-field>
<p v-if="checkError('requiretime')" class="error pl-2 pr-2" style="color:#fff">Format penulisan "hh:mm", contoh : 17:50</p>
</v-flex>
<v-flex xs3 pa-1>
<v-select
hide-details
item-text="name"
return-object
:items="xcouriers"
v-model="xselected_courier"
label="Kurir*"
></v-select>
<p v-if="checkError('requirecourier')" class="error pl-2 pr-2" style="color:#fff">Kurirnya dong, dipilih</p>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 pa-1>
<v-textarea
filled
outline
hide-details
label="Catatan"
v-model="xnote"
rows="3"
></v-textarea>
</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-layout row>
<v-flex xs12>
<v-subheader red--text text--lighten-1> DETAIL TRANSAKSI
<v-flex text-md-right>
<v-btn v-if="show_delete" @click="deleteDetail()" small color="error">Hapus</v-btn>
<v-btn v-if="(_.isEmpty(selected_transaction, true)) || (selected_transaction && selected_transaction.status === 'S') || !selected_transaction" @click="openDialogSearch()" small color="warning">Cari order</v-btn>
</v-flex>
</v-subheader>
<v-divider></v-divider>
<v-layout row wrap>
<v-flex xs12 pa-2>
<v-layout row>
<v-flex xs12 pa-1>
<p v-if="checkError('requiredetails')" class="error pl-2 pr-2" style="color:#fff">Mana nih yang mau dikirim ?</p>
<v-data-table
:headers="allheaders"
:items="details"
:loading="isLoading"
hide-actions
class="elevation-1">
<template v-slot:headers="props">
<tr>
<th style="width:20px" class= "blue-grey white--text">
<v-checkbox style="padding-top:0;margin-top:0"
hide-details
color="white"
:indeterminate="indeterminatex"
@change="changeCbxAllX(bar_chx_allx)"
v-model="bar_chx_allx"
></v-checkbox>
</th>
<th
v-for="header in props.headers"
:key="header.text"
:class="header.class"
:width="header.width"
>
{{ header.text }}
</th>
</tr>
</template>
<template v-slot:items="props">
<td style="width:20px" class="text-xs-left">
<v-checkbox v-if="props.item.status === 'N'" style="padding-top:0;margin-top:0"
color="blue-grey"
hide-details
v-model="props.item.chex"
@change="checkTopX()"
></v-checkbox>
</td>
<td class="text-xs-left pa-2" >
<p class="mb-0">{{props.item.labnumber}}</p>
<p class="mb-0">{{props.item.patientname}}</p>
</td>
<td class="text-xs-center pa-2" >
{{ props.item.date_promise}}
</td>
<td class="text-xs-center pa-2" >
<p class="mb-0 caption"><span class=" font-weight-bold info--text">{{ props.item.delivery_name.toUpperCase()}}</span></p>
<p class="mb-0">{{ props.item.xaddress}}</p>
<p class="mb-0">[ <span class="warning--text">{{props.item.kelurahan}}</span> ]</p>
<p v-if="props.item.catatan !== ''" class="mt-1 mb-0 error">
<span class=" mono white--text">catatan : {{props.item.catatan}}</span>
</p>
</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</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: () => ({
xbarcode:'',
xform:'NEW',
search_dialog:'',
xalmariname:'',
xrackcode:'',
openprint:false,
urlprint:'',
printtitle:'',
printwidth:600,
xrow:0,
xcol:0,
indeterminate:false,
indeterminatex:false,
menufilterdatestart:false,
xdatestart:moment(new Date()).format('YYYY-MM-DD'),
rackrows:[],
rackcols:[],
headers: [
{
text: "",
align: "left",
sortable: false,
width: "8%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "PASIEN",
align: "left",
sortable: false,
width: "20%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "BARCODE",
align: "center",
sortable: false,
width: "15%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "ALMARI",
align: "left",
sortable: false,
width: "25%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "RAK",
align: "center",
sortable: false,
width: "15%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "POSISI",
align: "center",
sortable: false,
width: "10%",
class: "pa-2 blue lighten-3 white--text"
}
],
allheaders: [
{
text: "PASIEN",
align: "left",
sortable: false,
width: "28%",
class: "pl-2 pt-1 pb-1 pr-2 blue-grey text-xs-left white--text"
},
{
text: "JANJI HASIL",
align: "center",
sortable: false,
width: "15%",
class: "pl-2 pt-1 pb-1 pr-2 blue-grey text-xs-center white--text"
},
{
text: "ALAMAT",
align: "center",
sortable: false,
width: "50%",
class: "pl-2 pt-1 pb-1 pr-2 blue-grey text-xs-center white--text"
}
],
}),
computed: {
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)
}
},
filterComputedDateFormattedStart () {
return this.formatDate(this.xdatestart)
},
selected_transaction(){
return this.$store.state.samplestorage.selected_transaction
},
xact(){
return this.$store.state.samplestorage.act
},
xnumbering(){
return this.$store.state.form.transaction_number
},
xfilterdate:{
get() {
return this.$store.state.form.xfilterdate
},
set(val) {
this.$store.commit("form/xfilterdate",val)
}
},
xdate:{
get() {
return this.$store.state.form.transaction_date
},
set(val) {
this.$store.commit("form/update_transaction_date",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("samplestorage/update_no_save",1)
}
},
isLoading() {
return this.$store.state.samplestorage.search_status == 1
},
xcouriers(){
return this.$store.state.form.couriers
},
xkecamatans(){
return this.$store.state.form.kecamatans
},
xtypes(){
return this.$store.state.form.types
},
xracks(){
return this.$store.state.form.racks
},
xselected_courier:{
get() {
return this.$store.state.form.selected_courier
},
set(val) {
this.$store.commit("form/update_selected_courier",val)
}
},
xselected_kecamatan:{
get() {
return this.$store.state.form.selected_kecamatan
},
set(val) {
this.$store.commit("form/update_selected_kecamatan",val)
}
},
xselected_type:{
get() {
return this.$store.state.form.selected_type
},
set(val) {
this.$store.commit("form/update_selected_type",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",{
xdate:this.xdatestart,
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 : {
print(){
var trx_selected = this.$store.state.samplestorage.selected_transaction
this.printwidth = 1028
this.printtitle = ""
let idx = trx_selected.id
let user = one_user()
var d = new Date();
var n = d.getTime()
var rptname = ''
var folder = 'rekap'
var rptname = 'kurir'
var xurl = ""
xurl = "/birt/run?__report=report/one/"+folder+"/"+rptname+".rptdesign&__format=pdf&username="+user.M_UserUsername+"&PID="+idx+'&PLang=1&tm='+n
this.urlprint = xurl
this.openprint = true
},
changeCbxAll(value){
var arr = this.xsamples
this.indeterminate = false
this.btn_hide = true
arr.forEach((el)=>{el.chex = value})
var selected = _.filter(arr, function(o) { return o.chex })
this.$store.commit("form/update_selected_transaction",selected)
},
changeCbxAllX(value){
this.show_delete = false
var arr = this.details
this.indeterminatex = false
this.btn_hide = true
var filtered_arr = _.filter(arr, function(o) { return o.status === 'N' })
filtered_arr.forEach((el)=>{el.chex = value})
var selected = _.filter(arr, function(o) { return o.chex })
if(selected.length > 0){
this.show_delete = true
}
},
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')}`
},
isSelected(p) {
return p.xid == this.$store.state.samplestorage.selected_transaction.xid
},
selectMe(detail) {
this.$store.commit("form/update_selected_detail",detail)
this.$store.commit("form/update_open_almari",false)
this.$store.commit("form/update_open_rack",true)
this.$store.commit("form/update_selected_almari",detail.almari)
this.xalmariname = detail.almari.name
this.$store.commit("form/update_selected_rack",detail.rack)
this.xrackcode = detail.rack.code
this.$store.dispatch("form/getrackcontent",{
almariid:detail.almari.id,
rackid:detail.rack.id,
col:detail.col,
row:detail.row
})
},
addDetail(){
var barcode = this.xbarcode
this.xbarcode = ''
this.$store.dispatch("form/checkbarcode",{
barcode : barcode,
details : this.$store.state.form.details
})
},
deleteDetail(){
var arr = this.$store.state.form.details
var selected = _.filter(arr, function(o) { return o.chex })
var deleted = this.$store.state.form.deleted_details
selected.forEach(function(value,index){
var idx = _.findIndex(arr, item => item.promiseid === value.promiseid && item.delid === value.delid)
arr.splice(idx,1)
if(parseInt(value.trx_id) > 0){
var idx_del = _.findIndex(deleted, itemx => parseInt(itemx.trx_id) === parseInt(value.trx_id))
if(idx_del === -1)
deleted.push(value)
}
})
this.$store.commit("form/update_deleted_details",deleted)
this.show_delete = false
},
saveNewTransaction(){
var prm = {
date: this.$store.state.form.transaction_date,
time: this.$store.state.form.transaction_time,
note: this.$store.state.form.transaction_note,
details : this.$store.state.form.details
}
this.$store.dispatch("form/save",prm)
},
checkInLists(value){
let arrtests = this.$store.state.form.details
var idx = _.findIndex(arrtests, item => item.xid === value.xid && item.delid === value.delid)
if(idx !== -1){
return true
}
else{
return false
}
},
removeDetail(value){
let arrtests = this.$store.state.form.details
var idx = _.findIndex(arrtests, item => item.promiseid === value.promiseid && item.delid === value.delid)
arrtests.splice(idx,1)
this.$store.commit("form/update_details",arrtests)
},
closeDialogSample(){
var barcodes = this.xsamples
var selected = _.filter(barcodes, function(o) { return o.chex })
var details = this.$store.state.form.details
selected.forEach(function(value,index){
var idx = _.findIndex(details, item => item.promiseid === value.promiseid && item.delid === value.delid)
if(idx === -1){
value.chex = false
details.push(value)
}
})
this.$store.commit("form/update_details",details)
console.log(details)
this.$store.commit("form/update_dialog_search_sample",false)
},
openDialogSearch(){
this.bar_chx_all = false
this.indeterminatex = false
this.$store.commit("form/update_selected_transaction",[])
this.$store.dispatch("form/getkecamatan",{
xdate:this.xdatestart,
kecamatan: this.xselected_kecamatan,
current_page:this.curr_page_search,
type:this.xselected_type,
details:this.details,
lastid:-1
})
},
dialogSearch(){
this.bar_chx_all = false
this.indeterminatex = false
this.$store.commit("form/update_selected_transaction",[])
this.$store.dispatch("form/searchall",{
xdate:this.xdatestart,
kecamatan: this.xselected_kecamatan,
current_page:this.curr_page_search,
type:this.xselected_type,
details:this.details,
lastid:-1
})
},
closeDialogSearch(){
this.$store.commit("form/update_dialog_search_sample",false)
},
searchSample(){
this.$store.dispatch("form/lookupsamples",{
search:this.search_dialog
})
},
checkStatus(value){
if(value.status === 'N' && value.selected === 'N'){
return 'info'
}else if(value.status === 'Y' && value.selected === 'T'){
return 'warning'
}
else{
return 'error'
}
},
changeStatusChecked(value){
let arrdet = this.$store.state.form.details
let arr = this.$store.state.form.samples
var idx = _.findIndex(arr, item => item.xid === value.xid && item.delid === value.delid)
arr[idx].flag_checked = value.flag_checked === 'N' ? 'Y':'N'
var selected_x = _.filter(arr, function(o) { return o.xid === value.xid && o.delid === value.delid})
var combine_x = _.concat(arrdet,selected_x)
this.$store.commit("form/update_details",combine_x)
},
save(){
this.$store.commit("form/update_errors",[])
var errors = this.$store.state.form.errors
console.log(this.xtime)
var aTime = moment(this.xtime, 'HH:mm', true)
console.log(aTime)
if(!aTime.isValid()){
errors.push("requiretime")
}
if(_.isEmpty(this.xselected_courier)){
errors.push("requirecourier")
}
if(this.details.length === 0){
errors.push("requiredetails")
}
if(errors.length === 0){
this.$store.dispatch("form/save",{
trx_id:this.$store.state.form.trx_id,
trx_date:this.xdate,
trx_time:this.xtime,
trx_note:this.xnote,
courier:this.xselected_courier.id,
details:this.details,
deleted_details : this.$store.state.form.deleted_details
})
}
},
checkTop(){
var barcodes = this.xsamples
var selected = _.filter(barcodes, function(o) { return o.chex; })
this.bar_chx_all = false
this.indeterminate = false
if(selected.length > 0 && barcodes.length === selected.length){
this.bar_chx_all = true
this.indeterminate = false
}
if(selected.length > 0 && barcodes.length > selected.length){
this.bar_chx_all = false
this.indeterminate = true
}
this.$store.commit("form/update_selected_transaction",selected)
},
checkTopX(){
this.show_delete = false
var barcodes = this.details
var selected = _.filter(barcodes, function(o) { return o.chex; })
this.bar_chx_allx = false
this.indeterminatex = false
if(selected.length > 0 && barcodes.length === selected.length){
this.bar_chx_allx = true
this.indeterminatex = false
this.show_delete = true
}
if(selected.length > 0 && barcodes.length > selected.length){
this.bar_chx_allx = false
this.indeterminatex = true
this.show_delete = true
}
//this.$store.commit("form/update_selected_transaction",selected)
},
}
}
</script>