YANG JIANKUAN
db062c8ee3
- 落地手机端双形态适配框架：同名布局+资源限定符（layout/手机、 layout-sw600dp/平板）自动切换，DeviceUtil 设备形态判定，7个 手机版公共组件（PhoneSearchBar/StatusTab/DataLayout/FilterPanel/ BottomBar/StatBox/KvItem） - 完成「国际出港移库」「国际出港出库交接」两页手机端适配，新增 各自详情页（IntExpMoveDetailActivity/IntExpOutHandoverDetailActivity） - 手机端首页菜单接入"出港移库""出库交接"入口 - 修复手机端进入页面先横屏后转竖屏的闪屏问题：Manifest 全项目 192 处改为 screenOrientation="unspecified"，由 BaseActivity 按设备形态运行时锁定方向 - 修复该方案的中间版本在平板端引入的回归（先竖后横 + UI放大1.6倍） - AutoSize 补充手机竖屏 390×844 设计基准 - 修复 CHANGELOG.md 因脚本异常导致的内容重复损坏（膨胀至12万行）， 恢复正常结构并补充本次变更记录 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
650 lines
43 KiB
HTML
650 lines
43 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<title>ULD管理</title>
|
||
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
|
||
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
background-color: #F3F4F6;
|
||
font-size: 13px;
|
||
}
|
||
.safe-bottom {
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
.custom-checkbox-round {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
border-radius: 9999px;
|
||
width: 18px;
|
||
height: 18px;
|
||
border: 2px solid #D1D5DB;
|
||
background-color: #fff;
|
||
position: relative;
|
||
cursor: pointer;
|
||
outline: none;
|
||
flex-shrink: 0;
|
||
}
|
||
.custom-checkbox-round:checked {
|
||
background-color: #0D6EFD;
|
||
border-color: #0D6EFD;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
|
||
background-size: 14px 14px;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.no-scrollbar::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.no-scrollbar {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
.btn-active:active {
|
||
opacity: 0.7;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-200 min-h-screen flex items-center justify-center p-4">
|
||
<div class="relative w-[390px] h-[844px] bg-[#1a1a1a] rounded-[55px] shadow-2xl border-[6px] border-[#333] flex flex-col overflow-hidden">
|
||
<div class="flex-1 bg-white mt-0 mb-1 mx-1 rounded-[46px] overflow-hidden flex flex-col relative">
|
||
<div class="bg-[#2563EB] text-white h-11 px-7 flex items-end pb-2 justify-between text-[14px] font-medium z-50">
|
||
<span>09:41</span>
|
||
<div class="flex items-center gap-1.5 pb-0.5">
|
||
<iconify-icon icon="mdi:signal-cellular-3"></iconify-icon>
|
||
<iconify-icon icon="mdi:wifi"></iconify-icon>
|
||
<iconify-icon icon="mdi:battery"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 flex flex-col overflow-hidden relative bg-gray-100">
|
||
<header class="relative bg-[#2563EB] text-white flex items-center h-12 px-3 sticky top-0 z-50">
|
||
<div class="flex items-center btn-active" onclick="alert('返回首页')">
|
||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||
<span class="text-sm font-medium text-white -ml-1">返回</span>
|
||
</div>
|
||
<h1 class="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-white">ULD管理</h1>
|
||
</header>
|
||
<section class="px-4 pt-4 pb-3 flex-none">
|
||
<div class="flex items-center gap-2">
|
||
<div class="flex items-center bg-white border border-gray-200 rounded-[12px] h-10 px-3 gap-2 flex-1 shadow-sm">
|
||
<iconify-icon class="text-gray-500 text-[14px] text-lg flex-none" icon="mdi:magnify"></iconify-icon>
|
||
<input class="flex-1 bg-transparent text-[14px] text-gray-700 placeholder-gray-400 outline-none border-none rounded-lg px-2" placeholder="搜索ULD编号" type="text"/>
|
||
<button class="flex-none text-blue-500">
|
||
<iconify-icon class="text-lg" icon="mdi:qrcode-scan"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<button class="bg-white p-2.5 rounded-full shadow-sm border border-gray-200 text-[#2563EB] flex items-center justify-center flex-none" onclick="toggleFilterDrawer(true)">
|
||
<iconify-icon class="text-lg" icon="mdi:filter-variant"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
<main class="flex-1 overflow-y-auto px-4 pt-3 pb-[80px] no-scrollbar">
|
||
<!-- 卡片1 -->
|
||
<div class="bg-white rounded-xl shadow-sm mb-3 p-4 relative cursor-pointer" onclick="showUldDetail('PMC78133363396', '占用', 'CA', '150', '12.5', '6800', 'CA1111', 'PEK', 'B区-05货位', '--')">
|
||
<div class="flex justify-between items-start mb-3">
|
||
<div class="flex items-center gap-3">
|
||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="event.stopPropagation(); handleCheckboxClick(this, event)" type="checkbox"/>
|
||
<span class="text-[15px] font-bold text-[#1F2937]">PMC78133363396</span>
|
||
</div>
|
||
<div class="flex items-center gap-1">
|
||
<span class="bg-[#FFF3E0] text-[#E67722] text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">占用</span>
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right" width="14"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-2 text-gray-500 text-[13px]">
|
||
<div class="grid grid-cols-2 gap-x-3">
|
||
<div class="flex items-center gap-1.5">
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:office-building-outline"></iconify-icon>
|
||
<span>所属航司：CA</span>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-1.5">
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||
<span>来源：空运</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-1.5">
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:calendar-clock"></iconify-icon>
|
||
<span>入库时间：2026-07-20 15:59:20</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 卡片2 -->
|
||
<div class="bg-white rounded-xl shadow-sm mb-3 p-4 relative cursor-pointer" onclick="showUldDetail('PMC78133363397', '可用', 'CA', '120', '10.0', '5500', 'CA2222', 'CAN', 'C区-12货位', '--')">
|
||
<div class="flex justify-between items-start mb-3">
|
||
<div class="flex items-center gap-3">
|
||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="event.stopPropagation(); handleCheckboxClick(this, event)" type="checkbox"/>
|
||
<span class="text-[15px] font-bold text-[#1F2937]">PMC78133363397</span>
|
||
</div>
|
||
<div class="flex items-center gap-1">
|
||
<span class="bg-green-100 text-green-600 text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">可用</span>
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right" width="14"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-2 text-gray-500 text-[13px]">
|
||
<div class="grid grid-cols-2 gap-x-3">
|
||
<div class="flex items-center gap-1.5">
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:office-building-outline"></iconify-icon>
|
||
<span>所属航司：CA</span>
|
||
</div>
|
||
<div class="flex items-center gap-1.5">
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||
<span>来源：空运</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-1.5">
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:calendar-clock"></iconify-icon>
|
||
<span>入库时间：2026-07-20 15:59:20</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 卡片3 -->
|
||
<div class="bg-white rounded-xl shadow-sm mb-3 p-4 relative cursor-pointer" onclick="showUldDetail('PMC78133363398', '维修', 'CA', '0', '0.0', '0', 'CA3333', 'PVG', '维修区', '维修中')">
|
||
<div class="flex justify-between items-start mb-3">
|
||
<div class="flex items-center gap-3">
|
||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="event.stopPropagation(); handleCheckboxClick(this, event)" type="checkbox"/>
|
||
<span class="text-[15px] font-bold text-[#1F2937]">PMC78133363398</span>
|
||
</div>
|
||
<div class="flex items-center gap-1">
|
||
<span class="bg-red-50 text-red-600 text-[11px] px-2 py-0.5 rounded font-medium">维修</span>
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right" width="14"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-2 text-gray-500 text-[13px]">
|
||
<div class="grid grid-cols-2 gap-x-3">
|
||
<div class="flex items-center gap-1.5">
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:office-building-outline"></iconify-icon>
|
||
<span>所属航司：CA</span>
|
||
</div>
|
||
<div class="flex items-center gap-1.5">
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||
<span>来源：陆运</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-1.5">
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:calendar-clock"></iconify-icon>
|
||
<span>入库时间：2026-07-20 15:59:20</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 卡片4 -->
|
||
<div class="bg-white rounded-xl shadow-sm mb-3 p-4 relative cursor-pointer" onclick="showUldDetail('PMC78133363399', '占用', 'CA', '280', '20.0', '8500', 'CA4444', 'CTU', 'A区-08货位', '--')">
|
||
<div class="flex justify-between items-start mb-3">
|
||
<div class="flex items-center gap-3">
|
||
<input class="item-checkbox custom-checkbox-round flex-none" onclick="event.stopPropagation(); handleCheckboxClick(this, event)" type="checkbox"/>
|
||
<span class="text-[15px] font-bold text-[#1F2937]">PMC78133363399</span>
|
||
</div>
|
||
<div class="flex items-center gap-1">
|
||
<span class="bg-[#FFF3E0] text-[#E67722] text-[11px] px-2 h-5 flex items-center rounded-[6px] font-medium">占用</span>
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:chevron-right" width="14"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-2 text-gray-500 text-[13px]">
|
||
<div class="grid grid-cols-2 gap-x-3">
|
||
<div class="flex items-center gap-1.5">
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:office-building-outline"></iconify-icon>
|
||
<span>所属航司：CA</span>
|
||
</div>
|
||
<div class="flex items-center gap-1.5">
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:map-marker"></iconify-icon>
|
||
<span>来源：空运</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-1.5">
|
||
<iconify-icon class="text-gray-500 text-[14px]" icon="mdi:calendar-clock"></iconify-icon>
|
||
<span>入库时间：2026-07-20 15:59:20</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<div class="absolute bottom-0 w-full bg-white border-t border-gray-200 z-40 flex flex-col pt-3 pb-3" id="bottom-toolbar" style="display: flex;">
|
||
<div class="absolute right-4 -top-[73px] z-50">
|
||
<button class="bg-[#2563EB] text-white w-11 h-11 rounded-full flex items-center justify-center shadow-lg shadow-blue-500/40" onclick="showAddDialog()">
|
||
<iconify-icon icon="mdi:plus" width="24"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<div class="px-4 flex items-center w-full">
|
||
<div class="flex items-center gap-2">
|
||
<input class="custom-checkbox-round flex-none" id="select-all-cb" onclick="toggleSelectAll(this.checked)" type="checkbox"/>
|
||
<label class="text-[13px] text-[#1F2937] font-medium cursor-pointer" for="select-all-cb">全选</label>
|
||
</div>
|
||
<div class="flex-1"></div>
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-[12px] text-[#9CA3AF]">已选 <span id="selected-count">0 / 4</span> 项</span>
|
||
<button class="bg-[#FDEDED] text-[#DC2626] text-[15px] font-bold px-5 py-2 rounded-[10px] flex items-center gap-1.5 btn-active" onclick="handleBatchDelete()">
|
||
<iconify-icon class="text-base" icon="mdi:delete-outline"></iconify-icon>
|
||
<span>删除</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 新增弹窗 -->
|
||
<div class="absolute inset-0 bg-gray-100 z-[60] flex flex-col hidden" id="addUldOverlay">
|
||
<div class="bg-[#2563EB] text-white h-11 px-7 flex items-end pb-2 justify-between text-[14px] font-medium z-50 flex-none">
|
||
<span>09:41</span>
|
||
<div class="flex items-center gap-1.5 pb-0.5">
|
||
<iconify-icon icon="mdi:signal-cellular-3"></iconify-icon>
|
||
<iconify-icon icon="mdi:wifi"></iconify-icon>
|
||
<iconify-icon icon="mdi:battery"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<header class="relative bg-[#2563EB] text-white flex items-center h-12 px-3 flex-none">
|
||
<div class="flex items-center btn-active" onclick="hideAddDialog()">
|
||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||
<span class="text-sm font-medium text-white -ml-1">返回</span>
|
||
</div>
|
||
<h1 class="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-white">ULD新增</h1>
|
||
</header>
|
||
<div class="flex-1 overflow-y-auto p-4 no-scrollbar">
|
||
<div class="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,0,0,0.05)] overflow-hidden px-4">
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">ULD编号<span class="text-red-500 ml-0.5">*</span></span>
|
||
<input id="add-uldNo" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入ULD编号" type="text"/>
|
||
</div>
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">状态</span>
|
||
<div class="flex-1 flex items-center justify-between cursor-pointer status-display" onclick="showSelectPanel('status', '请选择状态', ['可用', '占用', '维修'])">
|
||
<span id="add-status-text" class="text-[14px] text-gray-500">请选择状态</span>
|
||
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">所属航司</span>
|
||
<div class="flex-1 flex items-center justify-between cursor-pointer airline-display" onclick="showSelectPanel('airline', '请选择所属航司', ['CA', 'MU', 'CZ', '3U'])">
|
||
<span id="add-airline-text" class="text-[14px] text-gray-500">请选择所属航司</span>
|
||
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">来源</span>
|
||
<div class="flex-1 flex items-center justify-between cursor-pointer source-display" onclick="showSelectPanel('source', '请选择来源', ['空运', '陆运'])">
|
||
<span id="add-source-text" class="text-[14px] text-gray-500">请选择来源</span>
|
||
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">自重(kg)<span class="text-red-500 ml-0.5">*</span></span>
|
||
<input id="add-weight" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入自重" type="number"/>
|
||
</div>
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">进港航班号</span>
|
||
<input id="add-flightNo" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入进港航班号" type="text"/>
|
||
</div>
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">所在港</span>
|
||
<input id="add-port" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="HFE" type="text"/>
|
||
</div>
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">入库时间<span class="text-red-500 ml-0.5">*</span></span>
|
||
<input id="add-inTime" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入入库时间" type="text"/>
|
||
</div>
|
||
<div class="flex items-center py-[14px]">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">备注</span>
|
||
<input id="add-remark" class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入备注" type="text"/>
|
||
</div>
|
||
</div>
|
||
<button class="w-full mt-8 bg-[#2563EB] text-white py-3.5 rounded-[10px] font-bold text-[16px] shadow-lg shadow-blue-500/30 btn-active" onclick="saveUld()">保存</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 详情弹窗 -->
|
||
<div class="absolute inset-0 bg-gray-100 z-[70] flex flex-col hidden" id="detailOverlay">
|
||
<div class="bg-[#2563EB] text-white h-11 px-7 flex items-end pb-2 justify-between text-[14px] font-medium z-50 flex-none">
|
||
<span>09:41</span>
|
||
<div class="flex items-center gap-1.5 pb-0.5">
|
||
<iconify-icon icon="mdi:signal-cellular-3"></iconify-icon>
|
||
<iconify-icon icon="mdi:wifi"></iconify-icon>
|
||
<iconify-icon icon="mdi:battery"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<header class="relative bg-[#2563EB] text-white flex items-center h-12 px-3 flex-none">
|
||
<div class="flex items-center btn-active" onclick="hideUldDetail()">
|
||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||
<span class="text-sm font-medium text-white -ml-1">返回</span>
|
||
</div>
|
||
<h1 class="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-white">ULD详情</h1>
|
||
<button class="absolute right-4 top-1/2 -translate-y-1/2 text-white text-lg" onclick="openEdit()">
|
||
<iconify-icon icon="mdi:pencil" width="22"></iconify-icon>
|
||
</button>
|
||
</header>
|
||
<div class="flex-1 overflow-y-auto p-4 no-scrollbar">
|
||
<div class="bg-white rounded-xl shadow-sm overflow-hidden px-4 mb-6">
|
||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||
<span class="text-[13px] font-medium text-[#6B7280]">ULD编号</span>
|
||
<span class="text-[14px] font-normal text-[#111827]" id="detail-uldNo">--</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||
<span class="text-[13px] font-medium text-[#6B7280]">状态</span>
|
||
<span class="text-[13px] font-medium px-2 py-0.5 rounded-[6px]" id="detail-status">--</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||
<span class="text-[13px] font-medium text-[#6B7280]">所属航司</span>
|
||
<span class="text-[14px] font-normal text-[#111827]" id="detail-airline">--</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||
<span class="text-[13px] font-medium text-[#6B7280]">自重 (kg)</span>
|
||
<span class="text-[14px] font-normal text-[#111827]" id="detail-weight">--</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||
<span class="text-[13px] font-medium text-[#6B7280]">最大装载容积 (m³)</span>
|
||
<span class="text-[14px] font-normal text-[#111827]" id="detail-volume">--</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||
<span class="text-[13px] font-medium text-[#6B7280]">最大载重 (kg)</span>
|
||
<span class="text-[14px] font-normal text-[#111827]" id="detail-maxWeight">--</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||
<span class="text-[13px] font-medium text-[#6B7280]">进港航班号</span>
|
||
<span class="text-[14px] font-normal text-[#111827]" id="detail-flightNo">--</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||
<span class="text-[13px] font-medium text-[#6B7280]">所在港</span>
|
||
<span class="text-[14px] font-normal text-[#111827]" id="detail-port">--</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||
<span class="text-[13px] font-medium text-[#6B7280]">来源</span>
|
||
<span class="text-[14px] font-normal text-[#111827]" id="detail-source">--</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3.5 border-b border-gray-100">
|
||
<span class="text-[13px] font-medium text-[#6B7280]">入库时间</span>
|
||
<span class="text-[14px] font-normal text-[#111827]" id="detail-inTime">--</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3.5">
|
||
<span class="text-[13px] font-medium text-[#6B7280]">备注</span>
|
||
<span class="text-[14px] font-normal text-[#111827]" id="detail-remark">--</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 修改页面 -->
|
||
<div class="absolute inset-0 bg-gray-100 z-[80] flex flex-col hidden" id="editOverlay">
|
||
<div class="bg-[#2563EB] text-white h-11 px-7 flex items-end pb-2 justify-between text-[14px] font-medium z-50 flex-none">
|
||
<span>09:41</span>
|
||
<div class="flex items-center gap-1.5 pb-0.5">
|
||
<iconify-icon icon="mdi:signal-cellular-3"></iconify-icon>
|
||
<iconify-icon icon="mdi:wifi"></iconify-icon>
|
||
<iconify-icon icon="mdi:battery"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<header class="relative bg-[#2563EB] text-white flex items-center h-12 px-3 flex-none">
|
||
<div class="flex items-center btn-active" onclick="closeEdit()">
|
||
<iconify-icon icon="mdi:chevron-left" width="28"></iconify-icon>
|
||
<span class="text-sm font-medium text-white -ml-1">返回</span>
|
||
</div>
|
||
<h1 class="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-white">ULD修改</h1>
|
||
</header>
|
||
<div class="flex-1 overflow-y-auto p-4 no-scrollbar">
|
||
<div class="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,0,0,0.05)] overflow-hidden px-4">
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">ULD编号</span>
|
||
<input id="edit-uldNo" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="text" readonly/>
|
||
</div>
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">状态</span>
|
||
<div class="flex-1 flex items-center justify-between cursor-pointer status-display" onclick="showSelectPanel('editStatus', '请选择状态', ['可用', '占用', '维修'])">
|
||
<span id="edit-status-text" class="text-[13px] font-medium px-2 py-0.5 rounded-[6px] text-gray-800">--</span>
|
||
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">所属航司</span>
|
||
<div class="flex-1 flex items-center justify-between cursor-pointer airline-display" onclick="showSelectPanel('editAirline', '请选择航司', ['CA', 'MU', 'CZ', '3U'])">
|
||
<span id="edit-airline-text" class="text-[14px] text-gray-800">--</span>
|
||
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">自重(kg)</span>
|
||
<input id="edit-weight" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="number"/>
|
||
</div>
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">进港航班号</span>
|
||
<input id="edit-flightNo" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="text"/>
|
||
</div>
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">所在港</span>
|
||
<input id="edit-port" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="text"/>
|
||
</div>
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">来源</span>
|
||
<div class="flex-1 flex items-center justify-between cursor-pointer source-display" onclick="showSelectPanel('editSource', '请选择来源', ['空运', '陆运'])">
|
||
<span id="edit-source-text" class="text-[14px] text-gray-800">--</span>
|
||
<iconify-icon class="text-xl text-gray-500" icon="mdi:chevron-right" width="16"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center py-[14px] border-b border-gray-100">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">入库时间</span>
|
||
<input id="edit-inTime" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="text"/>
|
||
</div>
|
||
<div class="flex items-center py-[14px]">
|
||
<span class="w-[90px] text-[13px] font-medium text-[#6B7280] shrink-0">备注</span>
|
||
<input id="edit-remark" class="flex-1 bg-transparent outline-none text-gray-800 text-[14px]" type="text"/>
|
||
</div>
|
||
</div>
|
||
<button class="w-full mt-8 bg-[#2563EB] text-white py-3.5 rounded-[10px] font-bold text-[16px] shadow-lg shadow-blue-500/30 btn-active" onclick="saveEdit()">保存</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 筛选弹窗 -->
|
||
<div class="absolute inset-0 z-[100] bg-black/50 flex items-end justify-center" id="filterOverlay" onclick="toggleFilterDrawer(false)" style="display: none;">
|
||
<div class="bg-white rounded-t-[20px] w-full max-w-[390px] px-5 pt-6 pb-8" onclick="event.stopPropagation()">
|
||
<div class="relative flex items-center justify-center mb-6">
|
||
<button class="absolute right-0 top-0 text-gray-400" onclick="toggleFilterDrawer(false)">
|
||
<iconify-icon class="text-2xl" icon="mdi:close"></iconify-icon>
|
||
</button>
|
||
<h2 class="text-[18px] font-bold text-gray-900">筛选条件</h2>
|
||
</div>
|
||
<div class="space-y-5">
|
||
<div>
|
||
<label class="block text-[14px] text-gray-700 mb-1.5">入库时间</label>
|
||
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3 cursor-pointer">
|
||
<input class="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-400 text-[14px]" placeholder="请输入入库时间" type="text"/>
|
||
<iconify-icon class="text-gray-500 text-[14px] flex-none" icon="mdi:calendar" width="18"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-[14px] text-gray-700 mb-1.5">进港航班号</label>
|
||
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3">
|
||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请输入进港航班号" type="text"/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-[14px] text-gray-700 mb-1.5">所属航司</label>
|
||
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3 cursor-pointer">
|
||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请选择所属航司" readonly type="text"/>
|
||
<iconify-icon class="text-gray-500 text-[14px] flex-none" icon="mdi:chevron-down" width="18"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-[14px] text-gray-700 mb-1.5">来源</label>
|
||
<div class="flex items-center bg-white border border-gray-200 rounded-lg h-10 px-3 cursor-pointer">
|
||
<input class="flex-1 text-[14px] text-gray-800 placeholder-gray-400 outline-none bg-transparent" placeholder="请选择来源" readonly type="text"/>
|
||
<iconify-icon class="text-gray-500 text-[14px] flex-none" icon="mdi:chevron-down" width="18"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-3 mt-8">
|
||
<button class="flex-1 h-11 text-[15px] font-medium text-gray-600 bg-white border border-gray-200 rounded-[10px]" onclick="resetFilter()">重置</button>
|
||
<button class="flex-1 h-11 text-[15px] font-medium text-white bg-[#2563EB] rounded-[10px] shadow-sm" onclick="confirmFilter()">确认</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 选择面板 -->
|
||
<div class="fixed inset-0 z-[100] bg-black/40 flex items-end justify-center" id="selectPanel" onclick="hideSelectPanel(event)" style="display: none;">
|
||
<div class="bg-white rounded-t-[20px] w-full max-w-[390px] px-4 pt-4 pb-8" onclick="event.stopPropagation()">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="w-6"></div>
|
||
<div class="text-center text-[16px] font-bold text-gray-900" id="selectPanelTitle">请选择</div>
|
||
<button class="w-6 h-6 flex items-center justify-center text-gray-500" onclick="hideSelectPanel()">
|
||
<iconify-icon icon="mdi:close" width="20"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<div class="space-y-1" id="selectPanelOptions"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let currentDetail = {};
|
||
|
||
function showUldDetail(uldNo, status, airline, weight, volume, maxWeight, flightNo, port, location, remark) {
|
||
currentDetail = { uldNo, status, airline, weight, volume, maxWeight, flightNo, port, location, remark };
|
||
document.getElementById('detail-uldNo').innerText = uldNo;
|
||
document.getElementById('detail-airline').innerText = airline;
|
||
document.getElementById('detail-weight').innerText = weight;
|
||
document.getElementById('detail-volume').innerText = volume;
|
||
document.getElementById('detail-maxWeight').innerText = maxWeight;
|
||
document.getElementById('detail-flightNo').innerText = flightNo;
|
||
document.getElementById('detail-port').innerText = port;
|
||
document.getElementById('detail-remark').innerText = remark;
|
||
document.getElementById('detail-inTime').innerText = "2026-07-20 15:59:20";
|
||
document.getElementById('detail-source').innerText = "空运";
|
||
|
||
const st = document.getElementById('detail-status');
|
||
st.innerText = status;
|
||
st.className = 'text-[11px] px-2 rounded-[6px] font-medium leading-none h-5 flex items-center';
|
||
if (status === '占用') {
|
||
st.classList.add('bg-orange-100', 'text-orange-600');
|
||
} else if (status === '可用') {
|
||
st.classList.add('bg-green-100','text-green-600');
|
||
} else if (status === '维修') {
|
||
st.classList.add('bg-red-100','text-red-600');
|
||
} else {
|
||
st.className = 'text-[14px] font-normal text-[#111827]';
|
||
}
|
||
|
||
document.getElementById('detailOverlay').classList.remove('hidden');
|
||
}
|
||
|
||
function hideUldDetail() {
|
||
document.getElementById('detailOverlay').classList.add('hidden');
|
||
}
|
||
|
||
function openEdit() {
|
||
document.getElementById('editOverlay').classList.remove('hidden');
|
||
document.getElementById('edit-uldNo').value = currentDetail.uldNo;
|
||
document.getElementById('edit-weight').value = currentDetail.weight;
|
||
document.getElementById('edit-flightNo').value = currentDetail.flightNo;
|
||
document.getElementById('edit-port').value = currentDetail.port;
|
||
document.getElementById('edit-inTime').value = "2026-07-20 15:59:20";
|
||
document.getElementById('edit-remark').value = currentDetail.remark;
|
||
|
||
const st = document.getElementById('edit-status-text');
|
||
st.textContent = currentDetail.status;
|
||
st.className = 'text-[13px] font-medium px-2 py-0.5 rounded-[6px]';
|
||
if (currentDetail.status === '占用') {
|
||
st.classList.add('bg-[#FFF3E0]','text-[#E67722]');
|
||
} else if (currentDetail.status === '可用') {
|
||
st.classList.add('bg-green-100','text-green-600');
|
||
} else if (currentDetail.status === '维修') {
|
||
st.classList.add('bg-red-100','text-red-600');
|
||
} else {
|
||
st.classList.add('text-gray-800');
|
||
}
|
||
|
||
document.getElementById('edit-airline-text').textContent = currentDetail.airline;
|
||
document.getElementById('edit-source-text').textContent = '空运';
|
||
}
|
||
|
||
function closeEdit() {
|
||
document.getElementById('editOverlay').classList.add('hidden');
|
||
}
|
||
|
||
function saveEdit() {
|
||
alert('修改成功');
|
||
closeEdit();
|
||
hideUldDetail();
|
||
}
|
||
|
||
function toggleFilterDrawer(show) {
|
||
document.getElementById('filterOverlay').style.display = show ? 'flex' : 'none';
|
||
}
|
||
function resetFilter() {
|
||
document.querySelectorAll('#filterOverlay input').forEach(i=>i.value='');
|
||
}
|
||
function confirmFilter() {
|
||
toggleFilterDrawer(false);
|
||
}
|
||
|
||
function toggleSelectAll(checked) {
|
||
document.querySelectorAll('main .custom-checkbox-round').forEach(cb=>cb.checked=checked);
|
||
updateSelectedCount();
|
||
}
|
||
function handleCheckboxClick() {
|
||
updateSelectedCount();
|
||
}
|
||
function updateSelectedCount() {
|
||
const total = document.querySelectorAll('main .custom-checkbox-round').length;
|
||
const ckd = document.querySelectorAll('main .custom-checkbox-round:checked').length;
|
||
document.getElementById('selected-count').innerText = ckd+' / '+total;
|
||
document.getElementById('select-all-cb').checked = total > 0 && total === ckd;
|
||
}
|
||
|
||
function showAddDialog() {
|
||
document.getElementById('addUldOverlay').classList.remove('hidden');
|
||
}
|
||
function hideAddDialog() {
|
||
document.getElementById('addUldOverlay').classList.add('hidden');
|
||
}
|
||
function saveUld() {
|
||
alert('保存成功');
|
||
hideAddDialog();
|
||
}
|
||
|
||
let currentSelectField = '';
|
||
function showSelectPanel(field, title, options) {
|
||
currentSelectField = field;
|
||
document.getElementById('selectPanelTitle').textContent = title;
|
||
const box = document.getElementById('selectPanelOptions');
|
||
box.innerHTML = '';
|
||
options.forEach(opt=>{
|
||
const d = document.createElement('div');
|
||
d.className = 'py-3 px-4 text-center border-b cursor-pointer hover:bg-gray-50';
|
||
if(field.includes('status')){
|
||
let cls = opt=='占用'?'bg-[#FFF3E0] text-[#E67722]':
|
||
opt=='可用'?'bg-green-100 text-green-600':'bg-red-100 text-red-600';
|
||
d.innerHTML = `<span class="${cls} px-2 py-0.5 rounded-[6px] text-sm font-medium">${opt}</span>`;
|
||
} else {
|
||
d.textContent = opt;
|
||
}
|
||
d.onclick = ()=>{
|
||
if(field === 'editStatus'){
|
||
const t = document.getElementById('edit-status-text');
|
||
t.textContent = opt;
|
||
t.className = 'text-[13px] font-medium px-2 py-0.5 rounded-[6px]';
|
||
if(opt=='占用'){
|
||
t.classList.add('bg-[#FFF3E0]','text-[#E67722]');
|
||
}
|
||
if(opt=='可用')t.classList.add('bg-green-100','text-green-600');
|
||
if(opt=='维修')t.classList.add('bg-red-100','text-red-600');
|
||
}
|
||
if(field === 'editAirline') document.getElementById('edit-airline-text').textContent = opt;
|
||
if(field === 'editSource') document.getElementById('edit-source-text').textContent = opt;
|
||
if(field === 'status') document.getElementById('add-status-text').textContent = opt;
|
||
if(field === 'airline') document.getElementById('add-airline-text').textContent = opt;
|
||
if(field === 'source') document.getElementById('add-source-text').textContent = opt;
|
||
hideSelectPanel();
|
||
};
|
||
box.appendChild(d);
|
||
});
|
||
document.getElementById('selectPanel').style.display = 'flex';
|
||
}
|
||
function hideSelectPanel() {
|
||
document.getElementById('selectPanel').style.display = 'none';
|
||
}
|
||
|
||
function handleBatchDelete() {
|
||
const ckd = document.querySelectorAll('main .custom-checkbox-round:checked').length;
|
||
if(ckd===0)return alert('请选择');
|
||
if(confirm('确定删除？')) alert('删除成功');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |