WuYongJie/CaiWuXiTong
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

修复两层表头右侧跨行列的边框断格

Browse Source 
- 基础样式 th:last-child 会去掉第二行最后一个单元格（入库金额）的右边框，
  导致与右侧跨行的加权平均单价、定价状态之间缺少竖线、上下横线错位
- 按字段顺序给真正的最后一列打 data-directory-last-column 标记，
  合并表头的其它表头单元格统一保留右边框
This commit is contained in:
chenxi 2026-09-29 13:39:09 +08:00
parent 79158103de
commit 0d0482a8fe
2 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
resources/views/business/pages/partials/directory-table.blade.php
View File

@ -26,6 +26,7 @@
// 字段配置里带 group 的目录表按 Excel 样式渲染两层合并表头：同组字段共用一个一级标题，
// 未分组的列标题跨两行显示，列顺序固定为配置顺序。
$directoryHasGroupedHeader = collect($directoryFields)->contains(fn (array $field): bool => filled($field['group'] ?? null));
$directoryLastFieldName = collect($directoryFields)->last()['name'] ?? null;
$directoryIsPaginated = is_object($directoryRows) && method_exists($directoryRows, 'total');
$directoryTotal = $directoryIsPaginated ? $directoryRows->total() : (is_countable($directoryRows) ? count($directoryRows) : 0);
$directoryCurrentPage = $directoryIsPaginated ? $directoryRows->currentPage() : 1;
@ -503,6 +504,15 @@
.directory-table[data-grouped-header] thead th[data-directory-group] {
font-weight: 700;
}
/* 两层表头里每一行的最后一个单元格不一定位于表格最右侧，基础样式的
th:last-child 会连中间列的右边框一起去掉，右侧跨行一级标题就会断格。
这里按字段顺序给真正的最后一列打标记，只让它在表格右边缘不留边框。 */
.directory-table[data-grouped-header] thead th {
border-right: 1px solid var(--vip-border, #d8d2c7);
}
.directory-table[data-grouped-header] thead th[data-directory-last-column] {
border-right: 0;
}
.directory-table[data-grouped-header] th:first-child,
.directory-table[data-grouped-header] td:first-child {
min-width: 8rem;
@ -1340,7 +1350,7 @@
@foreach ($groupedHeaderRuns as $headerRun)
@if ($headerRun['group'] === null)
@foreach ($headerRun['fields'] as $field)
<th scope="col" rowspan="2" data-column-key="{{ $field['name'] }}" class="{{ in_array($field['kind'] ?? null, ['number', 'integer'], true) ? 'is-number' : '' }} {{ !in_array($field['name'], $visibleDirectoryColumns, true) ? 'is-column-hidden' : '' }}">{{ $field['label'] }}</th>
<th scope="col" rowspan="2" data-column-key="{{ $field['name'] }}" @if($field['name'] === $directoryLastFieldName) data-directory-last-column @endif class="{{ in_array($field['kind'] ?? null, ['number', 'integer'], true) ? 'is-number' : '' }} {{ !in_array($field['name'], $visibleDirectoryColumns, true) ? 'is-column-hidden' : '' }}">{{ $field['label'] }}</th>
@endforeach
@else
<th scope="col" colspan="{{ count($headerRun['fields']) }}" data-directory-group="{{ $headerRun['group'] }}">{{ $headerRun['group'] }}</th>
@ -1379,7 +1389,7 @@
<tr>
@foreach ($directoryFields as $field)
@continue(!isset($field['group']))
<th scope="col" data-column-key="{{ $field['name'] }}" data-directory-group-leaf="{{ $field['group'] }}" class="{{ in_array($field['kind'] ?? null, ['number', 'integer'], true) ? 'is-number' : '' }} {{ !in_array($field['name'], $visibleDirectoryColumns, true) ? 'is-column-hidden' : '' }}">{{ $field['label'] }}</th>
<th scope="col" data-column-key="{{ $field['name'] }}" data-directory-group-leaf="{{ $field['group'] }}" @if($field['name'] === $directoryLastFieldName) data-directory-last-column @endif class="{{ in_array($field['kind'] ?? null, ['number', 'integer'], true) ? 'is-number' : '' }} {{ !in_array($field['name'], $visibleDirectoryColumns, true) ? 'is-column-hidden' : '' }}">{{ $field['label'] }}</th>
@endforeach
</tr>
@endif

3
tests/Feature/Settings/NavigationTest.php
View File

@ -72,6 +72,9 @@ class NavigationTest extends FeatureTestCase
->assertSee('rowspan="2"', false)
->assertSee('colspan="5"', false)
->assertSee('colspan="3"', false)
// 两层表头里第二行的最后一个单元格不在表格最右侧，需要保留右边框，
// 否则右侧跨行一级标题列会和左侧分组列断格。
->assertSee('data-directory-last-column', false)
// 工作表没有序号列，页面也不再渲染固定序号列。
->assertDontSee('<th scope="col" data-directory-fixed="start"', false)
->assertDontSee('<td data-directory-fixed="start"', false)