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"
            v-for="(programa, index) in programasArray"
            :key="index"
            >{{ 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"
            v-for="(tipoEntrada, index) in tiposEntradasArray"
            :key="index"
            >{{ tipoEntrada }}</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>
export default {
  props: {
    equipo: { type: Object, 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: [],
    }
  },
  methods: {
    programas() {
      for (let i = 0; i < this.equipo.programas.length; i++)
        this.programasArray[i] = this.equipo.programas[i].programa.programa
    },
    tiposEntradas() {
      let tiposEntradasArray = new Array(this.equipo.tiposEntradas.length)
      for (let i = 0; i < this.equipo.tiposEntradas.length; i++)
        this.tiposEntradasArray[i] = this.equipo.tiposEntradas[
          i
        ].tipoEntrada.tipo_entrada
    },
  },
  watch: {
    equipo() {
      this.programas()
      this.tiposEntradas()
    },
  },
}
</script>

<style></style>