mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 12:08:13 +08:00
546 lines
16 KiB
Markdown
546 lines
16 KiB
Markdown
---
|
||
title: InputFormula 公式编辑器
|
||
description:
|
||
type: 0
|
||
group: null
|
||
menuName: InputFormula
|
||
icon:
|
||
order: 21
|
||
---
|
||
|
||
## 基本用法
|
||
|
||
用来输入公式。还是 beta 版本，整体待优化。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"debug": true,
|
||
"body": [
|
||
{
|
||
"type": "input-formula",
|
||
"name": "formula",
|
||
"label": "公式",
|
||
"evalMode": true,
|
||
"value": "SUM(1 , user.id)",
|
||
"variables": [
|
||
{
|
||
"label": "表单字段",
|
||
"children": [
|
||
{
|
||
"label": "文章名",
|
||
"value": "name",
|
||
"tag": "文本"
|
||
},
|
||
{
|
||
"label": "作者",
|
||
"value": "author",
|
||
"tag": "文本"
|
||
},
|
||
{
|
||
"label": "售价",
|
||
"value": "price",
|
||
"tag": "数字"
|
||
},
|
||
{
|
||
"label": "出版时间",
|
||
"value": "time",
|
||
"tag": "时间"
|
||
},
|
||
{
|
||
"label": "版本号",
|
||
"value": "version",
|
||
"tag": "数字"
|
||
},
|
||
{
|
||
"label": "出版社",
|
||
"value": "publisher",
|
||
"tag": "文本"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "流程字段",
|
||
"children": [
|
||
{
|
||
"label": "联系电话",
|
||
"value": "telphone"
|
||
},
|
||
{
|
||
"label": "地址",
|
||
"value": "addr"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "人员对象",
|
||
"value": "user",
|
||
"children": [
|
||
{
|
||
"label": "ID",
|
||
"value": "user.id"
|
||
},
|
||
{
|
||
"label": "用户名",
|
||
"value": "user.name"
|
||
},
|
||
]
|
||
},
|
||
{
|
||
"label": "长文本测试分类长文本测试分类长文本测试分类长文本测试分类",
|
||
"children": [
|
||
{
|
||
"label": "这是一段测试长文本这是一段测试长文本这是一段测试长文本",
|
||
"value": "longtext",
|
||
"tag": "文本"
|
||
}
|
||
]
|
||
}
|
||
],
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 展示模式
|
||
|
||
设置`"inputMode": "button"`可以切换编辑器的展示模式为按钮模式。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"debug": true,
|
||
"body": [
|
||
{
|
||
"type": "input-formula",
|
||
"name": "formula",
|
||
"label": "公式",
|
||
"variableMode": "tree",
|
||
"evalMode": true,
|
||
"value": "SUM(1 , 2)",
|
||
"inputMode": "button",
|
||
"variables": [
|
||
{
|
||
"label": "表单字段",
|
||
"children": [
|
||
{
|
||
"label": "文章名",
|
||
"value": "name",
|
||
"tag": "文本"
|
||
},
|
||
{
|
||
"label": "作者",
|
||
"value": "author",
|
||
"tag": "文本"
|
||
},
|
||
{
|
||
"label": "售价",
|
||
"value": "price",
|
||
"tag": "数字"
|
||
},
|
||
{
|
||
"label": "出版时间",
|
||
"value": "time",
|
||
"tag": "时间"
|
||
},
|
||
{
|
||
"label": "版本号",
|
||
"value": "version",
|
||
"tag": "数字"
|
||
},
|
||
{
|
||
"label": "出版社",
|
||
"value": "publisher",
|
||
"tag": "文本"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "流程字段",
|
||
"children": [
|
||
{
|
||
"label": "联系电话",
|
||
"value": "telphone"
|
||
},
|
||
{
|
||
"label": "地址",
|
||
"value": "addr"
|
||
}
|
||
]
|
||
}
|
||
],
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
设置`"inputMode": "input-group"`可以切换编辑器的展示模式为输入框组合模式，1.10.0 及以上版本。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"debug": true,
|
||
"body": [
|
||
{
|
||
"type": "input-formula",
|
||
"name": "formula",
|
||
"label": "公式",
|
||
"variableMode": "tree",
|
||
"evalMode": true,
|
||
"value": "SUM(1 , 2)",
|
||
"inputMode": "input-group",
|
||
"variables": [
|
||
{
|
||
"label": "表单字段",
|
||
"children": [
|
||
{
|
||
"label": "文章名",
|
||
"value": "name",
|
||
"tag": "文本"
|
||
},
|
||
{
|
||
"label": "作者",
|
||
"value": "author",
|
||
"tag": "文本"
|
||
},
|
||
{
|
||
"label": "售价",
|
||
"value": "price",
|
||
"tag": "数字"
|
||
},
|
||
{
|
||
"label": "出版时间",
|
||
"value": "time",
|
||
"tag": "时间"
|
||
},
|
||
{
|
||
"label": "版本号",
|
||
"value": "version",
|
||
"tag": "数字"
|
||
},
|
||
{
|
||
"label": "出版社",
|
||
"value": "publisher",
|
||
"tag": "文本"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "流程字段",
|
||
"children": [
|
||
{
|
||
"label": "联系电话",
|
||
"value": "telphone"
|
||
},
|
||
{
|
||
"label": "地址",
|
||
"value": "addr"
|
||
}
|
||
]
|
||
}
|
||
],
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 变量展示模式
|
||
|
||
设置不同`variableMode`字段切换变量展示模式，树形结构：
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"debug": true,
|
||
"body": [
|
||
{
|
||
"type": "input-formula",
|
||
"name": "formula",
|
||
"label": "公式",
|
||
"variableMode": "tree",
|
||
"evalMode": true,
|
||
"variables": [
|
||
{
|
||
"label": "表单字段",
|
||
"children": [
|
||
{
|
||
"label": "文章名",
|
||
"value": "name",
|
||
"tag": "文本"
|
||
},
|
||
{
|
||
"label": "作者",
|
||
"value": "author",
|
||
"tag": "文本"
|
||
},
|
||
{
|
||
"label": "售价",
|
||
"value": "price",
|
||
"tag": "数字"
|
||
},
|
||
{
|
||
"label": "出版时间",
|
||
"value": "time",
|
||
"tag": "时间"
|
||
},
|
||
{
|
||
"label": "版本号",
|
||
"value": "version",
|
||
"tag": "数字"
|
||
},
|
||
{
|
||
"label": "出版社",
|
||
"value": "publisher",
|
||
"tag": "文本"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "流程字段",
|
||
"children": [
|
||
{
|
||
"label": "联系电话",
|
||
"value": "telphone"
|
||
},
|
||
{
|
||
"label": "地址",
|
||
"value": "addr"
|
||
}
|
||
]
|
||
}
|
||
],
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
Tab 结构：
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"debug": true,
|
||
"body": [
|
||
{
|
||
"type": "input-formula",
|
||
"name": "formula",
|
||
"label": "公式",
|
||
"variableMode": "tabs",
|
||
"evalMode": false,
|
||
"variables": [
|
||
{
|
||
"label": "表单字段",
|
||
"children": [
|
||
{
|
||
"label": "文章名",
|
||
"value": "name",
|
||
"tag": "文本"
|
||
},
|
||
{
|
||
"label": "作者",
|
||
"value": "author",
|
||
"tag": "文本"
|
||
},
|
||
{
|
||
"label": "售价",
|
||
"value": "price",
|
||
"tag": "数字"
|
||
},
|
||
{
|
||
"label": "出版时间",
|
||
"value": "time",
|
||
"tag": "时间"
|
||
},
|
||
{
|
||
"label": "版本号",
|
||
"value": "version",
|
||
"tag": "数字"
|
||
},
|
||
{
|
||
"label": "出版社",
|
||
"value": "publisher",
|
||
"tag": "文本"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "流程字段",
|
||
"children": [
|
||
{
|
||
"label": "联系电话",
|
||
"value": "telphone"
|
||
},
|
||
{
|
||
"label": "地址",
|
||
"value": "addr"
|
||
}
|
||
]
|
||
}
|
||
],
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 模板模式
|
||
|
||
当配置 `evalMode` 为 false 时则为模板模式，意思是说默认不当做表达式，只有 `${`和`}`包裹的部分才是表达式。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"debug": true,
|
||
"body": [
|
||
{
|
||
"type": "input-formula",
|
||
"name": "formula",
|
||
"label": "公式",
|
||
"evalMode": false,
|
||
"value": "my name is \\${name}",
|
||
"variables": [
|
||
{
|
||
"label": "表单字段",
|
||
"children": [
|
||
{
|
||
"label": "文章名",
|
||
"value": "name",
|
||
"tag": "文本"
|
||
},
|
||
{
|
||
"label": "作者",
|
||
"value": "author",
|
||
"tag": "文本"
|
||
},
|
||
{
|
||
"label": "售价",
|
||
"value": "price",
|
||
"tag": "数字"
|
||
},
|
||
{
|
||
"label": "出版时间",
|
||
"value": "time",
|
||
"tag": "时间"
|
||
},
|
||
{
|
||
"label": "版本号",
|
||
"value": "version",
|
||
"tag": "数字"
|
||
},
|
||
{
|
||
"label": "出版社",
|
||
"value": "publisher",
|
||
"tag": "文本"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "流程字段",
|
||
"children": [
|
||
{
|
||
"label": "联系电话",
|
||
"value": "telphone"
|
||
},
|
||
{
|
||
"label": "地址",
|
||
"value": "addr"
|
||
}
|
||
]
|
||
}
|
||
],
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 混合模式
|
||
|
||
混合模式的意思是支持输入文本和输入公式两种格式的值，当输入公式时值会自动用 `${` 和 `}` 包裹，如果不是这种格式则认为是输入普通的字符串。通过 `mixedMode` 为 true 启用这种模式
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"debug": true,
|
||
"body": [
|
||
{
|
||
"type": "input-formula",
|
||
"name": "value",
|
||
"label": "混合模式",
|
||
"mixedMode": true,
|
||
"value": "\\${SUM(1, 2)}",
|
||
"variables": [
|
||
{
|
||
"label": "表单字段",
|
||
"children": [
|
||
{
|
||
"label": "文章名",
|
||
"value": "name",
|
||
"tag": "文本"
|
||
},
|
||
{
|
||
"label": "作者",
|
||
"value": "author",
|
||
"tag": "文本"
|
||
},
|
||
{
|
||
"label": "售价",
|
||
"value": "price",
|
||
"tag": "数字"
|
||
},
|
||
{
|
||
"label": "出版时间",
|
||
"value": "time",
|
||
"tag": "时间"
|
||
},
|
||
{
|
||
"label": "版本号",
|
||
"value": "version",
|
||
"tag": "数字"
|
||
},
|
||
{
|
||
"label": "出版社",
|
||
"value": "publisher",
|
||
"tag": "文本"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"label": "流程字段",
|
||
"children": [
|
||
{
|
||
"label": "联系电话",
|
||
"value": "telphone"
|
||
},
|
||
{
|
||
"label": "地址",
|
||
"value": "addr"
|
||
}
|
||
]
|
||
}
|
||
],
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 属性表
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
| ----------------- | ------------------------------------------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------ |
|
||
| title | `string` | `'公式编辑器'` | 弹框标题 |
|
||
| header | `string` | - | 编辑器 header 标题，如果不设置，默认使用表单项`label`字段 |
|
||
| evalMode | `boolean` | `true` | 表达式模式 或者 模板模式，模板模式则需要将表达式写在 `${` 和 `}` 中间。 |
|
||
| variables | `{label: string; value: string; children?: any[]; tag?: string}[]` | `[]` | 可用变量 |
|
||
| variableMode | `string` | `list` | 可配置成 `tabs` 或者 `tree` 默认为列表，支持分组。 |
|
||
| functions | `Object[]` | - | 可以不设置，默认就是 amis-formula 里面定义的函数，如果扩充了新的函数则需要指定 |
|
||
| inputMode | `'button' \| 'input-button' \| 'input-group'` | - | 控件的展示模式 |
|
||
| icon | `string` | - | 按钮图标，例如`fa fa-list` |
|
||
| btnLabel | `string` | `'公示编辑'` | 按钮文本，`inputMode`为`button`时生效 |
|
||
| level | `'info' \| 'success' \| 'warning' \| 'danger' \| 'link' \| 'primary' \| 'dark' \| 'light'` | `default` | 按钮样式 |
|
||
| allowInput | `boolean` | - | 输入框是否可输入 |
|
||
| btnSize | `'xs' \| 'sm' \| 'md' \| 'lg'` | - | 按钮大小 |
|
||
| borderMode | `'full' \| 'half' \| 'none'` | - | 输入框边框模式 |
|
||
| placeholder | `string` | `'暂无数据'` | 输入框占位符 |
|
||
| className | `string` | - | 控件外层 CSS 样式类名 |
|
||
| variableClassName | `string` | - | 变量面板 CSS 样式类名 |
|
||
| functionClassName | `string` | - | 函数面板 CSS 样式类名 |
|