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 + 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” } ] } ], } ] }

  2. ## 展示模式
  4. 设置`"inputMode": "button"`可以切换编辑器的展示模式为按钮模式。
  6. ```schema: scope="body"
  7. {
  8.   "type": "form",
  9.   "debug": true,
  10.   "body": [
  11.     {
  12.       "type": "input-formula",
  13.       "name": "formula",
  14.       "label": "公式",
  15.       "variableMode": "tree",
  16.       "evalMode": false,
  17.       "value": "${SUM(1 + 2)}",
  18.       "inputMode": "button",
  19.       "variables": [
  20.         {
  21.           "label": "表单字段",
  22.           "children": [
  23.             {
  24.               "label": "文章名",
  25.               "value": "name",
  26.               "tag": "文本"
  27.             },
  28.             {
  29.               "label": "作者",
  30.               "value": "author",
  31.               "tag": "文本"
  32.             },
  33.             {
  34.               "label": "售价",
  35.               "value": "price",
  36.               "tag": "数字"
  37.             },
  38.             {
  39.               "label": "出版时间",
  40.               "value": "time",
  41.               "tag": "时间"
  42.             },
  43.             {
  44.               "label": "版本号",
  45.               "value": "version",
  46.               "tag": "数字"
  47.             },
  48.             {
  49.               "label": "出版社",
  50.               "value": "publisher",
  51.               "tag": "文本"
  52.             }
  53.           ]
  54.         },
  55.         {
  56.           "label": "流程字段",
  57.           "children": [
  58.             {
  59.               "label": "联系电话",
  60.               "value": "telphone"
  61.             },
  62.             {
  63.               "label": "地址",
  64.               "value": "addr"
  65.             }
  66.           ]
  67.         }
  68.       ],
  69.     }
  70.   ]
  71. }

设置"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” } ] } ], } ] }

  2. ## 变量展示模式
  4. 设置不同`variableMode`字段切换变量展示模式，树形结构：
  6. ```schema: scope="body"
  7. {
  8.   "type": "form",
  9.   "debug": true,
  10.   "body": [
  11.     {
  12.       "type": "input-formula",
  13.       "name": "formula",
  14.       "label": "公式",
  15.       "variableMode": "tree",
  16.       "evalMode": true,
  17.       "variables": [
  18.         {
  19.           "label": "表单字段",
  20.           "children": [
  21.             {
  22.               "label": "文章名",
  23.               "value": "name",
  24.               "tag": "文本"
  25.             },
  26.             {
  27.               "label": "作者",
  28.               "value": "author",
  29.               "tag": "文本"
  30.             },
  31.             {
  32.               "label": "售价",
  33.               "value": "price",
  34.               "tag": "数字"
  35.             },
  36.             {
  37.               "label": "出版时间",
  38.               "value": "time",
  39.               "tag": "时间"
  40.             },
  41.             {
  42.               "label": "版本号",
  43.               "value": "version",
  44.               "tag": "数字"
  45.             },
  46.             {
  47.               "label": "出版社",
  48.               "value": "publisher",
  49.               "tag": "文本"
  50.             }
  51.           ]
  52.         },
  53.         {
  54.           "label": "流程字段",
  55.           "children": [
  56.             {
  57.               "label": "联系电话",
  58.               "value": "telphone"
  59.             },
  60.             {
  61.               "label": "地址",
  62.               "value": "addr"
  63.             }
  64.           ]
  65.         }
  66.       ],
  67.     }
  68.   ]
  69. }

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” } ] } ], } ] }

  2. ## 高亮文本
  4. 通过配置`allowInput`为`false`可以高亮文本内容，但是只能在编辑器中编辑
  6. ```schema: scope="body"
  7. {
  8.   "type": "form",
  9.   "debug": true,
  10.   "body": [
  11.     {
  12.       "type": "input-formula",
  13.       "name": "formula",
  14.       "allowInput": false,
  15.       "label": "公式",
  16.       "evalMode": true,
  17.       "value": "SUM(1 + 2)",
  18.       "variables": [
  19.         {
  20.           "label": "表单字段",
  21.           "children": [
  22.             {
  23.               "label": "文章名",
  24.               "value": "name",
  25.               "tag": "文本"
  26.             },
  27.             {
  28.               "label": "作者",
  29.               "value": "author",
  30.               "tag": "文本"
  31.             },
  32.             {
  33.               "label": "售价",
  34.               "value": "price",
  35.               "tag": "数字"
  36.             },
  37.             {
  38.               "label": "出版时间",
  39.               "value": "time",
  40.               "tag": "时间"
  41.             },
  42.             {
  43.               "label": "版本号",
  44.               "value": "version",
  45.               "tag": "数字"
  46.             },
  47.             {
  48.               "label": "出版社",
  49.               "value": "publisher",
  50.               "tag": "文本"
  51.             }
  52.           ]
  53.         },
  54.         {
  55.           "label": "流程字段",
  56.           "children": [
  57.             {
  58.               "label": "联系电话",
  59.               "value": "telphone"
  60.             },
  61.             {
  62.               "label": "地址",
  63.               "value": "addr"
  64.             }
  65.           ]
  66.         }
  67.       ],
  68.     }
  69.   ]
  70. }

属性表

属性名 类型 默认值 说明
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 样式类名