封装方法-数字转大写（一）——将数字金额转换为大写金额

封装方法-数字转大写（一）——将数字金额转换为大写金额

效果

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-item
                      label="报销明细"
                      prop="staffReimbursementInfoVoList"
                      >
            <el-table :data="tableData" border>
                <el-table-column
                                 align="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-input
          v-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-picker
                v-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-input
          v-model="scope.row.money"
          class="width-294"
          placeholder="金额"
          @input="
                  changePrice('money', scope.$index)
                  "
          >
    <template #append>元</template>
                    </el-input>
                </template>
            </el-table-column>
        <el-table-column
                         align="center"
                         label="操作"
                         width="100"
                         >
            <template #default="scope">
<el-button
           v-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',
            },
        ],
    },
        
    // 使用方式1
    const watchMealDateList = watch(()=>state.form.mealDateList,(n,o)=>{
        if (n.length) {
            state.form.mealAmount = 20 * n.length
        }
    })
    
    const funMethods = {
        formatterMoney(){
            return convertCurrency(state.form.mealAmount)
        },
    }  
    
   // 使用方式2
    const 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-escape

            state.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-escape
            state.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>