@tntd/formula-edit

2.1.11 • Public • Published

@tntd/formula-edit

react计算公式编辑器

Usage

@tntd/formula-edit

安装

npm install --save-dev @tntd/formula-edit

使用

<FormulaEdit
    value='@hahahdsdhjbewdbu1#avg(,)andhhhhhhh' //传入组件自动转化成cnCode
    fieldList={testData} // @唤起
    regRxp="@[^\\+\\*\\/#%\\(\\),;\\!\\<\\>\\-=@]*" //中文转英文默认正则
    typeMap={{'OBJECT':{'displayName':'对象','color': 'blue'}}} // 下拉框 自定义展示类型和颜色
    methodList={methodList} // #唤起
    normalList={normalList} // 自定义无需校验关键词
    onChange={(enCode,data)=>{}} // 回调
    // defaultValue={defaultCode} // 初始化值 已去除该属性
    // readOnly={false} // 是否只读 默认false
    // lineNumber={true} // 是否显示列数 默认true
    // theme="night" // 主题 默认night
    // height={300} // 高度 默认300
/>

fieldList 输入@符号才能调起

fieldList: [
    { name: "放款金额", value: "fkje"},
    { name: "实际放款金额", value: "sjfkje"},
    { name: "借款人姓名", value: "jkrxm"},
    { name: "借款人手机号", value: "jkrsjh"},
    { name: "借款人身份证", value: "jkrsfz"},
],

methodList 输入#符号才能调起

methodList: [
    { name: "平均值", value: "平均值(,)", realValue: "avg" },
    { name: "最大值", value: "最大值(,)", realValue: "max" },
    { name: "最小值", value: "最小值(,)", realValue: "min" },
    { name: "求和", value: "求和(,)", realValue: "sum" }
],

normalList 自定义无需校验关键词

normalList: [
    { name: "且", value: "and" },
    { name: "或", value: "or" }
],

特殊数据场景 @STRINGαC_S_CARDNO

const typeKeyWords = ['αINT', 'αSTRING', 'αDOUBLE', 'αBOOLEAN', 'αDATETIME', 'αLONG', 'αENUM', 'αJSON'];

const enCodeToCnExtraLogic = (enCode) => {
    const regExp = new RegExp(`(${typeKeyWords.join('|')})`, 'g');
    const cnCode = enCode.replace(regExp, () => {
        return '';
    });
    return cnCode;
};

<FormulaEdit
    value='@hahahdsdhjbewdbu1#avg(,)andhhhhhhh' //传入组件自动转化成cnCode
    fieldList={testData} // @唤起
    regRxp="@[^\\+\\*\\/#%\\(\\),;\\!\\<\\>\\-=@]*" //中文转英文默认正则
    typeMap={{'OBJECT':{'displayName':'对象','color': 'blue'}}} // 下拉框 自定义展示类型和颜色
    methodList={methodList} // #唤起
    normalList={normalList} // 自定义无需校验关键词
    onChange={(enCode,data)=>{}} // 回调
    cnCodeToEnExtraLogic={(item) => {
        return `α${item.type}`;
    }}
    enCodeToCnExtraLogic={enCodeToCnExtraLogic}
/>

编辑器效果

Image text Image text

props参数:

参数 类型 默认值 是否必填 说明
defaultValue string 非必填 初始化赋值 2.0已废弃
value string 非必填 赋值 传入组件自动转化成cnCode
height number 300 非必填 高度设置
theme string night 非必填 主题: 目前只支持两种:day,night
readOnly boolean false 非必填 设置只读
lineNumber boolean false 非必填 设置行号
typeMap object 非必填 自定义变量类型和颜色
isEndMark boolean false 非必填 是否需要@结束符
fieldList array 非必填 字段列表
methodList array 非必填 方法列表
normalList array 非必填 自定义关键词列表
onChange function(enCode, obj) 非必填 enCode, obj(里面有cnCode)

支持ref对外暴露方法

方法 类型 说明
fullScreen() function 全屏
exitFullScreen() function 退出全屏
insertValue(value) function 光标处插入值

License

MIT

Package Sidebar

Install

npm i @tntd/formula-edit

Weekly Downloads

3

Version

2.1.11

License

MIT

Unpacked Size

31.5 kB

Total Files

3

Last publish

Collaborators

  • kobingogo
  • mcfly001
  • z337198954
  • td-tnt
  • bruceliu68
  • bernardzhang
  • mizy
  • zhouzefei
  • xiaofei.wang
  • anthonyli
  • popoqaq
  • ezios