Amtpanl.vue

<template>
  <div class="eibs-tab">
    <c-col :span="span">
      <c-col :span="15">
        <el-form-item :label="message.title" :prop="message.cur">
          <c-select
            v-model="cur"
            maxlength="3"
            :code="code"
            @change="curChange"
            placeholder="请选择币种"
          ></c-select>
        </el-form-item>
      </c-col>

      <c-col :span="9">
        <el-form-item
          label=""
          label-width="220px"
          style="margin-left: -220px !important"
          :prop="message.amt"
        >
          <c-input
            v-model="amt"
            @change="amtChanged"
            @input="amtInput"
            :placeholder="'请输入' + message.title"
          ></c-input>
        </el-form-item>
      </c-col>
    </c-col>
  </div>
</template>
<script>
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import _ from "~/utils/Lodash.js";
export default {
  inject: ["root"],
  mixins: [commonProcess],
  //props: ["model", "message","span"],
  props: {
    model: {
      type: Object,
      default: undefined,
    },
    message: {
      type: Object,
      default: function () {
        return {
          title: "金额", //金额名称
          cur: "cur", //币种字段路劲
          amt: "amt", //金额字段路劲
          fix: 3, //小数点位数
        };
      },
    },
    span: {
      type: Number,
      default: 12, //宽度，默认12
    },
  },
  data() {
    return {
      code: [...CodeTable.cur],
      amt: this.amtGet(),
      cur: this.curGet(),
    };
  },
  methods: {
    //金额格式化，默认保留三位小数
    amtChanged(newamt) {
      if (newamt === "" || newamt === undefined || newamt === null) {
        _.set(this.model, this.message.amt, "");
        this.amt = "";
        return;
      }
      newamt = newamt.replace(/^0+\./, "0.");
      if (newamt === "" || newamt === undefined || newamt === null) {
        _.set(this.model, this.message.amt, "");
        this.amt = "";
        return;
      }
      newamt = newamt.replace(/^0+([0-9])/, "$1");
      let fix = this.message.fix || 3;
      let idx = newamt.indexOf(".");
      let segs = undefined;
      if (idx > -1) segs = newamt.split(".");
      else segs = [newamt || "0", "0".repeat(fix)];
      if (!segs[0]) segs[0] = "0";
      if (segs[1].length > fix) segs[1] = segs[1].substring(0, fix);
      else if (segs[1].length < fix)
        segs[1] = segs[1] + "0".repeat(fix - segs[1].length);
      let npreseg = "";
      segs[0] = segs[0].replace(/\D+/g, "");
      let preseg = segs[0];
      for (let i = 0; i < preseg.length; i++) {
        npreseg = preseg.charAt(preseg.length - 1 - i) + npreseg;
        if (i && (1 + i) % 3 == 0 && i != preseg.length - 1)
          npreseg = "," + npreseg;
      }
      let amt = `${segs[0] ? segs[0] : 0}.${segs[1]}`;
      _.set(this.model, this.message.amt, amt);
      this.amt = `${segs[0] ? npreseg : 0}.${segs[1]}`;
    },

    //禁止输入非数字
    amtInput(newamt) {
      let am = newamt.replace(/[^\d.]/g, "");
      _.set(this.model, this.message.amt, am);
      this.amt = am;
    },

    amtGet() {
      return _.get(this.model, this.message.amt, "");
    },

    //cur改变
    curChange() {
      _.set(this.model, this.message.cur, this.cur);
    },
    curGet() {
      return _.get(this.model, this.message.cur, "");
    },
  },
  computed: {},
  watch: {},
  // methods: { ...Event },
  created: function () {},
};
</script>
<style>
</style>