76 lines
3.1 KiB
Vue
76 lines
3.1 KiB
Vue
<script setup>
|
|
import { useI18n } from 'vue-i18n';
|
|
import { getDateTime } from '../../../helpers/date_formats';
|
|
import { eventStatusLoad } from '../../../helpers/status';
|
|
|
|
const props = defineProps({
|
|
load: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const { t, locale } = useI18n()
|
|
|
|
const status = eventStatusLoad(props.load.load_status, locale.value);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="col-lg-6 col-12 mt-4"
|
|
>
|
|
<div class="card-info flex-d-column">
|
|
<div class="d-flex justify-content-between bg-white">
|
|
<div class="flex-direction-column">
|
|
<h2>{{ load.shipment_code }}</h2>
|
|
<p><span class="font-bold">{{ t('labels.date') }}: </span> {{ getDateTime(load.est_loading_date, 0) }}</p>
|
|
<p><span class="font-bold" >{{ t('global.company') }}: </span> {{ load?.carrier?.company_name ?? 'No definido' }}</p>
|
|
<p><span class="font-bold" >{{ t('loads.product') }}: </span> {{ load.product?.name }}</p>
|
|
<p><span class="font-bold" >{{ t('loads.weight') }}: </span> {{ load.weight }}kg</p>
|
|
</div>
|
|
<div class="flex-direction-column">
|
|
<p> <div class="indicator" :style="{backgroundColor: status.color}"></div> <strong :style="{color: status.color}">{{ status.status }}</strong></p>
|
|
<p> <span class="font-bold">{{ t('directory.typeTruck') }}: </span> {{ load?.vehicle?.truck_typ ?? 'No definido' }}</p>
|
|
<p> <span class="font-bold">{{ t('vehicles.truckPlates') }}: </span> {{ load?.vehicle?.circulation_serial_number ?? 'No definido' }}</p>
|
|
<p v-if="load?.vehicle?.trailer_plate_1">
|
|
<span class="font-bold">{{ t('vehicles.trailerPlates') }} 1: </span> {{ load?.vehicle?.trailer_plate_1 }}
|
|
</p>
|
|
<p v-if="load?.vehicle?.trailer_plate_2">
|
|
<span class="font-bold">{{ t('vehicles.trailerPlates') }} 2: </span> {{ load?.vehicle?.trailer_plate_2 }}
|
|
</p>
|
|
<p> <span class="font-bold">{{ t('labels.driver') }}: </span> {{ load?.vehicle?.driver ?? 'No asignado' }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="box-note" v-if="load.notes">
|
|
<span class="label"><i class="fa-solid fa-clipboard" style="color: #FBBA33; font-size: 1.1rem;"></i> Nota:</span>
|
|
<span>{{ load.notes }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.indicator {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-right: 0.5rem;
|
|
}
|
|
.box-note {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0.8rem;
|
|
font-size: 1rem;
|
|
background-color: #FFF;
|
|
border-radius: 13px;
|
|
border: 1px solid #E5E5E5;
|
|
justify-content: center;
|
|
}
|
|
|
|
.label {
|
|
font-weight: bold;
|
|
font-size: 0.9rem;
|
|
color: #303233;
|
|
}
|
|
</style> |