Files
FE_CPONE/test/vuex/hs-registrasi-v5/components/orderDelivery.vue
2026-04-27 10:13:31 +07:00

458 lines
17 KiB
Vue

<template>
<v-layout column>
<v-dialog v-model="dialog_delivery_note" width="500">
<v-card>
<v-card-title class="headline blue lighten-2 white--text">
Catatan Pengiriman
</v-card-title>
<v-card-text>
<v-layout row>
<v-flex d-flex>
<v-textarea outline label="Isikan Catatan" v-model="selected_delivery_for_note.description">
</v-textarea>
</v-flex>
</v-layout>
<v-layout row>
<v-flex d-flex>
<p class="red--text font-weight-bold caption">
Untuk pengiriman email, penambahan catatan digunakan sebagai pengganti alamat email terpilih,
jika lebih dari satu,
tulis alamat email dengan separator koma
contoh : aku@gmail.com, kamu@gmail.com, dia@gmail.com
</p>
</v-flex>
</v-layout>
<v-layout row>
<v-flex d-flex>
<p class="red--text font-weight-bold caption">
Untuk pengiriman kurir, penambahan catatan digunakan sebagai keterangan
dan tidak merubah kecamatan kelurahan,
ketika proses spk kurir
</p>
</v-flex>
</v-layout>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" flat @click="addDeliveryNoteNew()">
Tambahkan
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialogmou" persistent max-width="900">
<v-layout align-center row>
<v-flex xs12>
<v-card tile flat color=" pa-2 teal lighten-4">
<h5 class=" subtitle-1 font-weight-bold">ALAMAT</h5>
</v-card>
</v-flex>
</v-layout>
<v-card-text class="pt-2 pb-2" style="background:white">
<v-layout wrap>
<v-flex xs12 pr-1>
<v-autocomplete style="font-size:12px;padding:4px 0" :items="provinces" item-text="M_ProvinceName"
item-value="M_ProvinceID" label="Propinsi" v-model="selected_province" clearable return-object>
</v-autocomplete>
</v-flex>
<v-flex xs12 pr-1>
<v-autocomplete style="font-size:12px;padding:4px 0" :items="cities" item-text="M_CityName"
item-value="M_CityID" label="Kota" v-model="selected_city" clearable return-object>
</v-autocomplete>
</v-flex>
<v-flex xs12>
<v-autocomplete style="font-size:12px;padding:4px 0" :items="districts" item-text="M_DistrictName"
item-value="M_DistrictID" label="Kecamatan" v-model="selected_district" clearable return-object>
</v-autocomplete>
</v-flex>
<v-flex xs12>
<v-autocomplete style="font-size:12px;padding:4px 0" :items="villages" item-text="M_KelurahanName"
item-value="M_KelurahanID" label="Kelurahan" clearable v-model="selected_village"
:error="errors.kelurahan" :rules="[rules.kelurahan]" return-object></v-autocomplete>
</v-flex>
<v-flex xs12>
<v-textarea style="font-size:12px;padding:4px 0" auto-grow rows="1" v-model="xlabel" label="Label"
:error="errors.label" :rules="[rules.label]">
</v-textarea>
</v-flex>
<v-flex xs12>
<v-textarea style="font-size:12px;padding:4px 0" auto-grow rows="1" v-model="xaddress" label="Alamat"
:error="errors.address" :rules="[rules.address]">
</v-textarea>
</v-flex>
</v-layout>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn dark color="teal" @click="add_new()" :disabled="!btn_save_enabled">
Simpan
</v-btn>
<v-btn dark color="red" @click="dialogmou = false">TUTUP</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-layout align-center row>
<v-flex xs12>
<v-card tile flat color=" pa-2 teal lighten-4">
<h5 class=" subtitle-1 font-weight-bold">PENGIRIMAN HASIL</h5>
</v-card>
</v-flex>
</v-layout>
<v-layout>
<v-flex xs12>
<v-btn v-if="this.xpatientid > 0" color="blue" dark class="one-btn-icon ma-1" @click="add_address">
TAMBAH ALAMAT PENGIRIMAN
</v-btn>
</v-flex>
</v-layout>
<v-layout mt-1 row wrap>
<v-flex class="row" ma-1 xs11 v-for="(delivery,idx) in deliveries">
<v-layout align-center row>
<v-flex xs1>
<v-btn v-if="delivery.chex === 'N'" @click="changeBoxRight(delivery,idx)" dark style="min-width:20px"
small color="grey darken-1">
<v-icon small>close</v-icon>
</v-btn>
<v-btn v-if="delivery.chex === 'Y'" @click="changeBoxRight(delivery,idx)" depressed
style="min-width:20px" small color="teal lighten-4">
<v-icon color="teal" small>check</v-icon>
</v-btn>
</v-flex>
<v-flex mb-1 pl-2 xs11>
<p :class="getColorFont(delivery)" class="mb-0 font-weight-black" style="font-size:11px">
{{delivery.delivery_name.toUpperCase()}}
</p>
<div v-if="delivery.description !== ''" class="body-2 mb-1 mono caption"
v-html="reHTMLAddress(delivery.description)">
</div>
<v-textarea v-if="delivery.chex === 'Y'" v-model="delivery.note" rows="1" auto-grow single-line
style="color:#800000;font-weight:500" placeholder="Catatan" hide-details
class="body-2 mb-1 mt-0 pt-0"></v-textarea>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-layout>
</template>
<script>
module.exports = {
data() {
return {
dialog_delivery_note: false,
selected_delivery_for_note: {},
rules: {
label: value => {
this.errors.label = !value;
return !!value || "Harus diisi !"
},
address: value => {
this.errors.address = !value;
return !!value || "Harus diisi !"
},
kelurahan: value => {
this.errors.kelurahan = !value;
return !!value || "Harus diisi !"
}
},
errors: {
label: false,
address: false,
province: false,
city: false,
district: false,
kelurahan: false
},
headersmou: [{
text: "ALAMAT",
align: "center",
sortable: false,
value: "mr",
width: "35%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "AKSI",
align: "center",
sortable: false,
value: "name",
width: "15%",
class: "pa-2 blue lighten-3 white--text"
}
],
pagination: {
descending: true,
page: 1,
rowsPerPage: 5
},
}
},
methods: {
reHTMLAddress(entry) {
var rtn = ''
if (entry) {
var perpart = entry.split("^")
rtn += "<p class='mb-0' style='font-size:12px'>" + perpart[0] + "</p>"
if (perpart[1])
rtn += "<p class='mb-0' style='font-size:12px'>" + perpart[1] + "</p>"
}
return rtn
},
add_address() {
this.dialogmou = true
},
changeBoxRight(value, idx) {
var deliveries = this.$store.state.delivery.data_deliveries
console.log(deliveries)
deliveries[idx].chex = value.chex === 'N' ? 'Y' : 'N'
console.log(deliveries[idx].chex)
this.$store.commit("delivery/update_data_deliveries", deliveries)
/* if (value.delivery_name === 'Alamat Pasien' && value.chex === 'Y') {
this.dialogmou = true
this.$store.dispatch("delivery/listmou", {id: this.xpatientid})
}
*/
},
getColorFont(value, type) {
var xcolor = 'black--text'
if (value.chex === 'Y') {
xcolor = 'teal--text'
}
return xcolor
},
updateSelected(idx, val) {
console.log('idx:' + idx)
console.log('val:' + val)
var deliveries = this.$store.state.delivery.deliveries
deliveries[idx].selected = val
this.$store.commit("delivery/update_deliveries", deliveries)
},
updateDelivery(idx, val) {
var deliveries = this.$store.state.delivery.deliveries
deliveries[idx].note = val
this.$store.commit("delivery/update_deliveries", deliveries)
},
doAction(idx, val) {
if (val.typeform === 'md') {
let dlv = this.$store.state.delivery.checked_id
dlv.push(val.idx)
this.$store.commit("delivery/update_checked_id", dlv)
this.selected_delivery_for_note = _.clone(val, true)
if (val.code == 'EMAIL')
this.selected_delivery_for_note.note = val.note
else
this.selected_delivery_for_note.note = ""
this.dialog_delivery_note = true
} else {
var deliveries = this.$store.state.delivery.deliveries
deliveries.splice(idx, 1)
this.$store.commit("delivery/update_deliveries", deliveries)
}
},
doActionNew(idx, val) {
if (val.typeform === 'origin') {
this.selected_delivery_for_note = _.clone(val, true)
var deliveries = this.$store.state.delivery.data_deliveries
deliveries[idx].chex = true
this.$store.commit("delivery/update_data_deliveries", deliveries)
if (val.delivery_code !== 'EMAIL')
this.selected_delivery_for_note.description = ""
this.dialog_delivery_note = true
} else {
var deliveries = this.$store.state.delivery.data_deliveries
deliveries.splice(idx, 1)
this.$store.commit("delivery/update_data_deliveries", deliveries)
}
},
addDeliveryNote() {
var xdt = this.selected_delivery_for_note
let dlv = this.$store.state.delivery.checked_id
dlv.push(xdt.idx)
this.$store.commit("delivery/update_checked_id", dlv)
xdt.typeform = 'note'
xdt.id = Date.now()
xdt.selected = xdt.idx
var deliveries = this.$store.state.delivery.deliveries
deliveries.push(xdt)
this.$store.commit("delivery/update_deliveries", deliveries)
this.dialog_delivery_note = false
},
addDeliveryNoteNew() {
var xdt = this.selected_delivery_for_note
xdt.typeform = 'additional'
xdt.chex = true
var deliveries = this.$store.state.delivery.data_deliveries
deliveries.push(xdt)
this.$store.commit("delivery/update_data_deliveries", deliveries)
this.dialog_delivery_note = false
},
add_new () {
let prm = {
patientid : this.xpatientid,
label : this.xlabel,
address : this.xaddress,
kelurahan : this.selected_village.M_KelurahanID
}
this.$store.dispatch('delivery/add_new', prm)
},
},
computed: {
deliveries() {
return this.$store.state.delivery.data_deliveries
},
listmous() {
return this.$store.state.delivery.listmous
},
btn_save_enabled() {
let xxx = true
if (this.errors.label || this.errors.address || this.errors.kelurahan) xxx = false
if (!this.selected_village)
xxx = false
return xxx
return true
},
dialogmou: {
get() {
return this.$store.state.delivery.dialogmou
},
set(val) {
this.$store.commit("delivery/update_dialogmou", val)
}
},
xlabel: {
get() {
return this.$store.state.delivery.xlabel
},
set(val) {
this.$store.commit("delivery/update_xlabel", val)
}
},
xaddress: {
get() {
return this.$store.state.delivery.xaddress
},
set(val) {
this.$store.commit("delivery/update_xaddress", val)
}
},
checked_id: {
get() {
return this.$store.state.delivery.checked_id
},
set(val) {
console.log(val)
this.$store.commit("delivery/update_checked_id", val)
this.$store.commit("delivery/update_deliveries_2")
}
},
xpatientid: {
get() {
return this.$store.state.delivery.xpatientid
},
set(val) {
this.$store.commit("delivery/update_xpatientid", val)
}
},
provinces() {
return this.$store.state.area.provinces
},
selected_province: {
get() {
return this.$store.state.area.selected_province
},
set(v) {
this.$store.commit('area/update_selected_area', {
type: 'province',
val: v
})
this.$store.dispatch('area/search_city')
}
},
cities() {
return this.$store.state.area.cities
},
selected_city: {
get() {
return this.$store.state.area.selected_city
},
set(v) {
this.$store.commit('area/update_selected_area', {
type: 'city',
val: v
})
this.$store.dispatch('area/search_district')
}
},
districts() {
return this.$store.state.area.districts
},
selected_district: {
get() {
return this.$store.state.area.selected_district
},
set(v) {
this.$store.commit('area/update_selected_area', {
type: 'district',
val: v
})
this.$store.dispatch('area/search_kelurahan')
}
},
villages() {
return this.$store.state.area.villages
},
selected_village: {
get() {
let x = this.$store.state.area.selected_village
if (x)
if (x.M_KelurahanID) this.errors.kelurahan = false
return x
},
set(v) {
this.$store.commit('area/update_selected_area', {
type: 'village',
val: v
})
let x = this.$store.state.area.selected_village
if (x)
if (x.M_KelurahanID) this.errors.kelurahan = false
}
},
},
mounted: function () {
this.$store.dispatch('delivery/search')
this.$store.dispatch('area/search_province')
}
}
</script>