App.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <template lang="pug">
  2. .purchases
  3. form-wizard(title='' subtitle='' color='#7c7bad' ref='wizard')
  4. template(v-if='isPurchase || isExpense')
  5. tab-content(title='Cuál es su proveedor?' :beforeChange='checkSupplier')
  6. supplier-step
  7. tab-content(title="mode === 'purchase' ? 'Qué productos comprarás?' : 'En que gastarás?'" :beforeChange='checkCart')
  8. product-step
  9. tab-content(title='Cómo quieres pagar?' :beforeChange='checkAmountReceived')
  10. payment-step
  11. template(v-else-if='isPurchasePicking')
  12. tab-content(title='Cuál es su proveedor?' :beforeChange='checkSupplier')
  13. supplier-step
  14. tab-content(title='Qué productos comprarás?' :beforeChange='checkCart')
  15. product-step
  16. template(v-else-if='isPurchasePayment')
  17. tab-content(title='Qué presupuesto es?')
  18. budget-step
  19. tab-content(title='Cómo quieres pagar?')
  20. payment-step
  21. template(v-else='isPurchaseTaking')
  22. tab-content(title='Qué compra es?')
  23. delivery-step
  24. tab-content(title='Confirmar entrega?')
  25. delivery-confirm-step
  26. template(slot='footer' slot-scope='props')
  27. .wizard-footer-left
  28. wizard-button(v-if='props.activeTabIndex > 0' @click.native='goBack' :style='props.fillButtonStyle') Volver
  29. .wizard-footer-right
  30. wizard-button(v-if='!props.isLastStep' class='wizard-footer-right' @click.native='goNext' :style='props.fillButtonStyle') Continuar
  31. wizard-button(v-else class='wizard-footer-right finish-button' @click.native='endProcess' :style='props.fillButtonStyle') {{ props.isLastStep ? 'Finalizar' : 'Continuar' }}
  32. loading-overlay(:show='isLoading')
  33. </template>
  34. <script>
  35. import { mapGetters, mapActions } from 'vuex'
  36. import { FormWizard, TabContent, WizardButton } from 'vue-form-wizard'
  37. import 'vue-form-wizard/dist/vue-form-wizard.min.css'
  38. import SupplierStep from './components/steps/SupplierStep'
  39. import ProductStep from './components/steps/ProductStep'
  40. import PaymentStep from './components/steps/PaymentStep'
  41. import BudgetStep from './components/steps/BudgetStep'
  42. import DeliveryStep from './components/steps/DeliveryStep'
  43. import DeliveryConfirmStep from './components/steps/DeliveryConfirmStep'
  44. import { LoadingOverlay } from './components/common'
  45. export default {
  46. components: {
  47. FormWizard,
  48. TabContent,
  49. WizardButton,
  50. SupplierStep,
  51. ProductStep,
  52. PaymentStep,
  53. BudgetStep,
  54. DeliveryStep,
  55. DeliveryConfirmStep,
  56. LoadingOverlay
  57. },
  58. computed: mapGetters([
  59. 'isLoading',
  60. 'isCompleted',
  61. 'isPurchase',
  62. 'isExpense',
  63. 'isPurchasePicking',
  64. 'isPurchasePayment',
  65. 'isPurchaseTaking',
  66. 'isProcessing',
  67. 'state',
  68. 'mode'
  69. ]),
  70. methods: {
  71. goNext() {
  72. this.$refs.wizard.nextTab()
  73. if (this.$refs.wizard.activeTabIndex >= 1) {
  74. // this.changeInitialPayment(this.initialPayment)
  75. }
  76. },
  77. goBack() {
  78. this.$refs.wizard.prevTab()
  79. },
  80. ...mapActions([
  81. 'initProcess',
  82. 'checkCart',
  83. 'checkSupplier',
  84. 'checkAmountReceived',
  85. 'endProcess',
  86. 'resetProcess'
  87. ])
  88. },
  89. watch: {
  90. isCompleted(value) {
  91. if (!value) {
  92. return
  93. }
  94. this.$refs.wizard.changeTab(2, 0, false)
  95. this.resetProcess()
  96. }
  97. },
  98. mounted() {
  99. this.initProcess(this.$root.mode)
  100. }
  101. }
  102. </script>
  103. <style lang="sass">
  104. @import './assets/variables'
  105. .purchases
  106. width: 100%
  107. height: 100%
  108. position: absolute
  109. .vue-form-wizard
  110. width: 100%
  111. height: 100%
  112. padding-bottom: 0
  113. .wizard-header
  114. display: none
  115. .wizard-navigation
  116. width: 100%
  117. height: 100%
  118. .wizard-progress-with-circle
  119. top: 35px
  120. .wizard-icon-circle
  121. width: 60px
  122. height: 60px
  123. .wizard-tab-content
  124. width: 100%
  125. height: calc(100% - 82px)
  126. padding: 0
  127. overflow: hidden
  128. .wizard-tab-container
  129. width: calc(100% - 20px)
  130. height: calc(100% - 20px)
  131. margin: 10px
  132. .purchase-step
  133. width: 100%
  134. height: 100%
  135. background: $app-bg-color
  136. .wizard-card-footer
  137. width: 100%
  138. height: 50px
  139. position: absolute
  140. bottom: 10px
  141. .wizard-btn
  142. width: 160px
  143. height: 40px
  144. border-radius: 0
  145. box-shadow: none
  146. border: none
  147. &:hover, &:focus
  148. background: $app-main-color
  149. </style>