BankPaymentModal.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. <template lang="pug">
  2. modal(
  3. name='payment-bank-modal'
  4. adaptive='true'
  5. width='800px'
  6. height='auto'
  7. transition='nice-modal-fade'
  8. :classes="['v--modal', 'payment-bank-modal']"
  9. @before-close='beforeClose'
  10. )
  11. form-wizard(
  12. title='Pago Bancario'
  13. subtitle=''
  14. color='#7c7bad'
  15. ref='wizard'
  16. )
  17. tab-content(
  18. title='Qué tipo de operación es?'
  19. :beforeChange='checkJournalSelectionStep'
  20. )
  21. card-grid(
  22. :items='journals'
  23. @onSelect='selectBankJournal'
  24. )
  25. tab-content(title='Qué detalles necesita?')
  26. form.payment-details-form(v-if='selectedJournal')
  27. .form-item(v-for='(field, index) in selectedJournal.fieldsAllowed' :key='index')
  28. label.form-label {{ field.label }}
  29. input.form-input(
  30. v-if="field.string.typeField === 'char'"
  31. v-model='values[field.name]'
  32. )
  33. date-picker.form-input(
  34. v-else-if="field.string.typeField === 'date'"
  35. v-model='values[field.name]'
  36. input-class='form-input'
  37. lang='es'
  38. format='DD/MM/YYYY'
  39. :editable='false'
  40. :not-before="new Date()"
  41. )
  42. dropdown-searcher.form-input(
  43. v-else-if="field.string.typeField === 'many2one' && field.name === 'bank_id'"
  44. :items='banks'
  45. @onSelect='selectedItem => onSelectInDropdown(field.name, selectedItem.id)'
  46. )
  47. dropdown-searcher.form-input(
  48. v-else-if="field.string.typeField === 'many2one' && field.name === 'cheque_type_id'"
  49. :items='chequeTypes'
  50. @onSelect='selectedItem => onSelectInDropdown(field.name, selectedItem.id)'
  51. )
  52. tab-content(title='De qué monto es la operación?')
  53. form.payment-details-form
  54. .form-item
  55. label.form-label Monto del Pago
  56. //- input.form-input(v-model='amount')
  57. input-dropdown.form-input(
  58. format='number'
  59. :value='values.amount'
  60. @onChangeValue='onChangeAmount'
  61. )
  62. template(
  63. slot='footer'
  64. slot-scope='props'
  65. )
  66. div(class='wizard-footer-left')
  67. wizard-button(
  68. v-if='props.activeTabIndex > 0'
  69. @click.native='props.prevTab()'
  70. :style='props.fillButtonStyle'
  71. ) Volver
  72. wizard-button(
  73. v-else
  74. @click.native='onCancel'
  75. :style='props.fillButtonStyle'
  76. ) Cancelar
  77. div(class='wizard-footer-right')
  78. wizard-button(
  79. v-if='!props.isLastStep'
  80. class='wizard-footer-right'
  81. :style='props.fillButtonStyle'
  82. @click.native='goNext'
  83. ) Siguiente
  84. wizard-button(
  85. v-else
  86. class='wizard-footer-right finish-button'
  87. :style='props.fillButtonStyle'
  88. @click.native='onDone'
  89. ) {{ props.isLastStep ? 'Hecho' : 'Siguiente' }}
  90. </template>
  91. <script>
  92. import { FormWizard, TabContent, WizardButton } from 'vue-form-wizard'
  93. import DatePicker from 'vue2-datepicker'
  94. import { CardGrid, DropdownSearcher, InputDropdown } from '../common'
  95. export default {
  96. props: {
  97. initialAmount: {
  98. type: Number,
  99. required: true
  100. },
  101. journals: {
  102. type: Array,
  103. required: true
  104. },
  105. hasSelectedJournal: {
  106. type: Boolean,
  107. required: true
  108. },
  109. selectedJournal: {
  110. type: Boolean,
  111. required: true
  112. },
  113. banks: {
  114. type: Array,
  115. required: true
  116. },
  117. chequeTypes: {
  118. type: Array,
  119. required: true
  120. },
  121. show: {
  122. type: Boolean,
  123. required: true
  124. }
  125. },
  126. computed: {
  127. amount: {
  128. get() {
  129. return this.values.amount
  130. },
  131. set(value) {
  132. this.values.amount = value
  133. }
  134. }
  135. },
  136. components: {
  137. FormWizard,
  138. TabContent,
  139. WizardButton,
  140. DropdownSearcher,
  141. CardGrid,
  142. DatePicker,
  143. InputDropdown
  144. },
  145. watch: {
  146. show(value) {
  147. this.values = {}
  148. this.values.amount = this.initialAmount
  149. if (!value) {
  150. this.$modal.hide('payment-bank-modal')
  151. return
  152. }
  153. this.$modal.show('payment-bank-modal')
  154. },
  155. initialAmount(value) {
  156. this.values.amount = value
  157. }
  158. },
  159. methods: {
  160. beforeClose(e) {
  161. if (this.show) {
  162. e.stop()
  163. }
  164. },
  165. goNext() {
  166. if (this.journalStepIncomplete()) {
  167. this.$emit('onNotify', 'El tipo de operación seleccionado no está configurado')
  168. return
  169. }
  170. if (this.fieldsStepIncomplete()) {
  171. this.$emit('onNotify', 'Algunos campos requeridos están incompletos')
  172. return
  173. }
  174. if (this.amountStepIncomplete()) {
  175. this.$emit('onNotify', 'El monto no es válido')
  176. return
  177. }
  178. this.$refs.wizard.nextTab()
  179. },
  180. journalStepIncomplete() {
  181. return this.$refs.wizard.activeTabIndex == 0 && !this.selectedJournal || !this.selectedJournal.fieldsAllowed.length
  182. },
  183. fieldsStepIncomplete() {
  184. let completed = false;
  185. for (let field of this.selectedJournal.fieldsAllowed) {
  186. if (field.string.required) {
  187. completed = !!this.values[field.name]
  188. }
  189. }
  190. return this.$refs.wizard.activeTabIndex == 1 && !completed
  191. },
  192. amountStepIncomplete() {
  193. return false
  194. },
  195. selectBankJournal(journal) {
  196. this.$emit('onSelectBankJounal', journal.id)
  197. },
  198. onSelectInDropdown(fieldName, selectedId) {
  199. this.values[fieldName] = selectedId
  200. },
  201. onChangeAmount(value) {
  202. this.values.amount = value
  203. },
  204. onDone() {
  205. this.$emit('onDone', this.values)
  206. },
  207. onCancel() {
  208. this.$emit('onCancel')
  209. }
  210. },
  211. data() {
  212. return {
  213. values: {}
  214. }
  215. }
  216. }
  217. </script>
  218. <style lang="sass">
  219. .payment-bank-modal
  220. padding: 0 !important
  221. &::before
  222. content: ''
  223. display: block
  224. position: absolute
  225. background-size: cover
  226. filter: blur(3px)
  227. z-index: -1
  228. .wizard-tab-content
  229. padding-bottom: 50px !important
  230. .wizard-tab-container
  231. justify-content: center !important
  232. align-items: center !important
  233. .payment-details-form
  234. width: 100%
  235. .form-input
  236. color: #4c4c4c
  237. </style>