add: 新增五个计算方法

CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGE LOG
 
+## 3.3.2
+
+### Feats
+
+- 新增五个计算方法（解决精度问题）
+- 解决一些小问题
+
 ## 3.3.1
 
 ### Feats

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",

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"
 }

src/locales/lang/zh-CN/menu.json

@@ -13,5 +13,6 @@
   "Office": "办公",
   "Office_Document": "文档",
   "Office_Presentation": "演示",
-  "Office_Spreadsheet": "表格"
+  "Office_Spreadsheet": "表格",
+  "CalculatePrecision": "数字精度"
 }

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

src/utils/precision.ts

@@ -0,0 +1,171 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-07
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 文档地址: <https://currency.js.org/#subtract>
+ *
+ * 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
+}

src/views/precision/index.tsx

@@ -0,0 +1,166 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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 (
+      <NLayout>
+        <h2 style="margin: 0 0 20px 0">
+          计算方法，默认都保留两位小数与四舍五入，可以根据 format 方法自行转换
+        </h2>
+        <h3 style="margin: 0 0 20px 0">
+          示例方法都基于 currency.js
+          封装，利用其精度处理能力封装了常用的一些计算方法，解决精度问题。如果需要其他的方法请阅读官方文档
+          https://currency.js.org/#subtract
+        </h3>
+        <NSpace vertical>
+          <NCard title="加法">
+            {{
+              default: () => (
+                <NDynamicTags
+                  v-model:value={this.addOptions}
+                  onUpdateValue={(value: string[]) => {
+                    this.copilotFunc(value, 'addOptions')
+                  }}
+                />
+              ),
+              footer: () => {
+                return this.copilotFunc(this.addOptions, 'addOptions')
+              },
+            }}
+          </NCard>
+          <NCard title="减法">
+            {{
+              default: () => (
+                <NDynamicTags
+                  v-model:value={this.subtractOptions}
+                  onUpdateValue={(value: string[]) => {
+                    this.copilotFunc(value, 'subtractOptions')
+                  }}
+                />
+              ),
+              footer: () => {
+                return this.copilotFunc(this.subtractOptions, 'subtractOptions')
+              },
+            }}
+          </NCard>
+          <NCard title="乘法">
+            {{
+              default: () => (
+                <NDynamicTags
+                  v-model:value={this.multiplyOptions}
+                  onUpdateValue={(value: string[]) => {
+                    this.copilotFunc(value, 'multiplyOptions')
+                  }}
+                />
+              ),
+              footer: () => {
+                return this.copilotFunc(this.multiplyOptions, 'multiplyOptions')
+              },
+            }}
+          </NCard>
+          <NCard title="除法（非取模）">
+            {{
+              default: () => (
+                <NDynamicTags
+                  v-model:value={this.divideOptions}
+                  onUpdateValue={(value: string[]) => {
+                    this.copilotFunc(value, 'divideOptions')
+                  }}
+                />
+              ),
+              footer: () => {
+                return this.copilotFunc(this.divideOptions, 'divideOptions')
+              },
+            }}
+          </NCard>
+          <NCard title="平分一个值">
+            {{
+              default: () => (
+                <NSpace wrapItem={false}>
+                  <NInputNumber
+                    v-model:value={this.distributeValue}
+                    onUpdateValue={() => {
+                      this.updateDistributeValue()
+                    }}
+                  />
+                  <NInputNumber
+                    v-model:value={this.distributeLength}
+                    onUpdateValue={() => {
+                      this.updateDistributeValue()
+                    }}
+                  />
+                </NSpace>
+              ),
+              footer: () => {
+                return '结果: ' + this.distributeOutputValue.join(', ')
+              },
+            }}
+          </NCard>
+        </NSpace>
+      </NLayout>
+    )
+  },
+})
+
+export default CalculatePrecision