Web 端进销存表单设计与打印方案

发布时间：2026-10-04 | 分类：Web 界面与交互

单据录入是进销存系统中使用频率最高的操作，销售单、采购单、调拨单每天可能要开几十上百张。Web 版进销存要想让老会计和仓管员愿意用，表单体验和打印输出是两大命门。本文总结我们在 Web 端做进销存表单设计与打印套打的完整方案。

一、表单布局：上表头、下明细的经典结构

进销存单据表单沿用桌面软件的经典结构：上半部分是表头信息，下半部分是商品明细表格。表头包含往来单位、单据日期、经手人、仓库、备注等字段；明细表格包含商品编码、名称、规格、单位、数量、单价、金额等列。

在宽屏上建议采用双栏布局：表头字段分两列排布，缩短纵向滚动距离；明细表格占满整行宽度。窄屏（平板竖屏、手机）下退化为单栏，表头字段纵向排列，明细表格横向滚动。用 CSS Grid 的 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) 可以一套代码自适应两种布局。

二、明细表格：可编辑网格的实现要点

明细表格是表单的核心，每一行都是可编辑的。三个要点：

• 行内编辑，不要弹窗。数量、单价直接在单元格里改，弹窗编辑会把一次开单变成几十次点击。
• 自动增行。在最后一行输入商品后自动追加一个空行，用户始终有地方继续录。删除空行留给保存前的校验或显式删除按钮。
• 金额实时计算。数量乘单价变化时，行金额、合计金额、优惠、应收应付联动更新。计算逻辑用纯函数实现（输入明细数组输出合计对象），方便单元测试。

三、键盘流：老用户的速度来源

熟练录单员几乎不碰鼠标，全靠键盘完成一张单。必须支持的键盘操作：

1. 回车跳格：明细行内按回车聚焦下一列，行尾回车跳到下一行的商品列。
2. 商品检索框：商品列输入编码或拼音首字母，弹出匹配列表，上下方向键选择、回车确认填入整行。
3. 全局快捷键：Ctrl + S 保存、Ctrl + P 打印、Esc 关闭弹层。

实现上用 keydown 事件统一捕获，按当前焦点元素的 data-field 属性决定下一个焦点。注意不要用 tabindex 硬编码顺序，表格增删行后顺序会乱。

四、打印套打：让浏览器打出单据的样子

打印是进销存逃不掉的需求。三种方案按推荐程度排序：

我们的做法是：单据页面本身做好 @media print 样式——隐藏导航和按钮、重置背景色、用 @page 设置纸张边距，打印时直接 window.print()。打印样式和屏幕样式写在同一份 CSS 里，维护成本低。需要严格固定格式或归档的报表走服务端 PDF。

五、保存与校验

保存前的校验顺序影响体验：先做行内即时校验（数量为 0、单价缺失在输入时就标红），点保存时再做整体校验（往来单位必填、明细不能为空、库存是否充足），校验失败时把焦点定位到第一个错误字段。

保存按钮要防重复提交：点击后立即禁用并显示"保存中…"，收到响应再恢复。网络失败给出明确提示并保留表单内容，绝不能让录了 20 行的单据因为一次断网清空。配合 PWA 的离线队列（见 进销存 PWA 离线应用实践）可以彻底解决断网问题。

结语

Web 端进销存表单设计的核心思路是：布局沿用用户熟悉的单据结构，交互向桌面软件的速度看齐，打印用浏览器原生能力兜底。表单体验做好了，推广 Web 版进销存就成功了一半。