# vue-formula-editor
**Repository Path**: gcpaas/vue-formula-editor
## Basic Information
- **Project Name**: vue-formula-editor
- **Description**: 低代码函数编辑器、支持300+种Excel函数、支持自定义表单字段、变量、自定义函数，用于低代码、零代码、高代码开发场景，可自定义groovy、java、python语言运行解析
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-07-02
- **Last Updated**: 2025-08-10
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# vue-formula-editor
本组件基于 https://github.com/xy-zipper/vue-formula-editor 进行修改，优化了如下内容：
* 添加字段/变量名称、字段/变量值分别高亮显示
* 参考腾讯文档Excel函数，调整组件中函数的注册逻辑
* 去除实时编译、执行逻辑，将编译、执行逻辑移到外部，由使用方决定是否调用
* 去除了组件化打包，直接将代码复制到工程即可
* 支持 300个函数，可以参考案例自行汉化函数，https://formulajs.info/functions/
基于vue-codemirror与formulajs低代码公式编辑器，支持动态计算
> ⚠️ 注意：目前仅支持 Vue2
## 启动
参考 example/README.md 启动项目
## 组件使用
将 example/src/vue-formula-editor 目录复制到已有项目集中， 参考 example/src/App.vue 中使用
```vue
```
**参数说明**
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------------|---------|----|-----| ------ |
| formulaTypeList | 函数类型列表 | 数组 | 必填 | - |
| formulaConf | 编辑器数据 | 对象 | 必填 | - |
| fieldList | 字段/变量列表 | 数组 | 必填 | - |
## 函数类型列表示例
```json
[
{
"name": "数学函数",
"code": "math",
"formulaList": [
{
"name": "ABS",
"desc": "返回数字的绝对值。一个数字的绝对值是该数字不带其符号的形式。",
"grammar": "ABS(数值)",
"example": "ABS(-4.18)",
"params": [
{
"name": "数值",
"required": true,
"desc": "需要计算其绝对值的实数。"
}
]
},
{
"name": "MAX",
"desc": "MAX(数值1,[数值2,...])",
"grammar": "LEN(文本)",
"example": "MAX(68,80,70)",
"params": [
{
"name": "数值1",
"required": true,
"desc": "数值"
},
{
"name": "数值2",
"required": false,
"desc": "可从中查找最大值的1到255个数字。"
}
]
}
]
}
]
```
**参数说明**
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|----------------------|--------|--------|-----| ------ |
| name | 分类中文名称 | 字符串 | 必填 | - |
| code | 分类编码 | 字符串 | 必填 | - |
| formulaList | 函数列表 | 数组 | 必填 | - |
| - name | 英文名称 | 字符串 | 必填 | - |
| - desc | 中文描述 | 字符串 | 必填 | - |
| - grammar | 语法描述 | 字符串 | 必填 | - |
| - example | 函数示例 | 字符串 | 必填 | - |
| - params | 函数参数说明 | 数组 | 可选 | - |
| ---- params.name | 参数名称 | 字符串 | 必填 | - |
| ---- params.required | 参数必填 | 布尔 | 必填 | - |
| ---- params.desc | 参数描述 | 字符串 | 必填 | - |
## 字段/变量树示例
```json
[
{
"fieldName": "用户名",
"fieldType": "string",
"fieldCode": "name",
"fieldPath": "name",
"children": []
},
{
"fieldName": "年龄",
"fieldType": "number",
"fieldCode": "age",
"fieldPath": "age",
"children": []
},
{
"fieldName": "登录弹框",
"fieldType": "dialog",
"fieldCode": "xxx",
"fieldPath": "xxx",
"children": [{
"fieldName": "手机号",
"fieldType": "string",
"fieldCode": "phone",
"fieldPath": "form.phone",
"children": []
}]
}
]
```
**参数说明**
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- |------|--------|-----| ------ |
| fieldName | 字段/变量中文名称 | 字符串 | 必填 | - |
| fieldType | 字段/变量类型 | 字符串 | 必填 | - |
| fieldCode | 字段/变量编码 | 字符串 | 必填 | - |
| fieldPath | 字段/变量取值路径 | 字符串 | 必填 | - |
| children | 子节点 | Object | 可选 | - |
## 必须实现的方法
- 名称： **getFieldName**
- 描述：根据传入的 fieldPath 来获取字段/变量名称
```js
getFieldName(fieldPath){
return fieldPath
}
```
- 名称： **getFieldValue**
- 描述：根据传入的 fieldPath 来获取字段/变量值，其中 fieldPath 支持多级路径，如：`form.user.phone`
```js
getFieldValue(fieldPath){
// 不同的项目，这里取值的对象不一样，需要自定义实现
return this.formData[fieldPath]
}
```
## 获取编辑器数据
```js
const formulaEditorData = this.$refs.formulaEditor.getData()
```
**formulaEditorData 数据示例**
```json
{
"text": "return CONCATENATE(用户名,' = ',用户名)",
"marks": [
{
"from": {
"line": 0,
"ch": 19,
"sticky": null
},
"to": {
"line": 0,
"ch": 22,
"sticky": null
},
"fieldCode": "name",
"markType": "fieldName",
"fieldPath": "name"
},
{
"from": {
"line": 0,
"ch": 29,
"sticky": null
},
"to": {
"line": 0,
"ch": 32,
"sticky": null
},
"fieldCode": "name",
"markType": "fieldValue",
"fieldPath": "name"
}
]
}
```
**参数说明**
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----|----------------------------------------|-----|-----| ------ |
| text | 编辑器需要回显的数据 | 必填 | - |
| marks | 编辑器中高亮的标记块 | 数组 | 可选 | - |
| - from | 开始位置信息 | 对象 | 必填 | - |
| ---- line | 第几行开始，0表示第一行 | 数字 | 必填 | - |
| ---- ch | 第几列开始，0表示第一列 | 数字 | 必填 | - |
| - to | 结束位置信息 | 对象 | 必填 | - |
| ---- line | 第几行结束，0表示第一行 | 数字 | 必填 | - |
| ---- ch | 第几列结束，0表示第一列 | 数字 | 必填 | - |
| fieldCode | 字段/变量编码 | 字符串 | 必填 | - |
| markType | 字段/变量名、字段/变量值，可选值（fieldValue、fieldName） | 字符串 | 必填 | - |
| fieldPath | 字段/变量的路径 | 字符串 | 必填 | - |
## 执行函数
```js
import { compileScript } from './vue-formula-editor/core/compiler'
import functionCall from './vue-formula-editor/core/functionCall'
const formulaEditorData = this.$refs.formulaEditor.getData()
// 计算函数
let compileScriptStr = compileScript({
marks: this.formulaEditorData.marks,
text: this.formulaEditorData.text
})
// 执行函数并返回结果
let funResp = functionCall.execute(compileScriptStr, this)
```
## 更新日志
#### 2025-05-26
- 新增非函数代码支持，可以定义变量或自定义代码逻辑，如：let name = '张三'
- 新增多行代码变量替换
- 新增代码中必须写return语句
## 联系我们
群1 
|