企业官网建设流程全解析

实战案例｜悬浮按钮在【入库单明细表单】落地应用

一、案例业务场景

仓库入库单据为长表单，包含基础入库信息 + 多行商品明细子数据，页面内容过长，仓管员在填写明细中途，频繁需要新增明细行、批量删除无效商品、一键打印入库单、导出明细台账。传统固定按钮在页面首尾，填写至表单中部时来回滚动查找按钮耗时费力，采用悬浮按钮组件解决快捷操作痛点。

需求要点：

1. 配置一组悬浮快捷功能：新增明细、批量删除、单据打印、导出 Excel；
2. 设计时预设按钮默认停靠页面右下角；
3. 运行端仓管员可自由拖动按钮放到顺手位置；
4. 依据单据状态管控按钮：已提交入库单禁用新增、删除按钮。

二、表单整体结构

1. 顶部：入库基础信息（入库单号、供应商、入库日期，引用组件 + 文本组件搭建）
2. 中部：子数据组件，商品入库明细表格
3. 浮动层：悬浮折叠菜单按钮（核心组件），收纳四项快捷功能

三、悬浮按钮落地配置

1. 样式与初始位置配置选用折叠式悬浮按钮，默认停靠页面右下角，设计画布拖拽微调初始坐标；折叠收起仅显示主图标，点击展开四个子功能按钮。
2. 各项按钮业务配置

• 新增明细：点击事件→子表单新增一行明细；
• 批量删除：弹窗二次确认，勾选明细后批量删除；
• 单据打印：响应绑定打印组件，携带入库 ID 参数唤起打印模板；
• 导出 Excel：触发导出事件，一键导出当前入库明细。

1. 权限与状态控制表单状态 = 已入库时，新增、删除悬浮按钮自动禁用；草稿状态全部按钮正常可用。
2. 拖拽体验配置开启运行态拖拽功能，仓管员长按悬浮按钮，可拖拽至页面左侧、中部任意位置，松手自动吸附屏幕边缘，位置自动保存。

四、落地后业务价值

1. 无需滚动页面即可触发操作，入库开单效率提升，减少页面来回滑动操作；
2. 运行自定义拖拽摆放，适配不同仓管员操作习惯，使用人性化；
3. 依托表单状态智能管控按钮可用性，规避已归档单据误删数据；
4. 不占用原有表单排版空间，原有入库单布局无需改动，低成本优化交互。

五、高频落地场景汇总

长表单单据、审批工单、项目台账、资产盘点表等内容篇幅较大的表单，均可以用悬浮按钮：

1. 单据类：出入库单、销售订单、报价单快捷打印、新增明细；
2. 审批类：报销单、工单悬浮同意 / 驳回；
3. 台账类：批量导入、批量导出、批量编辑。

六、结语

悬浮按钮凭借可拖拽悬浮的独有特性，成为长表单交互优化的利器。在不改动原有表单结构的前提下，落地全局快捷功能，是企业精细化优化表单使用体验的必备功能组件。

项目已开源，欢迎 Star 收藏～

GitHub：https://github.com/unione-cloud/unione-form-editor

Gitee：https://gitee.com/unione-cloud/unione-form-editor