Ucapkan selamat tinggal pada kode contoh hard-code yang memungkinkan tabel front-end Anda menghitung secara otomatis

Kata pengantar

Saat tim saya mengembangkan modul sistem perpajakan, saya menemukan bahwa mereka perlu menghabiskan 80% waktunya untuk menyelesaikan masalah penghitungan, terutama penghitungan di grid.

Jadi saya menyelidiki fungsi modul pajak lainnya dan menemukan bahwa sistem perpajakan menggunakan sejumlah besar tabel kontrol, yang kurang lebih melibatkan masalah perhitungan. Semua metode penghitungannya dikodekan secara keras.

Perhitungan, tindakan pengkodean yang umum ini, sebenarnya sangat mirip dengan rumus-rumus di Excel, apalagi dokumen persyaratannya sendiri disediakan dalam bentuk Excel. Saat kita menggunakan Excel, kita bisa mengatur rumus dalam sel. Dengan mengubah nilai sel sumber, Excel akan secara otomatis menghitung rumus sel dan menetapkan nilai hasilnya ke sel target. Jadi, bisakah kita mengacu pada model ini? Pengembang tidak perlu lagi menulis logika perhitungan yang rumit dan sulit, mereka hanya perlu mengubahnya menjadi pernyataan dalam format tertentu sesuai dengan rumus yang diberikan oleh implementasi, dan kemudian memanggil mesin perhitungan tertentu untuk melakukannya. keluarkan hasilnya. , sajikan hasilnya kepada pengguna atau simpan ke database? Jawabannya adalah ya, dan inti dari itu semua adalah mesin perhitungan otomatis-AutoCalculate.

memengaruhi

AutoCalculate adalah solusi untuk perhitungan tabel yang kompleks, memungkinkan Anda menyimpan ratusan atau ribuan baris kode logika perhitungan. Mulai sekarang, menulis kode semudah menulis rumus Excel.

Lingkup aplikasi

meja depan:

Cocok untuk operasi kompleks dengan rumus di semua kontrol tabel js seperti tabel ElementUI, kontrol Grid EasyUI, ParamQuery Grid, dll.

Di belakang panggung:

Berlaku, membutuhkan mesin V8

Penggunaan meja depan

AutoCalculate terdiri dari dua bagian yaitu rumus dan mesin perhitungan. Rumusnya berupa string yang dituliskan berdasarkan sintaks tertentu, misalnya: [Bulan12,1]#3 = [Bulan11,1] * 10. Mesin perhitungannya adalah AutoCalculate. .js. Bertanggung jawab untuk mengurai rumus. Mari kita mulai dengan cara menulis rumus.

sel

Misalkan ada skenario seperti itu, sel ① = sel ② + sel ③, rumus yang sesuai adalah:

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

Pertama, mari kita lihat apa yang diwakili oleh [Month1,1] . Pertama, tanda kurung siku [ ] mewakili sebuah sel, Bulan1 adalah nama kolom yang sesuai dengan “Januari”, diikuti dengan koma , , dan angka 1 berikutnya mewakili Nomor Baris = 1 .Dan seterusnya,

[Month1,2] mewakili sel yang kolomnya "Januari" dan Nomor Baris = 2

[Month1,3] mewakili sel yang kolomnya "Januari" dan Nomor Baris = 3

Jadi kita bisa menggunakan [y,x] untuk mewakili sebuah sel, y adalah nama kolom, disebut juga ordinat, x adalah nilai Nobar baris, disebut juga absis.

Bagaimana jika tabel tidak memiliki kolom RowNo? Jika Anda ingin menemukan jawabannya, silakan lanjutkan membaca

Biarkan rumusnya berlaku

//Pertama perkenalkan AutoCalculate.js
impor Hitung Otomatis dari '../components/AutoCalculate';
...

//Definisikan sebuah instance AutoCalculate, formula adalah array formula let autoCal = new AutoCalculate(formulas);

/* Panggil metode cal * gridDatas (wajib): data tabel * refField (wajib): bidang referensi, yaitu bidang yang bernilai x di sel [y,x] */
autoCal.cal(gridDatas, refField);

rumus luas

Sebenarnya selain bulan Januari, Februari, Maret… ada juga rumus serupa untuk bulan Oktober, yaitu:

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

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

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

…
…
…

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

Dengan kata lain, kita perlu menulis 10 rumus seperti itu. Untuk skenario sederhana, hal ini tidak menjadi masalah. Namun, untuk beberapa tabel yang berisi rumus dalam jumlah besar, cara penulisan ini memiliki beberapa kekurangan, seperti mudah membuat kesalahan, dan rumusnya juga panjang. Oleh karena itu, ada rumus luasnya.

Dengan memperhatikan rumus-rumus di atas, kita dapat mengetahui bahwa setiap rumus sebenarnya dapat digantikan dengan suatu rumus, seperti rumus berikut ini:

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

Tidak ada nama kolom yang jelas di sini, hanya digunakan placeholder @, tetapi cukup untuk mewakili 10 rumus di atas. Saat ini kita hanya perlu mengisi nama kolom pada posisi yang sesuai, sehingga rumus akhirnya adalah:

{Bulan1, Bulan2, Bulan3, Bulan4, Bulan5, Bulan6, Bulan7, Bulan8, Bulan9, Bulan10}[@,1] = [@,2] + [@,3]

Anda perlu memisahkan nama kolom dengan , dan menempatkannya di dalam tanda kurung kurawal { } , sehingga 1 rumus setara dengan 10 rumus.

Placeholder dapat digunakan tidak hanya untuk ordinat, tetapi juga untuk absis, seperti yang ditunjukkan pada rumus berikut:

//Rumus 1:
[Total Tahun,3] = [Bulan1,3] + [Bulan2,3] + [Bulan3,3] + [Bulan4,3] + [Bulan5,3] + [Bulan6,3] + [Bulan7,3] + [Bulan8 ,3] + [Bulan9,3] + [Bulan10,3]

//Rumus 2:
[Total Tahun,4] = [Bulan1,4] + [Bulan2,4] + [Bulan3,4] + [Bulan4,4] + [Bulan5,4] + [Bulan6,4] + [Bulan7,4] + [Bulan8 ,4] + [Bulan9,4] + [Bulan10,4]

//Rumus 3:
[Total Tahun,5] = [Bulan1,5] + [Bulan2,5] + [Bulan3,5] + [Bulan4,5] + [Bulan5,5] + [Bulan6,5] + [Bulan7,5] + [Bulan8 ,5] + [Bulan9,5] + [Bulan10,5]

//Rumus 4:
[Total Tahun,6] = [Bulan1,6] + [Bulan2,6] + [Bulan3,6] + [Bulan4,6] + [Bulan5,6] + [Bulan6,6] + [Bulan7,6] + [Bulan8 ,6] + [Bulan9,6] + [Bulan10,6]

//Rumus 5:
[Total Tahun,2] = [Bulan1,2] + [Bulan2,2] + [Bulan3,2] + [Bulan4,2] + [Bulan5,2] + [Bulan6,2] + [Bulan7,2] + [Bulan8 ,2] + [Bulan9,2] + [Bulan10,2]

//Rumus 6:
[Total Tahun,7] = [Bulan1,7] + [Bulan2,7] + [Bulan3,7] + [Bulan4,7] + [Bulan5,7] + [Bulan6,7] + [Bulan7,7] + [Bulan8 ,7] + [Bulan9,7] + [Bulan10,7]

//Rumus 7:
[Total Tahun,9] = [Bulan1,9] + [Bulan2,9] + [Bulan3,9] + [Bulan4,9] + [Bulan5,9] + [Bulan6,9] + [Bulan7,9] + [Bulan8 ,9] + [Bulan9,9] + [Bulan10,9]

//Rumus 8:
[Total Tahun,12] = [Bulan1,12] + [Bulan2,12] + [Bulan3,12] + [Bulan4,12] + [Bulan5,12] + [Bulan6,12] + [Bulan7,12] + [Bulan8 ,12] + [Bulan9,12] + [Bulan10,12]

//Rumus 9:
[Total Tahun,13] = [Bulan1,13] + [Bulan2,13] + [Bulan3,13] + [Bulan4,13] + [Bulan5,13] + [Bulan6,13] + [Bulan7,13] + [Bulan8 ,13] + [Bulan9,13] + [Bulan10,13]

Dengan menggunakan rumus luas, dapat dituliskan sebagai:

{2, 3, 4, 5, 6, 7, 9, 12, 13}[Total Tahun,@] = [Bulan1,@] + [Bulan2,@] + [Bulan3,@] + [Bulan4,@] + [ Bulan5,@] + [Bulan6,@] + [Bulan7,@] + [Bulan8,@] + [Bulan9,@] + [Bulan10,@]

Terlihat bahwa rumus luas memberikan kemudahan yang besar dalam penulisan rumus.

Mendukung sintaksis js

Dalam skenario sebenarnya, kita sering menjumpai beberapa rumus kompleks, seperti yang ditunjukkan di bawah ini. Rumus sel menggunakan fungsi Max yang disertakan dengan Excel, kita dapat menuliskannya seperti ini:

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

Seperti yang Anda lihat, rumusnya mendukung sintaksis js. Anda dapat meletakkan variabel js atau bahkan fungsi js di sisi kanan tanda sama dengan rumus, selama sintaks tersebut dikenali oleh mesin parsing js, maka rumus tersebut didukung .

Satu hal yang perlu diperhatikan di sini adalah Anda tidak dapat memasukkan elemen array ke dalam rumus, karena elemen array js biasanya memiliki simbol "[ ]", yang bertentangan dengan indikator sel "[ ]" dalam rumus, jadi elemen Array dilarang, harap diperhatikan ini.

[y]Rumus

Selanjutnya, mari kita lihat skenario lain, seperti yang ditunjukkan pada gambar, di mana terdapat hubungan seperti itu:

Sel ① = Sel ② - Sel ③

Anda mungkin dengan cepat menulis rumus berikut:

[kolom3,1] = [kolom2,1] - [kolom1,1]
[kolom3,2] = [kolom2,2] - [kolom1,2] 

Tidak ada salahnya menulis seperti ini, tapi saya harus mengingatkan Anda bahwa baris-baris di sini tidak tetap. Artinya, jumlah baris dalam tabel bergantung sepenuhnya pada situasi database saat itu hari ini hanya ada 3 baris data, besok 5 baris, dan lusa akan ada 50 baris. Tidak mungkin kita menambahkan rumus seiring bertambahnya jumlah baris, jadi untuk tabel seperti ini yang jumlah barisnya tidak pasti, kita punya cara penulisan baru, saya sebut rumus [y], karena dibandingkan dengan rumus biasa , ia tidak memiliki koordinat horizontal:

[kolom3] = [kolom2] - [kolom1]

Hanya dengan satu baris rumus, Hitung Otomatis akan menerapkan rumus tersebut ke semua baris di bawah nama kolom yang ditentukan.

Total kolom dan tempat desimal

Terkadang, kita perlu mencari jumlah kolom tertentu. Meskipun mencari jumlah kolom tertentu mungkin bukan tujuan akhir kita, ini merupakan langkah penting bagi kita untuk menyelesaikan penghitungan.

Sel ③ = Sel ① / Sel ②

Sel ② adalah nilai total kolom GroupApprovedTotal , yang kita gunakan untuk mewakili <列名> , yaitu: <GroupApprovedTotal> . Selain itu, baris-baris di sini tidak tetap dan perlu menggunakan rumus [y], sehingga rumusnya ditulis sebagai:

[GroupApprovedTotalPercent] = [GroupApprovedTotal] / <GroupApprovedTotal>

Kita tahu bahwa dalam pembagian, pembaginya tidak boleh 0, jadi cara penulisannya yang benar adalah:

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

Saat Anda memasukkan rumus ini ke dalam kode Anda dan memulai program, Anda harus cukup pintar untuk segera menemukan bahwa nilai yang Anda peroleh tidak cukup akurat. Misalnya, nilai yang ditampilkan di sel ③ di atas adalah 66,91%. Sel ② memiliki nilai yang sama dengan gambar di atas. Sel ③ Anda mungkin 67%.

Secara default, AutoCalculate akan menyimpan hasil perhitungan pada 2 tempat desimal, 67%, yaitu 0,67. Jika Anda ingin mendapatkan 66,91%, yaitu 0,6691, Anda perlu menyimpan 4 tempat desimal bahwa Anda perlu menyimpan 4 tempat desimal. Oleh karena itu, penulisan lengkapnya adalah:

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

Di sebelah kiri tanda sama dengan dalam rumus dan di sebelah kanan sel yang ditetapkan, tambahkan tanda "#", diikuti dengan jumlah tempat desimal. Perhatikan bahwa tidak boleh ada spasi antara "#" dan angka tempat desimal, dan boleh ada spasi sebelum dan sesudahnya.

Tabel tanpa BarisNo

Akhirnya tiba waktunya untuk menjawab pertanyaan ini. Saya ingin bertanya kepada semuanya, bagaimana cara kita menemukan titik di pesawat? Jawabannya adalah kita membutuhkan absis dan ordinat titik ini. Demikian pula bagaimana cara mencari sel dalam tabel? Pertama, kita bisa menentukan ordinatnya, karena semua nama kolom sudah diketahui. Kuncinya terletak pada penentuan absisnya. Jika menggunakan RowNo untuk positioning pasti akan terasa familiar, karena mirip sekali dengan nomor urut di sebelah kiri excel, namun bukan berarti hanya angka yang bisa dijadikan absis. Selama nilainya unik yaitu tidak berulang maka dapat dijadikan absis.

Misalnya, dengan asumsi tabel berikut memiliki dua baris tetap dan tidak ada RowNo, tetapi terlihat nomor perusahaan (BuCode) unik, maka BuCode dapat digunakan sebagai kolom referensi, dan nilai BuCode adalah absisnya, maka rumusnya dapat dituliskan sebagai:

[JumlahDiffMonth1,F1136] = [GroupApprovalMonth1,F1136] - [Bulan1,F1136]
[JumlahDiffMonth1,F2056] = [GroupApprovalMonth1,F2056] - [Bulan1,F2056]

Jika ada RowNo, gunakan RowNo sebagai kolom referensi dan tulis seperti ini:

[JumlahDiffMonth1,2] = [GroupApprovalMonth1,2] - [Bulan1,2]
[JumlahDiffMonth1,3] = [GroupApprovalMonth1,3] - [Bulan1,3]

Hitung seluruh sumber data

Apa itu komputasi sumber lintas data? Teman-teman yang pernah menggunakan rumus excel seharusnya sudah bisa memahami apa yang diwakili oleh rumus pada sel di bawah ini. Jelasnya, nilai sel ini adalah nilai terhitung dari data Sheet lainnya. Penghitungan lintas sumber data dirancang khusus untuk menangani skenario seperti itu.

Kami jarang atau bahkan tidak pernah melakukan perhitungan lintas sumber data di latar depan. Di sini saya ingin memberi tahu Anda cara menulis rumus dan memanggil AutoCalculate sehingga Anda benar-benar dapat menggunakannya di bab "Penggunaan Backend".

Pertama, untuk mendapatkan data dari sel sumber data lain, kita perlu memperluas selnya. Sebelumnya, sel kita terlihat seperti ini: [y,x]. Sebut saja sel biner untuk saat ini. y], menjadi satu sel seperti ini Sel: [Sumber Data Eksternal, y, Temukan data yang Anda inginkan.

Ini adalah rumus yang menggunakan sel tiga elemen:

[Bulan1,4] = [Pajak Keluaran,Bulan1,7]

Diantaranya, OutputTax adalah nama sumber data tertentu. Anda dapat memberi nama secara sembarangan, semakin baik, jika tidak, rumus yang rumit akan ditulis sangat panjang dan sulit dibaca.

Rumus berikut akan mengambil nilai dari dua sumber data, OutputTax dan TaxRate:

[Bulan1,5] = [Pajak Keluaran,Bulan1,10] * (1 + [TaxTax,Bulan1,1] / 100)

Saya yakin dengan membaca isi bab-bab sebelumnya, Anda sudah dapat memahami maksud dari rumus-rumus berikut ini. Tiga baris rumus pertama menggunakan sumber data eksternal dan dipadukan dengan cara penulisan rumus daerah.

Saatnya memanggil metode perhitungan kita. Untuk mendemonstrasikan efeknya, saya menambahkan sebuah tombol dan menulis metode tersebut di event tombol.

Lihat apa yang kami lakukan:

① Dapatkan outputTaxDatas dari sumber data eksternal

② Dapatkan sumber data payableTaxDatas dari tabel saat ini

③ Dapatkan sumber data eksternal lain taxRateDatas dari database

④ Inilah poin kuncinya. Mari kita lihat konstruktor AutoCalculate. Ada dua parameter:

rumus: rumus, array

pilihan: parameter opsional, objek objek

Opsi memiliki atribut externalDatas, yang mewakili sumber data eksternal. Ini adalah array, karena mungkin ada banyak data, dan setiap elemen array adalah objek dengan 3 atribut:

name: Nama sumber data eksternal. Nama yang dipilih di sini sesuai dengan nama sumber data eksternal dalam rumus.

refField: bidang referensi

data: sumber data

Setelah membuat instance AutoCalculate, metode penghitungan baru dipanggil di sini, yang memiliki 2 parameter:

gridDatas: data tabel yang perlu dihitung ulang, berupa array

refField: bidang referensi

AutoCalculate mendukung semua kontrol tabel js dan dapat dipanggil di latar belakang dengan bantuan metode ini, karena apa pun jenis kontrol tabel js, ia dapat mengekstrak data tabel (data murni Biasanya dalam bentuk sebuah array. Selama ini, lewati saja arraynya.

⑤ Setelah memanggil perhitungan, nilai payableTaxDatas sudah menjadi nilai perhitungan terbaru.

Antarmuka setelah menjalankan program:

Setelah mengklik untuk mendapatkan data:

Penggunaan backend

Untuk memanggil AutoCalculate di latar belakang, kita perlu menggunakan mesin V8. Poin penting lainnya adalah rumus juga diperlukan untuk memanggil AutoCalculate di latar belakang. Pendekatan kami sebelumnya adalah dengan meletakkan semua rumus di file Extjs Controller, seperti yang ditunjukkan di bawah ini:

Untuk memfasilitasi panggilan latar belakang, kami mengekstrak rumus sebagai file terpisah

Panggilan latar belakang AutoCalculate dikemas dalam proyek dan sangat mudah digunakan.

Metode pemanggilannya seperti yang ditunjukkan pada gambar:

Atau analisis langkah demi langkah:

① Simpan data tabel saat ini

② Dapatkan direktori file js tempat rumusnya berada

③ Dapatkan dua sumber data eksternal

④ Panggil metode latar belakang yang dienkapsulasi, menggunakan data yang diperoleh pada langkah ② dan ③, di mana FormulaExpression adalah ekspresi rumus, yaitu menggunakan ekspresi ini untuk menemukan rumus dalam file js yang Anda berikan

⑤ Data baru yang dikembalikan pada langkah sebelumnya sudah merupakan data terbaru setelah penghitungan.

Hal-hal yang perlu diperhatikan

Ada dua hal yang perlu diperhatikan saat menulis rumus:

Tidak ada spasi yang diperbolehkan dalam sel

/Cara menulis yang benar:
[Bulan12,1] = [Bulan11,1] * 10

//salah penulisan:
[Bulan12,1] = [Bulan11, 1] * 10

Tidak boleh ada spasi sebelum tanda desimal dan tempat desimal.

//Penulisan yang benar:
[Bulan12,1] #3 = [Bulan11,1] * 10

//salah penulisan:
[Bulan12,1] #3 = [Bulan11,1] * 10

Ini menyimpulkan artikel tentang mengucapkan selamat tinggal pada hard coding dan mengizinkan tabel front-end Anda menghitung secara otomatis. Untuk informasi lebih lanjut tentang perhitungan tabel front-end otomatis, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait berikut I harap Anda akan melakukannya di masa depan. Banyak mendukung downcodes.com!