vue2server7 7.0.8 → 7.0.11

package/frontEnd/src/components/NumberRange.vue

@@ -1,90 +1,3 @@
-<!--
-  NumberRange 数字区间输入组件
-  用于表单中输入数值范围（如金额区间、年龄区间等）
-
-  ═══════════════════════════════════════════════════
-  两种绑定模式
-  ═══════════════════════════════════════════════════
-
-  1. 数组模式 —— v-model 绑定 [min, max] 数组
-     <NumberRange v-model="form.amountRange" />
-
-  2. 双字段模式 —— v-model:start / v-model:end 分别绑定
-     <NumberRange v-model:start="form.amountMin" v-model:end="form.amountMax" />
-
-  ═══════════════════════════════════════════════════
-  Props
-  ═══════════════════════════════════════════════════
-
-  | Prop           | 类型    | 默认值      | 说明                          |
-  |────────────────|─────────|─────────────|───────────────────────────────|
-  | modelValue     | Array   | undefined   | 数组模式绑定值 [min, max]       |
-  | start          | Number  | undefined   | 双字段模式起始值                |
-  | end            | Number  | undefined   | 双字段模式结束值                |
-  | minPlaceholder | String  | '最小值'    | 起始输入框占位文本              |
-  | maxPlaceholder | String  | '最大值'    | 结束输入框占位文本              |
-  | separator      | String  | '到'        | 两个输入框之间的分隔文字         |
-  | min            | Number  | -Infinity   | 允许输入的最小边界              |
-  | max            | Number  | Infinity    | 允许输入的最大边界              |
-  | precision      | Number  | undefined   | 小数位数限制（不传则不限制）     |
-  | disabled       | Boolean | false       | 是否禁用                       |
-
-  ═══════════════════════════════════════════════════
-  Events
-  ═══════════════════════════════════════════════════
-
-  | Event              | 参数            | 说明                          |
-  |────────────────────|─────────────────|───────────────────────────────|
-  | update:modelValue  | [min, max]      | 数组模式值变更                 |
-  | update:start       | number | null   | 双字段模式起始值变更            |
-  | update:end         | number | null   | 双字段模式结束值变更            |
-  | change             | [min, max]      | 值变更（两种模式都触发）        |
-
-  ═══════════════════════════════════════════════════
-  Expose（通过 ref 调用）
-  ═══════════════════════════════════════════════════
-
-  | 属性/方法 | 类型              | 说明                  |
-  |───────────|───────────────────|───────────────────────|
-  | validate  | () => boolean     | 手动触发校验          |
-  | isValid   | ComputedRef<bool> | 当前区间是否合法      |
-
-  ═══════════════════════════════════════════════════
-  配套校验规则（配合 el-form 使用）
-  ═══════════════════════════════════════════════════
-
-  import { rangeRule, rangeRequired } from '@/components/NumberRange.vue'
-
-  - rangeRequired(message?, startField?, trigger?)
-    区间必填校验
-    数组模式:   rangeRequired('请输入金额范围')
-    双字段模式: rangeRequired('请输入年龄范围', 'ageMin')
-
-  - rangeRule(message?, startField?, trigger?)
-    区间大小校验（结束值 >= 起始值）
-    数组模式:   rangeRule('结束金额不能小于起始金额')
-    双字段模式: rangeRule('结束年龄不能小于起始年龄', 'ageMin')
-
-  ═══════════════════════════════════════════════════
-  完整示例
-  ═══════════════════════════════════════════════════
-
-  <!-- 数组模式 -->
-  <el-form-item prop="amountRange" label="金额范围">
-    <NumberRange v-model="form.amountRange" :precision="2"
-      min-placeholder="最小金额" max-placeholder="最大金额" />
-  </el-form-item>
-  rules: { amountRange: [rangeRule('结束金额不能小于起始金额')] }
-
-  <!-- 双字段模式 -->
-  <el-form-item prop="ageMax" label="年龄范围" required>
-    <NumberRange v-model:start="form.ageMin" v-model:end="form.ageMax"
-      :precision="0" min-placeholder="最小年龄" max-placeholder="最大年龄" />
-  </el-form-item>
-  rules: { ageMax: [rangeRequired('请输入年龄范围', 'ageMin'),
-                     rangeRule('结束年龄不能小于起始年龄', 'ageMin')] }
--->
-
 <template>
   <div class="number-range" :class="{ 'is-disabled': disabled }">
     <el-input
@@ -113,74 +26,126 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import type { FormItemRule } from 'element-plus'
+
+type RangeValue = [number | null, number | null]
+type ValidatorCb = (error?: Error) => void
+
 /**
- * 区间必填校验规则，用于 el-form rules
- * @param {string}  message    - 校验失败提示文案
- * @param {string}  startField - 双字段模式下起始字段名；不传则为数组模式
- * @param {string}  trigger    - 触发方式，默认 'change'
+ * NumberRange 数字区间输入组件
+ *
+ * 两种绑定模式：
+ *   数组模式   v-model="form.amountRange"
+ *   双字段模式 v-model:start="form.ageMin"  v-model:end="form.ageMax"
+ *
+ * 配套校验规则（配合 el-form 使用）：
+ *   import { rangeRule, rangeRequired } from '@/components/NumberRange.vue'
+ *
+ *   数组模式:
+ *     rangeRequired('请输入金额范围')
+ *     rangeRule('结束金额不能小于起始金额')
+ *
+ *   双字段模式:
+ *     rangeRequired('请输入年龄范围', 'ageMin')
+ *     rangeRule('结束年龄不能小于起始年龄', 'ageMin')
  */
-export function rangeRequired(message = '请输入完整区间', startField, trigger = 'change') {
+
+/** 区间必填校验规则 */
+export function rangeRequired(
+  message = '请输入完整区间',
+  startField?: string,
+  trigger = 'change'
+): FormItemRule {
   return {
     trigger,
     validator: startField
-      ? (_r, _v, cb, source) => cb(source[startField] == null || source[startField] === '' ? new Error(message) : undefined)
-      : (_r, v, cb) => cb(!Array.isArray(v) || v[0] == null || v[1] == null ? new Error(message) : undefined)
+      ? (_r: unknown, _v: unknown, cb: ValidatorCb, source: Record<string, unknown>) =>
+          cb(source[startField] == null || source[startField] === '' ? new Error(message) : undefined)
+      : (_r: unknown, v: unknown, cb: ValidatorCb) => {
+          const arr = v as RangeValue | undefined
+          cb(!Array.isArray(arr) || arr[0] == null || arr[1] == null ? new Error(message) : undefined)
+        }
   }
 }
 
-/**
- * 区间大小校验规则（结束值 >= 起始值），用于 el-form rules
- * @param {string}  message    - 校验失败提示文案
- * @param {string}  startField - 双字段模式下起始字段名；不传则为数组模式
- * @param {string}  trigger    - 触发方式，默认 'change'
- */
-export function rangeRule(message = '结束值不能小于起始值', startField, trigger = 'change') {
+/** 区间大小校验规则（结束值 >= 起始值） */
+export function rangeRule(
+  message = '结束值不能小于起始值',
+  startField?: string,
+  trigger = 'change'
+): FormItemRule {
   return {
     trigger,
     validator: startField
-      ? (_r, v, cb, source) => cb(source[startField] != null && v != null && v < source[startField] ? new Error(message) : undefined)
-      : (_r, v, cb) => cb(v?.[0] != null && v?.[1] != null && v[1] < v[0] ? new Error(message) : undefined)
+      ? (_r: unknown, v: unknown, cb: ValidatorCb, source: Record<string, unknown>) =>
+          cb(source[startField] != null && v != null && (v as number) < (source[startField] as number) ? new Error(message) : undefined)
+      : (_r: unknown, v: unknown, cb: ValidatorCb) => {
+          const arr = v as RangeValue | undefined
+          cb(arr?.[0] != null && arr?.[1] != null && arr[1] < arr[0] ? new Error(message) : undefined)
+        }
   }
 }
 </script>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch, computed } from 'vue'
 
-const props = defineProps({
+type Nullable<T> = T | null | undefined
+
+interface Props {
   /** 数组模式绑定值 [min, max]，与 start/end 二选一 */
-  modelValue: { type: Array, default: undefined },
+  modelValue?: RangeValue
   /** 双字段模式 - 起始值 */
-  start: { type: Number, default: undefined },
+  start?: number | null
   /** 双字段模式 - 结束值 */
-  end: { type: Number, default: undefined },
-  minPlaceholder: { type: String, default: '最小值' },
-  maxPlaceholder: { type: String, default: '最大值' },
-  separator: { type: String, default: '到' },
+  end?: number | null
+  minPlaceholder?: string
+  maxPlaceholder?: string
+  /** 两个输入框之间的分隔文字 */
+  separator?: string
   /** 允许输入的最小边界 */
-  min: { type: Number, default: -Infinity },
+  min?: number
   /** 允许输入的最大边界 */
-  max: { type: Number, default: Infinity },
-  step: { type: Number, default: 1 },
+  max?: number
+  step?: number
   /** 小数位数限制，如 2 表示最多两位小数 */
-  precision: { type: Number, default: undefined },
-  disabled: { type: Boolean, default: false }
+  precision?: number
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: undefined,
+  start: undefined,
+  end: undefined,
+  minPlaceholder: '最小值',
+  maxPlaceholder: '最大值',
+  separator: '到',
+  min: -Infinity,
+  max: Infinity,
+  step: 1,
+  precision: undefined,
+  disabled: false
 })
 
-const emit = defineEmits(['update:modelValue', 'update:start', 'update:end', 'change'])
+const emit = defineEmits<{
+  'update:modelValue': [value: RangeValue]
+  'update:start': [value: number | null]
+  'update:end': [value: number | null]
+  change: [value: RangeValue]
+}>()
 
 /** 根据是否传入 modelValue 自动判断绑定模式 */
 const isArrayMode = computed(() => props.modelValue !== undefined)
 
-function getInitMin() {
+function getInitMin(): Nullable<number> {
   return isArrayMode.value ? props.modelValue?.[0] : props.start
 }
-function getInitMax() {
+function getInitMax(): Nullable<number> {
   return isArrayMode.value ? props.modelValue?.[1] : props.end
 }
 
-function toDisplay(val) {
+function toDisplay(val: Nullable<number>): string {
   if (val === null || val === undefined) return ''
   return String(val)
 }
@@ -192,9 +157,9 @@ const maxFocused = ref(false)
 
 /**
  * 输入过滤：只允许数字、小数点、负号；
- * 限制小数点只出现一次，小数位数受 precision 约束
+ * 小数点仅保留第一个，小数位数受 precision 约束
  */
-function sanitize(raw) {
+function sanitize(raw: string | null | undefined): string {
   if (raw === '' || raw === null || raw === undefined) return ''
   let s = raw.replace(/[^0-9.\-]/g, '')
 
@@ -214,14 +179,14 @@ function sanitize(raw) {
   return s
 }
 
-function parseNum(val) {
+function parseNum(val: string | null | undefined): number | null {
   if (val === '' || val === null || val === undefined) return null
   const n = Number(val)
   return Number.isNaN(n) ? null : n
 }
 
 /** 按 precision 格式化数值 */
-function formatNum(val) {
+function formatNum(val: number | null | undefined): number | null {
   if (val === null || val === undefined) return null
   if (props.precision !== undefined) {
     return Number(Number(val).toFixed(props.precision))
@@ -238,7 +203,7 @@ const rangeInvalid = computed(() => {
 const isValid = computed(() => !rangeInvalid.value)
 
 /** 根据绑定模式 emit 对应事件 */
-function emitValue() {
+function emitValue(): void {
   const minVal = formatNum(parseNum(minDisplay.value))
   const maxVal = formatNum(parseNum(maxDisplay.value))
   if (isArrayMode.value) {
@@ -250,40 +215,40 @@ function emitValue() {
   emit('change', [minVal, maxVal])
 }
 
-function onMinInput(val) {
-  minDisplay.value = sanitize(val)
+function onMinInput(val: string | number): void {
+  minDisplay.value = sanitize(String(val))
 }
 
-function onMaxInput(val) {
-  maxDisplay.value = sanitize(val)
+function onMaxInput(val: string | number): void {
+  maxDisplay.value = sanitize(String(val))
 }
 
-function onMinClear() {
+function onMinClear(): void {
   minDisplay.value = ''
   emitValue()
 }
 
-function onMaxClear() {
+function onMaxClear(): void {
   maxDisplay.value = ''
   emitValue()
 }
 
-function onMinFocus() {
+function onMinFocus(): void {
   minFocused.value = true
 }
 
-function onMaxFocus() {
+function onMaxFocus(): void {
   maxFocused.value = true
 }
 
 /** 失焦时格式化数值、钳位到 [min, max] 边界，并触发 emit */
-function onMinBlur() {
+function onMinBlur(): void {
   minFocused.value = false
   let v = parseNum(minDisplay.value)
   if (v !== null) {
     if (v < props.min) v = props.min
     if (v > props.max) v = props.max
-    v = formatNum(v)
+    v = formatNum(v)!
     minDisplay.value = String(v)
   } else {
     minDisplay.value = ''
@@ -291,13 +256,13 @@ function onMinBlur() {
   emitValue()
 }
 
-function onMaxBlur() {
+function onMaxBlur(): void {
   maxFocused.value = false
   let v = parseNum(maxDisplay.value)
   if (v !== null) {
     if (v > props.max) v = props.max
     if (v < props.min) v = props.min
-    v = formatNum(v)
+    v = formatNum(v)!
     maxDisplay.value = String(v)
   } else {
     maxDisplay.value = ''
@@ -305,7 +270,7 @@ function onMaxBlur() {
   emitValue()
 }
 
-function validate() {
+function validate(): boolean {
   return isValid.value
 }
 
@@ -315,12 +280,11 @@ defineExpose({ validate, isValid })
 watch(
   () => isArrayMode.value ? props.modelValue : [props.start, props.end],
   (val) => {
-    const newMin = toDisplay(val?.[0])
-    const newMax = toDisplay(val?.[1])
+    const newMin = toDisplay(val?.[0] ?? null)
+    const newMax = toDisplay(val?.[1] ?? null)
     if (newMin !== minDisplay.value) minDisplay.value = newMin
     if (newMax !== maxDisplay.value) maxDisplay.value = newMax
-    if ((val?.[0] === null || val?.[0] === undefined) &&
-        (val?.[1] === null || val?.[1] === undefined)) {
+    if ((val?.[0] == null) && (val?.[1] == null)) {
       minFocused.value = false
       maxFocused.value = false
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2server7",
-  "version": "7.0.8",
+  "version": "7.0.11",
   "description": "",
   "scripts": {
     "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",