导读
公式编辑器：公式编辑用于字段值来源于其他字段或是来源于函数计算结果都可由公式编辑来完成
公式编辑器主要需要解决三件事：
- 合适的
编辑器 - 强大的
函数库 - 合适的
事件监听
技术选型
- excel函数库
formulajs，这个函数库可以让JavaScript支持绝大部分的excel函数 - 框架
React、Vue都可进行开发，这里我采用Vue2进行快速开发 - 编辑器
codemirror,定制程度高支持代码高亮、文档描述清晰，适合的公式编辑器的技术选型，因为采用Vue所以最终使用的是vue-codemirror; 不过值得注意的是，由于Vue2与Vue3的区别，vue-codemirror最终使用的是4.0.6
效果展示
案例：计算结果由Form表单中的名称和描述组成
例如：名称=张三；描述=13岁，结果显示：张三 - 13岁
步骤1 —— 公式配置
步骤2 —— 数据监听 & 自动计算结果
组件开源
本次组件也开源到了Github于npm中，欢迎前往查看Star & 讨论
demo & 源码
安装
$ npm i vue-formula-editor -S
example地址
在线体验
使用方式
import { calculate, formulaWatcher, FormulaEditor } from 'vue-formula-editor'
主要导出三个对象
calculate计算结果函数formulaWatcher自动监听表单变化计算结果FormulaEditor组件
FormulaEditor组件 Props 参数说明
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| fieldList | 表单字段 | Array | 必填 | - |
| formulaList | 公式函数列表 | Array | 必填 | - |
| formulaConf | 公式编辑配置 / 回显值 | Object | 必填 | - |
fieldList 数据格式
[
{
fullName: '名称',
value: 'string',
enCode: 'name',
},
]
formulaList 数据格式
[
{
name: '常用函数',
enCode: 'frequentlyUse',
formula: [
{
name: 'SUM',
enCode: 'SUM',
tip: '求和',
example: 'SUM(数学成绩,语文成绩,英语成绩,...) = 各科总成绩',
usage: 'SUM(数值1,数值2,...)。',
},
],
},
]
formulaConf 数据格式
其中
marks为可选参数，因为不一定有变量参与计算
{
"text": "CONCATENATE(名称,描述)",
"marks": [{
"from": {
"line": 0,
"ch": 12
},
"to": {
"line": 0,
"ch": 14
},
"enCode": "name"
},
{
"from": {
"line": 0,
"ch": 15,
"sticky": null
},
"to": {
"line": 0,
"ch": 17,
"sticky": null
},
"enCode": "desc"
}
]
}
FormulaEditor组件 Methods 方法说明
| 方法名 | 说明 | 参数 |
|---|---|---|
| getData | 获取公式编辑配置 | 无 |
| reset | 重置公式编辑器 | 无 |
自动监听数据变化 - formulaWatcher
自动监听数据变化，并实时计算结果
formulaWatcher Params 参数说明
| 参数 | 说明 |
|---|---|
| vm | 当前 Vue 实例 |
| formData | 计算公式所需的数据； key：监听的名称、value：监听的表单数据 |
| formulaConf | 计算公式配置 |
| fn | 回调函数 |
使用示例
/**
* 动态监听并返回计算结果
* @param {VueContentInstance} vm 当前Vue实例
* @param {Object} formData 计算公式所需的数据
* @param {Object} formulaConf 计算公式配置
* @param {Function} fn 回调函数
* @returns {Function} 取消监听函数
*/
this.watchData = formulaWatcher(
this,
{ key: 'formData', value: this.formData },
this.formulaConf,
data => {
this.result = data
}
)
计算结果方法 - calculate
/**
* 计算公式结果
* @param {Object} formulaConf 计算公式配置
*/
this.result = calculate({
text: 'SUM(1,2,3,4,5,6,7,8,9,10)',
})
最终代码
jcode
