金额千分位处理——终极方案

金额在展示时需要千分位处理，但是在提交给后台或是计算时又需要转换为数字。

展示时要处理成千分位，校验和保存时时数字，所以需要两个变量。

金额的校验

金额的格式化处理

完整代码如下：表单的校验需要借助组件iview

<template>
  <div class="define-budget-org">
    <h4>采购申请</h4>
    <div class="top">
      <Form :label-width="80" :model="deviceObj" ref="formDom" :rules="formRules">
        <Row :gutter="20">
          <Col span="6">
            <FormItem label="设备名称" prop="deviceName">
              <Input v-model="deviceObj.deviceName" placeholder="请输入"/>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="设备类型" prop="deviceType">
              <Select v-model="deviceObj.deviceType">
                <Option v-for="item in deviceTypeList" :key="item.key" :value="item.key">{{item.value}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="采购数量" prop="deviceNum">
              <Input :value="deviceNum" placeholder="请输入" @on-blur="deviceNumHandle"/>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="单价" prop="devicePrice">
              <Input v-model="devicePrice" placeholder="请输入" @on-blur="devicePriceHandle"/>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="总价" prop="deviceTotalMoney">
              <Input v-model="deviceTotalMoney" placeholder="请输入" :disabled="true"/>
            </FormItem>
          </Col>
          <Col span="24" style="text-align:right;">
            <Button type="warning" icon="md-checkmark" @click="saveHandle">保存</Button>
            <Button style="margin-left: 16px;" icon="md-refresh" @click="resetHandle">重置</Button>
          </Col>
        </Row>
      </Form>
    </div>
  </div>
</template>
<script>
import accounting from 'accounting';
accounting.settings = {
  currency: {
    symbol: '￥', // default currency symbol is '$'
    format: '%s%v', // controls output: %s = symbol, %v = value/number (can be object: see below)
    decimal: '.', // decimal point separator
    thousand: ',', // thousands separator
    precision: 2 // decimal places
  },
  number: {
    precision: 0, // default precision on numbers is 0
    thousand: ',',
    decimal: '.'
  }
};
export default {
  components: {

  },
  data(){
    return {
      deviceNum: null,
      devicePrice: null,
      deviceObj: {
        deviceName: '',
        deviceType: '',
        deviceNum: null,
        devicePrice: null,
        deviceTotalMoney: null,
      },
      deviceTypeList:[
        {value:'电子设备',key:'001'},
        {value:'虚拟设备',key:'002'},
        {value:'固定资产',key:'003'},
      ],
      formRules:{
        deviceName:[
          {required:true,message:'请输入设备名称',trigger:'blur'},
        ],
        deviceType:[
          {required:false,message:'请输入设备类型',trigger:'change'},
        ],
        deviceNum:[
          {required:true,message:'请输入采购数量',trigger:'blur'},
          {
            validator: (rule, value, callback) => {
              if (value && !/^[1-9]*[1-9][0-9]*$/.test(value)) {
                return callback(new Error("采购数量为正整数"));
              }else{
                callback()
              }
            },
            trigger:'blur'
          },
          
        ],
        devicePrice:[
          {required:true,message:'请输入单价',trigger:'blur'},
          {
            validator: (rule, value, callback) => {
              if (value && !/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value)) {
                return callback(new Error("单价为正数"));
              }else{
                callback()
              }
            },
            trigger:'blur'
          },
        ],
      },

    }
  },
  created(){

  },
  mounted(){

  },
  computed:{
    deviceTotalMoney(){
      let value = null;
      if(this.deviceObj.deviceNum && this.deviceObj.devicePrice){
        value = this.deviceObj.deviceNum * this.deviceObj.devicePrice;
        value = accounting.formatMoney(value);
      }
      return value;
    },
  },
  methods:{
    saveHandle(){
      this.deviceObj.deviceTotalMoney = this.deviceTotalMoney;
      console.log("搜索参数",this.deviceObj);
      this.$refs.formDom.validate((valid)=>{
        if(valid){
          this.$Message.success("success")
        }else{
          this.$Message.error("校验不通过")
        }
      })
      
    },
    resetHandle(){
      this.$refs.formDom.resetFields();
    },
    deviceNumHandle(e){
      let value = e.target.value;
      console.log('采购数量',value);
      this.deviceObj.deviceNum = value.replace(/,/g, '');
      this.deviceNum =  Number(value.replace(/,/g, ''))
        ? Number(value.replace(/,/g, ''))
          .toFixed(0)
          .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
        : '';
    },
    devicePriceHandle(e){
      let value = e.target.value;
      console.log('单价',value);
      this.deviceObj.devicePrice = value.replace(/,/g, '');
      this.devicePrice =  Number(value.replace(/,/g, ''))
        ? Number(value.replace(/,/g, ''))
          .toFixed(2)
          .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
        : '';
    }
  },
}
</script>

<style lang="less" scoped>
.define-budget-org {
  padding: 0 16px;
  .top {
    margin-top: 20px;
  }
}
</style>