pcpuma_unam_operador/components/operador/InfoEquipo.vue

<template>
  <div class="column is-8">
    <h3 class="is-size-4 mb-4">Datos del Equipo</h3>

    <div class="columns">
      <div class="column">
        <b-field label="Número de Inventario">
          <p class="input">{{ equipo.numero_inventario }}</p>
        </b-field>

        <b-field label="Número de Serie">
          <p class="input">{{ equipo.numero_serie }}</p>
        </b-field>

        <b-field label="Equipo">
          <p class="input">{{ equipo.equipo }}</p>
        </b-field>

        <b-field label="Tipo">
          <p class="input">
            {{ equipo.carrito.tipoCarrito.tipo_carrito }}
          </p>
        </b-field>

        <b-field label="Programas">
          <b-tag
            class="ml-2"
            type="is-dark"
            closable
            closeType="is-danger"
            @close="programaB(programa.id_equipo_programa)"
            v-for="(programa, index) in programasArray"
            :key="index"
            >{{ programa.programa.programa }}</b-tag
          >
        </b-field>
      </div>

      <div class="column">
        <b-field label="Carrito">
          <p class="input">
            {{ equipo.carrito.carrito }}
          </p>
        </b-field>

        <b-field label="Módulo">
          <p class="input">
            {{ equipo.carrito.modulo.modulo }}
          </p>
        </b-field>

        <b-field label="Tipo entrada">
          <b-tag
            class="ml-2"
            type="is-dark"
            closable
            closeType="is-danger"
            @close="tipoEntradaB(tipoEntrada.id_equipo_tipo_entrada)"
            v-for="(tipoEntrada, index) in tiposEntradasArray"
            :key="index"
            >{{ tipoEntrada.tipoEntrada.tipo_entrada }}</b-tag
          >
        </b-field>

        <b-field label="Status">
          <p class="input">
            {{ equipo.status.status }}
          </p>
        </b-field>

        <b-field label="Ubicación">
          <p
            class="input is-size-6 tag"
            v-for="(sE, i) in statusEquipo"
            :key="i"
            :class="sE.tagType"
            v-show="equipo.status.id_status === sE.idStatus"
          >
            {{ sE.texto }}
          </p>
        </b-field>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    equipo: { type: Object, required: true },
    imprimirError: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirMensaje: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
    buscar: { type: Function, required: true },
  },
  data() {
    return {
      statusEquipo: [
        {
          texto: 'En carrito, a espera de entrega',
          tagType: 'is-info',
          idStatus: 1,
        },
        { texto: 'En uso', tagType: 'is-link', idStatus: 2 },
        {
          texto: 'En carrito, a espera de su confiración',
          tagType: 'is-primary',
          idStatus: 3,
        },
        { texto: 'En carrito', tagType: 'is-success', idStatus: 4 },
      ],
      tiposEntradasArray: [],
      programasArray: [],

      idEquipoPrograma: 0,
      idEquipoTipoEntrada: 0,
    }
  },
  methods: {
    programas() {
      for (let i = 0; i < this.equipo.programas.length; i++)
        this.programasArray[i] = this.equipo.programas[i]
    },
    tiposEntradas() {
      for (let i = 0; i < this.equipo.tiposEntradas.length; i++)
        this.tiposEntradasArray[i] = this.equipo.tiposEntradas[i]
    },
    programaB(id_equipo_programa) {
      this.idEquipoPrograma = id_equipo_programa
      this.imprimirWarning(
        '¿Estás segur@ de querer borrar este programa?',
        this.borrarPrograma
      )
    },
    borrarPrograma() {
      const data = {
        id_equipo_programa: this.idEquipoPrograma,
      }
      console.log(data)
      this.updateIsLoading(true)
      axios
        .delete(`${process.env.api}/equipo-programa`, data)
        .then((res) => {
          this.buscar()
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
    tipoEntradaB(id_equipo_tipo_entrada) {
      this.idEquipoTipoEntrada = id_equipo_tipo_entrada
      this.imprimirWarning(
        '¿Estás segur@ de querer borrar este tipo de entrada?',
        this.borrarTipoEntrada
      )
    },
    borrarTipoEntrada() {
      const data = {
        id_equipo_tipo_entrada: this.idEquipoTipoEntrada,
      }
      console.log(data)
      this.updateIsLoading(true)
      axios
        .delete(`${process.env.api}/equipo-tipo-entrada`, data)
        .then((res) => {
          this.buscar()
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
  },
  watch: {
    equipo() {
      this.programas()
      this.tiposEntradas()
    },
  },
}
</script>

<style></style>