fix: 修复安装明细日期范围筛选 #496

Merged
qiuxiang merged 1 commits from fix/qiuxiang-installation-date-range into main 2026-10-24 15:52:31 +08:00
2 changed files with 123 additions and 4 deletions

View File

@ -238,6 +238,42 @@
font-size: 0.75rem;
}
.installation-date-filter {
display: flex;
grid-column: span 2;
align-items: center;
gap: 0.4rem;
min-width: 0;
color: #595959;
font-size: 0.75rem;
white-space: nowrap;
}
.installation-date-filter__label {
flex: 0 0 auto;
}
.installation-date-filter__range {
flex: 1 1 auto;
min-width: 0;
}
.installation-date-filter .upstream-data-date input {
height: 2.1rem;
font-size: 0.75rem;
}
.installation-date-range-error {
grid-column: 1 / -1;
margin: 0;
color: #b80000;
font-size: 0.75rem;
}
.installation-date-range-error[hidden] {
display: none;
}
.installation-filter-actions {
display: flex;
align-items: center;
@ -246,9 +282,15 @@
@media (max-width: 1100px) {
.installation-filter-bar { grid-template-columns: repeat(2, minmax(14rem, 1fr)); }
.installation-date-filter { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
.installation-filter-bar { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
.installation-date-filter {
flex-direction: column;
align-items: stretch;
gap: 0.25rem;
}
}
.biz-card-head {
@ -730,12 +772,15 @@
@elseif ($descriptor)
<div class="biz-card mt-6">
@if ($page['slug'] === 'installation-details')
<form method="GET" action="{{ request()->url() }}" class="installation-filter-bar" aria-label="安装明细筛选查询栏">
@include('business.pages.partials.date-range-picker')
<form method="GET" id="installationFilterForm" action="{{ request()->url() }}" class="installation-filter-bar" aria-label="安装明细筛选查询栏" autocomplete="off">
@php
$dateRangeFilters = [
['from' => 'created_from', 'to' => 'created_to', 'label' => '创建日期:', 'aria' => '创建日期'],
['from' => 'customer_review_from', 'to' => 'customer_review_to', 'label' => '客服审核时间:', 'aria' => '客服审核时间'],
['from' => 'finance_review_from', 'to' => 'finance_review_to', 'label' => '财务审核时间:', 'aria' => '财务审核时间'],
];
$filterFields = [
['name' => 'created_from', 'label' => '创建日期:', 'type' => 'date'], ['name' => 'created_to', 'label' => '至:', 'type' => 'date'],
['name' => 'customer_review_from', 'label' => '客服审核时间:', 'type' => 'date'], ['name' => 'customer_review_to', 'label' => '至:', 'type' => 'date'],
['name' => 'finance_review_from', 'label' => '财务审核时间:', 'type' => 'date'], ['name' => 'finance_review_to', 'label' => '至:', 'type' => 'date'],
['name' => 'push_status', 'label' => '推送状态:'], ['name' => 'order_no', 'label' => '订单编号:'],
['name' => 'customer_review', 'label' => '客服审核:', 'options' => ['0'=>'未审核','1'=>'已审核']], ['name' => 'finance_review', 'label' => '财务审核:', 'options' => ['0'=>'未审核','1'=>'已审核']],
['name' => 'quote_status', 'label' => '报价状态:'], ['name' => 'arranged_status', 'label' => '是否安排:', 'options' => ['0'=>'未安排','1'=>'已安排']],
@ -745,6 +790,34 @@
['name' => 'order_type', 'label' => '订单类型:'], ['name' => 'product_id', 'label' => '商品ID:'],
];
@endphp
@foreach ($dateRangeFilters as $dateRange)
<div class="installation-date-filter">
<span class="installation-date-filter__label">{{ $dateRange['label'] }}</span>
<div class="upstream-data-date-range installation-date-filter__range">
<span class="upstream-data-date" data-date-picker>
<input id="{{ $dateRange['from'] }}" type="text" name="{{ $dateRange['from'] }}" value="{{ request($dateRange['from']) }}" readonly autocomplete="off" placeholder="开始日期" aria-label="{{ $dateRange['aria'] }}开始日期" aria-describedby="installationDateRangeError" data-date-input>
<button type="button" class="upstream-data-date__clear" data-date-clear hidden aria-label="清除{{ $dateRange['aria'] }}开始日期">
<span class="material-icons-outlined" aria-hidden="true">close</span>
</button>
<button type="button" class="upstream-data-date__pick" data-date-toggle aria-label="选择{{ $dateRange['aria'] }}开始日期">
<span class="material-icons-outlined" aria-hidden="true">calendar_today</span>
</button>
<div class="upstream-data-calendar" role="dialog" aria-label="{{ $dateRange['aria'] }}开始日期日历" data-date-calendar hidden></div>
</span>
<b class="upstream-data-date-range__sep">至</b>
<span class="upstream-data-date" data-date-picker>
<input id="{{ $dateRange['to'] }}" type="text" name="{{ $dateRange['to'] }}" value="{{ request($dateRange['to']) }}" readonly autocomplete="off" placeholder="结束日期" aria-label="{{ $dateRange['aria'] }}结束日期" aria-describedby="installationDateRangeError" data-date-input>
<button type="button" class="upstream-data-date__clear" data-date-clear hidden aria-label="清除{{ $dateRange['aria'] }}结束日期">
<span class="material-icons-outlined" aria-hidden="true">close</span>
</button>
<button type="button" class="upstream-data-date__pick" data-date-toggle aria-label="选择{{ $dateRange['aria'] }}结束日期">
<span class="material-icons-outlined" aria-hidden="true">calendar_today</span>
</button>
<div class="upstream-data-calendar" role="dialog" aria-label="{{ $dateRange['aria'] }}结束日期日历" data-date-calendar hidden></div>
</span>
</div>
</div>
@endforeach
@foreach ($filterFields as $filter)
<label class="installation-filter-field">
<span>{{ $filter['label'] }}</span>
@ -755,12 +828,47 @@
@endif
</label>
@endforeach
<p id="installationDateRangeError" class="installation-date-range-error" role="alert" hidden>结束日期不能早于开始日期。</p>
<div class="installation-filter-actions">
<button type="submit" class="biz-btn biz-btn-primary">查询</button>
<a href="{{ request()->url() }}" class="biz-btn biz-btn-ghost">清除</a>
<a href="{{ route('business.installation-details.export', request()->query()) }}" class="biz-btn biz-btn-ghost">导出</a>
</div>
</form>
<script>
(function () {
var form = document.getElementById('installationFilterForm');
if (!form) { return; }
if (window.CaiWuDatePicker) {
window.CaiWuDatePicker.setup(form);
}
var error = document.getElementById('installationDateRangeError');
var ranges = [
['created_from', 'created_to'],
['customer_review_from', 'customer_review_to'],
['finance_review_from', 'finance_review_to']
];
form.addEventListener('submit', function (event) {
var invalidEnd = null;
ranges.forEach(function (names) {
var from = form.elements.namedItem(names[0]);
var to = form.elements.namedItem(names[1]);
var invalid = Boolean(from && to && from.value && to.value && from.value > to.value);
if (from) { from.setAttribute('aria-invalid', invalid ? 'true' : 'false'); }
if (to) { to.setAttribute('aria-invalid', invalid ? 'true' : 'false'); }
if (invalid && !invalidEnd) { invalidEnd = to; }
});
error.hidden = !invalidEnd;
if (invalidEnd) {
event.preventDefault();
invalidEnd.focus();
}
});
})();
</script>
@endif
<div class="biz-card-head">
<div class="biz-card-title">

View File

@ -247,6 +247,17 @@ class ManagementCrudTest extends FeatureTestCase
->assertSeeText('订单类型:')
->assertSeeText('商品ID:')
->assertSeeText('导出')
->assertSee('id="installationFilterForm"', false)
->assertSee('name="created_from"', false)
->assertSee('name="created_to"', false)
->assertSee('name="customer_review_from"', false)
->assertSee('name="customer_review_to"', false)
->assertSee('name="finance_review_from"', false)
->assertSee('name="finance_review_to"', false)
->assertSee('data-date-picker', false)
->assertSee('data-date-calendar', false)
->assertSee("window.CaiWuDatePicker.setup(form)", false)
->assertSee('结束日期不能早于开始日期。')
->assertSee('installation-details-table-wrap', false)
->assertSee('installation-details-table', false)
->assertSee('writing-mode: horizontal-tb', false)