桂林临桂区建设局网站电力建设网站进不去

vue项目如何解决金额计算超过15出现精度丢失问题

（1）使用big.js解决

npm i big.js

示例

应收金额 + 收款金额 不能大于累计实收金额
金额15位 + 小数点2位，出现精度丢失
500000000000000 + 0.02 ！=500000000000000.02

使用big.js的几个方法来转换解决

<template><h-bill-container:content="content":router="backUrl":billHead="billHead"v-loading="mainLoading"><el-collapse v-model="collapseName" class="collase-box" id="collse"><el-form:model="model"ref="contractRef"label-width="150px":rules="rules"class="inspect-form"><el-collapse-item name="3" title="收款信息" id="3"><el-row :gutter="20"><el-col :lg="8" :md="8"><el-form-item label="应收金额:" :prop="model.receiveType == 0 ? '' : 'receivableAmount'"><el-inputclearable:disabled="model.receiveType && model.receiveType == 1 ? false : true"v-model="model.receivableAmount"placeholder="自动带出"><span slot="append">元</span></el-input></el-form-item></el-col><el-col :lg="8" :md="8"><el-form-item label="累计实收金额:"><el-inputv-model="model.receiveAmountHis"disabledplaceholder="自动带出"><span slot="append">元</span></el-input></el-form-item></el-col></el-row></el-collapse-item><el-collapse-item name="4" title="收款流水信息" id="4"><el-row :gutter="20"><div class="inspect-table"><el-table class="table-supplier" :data="model.detailList" border:header-cell-style="{background:'#F5F7FA',color:'#333333', height: '45px',textAlign: 'center'}"><el-table-column label="收款金额(元)" min-width="40"><template slot="header"><span class="star">*</span><span>收款金额(元)</span></template><template slot-scope="scope"><el-form-itemlabel-width="0px"class="isError":prop="'detailList.' + scope.$index + '.receiveAmount'":rules="rules.receiveAmount"><el-inputv-model="scope.row.receiveAmount"placeholder="请输入金额"class="select-width"maxlength="15"clearable></el-input></el-form-item></template></el-table-column></el-table></div></el-row></el-collapse-item></el-form></el-collapse></h-bill-container>
</template>
import Big from 'big.js';export default {components: {AnchorPoint,proSelect,projectSelect,},data() {return {model: {approvalAmount:'',//批复金额receivableAmount: null, //应收金额receiveAmountHis: "", //累计实收金额},oldModel: {},rules: {receivableAmount: [{ required: true, validator: this.checkReceivableAmount}],receiveAmount: [{ required: true, validator: this.checkReceiveMoney, trigger: ['blur','change'] }],},};},methods: {//校验应收金额checkReceivableAmount(rule, value, callback) {var reg = /^-?[0-9]+(\.[0-9]{1,2})?$/;const num1 = Big(Number(this.model.receiveAmountHis))const num2 = isNaN(Number(this.model.detailList[0].receiveAmount)) ? undefined :  Big(Number(this.model.detailList[0].receiveAmount))const result = isNaN(Number(num2)) ? undefined : num1.plus(Number(num2)).toString();//   const num2 = Big(Number(this.model.detailList[0].receiveAmount))//   const result =  num1.plus(num2).toString();if (value === "" || value == undefined || value == null) {callback(new Error(`请输入应收金额`));return;} else if (!reg.test(value)) {callback(new Error(`只能输入正数，负数或0,且最多保留两位小数`));return;} else if(this.model.detailList[0].receiveAmount) {if(new Big(value).lt(new Big(result))) {callback(new Error(`收款金额与累计实收金额的总和不能大于应收金额`));return;}else {callback();return;}}else {callback();}},//校验收款金额checkReceiveMoney(rule, value, callback) {var reg = /^-?[0-9]+(\.[0-9]{1,2})?$/;const num1 = Big(Number(this.model.receiveAmountHis))//累计实收金额const num2 = Big(Number(this.model.receivableAmount))//应收金额if(isNaN(Number(value))) {this.resultStatus = false}else {this.result = num1.plus(Number(value)).toString();this.resultStatus = true}var reg = /^-?[0-9]+(\.[0-9]{1,2})?$/;if (value === "" || value == undefined || value == null) {callback(new Error(`请输入收款金额`));return;} else if (!reg.test(value)) {callback(new Error(`收款金额只能输入正数，负数及0，且最多保留两位小数`));return;}else if(this.resultStatus){if(num2 > 0 && new Big(num2).lt(new Big(this.result))) {callback(new Error(`收款金额与累计实收金额的总和不能大于应收金额`));return;}else if(num2 < 0 && new Big(this.result).lt(new Big(num2))) {callback(new Error(`收款金额与累计实收金额的总和不能小于应收金额`));return;}else {callback();return;}} else {callback();return;}},},
};
</script>