cloud-web-corejs 1.0.54-dev.687 → 1.0.54-dev.689
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/fileLibrary/index.vue +113 -33
- package/src/components/table/CellSlot.vue +12 -10
- package/src/components/xform/docs//345/220/216/345/217/260/345/255/227/346/256/265/357/274/210/345/212/250/346/200/201/347/224/237/346/210/220/357/274/211JSON /350/257/264/346/230/216.md" +1261 -0
- package/src/components/xform/docs//346/225/260/346/215/256/350/241/250/346/240/274/345/212/250/346/200/201/345/210/227 JSON /350/257/264/346/230/216.md" +657 -0
- package/src/components/xform/form-designer/designer.js +1 -1
- package/src/components/xform/form-designer/form-widget/field-widget/cascader-widget.vue +157 -105
- package/src/components/xform/form-designer/form-widget/field-widget/fieldMixin.js +98 -18
- package/src/components/xform/form-designer/form-widget/field-widget/form-item-wrapper.vue +18 -13
- package/src/components/xform/form-designer/form-widget/field-widget/number-widget.vue +11 -8
- package/src/components/xform/form-designer/form-widget/field-widget/script-input-widget.vue +143 -0
- package/src/components/xform/form-designer/indexMixin.js +837 -13
- package/src/components/xform/form-designer/setting-panel/option-items-setting.vue +69 -21
- package/src/components/xform/form-designer/setting-panel/property-editor/container-data-table/data-table-editor.vue +87 -25
- package/src/components/xform/form-designer/setting-panel/property-editor/container-data-table/table-column-dialog.vue +5 -0
- package/src/components/xform/form-designer/setting-panel/property-editor/container-table/table-dynamicField-editor.vue +80 -34
- package/src/components/xform/form-designer/setting-panel/property-editor/field-cascader/checkStrictly-editor.vue +11 -13
- package/src/components/xform/form-designer/setting-panel/property-editor/field-cascader/showAllLevels-editor.vue +21 -0
- package/src/components/xform/form-designer/setting-panel/property-editor/field-script-input/script-input-editor.vue +54 -0
- package/src/components/xform/form-designer/setting-panel/property-editor/formScriptEnabled-editor.vue +15 -4
- package/src/components/xform/form-designer/setting-panel/propertyRegister.js +2 -0
- package/src/components/xform/form-designer/widget-panel/widgetsConfig.js +117 -2
- package/src/components/xform/form-render/container-item/data-table-mixin.js +296 -118
- package/src/components/xform/form-render/container-item/dynamicFieldMixin.js +50 -36
- package/src/components/xform/form-render/container-item/list-h5-item.vue +5 -1
- package/src/components/xform/form-render/indexMixin.js +197 -12
- package/src/components/xform/lang/en-US.js +1 -0
- package/src/components/xform/lang/zh-CN.js +86 -99
- package/src/components/xform/utils/dynamicSchemaUtil.js +312 -0
- package/src/components/xform/utils/tableCellValidateUtil.js +148 -0
- package/src/components/xform/utils/tableColumnHelper.js +21 -1
- package/src/components/xform/utils/util.js +126 -0
|
@@ -0,0 +1,1261 @@
|
|
|
1
|
+
# 后台字段(动态生成)JSON 说明
|
|
2
|
+
|
|
3
|
+
> 适用场景:
|
|
4
|
+
> - 表格布局容器(`table`)启用 **后台字段(动态生成)**(`dynamicSchemaEnabled`)
|
|
5
|
+
> - 数据表格(`data-table`)启用 **接口动态列**(`dynamicColumnSourceType: api`)
|
|
6
|
+
>
|
|
7
|
+
> 二者共用同一套请求/响应与字段定义 JSON 格式(见 `utils/dynamicSchemaUtil.js`)。
|
|
8
|
+
>
|
|
9
|
+
> **文档分工:** 本文维护控件类型与 options(**唯一维护点**);数据表格差异(width、formatS、操作列等)见 [`数据表格动态列 JSON 说明.md`](./数据表格动态列%20JSON%20说明.md)。
|
|
10
|
+
>
|
|
11
|
+
> 相关代码:`form-render/container-item/dynamicFieldMixin.js`、`data-table-mixin.js`
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## 1. 调用流程
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
表单渲染
|
|
19
|
+
→ table 容器请求 dynamicSchemaScriptCode 脚本
|
|
20
|
+
→ 解析响应为「字段定义数组」
|
|
21
|
+
→ 按生成模式(append/replace/anchor)插入行布局
|
|
22
|
+
→ 各字段控件初始化(下拉/状态等可能再次请求选项数据)
|
|
23
|
+
→ (业务需要时)脚本调用 loadDynamicSchema() 重新加载,见 §1.5
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### 1.1 请求参数(前端 → 后台字段脚本)
|
|
27
|
+
|
|
28
|
+
```json
|
|
29
|
+
{
|
|
30
|
+
"formData": {
|
|
31
|
+
"id": "10001",
|
|
32
|
+
"billType": "PO"
|
|
33
|
+
},
|
|
34
|
+
"bizType": "A"
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
| 字段 | 说明 |
|
|
39
|
+
|------|------|
|
|
40
|
+
| `formData` | 当前表单数据(`formModel`),固定传入 |
|
|
41
|
+
| 其余字段 | 由容器属性「脚本返回对应的参数值」脚本动态返回 |
|
|
42
|
+
|
|
43
|
+
### 1.2 响应外层结构
|
|
44
|
+
|
|
45
|
+
```json
|
|
46
|
+
{
|
|
47
|
+
"type": "success",
|
|
48
|
+
"message": "ok",
|
|
49
|
+
"objx": []
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### 1.3 objx 解析规则(未配置转换脚本时)
|
|
54
|
+
|
|
55
|
+
按以下优先级取字段/列定义数组:
|
|
56
|
+
|
|
57
|
+
| 优先级 | 结构 | 场景 |
|
|
58
|
+
|--------|------|------|
|
|
59
|
+
| 1 | `objx` 为数组 | 通用 |
|
|
60
|
+
| 2 | `objx.fields` 为数组 | 表头后台字段 |
|
|
61
|
+
| 3 | `objx.columns` 为数组 | 数据表格动态列 |
|
|
62
|
+
|
|
63
|
+
配置了 **转换脚本** `dynamicSchemaConvert` 时,入参为完整 `res`,需返回数组或 `{ fields: [...] }` / `{ columns: [...] }`。
|
|
64
|
+
|
|
65
|
+
### 1.4 数据表格接口动态列
|
|
66
|
+
|
|
67
|
+
数据表格请求时会额外携带 `formCode`、`formVersion`、`taBm`、`dataId`,内层 `data` 仍为 `{ formData, ...extra }`。
|
|
68
|
+
|
|
69
|
+
后台可返回与表头字段相同的 `type` + `keyName` 定义,前端自动映射为列 `formatS`(如 `input` → `editInput`)。展示列使用 `keyName` + `formatS`。
|
|
70
|
+
|
|
71
|
+
**数据表格专用文档(含各列类型完整示例):** [`数据表格动态列 JSON 说明.md`](./数据表格动态列%20JSON%20说明.md)
|
|
72
|
+
|
|
73
|
+
### 1.5 脚本重新加载(表头后台字段)
|
|
74
|
+
|
|
75
|
+
首次加载在 `table` 容器 `mounted` 时自动执行。主表数据或业务条件变化后,需在脚本里**手动**调用以重新请求后台并刷新字段。
|
|
76
|
+
|
|
77
|
+
**任意字段 / 按钮脚本(写法相同):**
|
|
78
|
+
|
|
79
|
+
```javascript
|
|
80
|
+
this.getWidgetRef("headerTable").loadDynamicSchema();
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
> 字段与容器共用表单级 `refList`,**无需** `getParentTarget().getWidgetRef(...)`。
|
|
84
|
+
> `getParentTarget()` 仅用于操作列等场景直接调用**父级 data-table** 的方法(如 `deleteRow`),见本文数据表格文档操作列示例。
|
|
85
|
+
|
|
86
|
+
**等待加载完成:**
|
|
87
|
+
|
|
88
|
+
```javascript
|
|
89
|
+
this.getWidgetRef("headerTable").loadDynamicSchema().then(() => {
|
|
90
|
+
// 动态行已重新生成,formModel 已补全新字段默认值
|
|
91
|
+
});
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
| 项目 | 说明 |
|
|
95
|
+
|------|------|
|
|
96
|
+
| 方法 | `loadDynamicSchema()` |
|
|
97
|
+
| 挂载组件 | `table-item`(`dynamicFieldMixin.js`) |
|
|
98
|
+
| 行为 | 删除上次动态生成的行 → 用当前 `formModel` +「脚本返回对应的参数值」重新请求 → 按 `dynamicSchemaMode` 插入 |
|
|
99
|
+
| 默认 loading | 不显示全屏 loading |
|
|
100
|
+
| 前提 | `dynamicSchemaEnabled: true` 且已配置 `dynamicSchemaScriptCode` |
|
|
101
|
+
|
|
102
|
+
典型场景:主表 `billType` 变更、保存/加载单据后、点击「刷新表头」按钮。
|
|
103
|
+
|
|
104
|
+
数据表格动态列重新加载见 [`数据表格动态列 JSON 说明.md`](./数据表格动态列%20JSON%20说明.md) **§1.4**。
|
|
105
|
+
|
|
106
|
+
---
|
|
107
|
+
|
|
108
|
+
## 2. 通用字段定义 Schema
|
|
109
|
+
|
|
110
|
+
### 2.0 最小字段集(维护约定)
|
|
111
|
+
|
|
112
|
+
**新脚本只维护以下顶层字段;`required` 等字段级属性写顶层,`options` 只放控件扩展配置:**
|
|
113
|
+
|
|
114
|
+
| 字段 | 必填 | 说明 |
|
|
115
|
+
|------|------|------|
|
|
116
|
+
| `keyName` | **是** | 字段绑定名 |
|
|
117
|
+
| `type` | 否 | 控件类型,默认 `input` |
|
|
118
|
+
| `label` | 推荐 | 显示标签 |
|
|
119
|
+
| `optionItems` | 否 | 静态选项(select / radio / checkbox) |
|
|
120
|
+
| `required` / `readonly` / `disabled` / `hidden` | 否 | 字段级属性,**写顶层** |
|
|
121
|
+
| `defaultValue` / `placeholder` | 否 | 默认值 / 占位符,**写顶层** |
|
|
122
|
+
| `options` | 否 | 控件扩展配置(`formScriptCode`、`min`、`searchDialogConfig`、`onClick` 等) |
|
|
123
|
+
|
|
124
|
+
**表头额外:** `colspan`(默认 `1`,单列时可不写)
|
|
125
|
+
|
|
126
|
+
**数据表格额外:** `width`、`formatS`(展示列)→ 见 [`数据表格动态列 JSON 说明.md`](./数据表格动态列%20JSON%20说明.md) §2
|
|
127
|
+
|
|
128
|
+
**操作列(仅数据表格):** 无 `keyName`,`label` 写顶层;`onClick` 写 `options`;dropdown 的 `dropdownItems` 写顶层。
|
|
129
|
+
|
|
130
|
+
**默认值(与控件设计器一致,一般无需写入 JSON / Java):**
|
|
131
|
+
|
|
132
|
+
| 场景 | 无需维护 |
|
|
133
|
+
|------|----------|
|
|
134
|
+
| 表头布局 | `colspan: 1` |
|
|
135
|
+
| 静态选项 | `formScriptEnabled`、`commonAttributeEnabled`(默认均为 false) |
|
|
136
|
+
| 脚本选项 | `labelKey` / `valueKey`(默认 `label` / `value`;返回自定义字段名时除外) |
|
|
137
|
+
| 系统词汇 | `labelKey` / `valueKey`(前端固定 `value` / `sn`) |
|
|
138
|
+
| radio / checkbox | `displayStyle: inline`、`buttonStyle`、`border` |
|
|
139
|
+
| select | `clearable: true`、`multiple: false`;`filterable` 默认 false,需搜索时再设 |
|
|
140
|
+
| input | `options.type: text`、`clearable: true`、`maxLength: null` |
|
|
141
|
+
| date | `format` / `valueFormat` 默认 `yyyy-MM-dd` |
|
|
142
|
+
| textarea | `rows: 3`、`maxLength: null`、`showWordLimit: false` |
|
|
143
|
+
| 空值占位 | 无业务要求时不写 `defaultValue: ""`、`placeholder` 等 |
|
|
144
|
+
|
|
145
|
+
**推荐模板:**
|
|
146
|
+
|
|
147
|
+
```json
|
|
148
|
+
{
|
|
149
|
+
"type": "input",
|
|
150
|
+
"keyName": "contractNo",
|
|
151
|
+
"label": "合同编号",
|
|
152
|
+
"required": true
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### 2.1 顶层公共属性
|
|
157
|
+
|
|
158
|
+
| 属性 | 说明 |
|
|
159
|
+
|------|------|
|
|
160
|
+
| `keyName` | 字段绑定名,**必填** |
|
|
161
|
+
| `type` | 控件类型 |
|
|
162
|
+
| `label` | 显示标签 |
|
|
163
|
+
| `colspan` | 表头占列数,默认 `1` |
|
|
164
|
+
| `optionItems` | 静态选项 |
|
|
165
|
+
| `required` / `readonly` / `disabled` / `hidden` | 字段级属性(**顶层**) |
|
|
166
|
+
| `defaultValue` / `placeholder` | 默认值 / 占位符(**顶层**) |
|
|
167
|
+
| `options` | 控件扩展配置(**不含** `required` 等字段级属性) |
|
|
168
|
+
|
|
169
|
+
> 未提供 `keyName` 的字段定义会被忽略(操作列除外,见数据表格文档)。
|
|
170
|
+
|
|
171
|
+
### 2.2 选项类控件三种数据来源
|
|
172
|
+
|
|
173
|
+
适用于:`select`、`radio`、`checkbox`、`status`
|
|
174
|
+
|
|
175
|
+
| 模式 | options 关键配置 | 说明 |
|
|
176
|
+
|------|------------------|------|
|
|
177
|
+
| 静态选项 | `optionItems` 或 `statusParam` | 后台字段脚本一次性下发 |
|
|
178
|
+
| 后台脚本 | `formScriptEnabled: true` + `formScriptCode` | 控件初始化时再次请求脚本 |
|
|
179
|
+
| 系统词汇 | `commonAttributeEnabled: true` + `commonAttributeCode` | 请求 `/user/common_attribute/listItems` |
|
|
180
|
+
|
|
181
|
+
**互斥规则:** `formScriptEnabled` 与 `commonAttributeEnabled` 不能同时为 `true`。
|
|
182
|
+
|
|
183
|
+
**系统词汇:** 只需 `commonAttributeEnabled` + `commonAttributeCode`,**无需**配置 `labelKey` / `valueKey`(前端固定:显示字段 `value`,关联字段 `sn`)。
|
|
184
|
+
|
|
185
|
+
**脚本选项:** 返回字段默认为 `label` / `value`,一般无需配置 `labelKey` / `valueKey`(脚本返回自定义字段名时除外)。
|
|
186
|
+
|
|
187
|
+
**选项脚本返回格式:**
|
|
188
|
+
|
|
189
|
+
```json
|
|
190
|
+
{
|
|
191
|
+
"type": "success",
|
|
192
|
+
"objx": {
|
|
193
|
+
"records": [
|
|
194
|
+
{ "label": "选项A", "value": "A" }
|
|
195
|
+
]
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
或直接数组:
|
|
201
|
+
|
|
202
|
+
```json
|
|
203
|
+
{
|
|
204
|
+
"type": "success",
|
|
205
|
+
"objx": [
|
|
206
|
+
{ "label": "选项A", "value": "A" }
|
|
207
|
+
]
|
|
208
|
+
}
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
**词汇接口返回格式:**
|
|
212
|
+
|
|
213
|
+
```json
|
|
214
|
+
[
|
|
215
|
+
{ "sn": "1", "value": "草稿", "code": "ORDER_STATUS", "enabled": true, "sortNo": 1 },
|
|
216
|
+
{ "sn": "2", "value": "已提交", "code": "ORDER_STATUS", "enabled": true, "sortNo": 2 }
|
|
217
|
+
]
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
---
|
|
221
|
+
|
|
222
|
+
## 3. 各控件类型 JSON 说明
|
|
223
|
+
|
|
224
|
+
### 3.1 单行输入(type: `input`)
|
|
225
|
+
|
|
226
|
+
```json
|
|
227
|
+
{
|
|
228
|
+
"type": "input",
|
|
229
|
+
"keyName": "contractNo",
|
|
230
|
+
"label": "合同编号",
|
|
231
|
+
"required": true
|
|
232
|
+
}
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
> `maxLength` 默认 `null`(不限制);需限长或字数统计时再设 `maxLength` / `showWordLimit`。
|
|
236
|
+
|
|
237
|
+
| options 字段 | 类型 | 默认值 | 说明 |
|
|
238
|
+
|-------------|------|--------|------|
|
|
239
|
+
| `type` | string | `text` | 输入类型:`text` / `password` 等 |
|
|
240
|
+
| `clearable` | boolean | true | 可清空 |
|
|
241
|
+
| `showPassword` | boolean | false | 密码框 |
|
|
242
|
+
| `minLength` | number | null | 最小长度 |
|
|
243
|
+
| `maxLength` | number | null | 最大长度 |
|
|
244
|
+
| `showWordLimit` | boolean | false | 显示字数统计 |
|
|
245
|
+
| `prefixIcon` | string | - | 前缀图标 |
|
|
246
|
+
| `suffixIcon` | string | - | 后缀图标 |
|
|
247
|
+
| `validation` | string | - | 校验规则表达式 |
|
|
248
|
+
| `validationHint` | string | - | 校验失败提示 |
|
|
249
|
+
|
|
250
|
+
---
|
|
251
|
+
|
|
252
|
+
### 3.2 多行输入(type: `textarea`)
|
|
253
|
+
|
|
254
|
+
```json
|
|
255
|
+
{
|
|
256
|
+
"type": "textarea",
|
|
257
|
+
"keyName": "remark",
|
|
258
|
+
"label": "备注",
|
|
259
|
+
"colspan": 2
|
|
260
|
+
}
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
> `rows` 默认 `3`;`maxLength` 默认不限制。
|
|
264
|
+
|
|
265
|
+
| options 字段 | 类型 | 默认值 | 说明 |
|
|
266
|
+
|-------------|------|--------|------|
|
|
267
|
+
| `rows` | number | 3 | 可见行数 |
|
|
268
|
+
| `minLength` | number | null | 最小长度 |
|
|
269
|
+
| `maxLength` | number | null | 最大长度 |
|
|
270
|
+
| `showWordLimit` | boolean | false | 显示字数统计 |
|
|
271
|
+
|
|
272
|
+
---
|
|
273
|
+
|
|
274
|
+
### 3.3 计数器(type: `number`)
|
|
275
|
+
|
|
276
|
+
```json
|
|
277
|
+
{
|
|
278
|
+
"type": "number",
|
|
279
|
+
"keyName": "totalQty",
|
|
280
|
+
"label": "数量",
|
|
281
|
+
"required": true,
|
|
282
|
+
"defaultValue": 0,
|
|
283
|
+
"options": {
|
|
284
|
+
"min": 0,
|
|
285
|
+
"max": 999999,
|
|
286
|
+
"precision": 0
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
| options 字段 | 类型 | 默认值 | 说明 |
|
|
292
|
+
|-------------|------|--------|------|
|
|
293
|
+
| `min` | number | - | 最小值 |
|
|
294
|
+
| `max` | number | - | 最大值 |
|
|
295
|
+
| `precision` | number | 0 | 小数精度 |
|
|
296
|
+
| `step` | number | 1 | 步长 |
|
|
297
|
+
| `controlsPosition` | string | `right` | 按钮位置 |
|
|
298
|
+
| `formulaEnabled` | boolean | false | 启用公式 |
|
|
299
|
+
| `formula` | string | - | 公式表达式 |
|
|
300
|
+
|
|
301
|
+
---
|
|
302
|
+
|
|
303
|
+
### 3.4 单选项(type: `radio`)
|
|
304
|
+
|
|
305
|
+
#### 静态选项
|
|
306
|
+
|
|
307
|
+
```json
|
|
308
|
+
{
|
|
309
|
+
"type": "radio",
|
|
310
|
+
"keyName": "urgentFlag",
|
|
311
|
+
"label": "是否加急",
|
|
312
|
+
"defaultValue": "0",
|
|
313
|
+
"optionItems": [
|
|
314
|
+
{ "label": "否", "value": "0" },
|
|
315
|
+
{ "label": "是", "value": "1" }
|
|
316
|
+
]
|
|
317
|
+
}
|
|
318
|
+
```
|
|
319
|
+
|
|
320
|
+
#### 后台脚本加载选项
|
|
321
|
+
|
|
322
|
+
```json
|
|
323
|
+
{
|
|
324
|
+
"type": "radio",
|
|
325
|
+
"keyName": "payType",
|
|
326
|
+
"label": "付款方式",
|
|
327
|
+
"options": {
|
|
328
|
+
"formScriptEnabled": true,
|
|
329
|
+
"formScriptCode": "payTypeList",
|
|
330
|
+
"formScriptParam": "return { parentCode: this.formModel.billType }"
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
```
|
|
334
|
+
|
|
335
|
+
#### 系统词汇
|
|
336
|
+
|
|
337
|
+
```json
|
|
338
|
+
{
|
|
339
|
+
"type": "radio",
|
|
340
|
+
"keyName": "yesNo",
|
|
341
|
+
"label": "是否",
|
|
342
|
+
"defaultValue": "1",
|
|
343
|
+
"options": {
|
|
344
|
+
"commonAttributeEnabled": true,
|
|
345
|
+
"commonAttributeCode": "YES_NO"
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
```
|
|
349
|
+
|
|
350
|
+
| options 字段 | 说明 |
|
|
351
|
+
|-------------|------|
|
|
352
|
+
| `displayStyle` | `inline` 行内 / `block` 块级 |
|
|
353
|
+
| `buttonStyle` | 按钮风格 |
|
|
354
|
+
| `border` | 是否带边框 |
|
|
355
|
+
|
|
356
|
+
---
|
|
357
|
+
|
|
358
|
+
### 3.5 多选项(type: `checkbox`)
|
|
359
|
+
|
|
360
|
+
#### 静态选项
|
|
361
|
+
|
|
362
|
+
```json
|
|
363
|
+
{
|
|
364
|
+
"type": "checkbox",
|
|
365
|
+
"keyName": "notifyTypes",
|
|
366
|
+
"label": "通知方式",
|
|
367
|
+
"defaultValue": ["SMS", "EMAIL"],
|
|
368
|
+
"colspan": 2,
|
|
369
|
+
"optionItems": [
|
|
370
|
+
{ "label": "短信", "value": "SMS" },
|
|
371
|
+
{ "label": "邮件", "value": "EMAIL" },
|
|
372
|
+
{ "label": "站内信", "value": "MSG" }
|
|
373
|
+
]
|
|
374
|
+
}
|
|
375
|
+
```
|
|
376
|
+
|
|
377
|
+
#### 后台脚本 / 系统词汇
|
|
378
|
+
|
|
379
|
+
配置方式与 `radio`、`select` 相同:脚本模式写 `formScriptEnabled` + `formScriptCode`;词汇模式写 `commonAttributeEnabled` + `commonAttributeCode`。
|
|
380
|
+
|
|
381
|
+
---
|
|
382
|
+
|
|
383
|
+
### 3.6 下拉选项(type: `select`)
|
|
384
|
+
|
|
385
|
+
#### 静态选项
|
|
386
|
+
|
|
387
|
+
```json
|
|
388
|
+
{
|
|
389
|
+
"type": "select",
|
|
390
|
+
"keyName": "payType",
|
|
391
|
+
"label": "付款方式",
|
|
392
|
+
"defaultValue": "CASH",
|
|
393
|
+
"optionItems": [
|
|
394
|
+
{ "label": "现金", "value": "CASH" },
|
|
395
|
+
{ "label": "转账", "value": "TRANSFER" }
|
|
396
|
+
],
|
|
397
|
+
"required": true,
|
|
398
|
+
"options": {
|
|
399
|
+
"filterable": true
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
```
|
|
403
|
+
|
|
404
|
+
#### 后台脚本加载选项
|
|
405
|
+
|
|
406
|
+
```json
|
|
407
|
+
{
|
|
408
|
+
"type": "select",
|
|
409
|
+
"keyName": "subPayType",
|
|
410
|
+
"label": "子付款方式",
|
|
411
|
+
"options": {
|
|
412
|
+
"formScriptEnabled": true,
|
|
413
|
+
"formScriptCode": "subPayTypeList",
|
|
414
|
+
"formScriptParam": "return { parentPayType: this.formModel.payType }",
|
|
415
|
+
"filterable": true
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
```
|
|
419
|
+
|
|
420
|
+
**选项脚本请求参数(前端自动发起):**
|
|
421
|
+
|
|
422
|
+
```json
|
|
423
|
+
{
|
|
424
|
+
"formCode": "PO_ORDER_FORM",
|
|
425
|
+
"formVersion": "1.0",
|
|
426
|
+
"taBm": "subPayType",
|
|
427
|
+
"data": {
|
|
428
|
+
"parentPayType": "CASH"
|
|
429
|
+
}
|
|
430
|
+
}
|
|
431
|
+
```
|
|
432
|
+
|
|
433
|
+
#### 系统词汇
|
|
434
|
+
|
|
435
|
+
```json
|
|
436
|
+
{
|
|
437
|
+
"type": "select",
|
|
438
|
+
"keyName": "orderStatus",
|
|
439
|
+
"label": "订单状态",
|
|
440
|
+
"defaultValue": "1",
|
|
441
|
+
"options": {
|
|
442
|
+
"commonAttributeEnabled": true,
|
|
443
|
+
"commonAttributeCode": "ORDER_STATUS",
|
|
444
|
+
"filterable": true
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
```
|
|
448
|
+
|
|
449
|
+
#### 自定义字段名的脚本返回
|
|
450
|
+
|
|
451
|
+
```json
|
|
452
|
+
{
|
|
453
|
+
"type": "select",
|
|
454
|
+
"keyName": "deptCode",
|
|
455
|
+
"label": "部门",
|
|
456
|
+
"options": {
|
|
457
|
+
"formScriptEnabled": true,
|
|
458
|
+
"formScriptCode": "deptList",
|
|
459
|
+
"labelKey": "deptName",
|
|
460
|
+
"valueKey": "deptCode"
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
```
|
|
464
|
+
|
|
465
|
+
对应脚本返回:
|
|
466
|
+
|
|
467
|
+
```json
|
|
468
|
+
{
|
|
469
|
+
"type": "success",
|
|
470
|
+
"objx": {
|
|
471
|
+
"records": [
|
|
472
|
+
{ "deptName": "采购部", "deptCode": "D001" },
|
|
473
|
+
{ "deptName": "财务部", "deptCode": "D002" }
|
|
474
|
+
]
|
|
475
|
+
}
|
|
476
|
+
}
|
|
477
|
+
```
|
|
478
|
+
|
|
479
|
+
| options 字段 | 说明 |
|
|
480
|
+
|-------------|------|
|
|
481
|
+
| `clearable` | 可清空 |
|
|
482
|
+
| `filterable` | 可搜索 |
|
|
483
|
+
| `multiple` | 是否多选 |
|
|
484
|
+
| `multipleLimit` | 多选上限,0=不限 |
|
|
485
|
+
| `allowCreate` | 允许创建新条目 |
|
|
486
|
+
| `remote` | 远程搜索 |
|
|
487
|
+
| `showCollapseTags` | 多选时折叠标签 |
|
|
488
|
+
|
|
489
|
+
---
|
|
490
|
+
|
|
491
|
+
### 3.7 日期(type: `date`)
|
|
492
|
+
|
|
493
|
+
```json
|
|
494
|
+
{
|
|
495
|
+
"type": "date",
|
|
496
|
+
"keyName": "orderDate",
|
|
497
|
+
"label": "订单日期",
|
|
498
|
+
"required": true
|
|
499
|
+
}
|
|
500
|
+
```
|
|
501
|
+
|
|
502
|
+
> `format` / `valueFormat` 默认均为 `yyyy-MM-dd`,非特殊格式无需配置。
|
|
503
|
+
|
|
504
|
+
| options.type | 说明 |
|
|
505
|
+
|-------------|------|
|
|
506
|
+
| `date` | 日期 |
|
|
507
|
+
| `datetime` | 日期时间 |
|
|
508
|
+
| `month` | 月份 |
|
|
509
|
+
| `year` | 年份 |
|
|
510
|
+
|
|
511
|
+
| options 字段 | 说明 |
|
|
512
|
+
|-------------|------|
|
|
513
|
+
| `format` | 显示格式 |
|
|
514
|
+
| `valueFormat` | 绑定值格式 |
|
|
515
|
+
| `minDate` / `maxDate` | 可选范围 |
|
|
516
|
+
| `utcTransformEnabled` | UTC 转换 |
|
|
517
|
+
|
|
518
|
+
---
|
|
519
|
+
|
|
520
|
+
### 3.8 文本(type: `text`)
|
|
521
|
+
|
|
522
|
+
只读展示字段,绑定 formModel 中的值并展示(非输入框)。
|
|
523
|
+
|
|
524
|
+
```json
|
|
525
|
+
{
|
|
526
|
+
"type": "text",
|
|
527
|
+
"keyName": "createByName",
|
|
528
|
+
"label": "创建人"
|
|
529
|
+
}
|
|
530
|
+
```
|
|
531
|
+
|
|
532
|
+
| options 字段 | 说明 |
|
|
533
|
+
|-------------|------|
|
|
534
|
+
| `colorClass` | 文字颜色样式类 |
|
|
535
|
+
| `formatType` | 格式化类型 |
|
|
536
|
+
| `renderHandle` | 自定义渲染脚本 |
|
|
537
|
+
| `autoValueEnabled` | 启用自动取值 |
|
|
538
|
+
| `autoValueHanlde` | 自动取值脚本 |
|
|
539
|
+
|
|
540
|
+
---
|
|
541
|
+
|
|
542
|
+
### 3.9 凭证(type: `vabUpload` / `baseAttachment`)
|
|
543
|
+
|
|
544
|
+
附件上传控件,绑定值为**文件数组**。`baseAttachment` 与 `vabUpload` 的 `keyName` 规则相同。
|
|
545
|
+
|
|
546
|
+
**`keyName` 格式(必填遵守):**
|
|
547
|
+
|
|
548
|
+
```
|
|
549
|
+
attachments_<唯一后缀>
|
|
550
|
+
```
|
|
551
|
+
|
|
552
|
+
| 部分 | 说明 |
|
|
553
|
+
|------|------|
|
|
554
|
+
| 固定前缀 | `attachments_`(与设计器 `keyNamePrefixMap` 一致,**不可省略**) |
|
|
555
|
+
| 唯一后缀 | 同表单内唯一,设计器拖入时默认生成 UUID;后台脚本自行指定时也须保证不重复 |
|
|
556
|
+
| 完整示例 | `attachments_a1b2c3d4e5f6789012345678abcdef` |
|
|
557
|
+
|
|
558
|
+
> 同一张表单若有多个附件字段,每个字段使用不同的后缀;`formModel`、保存接口、`getList` 的 `taBm` 均使用**完整** `keyName`(含前缀)。
|
|
559
|
+
> 勿使用 `attachments` 等无前缀或无前缀+后缀的写法。
|
|
560
|
+
|
|
561
|
+
```json
|
|
562
|
+
{
|
|
563
|
+
"type": "vabUpload",
|
|
564
|
+
"keyName": "attachments_a1b2c3d4e5f6789012345678abcdef",
|
|
565
|
+
"label": "附件",
|
|
566
|
+
"colspan": 2,
|
|
567
|
+
"options": {
|
|
568
|
+
"limit": 10
|
|
569
|
+
}
|
|
570
|
+
}
|
|
571
|
+
```
|
|
572
|
+
|
|
573
|
+
> `formScriptCode` 加载历史附件默认 `getList`,一般无需配置。
|
|
574
|
+
> **无需**维护 `entityTableCode` / `entityTableDesc`(设计器「实体表」配置已废弃;凭证按 `formCode` + 字段 `keyName`(`taBm`)+ 单据 `dataId` 加载)。
|
|
575
|
+
|
|
576
|
+
| options 字段 | 类型 | 说明 |
|
|
577
|
+
|-------------|------|------|
|
|
578
|
+
| `limit` | number | 最大文件数,`1` 为单文件 |
|
|
579
|
+
| `hideRemoveButton` | boolean | 隐藏删除按钮 |
|
|
580
|
+
| `hiddenFileInfo` | boolean | 隐藏文件信息区 |
|
|
581
|
+
| `hiddenFileName` | boolean | 隐藏文件名 |
|
|
582
|
+
| `showFileSize` | boolean | 显示文件大小 |
|
|
583
|
+
| `showFileCreateBy` | boolean | 显示上传人 |
|
|
584
|
+
| `showFileCreateDate` | boolean | 显示上传时间 |
|
|
585
|
+
| `widgetSize` | number | 展示尺寸 |
|
|
586
|
+
| `formScriptCode` | string | 加载已有附件的脚本,默认 `getList` |
|
|
587
|
+
|
|
588
|
+
**凭证加载脚本请求参数:**
|
|
589
|
+
|
|
590
|
+
```json
|
|
591
|
+
{
|
|
592
|
+
"formCode": "PO_ORDER_FORM",
|
|
593
|
+
"formVersion": "1.0",
|
|
594
|
+
"taBm": "attachments_a1b2c3d4e5f6789012345678abcdef",
|
|
595
|
+
"data": {
|
|
596
|
+
"id": "10001"
|
|
597
|
+
}
|
|
598
|
+
}
|
|
599
|
+
```
|
|
600
|
+
|
|
601
|
+
**凭证加载脚本返回(objx 为文件数组):**
|
|
602
|
+
|
|
603
|
+
```json
|
|
604
|
+
{
|
|
605
|
+
"type": "success",
|
|
606
|
+
"objx": [
|
|
607
|
+
{
|
|
608
|
+
"id": "file001",
|
|
609
|
+
"fileName": "合同.pdf",
|
|
610
|
+
"fileUrl": "https://xxx/contract.pdf",
|
|
611
|
+
"fileSize": 102400,
|
|
612
|
+
"createBy": "张三",
|
|
613
|
+
"createDate": "2026-06-15 10:00:00"
|
|
614
|
+
}
|
|
615
|
+
]
|
|
616
|
+
}
|
|
617
|
+
```
|
|
618
|
+
|
|
619
|
+
> 仅在表单已有 `dataId`(编辑态)时,`onCreated` 默认脚本才会加载历史附件。
|
|
620
|
+
|
|
621
|
+
---
|
|
622
|
+
|
|
623
|
+
### 3.10 搜索框(type: `vabsearch`)
|
|
624
|
+
|
|
625
|
+
弹窗选择控件。存值字段为 `keyName`,显示名称通常存于 `vabSearchName` 对应字段。
|
|
626
|
+
|
|
627
|
+
```json
|
|
628
|
+
{
|
|
629
|
+
"type": "vabsearch",
|
|
630
|
+
"keyName": "supplierCode",
|
|
631
|
+
"label": "供应商",
|
|
632
|
+
"required": true,
|
|
633
|
+
"options": {
|
|
634
|
+
"vabSearchName": "supplierName",
|
|
635
|
+
"searchDialogConfig": {
|
|
636
|
+
"formCode": "SUPPLIER_LIST",
|
|
637
|
+
"valueSourceField": "supplierCode",
|
|
638
|
+
"labelSourceField": "supplierName"
|
|
639
|
+
}
|
|
640
|
+
}
|
|
641
|
+
}
|
|
642
|
+
```
|
|
643
|
+
|
|
644
|
+
扩展配置(按需)示例:
|
|
645
|
+
|
|
646
|
+
```json
|
|
647
|
+
{
|
|
648
|
+
"options": {
|
|
649
|
+
"searchDialogConfig": {
|
|
650
|
+
"formCode": "SUPPLIER_LIST",
|
|
651
|
+
"formName": "供应商列表",
|
|
652
|
+
"valueSourceField": "supplierCode",
|
|
653
|
+
"labelSourceField": "supplierName",
|
|
654
|
+
"tableEnabled": true,
|
|
655
|
+
"dialogQueryParam": "return { status: '1' }",
|
|
656
|
+
"dialogCustomParam": "return { title: '选择供应商' }"
|
|
657
|
+
}
|
|
658
|
+
}
|
|
659
|
+
}
|
|
660
|
+
```
|
|
661
|
+
|
|
662
|
+
| options 字段 | 说明 |
|
|
663
|
+
|-------------|------|
|
|
664
|
+
| `vabSearchName` | 显示名称存入 formModel 的字段名(如 `supplierName`) |
|
|
665
|
+
| `readonly` | 输入框只读(通常 true) |
|
|
666
|
+
| `multipleChoices` | 是否多选 |
|
|
667
|
+
| `dialogModel` | 弹框模式 |
|
|
668
|
+
| `valueField` | 多选时的值字段(可选) |
|
|
669
|
+
|
|
670
|
+
**searchDialogConfig 字段:**
|
|
671
|
+
|
|
672
|
+
| 字段 | 说明 |
|
|
673
|
+
|------|------|
|
|
674
|
+
| `formCode` | 弹窗列表表单编码(必填) |
|
|
675
|
+
| `valueSourceField` | 选中行的值字段(写入 keyName) |
|
|
676
|
+
| `labelSourceField` | 选中行的显示字段(写入 vabSearchName) |
|
|
677
|
+
| `multipleChoices` | 是否多选 |
|
|
678
|
+
| `tableEnabled` | 启用表格模式 |
|
|
679
|
+
| `dialogQueryParam` | 弹窗查询参数脚本 |
|
|
680
|
+
| `dialogCustomParam` | 弹窗额外参数脚本 |
|
|
681
|
+
| `confirmCallback` | 确认回调脚本 |
|
|
682
|
+
|
|
683
|
+
**选中后 formModel 示例:**
|
|
684
|
+
|
|
685
|
+
```json
|
|
686
|
+
{
|
|
687
|
+
"supplierCode": "SUP001",
|
|
688
|
+
"supplierName": "某某供应商有限公司"
|
|
689
|
+
}
|
|
690
|
+
```
|
|
691
|
+
|
|
692
|
+
**多选搜索框示例(type 也可用 `multiSearch`):**
|
|
693
|
+
|
|
694
|
+
```json
|
|
695
|
+
{
|
|
696
|
+
"type": "vabsearch",
|
|
697
|
+
"keyName": "supplierList",
|
|
698
|
+
"label": "供应商(多选)",
|
|
699
|
+
"options": {
|
|
700
|
+
"vabSearchName": "supplierName",
|
|
701
|
+
"multipleChoices": true,
|
|
702
|
+
"valueField": "supplierCode",
|
|
703
|
+
"searchDialogConfig": {
|
|
704
|
+
"formCode": "SUPPLIER_LIST",
|
|
705
|
+
"valueSourceField": "supplierCode",
|
|
706
|
+
"labelSourceField": "supplierName",
|
|
707
|
+
"multipleChoices": true
|
|
708
|
+
}
|
|
709
|
+
}
|
|
710
|
+
}
|
|
711
|
+
```
|
|
712
|
+
|
|
713
|
+
---
|
|
714
|
+
|
|
715
|
+
### 3.11 状态(type: `status`)
|
|
716
|
+
|
|
717
|
+
根据字段值展示带颜色标签的状态文本(非输入控件)。
|
|
718
|
+
|
|
719
|
+
#### 静态状态配置
|
|
720
|
+
|
|
721
|
+
```json
|
|
722
|
+
{
|
|
723
|
+
"type": "status",
|
|
724
|
+
"keyName": "orderStatus",
|
|
725
|
+
"label": "订单状态",
|
|
726
|
+
"defaultValue": "1",
|
|
727
|
+
"options": {
|
|
728
|
+
"statusParam": [
|
|
729
|
+
{ "label": "草稿", "value": "1", "type": "info" },
|
|
730
|
+
{ "label": "已提交", "value": "2", "type": "warning" },
|
|
731
|
+
{ "label": "已审核", "value": "3", "type": "success" },
|
|
732
|
+
{ "label": "已驳回", "value": "4", "type": "danger" }
|
|
733
|
+
]
|
|
734
|
+
}
|
|
735
|
+
}
|
|
736
|
+
```
|
|
737
|
+
|
|
738
|
+
**statusParam 字段说明:**
|
|
739
|
+
|
|
740
|
+
| 字段 | 说明 |
|
|
741
|
+
|------|------|
|
|
742
|
+
| `label` | 显示名称 |
|
|
743
|
+
| `value` | 状态值(与 formModel 中 keyName 对应) |
|
|
744
|
+
| `type` | 颜色:`""`(蓝) / `success`(绿) / `warning`(橙) / `info`(灰) / `danger`(红) |
|
|
745
|
+
|
|
746
|
+
**optionItemValueType 值类型:**
|
|
747
|
+
|
|
748
|
+
| 值 | 说明 |
|
|
749
|
+
|----|------|
|
|
750
|
+
| `0` | 文本 |
|
|
751
|
+
| `1` | 数值 |
|
|
752
|
+
| `2` | 布尔(自动生成 是/否 两项) |
|
|
753
|
+
|
|
754
|
+
数值型示例:
|
|
755
|
+
|
|
756
|
+
```json
|
|
757
|
+
{
|
|
758
|
+
"type": "status",
|
|
759
|
+
"keyName": "auditStatus",
|
|
760
|
+
"label": "审核状态",
|
|
761
|
+
"defaultValue": 0,
|
|
762
|
+
"options": {
|
|
763
|
+
"optionItemValueType": 1,
|
|
764
|
+
"statusParam": [
|
|
765
|
+
{ "label": "待审核", "value": 0, "type": "warning" },
|
|
766
|
+
{ "label": "已通过", "value": 1, "type": "success" },
|
|
767
|
+
{ "label": "已拒绝", "value": 2, "type": "danger" }
|
|
768
|
+
]
|
|
769
|
+
}
|
|
770
|
+
}
|
|
771
|
+
```
|
|
772
|
+
|
|
773
|
+
#### 后台脚本加载状态项
|
|
774
|
+
|
|
775
|
+
```json
|
|
776
|
+
{
|
|
777
|
+
"type": "status",
|
|
778
|
+
"keyName": "wfStatus",
|
|
779
|
+
"label": "流程状态",
|
|
780
|
+
"options": {
|
|
781
|
+
"formScriptEnabled": true,
|
|
782
|
+
"formScriptCode": "wfStatusList",
|
|
783
|
+
"formScriptParam": "return { processId: this.formModel.processId }"
|
|
784
|
+
}
|
|
785
|
+
}
|
|
786
|
+
```
|
|
787
|
+
|
|
788
|
+
脚本返回的选项会写入 `statusParam`(与 select 选项加载机制相同)。
|
|
789
|
+
|
|
790
|
+
#### 系统词汇加载状态
|
|
791
|
+
|
|
792
|
+
```json
|
|
793
|
+
{
|
|
794
|
+
"type": "status",
|
|
795
|
+
"keyName": "billStatus",
|
|
796
|
+
"label": "单据状态",
|
|
797
|
+
"options": {
|
|
798
|
+
"commonAttributeEnabled": true,
|
|
799
|
+
"commonAttributeCode": "BILL_STATUS"
|
|
800
|
+
}
|
|
801
|
+
}
|
|
802
|
+
```
|
|
803
|
+
|
|
804
|
+
> 词汇模式下状态标签不显示颜色样式(仅纯文本),静态 `statusParam` 才支持 `type` 颜色。
|
|
805
|
+
|
|
806
|
+
---
|
|
807
|
+
|
|
808
|
+
## 4. 完整综合示例
|
|
809
|
+
|
|
810
|
+
```json
|
|
811
|
+
{
|
|
812
|
+
"type": "success",
|
|
813
|
+
"message": "ok",
|
|
814
|
+
"objx": [
|
|
815
|
+
{
|
|
816
|
+
"type": "input",
|
|
817
|
+
"keyName": "contractNo",
|
|
818
|
+
"label": "合同编号",
|
|
819
|
+
"required": true
|
|
820
|
+
},
|
|
821
|
+
{
|
|
822
|
+
"type": "textarea",
|
|
823
|
+
"keyName": "remark",
|
|
824
|
+
"label": "备注",
|
|
825
|
+
"colspan": 2
|
|
826
|
+
},
|
|
827
|
+
{
|
|
828
|
+
"type": "number",
|
|
829
|
+
"keyName": "totalQty",
|
|
830
|
+
"label": "数量",
|
|
831
|
+
"defaultValue": 1,
|
|
832
|
+
"options": { "min": 0, "precision": 0 }
|
|
833
|
+
},
|
|
834
|
+
{
|
|
835
|
+
"type": "radio",
|
|
836
|
+
"keyName": "urgentFlag",
|
|
837
|
+
"label": "是否加急",
|
|
838
|
+
"defaultValue": "0",
|
|
839
|
+
"optionItems": [
|
|
840
|
+
{ "label": "否", "value": "0" },
|
|
841
|
+
{ "label": "是", "value": "1" }
|
|
842
|
+
]
|
|
843
|
+
},
|
|
844
|
+
{
|
|
845
|
+
"type": "checkbox",
|
|
846
|
+
"keyName": "notifyTypes",
|
|
847
|
+
"label": "通知方式",
|
|
848
|
+
"defaultValue": [],
|
|
849
|
+
"colspan": 2,
|
|
850
|
+
"optionItems": [
|
|
851
|
+
{ "label": "短信", "value": "SMS" },
|
|
852
|
+
{ "label": "邮件", "value": "EMAIL" }
|
|
853
|
+
]
|
|
854
|
+
},
|
|
855
|
+
{
|
|
856
|
+
"type": "select",
|
|
857
|
+
"keyName": "payType",
|
|
858
|
+
"label": "付款方式",
|
|
859
|
+
"options": {
|
|
860
|
+
"formScriptEnabled": true,
|
|
861
|
+
"formScriptCode": "payTypeList"
|
|
862
|
+
}
|
|
863
|
+
},
|
|
864
|
+
{
|
|
865
|
+
"type": "date",
|
|
866
|
+
"keyName": "orderDate",
|
|
867
|
+
"label": "订单日期"
|
|
868
|
+
},
|
|
869
|
+
{
|
|
870
|
+
"type": "text",
|
|
871
|
+
"keyName": "createByName",
|
|
872
|
+
"label": "创建人"
|
|
873
|
+
},
|
|
874
|
+
{
|
|
875
|
+
"type": "vabUpload",
|
|
876
|
+
"keyName": "attachments_a1b2c3d4e5f6789012345678abcdef",
|
|
877
|
+
"label": "附件",
|
|
878
|
+
"colspan": 2,
|
|
879
|
+
"options": {
|
|
880
|
+
"limit": 10
|
|
881
|
+
}
|
|
882
|
+
},
|
|
883
|
+
{
|
|
884
|
+
"type": "vabsearch",
|
|
885
|
+
"keyName": "supplierCode",
|
|
886
|
+
"label": "供应商",
|
|
887
|
+
"required": true,
|
|
888
|
+
"options": {
|
|
889
|
+
"vabSearchName": "supplierName",
|
|
890
|
+
"searchDialogConfig": {
|
|
891
|
+
"formCode": "SUPPLIER_LIST",
|
|
892
|
+
"valueSourceField": "supplierCode",
|
|
893
|
+
"labelSourceField": "supplierName"
|
|
894
|
+
}
|
|
895
|
+
}
|
|
896
|
+
},
|
|
897
|
+
{
|
|
898
|
+
"type": "status",
|
|
899
|
+
"keyName": "orderStatus",
|
|
900
|
+
"label": "订单状态",
|
|
901
|
+
"defaultValue": "1",
|
|
902
|
+
"options": {
|
|
903
|
+
"statusParam": [
|
|
904
|
+
{ "label": "草稿", "value": "1", "type": "info" },
|
|
905
|
+
{ "label": "已提交", "value": "2", "type": "warning" },
|
|
906
|
+
{ "label": "已审核", "value": "3", "type": "success" }
|
|
907
|
+
]
|
|
908
|
+
}
|
|
909
|
+
}
|
|
910
|
+
]
|
|
911
|
+
}
|
|
912
|
+
```
|
|
913
|
+
|
|
914
|
+
---
|
|
915
|
+
|
|
916
|
+
## 5. 完整综合 Java 示例代码
|
|
917
|
+
|
|
918
|
+
脚本编码建议:`getDynamicSchemaFields`(配置在 table 容器「后台字段 → 脚本编码」)
|
|
919
|
+
返回类型:`List<Map<String, Object>>`,平台自动包装为响应 `objx` 数组。
|
|
920
|
+
|
|
921
|
+
### 5.1 脚本约定
|
|
922
|
+
|
|
923
|
+
| 项目 | 说明 |
|
|
924
|
+
|------|------|
|
|
925
|
+
| 返回类型 | `List<Map<String, Object>>`,每个 Map 为一条字段定义 |
|
|
926
|
+
| 嵌套配置 | 控件扩展属性放在 `options`(`Map`)中 |
|
|
927
|
+
| 默认值 | 与控件设计器默认相同的属性**无需写入**,见 **§2.0** |
|
|
928
|
+
| 静态选项 | `select` / `radio` / `checkbox` 可直接 `put("optionItems", list)` |
|
|
929
|
+
| 请求入参 | Java 脚本通过 `this.getBinding().getVariables()` 获取;表头脚本直接读 `formData`,见下方示例 |
|
|
930
|
+
| 二次请求 | 下拉/状态等 `formScriptCode`、凭证 `getList` 需**单独维护**选项脚本 |
|
|
931
|
+
|
|
932
|
+
读取表单数据示例(表头后台字段脚本):
|
|
933
|
+
|
|
934
|
+
```java
|
|
935
|
+
Map<String, Object> variables = this.getBinding().getVariables();
|
|
936
|
+
Map<String, Object> formModel = (Map<String, Object>) variables.get("formData");
|
|
937
|
+
String billType = formModel.get("billType").toString();
|
|
938
|
+
```
|
|
939
|
+
|
|
940
|
+
数据表格动态列脚本读内层 `data`,见 [`数据表格动态列 JSON 说明.md`](./数据表格动态列%20JSON%20说明.md) §0.2 / §1.1。
|
|
941
|
+
|
|
942
|
+
### 5.2 主脚本:返回全部字段定义
|
|
943
|
+
|
|
944
|
+
```java
|
|
945
|
+
import java.util.ArrayList;
|
|
946
|
+
import java.util.HashMap;
|
|
947
|
+
import java.util.List;
|
|
948
|
+
import java.util.Map;
|
|
949
|
+
|
|
950
|
+
List<Map<String, Object>> fields = new ArrayList<>();
|
|
951
|
+
|
|
952
|
+
// ========== 1. 单行输入 input ==========
|
|
953
|
+
Map<String, Object> f1 = new HashMap<>();
|
|
954
|
+
f1.put("type", "input");
|
|
955
|
+
f1.put("keyName", "contractNo");
|
|
956
|
+
f1.put("label", "合同编号");
|
|
957
|
+
f1.put("required", true);
|
|
958
|
+
fields.add(f1);
|
|
959
|
+
|
|
960
|
+
// ========== 2. 多行输入 textarea ==========
|
|
961
|
+
Map<String, Object> f2 = new HashMap<>();
|
|
962
|
+
f2.put("type", "textarea");
|
|
963
|
+
f2.put("keyName", "remark");
|
|
964
|
+
f2.put("label", "备注");
|
|
965
|
+
f2.put("colspan", 2);
|
|
966
|
+
fields.add(f2);
|
|
967
|
+
|
|
968
|
+
// ========== 3. 计数器 number ==========
|
|
969
|
+
Map<String, Object> f3 = new HashMap<>();
|
|
970
|
+
f3.put("type", "number");
|
|
971
|
+
f3.put("keyName", "totalQty");
|
|
972
|
+
f3.put("label", "数量");
|
|
973
|
+
f3.put("defaultValue", 1);
|
|
974
|
+
Map<String, Object> f3Opt = new HashMap<>();
|
|
975
|
+
f3Opt.put("min", 0);
|
|
976
|
+
f3Opt.put("precision", 0);
|
|
977
|
+
f3.put("options", f3Opt);
|
|
978
|
+
fields.add(f3);
|
|
979
|
+
|
|
980
|
+
// ========== 4. 单选项 radio(静态 optionItems) ==========
|
|
981
|
+
Map<String, Object> f4 = new HashMap<>();
|
|
982
|
+
f4.put("type", "radio");
|
|
983
|
+
f4.put("keyName", "urgentFlag");
|
|
984
|
+
f4.put("label", "是否加急");
|
|
985
|
+
f4.put("defaultValue", "0");
|
|
986
|
+
List<Map<String, Object>> f4Items = new ArrayList<>();
|
|
987
|
+
Map<String, Object> f4Item1 = new HashMap<>();
|
|
988
|
+
f4Item1.put("label", "否");
|
|
989
|
+
f4Item1.put("value", "0");
|
|
990
|
+
f4Items.add(f4Item1);
|
|
991
|
+
Map<String, Object> f4Item2 = new HashMap<>();
|
|
992
|
+
f4Item2.put("label", "是");
|
|
993
|
+
f4Item2.put("value", "1");
|
|
994
|
+
f4Items.add(f4Item2);
|
|
995
|
+
f4.put("optionItems", f4Items);
|
|
996
|
+
fields.add(f4);
|
|
997
|
+
|
|
998
|
+
// ========== 5. 多选项 checkbox(静态 optionItems) ==========
|
|
999
|
+
Map<String, Object> f5 = new HashMap<>();
|
|
1000
|
+
f5.put("type", "checkbox");
|
|
1001
|
+
f5.put("keyName", "notifyTypes");
|
|
1002
|
+
f5.put("label", "通知方式");
|
|
1003
|
+
f5.put("defaultValue", new ArrayList<>());
|
|
1004
|
+
f5.put("colspan", 2);
|
|
1005
|
+
List<Map<String, Object>> f5Items = new ArrayList<>();
|
|
1006
|
+
Map<String, Object> f5Item1 = new HashMap<>();
|
|
1007
|
+
f5Item1.put("label", "短信");
|
|
1008
|
+
f5Item1.put("value", "SMS");
|
|
1009
|
+
f5Items.add(f5Item1);
|
|
1010
|
+
Map<String, Object> f5Item2 = new HashMap<>();
|
|
1011
|
+
f5Item2.put("label", "邮件");
|
|
1012
|
+
f5Item2.put("value", "EMAIL");
|
|
1013
|
+
f5Items.add(f5Item2);
|
|
1014
|
+
f5.put("optionItems", f5Items);
|
|
1015
|
+
fields.add(f5);
|
|
1016
|
+
|
|
1017
|
+
// ========== 6. 下拉选项 select(表单脚本加载选项) ==========
|
|
1018
|
+
Map<String, Object> f6 = new HashMap<>();
|
|
1019
|
+
f6.put("type", "select");
|
|
1020
|
+
f6.put("keyName", "payType");
|
|
1021
|
+
f6.put("label", "付款方式");
|
|
1022
|
+
f6.put("required", true);
|
|
1023
|
+
Map<String, Object> f6Opt = new HashMap<>();
|
|
1024
|
+
f6Opt.put("formScriptEnabled", true);
|
|
1025
|
+
f6Opt.put("formScriptCode", "payTypeList");
|
|
1026
|
+
// formScriptParam 为前端 JS 脚本字符串,非 Java
|
|
1027
|
+
f6Opt.put("formScriptParam", "return { billType: this.formModel.billType }");
|
|
1028
|
+
f6.put("options", f6Opt);
|
|
1029
|
+
fields.add(f6);
|
|
1030
|
+
|
|
1031
|
+
// ========== 6b. 下拉选项 select(系统词汇) ==========
|
|
1032
|
+
Map<String, Object> f6b = new HashMap<>();
|
|
1033
|
+
f6b.put("type", "select");
|
|
1034
|
+
f6b.put("keyName", "orderStatus");
|
|
1035
|
+
f6b.put("label", "订单状态");
|
|
1036
|
+
f6b.put("defaultValue", "1");
|
|
1037
|
+
Map<String, Object> f6bOpt = new HashMap<>();
|
|
1038
|
+
f6bOpt.put("commonAttributeEnabled", true);
|
|
1039
|
+
f6bOpt.put("commonAttributeCode", "ORDER_STATUS");
|
|
1040
|
+
f6b.put("options", f6bOpt);
|
|
1041
|
+
fields.add(f6b);
|
|
1042
|
+
|
|
1043
|
+
// ========== 7. 日期 date ==========
|
|
1044
|
+
Map<String, Object> f7 = new HashMap<>();
|
|
1045
|
+
f7.put("type", "date");
|
|
1046
|
+
f7.put("keyName", "orderDate");
|
|
1047
|
+
f7.put("label", "订单日期");
|
|
1048
|
+
fields.add(f7);
|
|
1049
|
+
|
|
1050
|
+
// ========== 8. 文本 text(只读展示) ==========
|
|
1051
|
+
Map<String, Object> f8 = new HashMap<>();
|
|
1052
|
+
f8.put("type", "text");
|
|
1053
|
+
f8.put("keyName", "createByName");
|
|
1054
|
+
f8.put("label", "创建人");
|
|
1055
|
+
fields.add(f8);
|
|
1056
|
+
|
|
1057
|
+
// ========== 9. 凭证 vabUpload ==========
|
|
1058
|
+
Map<String, Object> f9 = new HashMap<>();
|
|
1059
|
+
f9.put("type", "vabUpload");
|
|
1060
|
+
f9.put("keyName", "attachments_a1b2c3d4e5f6789012345678abcdef");
|
|
1061
|
+
f9.put("label", "附件");
|
|
1062
|
+
f9.put("colspan", 2);
|
|
1063
|
+
Map<String, Object> f9Opt = new HashMap<>();
|
|
1064
|
+
f9Opt.put("limit", 10);
|
|
1065
|
+
f9.put("options", f9Opt);
|
|
1066
|
+
fields.add(f9);
|
|
1067
|
+
|
|
1068
|
+
// ========== 10. 搜索框 vabsearch ==========
|
|
1069
|
+
Map<String, Object> f10 = new HashMap<>();
|
|
1070
|
+
f10.put("type", "vabsearch");
|
|
1071
|
+
f10.put("keyName", "supplierCode");
|
|
1072
|
+
f10.put("label", "供应商");
|
|
1073
|
+
f10.put("required", true);
|
|
1074
|
+
Map<String, Object> f10Opt = new HashMap<>();
|
|
1075
|
+
f10Opt.put("vabSearchName", "supplierName");
|
|
1076
|
+
Map<String, Object> f10Dialog = new HashMap<>();
|
|
1077
|
+
f10Dialog.put("formCode", "SUPPLIER_LIST");
|
|
1078
|
+
f10Dialog.put("valueSourceField", "supplierCode");
|
|
1079
|
+
f10Dialog.put("labelSourceField", "supplierName");
|
|
1080
|
+
f10Opt.put("searchDialogConfig", f10Dialog);
|
|
1081
|
+
f10.put("options", f10Opt);
|
|
1082
|
+
fields.add(f10);
|
|
1083
|
+
|
|
1084
|
+
// ========== 11. 状态 status(静态 statusParam + 颜色) ==========
|
|
1085
|
+
Map<String, Object> f11 = new HashMap<>();
|
|
1086
|
+
f11.put("type", "status");
|
|
1087
|
+
f11.put("keyName", "wfStatus");
|
|
1088
|
+
f11.put("label", "流程状态");
|
|
1089
|
+
f11.put("defaultValue", "1");
|
|
1090
|
+
Map<String, Object> f11Opt = new HashMap<>();
|
|
1091
|
+
List<Map<String, Object>> f11Status = new ArrayList<>();
|
|
1092
|
+
Map<String, Object> s1 = new HashMap<>();
|
|
1093
|
+
s1.put("label", "草稿");
|
|
1094
|
+
s1.put("value", "1");
|
|
1095
|
+
s1.put("type", "info");
|
|
1096
|
+
f11Status.add(s1);
|
|
1097
|
+
Map<String, Object> s2 = new HashMap<>();
|
|
1098
|
+
s2.put("label", "已提交");
|
|
1099
|
+
s2.put("value", "2");
|
|
1100
|
+
s2.put("type", "warning");
|
|
1101
|
+
f11Status.add(s2);
|
|
1102
|
+
Map<String, Object> s3 = new HashMap<>();
|
|
1103
|
+
s3.put("label", "已审核");
|
|
1104
|
+
s3.put("value", "3");
|
|
1105
|
+
s3.put("type", "success");
|
|
1106
|
+
f11Status.add(s3);
|
|
1107
|
+
f11Opt.put("statusParam", f11Status);
|
|
1108
|
+
f11.put("options", f11Opt);
|
|
1109
|
+
fields.add(f11);
|
|
1110
|
+
|
|
1111
|
+
return fields;
|
|
1112
|
+
```
|
|
1113
|
+
|
|
1114
|
+
### 5.3 附属脚本:下拉选项 payTypeList
|
|
1115
|
+
|
|
1116
|
+
字段定义里 `formScriptCode: "payTypeList"` 时,控件初始化会**二次请求**该脚本。
|
|
1117
|
+
|
|
1118
|
+
```java
|
|
1119
|
+
import java.util.ArrayList;
|
|
1120
|
+
import java.util.HashMap;
|
|
1121
|
+
import java.util.List;
|
|
1122
|
+
import java.util.Map;
|
|
1123
|
+
|
|
1124
|
+
// 请求 taBm = payType,data 含 formScriptParam 脚本返回的参数
|
|
1125
|
+
List<Map<String, Object>> list = new ArrayList<>();
|
|
1126
|
+
|
|
1127
|
+
Map<String, Object> item1 = new HashMap<>();
|
|
1128
|
+
item1.put("label", "现金");
|
|
1129
|
+
item1.put("value", "CASH");
|
|
1130
|
+
list.add(item1);
|
|
1131
|
+
|
|
1132
|
+
Map<String, Object> item2 = new HashMap<>();
|
|
1133
|
+
item2.put("label", "银行转账");
|
|
1134
|
+
item2.put("value", "TRANSFER");
|
|
1135
|
+
list.add(item2);
|
|
1136
|
+
|
|
1137
|
+
Map<String, Object> item3 = new HashMap<>();
|
|
1138
|
+
item3.put("label", "承兑汇票");
|
|
1139
|
+
item3.put("value", "ACCEPT");
|
|
1140
|
+
list.add(item3);
|
|
1141
|
+
|
|
1142
|
+
return list;
|
|
1143
|
+
```
|
|
1144
|
+
|
|
1145
|
+
### 5.4 附属脚本:凭证 getList
|
|
1146
|
+
|
|
1147
|
+
字段 `attachments_<唯一后缀>` 在编辑态(有 dataId)时,通过 `formScriptCode: "getList"` 加载历史附件;`taBm` 与 `keyName` 一致。
|
|
1148
|
+
|
|
1149
|
+
```java
|
|
1150
|
+
import java.util.ArrayList;
|
|
1151
|
+
import java.util.HashMap;
|
|
1152
|
+
import java.util.List;
|
|
1153
|
+
import java.util.Map;
|
|
1154
|
+
|
|
1155
|
+
// 请求 data.id = 单据主键
|
|
1156
|
+
List<Map<String, Object>> files = new ArrayList<>();
|
|
1157
|
+
|
|
1158
|
+
Map<String, Object> file1 = new HashMap<>();
|
|
1159
|
+
file1.put("id", "file001");
|
|
1160
|
+
file1.put("fileName", "合同.pdf");
|
|
1161
|
+
file1.put("fileUrl", "https://xxx/contract.pdf");
|
|
1162
|
+
file1.put("fileSize", 102400);
|
|
1163
|
+
file1.put("createBy", "张三");
|
|
1164
|
+
file1.put("createDate", "2026-06-15 10:00:00");
|
|
1165
|
+
files.add(file1);
|
|
1166
|
+
|
|
1167
|
+
return files;
|
|
1168
|
+
```
|
|
1169
|
+
|
|
1170
|
+
### 5.5 按业务条件动态裁剪字段
|
|
1171
|
+
|
|
1172
|
+
```java
|
|
1173
|
+
import java.util.ArrayList;
|
|
1174
|
+
import java.util.HashMap;
|
|
1175
|
+
import java.util.List;
|
|
1176
|
+
import java.util.Map;
|
|
1177
|
+
|
|
1178
|
+
List<Map<String, Object>> fields = new ArrayList<>();
|
|
1179
|
+
|
|
1180
|
+
Map<String, Object> variables = this.getBinding().getVariables();
|
|
1181
|
+
Map<String, Object> formModel = (Map<String, Object>) variables.get("formData");
|
|
1182
|
+
String billType = formModel.get("billType").toString();
|
|
1183
|
+
|
|
1184
|
+
// 所有单据都有合同编号
|
|
1185
|
+
Map<String, Object> contractNo = new HashMap<>();
|
|
1186
|
+
contractNo.put("type", "input");
|
|
1187
|
+
contractNo.put("keyName", "contractNo");
|
|
1188
|
+
contractNo.put("label", "合同编号");
|
|
1189
|
+
contractNo.put("required", true);
|
|
1190
|
+
contractNo.put("colspan", 1);
|
|
1191
|
+
fields.add(contractNo);
|
|
1192
|
+
|
|
1193
|
+
// 仅采购单显示供应商搜索框
|
|
1194
|
+
if ("PO".equals(billType)) {
|
|
1195
|
+
Map<String, Object> supplier = new HashMap<>();
|
|
1196
|
+
supplier.put("type", "vabsearch");
|
|
1197
|
+
supplier.put("keyName", "supplierCode");
|
|
1198
|
+
supplier.put("label", "供应商");
|
|
1199
|
+
supplier.put("colspan", 1);
|
|
1200
|
+
Map<String, Object> opt = new HashMap<>();
|
|
1201
|
+
opt.put("vabSearchName", "supplierName");
|
|
1202
|
+
Map<String, Object> dialog = new HashMap<>();
|
|
1203
|
+
dialog.put("formCode", "SUPPLIER_LIST");
|
|
1204
|
+
dialog.put("valueSourceField", "supplierCode");
|
|
1205
|
+
dialog.put("labelSourceField", "supplierName");
|
|
1206
|
+
opt.put("searchDialogConfig", dialog);
|
|
1207
|
+
supplier.put("options", opt);
|
|
1208
|
+
fields.add(supplier);
|
|
1209
|
+
}
|
|
1210
|
+
|
|
1211
|
+
return fields;
|
|
1212
|
+
```
|
|
1213
|
+
|
|
1214
|
+
### 5.6 使用前替换占位
|
|
1215
|
+
|
|
1216
|
+
| 占位 | 说明 |
|
|
1217
|
+
|------|------|
|
|
1218
|
+
| `getDynamicSchemaFields` | table 容器「脚本编码」 |
|
|
1219
|
+
| `payTypeList` | 下拉选项二次请求脚本 |
|
|
1220
|
+
| `ORDER_STATUS` | 系统词汇编码 |
|
|
1221
|
+
| `SUPPLIER_LIST` | 搜索弹框表单编码 |
|
|
1222
|
+
| 各字段 `keyName` | 与 formModel / 保存接口字段一致 |
|
|
1223
|
+
|
|
1224
|
+
联调建议:先返回 `input` + `select`(静态 optionItems) 两列验证通路,再逐步放开其余类型。
|
|
1225
|
+
|
|
1226
|
+
---
|
|
1227
|
+
|
|
1228
|
+
## 6. 布局说明
|
|
1229
|
+
|
|
1230
|
+
| 容器配置 | 说明 |
|
|
1231
|
+
|---------|------|
|
|
1232
|
+
| `dynamicSchemaColumns` | 每行列数,默认 4 |
|
|
1233
|
+
| `dynamicSchemaMode: append` | 追加到已有行之后 |
|
|
1234
|
+
| `dynamicSchemaMode: replace` | 清空已有行后替换 |
|
|
1235
|
+
| `dynamicSchemaMode: anchor` | 插入到占位锚点行 |
|
|
1236
|
+
| 字段 `colspan` | 占几列,超出自动换行 |
|
|
1237
|
+
|
|
1238
|
+
---
|
|
1239
|
+
|
|
1240
|
+
## 7. 注意事项
|
|
1241
|
+
|
|
1242
|
+
1. **type 必须已注册**:未在设计器字段库中注册的 type 会被跳过。
|
|
1243
|
+
2. **keyName 唯一**:不要与表单已有字段重复。
|
|
1244
|
+
3. **只写差异属性**:与控件设计器默认值相同的属性无需维护,见 **§2.0 默认值**。
|
|
1245
|
+
4. **动态规则分离**:运行时显隐/必填/只读等规则在「表单设置 → 动态字段规则」配置,不在本 JSON 中动态下发(初始 `hidden/required` 等仍可在定义里设置)。
|
|
1246
|
+
5. **formScriptParam / dialogQueryParam 等**:均为 JS 脚本字符串,不是 JSON 对象。
|
|
1247
|
+
6. **选项脚本与词汇互斥**:同一控件只能启用一种选项来源。
|
|
1248
|
+
7. **凭证仅编辑态加载**:无 `dataId` 时不请求历史附件。
|
|
1249
|
+
|
|
1250
|
+
---
|
|
1251
|
+
|
|
1252
|
+
## 8. 相关文件
|
|
1253
|
+
|
|
1254
|
+
| 文件 | 说明 |
|
|
1255
|
+
|------|------|
|
|
1256
|
+
| `utils/dynamicSchemaUtil.js` | 协议常量(`DYNAMIC_SCHEMA_CORE_KEYS` 等)与规范化 |
|
|
1257
|
+
| `form-render/container-item/dynamicFieldMixin.js` | 表头后台字段运行时 |
|
|
1258
|
+
| `form-render/container-item/data-table-mixin.js` | 数据表格动态列运行时 |
|
|
1259
|
+
| `form-designer/.../table-dynamicField-editor.vue` | 表头设计器配置 |
|
|
1260
|
+
| `form-designer/.../data-table-editor.vue` | 数据表格设计器配置 |
|
|
1261
|
+
| [`数据表格动态列 JSON 说明.md`](./数据表格动态列%20JSON%20说明.md) | 数据表格差异说明 |
|