道别硬编号给你的前端开发报表全自●▂●动测

2021-01-21 00:24 jianzhan

前言

当我们的精英团队开展税收系统软件控制模块开发设计的情况下,发了现她们必须花销80%的時间去处理测算难题,特别是在反映在报表(Grid)中的测算,这种時间花在:

  • 写前台接待js编码(由于客户在报表中的键入会危害别的模块格,因此必须及时将计算后的新值展现给客户看)
  • 写后台管理编码(由于客户对报表数据信息的变更会危害别的报表,因此要再用户点一下储存时升级受危害报表的数据信息)
  • 执行改动测算方式,造成开发设计者必须改动编码

因此我调查了税收别的控制模块的作用,发觉税收系统软件很多应用报表控制,而在其中多多少少都是涉及到到测算难题。而解决测算的方式,全是选用硬编号。

测算,这一见怪不怪的编号姿势,实际上非常容易令人想到到Excel中的公式计算,何况要求文本文档自身便是以Excel的方式出示的。当我们们在应用Excel的情况下,能够在模块格中设定公式计算,根据更改根源模块格的值,Excel将全自动测算模块格公式计算,将結果值授予总体目标模块格。那麼,大家是不是能够参照这类方式,开发设计者已不必须写繁杂晦涩难懂的测算逻辑性,只必须依据执行出示的公式计算,将他们转成某类文件格式的句子,再启用某类测算模块产出率結果,将結果展现给客户看或是长久化到数据信息库?回答是毫无疑问的,而这一切的关键便是全自动测算模块——AutoCalculate。

功效

AutoCalculate是报表繁杂计算的处理计划方案,可让你省掉不计其数行的测算逻辑性编码,此后敲代码如同写Excel公式计算一般简易。

可用范畴

前台接待:

可用于ElementUI报表、EasyUI Grid控制、ParamQuery Grid等全部js报表控制中含有公式计算的繁杂计算

后台管理:

可用,必须V8模块

前台接待使用方法

AutoCalculate由两台排序成,各自是公式计算和测算模块,公式计算是便是依据特殊英语的语法撰写的标识符串,如:[Month12,1]#3 = [Month11,1] * 10,测算模块就是AutoCalculate.js,承担分析公式计算。下列刚开始详细介绍怎样撰写公式计算。

模块格

假定有那样的情景,模块格①=模块格②+模块格③,相匹配的公式计算是:

[Month1,1] = [Month1,2] + [Month1,3]

先看来看[Month1,1]意味着甚么,最先,中括弧[ ]意味着一个模块格,Month1即“一月”相匹配的列名,随后是一个分号,,后边的1意味着RowNo = 1,为此类推,

[Month1,2]意味着列入“一月”且RowNo = 2的模块格

[Month1,3]意味着列入“一月”且RowNo = 3的模块格

因此大家能够用[y,x]来意味着一个模块格,y即列名,也称之为纵座标, x即RowNo的值,也称之为横座标

假如报表沒有RowNo列如何办?如想找寻回答,请再次向下阅读文章

让公式计算起效

//最先引进AutoCalculate.js
import AutoCalculate from '../components/AutoCalculate';
...

//界定一个AutoCalculate案例,formulas为公式计算数字能量数组
let autoCal = new AutoCalculate(formulas);

/* 启用cal方式
 * gridDatas(必填):报表数据信息
 * refField(必填):参照字段名,即模块格[y,x]中x是哪一个字段名的值
 */
autoCal.cal(gridDatas, refField);

地区公式计算

具体上,除开一月,二月,三月……十月也存有相近的公式计算,即:

[Month1,1] = [Month1,2] + [Month1,3]

[Month2,1] = [Month2,2] + [Month2,3]

[Month3,1] = [Month3,2] + [Month3,3]

……
……
……

[Month10,1] = [Month10,2] + [Month10,3]

换句话说大家必须写10条那样的公式计算,针对简易的情景来讲,我觉得是个问题,可是针对一些包括很多公式计算的报表,这类书写存有一些缺点,例如非常容易写错,也有,公式计算长的情况下也必须花销较多時间才可以写完。因此,便拥有地区公式计算。

观查上边的公式计算能够发觉,实际上每条公式计算都可以以用一条公式计算来替代,比如下列公式计算:

[@,1] = [@,2] + [@,3]

这儿沒有确立的列名,仅仅用了一个占位性病变符@,但它得以意味着之上10条公式计算。这一情况下,大家只必须在适度的部位补好列名便可以了,因此,最后的公式计算便是:

{Month1, Month2, Month3, Month4, Month5, Month6, Month7, Month8, Month9, Month10}[@,1] = [@,2] + [@,3]

你必须将列名用,分隔,并置放在大括弧{ }内,这般,1条公式计算便非常于10条公式计算。

占位性病变符不但仅能够用以纵座标,还能用于横座标,如下列公式计算:

//公式计算1:
[YearTotal,3] = [Month1,3] + [Month2,3] + [Month3,3] + [Month4,3] + [Month5,3] + [Month6,3] + [Month7,3] + [Month8,3] + [Month9,3] + [Month10,3]

//公式计算2:
[YearTotal,4] = [Month1,4] + [Month2,4] + [Month3,4] + [Month4,4] + [Month5,4] + [Month6,4] + [Month7,4] + [Month8,4] + [Month9,4] + [Month10,4]

//公式计算3:
[YearTotal,5] = [Month1,5] + [Month2,5] + [Month3,5] + [Month4,5] + [Month5,5] + [Month6,5] + [Month7,5] + [Month8,5] + [Month9,5] + [Month10,5]

//公式计算4:
[YearTotal,6] = [Month1,6] + [Month2,6] + [Month3,6] + [Month4,6] + [Month5,6] + [Month6,6] + [Month7,6] + [Month8,6] + [Month9,6] + [Month10,6]

//公式计算5:
[YearTotal,2] = [Month1,2] + [Month2,2] + [Month3,2] + [Month4,2] + [Month5,2] + [Month6,2] + [Month7,2] + [Month8,2] + [Month9,2] + [Month10,2]

//公式计算6:
[YearTotal,7] = [Month1,7] + [Month2,7] + [Month3,7] + [Month4,7] + [Month5,7] + [Month6,7] + [Month7,7] + [Month8,7] + [Month9,7] + [Month10,7]

//公式计算7:
[YearTotal,9] = [Month1,9] + [Month2,9] + [Month3,9] + [Month4,9] + [Month5,9] + [Month6,9] + [Month7,9] + [Month8,9] + [Month9,9] + [Month10,9]

//公式计算8:
[YearTotal,12] = [Month1,12] + [Month2,12] + [Month3,12] + [Month4,12] + [Month5,12] + [Month6,12] + [Month7,12] + [Month8,12] + [Month9,12] + [Month10,12]

//公式计算9:
[YearTotal,13] = [Month1,13] + [Month2,13] + [Month3,13] + [Month4,13] + [Month5,13] + [Month6,13] + [Month7,13] + [Month8,13] + [Month9,13] + [Month10,13]

应用地区公式计算,能够写出:

{2, 3, 4, 5, 6, 7, 9, 12, 13}[YearTotal,@] = [Month1,@] + [Month2,@] + [Month3,@] + [Month4,@] + [Month5,@] + [Month6,@] + [Month7,@] + [Month8,@] + [Month9,@] + [Month10,@]

从而由此可见,地区公式计算为公式计算的撰写产生了巨大的便捷。

适用js英语的语法

在具体情景中,大家常常会遇到一些繁杂的公式计算,以下图,模块格公式计算应用了Excel内置的Max涵数,针对那样的公式计算,大家能够那样写:

[Month1,9] = ([Month1,6] - [Month1,7] - [Month1,8] > 0 ? [Month1,6] - [Month1,7] - [Month1,8] : 0) + [Month1,5]

如你所闻,公式计算适用js英语的语法,你可以以在公式计算百分号右侧放进一个js自变量,乃至js涵数,要是是js分析模块了解的英语的语法,都被适用。

这儿有一个必须留意的地区,便是不能以将数字能量数组原素放进公式计算中,由于js的数字能量数组原素一般含有“[ ]”标记,这与公式计算之中的模块格表明符”[ ]”造成矛盾,因此数字能量数组原素被和谐止应用,请注意这一点。

[y]公式计算

接下去,带大伙儿看一看此外一种情景,如图所示,存有那样的关联:

模块格① = 模块格② - 模块格③

你可以能迅速就写成了下列公式计算:

[column3,1] = [column2,1] - [column1,1]
[column3,2] = [column2,2] - [column1,2]

那样写自身沒有错,可是我得提示你,这儿的行不是固定不动的,换句话说报表有是多少行彻底在于那时候的数据信息库状况,有将会今日仅有3行数据信息,明日会出现5行,后天会出现50行。大家不能能伴随着行数增加而提升公式计算,因此针对这类行数不确定性的报表,大家有一种新的书写,我将它称之为[y]公式计算,由于跟一般公式计算对比,它沒有横座标:

[column3] = [column2] - [column1]

只必须一行公式计算,AutoCalculate便会将公式计算运用于特定列户下的全部行。

累计列与小多位数

有时候候,大家必须求某一列的和,尽管求某一列的和将会并不是大家的最后目地,但确是大家进行测算的必需流程,如存有下列关联:

模块格③ = 模块格① / 模块格②

模块格②是GroupApprovedTotal列的累计值,大家用<列名>来表明,即:<GroupApprovedTotal>。再加这儿的行不固定不动,必须采用[y]公式计算,因此公式计算应当写出:

[GroupApprovedTotalPercent] = [GroupApprovedTotal] / <GroupApprovedTotal>

大家了解,在除法中,除数不是能够为0的,因此恰当的书写应当是:

[GroupApprovedTotalPercent] = <GroupApprovedTotal> === 0 ? 0 : [GroupApprovedTotal] / <GroupApprovedTotal>

如果你将这条公式计算放你的编码,并起动程序后,聪慧的你应当迅速发觉,你获得的值不足精准,如上边模块格③显示信息的标值是66.91%,假如你的模块格①和模块格②紧跟图的标值同样,你的模块格③极可能是67%,它是为何呢?

默认设置的,AutoCalculate会将测算結果保存2位小数,67%,即0.67,假如想要66.91%,即0.6691,那么就是必须保存4位小数,这时候,你必须告知AutoCalculate,你必须保存4位小数,因此,详细的书写应当是:

[GroupApprovedTotalPercent]#4 = <GroupApprovedTotal> === 0 ? 0 : [GroupApprovedTotal] / <GroupApprovedTotal>

在公式计算的百分号左侧,被取值模块格的右侧,加“#”号,紧随着写上小多位数,留意,“#”和小多位数中间不可以有时间格,前后左右能够有时间格。

沒有RowNo的报表

总算来到回应这一难题的情况下,我觉得问一问大伙儿,大家是怎样在一个平面图寻找一个点的?回答便是必须这一点的横座标和纵座标,一样的,在一个表格中,怎样寻找一个模块格?最先大家能够明确纵座标,由于全部的列名全是己知的,重要就取决于横座标确实定。选用RowNo而定位,大伙儿一定会感觉机缘巧合,由于它跟Excel左边的编号很像,但不意味着仅有数据才可以做为横座标。要是值具备唯一性,即不看重复,便可以做为横座标。

举个案子,假定下列的报表是固定不动二行,沒有RowNo,可是能看出企业序号(BuCode)具备唯一性,那麼BuCode便可以做为参照字段名,BuCode的值便是横座标,那麼公式计算便可以写出:

[SumDiffMonth1,F1136] = [GroupApprovalMonth1,F1136] - [Month1,F1136]
[SumDiffMonth1,F2056] = [GroupApprovalMonth1,F2056] - [Month1,F2056]

假如有RowNo,用RowNo做参照字段名时那样写:

[SumDiffMonth1,2] = [GroupApprovalMonth1,2] - [Month1,2]
[SumDiffMonth1,3] = [GroupApprovalMonth1,3] - [Month1,3]

跨数据信息源测算

什么是跨数据信息源测算?使用过Excel公式计算的朋友应当可以看懂下边这一模块格的公式计算意味着的含意。很显著这一模块格的值是别的Sheet的数据信息历经计算后的值,跨数据信息源测算便是专业解决那样的情景。

大家非常少乃至不容易在前台接待做跨数据信息源测算,这儿是想告知大伙儿怎样撰写公式计算及启用AutoCalculate的方式,便于在“后台管理使用方法”这一章节目录真实应用到它。

最先,以便获得别的数据信息源模块格的数据信息,大家必须扩展一提交订单元格,以前,大家的模块格是那样的:[y,x],姑且称之为二元模块格吧,也有那样的模块格:[y],变成一元模块格,如今,你能见到那样的模块格:[外界数据信息源,y,x],即三元模块格,三元模块格的出現令到AutoCalculate精准定位模块格的工作能力从二维扩展到三维,即无论给你是多少表,AutoCalculate都能寻找你需要的数据信息。

它是一条应用了三元模块格的公式计算:

[Month1,4] = [OutputTax,Month1,7] 

在其中OutputTax是某一数据信息源的名字,你可以以随意取名字,越简约就越好,不然繁杂的公式计算会被写的较长,无法阅读文章。

下边这条公式计算会从2个数据信息源OutputTax和TaxRate赋值:

[Month1,5] = [OutputTax,Month1,10] * (1 + [TaxRate,Month1,1] / 100)

相信根据阅读文章前边章节目录的內容,你早已可以看懂下边公式计算的含意,在其中前三行公式计算应用了外界数据信息源,并融合了地区公式计算的书写。

现在是时候启用大家的测算方式了,以便演试实际效果,我加上了一个按键,并将方式写在按键恶性事件中

看一下大家干了甚么:

① 获得某一外界数据信息源outputTaxDatas

② 获得当今报表的数据信息源payableTaxDatas

③ 从数据信息库获得另外一个外界数据信息源taxRateDatas

④ 这儿是关键,先看来看AutoCalculate 的结构涵数,这儿有2个主要参数:

formulas:公式计算,一数量组

options:可选择主要参数,一个object目标

options有一个特性externalDatas,表明外界数据信息源,是一数量组,由于数据信息将会有好几个,每一个数字能量数组原素全是一个目标,有3个特性:

name:外界数据信息源名字,这儿取甚么名字,相匹配公式计算中的外界数据信息源名字

refField:参照字段名

datas:数据信息源

案例化AutoCalculate后,这儿启用了一个新的方式calculate,它有两个主要参数:

gridDatas:必须再次测算的报表数据信息,是一数量组

refField:参照字段名

AutoCalculate之全部适用全部的js报表控制及其能被后台管理启用,便是依靠于这一方式,由于无论是哪样js报表控制,都可以获取出报表数据信息(纯数据信息),数据信息一般是数字能量数组方式,要是将这一数字能量数组传进去便可以了。

⑤ 启用calculate后,payableTaxDatas的值早已是计算过的全新值,如今将它关联到当今的报表就可以。

运作程序后的页面:

点一下获得数据信息后:

后台管理使用方法

后台管理启用AutoCalculate,大家必须采用V8模块,也有一点太重要,后台管理启用AutoCalculate也必须采用公式计算,大家以前的作法是将全部公式计算放到Extjs的Controller文档中,以下图:

以便便捷后台管理启用,大家将公式计算获取出去做为一个独立的文档

新项目中对AutoCalculate后台管理启用开展了封裝,应用十分简易。

启用方式如图所示:

還是逐层分析:

① 储存当今报表的数据信息

② 获得公式计算所属js文档的文件目录

③ 获得2个外界数据信息源

④ 启用封裝后的后台管理方式,应用了第②步和第③步获得的数据信息,在其中FormulaExpression是公式计算表述式,即根据这一表述是来寻找你出示的js文档中的公式计算

⑤ 上一步回到的newDatas早已是历经计算的全新数据信息,如今将这种数据信息储存到数据信息库

留意事宜

撰写公式计算时有二点必须留意:

模块格中不容许出現空格符

/恰当书写:
[Month12,1] = [Month11,1] * 10

//不正确书写:
[Month12,1 ] = [ Month11, 1] * 10

小多位数标识与小多位数以前不可以有时间格

//恰当书写:
[Month12,1] #3 = [Month11,1] * 10

//不正确书写:
[Month12,1] # 3 = [Month11,1] * 10

到此这篇有关道别硬编号给你的前端开发报表全自动测算的文章内容就详细介绍到这了,大量有关前端开发报表全自动测算內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!