460 lines
17 KiB
Vue
460 lines
17 KiB
Vue
<template>
|
|
<v-layout column pb-2>
|
|
<v-card >
|
|
<v-layout row pa-2 align-center wrap >
|
|
<v-flex xs6>
|
|
<div class="label-tagihan text-xs-left">Total Tagihan</div>
|
|
<v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1 class="mt-3"></v-layout>
|
|
|
|
<v-layout row wrap v-show="order_company.is_bill == 'N'">
|
|
<v-flex xs6>
|
|
<h3 class="subheading orange--text">Minimum DP ({{ order_company.min_dp }}%)</h3>
|
|
</v-flex>
|
|
<v-flex xs6>
|
|
<h3 class="subheading text-xs-right orange--text">{{ one_money(order_company.min_dp_rp) }}</h3>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
<v-layout row wrap v-show="order_company.is_bill == 'Y' && order_company.on_hold == 'Y'">
|
|
<v-flex xs12>
|
|
<h3 class="subheading red--text">{{ order_company.on_hold_text }}</h3>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
</v-flex>
|
|
<v-flex xs6>
|
|
<div class="text-tagihan text-xs-right"><kbd>{{ one_money(bill_total) }}</kbd></div>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
|
|
|
|
<v-layout column>
|
|
<v-flex xs12 v-for="(p, pi) in payments" v-bind:key="p.payment_type_id">
|
|
|
|
<v-layout row pt-2 pb-1 pl-2 align-center wrap class="border-top-dashed">
|
|
<v-flex xs12>
|
|
<v-switch
|
|
true-value="Y"
|
|
false-value="N"
|
|
v-model="payments[pi].payment_enable"
|
|
:label="p.payment_type_name"
|
|
@change="(v) => payment_enable(pi, v)"
|
|
:disabled="paid"
|
|
></v-switch>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout row pa-2 wrap >
|
|
|
|
<v-flex xs4 pr-2>
|
|
<!-- <div class="pa-2"> -->
|
|
<v-text-field
|
|
v-bind:class="[p.payment_type_code == 'CASH' ? 'input-cash' : 'input-plain', 'text-xs-right font-weight-bold']"
|
|
v-model="payments[pi].payment_actual"
|
|
:disabled="paid || (payments[pi].payment_enable == 'Y' ? false : true)"
|
|
@input="(v) => update_payments(pi, 'payment_actual', v)"
|
|
reverse
|
|
label="Jumlah"
|
|
outline
|
|
>
|
|
</v-text-field>
|
|
|
|
<!-- </div> -->
|
|
</v-flex>
|
|
<v-flex xs4 v-if="['CASH', 'VOUCHER'].indexOf(p.payment_type_code) > -1">
|
|
<!-- <div class="pa-2"> -->
|
|
<v-text-field
|
|
v-show="p.payment_type_code == 'VOUCHER'"
|
|
class="input-plain"
|
|
v-model="payments[pi].payment_note"
|
|
:disabled="paid || (payments[pi].payment_enable == 'Y' ? false : true)"
|
|
@input="(v) => update_payments(pi, 'payment_amount', v)"
|
|
reverse
|
|
:label="p.payment_note_label"
|
|
outline
|
|
>
|
|
</v-text-field>
|
|
|
|
<v-text-field
|
|
v-show="p.payment_type_code == 'CASH'"
|
|
class="input-cash"
|
|
v-model="payments[pi].payment_change_mask"
|
|
disabled
|
|
reverse
|
|
:label="p.payment_note_label"
|
|
outline
|
|
>
|
|
</v-text-field>
|
|
<!-- </div> -->
|
|
</v-flex>
|
|
|
|
<v-flex xs4 v-if="['CREDIT', 'DEBIT'].indexOf(p.payment_type_code) > -1" pr-2>
|
|
<v-autocomplete
|
|
:items="banks"
|
|
item-text="Nat_BankName"
|
|
item-value="Nat_BankID"
|
|
outline
|
|
hide-details
|
|
height="30"
|
|
label="Kartu"
|
|
@change="(v) => update_payments(pi, 'payment_card_id', v)"
|
|
></v-autocomplete>
|
|
</v-flex>
|
|
|
|
<v-flex xs4 v-if="['CREDIT', 'DEBIT'].indexOf(p.payment_type_code) > -1">
|
|
<v-autocomplete
|
|
:items="banks"
|
|
item-text="Nat_BankName"
|
|
item-value="Nat_BankID"
|
|
outline
|
|
hide-details
|
|
height="30"
|
|
label="EDC"
|
|
@change="(v) => update_payments(pi, 'payment_edc_id', v)"
|
|
></v-autocomplete>
|
|
</v-flex>
|
|
|
|
|
|
</v-layout>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
<v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
|
|
<!-- <v-layout row pa-2 align-center wrap >
|
|
<div>
|
|
<v-btn color="error" dark large @click="save" :disabled="!btn_save_enable">BAYAR</v-btn>
|
|
</div>
|
|
</v-layout> -->
|
|
<v-layout row pa-2 wrap >
|
|
|
|
<v-flex xs9>
|
|
<div>
|
|
<v-btn v-show="!is_bill" color="error" :dark="btn_save_enable && !paid" @click="save" :disabled="!btn_save_enable || paid" class="mr-0">SIMPAN & BAYAR</v-btn>
|
|
<v-btn v-show="is_bill" color="error" dark @click="print_bukti" class="mr-0">BUKTI PEMERIKSAAN</v-btn>
|
|
|
|
<!-- <v-btn color="primary" large @click="print_invoice" class="ml-0 mr-0">C INVOICE</v-btn>
|
|
<v-btn color="primary" large @click="print_control" class="ml-0">C KARTU KONTROL</v-btn> -->
|
|
<template>
|
|
|
|
<v-menu offset-y top>
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn
|
|
color="orange"
|
|
dark
|
|
v-on="on"
|
|
>
|
|
<v-icon class="mr-1">print</v-icon>
|
|
Cetak
|
|
</v-btn>
|
|
</template>
|
|
<v-list>
|
|
<v-list-tile
|
|
v-for="(item, index) in menu_print"
|
|
:key="index"
|
|
@click="print_me(item.code)"
|
|
>
|
|
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
|
|
</v-list-tile>
|
|
</v-list>
|
|
</v-menu>
|
|
|
|
</template>
|
|
|
|
<v-btn color="primary" @click="reset" class="ml-0 mr-0">
|
|
<v-icon class="mr-1">description</v-icon> BARU</v-btn>
|
|
</div>
|
|
</v-flex>
|
|
<v-flex xs3>
|
|
<div class="text-tagihan text-xs-right"><kbd>{{ one_money(payment_total) }}</kbd></div>
|
|
</v-flex>
|
|
|
|
</v-layout>
|
|
</v-card>
|
|
<one-fo-registration-payment-finish></one-fo-registration-payment-finish>
|
|
<one-dialog-print></one-dialog-print>
|
|
</v-layout>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.label-tagihan{
|
|
text-align:left;
|
|
font-size: 25px;
|
|
font-family: open sans, tahoma, sans-serif;
|
|
font-weight:700;
|
|
}
|
|
|
|
.sub-header{
|
|
text-align:left;
|
|
font-size: 18px;
|
|
font-family: open sans, tahoma, sans-serif;
|
|
font-weight:700;
|
|
}
|
|
|
|
.sub-title{
|
|
text-align:left;
|
|
font-size: 14px;
|
|
font-family: open sans, tahoma, sans-serif;
|
|
font-weight:700;
|
|
}
|
|
|
|
.text-tagihan{
|
|
text-align:left;
|
|
font-size: 42px;
|
|
font-family: open sans, tahoma, sans-serif;
|
|
}
|
|
|
|
.input-cash{
|
|
width: 100%;
|
|
/* padding: 8px 14px; */
|
|
/* box-sizing: border-box; */
|
|
/* border: 2px solid grey;
|
|
border-radius: 4px; */
|
|
font-size: 22px;
|
|
font-weight:700;
|
|
text-align:right;
|
|
}
|
|
.input-plain{
|
|
width: 100%;
|
|
/* padding: 4px 8px; */
|
|
/* box-sizing: border-box; */
|
|
/* border: 2px solid grey;
|
|
border-radius: 4px; */
|
|
font-size: 14px;
|
|
}
|
|
.v-input, .v-input__slot, .v-messages{
|
|
margin:0px;
|
|
padding:0px;
|
|
min-height: 0px;
|
|
}
|
|
.v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.border-top-dashed {
|
|
border-top: 1px dashed rgb(221,221,221)
|
|
}
|
|
</style>
|
|
<script>
|
|
module.exports = {
|
|
components : {
|
|
'one-field-verification' : httpVueLoader('../../common/oneFieldVerificationSupply.vue'),
|
|
'one-fo-registration-payment-finish' : httpVueLoader('./oneFoRegistrationPaymentFinish.vue'),
|
|
'one-dialog-print' : httpVueLoader('./oneDialogPrint.vue')
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
checkbox: true,
|
|
radioGroup: 1,
|
|
switchCash: true,
|
|
switchDebit: false,
|
|
switchKredit: false,
|
|
|
|
switch_payment_enable: [],
|
|
|
|
payment_amount: [],
|
|
menu_print: [
|
|
{ title:"Cetak Invoice", code:"P.INV" },
|
|
{ title:"Cetak Kartu Kontrol", code:"P.CC" }
|
|
]
|
|
}
|
|
},
|
|
|
|
methods : {
|
|
one_money(p) {
|
|
return window.one_money(p)
|
|
},
|
|
|
|
payment_enable (idx, v) {
|
|
let payments = this.payments
|
|
payments[idx]['payment_enable'] = v
|
|
if (v == "N") {
|
|
payments[idx]['payment_actual'] = 0
|
|
payments[idx]['payment_amount'] = 0
|
|
payments[idx]['payment_card_id'] = 0
|
|
payments[idx]['payment_change'] = 0
|
|
payments[idx]['payment_change_mask'] = 0
|
|
}
|
|
|
|
this.$store.commit('payment/update_payments', payments)
|
|
},
|
|
|
|
save() {
|
|
this.$store.dispatch("payment/save");
|
|
return
|
|
},
|
|
|
|
update_payments (idx, type, v) {
|
|
let payments = this.payments
|
|
payments[idx][type] = v
|
|
this.$store.commit('payment/update_payments', payments)
|
|
},
|
|
|
|
reset () {
|
|
location.reload()
|
|
},
|
|
|
|
print_invoice () {
|
|
this.$store.dispatch('payment/print_invoice', this.$store.state.payment.order_id)
|
|
return
|
|
},
|
|
|
|
print_control () {
|
|
this.$store.dispatch('payment/print_control', this.$store.state.payment.order_id)
|
|
return
|
|
},
|
|
|
|
print_me (c) {
|
|
if (c == "P.INV")
|
|
return this.print_invoice()
|
|
else if (c == "P.CC")
|
|
return this.print_control()
|
|
},
|
|
|
|
xxx(v) {
|
|
alert(v)
|
|
},
|
|
|
|
print_bukti() {
|
|
this.$store.dispatch('payment/print_nota', this.order_id)
|
|
}
|
|
},
|
|
|
|
computed : {
|
|
bill_total() {
|
|
return this.$store.state.payment.order_total
|
|
},
|
|
|
|
payment_total () {
|
|
return this.$store.state.payment.payment_total
|
|
},
|
|
|
|
payment_cash_amount : {
|
|
get () {
|
|
return this.$store.state.payment.order_total
|
|
},
|
|
set (v) {
|
|
// this.$store.commit('payment/update_payment', {type:'cash',amount:v})
|
|
return
|
|
}
|
|
},
|
|
|
|
payment_debit_amount : {
|
|
get () {
|
|
return 0
|
|
},
|
|
set (v) {
|
|
return
|
|
}
|
|
},
|
|
|
|
payment_credit_amount : {
|
|
get () {
|
|
return 0
|
|
},
|
|
set (v) {
|
|
return
|
|
}
|
|
},
|
|
|
|
payments : {
|
|
get () {
|
|
let p = this.$store.state.payment.payments
|
|
for (let i in p)
|
|
p[i].payment_change_mask = window.one_money(p[i].payment_change)
|
|
|
|
return p
|
|
// [{"payment_type_id":"1","payment_type_name":"Cash","payment_type_code":"CASH","payment_amount":"0","payment_note":"","payment_note_label":"Kembali","payment_enable":"N"},{"payment_type_id":"2","payment_type_name":"Debit","payment_type_code":"DEBIT","payment_amount":"0","payment_note":"","payment_note_label":"Nomor Kartu","payment_enable":"N"},{"payment_type_id":"3","payment_type_name":"Credit","payment_type_code":"CREDIT","payment_amount":"0","payment_note":"","payment_note_label":"Nomor Kartu","payment_enable":"N"},{"payment_type_id":"4","payment_type_name":"Voucher","payment_type_code":"VOUCHER","payment_amount":"0","payment_note":"","payment_note_label":"Nomor Voucher","payment_enable":"N"}]
|
|
},
|
|
set (v) {
|
|
this.$store.commit('payment/update_payments', v)
|
|
return
|
|
}
|
|
},
|
|
|
|
order_id : {
|
|
get () {
|
|
return this.$store.state.payment.order_id
|
|
},
|
|
|
|
set (v) {
|
|
return
|
|
}
|
|
},
|
|
|
|
btn_save_enable () {
|
|
if (this.payments.length < 1)
|
|
return false
|
|
|
|
let en = false
|
|
let sm = 0
|
|
for (let i in this.payments) {
|
|
let p = this.payments[i]
|
|
if (p.payment_enable == "Y") {
|
|
en = true
|
|
sm = sm + Math.round(p.payment_amount)
|
|
|
|
// IF DEBIT OR CREDIT
|
|
if (['DEBIT', 'CREDIT'].indexOf(p.payment_type_code) > -1) {
|
|
if (p.payment_edc_id == 0 || p.payment_card_id == 0)
|
|
en = false
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!en) return false
|
|
|
|
if (this.$store.state.payment.order_id == 0 ||
|
|
this.$store.state.payment.order_id == "0")
|
|
return false;
|
|
|
|
if (sm == 0)
|
|
return false
|
|
|
|
return true
|
|
},
|
|
|
|
paid : {
|
|
get () { return this.$store.state.payment.paid },
|
|
set (v) { this.$store.commit('payment/update_paid', v) }
|
|
},
|
|
|
|
order_company () {
|
|
return this.$store.state.payment.order_company
|
|
},
|
|
|
|
banks () {
|
|
return this.$store.state.other.banks
|
|
},
|
|
|
|
is_bill () {
|
|
return this.$store.state.company.selected_mou.M_MouIsBill == "Y"
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
this.$store.dispatch('payment/search')
|
|
this.$store.dispatch('other/search_bank')
|
|
},
|
|
|
|
watch : {
|
|
switch_payment_enable (n, o) {
|
|
if (n != o) {
|
|
if (n.length < o.length) {
|
|
for (let i in o)
|
|
if (n.indexOf(o[i]) < 0)
|
|
return
|
|
}
|
|
}
|
|
},
|
|
|
|
order_id (n, o) {
|
|
if (n == 0 || n == "0")
|
|
this.$store.commit("order/update_tab_enable", [2, false])
|
|
else
|
|
this.$store.commit("order/update_tab_enable", [2, true])
|
|
}
|
|
}
|
|
}
|
|
</script>
|