App.vue 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template lang="pug">
  2. .payments-purchase
  3. //- form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#7c7bad" backButtonText="Volver" :hideButtons='processingPayments' nextButtonText="Continuar" transition="fade" @on-complete="paymentProcess()" ref='wizard' @on-change="(prev, next) => removeMovePaymentsAll(prev > next && next < 2)")
  4. form-wizard(title="" subtitle="" finishButtonText="Finalizar" color="#7c7bad" backButtonText="Volver" nextButtonText="Continuar" transition="fade" ref='wizard')
  5. tab-content(title="Quien es el proveedor ?")
  6. supplier
  7. tab-content(title="Cual es la factura ?")
  8. invoices
  9. tab-content(title="Que cuota es ?")
  10. moves-lines
  11. tab-content(title="Como vas a pagar ?")
  12. payments
  13. </template>
  14. <script>
  15. import { INIT_PAYMENTS_PURCHASES } from '@/constants/actionTypes'
  16. import { mapActions, mapGetters } from 'vuex'
  17. import { FormWizard, TabContent} from 'vue-form-wizard'
  18. import 'vue-form-wizard/dist/vue-form-wizard.min.css'
  19. /* Step */
  20. import Supplier from '@@/steps/Supplier'
  21. import Invoices from '@@/steps/Invoices'
  22. import MovesLines from '@@/steps/MovesLines'
  23. import Payments from '@@/steps/payments'
  24. export default {
  25. components: {
  26. TabContent,
  27. FormWizard,
  28. Supplier,
  29. Invoices,
  30. MovesLines,
  31. Payments
  32. },
  33. methods: mapActions([
  34. INIT_PAYMENTS_PURCHASES
  35. ]),
  36. mounted() {
  37. this.initPaymentsPurchases()
  38. }
  39. }
  40. </script>
  41. <style lang="sass">
  42. @import './assets/variables'
  43. .payments-purchase
  44. width: 100%
  45. height: 100%
  46. position: absolute
  47. .vue-form-wizard
  48. width: 100%
  49. height: 100%
  50. padding-bottom: 0
  51. .wizard-header
  52. display: none
  53. .wizard-navigation
  54. width: 100%
  55. height: 100%
  56. .wizard-progress-with-circle
  57. top: 35px
  58. .wizard-icon-circle
  59. width: 60px
  60. height: 60px
  61. .wizard-tab-content
  62. width: 100%
  63. height: calc(100% - 82px)
  64. padding: 0
  65. overflow: hidden
  66. .wizard-tab-container
  67. width: calc(100% - 20px)
  68. height: calc(100% - 20px)
  69. margin: 10px
  70. .payments-purchase-step
  71. width: 100%
  72. height: 100%
  73. background: $app-bg-color
  74. .wizard-card-footer
  75. width: 100%
  76. height: 50px
  77. position: absolute
  78. bottom: 0
  79. .wizard-btn
  80. width: 160px
  81. height: 40px
  82. border-radius: 0
  83. box-shadow: none
  84. border: none
  85. &:hover, &:focus
  86. background: $app-main-color
  87. </style>