ModalDepartamentos.vue

<template>
  <q-dialog v-model="value" @hide="fechar">
    <q-card class="q-pa-md" style="width: 500px; max-width: 94%;"  >
      <q-toolbar>
        <q-toolbar-title>{{ title }}</q-toolbar-title>
        <q-btn flat round dense icon="r_close" @click="fechar"/>
      </q-toolbar>
      <q-tab-panels v-model="tab" animated class="">
        <q-tab-panel name="dados">
          <q-card-section>
            <q-form
              @submit="this.onSubmit"
              class="q-gutter-md"
            >
              <q-input
                filled
                v-model="datanew.name"
                label="Departamento"
                hint="Departamento"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Preencha o Nome do Departamento']"
              />
              <q-input
                filled
                v-model="datanew.responsible"
                label="Responsável"
                hint="Responsável"
                lazy-rules
                :rules="[ val => val && val.length > 0 || 'Preencha o Nome do Responsável']"
              />
              <div class="row">
                <div class="col-6 q-pr-md" >
                  <q-input
                    filled
                    v-model="datanew.phone"
                    label="Telefone"
                    hint="Telefone"
                    mask="(##)#####-####"
                    lazy-rules
                    :rules="[ val => val && val.length > 0 || 'Preencha o Telefone']"
                  />
                </div>

              </div>
              <div class="row">
                <div class="col-6 q-pt-sm"  >
                  <div class="col-6 q-pr-md q-pt-sm" >
                    <q-toggle v-model="datanew.quota_unlimited" true-value="1" false-value="0" label="Quota Ilimitada" />
                  </div>
                </div>
                <div class="col-6" >
                  <q-input v-if="datanew.quota_unlimited == 0"
                           filled
                           v-model="data.quota"
                           label="Quota Mensal R$"
                           hint="Quota Mensal R$"
                           mask="#.##"
                           fill-mask="0"
                           reverse-fill-mask
                           input-class="text-right"
                           lazy-rules
                           :rules="[ val => val && val.length > 0 && val.length < 10 || 'Preencha a conta Mensal máximo 10 digitos']"
                  />
                </div>
              </div>

              <div class="row">
                <div class="col-12 col-md-6" >
                  <q-toggle v-model="datanew.status" true-value="activated" false-value="desactivated" label="Ativado" />
                </div>
                <div class="col-12 col-md-6" align="right" >
                  <q-btn label="Cancelar" @click="fechar" color="primary" flat class="q-mr-sm" />
                  <q-btn label="Salvar" type="submit" color="primary" :loading="this.btnSalvarLoad"/>
                </div>
              </div>
            </q-form>
          </q-card-section>
        </q-tab-panel>
        <q-tab-panel name="endereco">
          <q-card-section>
            <q-form
              @submit="this.onSubmit"
              class="q-gutter-md"
            >
              <div class="row">
                <div class="col-12 col-md-6" >
                  <q-toggle v-model="datanew.status" true-value="activated" false-value="desactivated" label="Ativado" />
                </div>
                <div class="col-12 col-md-6" align="right" >
                  <q-btn label="Cancelar" @click="fechar" color="primary" flat class="q-mr-sm" />
                  <q-btn label="Salvar" type="submit" color="primary" :loading="this.btnSalvarLoad"/>
                </div>
              </div>
            </q-form>
          </q-card-section>
        </q-tab-panel>
      </q-tab-panels>
      <q-tabs
        v-model="tab"
        dense
        class="bg-grey-3 text-grey-7"
        active-color="primary"
        indicator-color="purple"
        align="justify"
        narrow-indicator
      >
        <q-tab name="dados" label="Dados" />
        <q-tab name="endereco" label="Endereço" />
      </q-tabs>
    </q-card>
  </q-dialog>
</template>

<script>
import ApiDepartaments from 'src/services/api/departaments'

export default {
  name: 'ModalDepartamentos',
  data () {
    return {
      btnSalvarLoad: false,
      open: false,
      datanew: this.data,
      tab: 'dados'
    }
  },
  props: {
    value: {
      type: Boolean
    },
    data: {
      type: Object
    },
    title: {
      type: String
    }
  },
  watch: {
    value: function () {
      this.open = this.value
    },
    data: function () {
      this.datanew = { ...this.data }
    }
  },
  methods: {
    fechar () {
      this.$emit('input', false)
    },
    onSubmit () {
      this.Save()
    },
    async Save () {
      try {
        this.btnSalvarLoad = true
        const { data } = await ApiDepartaments.save(this.datanew)
        this.$q.notify({
          color: 'positive',
          position: 'top',
          message: data.message,
          icon: 'done'
        })
      } catch (error) {
        return error
      } finally {
        this.btnSalvarLoad = false
        this.fechar()
        this.$emit('list')
      }
    }
  }
}
</script>

<style scoped>

</style>