feat: 安装明细全字段同屏紧凑展示 #491

Merged
qiuxiang merged 1 commits from feature/qiuxiang-installation-details-compact into main 2026-10-24 14:31:57 +08:00
2 changed files with 62 additions and 8 deletions

View File

@ -312,6 +312,49 @@
cursor: pointer;
}
.installation-details-table-wrap {
overflow-x: hidden;
}
.installation-details-table {
width: 100%;
table-layout: fixed;
font-size: 0.625rem;
}
.installation-details-table thead th {
height: 5.25rem;
padding: 0.2rem 0.1rem;
writing-mode: vertical-rl;
text-orientation: mixed;
vertical-align: bottom;
line-height: 1.15;
letter-spacing: 0;
white-space: normal;
}
.installation-details-table tbody td {
padding: 0.25rem 0.1rem;
vertical-align: top;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
.installation-details-table .biz-badge {
padding: 0.05rem 0.15rem;
border-radius: 0.2rem;
font-size: 0.5625rem;
line-height: 1.2;
white-space: normal;
}
.installation-details-table th:first-child,
.installation-details-table td:first-child {
width: 4.75rem;
}
.installation-expand {
width: 2rem;
height: 2rem;
@ -330,15 +373,19 @@
.installation-detail-table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: 0.75rem;
font-size: 0.625rem;
}
.installation-detail-table th,
.installation-detail-table td {
padding: 0.45rem 0.65rem;
padding: 0.25rem 0.1rem;
border: 1px solid #e5e0d7;
white-space: nowrap;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
vertical-align: top;
text-align: left;
}
@ -346,6 +393,11 @@
background: #f3efe6;
color: #595959;
font-weight: 600;
height: 4.75rem;
writing-mode: vertical-rl;
text-orientation: mixed;
vertical-align: bottom;
line-height: 1.15;
}
.installation-detail-empty,
@ -776,13 +828,13 @@
@endif
</form>
@endif
<div class="biz-table-wrap">
<table class="biz-table">
<div class="biz-table-wrap @if ($page['slug'] === 'installation-details') installation-details-table-wrap @endif">
<table class="biz-table @if ($page['slug'] === 'installation-details') installation-details-table @endif">
<thead>
<tr>
@if ($page['slug'] !== 'installation-details')<th>序号</th>@endif
@foreach ($descriptor->fields as $field)
<th class="@if ($field['currency']) num @endif">{{ $field['label'] }}</th>
<th class="@if ($field['currency']) num @endif" @if ($page['slug'] === 'installation-details') title="{{ $field['label'] }}" @endif>{{ $field['label'] }}</th>
@endforeach
@unless ($descriptor->readOnly)
<th class="actions-cell" data-finance-fixed="end">操作</th>
@ -797,7 +849,7 @@
@php
$val = $row->{$field['name']};
@endphp
<td class="@if ($field['currency']) num @endif">
<td class="@if ($field['currency']) num @endif" @if ($page['slug'] === 'installation-details' && is_scalar($val)) title="{{ $val }}" @endif>
@if ($field['type'] === 'boolean')
@if ($val)
<span class="biz-badge biz-badge-yes">是</span>
@ -866,7 +918,7 @@
@if ($page['slug'] === 'installation-details')
<section class="installation-detail-panel" data-installation-detail-panel aria-label="明细子表">
<div class="biz-card-head"><div class="biz-card-title">明细子表</div></div>
<div class="biz-table-wrap" data-installation-detail-content>
<div class="biz-table-wrap installation-details-table-wrap" data-installation-detail-content>
<div class="installation-detail-empty">请点击上方主表记录查看商品明细</div>
</div>
</section>

View File

@ -247,6 +247,8 @@ class ManagementCrudTest extends FeatureTestCase
->assertSeeText('订单类型:')
->assertSeeText('商品ID:')
->assertSeeText('导出')
->assertSee('installation-details-table-wrap', false)
->assertSee('installation-details-table', false)
->assertSeeText('INSTALL-TEST-001')
->assertSeeText('测试安装公司')
->assertSeeText('120.50')