24 KiB
控件 Options 完整参考
每种控件的完整 options 配置。生成时按照此文档的结构填充。
通用 options 字段
大部分控件共有以下字段:
{
"required": false,
"disabled": false,
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
| 字段 | 说明 |
|---|---|
required |
是否必填 |
disabled |
是否禁用 |
hidden |
是否隐藏 |
hiddenOnAdd |
新增时隐藏 |
fieldNote |
字段备注 |
autoWidth |
宽度百分比(100=整行,50=半行) |
input — 单行文本
{
"width": "100%",
"defaultValue": "",
"required": false,
"dataType": null,
"pattern": "",
"patternMessage": "",
"placeholder": "",
"clearable": false,
"readonly": false,
"disabled": false,
"fillRuleCode": "",
"showPassword": false,
"unique": false,
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-input | icon: icon-input
textarea — 多行文本
{
"width": "100%",
"defaultValue": "",
"required": false,
"disabled": false,
"pattern": "",
"patternMessage": "",
"placeholder": "",
"readonly": false,
"unique": false,
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-textarea | icon: icon-textarea
number — 数字
{
"width": "",
"required": false,
"defaultValue": 0,
"placeholder": "",
"controls": false,
"min": 0,
"minUnlimited": true,
"max": 100,
"maxUnlimited": true,
"step": 1,
"disabled": false,
"controlsPosition": "right",
"unitText": "",
"unitPosition": "suffix",
"showPercent": false,
"align": "left",
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-number | icon: icon-number
integer — 整数
{
"width": "",
"placeholder": "请输入整数",
"required": false,
"min": 0,
"minUnlimited": true,
"max": 100,
"maxUnlimited": true,
"step": 1,
"precision": 0,
"controls": true,
"disabled": false,
"controlsPosition": "right",
"unitText": "",
"unitPosition": "suffix",
"showPercent": false,
"align": "left",
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-integer | icon: icon-integer
money — 金额
{
"width": "180px",
"placeholder": "请输入金额",
"required": false,
"unitText": "元",
"unitPosition": "suffix",
"precision": 2,
"hidden": false,
"disabled": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-money | icon: icon-money
radio — 单选框组
{
"inline": true,
"matrixWidth": 120,
"defaultValue": "",
"showType": "default",
"showLabel": false,
"useColor": false,
"colorIteratorIndex": 3,
"options": [
{ "value": "选项1", "itemColor": "#2196F3" },
{ "value": "选项2", "itemColor": "#08C9C9" },
{ "value": "选项3", "itemColor": "#00C345" }
],
"required": false,
"width": "",
"remote": false,
"remoteOptions": [],
"props": { "value": "value", "label": "label" },
"remoteFunc": "",
"disabled": false,
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-radio | icon: icon-radio-active
radio 的 advancedSetting.defaultValue 需要 valueSplit: ",", customConfig: true
radio 使用系统字典
将 remote 设为 "dict",添加 dictCode,同时在控件顶层添加 dictOptions:
{
"options": {
"remote": "dict",
"dictCode": "sys_user_sex",
"showLabel": true,
"options": [],
"remoteOptions": [],
"props": { "value": "value", "label": "label" }
},
"dictOptions": [
{ "value": "1", "label": "男" },
{ "value": "2", "label": "女" }
]
}
checkbox — 多选框组
{
"inline": true,
"matrixWidth": 120,
"defaultValue": [],
"showLabel": false,
"showType": "default",
"useColor": false,
"colorIteratorIndex": 3,
"options": [
{ "value": "选项1", "itemColor": "#2196F3" },
{ "value": "选项2", "itemColor": "#08C9C9" },
{ "value": "选项3", "itemColor": "#00C345" }
],
"required": false,
"width": "",
"remote": false,
"remoteOptions": [],
"props": { "value": "value", "label": "label" },
"remoteFunc": "",
"disabled": false,
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-checkbox | icon: icon-checkbox
checkbox 的 advancedSetting.defaultValue 需要 valueSplit: ",", customConfig: true
checkbox 使用系统字典
同 radio/select,将 remote 设为 "dict",添加 dictCode:
{
"options": {
"remote": "dict",
"dictCode": "sys_permission_type",
"showLabel": true,
"options": [],
"remoteOptions": [],
"props": { "value": "value", "label": "label" }
},
"dictOptions": [
{ "value": "1", "label": "菜单" },
{ "value": "2", "label": "按钮" }
]
}
select — 下拉选择框
{
"defaultValue": "",
"multiple": false,
"disabled": false,
"clearable": true,
"placeholder": "",
"required": false,
"showLabel": false,
"showType": "default",
"width": "",
"useColor": false,
"colorIteratorIndex": 3,
"options": [
{ "value": "下拉框1", "itemColor": "#2196F3" },
{ "value": "下拉框2", "itemColor": "#08C9C9" },
{ "value": "下拉框3", "itemColor": "#00C345" }
],
"remote": false,
"filterable": false,
"remoteOptions": [],
"props": { "value": "value", "label": "label" },
"remoteFunc": "",
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-select | icon: icon-select
select 的 advancedSetting.defaultValue 需要 valueSplit: ",", customConfig: true
select 使用系统字典
将 remote 设为 "dict",添加 dictCode,同时在控件顶层添加 dictOptions:
{
"options": {
"remote": "dict",
"dictCode": "priority",
"showLabel": true,
"options": [],
"remoteOptions": [],
"props": { "value": "value", "label": "label" }
},
"dictOptions": [
{ "value": "L", "label": "低" },
{ "value": "M", "label": "中" },
{ "value": "H", "label": "高" }
]
}
date — 日期选择器
{
"defaultValue": "",
"defaultValueType": 1,
"readonly": false,
"disabled": false,
"editable": true,
"clearable": true,
"placeholder": "",
"startPlaceholder": "",
"endPlaceholder": "",
"designType": "date",
"type": "date",
"format": "yyyy-MM-dd",
"timestamp": true,
"required": false,
"width": "",
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-date | icon: icon-date
日期范围选择: 将 type 改为 "daterange",designType 改为 "daterange"
time — 时间选择器
{
"defaultValue": "",
"inputDefVal": false,
"readonly": false,
"disabled": false,
"editable": true,
"clearable": true,
"placeholder": "",
"startPlaceholder": "",
"endPlaceholder": "",
"isRange": false,
"arrowControl": false,
"format": "HH:mm:ss",
"required": false,
"width": "",
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-time | icon: icon-time
switch — 开关
{
"defaultValue": false,
"disabled": false,
"activeValue": "Y",
"inactiveValue": "N",
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-switch | icon: icon-switch
rate — 评分
{
"defaultValue": 0,
"max": 5,
"disabled": false,
"allowHalf": false,
"required": false,
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-rate | icon: icon-rate
rate 有 defaultRules:
"defaultRules": [{ "type": "validator", "message": "", "trigger": "change" }]
color — 颜色选择器
{
"defaultValue": "",
"disabled": false,
"showAlpha": false,
"required": false,
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-color | icon: icon-color
slider — 滑块
{
"defaultValue": 0,
"disabled": false,
"required": false,
"min": 0,
"max": 100,
"step": 1,
"showInput": false,
"showPercent": false,
"range": false,
"width": "",
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-slider | icon: icon-slider
phone — 手机
{
"width": "300px",
"defaultValue": "",
"required": false,
"placeholder": "",
"readonly": false,
"disabled": false,
"unique": false,
"hidden": false,
"showVerifyCode": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-input-phone | icon: icon-mobile-phone
phone 有 defaultRules:
"defaultRules": [
{ "type": "phone", "message": "请输入正确的手机号码" },
{ "type": "validator", "message": "", "trigger": "blur" }
]
email — 邮箱
{
"width": "300px",
"defaultValue": "",
"required": false,
"placeholder": "",
"readonly": false,
"disabled": false,
"unique": false,
"hidden": false,
"showVerifyCode": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-input-email | icon: icon-email
email 有 defaultRules:
"defaultRules": [
{ "type": "email", "message": "请输入正确的邮箱地址" },
{ "type": "validator", "message": "", "trigger": "blur" }
]
imgupload — 图片上传
{
"defaultValue": [],
"size": { "width": 100, "height": 100 },
"width": "",
"tokenFunc": "funcGetToken",
"token": "",
"domain": "http://img.h5huodong.com",
"disabled": false,
"length": 9,
"multiple": true,
"hidden": false,
"hiddenOnAdd": false,
"required": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-tupian | icon: icon-tupian
file-upload — 文件上传
{
"defaultValue": [],
"token": "",
"length": 0,
"drag": false,
"listStyleType": "card",
"multiple": false,
"multipleDown": true,
"disabled": false,
"buttonText": "点击上传文件",
"tokenFunc": "funcGetToken",
"hidden": false,
"hiddenOnAdd": false,
"required": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-file-upload | icon: icon-shangchuan
editor — 富文本编辑器
{
"defaultValue": "",
"width": "100%",
"disabled": false,
"hidden": false,
"hiddenOnAdd": false,
"required": false,
"fieldNote": ""
}
className: form-editor | icon: icon-fuwenbenkuang
不需要 card 容器,无 autoWidth 字段
markdown — Markdown 编辑器
{
"defaultValue": "",
"width": "100%",
"height": 300,
"viewerAutoHeight": false,
"disabled": false,
"hidden": false,
"hiddenOnAdd": false,
"required": false,
"fieldNote": ""
}
className: form-markdown | icon: icon-markdown
不需要 card 容器,无 autoWidth 字段
buttons — 按钮
{
"text": "按钮",
"icon": "",
"type": "default",
"btnSize": "default",
"plain": false,
"round": false,
"circle": false,
"disabled": false,
"hidden": false,
"hiddenOnAdd": false,
"required": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-buttons | icon: icon-btn2 | hideLabel: true
buttons 有 event 字段:
"event": { "click": "console.log('hello,world!')" }
text — 文本
{
"text": "这里是一段文本",
"width": "100%",
"align": "left",
"verticalAlign": "top",
"fontSize": 16,
"lineHeight": "",
"fontColor": "#4c4c4c",
"fontBold": false,
"fontItalic": false,
"fontUnderline": false,
"fontLineThrough": false,
"hidden": false,
"hiddenOnAdd": false,
"required": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-text | icon: icon-text | hideLabel: true
divider — 分隔符
{
"heightNumber": 48,
"type": "horizontal",
"text": "",
"position": "center",
"hidden": false,
"hiddenOnAdd": false,
"required": false,
"fieldNote": ""
}
className: form-divider | icon: icon-divider | hideLabel: true | formItemMargin: true
不需要 card 容器,无 autoWidth 字段
area-linkage — 省市级联动
{
"width": "",
"placeholder": "请选择",
"areaLevel": 3,
"defaultValue": "",
"clearable": true,
"disabled": false,
"hidden": false,
"hiddenOnAdd": false,
"required": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-area-linkage | icon: icon-jilianxuanze
areaLevel:2=省市,3=省市区
map — 地图
{
"width": "100%",
"height": "300px",
"zoom": 15,
"point": { "lng": 116.397467, "lat": 39.908806 },
"mapSettings": {
"dragging": true, "scrollWheelZoom": true, "doubleClickZoom": true,
"keyboard": false, "inertialDragging": true, "continuousZoom": true, "pinchToZoom": true
},
"mapControls": {
"navigation": true, "geolocation": true, "scale": true,
"mapType": true, "panorama": false, "overviewMap": false
},
"disabled": false, "hidden": false, "hiddenOnAdd": false,
"required": false, "fieldNote": "",
"defaultValue": "116.397467,39.908806"
}
className: form-map | icon: icon-map
不需要 card 容器,无 autoWidth 字段
location — 定位
{
"width": "100%",
"defaultValue": "",
"defaultCurrent": false,
"showLngLat": false,
"showMap": false,
"disabled": false,
"hidden": false,
"hiddenOnAdd": false,
"required": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-location | icon: icon-location
capital-money — 大写金额
{
"moneyWidgetKey": "",
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-money | icon: icon-money
moneyWidgetKey:关联的 money 控件的 key,自动将金额转大写
barcode — 条码
{
"maxWidth": 180,
"codeType": "barcode",
"sourceModel": "",
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-barcode | icon: icon-tiaoma
codeType:"barcode" 或 "qrcode"
text-compose — 文本组合
{
"expression": "",
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-text-compose | icon: icon-zuhe
auto-number — 自动编号
{
"numberRules": [
{ "type": "number", "mode": 1, "start": 1, "reset": 0, "length": 4, "continue": false }
],
"generateOnAdd": true,
"placeholder": "${title}自动生成,不需要填写",
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-auto-number | icon: icon-hashtag
select-user — 用户组件
{
"keyMaps": [],
"defaultValue": "",
"defaultLogin": false,
"placeholder": "",
"width": "100%",
"multiple": false,
"disabled": false,
"customReturnField": "username",
"hidden": false,
"dataAuthType": "member",
"hiddenOnAdd": false,
"required": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-select-user | icon: icon-user-circle
defaultLogin:true 时默认填充当前登录用户
select-depart — 部门组件
{
"keyMaps": [],
"defaultValue": "",
"defaultLogin": false,
"placeholder": "",
"width": "100%",
"multiple": false,
"disabled": false,
"customReturnField": "id",
"hidden": false,
"dataAuthType": "member",
"hiddenOnAdd": false,
"required": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-select-depart | icon: icon-depart
select-depart-post — 岗位组件
{
"keyMaps": [],
"defaultValue": "",
"defaultLogin": false,
"placeholder": "",
"width": "100%",
"multiple": false,
"disabled": false,
"customReturnField": "id",
"hidden": false,
"dataAuthType": "member",
"hiddenOnAdd": false,
"required": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-select-depart | icon: icon-gangwei
org-role — 组织角色
{
"defaultValue": "",
"defaultLogin": false,
"placeholder": "选择组织角色",
"width": "100%",
"multiple": false,
"disabled": false,
"hidden": false,
"dataAuthType": "member",
"hiddenOnAdd": false,
"required": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-org-role | icon: icon-zuzhijuese
select-tree — 下拉树
{
"defaultValue": "",
"placeholder": "",
"width": "",
"disabled": false,
"multiple": false,
"dataFrom": "category",
"conf": {
"category": { "code": "B02" },
"table": {
"name": "", "code": "", "text": "",
"pidField": "", "rootPid": "", "leaf": "",
"converIsLeafVal": true
},
"condition": "",
"conditionOnlyRoot": true
},
"hidden": false,
"hiddenOnAdd": false,
"required": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-select-tree | icon: icon-tree
ocr — 文本识别
{
"type": "normal",
"fieldMapping": { "content": "input_xxx" },
"hidden": false,
"disabled": false,
"required": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-ocr | icon: icon-ocr-a
fieldMapping.content:识别结果映射到的目标控件 model
summary — 汇总
{
"linkTable": "1773453175163_330101",
"field": "inner-record-count",
"summary": "",
"filter": { "enabled": false, "rules": [], "matchType": "AND" },
"hidden": false,
"hiddenOnAdd": false,
"required": false,
"fieldNote": "",
"autoWidth": 50
}
className: form-summary | icon: icon-sigma
sub-table-design — 设计子表
{
"isWordStyle": false,
"isWordInnerGrid": false,
"gutter": 0,
"columnNumber": 2,
"operationMode": 1,
"justify": "start",
"align": "top",
"defaultValue": [],
"subTableName": "",
"defaultRows": 0,
"showCheckbox": true,
"showNumber": true,
"showRowButton": false,
"allowAdd": true,
"autoHeight": true,
"defaultValType": "none",
"hidden": false,
"hiddenOnAdd": false,
"required": false,
"fieldNote": ""
}
className: form-sub-table | icon: icon-table
不需要 card 容器。子控件结构见 desform-examples.md
formula — 公式
{
"type": "number",
"mode": "SUM",
"expression": "",
"decimal": 2,
"thousand": true,
"percent": false,
"unitPosition": "suffix",
"unitText": "",
"emptyAsZero": true,
"dateBegin": "",
"dateEnd": "",
"dateFormatMethod": 1,
"datePrintUnit": "m",
"dateAddExp": "",
"datePrintFormat": "YYYY-MM-DD",
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-formula | icon: icon-gongshibianji
数字模式 (type: "number"):
| mode | 说明 |
|---|---|
SUM |
求和(选择多个字段相加) |
avg |
平均值 |
max |
最大值 |
min |
最小值 |
product |
乘积 |
custom |
自定义公式,使用 expression 字段(如 field1 + field2 - field3) |
日期模式 (type: "date"):
| mode | 说明 |
|---|---|
DATEIF |
两个日期之差 |
DATEADD |
日期加减运算 |
NOW_DATEIF |
当前日期与某日期之差 |
link-record — 关联记录
{
"sourceCode": "",
"showMode": "single",
"showType": "card",
"titleField": "",
"showFields": [],
"allowView": true,
"allowEdit": true,
"allowAdd": true,
"allowSelect": true,
"buttonText": "添加记录",
"twoWayModel": "",
"dataSelectAuth": "all",
"filters": [
{
"matchType": "AND",
"rules": []
}
],
"search": {
"enabled": false,
"field": "",
"rule": "like",
"afterShow": false,
"fields": []
},
"createMode": {
"add": true,
"select": false,
"params": {
"selectLinkModel": ""
}
},
"width": "100%",
"defaultValue": "",
"defaultValType": "none",
"required": false,
"disabled": false,
"hidden": false,
"isSubTable": false,
"isSelf": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-link-record | icon: icon-link(注意:不是 icon-link-record!)
| 字段 | 说明 |
|---|---|
sourceCode |
来源表单编码(desformCode) |
showMode |
"single"(单条)或 "many"(多条) |
showType |
"card"(卡片)、"select"(下拉)、"table"(表格) |
titleField |
必填 — 来源表单的标题字段 model(用于下拉/卡片显示) |
showFields |
要在关联视图中展示的来源表字段 model 列表 |
twoWayModel |
双向关联的反向字段 model |
dataSelectAuth |
"all" 或 "read"(数据权限范围) |
isSubTable |
是否为子表模式(一对多) |
showMode="many" 或 showType="table" 时不需要 card 容器
link-record 重要注意事项(实战踩坑)
advancedSetting.defaultValue.customConfig必须为trueallowView、allowEdit、allowAdd、allowSelect必须全部设为true(4 个操作选项默认全部勾选,否则关联记录功能不完整)titleField必须填源表的真实标题字段 model(如input_xxx),否则关联记录无法正常显示showFields建议填入源表中需要展示的字段 model 列表,提升选择体验- icon 是
icon-link而非icon-link-record,写错会导致控件显示异常
link-field — 他表字段
{
"linkRecordKey": "",
"showField": "",
"saveType": "view",
"fieldType": "",
"fieldOptions": {},
"width": "100%",
"defaultValue": "",
"readonly": false,
"disabled": false,
"hidden": false,
"hiddenOnAdd": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-link-field | icon: icon-field(注意:不是 icon-link-field!)
| 字段 | 说明 |
|---|---|
linkRecordKey |
关联记录控件的 key(不是 model!) |
showField |
要显示的来源表字段的 model |
saveType |
"view"(仅显示)或 "save"(保存到当前表) |
fieldType |
来源字段的实际控件类型(如 "input", "select-user", "money" 等) |
fieldOptions |
来源字段的相关 options 子集(如 select-user 需 {"multiple": false, "customReturnField": "username"}) |
必须与一个 link-record 控件配对使用
link-field 重要注意事项(实战踩坑)
- link-field 不需要
advancedSetting— 与其他控件不同,link-field 没有此字段 - icon 是
icon-field而非icon-link-field fieldType必须填来源字段的真实控件类型,不能一律写"input"fieldOptions需包含来源字段类型相关的配置,例如 select-user 需要{"multiple": false, "customReturnField": "username"}linkRecordKey填的是 link-record 控件的 key(如1773457559119_461003),不是 model(如link_record_xxx)
hand-sign — 手写签名
{
"width": "100%",
"height": "200px",
"disabled": false,
"hidden": false,
"hiddenOnAdd": false,
"required": false,
"fieldNote": "",
"autoWidth": 100
}
className: form-hand-sign | icon: icon-qianming
table-dict — 表字典
{
"dictTable": "",
"dictText": "",
"dictCode": "",
"placeholder": "",
"width": "",
"disabled": false,
"clearable": true,
"multiple": false,
"hidden": false,
"hiddenOnAdd": false,
"required": false,
"fieldNote": "",
"autoWidth": 100,
"matchType": "like",
"isPopup": false
}
className: form-table-dict | icon: icon-table-dict
| 字段 | 说明 |
|---|---|
dictTable |
表名 |
dictText |
显示字段 |
dictCode |
存储字段 |
matchType |
"like"(模糊)或 "eq"(精确) |
isPopup |
是否 popup 模式(弹窗选择) |