6.7 KiB
Admin 排车列表一体式布局试点
文档职责：仅维护历史试点依据与检查记录。通用样式统一以 Admin 界面规范 为准；下文日期批次中的旧外观不再作为新改造要求。普通样式任务只在涉及本模块范围、例外或验收证据时查阅本文。
初次试点仅接入测试环境代码的 /overseas-warehouse/dispatches。依据为用户提供截图及 新版.html 的 page-outbound-vehicle（4472–4484 行）；用户明确保留字段设置、搜索与表格不分离。2026-09-30 用户确认样板后授权推广至客户管理、国内仓、货柜管理和海外仓，并继续客户服务、海外业务、财务管理、通用、系统管理及消息列表。范围及例外见 推广核对记录。
船期日历单页收尾按用户当前截图接入相同的页头、筛选和连续容器，通过 results 插槽保留日历与当日船次详情。日历不具备表格列配置，明确关闭字段设置且不添加分页；日历日期格和右侧详情布局由业务页维护。
修改前核对
| 页面/操作 | 参考布局或承载方式 | 当前实现 | 本轮结论 |
|---|---|---|---|
| 排车列表 | 同一容器内：左标题/右按钮、搜索、表格、分页 | 路由标题、独立搜索面板、表格面板及列设置工具栏 | 改为一体式容器，标题只出现一次，字段设置放右上角 |
| 查询/重置 | search-row 紧接表格 |
QueryToolbar，含 FBA 预约号及筛选布局偏好 | 保留全部筛选与偏好，只调整容器外观 |
| 表格字段设置 | 用户明确要求保留 | DataTable 列显隐/排序及持久化 | 继续使用原组件、原 preference-key |
| 新建/导出 | 参考页顶部有示例按钮 | 正式排车列表无这两项操作 | 仅参考排列，不新增业务功能；公共组件保留 toolbar-actions 插槽 |
| 查看 | 当前正式路由详情页 | DispatchDetailView | 不变 |
| 编辑/转派送 | 当前居中表单弹框 | AppDialog | 不变 |
| 打印 BOL/取消 | 当前 PDF 窗口/二次确认 | 服务端 PDF、ElMessageBox | 不变 |
| 审核/停用/文件上传 | 本列表无相应入口 | 无 | 不新增 |
公共接入
DataTable 使用 appearance="integrated" 启用公共样式，toolbar-start 放页面标题，toolbar-actions 放已有业务按钮，filters 放 QueryToolbar，条件 state 插槽放加载错误与重试。表格字段偏好、行操作和分页继续由 DataTable 管理。该模式下标题、搜索、表格共用边框与圆角，搜索和表格间没有卡片外间距。
页面自行关闭列表路由 showPageHeading，避免重复标题；详情路由保留原配置。样式唯一维护位置为 src/shared/components/DataTable.vue，业务页不复制样式。未在本轮范围内的页面继续保持默认外观。
一体式列表的搜索区默认输入框、选择框、日期框和按钮共用 --el-component-size: 36px。选择框默认外框的最小高度由公共 DataTable 同步，避免 Element Plus 固定的 32px 与输入框产生高度差；显式 small/large 尺寸及多选换行继续按组件自身规则处理。该规则同时覆盖 QueryToolbar 和搜索插槽内直接使用的选择框。
Admin 仍使用 Element Plus。普通 el-select 由构建组件解析器统一接入 src/shared/components/AdminSelect.ts，仅将 filterable 默认值设为 true，使用 Element Plus 原有渲染、插槽、事件和公开方法；列表、表单、弹框及分页选择框均可输入关键词筛选当前选项。已有 remote-method、filter-method、多选、禁用和清空行为保持原有配置；搜索不改变候选业务范围，也不会自动新增远程接口调用。虚拟托盘选择框 el-select-v2 已显式启用远程搜索。
已接入列表的表格“操作”列使用纯文字按钮：无描边、填充或装饰图标，字重为普通正文的 400，普通操作蓝色，取消等危险操作红色，悬停无下划线；禁用为灰色，保留加载反馈、键盘焦点和危险确认。通过 RowActions 的 text-actions 接入，更多菜单使用相同配色与普通字重；已有手写按钮组使用 row-actions density-actions admin-text-actions，危险语义仍由原来的 data-tone="danger" 或 type="danger" 显式提供。搜索区、顶部字段设置、分页、列设置面板及弹框按钮保持原样。公共行操作外观维护在 src/styles/adminTextActions.css，随 adminDensity.css 加载；未接入页面默认不启用。
推广时列设置显式使用 column-settings-mode="show"。已有 preference-key 保持，新接入的退货库存、流水和箱号各使用独立偏好键。存在非阻断警告时使用 notices 插槽，列表失败时通过 results-visible 隐藏结果和分页，标题、查询与重试保持可用；before-results 保留原统计与汇总。特殊工作台可使用 results 插槽承载原内容和自身分页，公共表格不重置它的页码与每页数量。
列宽保存为公共 DataTable 能力，与已有列设置一同启用（提供 preference-key 且列设置可用），不依赖试点样式。拖动表头边界松开时，将宽度按稳定列键写入同一份本地偏好；重排、隐藏再显示不会丢失，刷新/重新进入时恢复。账号与表格分别隔离，仅保存到当前浏览器，不跨设备同步。“恢复默认”同时重置列顺序、显隐和宽度，重新采用页面声明的 width/minWidth。未启用列设置的表格不写入列宽偏好。
验收
代码检查与真实页面视觉验收分别记录。视觉待人工在 1920×1080、100% 缩放下截图确认，重点核对顶部字段设置、搜索连表格、长编号、横向滚动、分页、加载/空态/失败重试，以及原有操作权限。
2026-09-29 代码验证：定向 78 项通过；完整 pnpm test 的 262 个测试文件、2118 项测试通过；pnpm build（含 vue-tsc --noEmit）通过。未提交、未部署，当前修改不涉及 API、权限或业务状态。
纯文字按钮追加验证：相关 6 个文件、81 项检查通过，类型检查与构建通过。完整测试运行 2118 项通过、1 项失败，失败为原型合同硬编码了 RowActions 属性顺序；改为检查真实动作绑定后，该文件 21 项定向复测通过。视觉仍待人工确认。
列宽保存追加验证：完整 262 个文件、2125 项测试通过；列属性类型调整后公共表格与偏好存储 33 项再次通过；类型检查与构建通过。覆盖拖动保存、重新挂载、排序与显隐保留、恢复默认、独立表格/账号范围、异常宽度与关闭偏好场景。尚未部署，真实表头拖动效果待人工确认。