实战案例｜按钮组件在【销售订单表单】中的真实应用
在企业业务里，一张订单能否真正 “用起来”，不看字段多不多，而看按钮强不强。
提交、审核、打印、导出、驳回、查看详情、跳转到出库单……一张订单的生命，全部由按钮驱动。
今天我们用真实场景「销售订单表单」带你体验：按钮组件如何让一张普通表单，变身完整业务系统。
一、案例场景：销售订单表单
业务需求：一张订单需要支持以下操作：
- 保存草稿（暂存）
- 提交审核（发起流程）
- 审核通过 / 驳回
- 打印订单（带格式）
- 导出 Excel
- 查看商品明细（弹窗）
- 打开客户详情页面（路由跳转）
- 撤销提交（仅未审核可显示）
- 未填写完整时禁用提交按钮
这些交互，全部由按钮组件实现。
二、表单按钮布局（真实可落地）
我们在订单表单顶部 / 底部放置一组按钮：
- 保存按钮
- 提交审核按钮
- 审核通过按钮
- 驳回按钮
- 打印按钮
- 导出按钮
- 查看商品明细按钮（弹窗）
- 前往客户详情（跳转）
每一个按钮，都配置不同响应方式、参数传递、显示 / 禁用逻辑。
三、按钮组件真实配置与效果
1. 保存按钮
- 响应方式：点击事件 → 保存表单
- 逻辑：始终显示、可点击
- 效果：点击保存当前订单数据
2. 提交审核按钮（核心）
- 响应方式：对话框 → 确认提交
- 响应参数：传递订单号、客户 ID、订单状态
- 禁用逻辑：未填写客户 / 商品 → 禁用
- 显示逻辑：仅 “草稿” 状态显示
- 效果：点击弹窗确认 → 提交审核 → 状态变更
3. 审核通过按钮
- 响应方式：点击事件 → 审核通过
- 显示逻辑：仅 “待审核” 显示
- 效果：点击后订单状态变为 “已审核”
4. 驳回按钮
- 响应方式：对话框 → 输入驳回原因
- 显示逻辑：仅 “待审核” 显示
- 效果：点击驳回 → 状态回到草稿
5. 打印按钮
- 响应方式：连接 / 打印组件
- 响应参数：传递订单 ID
- 效果：直接打开打印模板并打印
6. 导出按钮
- 响应方式：点击事件 → 导出 Excel
- 效果：自动导出当前订单数据
7. 查看商品明细（弹窗）
- 响应方式：对话框
- 响应参数：传递订单 ID → 自动加载商品明细
- 效果：点击弹出弹窗显示商品列表，无需跳转页面
8. 前往客户详情（路由跳转）
- 响应方式：路由
- 响应参数：传递客户 ID
- 效果：点击直接跳转到客户详情页，并自动加载该客户信息
四、按钮组件在本案例中的核心价值
1. 一张表单 = 一套完整业务系统
保存、提交、审核、驳回、打印、导出、弹窗、跳转……全部通过按钮实现，无需开发、无需写 JS、无需接口。
2. 按钮自动传递表单变量，实现真正联动
点击 “查看商品” 自动带订单号点击 “客户详情” 自动带客户 ID点击 “打印” 自动带单据 ID
数据零手动、全自动联动。
3. 显示 / 禁用逻辑智能化
- 没填内容 → 提交按钮禁用
- 已审核 → 提交按钮隐藏
- 不是管理员 → 审核按钮隐藏
按钮根据业务状态智能变化。
4. 四种响应方式全覆盖
- 确认操作 → 对话框
- 展开信息 → 抽屉
- 页面跳转 → 路由
- 外部系统 → 连接
企业交互全部满足。
5. 体验流畅、专业、企业级
按钮让表单从 “可填写” 变成 “可工作”，真正实现业务闭环。
五、本案例带来的真实业务提升
- 开单效率提升 80%
- 操作步骤减少 70%
- 数据联动零错误
- 审核流程规范化
- 打印 / 导出一键完成
- 页面体验更流畅
- 系统专业度大幅提升
六、哪些场景必须用按钮组件？
只要你的表单需要：
- 保存 / 提交 / 审核 / 驳回
- 弹窗 / 抽屉 / 页面跳转
- 打印 / 导出 / 分享 / 复制
- 触发事件、传递参数
- 控制显示、控制禁用
你都必须使用按钮组件。
按钮 = 表单交互的灵魂。
七、结语
按钮组件看似普通，却是低代码平台最强大、最核心、最不可替代的功能组件。它让静态表单 “活” 起来，让数据 “动” 起来，让业务 “跑” 起来。
在订单、合同、审批、入库、出库、资产、员工等各类表单中，按钮组件都是真正的 “交互中枢”。
用好按钮，你的表单就能直接上线使用。
项目开源地址，欢迎 Star 收藏～
GitHub：https://github.com/unione-cloud/unione-form-editor
Gitee：https://gitee.com/unione-cloud/unione-form-editor
