【vue中使用bigdecimal代表金额】

当涉及到金额的时候，由于精度的问题，数据类型一般不使用double或者float，而是使用bigdecimal类型，由此引发下列问题。

接收类型选择

Java中使用【java.math.BigDecimal】

@ApiModelProperty(value = "价格")
@TableId("price")
private BigDecimal price;

数据库中使用【decimal】数据类型，长度与小数点根据实际情况自由选择

前端输入框校验

输入框样式如下

创建一个校验金额的正则表达式方法

const validPrice = (rule, value, callback) => {
  let myreg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
  if (myreg.test(value)) {
    callback()
  } else {
    callback(new Error('请输入正确金额'))
  }
}

然后添加到对应的字段中

//新增修改参数rule
ruleEdit: {
  price:[
    { required: true, message: '请输入商品价格', trigger: 'blur' },
    { validator: validPrice, trigger: 'blur' }
  ]
},

由此就可以校验输入的是否为金额。

从后台接收金额参数

方法如下

 页面上可以看到编辑页面参数已经传进去了,但是不做修改以后直接点击保存却触发了该输入框的规则导致无法保存

 由此修改接收参数的方法，如下：

this.formEdit.price = String(data.price).match(/\s*(([1-9][0-9]*\.\d+)|([1-9]\d*)|(^\.\d+)|(0\.\d+)|([0-9]$))\s*/)[0]

 刷新页面后发现问题解决了。