fix(transport) : tableau prix consultation — police/bordures/radius alignés MalioDataTable, colonne groupe en épine (ERP-170)
Pull Request — Quality gate / Frontend (lint + Vitest + build) (pull_request) Has been cancelled
Pull Request — Quality gate / Backend (PHP CS + PHPUnit) (pull_request) Has been cancelled

This commit is contained in:
2026-06-17 11:50:11 +02:00
parent 104f97430f
commit e913866a62
@@ -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>