<template> <c-fullbox> <el-input :id="id" ref="form-item" class="m-input-currency" :style="{'border-bottom': isShowRed ? `1px solid ${isShowRed}` : ''}" v-model="model" v-bind="$attrs" v-on="$listeners" v-bind:disabled="isDisable" :maxlength="maxlength" @blur="onBlur" @focus="focus" @change="handleChange" /> <template slot="footer" v-if="isShow.show"> <el-tooltip :content="isShow.warning" placement="bottom" effect="light" popper-class="tooltip"> <i :class="isShow.show ? 'el-icon-warning' : ''" style="margin-left: 10px;color: red;font-size: 16px;cursor: pointer;"></i> </el-tooltip> </template> </c-fullbox> </template> <script> import BigNumber from "bignumber.js"; import commonDepend from "~/mixin/commonDepend.js"; import markSetShowRed from "~/components/business/componentMixins/markSetShowRed.js"; export default { inject: { root: { default: () => null } }, mixins: [commonDepend, markSetShowRed], props: { value: { type: [String, Number, BigNumber], default: undefined }, currency: { type: [String, Number], default: "ZH" }, precision: { type: Number, default: 2 }, max: { type: [Number, String], default: 0 }, min: { type: [Number, String], default: 0 }, maxlength: { type: Number, default: 18 }, disabled: { type: Boolean, default: false }, id: { type: String, default: "" }, // 此对象为markset或者modifySet所在的对象,如果传了此对象可以标记当前对象下的字段为红色下划线 markSetData: { type: Object, default: () => null }, customModifykey: { type: String, default: null }, isShow: { type: Object, default: () => ({ show: false, warning: "" }) } }, data() { return { isOnBlur: true }; }, computed: { model: { get() { let orignalValue = this.value; // format currency let formatCurrencyValue = this.formatCurrency(orignalValue); return formatCurrencyValue; }, set(newVal) { let newValFormat = this.formatValue(newVal); let formatNaNvalue = this.formatNaN(newValFormat); this.$emit('input', formatNaNvalue) } }, mode() { return this.$store.state.Status.mode; }, highlight() { return this.$store.state.Status.highlights.indexOf(this.id) !== -1; }, isDisable() { return this.mode === "display" || this.disabled; }, curPrecision() { if (this.currency === "KRW" || this.currency === "JPY") { return 0 } else { return this.precision } } }, watch: { disabled(newVal) { if (newVal) { this.resetValidate() } } }, methods: { handleChange(newVal) { if (!this.customModifykey) { // 添加isModify属性 this.changeModify(); } }, onBlur() { this.isOnBlur = true; // 此处为了解决当什么都没填时,默认给0.00 if (typeof this.model === "undefined" || this.model.trim() === "") { this.model = "0"; } this.model = this.formatCurrency(this.value); // 处理change事件回调 let newValFormat = this.formatValue(this.value); let formatNaNvalue = this.formatNaN(newValFormat); this.$emit('change', formatNaNvalue) this.$emit('handleChange', formatNaNvalue) }, focus() { this.isOnBlur = false; }, formatCurrency(value) { if ( value !== null && value !== undefined && (value === "" || value.toString()) ) { if (this.isOnBlur) { if (value === "") { value = "0"; } value = this.formatValue(value.toString()); // 最大值和最小值判断 if (this.max || this.min) { let valueNum = new BigNumber(value); if (this.max) { let max = this.max.toString(); let maxNum = new BigNumber(max); if (valueNum.comparedTo(maxNum) == 1) { value = max; } } if (this.min) { let min = this.min.toString(); let minNum = new BigNumber(min); if (valueNum.comparedTo(minNum) == -1) { value = min; } } } let sign = true; let array = []; if (value.charAt(0) == "-") { sign = false; array = value.slice(1).split("."); } else { array = value.split("."); } // 增加逗号 var temp = ""; while (array[0].length > 3) { temp = "," + array[0].substring(array[0].length - 3, array[0].length) + temp; array[0] = array[0].substring(0, array[0].length - 3); } temp = array[0] + temp; if (this.curPrecision == 0) { this.model = sign ? temp : "-" + temp; return sign ? temp : "-" + temp; } if (this.curPrecision <= 0) { temp = temp; } else if (array.length === 1) { // 没有小数位数,补全 0 temp += "."; for (var i = 0; i < this.curPrecision; i++) { temp += "0"; } } else if (array[1].length < this.curPrecision) { temp += "." + array[1]; // 精度不足补全 0 for (var i = array[1].length; i < this.curPrecision; i++) { temp += "0"; } } else { temp += "." + array[1].substring(0, this.curPrecision); } // this.model = sign ? temp : "-" + temp; return sign ? temp : "-" + temp; } else { return this.formatValue(value); } } return this.value; }, formatValue(value) { if ( value !== null && value !== undefined && (value === "" || value.toString()) ) { var temp = value .toString() .split(",") .join(""); // 取出正负符号 let sign = true; if (temp.charAt(0) == "-") { sign = false; temp = temp.slice(1); } // 以小数点开头的前面加 0 if (temp.charAt(0) === ".") temp = "0" + temp; // 以0 为开头且后面不是小数点的去掉前面的 0 if (temp.charAt(0) === "0" && temp.length > 1 && temp.charAt(1) !== ".") temp = temp.substring(1); // 日元只保留前面的数字 if (this.curPrecision == 0) { var i = 0; while (i < temp.length) { if (!(temp.charAt(i) >= "0" && temp.charAt(i) <= "9")) break; i++; } temp = temp.substring(0, i); } else { // 输入整数位到最大整数位,不输入小数点,不允许输入 let ind = this.maxlength - 1 - this.curPrecision; if (temp.charAt(ind) && temp.indexOf('.') == -1 ) { temp = temp.slice(0, ind) } // 其他币种取出前面整数和小数部分 var i = 0; while (i < temp.length) { if (!((temp.charAt(i) >= "0" && temp.charAt(i) <= "9") || temp.charAt(i) === ".")) break; i++; } temp = temp.substring(0, i); var array = temp.split("."); if (this.curPrecision <= 0) { temp = array[0]; } else if (array.length > 1 && array[1].length > 0) { temp = array[0] + "." + array[1].substring(0, this.curPrecision); } else if (array.length > 1 && array[1].length === 0) { temp = array[0] + "."; // 原来有小数点的地方也保留小数 } else { temp = array[0]; } } return sign ? temp : "-" + temp; } return value; }, // 处理非数字或者是小数点后的0不够的时候补0 formatNaN(value) { // if value is empty or it is a Not a Number, then set '0' if (!value || isNaN(value) || value === '-0.00') { value = '0' } value = this.formatPrecision(value) return value; }, formatPrecision (value) { let valArr = value.split('.') let precis0 = valArr[0] ? valArr[0] : '0' let precis1 = valArr[1] ? valArr[1] : '' let val = '' if (this.curPrecision == 0) { val = precis0 } else { if (precis1.length >= this.curPrecision) { val = precis0 + "." + precis1.substring(0, this.curPrecision); } else { val = precis0 + "." + precis1 + '0'.repeat(this.curPrecision - precis1.length) } } return val }, formatSetValue(value) { // 判断小数点结束 if (value.endsWith('.')) { if (this.currency === "KRW" || this.currency === "JPY") { value = value.substring(0, value.lastIndexOf('.')) } else { value = value + '00' } } // 判断小数点后一位结束的 if (value.indexOf('.') > -1 && value.split('.').pop().length === 1) { if (this.currency === "KRW" || this.currency === "JPY") { value = value.substring(0, value.lastIndexOf('.')) } else { value = value + '0' } } // 判断小数点后一位结束的 if (value.indexOf('.') === -1) { if (this.currency !== "KRW" && this.currency !== "JPY") { value = value + '.00' } } return value; } } }; </script> <style scpoed> /* .el-input.highlight .el-input__inner{ border-color: red; } */ .el-input.m-input-currency .el-input__inner { text-align: left; } .input-currency-left.el-input.m-input-currency .el-input__inner { text-align: left; } </style>