123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247 |
- <template lang="pug">
- modal(
- name='payment-bank-modal'
- adaptive='true'
- width='800px'
- height='auto'
- transition='nice-modal-fade'
- :classes="['v--modal', 'payment-bank-modal']"
- @before-close='beforeClose'
- )
- form-wizard(
- title='Pago Bancario'
- subtitle=''
- color='#7c7bad'
- ref='wizard'
- )
- tab-content(
- title='Qué tipo de operación es?'
- :beforeChange='checkJournalSelectionStep'
- )
- card-grid(
- :items='journals'
- @onSelect='selectBankJournal'
- )
- tab-content(title='Qué detalles necesita?')
- form.payment-details-form(v-if='selectedJournal')
- .form-item(v-for='(field, index) in selectedJournal.fieldsAllowed' :key='index')
- label.form-label {{ field.label }}
- input.form-input(
- v-if="field.string.typeField === 'char'"
- v-model='values[field.name]'
- )
- date-picker.form-input(
- v-else-if="field.string.typeField === 'date'"
- v-model='values[field.name]'
- input-class='form-input'
- lang='es'
- format='DD/MM/YYYY'
- :editable='false'
- :not-before="new Date()"
- )
- dropdown-searcher.form-input(
- v-else-if="field.string.typeField === 'many2one' && field.name === 'bank_id'"
- :items='banks'
- @onSelect='selectedItem => onSelectInDropdown(field.name, selectedItem.id)'
- )
- dropdown-searcher.form-input(
- v-else-if="field.string.typeField === 'many2one' && field.name === 'cheque_type_id'"
- :items='chequeTypes'
- @onSelect='selectedItem => onSelectInDropdown(field.name, selectedItem.id)'
- )
- tab-content(title='De qué monto es la operación?')
- form.payment-details-form
- .form-item
- label.form-label Monto del Pago
- //- input.form-input(v-model='amount')
- input-dropdown.form-input(
- format='number'
- :value='values.amount'
- @onChangeValue='onChangeAmount'
- )
- template(
- slot='footer'
- slot-scope='props'
- )
- div(class='wizard-footer-left')
- wizard-button(
- v-if='props.activeTabIndex > 0'
- @click.native='props.prevTab()'
- :style='props.fillButtonStyle'
- ) Volver
- wizard-button(
- v-else
- @click.native='onCancel'
- :style='props.fillButtonStyle'
- ) Cancelar
- div(class='wizard-footer-right')
- wizard-button(
- v-if='!props.isLastStep'
- class='wizard-footer-right'
- :style='props.fillButtonStyle'
- @click.native='goNext'
- ) Siguiente
- wizard-button(
- v-else
- class='wizard-footer-right finish-button'
- :style='props.fillButtonStyle'
- @click.native='onDone'
- ) {{ props.isLastStep ? 'Hecho' : 'Siguiente' }}
- </template>
- <script>
- import { FormWizard, TabContent, WizardButton } from 'vue-form-wizard'
- import DatePicker from 'vue2-datepicker'
- import { CardGrid, DropdownSearcher, InputDropdown } from '../common'
- export default {
- props: {
- initialAmount: {
- type: Number,
- required: true
- },
- journals: {
- type: Array,
- required: true
- },
- hasSelectedJournal: {
- type: Boolean,
- required: true
- },
- selectedJournal: {
- type: Boolean,
- required: true
- },
- banks: {
- type: Array,
- required: true
- },
- chequeTypes: {
- type: Array,
- required: true
- },
- show: {
- type: Boolean,
- required: true
- }
- },
- computed: {
- amount: {
- get() {
- return this.values.amount
- },
- set(value) {
- this.values.amount = value
- }
- }
- },
- components: {
- FormWizard,
- TabContent,
- WizardButton,
- DropdownSearcher,
- CardGrid,
- DatePicker,
- InputDropdown
- },
- watch: {
- show(value) {
- this.values = {}
- this.values.amount = this.initialAmount
- if (!value) {
- this.$modal.hide('payment-bank-modal')
- return
- }
- this.$modal.show('payment-bank-modal')
- },
- initialAmount(value) {
- this.values.amount = value
- }
- },
- methods: {
- beforeClose(e) {
- if (this.show) {
- e.stop()
- }
- },
- goNext() {
- if (this.journalStepIncomplete()) {
- this.$emit('onNotify', 'El tipo de operación seleccionado no está configurado')
- return
- }
- if (this.fieldsStepIncomplete()) {
- this.$emit('onNotify', 'Algunos campos requeridos están incompletos')
- return
- }
- if (this.amountStepIncomplete()) {
- this.$emit('onNotify', 'El monto no es válido')
- return
- }
- this.$refs.wizard.nextTab()
- },
- journalStepIncomplete() {
- return this.$refs.wizard.activeTabIndex == 0 && !this.selectedJournal || !this.selectedJournal.fieldsAllowed.length
- },
- fieldsStepIncomplete() {
- let completed = false;
- for (let field of this.selectedJournal.fieldsAllowed) {
- if (field.string.required) {
- completed = !!this.values[field.name]
- }
- }
- return this.$refs.wizard.activeTabIndex == 1 && !completed
- },
- amountStepIncomplete() {
- return false
- },
- selectBankJournal(journal) {
- this.$emit('onSelectBankJounal', journal.id)
- },
- onSelectInDropdown(fieldName, selectedId) {
- this.values[fieldName] = selectedId
- },
- onChangeAmount(value) {
- this.values.amount = value
- },
- onDone() {
- this.$emit('onDone', this.values)
- },
- onCancel() {
- this.$emit('onCancel')
- }
- },
- data() {
- return {
- values: {}
- }
- }
- }
- </script>
- <style lang="sass">
- .payment-bank-modal
- padding: 0 !important
- &::before
- content: ''
- display: block
- position: absolute
- background-size: cover
- filter: blur(3px)
- z-index: -1
- .wizard-tab-content
- padding-bottom: 50px !important
- .wizard-tab-container
- justify-content: center !important
- align-items: center !important
- .payment-details-form
- width: 100%
- .form-input
- color: #4c4c4c
- </style>
|