四、设计器·简单配置模式

简单配置模式（mode = simple）面向零代码用户：模板内容是一份 JSON 配置，设计器把它渲染成四张可视化卡片，全程勾选即可。

4.1 设计器布局

┌────────────────────────────────────────────────────────────┐
│ 模板名 [简单配置][erp_purchase_order]   [刷新预览数据] [返回列表] [保存模板] │
├──────────────────────┬─────────────────────────────────────┤
│ 页签：                │                                      │
│  ① 基本信息           │        实时预览区                     │
│  ② 版式配置（4 张卡片）│   （纸张阴影卡片，自动加载样例单据，      │
│  ③ HTML 源码（灰色）   │    配置变化 300ms 防抖本地重渲染）      │
└──────────────────────┴─────────────────────────────────────┘

• 进入设计器自动调 sample-data 接口拉取该类型最新一张真实单据做预览数据；
• 左侧任何修改（deep watch + 300ms 防抖）触发右侧本地重渲染，不再请求后端；
• 无样例数据时预览区提示「暂无样例单据，请先到业务模块录入一张单据」（此时版式仍可配置，只是看不到效果）；
• 【刷新预览数据】重新拉最新样例。

4.2 卡片一：抬头设置

配置项	说明
公司名来源	租户名称（自动取当前租户/公司名，推荐）/ 自定义（手输固定抬头，适合多公司共用模板时写集团名）
单据标题	打印在抬头中央的大字标题，如「采购订单」「记账凭证」
单号二维码	开关。开启后右上角打印单号二维码（前端 qrcode 生成，扫码即得单号文本），二维码下方带单号

4.3 卡片二：基础信息字段（单头）

对应变量组 bill（单据表头）：

1. 勾选清单：checkbox 列出该单据类型全部单头变量，显示「标签（变量名）」；
2. 已选字段区，每个字段可：
   • 改名：改打印出来的标签（如「voucherNo」显示为「凭证号」→ 改成「记字号」）；
   • 上移 / 下移：调整打印顺序；
   • 删：移出（等价于取消勾选）；
3. 每行列数：2 / 3 / 4 栏（单头信息表分几列显示）。

典型用法：日期类、状态类、人员类字段挑 6~9 个，3 列排布最接近传统票据。

4.4 卡片三：明细列

对应变量组 items（明细行）：

1. 勾选清单：checkbox 列出全部明细变量；
2. 每列配置：

配置	说明
标题	列头文字
宽度 %	占明细表总宽百分比，不填自动分配
对齐	左 / 中 / 右（金额、数量建议右对齐）
合计	开启后表尾对该列数值求和（如金额列）

3. 行填充策略（二选一）：
   • 空行补齐至 N 行（0~30）：明细不足 N 行时补空白行凑齐，A4 正式单据常用（如固定 10 行，不够补白，保持表格高度一致）；
   • 自动填满：明细表弹性拉伸填满剩余纸高，小票纸/穿孔纸连续纸用（打多少行纸走多长）。

4.5 卡片四：汇总与签字

配置	说明
价税合计	表尾输出「价税合计：¥ xx.xx」（取单据金额字段自动求和）
大写金额	输出人民币大写（壹佰贰拾叁元肆角伍分），紧跟合计行
签字栏	可增删签字项（默认：制单人 / 审核 / 确认 + 日期），每项打印为「标签：________」

4.6 配置对应的 JSON（备查）

简单模式的 content 实际存储为 JSON，设计器双向编辑。了解结构有助于排查问题：

{
  "paper": "A4",
  "header": { "companySource": "tenant", "title": "记账凭证", "qrCode": true },
  "infoColumns": 3,
  "infoFields": [
    { "var": "voucherNo", "label": "凭证号" },
    { "var": "voucherDate", "label": "凭证日期" }
  ],
  "itemColumns": [
    { "var": "lineNo", "title": "行号", "align": "center" },
    { "var": "debit", "title": "借方金额", "align": "right", "sum": true }
  ],
  "blankRows": 6,
  "itemFill": false,
  "summary": { "totalPrice": true, "chineseAmount": true },
  "signatures": ["制单人", "审核人", "出纳", "记账人"]
}

字段含义：infoColumns 单头列数；infoFields 单头字段；itemColumns 明细列（width 宽度%、align 对齐、sum 合计）；blankRows 空行补齐行数；itemFill 自动填满开关；summary 合计与大写；signatures 签字栏。

4.7 保存

点右上角【保存模板】：

• 校验模板名称非空、自定义纸张宽高合法；
• simple 模式无需语法校验，序列化 JSON 存入 content；
• 保存成功后回列表页，或继续留在设计器调整。

4.8 适用边界

简单模式覆盖 90% 的常规单据。以下需求请转 HTML 模式：

• 固定套打位置（印章区、多联分隔线）；
• 单头信息跨多表/图文混排；
• 条件显示（某字段为空时整行隐藏）；
• 每行小计、嵌套分组；
• 自定义字体、色块、背景线。