vue2server7 7.0.18 → 7.0.20

package/frontEnd/src/components/NumberRange.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="number-range" :class="{ 'is-disabled': disabled, 'is-error': showInternalError }">
+  <div class="number-range" :class="{ 'is-disabled': disabled }">
     <el-input
       v-model="minDisplay"
       class="number-range__input"
-      :class="{ 'is-error': showInternalError }"
+      :class="{ 'is-error': showError }"
       :placeholder="minPlaceholder"
       :disabled="disabled"
       clearable
       @input="onMinInput"
-      @focus="onMinFocus"
+      @focus="onFocus"
       @blur="onMinBlur"
       @clear="onMinClear"
     />
@@ -16,175 +16,95 @@
     <el-input
       v-model="maxDisplay"
       class="number-range__input"
-      :class="{ 'is-error': showInternalError }"
+      :class="{ 'is-error': showError }"
       :placeholder="maxPlaceholder"
       :disabled="disabled"
       clearable
       @input="onMaxInput"
-      @focus="onMaxFocus"
+      @focus="onFocus"
       @blur="onMaxBlur"
       @clear="onMaxClear"
     />
-    <span v-if="showInternalError" class="number-range__error">结束值不能小于起始值</span>
+    <span v-if="showError" class="number-range__error">{{ errorMessage }}</span>
   </div>
 </template>
 
-<script lang="ts">
-import type { FormItemRule } from 'element-plus'
-
-export type RangeValue = [number | string | null, number | string | null]
-type ValidatorCb = (error?: Error) => void
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
 
-/** 将字符串/数字统一转为 number，空值返回 null */
-function toNum(val: unknown): number | null {
-  if (val === null || val === undefined || val === '') return null
-  const n = Number(val)
-  return Number.isNaN(n) ? null : n
-}
+export type RangeValue = [number | null, number | null]
 
-export interface NumberRangeProps {
-  /** 数组模式绑定值 [min, max]，与 start/end 二选一；值可以是 string 或 number */
+const props = withDefaults(defineProps<{
+  /** 数组模式绑定值 [min, max] */
   modelValue?: RangeValue
-  /** 双字段模式 - 起始值（支持 string 类型数字） */
-  start?: number | string | null
-  /** 双字段模式 - 结束值（支持 string 类型数字） */
-  end?: number | string | null
+  /** 双字段模式 - 起始值 */
+  start?: number | null
+  /** 双字段模式 - 结束值 */
+  end?: number | null
   minPlaceholder?: string
   maxPlaceholder?: string
-  /** 两个输入框之间的分隔文字 */
   separator?: string
-  /** 允许输入的最小边界 */
-  min?: number
-  /** 允许输入的最大边界 */
-  max?: number
-  step?: number
-  /** 小数位数限制，如 2 表示最多两位小数 */
+  /** 小数位数限制 */
   precision?: number
   disabled?: boolean
-}
-
-/**
- * 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?: string,
-  trigger = 'change'
-): FormItemRule {
-  return {
-    trigger,
-    validator: startField
-      ? (_r: unknown, _v: unknown, cb: ValidatorCb, source: Record<string, unknown>) =>
-          cb(toNum(source[startField]) == null ? new Error(message) : undefined)
-      : (_r: unknown, v: unknown, cb: ValidatorCb) => {
-          const arr = v as RangeValue | undefined
-          cb(!Array.isArray(arr) || toNum(arr[0]) == null || toNum(arr[1]) == null ? new Error(message) : undefined)
-        }
-  }
-}
-
-/** 区间大小校验规则（结束值 >= 起始值） */
-export function rangeRule(
-  message = '结束值不能小于起始值',
-  startField?: string,
-  trigger = 'change'
-): FormItemRule {
-  return {
-    trigger,
-    validator: startField
-      ? (_r: unknown, v: unknown, cb: ValidatorCb, source: Record<string, unknown>) => {
-          const startNum = toNum(source[startField])
-          const endNum = toNum(v)
-          cb(startNum != null && endNum != null && endNum < startNum ? new Error(message) : undefined)
-        }
-      : (_r: unknown, v: unknown, cb: ValidatorCb) => {
-          const arr = v as RangeValue | undefined
-          const minNum = toNum(arr?.[0])
-          const maxNum = toNum(arr?.[1])
-          cb(minNum != null && maxNum != null && maxNum < minNum ? new Error(message) : undefined)
-        }
-  }
-}
-</script>
-
-<script setup lang="ts">
-import { ref, watch, computed, inject } from 'vue'
-import { formItemContextKey } from 'element-plus'
-
-const props = withDefaults(defineProps<NumberRangeProps>(), {
+  /** 自定义错误提示 */
+  errorMessage?: string
+}>(), {
   modelValue: undefined,
   start: undefined,
   end: undefined,
   minPlaceholder: '最小值',
   maxPlaceholder: '最大值',
   separator: '到',
-  min: -Infinity,
-  max: Infinity,
-  step: 1,
   precision: undefined,
-  disabled: false
+  disabled: false,
+  errorMessage: '结束值不能小于起始值'
 })
 
 const emit = defineEmits<{
   'update:modelValue': [value: RangeValue]
   'update:start': [value: number | null]
   'update:end': [value: number | null]
-  change: [value: RangeValue]
+  /** 校验状态变化：true 表示通过，false 表示不通过 */
+  'validate': [valid: boolean]
 }>()
 
-/** 检测是否处于 el-form-item 内，有则交给 form 校验，无则组件内部校验 */
-const formItemContext = inject(formItemContextKey, undefined)
-const useInternalValidation = computed(() => !formItemContext)
-
-/** 根据是否传入 modelValue 自动判断绑定模式 */
+// 判断绑定模式
 const isArrayMode = computed(() => props.modelValue !== undefined)
 
-function getInitMin(): number | null {
-  return toNum(isArrayMode.value ? props.modelValue?.[0] : props.start)
-}
-function getInitMax(): number | null {
-  return toNum(isArrayMode.value ? props.modelValue?.[1] : props.end)
-}
-
-function toDisplay(val: number | null): string {
-  if (val === null) return ''
-  return String(val)
-}
+// 显示值
+const minDisplay = ref('')
+const maxDisplay = ref('')
 
-const minDisplay = ref(toDisplay(getInitMin()))
-const maxDisplay = ref(toDisplay(getInitMax()))
+// 焦点状态
 const minFocused = ref(false)
 const maxFocused = ref(false)
+const hasBlurred = ref(false) // 是否已失焦过
 
-/**
- * 输入过滤：只允许数字、小数点、负号；
- * 小数点仅保留第一个，小数位数受 precision 约束
- */
-function sanitize(raw: string | null | undefined): string {
-  if (raw === '' || raw === null || raw === undefined) return ''
-  let s = raw.replace(/[^0-9.\-]/g, '')
+// 校验状态
+const rangeInvalid = computed(() => {
+  const min = toNum(minDisplay.value)
+  const max = toNum(maxDisplay.value)
+  return min !== null && max !== null && max < min
+})
+
+// 显示错误：两个输入框都失焦后且校验不通过
+const showError = computed(() => hasBlurred.value && !minFocused.value && !maxFocused.value && rangeInvalid.value)
+
+// 转换为数字
+function toNum(val: unknown): number | null {
+  if (val === null || val === undefined || val === '') return null
+  const n = Number(val)
+  return Number.isNaN(n) ? null : n
+}
 
+// 输入过滤
+function sanitize(raw: string): string {
+  if (!raw) return ''
+  let s = raw.replace(/[^0-9.\-]/g, '')
   const negative = s.startsWith('-')
   s = s.replace(/-/g, '')
   if (negative) s = '-' + s
-
   const dotIdx = s.indexOf('.')
   if (dotIdx !== -1) {
     const intPart = s.slice(0, dotIdx)
@@ -197,127 +117,101 @@ function sanitize(raw: string | null | undefined): string {
   return s
 }
 
-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: number | null | undefined): number | null {
-  if (val === null || val === undefined) return null
+function formatNum(val: number | null): number | null {
+  if (val === null) return null
   if (props.precision !== undefined) {
-    return Number(Number(val).toFixed(props.precision))
+    return Number(val.toFixed(props.precision))
   }
-  return Number(val)
+  return val
 }
 
-const rangeInvalid = computed(() => {
-  const minNum = parseNum(minDisplay.value)
-  const maxNum = parseNum(maxDisplay.value)
-  return minNum !== null && maxNum !== null && maxNum < minNum
-})
-
-const isValid = computed(() => !rangeInvalid.value)
-
-/** 内部校验：仅在无 el-form-item 且两个输入框都失焦后展示 */
-const blurred = ref(false)
-const showInternalError = computed(() =>
-  useInternalValidation.value && blurred.value && rangeInvalid.value
-)
-
-/** 根据绑定模式 emit 对应事件 */
-function emitValue(): void {
-  const minVal = formatNum(parseNum(minDisplay.value))
-  const maxVal = formatNum(parseNum(maxDisplay.value))
+function emitValue() {
+  const minVal = formatNum(toNum(minDisplay.value))
+  const maxVal = formatNum(toNum(maxDisplay.value))
   if (isArrayMode.value) {
     emit('update:modelValue', [minVal, maxVal])
   } else {
     emit('update:start', minVal)
     emit('update:end', maxVal)
   }
-  emit('change', [minVal, maxVal])
+  // 发送校验状态
+  emit('validate', !rangeInvalid.value)
 }
 
-function onMinInput(val: string | number): void {
+function onMinInput(val: string | number) {
   minDisplay.value = sanitize(String(val))
 }
 
-function onMaxInput(val: string | number): void {
+function onMaxInput(val: string | number) {
   maxDisplay.value = sanitize(String(val))
 }
 
-function onMinClear(): void {
+function onMinClear() {
   minDisplay.value = ''
   emitValue()
 }
 
-function onMaxClear(): void {
+function onMaxClear() {
   maxDisplay.value = ''
   emitValue()
 }
 
-function onMinFocus(): void {
-  minFocused.value = true
-}
-
-function onMaxFocus(): void {
-  maxFocused.value = true
+function onFocus() {
+  // 获取焦点时清除错误提示
+  hasBlurred.value = false
 }
 
-/** 失焦时格式化数值、钳位到 [min, max] 边界，并触发 emit */
-function onMinBlur(): void {
+function onMinBlur() {
   minFocused.value = false
-  let v = parseNum(minDisplay.value)
+  // 格式化
+  let v = toNum(minDisplay.value)
   if (v !== null) {
-    if (v < props.min) v = props.min
-    if (v > props.max) v = props.max
-    v = formatNum(v)!
-    minDisplay.value = String(v)
-  } else {
-    minDisplay.value = ''
+    minDisplay.value = String(formatNum(v))
   }
   emitValue()
-  if (!minFocused.value && !maxFocused.value) blurred.value = true
+  // 两个都失焦后标记
+  if (!minFocused.value && !maxFocused.value) {
+    hasBlurred.value = true
+  }
 }
 
-function onMaxBlur(): void {
+function onMaxBlur() {
   maxFocused.value = false
-  let v = parseNum(maxDisplay.value)
+  let v = toNum(maxDisplay.value)
   if (v !== null) {
-    if (v > props.max) v = props.max
-    if (v < props.min) v = props.min
-    v = formatNum(v)!
-    maxDisplay.value = String(v)
-  } else {
-    maxDisplay.value = ''
+    maxDisplay.value = String(formatNum(v))
   }
   emitValue()
-  if (!minFocused.value && !maxFocused.value) blurred.value = true
+  if (!minFocused.value && !maxFocused.value) {
+    hasBlurred.value = true
+  }
 }
 
+// 手动校验方法
 function validate(): boolean {
-  blurred.value = true
-  return isValid.value
+  hasBlurred.value = true
+  return !rangeInvalid.value
 }
 
-defineExpose({ validate, isValid })
+// 重置方法
+function reset() {
+  minDisplay.value = ''
+  maxDisplay.value = ''
+  hasBlurred.value = false
+}
 
-/** 外部 v-model 变化时同步内部显示值；重置为空时清除焦点状态 */
+defineExpose({ validate, reset })
+
+// 同步外部值
 watch(
   () => isArrayMode.value ? props.modelValue : [props.start, props.end],
   (val) => {
-    const newMin = toDisplay(toNum(val?.[0]))
-    const newMax = toDisplay(toNum(val?.[1]))
+    const newMin = val?.[0] != null ? String(val[0]) : ''
+    const newMax = val?.[1] != null ? String(val[1]) : ''
     if (newMin !== minDisplay.value) minDisplay.value = newMin
     if (newMax !== maxDisplay.value) maxDisplay.value = newMax
-    if (toNum(val?.[0]) == null && toNum(val?.[1]) == null) {
-      minFocused.value = false
-      maxFocused.value = false
-      blurred.value = false
-    }
   },
-  { deep: true }
+  { immediate: true, deep: true }
 )
 </script>
 
@@ -326,7 +220,6 @@ watch(
   display: flex;
   align-items: center;
   gap: 8px;
-  width: 100%;
   flex-wrap: wrap;
 }
 
@@ -354,6 +247,6 @@ watch(
   color: var(--el-color-danger);
   font-size: 12px;
   line-height: 1;
-  padding-top: 2px;
+  padding-top: 4px;
 }
 </style>