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

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-input
                  clearable
                  :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-input
                  v-model="model.receiveAmountHis"
                  disabled
                  placeholder="自动带出"
                >
                  <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-item
                      label-width="0px"
                      class="isError"
                      :prop="'detailList.' + scope.$index + '.receiveAmount'"
                      :rules="rules.receiveAmount"
                    >
                      <el-input
                        v-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>