mobile-h5-alignment-checklist.md 6.7 KB

H5 端与 Web 端功能对齐清单

为保障 mobile-h5 与 art-design-pro(Web)功能一致,基于 Web 端今日变更整理出的 H5 需做调整项。
已对齐的部分会标注「已对齐」,仅列出需补充或修改的项。


一、已对齐部分(无需改)

模块 说明
API inventoryApi.createLinkForPlan、plansApi.Plan.fillLinkInventoryId、masterDataApi.vehicleApi(Vehicle/VehicleCreate/VehicleUpdate、list/create/update/delete)均已存在
路由 /inventory/fill/:id(填写页)、/master-data/vehicle/detail、车牌号详情页已配置
Vite 代理 masterDataResources 已包含 vehicles
计划管理 仅展示「生成链接交三方填写」按钮(不展示「复制URL链接」);点击后若无链接则先创建再复制,若有则直接复制;handleFillLink、getFillLinkUrl 已实现
基础资料 车牌号 Tab(列表、搜索、编辑、删除、新增跳详情)已实现
出入库详情 车牌号选择器(vehicleApi 列表 + 手动输入)、提交前 ensureVehicleExists 已实现
填写页 fill.vue 日期/数量/车牌号/备注填写、已填写只读+二维码、未填写可编辑并提交,逻辑完整

二、需在 H5 端做的调整

1. 计划管理 mobile-h5/src/views/plans/index.vue

项 说明 建议修改
明日筛选 Web 端有「明日」快捷筛选,H5 暂无 在 dateFilterOptions 中增加 { label: '明日', value: 'tomorrow' }(放在「今日」与「昨日」之间);dateFilterType 类型增加 'tomorrow';在 loadData 的请求参数中增加 dateFilterType === 'tomorrow' 分支,设置 createdFrom/createdTo 为明日日期(dayjs().add(1, 'day').format('YYYY-MM-DD'))
from 参数统一 Web 跳转出入库使用 from=plan,H5 当前使用 from=plans,为与 Web 一致且便于 Web 生成的链接/跳转被 H5 识别 handleGenerateInventory 里将 query 中的 from=plans 改为 from=plan

2. 出入库列表 mobile-h5/src/views/inventory/index.vue

项 说明 建议修改
明日筛选 与 Web 一致 dateFilterOptions 增加「明日」;dateFilterType 类型增加 'tomorrow';loadData 请求参数中增加 dateFilterType === 'tomorrow' 时 dateFrom/dateTo 为明日
返回来源 Web 与后端约定为 from=plan handleBack 中判断 route.query.from === 'plans' 改为 from === 'plan'(建议同时兼容 from === 'plans',避免旧链接失效)
复制填写链接 Web 端在状态为「待三方填写」时可复制 H5 填写链接,H5 列表暂无 在卡片操作区(如「生成地磅单」旁)增加:当 item.status === '待三方填写' 时显示按钮「复制URL链接」;点击时生成当前 H5 的填写页 URL(`window.location.origin + (pathname

3. 出入库详情/新增 mobile-h5/src/views/inventory/detail.vue

项 说明 建议修改
数量默认值 Web 端新增时数量默认为 32 新增模式下 formData.quantity 初始值由 0 改为 32(与 Web 一致)
from 参数统一 与 Web、列表、计划保持一致 handleBack、handleSubmit 中判断 from === 'plans' 改为以 from === 'plan' 为主(可同时兼容 from === 'plans'),满足时返回 /plans

4. 地磅单列表 mobile-h5/src/views/weighing/index.vue

项 说明 建议修改
明日筛选 与 Web 一致 dateFilterOptions 增加「明日」;dateFilterType 类型增加 'tomorrow';在组装请求参数(如 getDateRangeParams 或等价逻辑)中增加 dateFilterType === 'tomorrow' 时 dateFrom/dateTo 为明日

5. 填写页 mobile-h5/src/views/inventory/fill.vue(可选)

项 说明 建议修改
新车牌写入主数据 Web 端在出入库表单提交前会 ensureVehicleExists,填写页为三方使用,若输入新车牌可一并写入主数据,便于后续选择 在 handleSubmit 中,在调用 inventoryApi.update 之前,若 formData.vehicleNo 非空,调用与 detail 页一致的 ensureVehicleExists(需在该页引入 vehicleApi 并实现或复用 ensureVehicleExists),409 冲突忽略。非必须,可按业务需要再做

三、修改汇总表

文件 修改点
mobile-h5/src/views/plans/index.vue 增加「明日」筛选;from=plans → from=plan
mobile-h5/src/views/inventory/index.vue 增加「明日」筛选;handleBack 使用 from=plan(兼容 plans);状态为「待三方填写」时增加「复制URL链接」按钮
mobile-h5/src/views/inventory/detail.vue 新增时数量默认 32;handleBack/handleSubmit 使用 from=plan(兼容 plans)
mobile-h5/src/views/weighing/index.vue 增加「明日」筛选
mobile-h5/src/views/inventory/fill.vue (可选)提交前对新车牌调用 ensureVehicleExists

四、产品/交互约定(Web 与 H5 一致)

  • 计划页「生成链接交三方填写」:该按钮始终展示,文案固定为「生成链接交三方填写」。不展示「复制URL链接」按钮。点击行为:若该计划尚未生成填写链接(无 fillLinkInventoryId),则先调用接口创建出入库单并得到链接,再复制到剪贴板;若已有链接,则直接复制当前链接。Web 与 H5 均按此实现。

五、与 Web 的差异说明(无需改 H5)

  • H5 填写链接生成:在 H5 内复制「填写链接」时,应使用当前 H5 的 origin + pathname + hash(即当前页的 window.location.origin + (pathname || '') + '#/inventory/fill/' + id),无需在 H5 配置 VITE_H5_BASE_URL。VITE_H5_BASE_URL 仅在 Web 端 生成「交给三方填写的链接」时使用,以便链接指向正确的 H5 部署地址。
  • 排序、表格:Web 端表格多列排序、序号列样式等为 PC 表格能力,H5 列表为卡片流,无需一一对应。
  • 用户管理路由:Web 的 UserCenter 路由调整为 /user/UserManagement 仅影响 Web 菜单,H5 无对应菜单则无需改。

完成上述调整后,H5 在「明日」筛选、计划→出入库来源统一、计划页仅展示「生成链接交三方填写」、出入库列表复制填写链接、新增默认数量及返回逻辑、地磅单明日筛选上与 Web 保持一致,功能对齐即可保障。