fix(transport) : tableau prix consultation — police/bordures/radius alignés MalioDataTable, colonne groupe en épine (ERP-170)
This commit is contained in:
@@ -102,17 +102,21 @@
|
||||
<!-- Prix : tableau présentationnel regroupé par contenant + export. -->
|
||||
<template #prices>
|
||||
<div class="mt-12 flex flex-col gap-6">
|
||||
<table class="w-full border-collapse border border-m-muted/40 text-left text-sm">
|
||||
<!-- Tailles de police alignées sur MalioDataTable (header 16px /
|
||||
corps 14px). Colonne de groupe (Fond Mouvant / Benne) =
|
||||
épine de gauche continue : son en-tête (coin) reste blanc,
|
||||
pas dans le fond gris du header ; libellé fusionné (rowspan). -->
|
||||
<table class="w-full border-separate border-spacing-0 overflow-hidden rounded-malio border border-black text-left text-black">
|
||||
<thead>
|
||||
<tr class="border-b border-black bg-m-muted/10">
|
||||
<th class="px-3 py-2"></th>
|
||||
<th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.carrier') }}</th>
|
||||
<th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.aproOrSite') }}</th>
|
||||
<th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.delivery') }}</th>
|
||||
<th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.forfait') }}</th>
|
||||
<th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.tonne') }}</th>
|
||||
<th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.indexation') }}</th>
|
||||
<th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.state') }}</th>
|
||||
<tr>
|
||||
<th class="border-r border-black px-3 py-3"></th>
|
||||
<th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.carrier') }}</th>
|
||||
<th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.aproOrSite') }}</th>
|
||||
<th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.delivery') }}</th>
|
||||
<th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.forfait') }}</th>
|
||||
<th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.tonne') }}</th>
|
||||
<th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.indexation') }}</th>
|
||||
<th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.state') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -120,27 +124,28 @@
|
||||
<tr
|
||||
v-for="(row, i) in group.rows"
|
||||
:key="`${gi}-${i}`"
|
||||
:class="i === group.rows.length - 1 ? 'border-b border-black' : 'border-b border-m-muted/30'"
|
||||
:class="i === group.rows.length - 1 ? '[&>td]:border-b [&>td]:border-black' : '[&>td]:border-b [&>td]:border-m-muted/30'"
|
||||
>
|
||||
<!-- Cellule de groupe fusionnée (rowspan), centrée verticalement. -->
|
||||
<!-- Cellule de groupe fusionnée (rowspan), centrée verticalement,
|
||||
toujours séparateur noir en bas (entre groupes). -->
|
||||
<td
|
||||
v-if="i === 0"
|
||||
:rowspan="group.rows.length"
|
||||
class="border-r border-black px-3 py-2 text-center align-middle font-medium"
|
||||
class="!border-b-black border-r border-black px-3 text-center align-middle text-[14px] font-medium"
|
||||
>
|
||||
{{ group.label }}
|
||||
</td>
|
||||
<td class="px-3 py-2">{{ headerTitle }}</td>
|
||||
<td class="px-3 py-2">{{ row.apro }}</td>
|
||||
<td class="px-3 py-2">{{ row.delivery }}</td>
|
||||
<td class="px-3 py-2">{{ row.forfait }}</td>
|
||||
<td class="px-3 py-2">{{ row.tonne }}</td>
|
||||
<td class="px-3 py-2">{{ row.indexation }}</td>
|
||||
<td class="px-3 py-2">{{ row.state }}</td>
|
||||
<td class="px-3 py-4 text-[14px]">{{ headerTitle }}</td>
|
||||
<td class="px-3 py-4 text-[14px]">{{ row.apro }}</td>
|
||||
<td class="px-3 py-4 text-[14px]">{{ row.delivery }}</td>
|
||||
<td class="px-3 py-4 text-[14px]">{{ row.forfait }}</td>
|
||||
<td class="px-3 py-4 text-[14px]">{{ row.tonne }}</td>
|
||||
<td class="px-3 py-4 text-[14px]">{{ row.indexation }}</td>
|
||||
<td class="px-3 py-4 text-[14px]">{{ row.state }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr v-if="!hasPrices">
|
||||
<td colspan="8" class="px-3 py-4 text-center text-m-muted">
|
||||
<td colspan="8" class="px-3 py-4 text-center text-[14px] text-m-muted">
|
||||
{{ t('transport.carriers.consultation.price.empty') }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user