pcpuma_unam_operador/components/operador/ModalMultaIdPrestamo.vue

<template>
  <form>
    <div class="modal-card">
      <header class="modal-card-head">
        <h5 class="modal-card-title">Multas</h5>
      </header>

      <section class="modal-card-body">
        <div>
          <div>
            <div class="is-flex is-justify-content-space-between py-3">
              <p>¿Desea multar al usuario?</p>
            </div>

            <b-field>
              <b-radio
                type="is-danger"
                size="is-medium"
                :native-value="true"
                v-model="multaUsuario"
              >
                Si
              </b-radio>
            </b-field>

            <b-field>
              <b-radio
                type="is-info"
                size="is-medium"
                :native-value="false"
                v-model="multaUsuario"
              >
                No
              </b-radio>
            </b-field>
          </div>

          <div v-show="multaUsuario">
            <div class="is-flex is-justify-content-space-between py-3">
              <p>Infraccion cometida por el usuario</p>
            </div>

            <b-field>
              <b-select
                placeholder="Seleccionar"
                v-model="idInfraccion"
                expanded
              >
                <option disabled value="">Selecciona una opción</option>

                <option
                  v-for="(i, index) in infracciones"
                  :key="index"
                  :value="i.infraccion.id_infraccion"
                >
                  {{ i.infraccion.infraccion }}
                </option>
              </b-select>
            </b-field>
          </div>

          <div v-show="multaUsuario">
            <div class="is-flex is-justify-content-space-between py-3">
              <p>Motivos por los que desea multar al usuario</p>
            </div>

            <b-field>
              <b-input
                type="textarea"
                expanded
                maxlength="500"
                v-model="descripcion"
              />
            </b-field>
          </div>
        </div>
      </section>

      <footer
        class="modal-card-foot"
        style="display: flex; justify-content: space-between"
      >
        <b-button label="Cancelar" type="is-danger" @click="$emit('close')" />

        <b-button
          label="Enviar"
          type="is-success"
          @click="
            regresar(idInfraccion, descripcion)
            $emit('close')
          "
          :disabled="multaUsuario && !(idInfraccion && descripcion)"
        />
      </footer>
    </div>
  </form>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    operador: { type: Object, required: true },
    regresar: { type: Function, required: true },
  },
  data() {
    return {
      multaUsuario: false,
      idInfraccion: '',
      descripcion: '',
      infracciones: [],
    }
  },
  methods: {
    obtenerCatalogoInfracciones() {
      axios
        .get(
          `${process.env.api}/institucion-infraccion/infracciones?id_institucion=${this.operador.institucion.id_institucion}`,
          this.$getToken.token()
        )
        .then((res) => {
          this.infracciones = res.data
        })
        .catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  watch: {
    multaUsuario(value) {
      if (!value) {
        this.idInfraccion = ''
        this.descripcion = ''
      }
    },
  },
  created() {
    this.obtenerCatalogoInfracciones()
  },
}
</script>

<style></style>