feat: convert all filters to searchable dropdowns with datalist
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
215
src/App.tsx
215
src/App.tsx
@@ -270,11 +270,19 @@ export default function App() {
|
||||
inventoryByRegion[s.region][s.city].push(s);
|
||||
}
|
||||
|
||||
const inventoryByModel: Record<string, Record<string, RegionalInventoryStats[]>> = {};
|
||||
const INVENTORY_TYPE_ORDER = ['4.5T普货', '4.5T冷链', '18T', '49T', '挂车', '其他'];
|
||||
const inventoryByModelRaw: Record<string, Record<string, RegionalInventoryStats[]>> = {};
|
||||
for (const s of filteredInventoryStats) {
|
||||
if (!inventoryByModel[s.type]) inventoryByModel[s.type] = {};
|
||||
if (!inventoryByModel[s.type][s.model]) inventoryByModel[s.type][s.model] = [];
|
||||
inventoryByModel[s.type][s.model].push(s);
|
||||
if (!inventoryByModelRaw[s.type]) inventoryByModelRaw[s.type] = {};
|
||||
if (!inventoryByModelRaw[s.type][s.model]) inventoryByModelRaw[s.type][s.model] = [];
|
||||
inventoryByModelRaw[s.type][s.model].push(s);
|
||||
}
|
||||
const inventoryByModel: Record<string, Record<string, RegionalInventoryStats[]>> = {};
|
||||
for (const t of INVENTORY_TYPE_ORDER) {
|
||||
if (inventoryByModelRaw[t]) inventoryByModel[t] = inventoryByModelRaw[t];
|
||||
}
|
||||
for (const t of Object.keys(inventoryByModelRaw)) {
|
||||
if (!inventoryByModel[t]) inventoryByModel[t] = inventoryByModelRaw[t];
|
||||
}
|
||||
|
||||
// Derived data for dept section
|
||||
@@ -297,13 +305,20 @@ export default function App() {
|
||||
const uniqueDepts = Array.from(new Set(customerData.map((s) => s.department).filter(Boolean)));
|
||||
const uniqueRegions = Array.from(new Set(customerData.map((s) => s.region)));
|
||||
const uniqueCities = Array.from(new Set(customerData.map((s) => s.city).filter(Boolean)));
|
||||
const uniqueCustomerNames = Array.from(new Set(customerData.map((s) => s.customer).filter(Boolean)));
|
||||
const uniqueCustomerManagers = Array.from(new Set(customerData.map((s) => s.manager).filter(Boolean)));
|
||||
const uniqueInventoryModels = Array.from(new Set(inventoryData.map((s) => s.model).filter(Boolean)));
|
||||
const uniqueModalPlates = Array.from(new Set(modalVehicles.map(v => v.plateNumber || v.vin).filter(Boolean)));
|
||||
const uniqueModalModels = Array.from(new Set(modalVehicles.map(v => v.model).filter(Boolean)));
|
||||
const uniqueModalBrands = Array.from(new Set(modalVehicles.map(v => v.brandLabel).filter((x): x is string => Boolean(x))));
|
||||
const uniqueModalLocations = Array.from(new Set(modalVehicles.map(v => v.location).filter(Boolean)));
|
||||
|
||||
// Derived data for region section
|
||||
const filteredRegionData = regionData.filter((r) => !regionFilters.region || r.region === regionFilters.region);
|
||||
|
||||
// Filtered modal vehicles based on modal filters
|
||||
const filteredModalVehicles = modalVehicles.filter((v) => {
|
||||
const mp = !modalFilters.plateNumber || v.plateNumber.toLowerCase().includes(modalFilters.plateNumber.toLowerCase());
|
||||
const mp = !modalFilters.plateNumber || v.plateNumber.toLowerCase().includes(modalFilters.plateNumber.toLowerCase()) || v.vin.toLowerCase().includes(modalFilters.plateNumber.toLowerCase());
|
||||
const mm = !modalFilters.model || v.model.toLowerCase().includes(modalFilters.model.toLowerCase());
|
||||
const mb = !modalFilters.brand || (v.brandLabel || '').toLowerCase().includes(modalFilters.brand.toLowerCase());
|
||||
const ml = !modalFilters.location || v.location.toLowerCase().includes(modalFilters.location.toLowerCase());
|
||||
@@ -1003,59 +1018,75 @@ export default function App() {
|
||||
<div className="space-y-3 text-left">
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-400 block mb-1">区域</label>
|
||||
<select
|
||||
<input
|
||||
list="dl-inv-region"
|
||||
type="text"
|
||||
placeholder="搜索或选择..."
|
||||
value={inventoryFilters.region}
|
||||
onChange={(e) => setInventoryFilters({...inventoryFilters, region: e.target.value})}
|
||||
className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer"
|
||||
>
|
||||
<option value="">全部区域</option>
|
||||
{uniqueInventoryRegions.map(r => <option key={r} value={r}>{r}</option>)}
|
||||
</select>
|
||||
className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm"
|
||||
/>
|
||||
<datalist id="dl-inv-region">
|
||||
{uniqueInventoryRegions.map(r => <option key={r} value={r} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-400 block mb-1">城市</label>
|
||||
<select
|
||||
<input
|
||||
list="dl-inv-city"
|
||||
type="text"
|
||||
placeholder="搜索或选择..."
|
||||
value={inventoryFilters.city}
|
||||
onChange={(e) => setInventoryFilters({...inventoryFilters, city: e.target.value})}
|
||||
className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer"
|
||||
>
|
||||
<option value="">全部城市</option>
|
||||
{uniqueInventoryCities.map(c => <option key={c} value={c}>{c}</option>)}
|
||||
</select>
|
||||
className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm"
|
||||
/>
|
||||
<datalist id="dl-inv-city">
|
||||
{uniqueInventoryCities.map(c => <option key={c} value={c} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-400 block mb-1">品牌</label>
|
||||
<select
|
||||
<input
|
||||
list="dl-inv-brand"
|
||||
type="text"
|
||||
placeholder="搜索或选择..."
|
||||
value={inventoryFilters.brand}
|
||||
onChange={(e) => setInventoryFilters({...inventoryFilters, brand: e.target.value})}
|
||||
className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer"
|
||||
>
|
||||
<option value="">全部品牌</option>
|
||||
{uniqueInventoryBrands.map(b => <option key={b} value={b}>{b}</option>)}
|
||||
</select>
|
||||
className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm"
|
||||
/>
|
||||
<datalist id="dl-inv-brand">
|
||||
{uniqueInventoryBrands.map(b => <option key={b} value={b} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-400 block mb-1">批次</label>
|
||||
<select
|
||||
<input
|
||||
list="dl-inv-batch"
|
||||
type="text"
|
||||
placeholder="搜索或选择..."
|
||||
value={inventoryFilters.batch}
|
||||
onChange={(e) => setInventoryFilters({...inventoryFilters, batch: e.target.value})}
|
||||
className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer"
|
||||
>
|
||||
<option value="">全部批次</option>
|
||||
{uniqueInventoryBatches.map(b => <option key={b} value={b}>{b}</option>)}
|
||||
</select>
|
||||
className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm"
|
||||
/>
|
||||
<datalist id="dl-inv-batch">
|
||||
{uniqueInventoryBatches.map(b => <option key={b} value={b} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] text-slate-400 block mb-1">车型名称</label>
|
||||
<div className="relative">
|
||||
<Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
|
||||
<input
|
||||
list="dl-inv-model"
|
||||
type="text"
|
||||
placeholder="搜索车型..."
|
||||
value={inventoryFilters.model}
|
||||
onChange={(e) => setInventoryFilters({...inventoryFilters, model: e.target.value})}
|
||||
className="w-full text-xs bg-white border border-slate-200 rounded-lg pl-7 pr-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm"
|
||||
/>
|
||||
<datalist id="dl-inv-model">
|
||||
{uniqueInventoryModels.map(m => <option key={m} value={m} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1410,17 +1441,20 @@ export default function App() {
|
||||
{deptViewMode === 'manager' && (
|
||||
<div className="relative">
|
||||
<Filter className="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400" size={14} />
|
||||
<select
|
||||
value={selectedManager}
|
||||
onChange={(e) => setSelectedManager(e.target.value)}
|
||||
className="w-full pl-9 pr-8 py-1.5 bg-white border border-gray-200 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm appearance-none cursor-pointer font-bold text-gray-700"
|
||||
>
|
||||
<input
|
||||
list="dl-dept-manager"
|
||||
type="text"
|
||||
placeholder="搜索或选择..."
|
||||
value={selectedManager === 'All' ? '' : selectedManager}
|
||||
onChange={(e) => setSelectedManager(e.target.value || 'All')}
|
||||
className="w-full pl-9 pr-8 py-1.5 bg-white border border-gray-200 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm font-bold text-gray-700"
|
||||
/>
|
||||
<datalist id="dl-dept-manager">
|
||||
<option value="All">所有业务员</option>
|
||||
{allManagersList.map(m => (
|
||||
<option key={m} value={m}>{m}</option>
|
||||
<option key={m} value={m} />
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown className="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" size={14} />
|
||||
</datalist>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -1922,37 +1956,47 @@ export default function App() {
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={14} />
|
||||
<input
|
||||
list="dl-region-customer"
|
||||
type="text"
|
||||
placeholder="搜索客户名称..."
|
||||
className="w-full bg-gray-50 border border-gray-200 rounded-lg py-2 pl-9 pr-3 text-xs focus:ring-2 focus:ring-slate-500/20 focus:border-slate-500 outline-none transition-all"
|
||||
value={regionFilters.customer}
|
||||
onChange={(e) => setRegionFilters(prev => ({ ...prev, customer: e.target.value }))}
|
||||
/>
|
||||
<datalist id="dl-region-customer">
|
||||
{uniqueCustomerNames.map(c => <option key={c} value={c} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">区域</label>
|
||||
<select
|
||||
className="w-full bg-gray-50 border border-gray-200 rounded-lg py-2 px-2 text-xs focus:ring-2 focus:ring-slate-500/20 focus:border-slate-500 outline-none transition-all cursor-pointer"
|
||||
<input
|
||||
list="dl-region-region"
|
||||
type="text"
|
||||
placeholder="搜索或选择..."
|
||||
className="w-full bg-gray-50 border border-gray-200 rounded-lg py-2 px-2 text-xs focus:ring-2 focus:ring-slate-500/20 focus:border-slate-500 outline-none transition-all"
|
||||
value={regionFilters.region}
|
||||
onChange={(e) => setRegionFilters(prev => ({ ...prev, region: e.target.value }))}
|
||||
>
|
||||
<option value="">所有区域</option>
|
||||
{uniqueRegions.map(r => <option key={r} value={r}>{r}</option>)}
|
||||
</select>
|
||||
/>
|
||||
<datalist id="dl-region-region">
|
||||
{uniqueRegions.map(r => <option key={r} value={r} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">城市</label>
|
||||
<select
|
||||
className="w-full bg-gray-50 border border-gray-200 rounded-lg py-2 px-2 text-xs focus:ring-2 focus:ring-slate-500/20 focus:border-slate-500 outline-none transition-all cursor-pointer"
|
||||
<input
|
||||
list="dl-region-city"
|
||||
type="text"
|
||||
placeholder="搜索或选择..."
|
||||
className="w-full bg-gray-50 border border-gray-200 rounded-lg py-2 px-2 text-xs focus:ring-2 focus:ring-slate-500/20 focus:border-slate-500 outline-none transition-all"
|
||||
value={regionFilters.city}
|
||||
onChange={(e) => setRegionFilters(prev => ({ ...prev, city: e.target.value }))}
|
||||
>
|
||||
<option value="">所有城市</option>
|
||||
{uniqueCities.map(c => <option key={c} value={c}>{c}</option>)}
|
||||
</select>
|
||||
/>
|
||||
<datalist id="dl-region-city">
|
||||
{uniqueCities.map(c => <option key={c} value={c} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2222,12 +2266,16 @@ export default function App() {
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400" size={12} />
|
||||
<input
|
||||
list="dl-cust-customer"
|
||||
type="text"
|
||||
placeholder="搜索客户..."
|
||||
className="w-full bg-gray-50 border border-gray-200 rounded-lg py-2 pl-8 pr-2 text-xs focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all"
|
||||
value={customerFilters.customer}
|
||||
onChange={(e) => setCustomerFilters(prev => ({ ...prev, customer: e.target.value }))}
|
||||
/>
|
||||
<datalist id="dl-cust-customer">
|
||||
{uniqueCustomerNames.map(c => <option key={c} value={c} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2236,48 +2284,61 @@ export default function App() {
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400" size={12} />
|
||||
<input
|
||||
list="dl-cust-manager"
|
||||
type="text"
|
||||
placeholder="搜索负责人..."
|
||||
className="w-full bg-gray-50 border border-gray-200 rounded-lg py-2 pl-8 pr-2 text-xs focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all"
|
||||
value={customerFilters.manager}
|
||||
onChange={(e) => setCustomerFilters(prev => ({ ...prev, manager: e.target.value }))}
|
||||
/>
|
||||
<datalist id="dl-cust-manager">
|
||||
{uniqueCustomerManagers.map(m => <option key={m} value={m} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">品牌</label>
|
||||
<select
|
||||
className="w-full bg-gray-50 border border-gray-200 rounded-lg py-2 px-2 text-xs focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all cursor-pointer"
|
||||
<input
|
||||
list="dl-cust-brand"
|
||||
type="text"
|
||||
placeholder="搜索或选择..."
|
||||
className="w-full bg-gray-50 border border-gray-200 rounded-lg py-2 px-2 text-xs focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all"
|
||||
value={customerFilters.brand}
|
||||
onChange={(e) => setCustomerFilters(prev => ({ ...prev, brand: e.target.value }))}
|
||||
>
|
||||
<option value="">所有品牌</option>
|
||||
{uniqueBrands.map(b => <option key={b} value={b}>{b}</option>)}
|
||||
</select>
|
||||
/>
|
||||
<datalist id="dl-cust-brand">
|
||||
{uniqueBrands.map(b => <option key={b} value={b} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">部门</label>
|
||||
<select
|
||||
className="w-full bg-gray-50 border border-gray-200 rounded-lg py-2 px-2 text-xs focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all cursor-pointer"
|
||||
<input
|
||||
list="dl-cust-dept"
|
||||
type="text"
|
||||
placeholder="搜索或选择..."
|
||||
className="w-full bg-gray-50 border border-gray-200 rounded-lg py-2 px-2 text-xs focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all"
|
||||
value={customerFilters.department}
|
||||
onChange={(e) => setCustomerFilters(prev => ({ ...prev, department: e.target.value }))}
|
||||
>
|
||||
<option value="">所有部门</option>
|
||||
{uniqueDepts.map(d => <option key={d} value={d}>{d}</option>)}
|
||||
</select>
|
||||
/>
|
||||
<datalist id="dl-cust-dept">
|
||||
{uniqueDepts.map(d => <option key={d} value={d} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">区域</label>
|
||||
<select
|
||||
className="w-full bg-gray-50 border border-gray-200 rounded-lg py-2 px-2 text-xs focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all cursor-pointer"
|
||||
<input
|
||||
list="dl-cust-region"
|
||||
type="text"
|
||||
placeholder="搜索或选择..."
|
||||
className="w-full bg-gray-50 border border-gray-200 rounded-lg py-2 px-2 text-xs focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none transition-all"
|
||||
value={customerFilters.region}
|
||||
onChange={(e) => setCustomerFilters(prev => ({ ...prev, region: e.target.value }))}
|
||||
>
|
||||
<option value="">所有区域</option>
|
||||
{uniqueRegions.map(r => <option key={r} value={r}>{r}</option>)}
|
||||
</select>
|
||||
/>
|
||||
<datalist id="dl-cust-region">
|
||||
{uniqueRegions.map(r => <option key={r} value={r} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2567,12 +2628,16 @@ export default function App() {
|
||||
<div className="relative">
|
||||
<Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
list="dl-modal-plate"
|
||||
type="text"
|
||||
value={modalFilters.plateNumber}
|
||||
onChange={(e) => setModalFilters({...modalFilters, plateNumber: e.target.value})}
|
||||
placeholder="搜索车牌..."
|
||||
className="w-full text-[11px] pl-7 pr-2 py-1.5 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm"
|
||||
/>
|
||||
<datalist id="dl-modal-plate">
|
||||
{uniqueModalPlates.map(p => <option key={p} value={p} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
@@ -2580,12 +2645,16 @@ export default function App() {
|
||||
<div className="relative">
|
||||
<Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
list="dl-modal-model"
|
||||
type="text"
|
||||
value={modalFilters.model}
|
||||
onChange={(e) => setModalFilters({...modalFilters, model: e.target.value})}
|
||||
placeholder="搜索车型..."
|
||||
className="w-full text-[11px] pl-7 pr-2 py-1.5 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm"
|
||||
/>
|
||||
<datalist id="dl-modal-model">
|
||||
{uniqueModalModels.map(m => <option key={m} value={m} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
@@ -2593,12 +2662,16 @@ export default function App() {
|
||||
<div className="relative">
|
||||
<Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
list="dl-modal-brand"
|
||||
type="text"
|
||||
value={modalFilters.brand}
|
||||
onChange={(e) => setModalFilters({...modalFilters, brand: e.target.value})}
|
||||
placeholder="搜索品牌..."
|
||||
className="w-full text-[11px] pl-7 pr-2 py-1.5 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm"
|
||||
/>
|
||||
<datalist id="dl-modal-brand">
|
||||
{uniqueModalBrands.map(b => <option key={b} value={b} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
@@ -2606,12 +2679,16 @@ export default function App() {
|
||||
<div className="relative">
|
||||
<Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
list="dl-modal-location"
|
||||
type="text"
|
||||
value={modalFilters.location}
|
||||
onChange={(e) => setModalFilters({...modalFilters, location: e.target.value})}
|
||||
placeholder="搜索所在地..."
|
||||
className="w-full text-[11px] pl-7 pr-2 py-1.5 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm"
|
||||
/>
|
||||
<datalist id="dl-modal-location">
|
||||
{uniqueModalLocations.map(l => <option key={l} value={l} />)}
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2701,7 +2778,7 @@ export default function App() {
|
||||
<td className="p-2 border-r border-gray-100 text-gray-600">{v.type}</td>
|
||||
<td className="p-2 border-r border-gray-100 text-gray-500 text-[10px] leading-tight">{v.subjectOrg || '—'}</td>
|
||||
<td className="p-2 border-r border-gray-100 font-bold text-gray-800">{v.customerName || '—'}</td>
|
||||
<td className="p-2 border-r border-gray-100 font-mono font-bold text-blue-700">{v.plateNumber}</td>
|
||||
<td className={`p-2 border-r border-gray-100 font-mono font-bold ${v.plateNumber ? 'text-blue-700' : 'text-orange-500'}`}>{v.plateNumber || v.vin || '—'}</td>
|
||||
<td className="p-2 border-r border-gray-100 text-center">
|
||||
<span className={`px-1.5 py-0.5 rounded-full text-[9px] font-bold ${
|
||||
v.status === 'Operating' ? 'bg-green-100 text-green-700' :
|
||||
@@ -2718,7 +2795,7 @@ export default function App() {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<td className="p-2 border-r border-gray-100 font-mono font-bold text-blue-700 text-center">{v.plateNumber}</td>
|
||||
<td className={`p-2 border-r border-gray-100 font-mono font-bold text-center ${v.plateNumber ? 'text-blue-700' : 'text-orange-500'}`}>{v.plateNumber || v.vin || '—'}</td>
|
||||
{showPlateNumbers.source !== 'asset' && (
|
||||
<td className="p-2 border-r border-gray-100 font-bold text-gray-800 text-center">{v.customerName || '—'}</td>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user