289 lines
8.9 KiB
Markdown
289 lines
8.9 KiB
Markdown
# 真实表单设计案例参考
|
||
|
||
> 从 JeecgBoot 演示系统 `design_form` 表中提取的真实表单配置，涵盖 OA、HR、行政等常见业务场景。
|
||
|
||
---
|
||
|
||
## 1. 字典翻译示例 (demo_test_dict_transl)
|
||
|
||
**场景：** 展示 radio/checkbox/select 的三种数据源（静态、字典、远程）
|
||
|
||
**控件清单（18个）：**
|
||
- 单行文本 (input)
|
||
- 单选框组_远程数据 (radio) — `remote: true, remoteFunc: "http://..."`
|
||
- 单选框组_静态数据 (radio) — `showLabel: true, options: [{value:"1",label:"数学"}, ...]`
|
||
- 单选框组 (radio) — **`remote: "dict", dictCode: "sex"`**
|
||
- 多选框组 (checkbox) — **`remote: "dict", dictCode: "sex"`**
|
||
- 多选框组_静态数据 (checkbox) — 静态选项
|
||
- 下拉选择框 (select) — `showLabel: true, options: [{value:"1",label:"选项1"}, ...]`
|
||
- 下拉选择框_多选 (select) — `multiple: true`
|
||
- 下拉选择框_字典 (select) — **`remote: "dict", dictCode: "urgent_level"`**
|
||
- 开关 (switch)
|
||
- 省市级联动 (area-linkage)
|
||
- 用户组件 (select-user) — `multiple: true`
|
||
- 部门组件 (select-depart) — `multiple: true`
|
||
- 下拉树_分类字典 (select-tree) — `multiple: true`
|
||
- 下拉树_表 (select-tree) — `multiple: true`
|
||
- 表字典_popup (table-dict) — `multiple: true`
|
||
- 表字典_模糊online (table-dict) — `multiple: true`
|
||
- 表字典_模糊表 (table-dict) — `multiple: true`
|
||
|
||
**关键配置模式 — 字典 radio：**
|
||
```json
|
||
{
|
||
"type": "radio",
|
||
"name": "单选框组",
|
||
"options": {
|
||
"inline": true,
|
||
"showLabel": true,
|
||
"remote": "dict",
|
||
"dictCode": "sex",
|
||
"options": [
|
||
{"value": "选项1", "itemColor": "#e9e9e9"},
|
||
{"value": "选项2", "itemColor": "#e9e9e9"}
|
||
],
|
||
"remoteOptions": [],
|
||
"props": {"value": "value", "label": "label"},
|
||
"remoteFunc": "",
|
||
"useColor": false,
|
||
"showType": "default",
|
||
"colorIteratorIndex": 0,
|
||
"matrixWidth": 120
|
||
},
|
||
"advancedSetting": {
|
||
"defaultValue": {
|
||
"type": "compose", "value": "", "format": "string",
|
||
"allowFunc": true, "valueSplit": ",", "customConfig": true
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
**关键配置模式 — 静态 radio (showLabel+value/label)：**
|
||
```json
|
||
{
|
||
"type": "radio",
|
||
"options": {
|
||
"showLabel": true,
|
||
"remote": false,
|
||
"options": [
|
||
{"value": "1", "label": "数学", "itemColor": "#e9e9e9"},
|
||
{"value": "2", "label": "语文", "itemColor": "#e9e9e9"},
|
||
{"value": "3", "label": "自然", "itemColor": "#e9e9e9"}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
> **注意：** 当 `showLabel: true` 时，选项需要同时有 `value`（存储值）和 `label`（显示文本）。
|
||
> 当 `showLabel: false` 时，`value` 既是存储值也是显示文本。
|
||
|
||
---
|
||
|
||
## 2. 请假申请 (qing_jia_shen_qing_5qfk)
|
||
|
||
**场景：** 典型 OA 审批表单
|
||
|
||
**控件清单（12个）：**
|
||
- 姓名 (select-user) — 必填，`defaultLogin: true`
|
||
- 所在部门 (select-depart)
|
||
- 申请日期 (date)
|
||
- 请假类型 (select) — 选项：事假/病假/年假/调休
|
||
- 开始日期 (date)
|
||
- 结束日期 (date)
|
||
- 天数 (number)
|
||
- 请假说明 (textarea)
|
||
- 审批意见 (radio) — 选项：同意/不同意
|
||
- 直属领导 (select-user)
|
||
- 审批时间 (date)
|
||
- 附件 (file-upload)
|
||
|
||
**config：**
|
||
```json
|
||
{
|
||
"titleField": "select_user_1692952011928_137220",
|
||
"hasWidgets": ["select-user", "select-depart", "date", "card", "select", "number", "textarea", "radio", "file-upload"]
|
||
}
|
||
```
|
||
|
||
> **要点：** `titleField` 指向 select-user 控件（而非 input），说明 titleField 可以指向任何控件类型。
|
||
|
||
---
|
||
|
||
## 3. 员工基本信息 (yuan_gong_ji_ben_xin_xi_dnjq)
|
||
|
||
**场景：** HR 员工档案，展示半行布局
|
||
|
||
**控件清单（8个，全部半行两两配对）：**
|
||
- [半行] 姓名 (select-user) | 所在部门 (select-depart)
|
||
- [半行] 岗位 (input) | 性别 (select) — 选项：男/女
|
||
- [半行] 入职时间 (date) | 参加工作时间 (date)
|
||
- [半行] 直属上级 (select-user) | 负责 HR (select-user)
|
||
|
||
**config：**
|
||
```json
|
||
{
|
||
"titleField": "select_user_1692874017319_686764",
|
||
"hasWidgets": ["select-user", "select-depart", "card", "input", "select", "date"]
|
||
}
|
||
```
|
||
|
||
> **要点：** 整个表单全部使用半行布局（每个 card 内 2 个控件，autoWidth: 50）。
|
||
|
||
---
|
||
|
||
## 4. 用车申请 (yong_che_shen_qing_gh3j)
|
||
|
||
**场景：** 行政用车，展示 area-linkage + formula + link-record + divider
|
||
|
||
**控件清单（21个）：**
|
||
- 申请日期 (date) — 必填
|
||
- 申请人 (select-user) — 必填
|
||
- 申请部门 (select-depart)
|
||
- 用车人数 (integer) — 必填
|
||
- 要求用车时间 (date)
|
||
- 出发地 (area-linkage)
|
||
- 出发地详细地址 (input)
|
||
- 目的地 (area-linkage)
|
||
- 目的地详细地址 (input)
|
||
- 随行司机 (select-user)
|
||
- 用车理由 (textarea)
|
||
- **分隔符 (divider)**
|
||
- 出发时间 (date)
|
||
- 返程时间 (date)
|
||
- 车牌号码 (link-record) — 关联记录
|
||
- 起始公里数 (number)
|
||
- 到达公里数 (number)
|
||
- **行驶公里数 (formula)** — 公式计算
|
||
- 停车费 (money)
|
||
- 备注 (textarea)
|
||
- 附件 (file-upload)
|
||
|
||
**config：**
|
||
```json
|
||
{
|
||
"hasWidgets": ["date", "select-user", "select-depart", "integer", "card", "area-linkage", "input", "textarea", "divider", "link-record", "number", "formula", "money", "file-upload"]
|
||
}
|
||
```
|
||
|
||
> **要点：**
|
||
> - 使用 `divider` 分隔"申请信息"和"用车记录"两个区域
|
||
> - `formula` 控件自动计算行驶公里数
|
||
> - `link-record` 关联车辆信息表
|
||
|
||
---
|
||
|
||
## 5. 工资表 (gong_zi_biao_zitx)
|
||
|
||
**场景：** HR 薪资管理，展示 divider 分区 + formula 计算 + money 字段
|
||
|
||
**控件清单（17个）：**
|
||
- 工资发放时间 (date)
|
||
- **分隔符 (divider)** — 基本信息区
|
||
- 姓名 (select-user) — 必填
|
||
- 部门 (select-depart)
|
||
- 手机号码 (phone)
|
||
- **分隔符 (divider)** — 收入区
|
||
- 基本工资 (money)
|
||
- 加班工资 (money)
|
||
- 奖金 (money)
|
||
- 补贴 (money)
|
||
- **分隔符 (divider)** — 扣款区
|
||
- 本期扣款 (money)
|
||
- 五险一金扣款 (money)
|
||
- 个税扣除 (money)
|
||
- **实发金额 (formula)** — 公式自动计算
|
||
- 备注 (textarea)
|
||
- 附件 (file-upload)
|
||
|
||
**config：**
|
||
```json
|
||
{
|
||
"hasWidgets": ["date", "card", "divider", "select-user", "select-depart", "phone", "money", "formula", "textarea", "file-upload"]
|
||
}
|
||
```
|
||
|
||
> **要点：**
|
||
> - 用多个 `divider` 将表单分为"基本信息"、"收入"、"扣款"三个区域
|
||
> - `formula` 控件计算实发金额 = 基本工资+加班+奖金+补贴-扣款-五险一金-个税
|
||
> - 大量使用 `money` 控件（带"元"后缀）
|
||
|
||
---
|
||
|
||
## 6. 会议预约 (hui_yi_yu_yue_0s2h)
|
||
|
||
**场景：** 行政会议管理，展示 link-record + link-field 关联
|
||
|
||
**控件清单（14个）：**
|
||
- 预约人 (select-user) — 必填
|
||
- 所属部门 (select-depart) — 必填
|
||
- 当前时间 (date) — 必填
|
||
- 会议名称 (input) — 必填
|
||
- 会议室基础表 (link-record) — 关联记录
|
||
- 会议室名称 (link-field) — 他表字段（自动填充）
|
||
- 会议室编号 (link-field)
|
||
- 会议室容纳人数 (link-field)
|
||
- 参会人员 (select-user) — `multiple: true`（多选）
|
||
- 会议开始时间 (date)
|
||
- 会议结束时间 (date)
|
||
- 预约时间 (input)
|
||
- 备注 (textarea)
|
||
- 附件 (file-upload)
|
||
|
||
**config：**
|
||
```json
|
||
{
|
||
"hasWidgets": ["select-user", "select-depart", "date", "card", "input", "link-record", "link-field", "textarea", "file-upload"]
|
||
}
|
||
```
|
||
|
||
> **要点：**
|
||
> - `link-record` 选择会议室后，`link-field` 自动填充关联数据（名称、编号、容纳人数）
|
||
> - `select-user` 支持 `multiple: true` 多选参会人员
|
||
|
||
---
|
||
|
||
## 7. 地图/定位/省市联动综合 (ceshi_ditu)
|
||
|
||
**场景：** 展示地图、表字典、下拉树、多选用户/部门
|
||
|
||
**控件清单（9个）：**
|
||
- 用户组件 (select-user) — `multiple: true`
|
||
- 部门组件 (select-depart) — `multiple: true`
|
||
- 表字典_popupOL报表 (table-dict)
|
||
- 表字典_模糊OL报表 (table-dict)
|
||
- 表字典_模糊表 (table-dict)
|
||
- 下拉树_分类字典 (select-tree)
|
||
- 下拉树_表 (select-tree)
|
||
- 性别 (radio) — `remote: "dict", dictCode: "sex"`
|
||
- **地图 (map)** — 不需要 card 容器
|
||
|
||
> **要点：** `map` 控件直接放在顶层 list，不需要 card 容器。
|
||
|
||
---
|
||
|
||
## 常用字典编码速查
|
||
|
||
从真实表单中收集到的字典编码：
|
||
|
||
| dictCode | 说明 | 使用场景 |
|
||
|----------|------|---------|
|
||
| `sex` | 性别 | radio/checkbox/select |
|
||
| `position_rank` | 职级 | select 多选 |
|
||
| `urgent_level` | 紧急程度 | select 多选 |
|
||
|
||
---
|
||
|
||
## 设计模式总结
|
||
|
||
| 模式 | 说明 | 示例表单 |
|
||
|------|------|---------|
|
||
| **字典数据源** | `remote:"dict"` + `dictCode` | 字典翻译示例 |
|
||
| **半行布局** | card 内两控件 `autoWidth:50` | 员工基本信息 |
|
||
| **分区分隔** | divider 控件分割表单区域 | 工资表、用车申请 |
|
||
| **公式计算** | formula 控件自动计算 | 工资表、用车申请 |
|
||
| **关联填充** | link-record + link-field | 会议预约 |
|
||
| **默认当前用户** | select-user `defaultLogin:true` | 请假申请 |
|
||
| **多选人员** | select-user `multiple:true` | 会议预约、字典示例 |
|
||
| **titleField 灵活** | 可指向 select-user 等非 input 控件 | 请假申请、员工信息 |
|