123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158 |
- <template lang="pug">
- .purchases
- form-wizard(title='' subtitle='' color='#7c7bad' ref='wizard')
- template(v-if='isPurchase || isExpense')
- tab-content(title='Cuál es su proveedor?' :beforeChange='checkSupplier')
- supplier-step
- tab-content(title="mode === 'purchase' ? 'Qué productos comprarás?' : 'En que gastarás?'" :beforeChange='checkCart')
- product-step
- tab-content(title='Cómo quieres pagar?' :beforeChange='checkAmountReceived')
- payment-step
- template(v-else-if='isPurchasePicking')
- tab-content(title='Cuál es su proveedor?' :beforeChange='checkSupplier')
- supplier-step
- tab-content(title='Qué productos comprarás?' :beforeChange='checkCart')
- product-step
- template(v-else-if='isPurchasePayment')
- tab-content(title='Qué presupuesto es?')
- budget-step
- tab-content(title='Cómo quieres pagar?')
- payment-step
- template(v-else='isPurchaseTaking')
- tab-content(title='Qué compra es?')
- delivery-step
- tab-content(title='Confirmar entrega?')
- delivery-confirm-step
- template(slot='footer' slot-scope='props')
- .wizard-footer-left
- wizard-button(v-if='props.activeTabIndex > 0' @click.native='goBack' :style='props.fillButtonStyle') Volver
- .wizard-footer-right
- wizard-button(v-if='!props.isLastStep' class='wizard-footer-right' @click.native='goNext' :style='props.fillButtonStyle') Continuar
- wizard-button(v-else class='wizard-footer-right finish-button' @click.native='endProcess' :style='props.fillButtonStyle') {{ props.isLastStep ? 'Finalizar' : 'Continuar' }}
- loading-overlay(:show='isLoading')
- </template>
- <script>
- import { mapGetters, mapActions } from 'vuex'
- import { FormWizard, TabContent, WizardButton } from 'vue-form-wizard'
- import 'vue-form-wizard/dist/vue-form-wizard.min.css'
- import SupplierStep from './components/steps/SupplierStep'
- import ProductStep from './components/steps/ProductStep'
- import PaymentStep from './components/steps/PaymentStep'
- import BudgetStep from './components/steps/BudgetStep'
- import DeliveryStep from './components/steps/DeliveryStep'
- import DeliveryConfirmStep from './components/steps/DeliveryConfirmStep'
- import { LoadingOverlay } from './components/common'
- export default {
- components: {
- FormWizard,
- TabContent,
- WizardButton,
- SupplierStep,
- ProductStep,
- PaymentStep,
- BudgetStep,
- DeliveryStep,
- DeliveryConfirmStep,
- LoadingOverlay
- },
- computed: mapGetters([
- 'isLoading',
- 'isCompleted',
- 'isPurchase',
- 'isExpense',
- 'isPurchasePicking',
- 'isPurchasePayment',
- 'isPurchaseTaking',
- 'isProcessing',
- 'state',
- 'mode'
- ]),
- methods: {
- goNext() {
- this.$refs.wizard.nextTab()
- if (this.$refs.wizard.activeTabIndex >= 1) {
- // this.changeInitialPayment(this.initialPayment)
- }
- },
- goBack() {
- this.$refs.wizard.prevTab()
- },
- ...mapActions([
- 'initProcess',
- 'checkCart',
- 'checkSupplier',
- 'checkAmountReceived',
- 'endProcess',
- 'resetProcess'
- ])
- },
- watch: {
- isCompleted(value) {
- if (!value) {
- return
- }
- this.$refs.wizard.changeTab(2, 0, false)
- this.resetProcess()
- }
- },
- mounted() {
- this.initProcess(this.$root.mode)
- }
- }
- </script>
- <style lang="sass">
- @import './assets/variables'
-
- .purchases
- width: 100%
- height: 100%
- position: absolute
- .vue-form-wizard
- width: 100%
- height: 100%
- padding-bottom: 0
- .wizard-header
- display: none
- .wizard-navigation
- width: 100%
- height: 100%
- .wizard-progress-with-circle
- top: 35px
- .wizard-icon-circle
- width: 60px
- height: 60px
- .wizard-tab-content
- width: 100%
- height: calc(100% - 82px)
- padding: 0
- overflow: hidden
- .wizard-tab-container
- width: calc(100% - 20px)
- height: calc(100% - 20px)
- margin: 10px
- .purchase-step
- width: 100%
- height: 100%
- background: $app-bg-color
- .wizard-card-footer
- width: 100%
- height: 50px
- position: absolute
- bottom: 10px
- .wizard-btn
- width: 160px
- height: 40px
- border-radius: 0
- box-shadow: none
- border: none
- &:hover, &:focus
- background: $app-main-color
- </style>
|