|
@@ -0,0 +1,246 @@
|
|
|
+<template lang="pug">
|
|
|
+ modal(name='payments-reference' transition='nice-modal-fade' :classes="['v--modal', 'payments-reference', is_not_completed &&'is-not-completed']" @before-close="beforeClose" @before-open="beforeOpen")
|
|
|
+ form
|
|
|
+ .payment-reference-title
|
|
|
+ h3 Detalles de Operaciones Bancarias
|
|
|
+ hr
|
|
|
+ .payment-reference-item
|
|
|
+ label.payment-reference-item-label Banco / Entidad
|
|
|
+ select.payment-reference-item-input(v-model='selectBank' :class="{'item-input-invalid': !this.selectedPaymentsBank}")
|
|
|
+ option(v-for="bank in bank" :value="bank") {{ bank.name }}
|
|
|
+ .payment-reference-item
|
|
|
+ label.payment-reference-item-label Tipo de Operación
|
|
|
+ select.payment-reference-item-input(v-model="selectBankType" :class="{'item-input-invalid': !this.selectedPaymentsBankType}")
|
|
|
+ option(v-for="bankType in bankType" :value="bankType") {{ bankType.name }}
|
|
|
+ .payment-reference-item
|
|
|
+ label.payment-reference-item-label Nº cheque / boleta
|
|
|
+ input.payment-reference-item-input(v-model='bankRef' required='required' :class="{'item-input-invalid': !this.paymentsBankRef}")
|
|
|
+ .payment-reference-item
|
|
|
+ label.payment-reference-item-label Fecha de Vencimiento
|
|
|
+ input.payment-reference-item-input(v-model='dateMaturity' type="date" value='' :class="{'item-input-invalid': !this.paymentsBankDateMaturity}")
|
|
|
+ .payment-reference-item(:class="{'item-disabled': this.bankTypeSelected}")
|
|
|
+ label.payment-reference-item-label Nº Cuenta
|
|
|
+ input.payment-reference-item-input(:disabled="this.bankTypeSelected" v-model='bankNumberCta' value='')
|
|
|
+ .payment-reference-item(:class="{'item-disabled': this.bankTypeSelected}")
|
|
|
+ label.payment-reference-item-label Titular
|
|
|
+ input.payment-reference-item-input(:disabled="this.bankTypeSelected" v-model='bankNameHolder' value='')
|
|
|
+ hr
|
|
|
+ .payment-reference-options
|
|
|
+ button.payments-reference-button(@click.prevent='onAccept') Aceptar
|
|
|
+ button.payments-reference-button(@click.prevent='onCancel') Cancelar
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+ import { mapGetters, mapActions } from 'vuex'
|
|
|
+ import {
|
|
|
+ SELECT_PAYMENTS_PURCHASES_BANK,
|
|
|
+ SELECT_PAYMENTS_PURCHASES_BANK_TYPE,
|
|
|
+ CHANGE_PAYMENTS_PURCHASES_BANK_REF,
|
|
|
+ CHANGE_PAYMENTS_PURCHASES_BANK_DATE_MATURITY,
|
|
|
+ CHANGE_PAYMENTS_PURCHASES_BANK_NUMBER_CTA,
|
|
|
+ CHANGE_PAYMENTS_PURCHASES_BANK_NAME_HOLDER
|
|
|
+ } from '@/constants/actionTypes'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ show: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ selectBank: {
|
|
|
+ get() {
|
|
|
+ return (this.selectedPaymentsBank) || -1
|
|
|
+ },
|
|
|
+ set(value) {
|
|
|
+ if (value)
|
|
|
+ this.selectPaymentsPurchasesBank(value)
|
|
|
+ this.is_not_completed = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ selectBankType: {
|
|
|
+ get() {
|
|
|
+ return (this.selectedPaymentsBankType) || -1
|
|
|
+ },
|
|
|
+ set(value) {
|
|
|
+ if (value)
|
|
|
+ this.selectPaymentsPurchasesBankType(value)
|
|
|
+ this.bankTypeSelected = value.code === "TJ"
|
|
|
+ this.is_not_completed = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ dateMaturity: {
|
|
|
+ get() {
|
|
|
+ return this.paymentsBankDateMaturity || ''
|
|
|
+ },
|
|
|
+ set(value){
|
|
|
+ this.changePaymentsPurchasesBankDateMaturity(value)
|
|
|
+ this.is_not_completed = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ bankRef: {
|
|
|
+ get() {
|
|
|
+ return this.paymentsBankRef || ''
|
|
|
+ },
|
|
|
+ set(value){
|
|
|
+ this.changePaymentsPurchasesBankRef(value)
|
|
|
+ this.is_not_completed = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ bankNumberCta: {
|
|
|
+ get() {
|
|
|
+ return this.paymentsBankNumberCta || ''
|
|
|
+ },
|
|
|
+ set(value) {
|
|
|
+ this.changePaymentsPurchasesBankNumberCta(value)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ bankNameHolder: {
|
|
|
+ get() {
|
|
|
+ return this.paymentsBankNameHolder || ''
|
|
|
+ },
|
|
|
+ set(value) {
|
|
|
+ this.changePaymentsPurchasesBankNameHolder(value)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ ...mapGetters([
|
|
|
+ 'bank',
|
|
|
+ 'bankType',
|
|
|
+ 'selectedPaymentsBank',
|
|
|
+ 'selectedPaymentsBankType',
|
|
|
+ 'paymentsBankRef',
|
|
|
+ 'paymentsBankDateMaturity',
|
|
|
+ 'paymentsBankNumberCta',
|
|
|
+ 'paymentsBankNameHolder'
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ beforeClose(e) {
|
|
|
+ if ((!this.isValid()) && (this.is_cancel === false)) {
|
|
|
+ this.is_not_completed = true
|
|
|
+ e.stop()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeOpen(e){
|
|
|
+ this.is_cancel = false
|
|
|
+ this.is_not_completed = false
|
|
|
+ this.bankTypeSelected = false
|
|
|
+ },
|
|
|
+ onAccept(e) {
|
|
|
+ if (!this.isValid())
|
|
|
+ return
|
|
|
+ this.$emit('onAccept', 'Accept')
|
|
|
+ },
|
|
|
+ onCancel(e) {
|
|
|
+ this.is_cancel= true
|
|
|
+ this.$emit('onCancel', 'Cancel')
|
|
|
+ },
|
|
|
+
|
|
|
+ isValid() {
|
|
|
+
|
|
|
+ if (!this.selectedPaymentsBank) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.selectedPaymentsBankType) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.paymentsBankDateMaturity) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.paymentsBankRef) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ /*Return final si pasa todas las validaciones */
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ ...mapActions([
|
|
|
+ SELECT_PAYMENTS_PURCHASES_BANK,
|
|
|
+ SELECT_PAYMENTS_PURCHASES_BANK_TYPE,
|
|
|
+ CHANGE_PAYMENTS_PURCHASES_BANK_REF,
|
|
|
+ CHANGE_PAYMENTS_PURCHASES_BANK_DATE_MATURITY,
|
|
|
+ CHANGE_PAYMENTS_PURCHASES_BANK_NUMBER_CTA,
|
|
|
+ CHANGE_PAYMENTS_PURCHASES_BANK_NAME_HOLDER
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ show(value) {
|
|
|
+ if (value) {
|
|
|
+ this.$modal.show('payments-reference')
|
|
|
+ } else {
|
|
|
+ this.$modal.hide('payments-reference')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ is_cancel: false,
|
|
|
+ is_not_completed: false,
|
|
|
+ bankTypeSelected: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="sass">
|
|
|
+ @import '../../assets/variables'
|
|
|
+ .payments-reference
|
|
|
+ width: 600px
|
|
|
+ height: 400px !important
|
|
|
+ transition: box-shadow 1s
|
|
|
+ &.is-not-completed
|
|
|
+ box-shadow: 0 24px 80px -2px rgba(255, 0, 0, .6) !important
|
|
|
+ form
|
|
|
+ width: 100%
|
|
|
+ height: 290px
|
|
|
+ padding: 15px
|
|
|
+ .payment-reference-title
|
|
|
+ h3
|
|
|
+ color: $app-separator-color
|
|
|
+ font-size: 15pt
|
|
|
+ margin-top: 10px
|
|
|
+ hr
|
|
|
+ margin-top: 10px
|
|
|
+ margin-bottom: 10px
|
|
|
+ .payment-reference-item
|
|
|
+ width: 100%
|
|
|
+ height: 30px
|
|
|
+ margin-bottom: 10px
|
|
|
+ &.item-disabled
|
|
|
+ color: #9e9e9e
|
|
|
+ .payment-reference-item-label
|
|
|
+ width: 30%
|
|
|
+ height: 30px
|
|
|
+ font-size: 10pt
|
|
|
+ .payment-reference-item-input
|
|
|
+ width: 70% !important
|
|
|
+ height: 30px
|
|
|
+ font-size: 10pt
|
|
|
+ float: right
|
|
|
+ &.item-input-invalid
|
|
|
+ border-color: $app-error-color
|
|
|
+ box-shadow: 1px 1px 2px $app-error-color, -1px -1px 2px $app-error-color
|
|
|
+ hr
|
|
|
+
|
|
|
+ .payment-reference-options
|
|
|
+ float: right
|
|
|
+ .payments-reference-button
|
|
|
+ width: 160px
|
|
|
+ height: 40px
|
|
|
+ border: none
|
|
|
+ box-shadow: none
|
|
|
+ border-radius: 0
|
|
|
+ margin-right: 5px
|
|
|
+ background: $app-main-color
|
|
|
+ color: $app-bg-color
|
|
|
+</style>
|