diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ea80c3c..ee254563 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # CHANGE LOG +## 3.3.2 + +### Feats + +- 新增五个计算方法（解决精度问题） +- 解决一些小问题 + ## 3.3.1 ### Feats diff --git a/package.json b/package.json index e2ff963f..1ea77e64 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@vueuse/core": "^9.1.0", "axios": "^1.2.0", "crypto-js": "^4.1.1", + "currency.js": "^2.0.4", "dayjs": "^1.11.7", "echarts": "^5.4.0", "lodash-es": "^4.17.21", diff --git a/src/locales/lang/en-US/menu.json b/src/locales/lang/en-US/menu.json index 26d8ac5c..219f5c43 100644 --- a/src/locales/lang/en-US/menu.json +++ b/src/locales/lang/en-US/menu.json @@ -13,5 +13,6 @@ "Office": "Office", "Office_Document": "Document", "Office_Presentation": "Presentation", - "Office_Spreadsheet": "Spreadsheet" + "Office_Spreadsheet": "Spreadsheet", + "CalculatePrecision": "Precision" } diff --git a/src/locales/lang/zh-CN/menu.json b/src/locales/lang/zh-CN/menu.json index 7c4f7f0c..8d9c0bac 100644 --- a/src/locales/lang/zh-CN/menu.json +++ b/src/locales/lang/zh-CN/menu.json @@ -13,5 +13,6 @@ "Office": "办公", "Office_Document": "文档", "Office_Presentation": "演示", - "Office_Spreadsheet": "表格" + "Office_Spreadsheet": "表格", + "CalculatePrecision": "数字精度" } diff --git a/src/router/modules/precision.ts b/src/router/modules/precision.ts new file mode 100644 index 00000000..4b03d3b3 --- /dev/null +++ b/src/router/modules/precision.ts @@ -0,0 +1,14 @@ +import type { AppRouteRecordRaw } from '@/router/type' + +const precision: AppRouteRecordRaw = { + path: '/precision', + name: 'CalculatePrecision', + component: () => import('@/views/precision/index'), + meta: { + i18nKey: 'CalculatePrecision', + icon: 'rely', + order: 2, + }, +} + +export default precision diff --git a/src/utils/precision.ts b/src/utils/precision.ts new file mode 100644 index 00000000..909a2f56 --- /dev/null +++ b/src/utils/precision.ts @@ -0,0 +1,171 @@ +/** + * + * @author Ray + * + * @date 2023-06-07 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * 文档地址: + * + * Options 默认值 + * - symbol default: `$`(货币符号) + * - separator default: `,`(数字分隔符, demo: 1234.56 => '1,234.56') + * - decimal default: `.`(十进制分隔符, demo: 1.23 => '1.23') + * - precision default: `2`(精度保留位数) + * - pattern default: `!#`(!: 货币符号代替, #: 货币金额代替) + * - negativePattern default: `!#`(!: 货币符号代替, #: 货币金额代替) + * - format default: `null`(默认格式化方法替代, 看文档) + * - fromCents default: `false` + * - fromCents default: `false`(尊重精度选项) + * - errorOnInvalid default: `false`(传入 null undefined 直接抛出错误) + * - increment default: `null`(四舍五入增量值) + * - useVedic default: `false`(分组格式化值, demo: currency(1234567.89, { useVedic: true }).format() => '12,34,567.89') + */ + +import currency from 'currency.js' +import { cloneDeep } from 'lodash-es' + +import type { Options } from 'currency.js' + +export type CurrencyArguments = string | number | currency + +export type OriginalValueType = 'string' | 'number' + +/** + * + * @param valueOptions 待计算参数列表 + * @param dividend 初始值 + * @param cb 回调方法 + * + * @remark 计算基础方法, 仅限于该处使用 + */ +const basic = ( + valueOptions: CurrencyArguments[], + dividend: CurrencyArguments, + cb: AnyFunc, +) => { + if (!valueOptions?.length) { + return 0 + } + + if (valueOptions.length === 1) { + return currency(valueOptions[0]) + } + + const result = valueOptions.reduce((pre, curr, idx, arr) => { + pre = cb?.(pre, curr, idx, arr) + + return pre + }, dividend) + + return result +} + +/** + * + * 格式化一个数据值, 并且返回其原始值 + * 默认以 number 格式返回 + * + * 如果需要格式化为其他格式(如: 货币单位、分组、分隔符等), 请使用 currency format 方法格式 + */ +export const format = ( + value: CurrencyArguments, + options?: Options, + type: OriginalValueType = 'number', +) => { + return type === 'number' + ? currency(value, options).value + : currency(value, options).toString() +} + +/** 加法 */ +export const add = (...args: CurrencyArguments[]) => { + return basic(args, 0, (pre, curr) => { + return currency(pre).add(curr) + }) +} + +/** 减法 */ +export const subtract = (...args: CurrencyArguments[]) => { + if (args.length === 2) { + const [one, two] = args + + return currency(one).subtract(two) + } + + const cloneDeepArgs = cloneDeep(args) + const dividend = cloneDeepArgs.shift() as CurrencyArguments + + if (!cloneDeepArgs.length) { + return dividend + } + + return basic(cloneDeepArgs, dividend, (pre, curr) => { + return currency(pre).subtract(curr) + }) +} + +/** 乘法 */ +export const multiply = (...args: CurrencyArguments[]) => { + return basic(args, 1, (pre, curr) => { + return currency(pre).multiply(curr) + }) +} + +/** 除法 */ +export const divide = (...args: CurrencyArguments[]) => { + if (args.length === 2) { + const [one, two] = args + + return currency(one).divide(two) + } + + const cloneDeepArgs = cloneDeep(args) + const dividend = cloneDeepArgs.shift() as CurrencyArguments + + if (!cloneDeepArgs.length) { + return dividend + } + + return basic(cloneDeepArgs, dividend, (pre, curr) => { + return currency(pre).divide(curr) + }) +} + +/** + * + * 平分(将一个数值平均分配到一个数组中) + * 如果值为 undefind null 会自动转换为 0 + * + * ``` + * distribute(0, 1) => [0] + * distribute(0, 3) => [0, 0, 0] + * ``` + */ +export const distribute = ( + value: CurrencyArguments, + length: number, + options?: Options, +) => { + if (length <= 1) { + return [value ? value : 0] + } else { + if (!value) { + return new Array(length).fill(0) + } + } + + const result = currency(value, options) + .distribute(length) + .map((curr) => { + return format(curr, options) + }) + + return result +} diff --git a/src/views/precision/index.tsx b/src/views/precision/index.tsx new file mode 100644 index 00000000..250a1cc5 --- /dev/null +++ b/src/views/precision/index.tsx @@ -0,0 +1,166 @@ +/** + * + * @author Ray + * + * @date 2023-06-07 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { NLayout, NCard, NDynamicTags, NSpace, NInputNumber } from 'naive-ui' + +import { + add, + subtract, + multiply, + divide, + distribute, + format, +} from '@use-utils/precision' + +const CalculatePrecision = defineComponent({ + name: 'CalculatePrecision', + setup() { + const state = reactive({ + addOptions: ['1', '0.2', '0.1', '1.1'], + subtractOptions: ['1', '0.2', '0.1', '1.1'], + multiplyOptions: ['1', '0.2', '0.1', '1.1'], + divideOptions: ['1', '0.2', '0.1', '1.1'], + distributeValue: 12, + distributeOutputValue: [] as unknown[], + distributeLength: 3, + }) + const actionMap = { + addOptions: add, + subtractOptions: subtract, + multiplyOptions: multiply, + divideOptions: divide, + } + + const copilotFunc = (value: string[], path: string) => { + const action = actionMap[path] + const result = action(...value) + + return '结果: ' + format(result) + } + + const updateDistributeValue = () => { + nextTick().then(() => { + state.distributeOutputValue = distribute( + state.distributeValue, + state.distributeLength, + ) + }) + } + updateDistributeValue() + + return { + ...toRefs(state), + copilotFunc, + updateDistributeValue, + } + }, + render() { + return ( + +

+ 计算方法，默认都保留两位小数与四舍五入，可以根据 format 方法自行转换 +

+

+ 示例方法都基于 currency.js + 封装，利用其精度处理能力封装了常用的一些计算方法，解决精度问题。如果需要其他的方法请阅读官方文档 + https://currency.js.org/#subtract +

+ + + {{ + default: () => ( + { + this.copilotFunc(value, 'addOptions') + }} + /> + ), + footer: () => { + return this.copilotFunc(this.addOptions, 'addOptions') + }, + }} + + + {{ + default: () => ( + { + this.copilotFunc(value, 'subtractOptions') + }} + /> + ), + footer: () => { + return this.copilotFunc(this.subtractOptions, 'subtractOptions') + }, + }} + + + {{ + default: () => ( + { + this.copilotFunc(value, 'multiplyOptions') + }} + /> + ), + footer: () => { + return this.copilotFunc(this.multiplyOptions, 'multiplyOptions') + }, + }} + + + {{ + default: () => ( + { + this.copilotFunc(value, 'divideOptions') + }} + /> + ), + footer: () => { + return this.copilotFunc(this.divideOptions, 'divideOptions') + }, + }} + + + {{ + default: () => ( + + { + this.updateDistributeValue() + }} + /> + { + this.updateDistributeValue() + }} + /> + + ), + footer: () => { + return '结果: ' + this.distributeOutputValue.join(', ') + }, + }} + + + + ) + }, +}) + +export default CalculatePrecision