2.0.34 • Published 4 days ago

yyuap-formula v2.0.34

Weekly downloads
237
License
ISC
Repository
-
Last release
4 days ago

欢迎使用公式编辑器


1. 安装与导入

1. 安装

第二版公式 npm i -S yyuap-formula@2.0.34

第一版公式 npm i -S yyuap-formula@1.0.27

2. 导入

const Formula = React.lazy(() => import(/* formula */ 'yyuap-formula'));
// import Formula from 'yyuap-formula'
import 'yyuap-formula/dist/main.css'
import Formula from 'yyuap-formula/lib/main.js' // 非react环境
import 'yyuap-formula/lib/main.css'
import Formula from 'yyuap-formula/premises/main.js' // 专属化环境
import 'yyuap-formula/premises/main.css'
 // 第一版公式
<script src="https://cdn.yonyoucloud.com/SupportServices/formula/main.js"></script>
<link rel="stylesheet" href="https://cdn.yonyoucloud.com/SupportServices/formula/main.css" ></link>
 // 第二版公式
  <script src="https://cdn.yonyoucloud.com/SupportServices/formula2/main.js"></script>
<link rel="stylesheet" href="https://cdn.yonyoucloud.com/SupportServices/formula2/main.css" ></link>
// 使用
<script>
  Formula.renderFormula(option,dom); // Formula为全局对象 dom为制定dom节点
</script>

全局绑定对象Formula 内部能力对应为以下三个参数

  1. Formula.core -- 核心解析能力 见chapter3
  2. Formula.createFormula --- 公式函数式调起 见示例4
  3. Formula.renderFormula --- 公式非react或非es情况下 调用组件方式 见示例5(同时给出重绘方案)

3. 使用公式核心解析能力

import { core } from 'yyuap-formula'
// 功能1 接受 表达式串(组) 生成 包含 公式数据结构 
core.parse : formulaExpression => '公式数据结构'
// 功能2 异步请求 接受公式参数 与 表达式串(组) 生成 包含 公式、翻译公式、含数据的数据结构 的对象(对象数组))
core.ajaxToParse : (option:any,express:Array?<string>) => Array?<{formula,formuladisplay,formulaList}>
// 使用示例
async()=>{
  let result = await core.ajaxToParse({serviceName:'billcode-web'},['code3+123','#{123}$+#{"常量字符串"}$']);
  console.log(result)
}
//功能3 前端校验 参数为confirm、onChange参数中获得的 formulaList 或 对公式表达式做解析(功能1)
core.validate : formulaList => [] // 返回错误说明列表

//功能4 异步校验 参数为confirm、onChange参数中获得的 formulaList 与 expressList
core.validateAsync : (formulaList:any,expressList:any,option?:any) => [errFlag,info] // 返回错误说明列表
// 使用示例
async()=>{
  let ressult  = await validateAsync(formulaList,expressList,{serviceName:''})
}

//功能5 公式计算 参数1:confirm、onChange参数中获得的 formulaList 或 core.parse的返回值  参数2: paramList 见项目配置项
core.calculate  = calculate(formulaList,paramList)
/** 使用说明
 * 计算出错会抛出error 需要catch
 * 计算成功返回计算值(若带未知函数,则会包含未知函数)
 * */ 

4. 使用代码配置项目

必需(版本)配置说明类型默认
locale(新)语种信息string'zh_CN'('zh_CN','en_US','zh_TW')
serviceName(新)应用名(上线文路径,可带域名)string''
iMaxLength(新)确认时最大值控制numberundefined
disableDrag(新)禁用拖拽(防止拖拽事件冲突)booleanfalse
uiMode(新)是否以UI组件形式提供Booleanfalse
onChange(新)是UI组件实时数据变化(formulaExpression,formulaList,expressList) =>{}null
leftPannel左侧面板项boolean(false隐藏)或arraytrue
可自定义左侧面板项'math','string','time','system','aggregate','custom'数学、字符串、时间、系统、聚合、自定义函数[]不展示左侧面板
rightPannel右侧面板项boolean(false隐藏)true
自定义右侧面板项'context','meta','userVar','userConst'上下文、元数据、自定义变量、常量[]不展示右侧面板
disabled禁用booleanfalse
confirm确认回掉function(formula,formulaList,expressList)=>{}
formula公式表达式string''
formuladisplay公式显示式string''
autoCalc自动计算booleanfalse
15改contextData上下文变量(新增对树支持 节点需children属性 节点可增加disabld属性)array[]
22改paramList自定计算时变量值(需autoCalc) 支持提供前端函数object{变量code:变量value}
requestParams(新增)提供请求时参数object{ //{func?,meta?,userVar?, userConst?,context?}
onFocus\onBlur(新增)input框事件function(e)=>{}
onTextFocus\onTextBlur(新增)textarea框事件function(e)=>{}
22beforeVerify(新增)校验前调整参数(26加方法)function(url,params)=>({ url,params,method:'GET' })
24funcFilter(新增)前端函数过滤(字符串数组正则对象正则字符串)ArrayRegExpstring无默认值

必需(版本)配置说明类型默认可选值
2.0disableDrag禁用拖拽(防止拖拽事件冲突)booleantrue(默认禁止)true,false
2.0uiMode是否以UI组件形式提供(min提供较小的面板)Boolean/stringfalsefalse,true,"min"
2.2refEnv参照对应环境地址(不传感知url)string[]'test','daily','pre','product'
2.0contextData上下文变量Array[]
contextData说明1支持树结构节点需children属性 节点可增加disabld属性Array[]
contextData说明2支持参照上下文变量中增加refCode属性stringrefCode为参照refCode
contextData说明3支持枚举上下文变量中增加enumvalues属性Array[]
枚举属性说明支持数字与字符串enumvalues:{"id":1,"name":"数字"},{"id":"str","name":"字符串"}Array
contextData说明4元数据穿透上下文变量中增加metaUri属性string元数据对应的uri
元数据属性说明元数据级联上下文变量中增加metaCascade属性number01:开启元数据级联,0:关闭
元数据说明2元数据自定义处理上下文变量中增加handSelfItem属性boolean
2.3verifyBeforeConfirm保存前校验Booleanfalse(默认不校验)true,false
2.4leftDefaultOpenKey左侧默认展开string'math','string','time','system','aggregate','custom'
2.4rightDefaultOpenKey右侧侧默认展开string'context','meta','userVar','userConst'
2.4inputOpen点击input弹窗Booleanfalsetrue,false
2.4beforeOpenHook打开公式弹窗前hook函数Function()=>Boolean或Promise
2.7allowEmpty校验支持空值Booleanfalsetrue,false
2.25className等支持modal参数与class名anyany
2.27CompatibleMode是否做格式兼容booleanboolean
2.30customShowFn自定义变量显示值func ({name,code,parentCode,parentName})=>({flag,display})boolean
2.33extend自定义模块Object/Array{title:'t',component:add=>}
  • 上下文变量类型说明(1.0.8特性)(2.0.6支持ui元数据)
类型配置说明
变量{type:'variable',name: "编码",code: "code" ,paramType: "DOUBLE" }type 不传递默认变量
常量{type:'const',code: "code",name: "名字", value: 1}value为Number或String
函数(待定支持){ type:"func",functionName: "func", methodName: "func(1,2,3,,)" }支持参数传递
字符串{type:'string',code:"\"specific str\"" }传入时需用\对引号转义
保留字{type:'reserved',code:"true" }全量'true','false','undefined','null'
说明paramType取值为全量中的一个全量 INT, INTEGER, CHAR, VARCHAR,DOUBLE, FLOAT;
ui元数据(2.0.12更新){"mode":1,"domain"?:String,"billtypeid"?:String,"metaCascade"?:boolean,"data": Array/Object }mode需要设为1 domain设为对应领域 billtypeid为单据类型 metaCascade是否开启元数据级联(默认关闭) data为UI元数据 需要设置在context第一级
ui样板数据http://cdn.yonyoucloud.com/SupportServices/formula2/example.json数据cdn超链
  • confirm 以及 onChange 回掉参数调整(1.0.18) formulaExpression,formulaList,expressList
参数类型说明补充
formulaExpressionstring公式值常用 格式表达式
formulaListarray公式解析数据结构做前端解析与计算可用
expressListobject公式各类显示值校验与获取中文串 对象属性见示例iParams接口

5. 使用代码示例

interface iParams{ 
  formulaExpression:string, // 公式值 *
  formulaExpressionDisplay:string, // 公式编辑区手工输入值
  formulaExpressionShow:string, //  公式中文值 *
  paramType:Array<any>, // 参数类型数组
}
//1:常规公式
function FormulaWrap(props){
  const [formulaExpression,setFormulaExpression] = useState('')
  const [formulaExpressionDisplay,setFormulaExpressionDisplay] = useState('')
  return (
    <Formula
  	leftPannel={['math','string','custom']} // 自定义左侧面板 可不传
    rightPannel={['context','meta','userVar','userConst']} // 自定义右侧面板 可不传
	  requestParams={{func:{key1:'filterParam'},meta:{mkey:new Date.now()}}} //请求参数 可不传
    disabled // 是否禁用
    confirm={(formulaExpression:any,formulaList:any,expressList:iParams)=>{
      setFormulaExpression(formulaExpression);
      setFormulaExpressionDisplay(expressList.formulaExpressionShow);
      }
    }
    formula={formulaExpression || ''}
    formuladisplay = {formulaExpressionDisplay || ''}
    contextData={[{code:'case1',name:'c1测试',paramType:'VARCHAR'}]} // 上下文
    ></Formula>
  )
}
//1.2:常规公式 支持树、参照、枚举
function FormulaWrap(props){
  const [formulaExpression,setFormulaExpression] = useState('')
  const [formulaExpressionDisplay,setFormulaExpressionDisplay] = useState('')
  return (
    <Formula
    confirm={(formulaExpression:any,formulaList:any,expressList:iParams)=>{
      setFormulaExpression(formulaExpression);
      setFormulaExpressionDisplay(expressList.formulaExpressionShow);
      }
    }
    formula={formulaExpression || ''}
    formuladisplay = {formulaExpressionDisplay || ''}
    contextData={[
      {disabled:true,code:'ref1',name:'组织',paramType:'STRING',refCode:'ucf-org-center.bd_adminorgtreeviewref'},
      {code:'ref2',name:'库存',paramType:'STRING',refCode:'ustock.aa_warehouse'},
      {code:'enum1',name:'枚举',paramType:'STRING',enumvalues:[ {"id":1,"name":"数字1"},{"id":"end","name":"字符串1"}, ]},
      {code:'case1',name:'1树测试',paramType:'STRING',children:[{code:'case2',name:'1-1测试',paramType:'STRING',children:[{code:'case3',name:'1-1-1测试',paramType:'STRING'}]}
	  ]} // 上下文
    ></Formula>
  )
}
//2:公式UI组件形式
function FormulaWrap(props){
  const [formulaExpression,setFormulaExpression] = useState('')
  const [formulaExpressionDisplay,setFormulaExpressionDisplay] = useState('')
  return (
    <Formula
    uiMode
    onChange={(formulaExpression:any,formulaList:any,expressList:iParams)=>{
      callBackFn(formulaExpression); // formulaExpression当前解析公式
    }}
  	leftPannel={['math','string','custom']} // 自定义左侧面板 可不传
    rightPannel={['context','meta','userVar','userConst']}
	  requestParams={{func:{key1:'filterParam'},meta:{mkey:new Date.now()}}} //请求参数 可不传
    disabled // 是否禁用
    formula={formulaExpression || ''} // ui形式下作为初始值
    contextData={[{code:'case1',name:'c1测试',paramType:'VARCHAR'}]} // 上下文
    ></Formula>
  )
}
//3:自动计算公式
function FormulaWrap(props){
  const [case1,setCase1] = useState(2);
  const [formulaExpression,setFormulaExpression] = useState('')
  const [formulaExpressionDisplay,setFormulaExpressionDisplay] = useState('')
  return (
    <>
      <input value={case1} onChange={ e => setCase1(e.target.value) } />
      <Formula 
        autoCalc //基于paramList的前端自动计算
        formula={formulaExpression} 
        formuladisplay={formulaExpressionDisplay||''} 
        confirm={ (formulaExpression:any,formulaList:any,expressList:iParams,value:any) => {
          setFormulaExpression(formulaExpression);
          setFormulaExpressionDisplay(formulaExpressionDisplay);
        }} 
        contextData={[{code:'case1',name:'c1测试',paramType:'VARCHAR'},]}
        paramList = {{case1:case1,hehe:(a,b)=>a+2*b}}
      />
    </>
  )
}
//4:函数式调用(与input解绑 )
import { createFormula } from 'yyuap-formula'
function FormulaWithoutInput(props){ // option与1、2使用方法一致 将props转为对象即可
  const [formulaExpression,setFormulaExpression] = useState('')
  let option = {
    confirm:(formulaExpression:any,formulaList:any,expressList:iParams,)=>{
      setFormulaExpression(formulaExpression);
      setFormulaExpression(expressList.formulaExpressionShow);
      },
    formula:formulaExpression || '',
    formuladisplay:formulaExpression || '',
    contextData:[{code:'case1',name:'c1测试',paramType:'VARCHAR'}] // 上下文
  }
  return (
    <button onClick={()=>createFormula(option)}></button>
  )
}

//5:非react环境函数式调用()
// 1. es module
import { renderFormula } from 'yyuap-formula/lib/main.js'
import 'yyuap-formula/lib/main.css'
function FormulaWithoutInput(props){ // option与1、2使用方法一致 将props转为对象即可
  let dom  = document.getElementById('formuala-dom')
  renderFormula(option,dom);
}
// 2. script 引入 全局对象Formula
<script src="https://cdn.yonyoucloud.com/SupportServices/formula2/main.js"></script>
<link rel="stylesheet" href="https://cdn.yonyoucloud.com/SupportServices/formula2/main.css" ></link>
let dom  = document.getElementById('formuala-dom')
Formula.renderFormula(option,dom);
/**
 * 如何重绘
 * 1.移除在dom节点绑定组件: dom._reactRootContainer.unmount() 
 * 2.重新在dom节点绑定组件: Formula.renderFormula(option,dom)
*/

6. 版本说明

  • 1.0.0 公式计算前端发布,提供基础公式服务
  • 1.0.1 修改less-loader对产出css的解析错误,提供前端计算能力
  • 1.0.2 修改 无函数列表正则解析bug,无数据前端报错处理
  • 1.0.3 对全局点击事件的修改 左右面板控制项 serviceName选项 操作符面板样式
  • 1.0.4 修复部分已知错误 增加自定义常量 区分多项常量 面板自定义控制
  • 1.0.5 增加系统函数 解决rightPannel默认问题 解决umd打包this变量问题(issue) 解决sideEffects副作用
  • 1.0.6 提供函数调用方法(不绑定input) 提供请求参数 提供基础组件属性传入 引入本地字体文件
  • 1.0.7 解决参数未传导致的bug 调整操作符 完善输入部分历史记录 函数公式值取为method 提供函数参数带入 提供输入框事件 增加变量过滤
  • 1.0.8 增加属性对树格式数据的支持 兼容多属性类型
  • 1.0.9 公式解析算法调整 公式ui组件提供
  • 1.0.10 增加serviceName扩展能力 增加保留字 修复内部解析bug ui模式下样式修改
  • 1.0.11 修改ssr下window的问题
  • 1.0.12 分离公式算法 增加公式core对象(包含公式能力)
  • 1.0.13 限制解决Blur的触发时机 在uiMode下的请求能力支撑问题
  • 1.0.14 解决常量可能发生的显示bug
  • 1.0.15 属性列树节点控制能否编辑 增加多语 增加前端校验功能 增加吸附算法 解析算法调整拆分逻辑 增加非react环境下的引入
  • 1.0.16 对非react环境下 增加公式组件的渲染dom 矫正1.0.5文档部分内容
  • 1.0.17 解决&&等特殊字符正则bug
  • 1.0.18 统一调整回掉参数 修复多语全局变量bug 属性列多类型bug 异步校验
  • 1.0.19 示例下paramType调整 公式前端异步校验报错catch 修复focus下的公式修改逻辑
  • 1.0.20 兼容样式调整 确认前简单前端校验 增加disableDrag属性
  • 1.0.21 增加聚合函数 对未知函数参数调整控制 增加onChange异步回掉能力(解决拖拽报错问题) 输入框回显bug调整 提供非react引入下的重绘解决方法 光标定位问题 函数参数前端校验bug 函数携带参数bug修复
  • 1.0.22 修改前端计算 扩展对外界函数的支持 抽取前端计算能力 增加iMaxLength 增加校验前扩展属性
  • 1.0.23 前端过滤bug修复 初始化兼容营销云格式 函数参数校验
  • 1.0.24 增加对中文符号的校验 修复对E、PI函数的校验 增加前端函数过滤项 uiMode下的属性动态更新(需对象深拷贝)
  • 1.0.25 多数据量时滚动加载 支持树过滤 支持字符串内空格
  • 1.0.26 扩展自定义校验(支持get请求) 文字折行问题
  • 1.0.27 完善折行样式 支持中文括号 解决点击事件覆盖

  • 2.0.0 更新公式整体样式与交互 提供参照与枚举接入
  • 2.0.1 调整公式懒加载请求cdn地址bug 解决全局thie问题、服务端渲染 移除package.json的内部依赖包
  • 2.0.2 光标定位 cdn适配protocal 解决参照初始化问题 参照环境地址匹配
  • 2.0.3 属性支持元数据uri加载 支持保存前校验 uiMode下样式微调
  • 2.0.4 去除对外界元素click的阻塞 拉取数据重绘缺陷 调整元数据加载交互 扩展配置:1.左右面板默认展开2.点input展开3.弹窗前hook
  • 2.0.5 支持聚合函数内部子公式 函数错误信息展示
  • 2.0.6 增加对UI元数据的支持
  • 2.0.7 校验时支持空值校验 函数参数分隔时忽略字符串内分隔符
  • 2.0.8 扩展空值校验 集成基础组件样式 重制光标定位逻辑
  • 2.0.9 修复组件key变化时光标定位对象释放与重生成的冲突 不覆盖mdf框架全局变量
  • 2.0.10 解决光标失焦导致参照选择失效的问题
  • 2.0.11 优化函数定位正则(解除与常量冲突) 修复枚举重复问题 完善MDF框架全局变量覆盖问题 解除对中文括号的校验 扩展定位对象,控制文本修改定位
  • 2.0.12 增加对元数据领域的适配 去除MDF全局变量污染 增加对参照数据常量类型的判断
  • 2.0.13 增加元数据级联配置 调整折行样式 放开子实体限制 ui元数据下查询元数据
  • 2.0.14 输入框重绘控制 主子表选中逻辑与选用字段调整
  • 2.0.15 ui元数据下参照支持根据billtypeid过滤 聚合函数可添加函数(对字符串参数暂未支持)
  • 2.0.16 手工输入位置记忆 字符串优化:去除对常量函数等误检测,支持内嵌字符串(单引号·推荐、转义双引号·仅前端支持) ui元数据增加级联配置项(默认关闭)
  • 2.0.17 光标定位受原型链属性影响 增加ie11的polyfill并解决零宽断言不兼容问题
  • 2.0.18 调整ui元数据无主表信息时树的构建,同时增加对孙级的支持
  • 2.0.19 完善字符串检测正则 过滤非法函数 元数据添加交互调整、添加类型类型改为字符串
  • 2.0.20 补全多语资源 修改左右标题样式
  • 2.0.21 控制弹窗点击时blur事件的触发
  • 2.0.22 跨域请求携带cookie
  • 2.0.23 调整部分类名(新旧样式冲突) 放开函数参数控制 增加专属化包
  • 2.0.24 调整页面缩放对部分样式的影响
  • 2.0.25 增加modal参数与类名
  • 2.0.26 简单添加三目解析与左侧函数提示优化
  • 2.0.27 增加格式兼容配置项 CompatibleMode,不配置的话默认为false
  • 2.0.28 ui元数据 增加枚举值的处理 增加自定义项字段处理配置
  • 2.0.29 beforeOpenHook增加返回参数
  • 2.0.30 ie11添加兼容性 增加customShowFn(自定义显示值)属性
  • 2.0.31 解决参照兼容导致重复问题 调整枚举显示
  • 2.0.32 Icon替换 取消可能的bfc 搜索样式
  • 2.0.33 增加个性化板块
  • 2.0.34 样式调整、属性传递

7. 缺陷

  • 前端计算算法不够健壮,对边界测试与较复杂情况可能缺少支持
  • 自动计算暂未集成后端计算能力,待优化

8. 测试界面

9. 界面截图

  • 1.0版本 1.0版本
  • 2.0版本 2.0版本

End

2.0.33

10 days ago

2.0.34

4 days ago

2.0.32

1 month ago

3.0.0-beta.2

2 months ago

2.0.31

2 months ago

3.0.0-beta.1

3 months ago

2.0.30

3 months ago

3.0.0-beta.0

3 months ago

2.0.29

4 months ago

2.0.28

4 months ago

2.0.27

4 months ago

2.0.26

5 months ago

2.0.25

5 months ago

2.0.24

6 months ago

2.0.23

6 months ago

2.0.22

7 months ago

2.0.21

8 months ago

2.0.20

8 months ago

2.0.19

9 months ago

2.0.18

9 months ago

2.0.17

9 months ago

2.0.16

10 months ago

2.0.15

10 months ago

2.0.14

11 months ago

2.0.13

11 months ago

1.0.27

11 months ago

2.0.12

11 months ago

2.0.11

11 months ago

2.0.10

11 months ago

2.0.9

11 months ago

2.0.8

11 months ago

2.0.7

11 months ago

2.0.6

11 months ago

2.0.5

11 months ago

2.0.4

11 months ago

2.0.3

12 months ago

2.0.2

12 months ago

2.0.1

12 months ago

2.0.0

12 months ago

1.0.26

12 months ago

1.0.25

1 year ago

1.0.24

1 year ago

1.0.23

1 year ago

1.0.22

1 year ago

1.0.21

1 year ago

1.0.20

1 year ago

1.0.19

1 year ago

1.0.18

1 year ago

1.0.17

1 year ago

1.0.16

1 year ago

1.0.15

1 year ago

1.0.14

1 year ago

1.0.13

1 year ago

1.0.12

1 year ago

1.0.11

1 year ago

1.0.10

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

2 years ago