servicio_social_front/components/admin/especial/formularioEspecial.vue

<template>
  <div>
    <p class="is-size-3 mb-5"><b>Agregar un servicio social</b></p>
    <form>
      <b-field label="Artículo">
        <b-select placeholder="Seleccione el articulo correspondiente" expanded>
          <option value="1">Artículo 1</option>
          <option value="2">Artículo 2</option>
        </b-select>
      </b-field>
      <b-field label="Número de cuenta">
        <b-input
          class="my-4"
          placeholder="Número de cuenta"
          v-model="numeroCuenta"
        ></b-input>
      </b-field>

      <b-field label="Nombre">
        <b-input class="my-4" placeholder="Nombre" v-model="nombre"></b-input>
      </b-field>

      <b-field label="Carrera">
        <b-input class="my-4" placeholder="Carrera" v-model="carrera"></b-input>
      </b-field>

      <b-field label="Institución">
        <b-input
          class="my-4"
          placeholder="Institución"
          v-model="institucion"
        ></b-input>
      </b-field>

      <b-field label="Dependencia">
        <b-input
          class="my-4"
          placeholder="Dependencia"
          v-model="dependencia"
        ></b-input>
      </b-field>

      <b-field label="Dirección">
        <b-input
          class="my-4"
          placeholder="Dirección"
          v-model="direccion"
        ></b-input>
      </b-field>

      <b-field label="Fecha de nacimiento">
        <b-input
          class="my-4"
          placeholder="Fecha de nacimiento"
          v-model="fechaNacimiento"
        ></b-input>
      </b-field>

      <b-field label="Fecha de inicio">
        <b-input
          class="my-4"
          placeholder="Fecha de inicio"
          v-model="fechaInicio"
        ></b-input>
      </b-field>

      <b-field label="Fecha de fin">
        <b-input
          class="my-4"
          placeholder="Fecha de fin"
          v-model="fechaFin"
        ></b-input>
      </b-field>

      <b-field label="Correo electrónico">
        <b-input
          class="my-4"
          placeholder="Correo electrónico"
          v-model="correoElectronico"
        ></b-input>
      </b-field>
    </form>

    <b-field>
      <b-upload
        v-model="file"
        drag-drop
        type="is-black"
        expanded
        accept="application/zip"
      >
        <section>
          <div class="content has-text-centered">
            <p>
              <b-icon icon="upload" size="is-large"></b-icon>
            </p>
            <p>
              {{
                file.name || "Arrastra aquí tu archivo o da click para buscar"
              }}
            </p>
            <p>Tamaño máximo para el archivo: 20MB</p>
          </div>
        </section>
      </b-upload>
    </b-field>

    <b-field class="centro">
      <b-button
        :disabled="
          numeroCuenta == '' ||
            nombre == '' ||
            carrera == '' ||
            institucion == '' ||
            dependencia == '' ||
            direccion == '' ||
            fechaNacimiento == '' ||
            fechaInicio == '' ||
            fehcaFin == '' ||
            correoElectronico == ''
        "
        class="border-success my-5"
        type="is-success"
        @click="enviarCuestionario()"
        >Enviar</b-button
      >
    </b-field>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: [],
      numeroCuenta: "",
      nombre: "",
      carrera: "",
      institucion: "",
      dependencia: "",
      direccion: "",
      fechaNacimiento: "",
      fechaInicio: "",
      fechaFin: "",
      correoElectronico: "",
      token: {
        headers: {
          token: window.localStorage.getItem("token"),
        },
      },
    };
  },
};
</script>

<style>
.centro {
  text-align: center;
}
</style>