187 lines
6.6 KiB
Vue
187 lines
6.6 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-flex>
|
|
<v-flex xs6>
|
|
<div class="text-tagihan text-xs-right"><kbd>10,000,000,00</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)"
|
|
></v-switch>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout row pa-2 align-center wrap >
|
|
<v-flex xs2>
|
|
<div class="sub-title pl-2">Jumlah</div>
|
|
</v-flex>
|
|
<v-flex xs4>
|
|
<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="payments[pi].payment_enable == 'Y' ? false : true"
|
|
@input="(v) => update_payments(pi, 'payment_actual', v)"
|
|
reverse
|
|
|
|
>
|
|
</v-text-field>
|
|
|
|
</div>
|
|
</v-flex>
|
|
<v-flex xs2>
|
|
<div class="sub-title pl-2">{{ p.payment_note_label }}</div>
|
|
</v-flex>
|
|
<v-flex xs4>
|
|
<div class="pa-2">
|
|
<v-text-field
|
|
v-show="p.payment_type_code != 'CASH'"
|
|
class="input-plain"
|
|
v-model="payments[pi].payment_note"
|
|
:disabled="payments[pi].payment_enable == 'Y' ? false : true"
|
|
@input="(v) => update_payments(pi, 'payment_amount', v)"
|
|
reverse
|
|
|
|
>
|
|
</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
|
|
|
|
>
|
|
</v-text-field>
|
|
</div>
|
|
</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 xs6>
|
|
<div>
|
|
<v-btn color="error" :dark="btn_save_enable" large @click="save" :disabled="!btn_save_enable">SIMPAN & BAYAR</v-btn>
|
|
<v-btn color="primary" large @click="reset" class="ml-2">ORDER BARU >></v-btn>
|
|
</div>
|
|
</v-flex>
|
|
<v-flex xs6>
|
|
<div class="text-tagihan text-xs-right"><kbd>{{ one_money(payment_total) }}</kbd></div>
|
|
</v-flex>
|
|
|
|
</v-layout>
|
|
</v-card>
|
|
|
|
</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 = {
|
|
methods : {
|
|
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
checkbox: true,
|
|
radioGroup: 1,
|
|
switchCash: true,
|
|
switchDebit: false,
|
|
switchKredit: false,
|
|
|
|
switch_payment_enable: [],
|
|
|
|
payment_amount: []
|
|
}
|
|
},
|
|
computed : {
|
|
|
|
|
|
},
|
|
mounted () {
|
|
this.$store.dispatch('payment/search')
|
|
}
|
|
}
|
|
</script>
|