pcpuma_unam_operador/components/admin/CrearOperador.vue

<template>
  <section class="mb-6">
    <h3 class="is-size-4 mb-3">Crear Operador</h3>

    <div class="box">
      <div class="columns is-align-items-flex-end pl-0 pb-4">
        <b-field class="column mb-0 pb-0" label="Operador">
          <b-input
            icon="account"
            placeholder="Operador"
            type="text"
            @keyup.enter.native="
              $alertsGenericos.imprimirWarning(
                $buefy,
                '¿Esta segur@ de querer crear este operador?',
                crearOperador
              )
            "
            v-model="operador"
            rounded
          />
        </b-field>

        <b-field class="column mb-0 pb-0" label="Correo">
          <b-input
            icon="mail"
            placeholder="Correo"
            type="email"
            @keyup.enter.native="
              $alertsGenericos.imprimirWarning(
                $buefy,
                '¿Esta segur@ de querer crear este operador?',
                crearOperador
              )
            "
            v-model="correo"
            rounded
          />
        </b-field>

        <b-field class="column mb-0 pb-0" label="Nombre">
          <b-input
            icon="account"
            placeholder="Nombre"
            type="text"
            @keyup.enter.native="
              $alertsGenericos.imprimirWarning(
                $buefy,
                '¿Esta segur@ de querer crear este operador?',
                crearOperador
              )
            "
            v-model="nombre"
            rounded
          />
        </b-field>

        <b-field class="column mb-0 pb-0" label="Contraseña">
          <b-input
            icon="lock"
            placeholder="Contraseña"
            type="password"
            @keyup.enter.native="
              $alertsGenericos.imprimirWarning(
                $buefy,
                '¿Esta segur@ de querer crear este operador?',
                crearOperador
              )
            "
            v-model="password"
            rounded
          />
        </b-field>

        <b-field class="column">
          <b-button
            type="is-info"
            @click="
              $alertsGenericos.imprimirWarning(
                $buefy,
                '¿Esta segur@ de querer crear este operador?',
                crearOperador
              )
            "
            :disabled="!operador || !password || !correo || !nombre"
            expanded
            rounded
          >
            Crear
          </b-button>
        </b-field>
      </div>
    </div>
  </section>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    updateActualizarTabla: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
    admin: { type: Object, required: true },
  },
  data() {
    return {
      correo: '',
      nombre: '',
      operador: '',
      password: '',
    }
  },
  methods: {
    crearOperador() {
      if (this.password && this.operador && this.correo && this.nombre) {
        let data = {
          correo: this.correo,
          id_institucion: this.admin.institucion.id_institucion,
          id_tipo_usuario: 4,
          nombre: this.nombre,
          operador: this.operador,
          password: this.password,
        }

        this.updateIsLoading(true)
        axios
          .post(`${process.env.api}/operador`, data)
          .then((res) => {
            this.operador = ''
            this.password = ''
            this.correo = ''
            this.nombre = ''
            this.updateActualizarTabla(true)
            this.updateIsLoading(false)
            this.$alertsGenericos.imprimirMensaje(this.$buefy, res.data.message)
          })
          .catch((err) => {
            this.updateIsLoading(false)
            this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
          })
      }
    },
  },
}
</script>

<style></style>