Prefácio
Quando minha equipe estava desenvolvendo o módulo do sistema tributário, descobri que eles precisavam gastar 80% do seu tempo resolvendo problemas de cálculo, principalmente os cálculos na grade.
Escreva o código js front-end (porque a entrada do usuário na tabela afetará outras células, portanto, o novo valor após o cálculo precisa ser apresentado ao usuário imediatamente) Escreva o código back-end (porque as alterações do usuário nos dados da tabela afetarão outras tabelas, por isso é necessário atualizar os dados da tabela afetada quando o usuário clica em salvar) Implementar métodos de cálculo modificados, fazendo com que os desenvolvedores precisem modificar o códigoEntão investiguei as funções de outros módulos fiscais e descobri que o sistema tributário utiliza um grande número de controles de tabela, que envolvem mais ou menos problemas de cálculo. Os métodos de cálculo são todos codificados.
O cálculo, essa ação comum de codificação, lembra muito as fórmulas do Excel, sem falar que o próprio documento de requisitos é fornecido no formato Excel. Quando usamos o Excel, podemos definir fórmulas nas células. Ao alterar o valor da célula de origem, o Excel calculará automaticamente a fórmula da célula e atribuirá o valor do resultado à célula de destino. Então, podemos nos referir a este modelo? Os desenvolvedores não precisam mais escrever lógicas de cálculo complicadas e difíceis. Eles só precisam convertê-las em instruções em um determinado formato de acordo com as fórmulas fornecidas pela implementação e, em seguida, chamar um determinado mecanismo de cálculo para. enviar os resultados, apresentar os resultados ao usuário ou persisti-los no banco de dados? A resposta é sim, e o núcleo de tudo isso é o mecanismo de cálculo automático – AutoCalculate.
efeito
AutoCalculate é uma solução para cálculos de tabelas complexos, permitindo salvar centenas ou milhares de linhas de código lógico de cálculo. A partir de agora, escrever código é tão fácil quanto escrever fórmulas do Excel.
Escopo de aplicação
Recepção:
Adequado para operações complexas com fórmulas em todos os controles de tabela js, como tabelas ElementUI, controles EasyUI Grid, ParamQuery Grid, etc.
Nos bastidores:
Aplicável, requer motor V8
Uso da recepção
O AutoCalculate consiste em duas partes, ou seja, a fórmula e o mecanismo de cálculo. A fórmula é uma string escrita de acordo com uma sintaxe específica, como: [Month12,1]#3 = [Month11,1] * 10. O mecanismo de cálculo é o AutoCalculate. .js. Responsável pela análise de fórmulas. Vamos começar explicando como escrever fórmulas.
célula
Suponha que exista tal cenário, célula ① = célula ② + célula ③, a fórmula correspondente é:
[Mês1,1] = [Mês1,2] + [Mês1,3]
Vamos primeiro dar uma olhada no que [Month1,1] representa Primeiro, os colchetes [ ] representam uma célula, Mês1 é o nome da coluna correspondente a “Janeiro”, seguido por uma vírgula , e o 1 seguinte representa RowNo = 1. . E assim por diante,
[Month1,2] representa a célula cuja coluna é "Janeiro" e RowNo = 2
[Month1,3] representa a célula cuja coluna é "Janeiro" e RowNo = 3
Portanto, podemos usar [y,x] para representar uma célula, y é o nome da coluna, também chamado de ordenada, x é o valor de RowNo, também chamado de abscissa
E se a tabela não tiver coluna RowNo? Se você quiser encontrar a resposta, continue lendo
Deixe a fórmula entrar em vigor
//Primeiro apresente AutoCalculate.js importar AutoCalculate de '../components/AutoCalculate'; ... //Define uma instância de AutoCalculate, formulas é o array de fórmulas let autoCal = new AutoCalculate(formulas); /* Chama o método cal * gridDatas (obrigatório): dados da tabela * refField (obrigatório): campo de referência, ou seja, cujo valor do campo é x na célula [y,x] */ autoCal.cal(gridDatas, refField);
fórmula de área
Na verdade, além de janeiro, fevereiro, março... existe também uma fórmula semelhante para outubro, a saber:
[Mês1,1] = [Mês1,2] + [Mês1,3] [Mês2,1] = [Mês2,2] + [Mês2,3] [Mês3,1] = [Mês3,2] + [Mês3,3] … … … [Mês10,1] = [Mês10,2] + [Mês10,3]
Em outras palavras, precisamos escrever 10 dessas fórmulas. Para cenários simples, isso não é um problema. No entanto, para algumas tabelas que contêm um grande número de fórmulas, esse método de escrita tem algumas desvantagens, como é fácil cometer erros. e a fórmula é longa. Também leva mais tempo para terminar de escrever. Portanto, existe a fórmula da área.
Observando as fórmulas acima, podemos descobrir que cada fórmula pode realmente ser substituída por uma fórmula, como a seguinte:
[@,1] = [@,2] + [@,3]
Não há um nome de coluna claro aqui, apenas um espaço reservado @ é usado, mas é suficiente para representar as 10 fórmulas acima. Neste momento, só precisamos preencher os nomes das colunas nas posições apropriadas, então a fórmula final é:
{Mês1, Mês2, Mês3, Mês4, Mês5, Mês6, Mês7, Mês8, Mês9, Mês10}[@,1] = [@,2] + [@,3] Você precisa separar os nomes das colunas com , colocá-los entre chaves { } , para que 1 fórmula seja equivalente a 10 fórmulas.
Os espaços reservados podem ser usados não apenas para as ordenadas, mas também para as abcissas, conforme mostrado na fórmula a seguir:
//Fórmula 1: [AnoTotal,3] = [Mês1,3] + [Mês2,3] + [Mês3,3] + [Mês4,3] + [Mês5,3] + [Mês6,3] + [Mês7,3] + [Mês8 ,3] + [Mês9,3] + [Mês10,3] //Fórmula 2: [AnoTotal,4] = [Mês1,4] + [Mês2,4] + [Mês3,4] + [Mês4,4] + [Mês5,4] + [Mês6,4] + [Mês7,4] + [Mês8 ,4] + [Mês9,4] + [Mês10,4] //Fórmula 3: [AnoTotal,5] = [Mês1,5] + [Mês2,5] + [Mês3,5] + [Mês4,5] + [Mês5,5] + [Mês6,5] + [Mês7,5] + [Mês8 ,5] + [Mês9,5] + [Mês10,5] //Fórmula 4: [AnoTotal,6] = [Mês1,6] + [Mês2,6] + [Mês3,6] + [Mês4,6] + [Mês5,6] + [Mês6,6] + [Mês7,6] + [Mês8 ,6] + [Mês9,6] + [Mês10,6] //Fórmula 5: [AnoTotal,2] = [Mês1,2] + [Mês2,2] + [Mês3,2] + [Mês4,2] + [Mês5,2] + [Mês6,2] + [Mês7,2] + [Mês8 ,2] + [Mês9,2] + [Mês10,2] //Fórmula 6: [AnoTotal,7] = [Mês1,7] + [Mês2,7] + [Mês3,7] + [Mês4,7] + [Mês5,7] + [Mês6,7] + [Mês7,7] + [Mês8 ,7] + [Mês9,7] + [Mês10,7] //Fórmula 7: [AnoTotal,9] = [Mês1,9] + [Mês2,9] + [Mês3,9] + [Mês4,9] + [Mês5,9] + [Mês6,9] + [Mês7,9] + [Mês8 ,9] + [Mês9,9] + [Mês10,9] //Fórmula 8: [AnoTotal,12] = [Mês1,12] + [Mês2,12] + [Mês3,12] + [Mês4,12] + [Mês5,12] + [Mês6,12] + [Mês7,12] + [Mês8 ,12] + [Mês9,12] + [Mês10,12] //Fórmula 9: [AnoTotal,13] = [Mês1,13] + [Mês2,13] + [Mês3,13] + [Mês4,13] + [Mês5,13] + [Mês6,13] + [Mês7,13] + [Mês8 ,13] + [Mês9,13] + [Mês10,13]
Usando a fórmula da área, isso pode ser escrito como:
{2, 3, 4, 5, 6, 7, 9, 12, 13}[YearTotal,@] = [Mês1,@] + [Mês2,@] + [Mês3,@] + [Mês4,@] + [ Mês5,@] + [Mês6,@] + [Mês7,@] + [Mês8,@] + [Mês9,@] + [Mês10,@]Percebe-se que a fórmula de área traz grande comodidade para a escrita de fórmulas.
Suporte à sintaxe js
Em cenários reais, frequentemente encontramos algumas fórmulas complexas, conforme mostrado abaixo. A fórmula da célula usa a função Max que vem com o Excel. Para tal fórmula, podemos escrevê-la assim:
[Mês1,9] = ([Mês1,6] - [Mês1,7] - [Mês1,8] > 0? [Mês1,6] - [Mês1,7] - [Mês1,8]: 0) + [Mês1 ,5]
Como você pode ver, a fórmula suporta sintaxe js. Você pode colocar uma variável js ou até mesmo uma função js no lado direito do sinal de igual da fórmula, desde que seja uma sintaxe reconhecida pelo mecanismo de análise js, ela é suportada. .
Uma coisa a notar aqui é que você não pode colocar elementos de array em fórmulas, porque os elementos de array js geralmente têm símbolos "[]", o que entra em conflito com o indicador de célula "[]" em fórmulas, portanto, elementos de array são proibidos, esteja ciente de esse.
[y]Fórmula
A seguir, vamos dar uma olhada em outro cenário, conforme mostrado na figura, onde existe tal relação:
Célula ① = Célula ② - Célula ③
Você pode escrever rapidamente a seguinte fórmula:
[coluna3,1] = [coluna2,1] - [coluna1,1] [coluna3,2] = [coluna2,2] - [coluna1,2]
Não há nada de errado em escrever desta forma, mas devo lembrar que as linhas aqui não são fixas. Ou seja, o número de linhas na tabela depende inteiramente da situação do banco de dados naquele momento. há apenas 3 linhas de dados hoje, 5 linhas amanhã e depois de amanhã haverá 50 linhas. É impossível adicionarmos fórmulas à medida que o número de linhas aumenta, portanto, para esse tipo de tabela com um número incerto de linhas, temos uma nova forma de escrever, chamo-a de fórmula [y], porque comparada com fórmulas comuns. , não tem coordenada horizontal:
[coluna3] = [coluna2] - [coluna1]
Com apenas uma linha de fórmulas, o AutoCalculate aplicará a fórmula a todas as linhas sob o nome da coluna especificada.
Total de colunas e casas decimais
Às vezes, precisamos encontrar a soma de uma determinada coluna. Embora encontrar a soma de uma determinada coluna possa não ser nosso objetivo final, é uma etapa necessária para concluirmos o cálculo. Por exemplo, existe o seguinte relacionamento:
Célula ③ = Célula ① / Célula ②
A célula ② é o valor total GroupApprovedTotal , que usamos <列名> para representar, ou seja: <GroupApprovedTotal> . Além disso, as linhas aqui não são fixas e a fórmula [y] precisa ser usada, portanto a fórmula deve ser escrita como:
[GroupApprovedTotalPercent] = [GroupApprovedTotal] / <GroupApprovedTotal>
Sabemos que na divisão o divisor não pode ser 0, então a forma correta de escrevê-lo deveria ser:
[GroupApprovedTotalPercent] = <GroupApprovedTotal> === 0 ? 0 : [GroupApprovedTotal] / <GroupApprovedTotal>
Ao colocar esta fórmula em seu código e iniciar o programa, você deve ser inteligente e descobrir rapidamente que o valor obtido não é preciso o suficiente. Por exemplo, o valor exibido na célula ③ acima é 66,91%. ② tem o mesmo valor da imagem acima. Sua célula ③ é provavelmente 67%.
Por padrão, o AutoCalculate manterá o resultado do cálculo com 2 casas decimais, 67%, que é 0,67. Se você deseja obter 66,91%, que é 0,6691, é necessário manter 4 casas decimais. que você precisa manter 4 casas decimais. Portanto, a escrita completa deve ser:
[GroupApprovedTotalPercent]#4 = <GroupApprovedTotal> === 0 ? 0 : [GroupApprovedTotal] / <GroupApprovedTotal>
À esquerda do sinal de igual na fórmula e à direita da célula atribuída, adicione um sinal “#”, seguido do número de casas decimais. Observe que não pode haver espaço entre o “#” e o número de casas decimais. casas decimais, podendo haver espaços antes e depois.
Tabela sem RowNo
Finalmente chegou a hora de responder a esta pergunta. Quero perguntar a todos: como encontramos um ponto em um avião? A resposta é que precisamos da abcissa e da ordenada deste ponto. Da mesma forma, como determinar uma célula numa tabela? Primeiro podemos determinar a ordenada porque todos os nomes das colunas são conhecidos. A chave está na determinação da abcissa. Se você usar RowNo para posicionamento, com certeza se sentirá familiarizado, pois é muito semelhante ao número de série do lado esquerdo do Excel, mas isso não significa que apenas números podem ser usados como abcissas. Desde que o valor seja único, ou seja, não repetido, pode ser utilizado como abcissa.
Por exemplo, supondo que a tabela a seguir tenha duas linhas fixas e nenhum RowNo, mas pode-se observar que o número da empresa (BuCode) é único, então BuCode pode ser usado como campo de referência, e o valor de BuCode é a abcissa, então a fórmula pode ser escrita como:
[SumDiffMonth1,F1136] = [GroupApprovalMonth1,F1136] - [Mês1,F1136] [SumDiffMonth1,F2056] = [GroupApprovalMonth1,F2056] - [Mês1,F2056]
Se houver RowNo, use RowNo como campo de referência e escreva assim:
[SumDiffMonth1,2] = [GroupApprovalMonth1,2] - [Mês1,2] [SumDiffMonth1,3] = [GroupApprovalMonth1,3] - [Mês1,3]
Calcule entre fontes de dados
O que é computação entre fontes de dados? Amigos que usaram fórmulas do Excel devem ser capazes de entender o que representa a fórmula na célula abaixo. Obviamente, o valor desta célula é o valor calculado de outros dados da planilha. O cálculo de fontes de dados cruzados foi projetado especificamente para lidar com tais cenários.
Raramente ou nunca fazemos cálculos entre fontes de dados em primeiro plano. Aqui, quero dizer como escrever fórmulas e chamar o AutoCalculate para que você possa realmente usá-lo no capítulo "Uso de back-end".
Primeiro, para obter dados de outras células de fonte de dados, precisamos expandir as células. Antes, nossas células eram assim: [y,x]. Vamos chamá-las de células binárias por enquanto. y], torna-se uma única célula. Agora, você verá uma única célula como esta. Célula: [Fonte de dados externa, y, Encontre os dados desejados.
Esta é uma fórmula que usa células de três elementos:
[Mês1,4] = [Imposto de Saída,Mês1,7]
Entre eles, OutputTax é o nome de uma determinada fonte de dados. Você pode nomeá-la arbitrariamente. Quanto mais conciso, melhor, caso contrário, fórmulas complexas serão escritas por muito tempo e difíceis de ler.
A fórmula a seguir pegará valores de duas fontes de dados, OutputTax e TaxRate:
[Mês1,5] = [Imposto de Saída,Mês1,10] * (1 + [Taxa de Imposto,Mês1,1]/100)
Acredito que ao ler o conteúdo dos capítulos anteriores, você já pode entender o significado das fórmulas a seguir. As três primeiras linhas de fórmulas usam fontes de dados externas e são combinadas com o método de escrita de fórmulas regionais.
É hora de chamar nosso método de cálculo. Para demonstrar o efeito, adicionei um botão e escrevi o método no evento do botão.
Veja o que fizemos:
① Obtenha outputTaxDatas de uma fonte de dados externa
② Obtenha a fonte de dados payableTaxDatas da tabela atual
③ Obtenha outra fonte de dados externa taxRateDatas do banco de dados
④ Aqui está o ponto principal. Vamos dar uma olhada no construtor do AutoCalculate. Existem dois parâmetros:
fórmulas: fórmula, uma matriz
opções: parâmetro opcional, um objeto objeto
Options possui um atributo externalDatas, que representa uma fonte de dados externa. É um array, pois pode haver vários dados.
nome: o nome da fonte de dados externa. O nome escolhido aqui corresponde ao nome da fonte de dados externa na fórmula.
refField: campo de referência
dados: fonte de dados
Após instanciar o AutoCalculate, um novo método calcular é chamado aqui, que possui 2 parâmetros:
gridDatas: os dados da tabela que precisam ser recalculados, que é um array
refField: campo de referência
AutoCalculate suporta todos os controles de tabela js e pode ser chamado em segundo plano com a ajuda deste método, porque não importa que tipo de controle de tabela js seja, ele pode extrair dados da tabela (dados puros). um array. Contanto que isso seja apenas passado no array.
⑤ Depois de chamar calcule, o valor de payableTaxDatas já é o último valor calculado. Agora basta vinculá-lo à tabela atual.
A interface após executar o programa:
Depois de clicar para obter dados:
Uso de back-end
Para chamar o AutoCalculate em segundo plano, precisamos usar o mecanismo V8. Outro ponto importante é que também são necessárias fórmulas para chamar o AutoCalculate em segundo plano. Nossa abordagem anterior era colocar todas as fórmulas no arquivo Extjs Controller, conforme mostrado abaixo:
Para facilitar as chamadas em segundo plano, extraímos a fórmula como um arquivo separado
A chamada em segundo plano AutoCalculate está encapsulada no projeto e é muito simples de usar.
O método de chamada é mostrado na figura:
Ou analise passo a passo:
① Salve os dados da tabela atual
② Obtenha o diretório do arquivo js onde a fórmula está localizada
③ Obtenha duas fontes de dados externas
④ Chame o método de fundo encapsulado, usando os dados obtidos nas etapas ② e ③, onde FormulaExpression é a expressão da fórmula, ou seja, use esta expressão para encontrar a fórmula no arquivo js que você forneceu
⑤ Os newDatas retornados na etapa anterior já são os dados mais recentes após o cálculo. Agora salve esses dados no banco de dados.
Coisas a serem observadas
Há dois pontos a serem observados ao escrever fórmulas:
Não são permitidos espaços nas células
/ Maneira correta de escrever: [Mês12,1] = [Mês11,1] * 10 //escrita errada: [Mês12,1] = [Mês11, 1] * 10
Não deve haver espaços antes da casa decimal e da casa decimal.
//Escrita correta: [Mês12,1] #3 = [Mês11,1] * 10 //escrita errada: [Mês12,1] # 3 = [Mês11,1] * 10
Isso conclui este artigo sobre como dizer adeus à codificação rígida e permitir que suas tabelas de front-end sejam calculadas automaticamente. Para obter mais informações sobre cálculos automáticos de tabelas de front-end, pesquise os artigos anteriores em downcodes.com ou continue navegando nos artigos relacionados abaixo. espero que você faça isso no futuro.