Chamado.js

export default class Chamado {
  constructor () {
    this.id = ''
    this.modulo = ''
    this.criado = ''
    this.mensagem = ''
    this.usuario = ''
    this.tecnico = ''
    this.status = ''
    this.select = {}
  }
}

Chamado.vue

<template>
  <page-component
    :title="title"
    :filter="filter"
    :table-data="tableData"
    :columns="columns"
    :buttons="buttons"
    :create-button="hasPermission(1)"
    @action="action"
    :permissions-numbers="accessPermissions">
    <q-dialog
      v-model="minimizedModal"
      ref="modalRef"
      maximized
      slot="modal"
      content-css="padding: 50px"
      style="background-color: white"
    >
      <q-card>
        <q-card-section class="row items-center">
          <div class="text-h6">{{ title }}</div>
          <q-space />
          <q-btn icon="close" flat round dense @click="closeModal()" />
        </q-card-section>

        <q-separator />

        <q-card-section>
          <form-factory :object="object" :form="item" @action="action"/> aaaa
          <q-btn class="q-ma-sm float-right" color="primary" label="Salvar" @click="saveModal(object.id)"/>
          <q-btn
            class="q-ma-sm float-right"
            color="red"
            label="Fechar"
            @click="minimizedModal = !minimizedModal"
          />
        </q-card-section>
      </q-card>
    </q-dialog>
  </page-component>
</template>

<script>
import PageComponent from '../../components/page/PageComponent'
import page from '../../../infrastructure/mixins/page'
import FormFactory from '../../components/form/FormFactory'
import Chamado from '../../../domain/chamado/Chamado'
import ChamadoForm from '../../../domain/chamado/ChamadoForm'

export default {
  name: 'Chamado',
  data () {
    return {
      url: '/suporte/chamados/dados.ajax.php?q=1',
      title: 'Chamados',
      object: new Chamado(),
      item: ChamadoForm,
      accessPermissions: {
        editModal: () => this.hasPermission(1),
        remove: () => this.hasPermission(2)
      },
      columns: [
        {
          name: 'id',
          required: true,
          label: 'Nº Chamado',
          align: 'left',
          field: 'id',
          sortable: true,
          classes: 'text-bold'
        },
        {
          name: 'modulo',
          required: true,
          label: 'Módulo',
          align: 'left',
          field: 'modulo',
          sortable: true,
          classes: 'my-class'
        },
        {
          name: 'criado',
          required: true,
          label: 'Data',
          align: 'left',
          field: 'criado',
          sortable: true,
          classes: 'my-class'
        },
        {
          name: 'tecnico',
          required: true,
          label: 'Técnico',
          align: 'left',
          field: 'tecnico',
          sortable: true,
          classes: 'my-class'
        },
        {
          name: 'status',
          required: true,
          label: 'Status',
          align: 'left',
          field: 'status',
          sortable: true,
          classes: 'my-class'
        },
        {
          name: 'acao',
          required: true,
          label: 'Ação',
          align: 'left',
          field: 'acao',
          sortable: true,
          classes: 'my-class'
        }
      ]
    }
  },
  mixins: [page],
  components: {
    PageComponent,
    FormFactory
  },
  methods: {
    getModule () {
      this.get(`/suporte/chamados/dados.ajax.php?q=2`)
        .then(response => {
          const modules = []

          response.forEach(item => {
            modules.push({ label: item.value[0], value: item.value[1] })
          })

          this.$set(this.object.select, 'modules', modules)
        })
    }
  },
  created () {
    this.getModule()
  }
}
</script>

<style scoped>
  .content-page {
    min-height: 350px;
    margin: 3%;
    border: 1px solid black;
  }
</style>

ChamadoForm.js

export default [
  {
    attributeName: 'modulo',
    component: 'Select',
    type: 'text',
    label: 'Módulo',
    error: false,
    class: 'col-xs-12 col-md-3',
    visible: () => true,
    click: '',
    optionName: 'modules'
  },
  {
    attributeName: 'problema',
    component: 'Input',
    type: 'text',
    label: 'Problema',
    error: false,
    class: 'col-xs-12 col-md-6',
    visible: () => true,
    click: ''
  },
  {
    attributeName: 'descricao',
    component: 'Input',
    type: 'textarea',
    label: 'Descrição do Problema',
    error: false,
    class: 'col-xs-12 col-md-12',
    visible: () => false,
    click: ''
  }
]

FormFactory.vue

<template>
  <div class="row q-col-gutter-sm">
    <div
      v-for="(item, index) in form"
      :key="index"
      v-if="item.visible(object)"
      :class="item.class">
      <component
        :is="item.component"
        :object="object"
        :item="item"
        :error="error"
        @action="action"
      />
    </div>
  </div>
</template>

<script>
import Input from './Input'
import Button from './Button'
import Select from './Select'

export default {
  name: 'FormFactory',
  props: {
    form: {
      type: Array,
      required: true
    },
    object: {
      type: Object,
      required: true
    },
    error: {}
  },
  methods: {
    action (data) {
      this.$emit('action', data)
    }
  },
  components: {
    Input,
    Button,
    Select
  }
}
</script>

<style scoped>

</style>