ContaReceber.vue

<template>
  <f-crud-form
    v-if="service"
    v-on="$listeners"
    :schema="service"
    :styleCell="styleCell"
    :formValidation="formValidationConta"
    @mode="mode = $event"
    @newRecord="newRecord"
    ref="formConta"
  >
    <f-row slot="detailButtons">
    </f-row>

    <f-row>
      <f-col col="10">
        <f-form @mounted="formValidationConta = $event">
          <f-form-row>
            <f-datetimebox
              caption='Criado em'
              :value='service.record.createdAt'
              v-show='service.record.createdAt'
              :disabled="true"
            />
            <f-datetimebox
              caption='Última Alteração'
              :value='service.record.updatedAt'
              v-show='service.record.updatedAt'
              :disabled="true"
            />
          </f-form-row>

          <f-form-row>
            <f-combobox
              caption='Situação'
              v-model='service.record.situacao'
              :options="situacoes"
              :validations="validations.situacao"
            />
            <f-textbox
              caption="Motivo cancelamento"
              v-model="service.record.motivoCancelamento"
              v-show="service.record.situacao === 'CANCELADO'"
              :disabled="service.record.situacao !== 'CANCELADO'"
              :validations="validations.motivoCancelamento"
            />
            <f-textbox
              caption="Situação Dias"
              :disabled="true"
              :inputStyle="situacaoDiasInputStyle"
              v-show='service.record.situacaoDias'
              v-model="service.record.situacaoDias"
            />
            <f-textbox
              caption="Parcela"
              v-show='service.record.parcela'
              v-model="service.record.parcela"
            />
          </f-form-row>

          <f-form-row>
            <f-lookup
              v-model="service.record.pessoaNome"
              caption='Pessoa'
              component="Person"
              ref="person"
              :value-id="service.record.pessoaId"
              :validations="validations.pessoaNome"
              :filters="{type: 'isCustomer'}"
              @value="setPessoa"
            />
            <f-textbox
              caption="CPF/CNPJ"
              v-model="service.record.pessoaCpfCnpj"
              :disabled="true"
            />
          </f-form-row>

          <f-form-row>
            <f-textbox
              caption="Descrição"
              v-model="service.record.descricao"
              :validations="validations.descricao"
            />
          </f-form-row>
          <f-form-row>
            <f-datetimebox
              caption='Vencimento'
              type="date"
              v-model='service.record.vencimento'
              :validations="validations.vencimento"
            />
            <f-datetimebox
              caption='Data/Hora Quitacao'
              v-model='service.record.dataHoraQuitacao'
            />
          </f-form-row>
          <f-form-row>
            <f-numberbox
              caption='Valor'
              v-model='service.record.valor'
              :validations="validations.valor"
            />
            <f-numberbox
              caption='Total Pago'
              v-model='service.record.totalPago'
              :validations="validations.totalPago"
            />
            <f-numberbox
              caption='Dívida'
              v-model='service.record.divida'
              :inputStyle="{color: this.$style.colorRed}"
              :disabled="true"
              helpMessage="Valor que a pessoa deve, total da conta - total do pagamento"
            />
          </f-form-row>

          <f-textbox
            caption="Observação"
            type="textarea"
            v-model="service.record.obs"
            :validations="validations.obs"
          />

        </f-form>
        <div  style="height: 300px; max-height: 300px">
        <f-tabs class="h-44">
          <f-tab-pane label="Pagamentos">
            <f-crud-form
              v-if="$refs.formConta"
              mode="child-tab"
              form-parent-field="pagamentos"
              :formParent="$refs.formConta"
              :formValidation="formValidationContaPagamentos"
              :schema="service.pagamentosSchema"
            >
              <f-row>
                <f-col col="12">
                  <f-form @mounted="formValidationContaPagamentos = $event">
                    <f-form-row>
                      <f-datetimebox
                        caption='Criado em'
                        :value='service.pagamentosSchema.record.createdAt'
                        v-show='service.pagamentosSchema.record.createdAt'
                        :disabled="true"
                      />
                      <f-datetimebox
                        caption='Última Alteração'
                        :value='service.pagamentosSchema.record.updatedAt'
                        v-show='service.pagamentosSchema.record.updatedAt'
                        :disabled="true"
                      />
                    </f-form-row>

                    <f-lookup
                      caption='Forma Pagamento'
                      component="formaPagamento"
                      v-model='service.pagamentosSchema.record.formaPagamentoNome'
                      :value-id="service.pagamentosSchema.record.formaPagamentoId"
                      :validations="validations.pagamentoFormaPagamentoNome"
                      @value="setFormaPagamento"
                    />
                    <f-datetimebox
                      caption='Data pagamento'
                      v-model='service.pagamentosSchema.record.dataHora'
                      :validations="validations.pagamentoDataHora"
                      :pickerOptions="dataPagamentoPickerOptions"
                    />
                    <f-numberbox
                      caption='Valor do Pagamento'
                      v-model='service.pagamentosSchema.record.valor'
                      :validations="validations.pagamentoValor"
                    />
                  </f-form>
                </f-col>
              </f-row>
            </f-crud-form>
          </f-tab-pane>
        </f-tabs>
        </div>
      </f-col>
    </f-row>

  </f-crud-form>
</template>

<script>

import ContaService from './ContaService';
import Mixing from './ContasMixing';

export default {
  mixins: [
    Mixing,
  ],
  created() {
    this.service = new ContaService('rec');
  },
};

</script>