/* * @Author: 634665781 634665781@qq.com * @Date: 2023-12-06 09:16:37 * @LastEditors: 634665781 634665781@qq.com * @LastEditTime: 2023-12-11 17:07:06 * @FilePath: \xform\src\core\widgets\text\NumberInput\index.js * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ import React, { useEffect, useMemo, useState, useCallback } from 'react' import { InputNumber, Input } from 'antd' import styles from './index.less' function formatMoney(number, places, symbol, thousand, decimal) { number = number || 0; places = !isNaN(places = Math.abs(places)) ? places : 2; symbol = symbol !== undefined ? symbol : "¥"; thousand = thousand || ","; decimal = decimal || "."; var negative = number < 0 ? "-" : "", i = parseInt(number = Math.abs(+number || 0).toFixed(places), 10) + "", j = (j = i.length) > 3 ? j % 3 : 0; return symbol + negative + (j ? i.substr(0, j) + thousand : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousand) + (places ? decimal + Math.abs(number - i).toFixed(places).slice(2) : ""); } const NumberInput = (props) => { const { value, onChange, schema, addons } = props const { disabled, presetValue, placeholder, prefix, formatter, decimalDigits, isStoreFormatter, addonBefore, addonAfter, min, max } = schema const [once, setOnce] = useState(true) useEffect(() => { if (addons) { addons.setValueByPath(addons.dataPath, presetValue) } else { onChange(presetValue) } }, [presetValue]) const numberChange = (value) => { if (addons) { if (value !== null) { onChange(`${value}`) } else { onChange('') } } } const inputChange = (e) => { let inputValue = e.target.value inputValue.replace(/[^\d.]/g, '') onChange(inputValue) } const formatterFn = (value) => { if (value) { if (formatter === '${百分比}') { return `${value}%` } else if (formatter === '${货币}') { return formatMoney(Number(value), Number(decimalDigits)) } else if (formatter === '${整数}') { return `${parseInt(value)}` } else if (formatter === '${小数}') { return Number(value).toFixed(Number(decimalDigits)) } else if (formatter === '${科学计数法}') { return Number(value).toExponential() } else if (formatter) { return `${value}${formatter}` } } return value } if (formatter === '${小数}') { return ( <div className={styles.textInput} isdisabled={JSON.stringify(disabled)}> <Input disabled={disabled} value={value ? `${value}` : ''} placeholder={disabled ? (placeholder || '') : (placeholder || '请输入内容')} onChange={inputChange} addonBefore={addonBefore} addonAfter={addonAfter} /> </div> ) } return ( <div className={styles.inputNumber} isdisabled={JSON.stringify(disabled)}> <InputNumber min={min || Number.MIN_SAFE_INTEGER} max={max || Number.MAX_SAFE_INTEGER} step={(formatter === '${百分比}' && isStoreFormatter) ? 0.01 : 1} addonBefore={addonBefore} addonAfter={addonAfter} prefix={prefix} placeholder={disabled ? (placeholder || '') : (placeholder || '请输入内容')} disabled={disabled} value={value === '' ? null : Number(value)} formatter={formatterFn} onChange={numberChange} style={{ width: '100%' }} /> </div> ) } export default NumberInput