|
|
@@ -1,10 +1,67 @@
|
|
|
<template lang="pug">
|
|
|
.voucher-ticket
|
|
|
- h2 aqui va estar el detalle q va pagar
|
|
|
+ .voucher-ticket-wrapper
|
|
|
+ form.voucher-ticket-from
|
|
|
+ .voucher-ticket-from-separator
|
|
|
+ h3 Detalles de pagos
|
|
|
+ hr
|
|
|
+ .voucher-ticket-from-item
|
|
|
+ label.voucher-ticket-from-label Cliente
|
|
|
+ label.voucher-ticket-from-input {{ getPartner() }}
|
|
|
+ .voucher-ticket-from-item
|
|
|
+ label.voucher-ticket-from-label Factura número
|
|
|
+ label.voucher-ticket-from-input {{ getInvoice() }}
|
|
|
+ .voucher-ticket-from-grid-header
|
|
|
+ label.voucher-ticket-from-grid-header-left Vencimiento
|
|
|
+ label.voucher-ticket-from-grid-header-right Monto
|
|
|
+ .voucher-ticket-from-grid
|
|
|
+ .voucher-ticket-from-grid-item(v-for="(line, index) in addMove")
|
|
|
+ label.voucher-ticket-from-grid-item-left {{ formatDate(line.date_maturity) }}
|
|
|
+ label.voucher-ticket-from-grid-item-right {{ formatNumber(line.amount_residual) }} {{ getSymbol() }}
|
|
|
+ .voucher-ticket-from-item-total
|
|
|
+ label.voucher-ticket-from-label-total Total
|
|
|
+ label.voucher-ticket-from-input-total {{ getTotal() }} {{ getSymbol() }}
|
|
|
+ .voucher-ticket-from-item-total
|
|
|
+ label.voucher-ticket-from-label-total Pagado
|
|
|
+ label.voucher-ticket-from-input-total {{ 0 }} {{ getSymbol() }}
|
|
|
+ .voucher-ticket-from-item-total
|
|
|
+ label.voucher-ticket-from-label-total Saldo
|
|
|
+ label.voucher-ticket-from-input-total {{ getTotal() }} {{ getSymbol() }}
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+
|
|
|
+ import { mapGetters, mapActions } from 'vuex'
|
|
|
+
|
|
|
export default {
|
|
|
+ computed: {
|
|
|
+ ...mapGetters([
|
|
|
+ 'selectedPartner',
|
|
|
+ 'selectedInvoices',
|
|
|
+ 'addMove',
|
|
|
+ 'total'
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getPartner() {
|
|
|
+ return !!this.selectedPartner ? this.selectedPartner.display_name : ''
|
|
|
+ },
|
|
|
+ getInvoice() {
|
|
|
+ return !!this.selectedInvoices ? this.selectedInvoices.number : ''
|
|
|
+ },
|
|
|
+ formatDate(date) {
|
|
|
+ return moment(date).format('DD-MM-YYYY');
|
|
|
+ },
|
|
|
+ formatNumber(amount) {
|
|
|
+ return accounting.format(amount, 0,'.', ',')
|
|
|
+ },
|
|
|
+ getSymbol() {
|
|
|
+ return this.selectedInvoices.currency_symbol
|
|
|
+ },
|
|
|
+ getTotal() {
|
|
|
+ return !!this.total ? accounting.format(this.total, 0,'.', ',') : 0
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -14,9 +71,131 @@
|
|
|
height: 100%
|
|
|
font-size: 8pt
|
|
|
display: flex
|
|
|
- // padding-left: 5px
|
|
|
- // display: inline-block
|
|
|
- background: azure
|
|
|
- border: 1px solid green
|
|
|
+
|
|
|
+ .voucher-ticket-wrapper
|
|
|
+ width: 100%
|
|
|
+ height: 460px
|
|
|
+ margin: 10px
|
|
|
+ border: 1px solid #d3d3d3
|
|
|
+
|
|
|
+ .voucher-ticket-from
|
|
|
+ width: 100%
|
|
|
+ height: 100%
|
|
|
+
|
|
|
+ .voucher-ticket-from-separator
|
|
|
+ h3
|
|
|
+ color: #9e9e9e
|
|
|
+ font:
|
|
|
+ size: 16pt
|
|
|
+ margin-left: 10px
|
|
|
+ margin-right: 10px
|
|
|
+ text-align: center
|
|
|
+ hr
|
|
|
+ margin-top: 3px
|
|
|
+ margin-left: 10px
|
|
|
+ margin-right: 10px
|
|
|
+
|
|
|
+ .voucher-ticket-from-item
|
|
|
+ width: 100%
|
|
|
+ height: 40px
|
|
|
+ margin-bottom: 5px
|
|
|
+
|
|
|
+ .voucher-ticket-from-label
|
|
|
+ width: 150px
|
|
|
+ height: 35px
|
|
|
+ font:
|
|
|
+ size: 10pt
|
|
|
+ weight: bold
|
|
|
+ padding-left: 10px
|
|
|
+
|
|
|
+ .voucher-ticket-from-input
|
|
|
+ width: 290px
|
|
|
+ height: 25px
|
|
|
+ font:
|
|
|
+ size: 10pt
|
|
|
+ weight: bold
|
|
|
+ border-left: 0px
|
|
|
+ border-top: 0px
|
|
|
+ border-right: 0px
|
|
|
+ border-bottom: 1px solid #dedede
|
|
|
+
|
|
|
+ .voucher-ticket-from-grid-header
|
|
|
+ width: calc(100% - 20px)
|
|
|
+ height: 30px
|
|
|
+ margin: 0px 10px
|
|
|
+ border: 1px solid #d3d3d3
|
|
|
+ background: #f5f5f5
|
|
|
+
|
|
|
+ .voucher-ticket-from-grid-header-left, .voucher-ticket-from-grid-header-right
|
|
|
+ width: 213px
|
|
|
+ height: 30px
|
|
|
+ font:
|
|
|
+ size: 10pt
|
|
|
+ padding-left: 10px
|
|
|
+ margin-top: 5px
|
|
|
+
|
|
|
+ .voucher-ticket-from-grid-header-left
|
|
|
+ margin-left: 5px
|
|
|
+ text-align: left
|
|
|
+
|
|
|
+ .voucher-ticket-from-grid-header-right
|
|
|
+ margin-right: 5px
|
|
|
+ text-align: center
|
|
|
+
|
|
|
+ .voucher-ticket-from-grid
|
|
|
+ width: calc(100% - 20px)
|
|
|
+ height: 160px
|
|
|
+ overflow-y: auto
|
|
|
+ margin: 0px 10px
|
|
|
+ border: 1px solid #d3d3d3
|
|
|
+
|
|
|
+ .voucher-ticket-from-grid-item
|
|
|
+ width: calc(100% - 10px )
|
|
|
+ height: 30px
|
|
|
+ padding-top: 1px
|
|
|
+ border-bottom: 1px solid #dedede
|
|
|
+ margin-left: 5px
|
|
|
+ margin-right: 5px
|
|
|
+
|
|
|
+ .voucher-ticket-from-grid-item-left, .voucher-ticket-from-grid-item-right
|
|
|
+ width: 205px
|
|
|
+ height: 30px
|
|
|
+ font:
|
|
|
+ size: 10pt
|
|
|
+ padding-left: 10px
|
|
|
+ margin-top: 5px
|
|
|
+
|
|
|
+ .voucher-ticket-from-grid-item-left
|
|
|
+ text-align: left
|
|
|
+
|
|
|
+ .voucher-ticket-from-grid-item-right
|
|
|
+ text-align: right
|
|
|
+ padding-right: 15px
|
|
|
+
|
|
|
+
|
|
|
+ .voucher-ticket-from-item-total
|
|
|
+ width: 100%
|
|
|
+ height: 25px
|
|
|
+
|
|
|
+ .voucher-ticket-from-label-total
|
|
|
+ width: 300px
|
|
|
+ height: 25px
|
|
|
+ margin-top: 15px
|
|
|
+ font:
|
|
|
+ size: 10pt
|
|
|
+ weight: bold
|
|
|
+ text-align: right
|
|
|
+ padding-right: 15px
|
|
|
+
|
|
|
+ .voucher-ticket-from-input-total
|
|
|
+ width: 150px
|
|
|
+ height: 25px
|
|
|
+ margin-top: 15px
|
|
|
+ text-align: right
|
|
|
+ padding-right: 15px
|
|
|
+ font:
|
|
|
+ size: 10pt
|
|
|
+ weight: bold
|
|
|
+ border-bottom: 1px solid #dedede
|
|
|
|
|
|
</style>
|
adrielso