低代码平台工具 —— 公式编辑器

导读

公式编辑器：公式编辑用于字段值来源于其他字段或是来源于函数计算结果都可由公式编辑来完成

公式编辑器主要需要解决三件事：

• 合适的编辑器
• 强大的函数库
• 合适的事件监听

技术选型

• 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