pcpuma_unam_operador/components/operador/TablaCarritos.vue
2022-07-11 09:15:10 -05:00

77 lines
1.8 KiB
Vue

<template>
<b-table
:data="carritos"
:loading="isLoadingTable"
:selected.sync="selectedCarrito"
:row-class="(row, index) => 'pointer'"
class="mb-6"
show-detail-icon
paginated
detailed
>
<b-table-column field="carrito" label="Carrito" v-slot="props" centered>
<span>{{ props.row.carrito }}</span>
</b-table-column>
<b-table-column field="modulo" label="Módulo" v-slot="props" centered>
<span>{{ props.row.modulo.modulo }}</span>
</b-table-column>
<b-table-column field="tipo" label="Tipo" v-slot="props" centered>
<span>{{ props.row.tipoCarrito.tipo_carrito }}</span>
</b-table-column>
<b-table-column field="status" label="Status" v-slot="props" centered>
<span class="is-size-6 tag" :class="choooseTag(props.row.activo)">{{
props.row.activo ? 'Activo' : 'Inactivo'
}}</span>
</b-table-column>
<template #detail="props">
<TablaEquiCarritos :equipo="props.row" />
</template>
</b-table>
</template>
<script>
import TablaEquiCarritos from '@/components/operador/TablaEquiCarritos'
export default {
components: { TablaEquiCarritos },
props: {
operador: { type: Object, required: true },
carritos: { type: Array, require: true },
isLoadingTable: { type: Boolean, required: true },
},
data() {
return {
selectedCarrito: {},
}
},
methods: {
choooseTag(activo) {
const style = {
false: 'is-danger',
true: 'is-success',
}
return style[activo]
},
},
watch: {
selectedCarrito() {
this.$router.push({
path:
'/operador/carritos/buscar_carrito/' +
this.selectedCarrito.id_carrito,
})
},
},
}
</script>
<style>
.pointer {
cursor: pointer;
}
</style>