封装方法-数字转大写（一）——将数字金额转换为大写金额
效果
1、封装的方法
src/utils/mony.ts
const smallToBig = function(money) {// 将数字金额转换为大写金额var cnNums = new Array('零','壹','贰','叁','肆','伍','陆','柒','捌','玖'); //汉字的数字var cnIntRadice = new Array('', '拾', '佰', '仟'); //基本单位var cnIntUnits = new Array('', '万', '亿', '兆'); //对应整数部分扩展单位var cnDecUnits = new Array('角', '分', '毫', '厘'); //对应小数部分单位var cnInteger = '整'; //整数金额时后面跟的字符var cnIntLast = '元'; //整数完以后的单位//最大处理的数字var maxNum = 999999999999999.9999;var integerNum; //金额整数部分var decimalNum; //金额小数部分//输出的中文金额字符串var chineseStr = '';var parts; //分离金额后用的数组，预定义if (money == '') {return '';}money = parseFloat(money);if (money >= maxNum) {//超出最大处理数字return '超出最大处理数字';}if (money == 0) {chineseStr = cnNums[0] + cnIntLast + cnInteger;return chineseStr;}//四舍五入保留两位小数,转换为字符串money = Math.round(money * 100).toString();integerNum = money.substr(0, money.length - 2);decimalNum = money.substr(money.length - 2);//获取整型部分转换if (parseInt(integerNum, 10) > 0) {var zeroCount = 0;var IntLen = integerNum.length;for (var i = 0; i < IntLen; i++) {var n = integerNum.substr(i, 1);var p = IntLen - i - 1;var q = p / 4;var m = p % 4;if (n == '0') {zeroCount++;} else {if (zeroCount > 0) {chineseStr += cnNums[0];}//归零zeroCount = 0;chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];}if (m == 0 && zeroCount < 4) {chineseStr += cnIntUnits[q];}}chineseStr += cnIntLast;}//小数部分if (decimalNum != '') {var decLen = decimalNum.length;for (var i = 0; i < decLen; i++) {var n = decimalNum.substr(i, 1);if (n != '0') {chineseStr += cnNums[Number(n)] + cnDecUnits[i];}}}if (chineseStr == '') {chineseStr += cnNums[0] + cnIntLast + cnInteger;} else if (decimalNum == '' || /^0*$/.test(decimalNum)) {chineseStr += cnInteger;}return chineseStr;};export default smallToBig;
2、页面中使用
index.vue
<el-row><el-col :span="23"><el-form-itemlabel="报销明细"prop="staffReimbursementInfoVoList"><el-table :data="tableData" border><el-table-columnalign="center"label="序号"width="100"><template #default="scope">{{ scope.$index + 1 }}</template></el-table-column><el-table-column:show-overflow-tooltip="false"align="center"label="费用项目名称"><template #default="scope"><el-inputv-model="scope.row.itemName"class="width-294"maxlength="30"placeholder="费用项目名称"></el-input></template></el-table-column><el-table-column:show-overflow-tooltip="false"align="center"label="日期"><template #default="scope"><el-date-pickerv-model="scope.row.itemDate"class="width-294"placeholder="选择日期"type="date"></el-date-picker></template></el-table-column><el-table-column:show-overflow-tooltip="false"align="center"label="金额"><template #default="scope"><el-inputv-model="scope.row.money"class="width-294"placeholder="金额"@input="changePrice('money', scope.$index)"><template #append>元</template></el-input></template></el-table-column><el-table-columnalign="center"label="操作"width="100"><template #default="scope"><el-buttonv-if="scope.$index > 0"type="text"@click="deleteItem(scope.row, scope.$index)">删除</el-button><el-button type="text" @click="add(0)">添加</el-button></template></el-table-column></el-table><div class="money"><div class="mr-0">合计金额大写：<span>{{money(totalCount) || '零'}}</span></div><div>合计金额小写：<span>¥{{ totalCount }}</span></div></div></el-form-item></el-col></el-row><script>import smallToBig from '@/utils/money';import money from '@/utils/money';// 定义字段money: smallToBig,tableData: [{itemDate: '',itemName: '',money: '',},],rules:{linkman: [{required: true,message: '请输入联系人',trigger: 'blur',},],'tableData.money': [{validator: ischinaSDate,trigger: 'change',},],},// 使用方式1const watchMealDateList = watch(()=>state.form.mealDateList,(n,o)=>{if (n.length) {state.form.mealAmount = 20 * n.length}})const funMethods = {formatterMoney(){return convertCurrency(state.form.mealAmount)},} // 使用方式2const totalCount = computed(() => {let num = 0;state.tableData.forEach(item => {num += Number(item.money);});return num;});const funMethods = {changePrice: (name, index) => {// eslint-disable-next-line no-useless-escapestate.tableData[index][name] = state.tableData[index][name].replace(/[^\d.]/g, ''); //清除非 数字和小数点的字符state.tableData[index][name] = state.tableData[index][name].replace(/\.{2,}/g, '.'); //清除第二个小数点state.tableData[index][name] = state.tableData[index][name].replace(/^\./g, ''); //验证第一个字符是数字而不是字符state.tableData[index][name] = state.tableData[index][name].replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');// eslint-disable-next-line no-useless-escapestate.tableData[index][name] = state.tableData[index][name].replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //保留两位小数state.tableData[index][name] =state.tableData[index][name].indexOf('.') > 0? state.tableData[index][name].split('.')[0].substring(0, 7) +'.' +state.tableData[index][name].split('.')[1]: state.tableData[index][name].substring(0, 7); //限制只能输入7位正整数},//添加当前行明细add: (type = 0) => {//添加前先获取length判断此对象字段是否都填let {length} = state.tableData;if (length > 0) {if (!state.tableData[length - 1].itemDate) {ElMessage.error(`请填写第${length}个明细日期`);return false}if (!state.tableData[length - 1].itemName) {ElMessage.error(`请填写第${length}个明细费用项目名称`);return false}if (!state.tableData[length - 1].money) {ElMessage.error(`请填写第${length}个明细金额`);return false}}if (type) {return true}state.tableData.push({itemDate: '',itemName: '',money: '',});},}//删除当前行deleteItem(item, index) {state.tableData.splice(index, 1);},</script>
