vue2server7 7.0.7 → 7.0.9

package/frontEnd/src/components/NumberRange.vue

@@ -0,0 +1,318 @@
+<template>
+  <div class="number-range" :class="{ 'is-disabled': disabled }">
+    <el-input
+      v-model="minDisplay"
+      class="number-range__input"
+      :placeholder="minPlaceholder"
+      :disabled="disabled"
+      clearable
+      @input="onMinInput"
+      @focus="onMinFocus"
+      @blur="onMinBlur"
+      @clear="onMinClear"
+    />
+    <span class="number-range__separator">{{ separator }}</span>
+    <el-input
+      v-model="maxDisplay"
+      class="number-range__input"
+      :placeholder="maxPlaceholder"
+      :disabled="disabled"
+      clearable
+      @input="onMaxInput"
+      @focus="onMaxFocus"
+      @blur="onMaxBlur"
+      @clear="onMaxClear"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import type { FormItemRule } from 'element-plus'
+
+type RangeValue = [number | null, number | null]
+type ValidatorCb = (error?: Error) => void
+
+/**
+ * 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(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)
+        }
+  }
+}
+
+/** 区间大小校验规则（结束值 >= 起始值） */
+export function rangeRule(
+  message = '结束值不能小于起始值',
+  startField?: string,
+  trigger = 'change'
+): FormItemRule {
+  return {
+    trigger,
+    validator: startField
+      ? (_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 lang="ts">
+import { ref, watch, computed } from 'vue'
+
+type Nullable<T> = T | null | undefined
+
+interface Props {
+  /** 数组模式绑定值 [min, max]，与 start/end 二选一 */
+  modelValue?: RangeValue
+  /** 双字段模式 - 起始值 */
+  start?: number | null
+  /** 双字段模式 - 结束值 */
+  end?: number | null
+  minPlaceholder?: string
+  maxPlaceholder?: string
+  /** 两个输入框之间的分隔文字 */
+  separator?: string
+  /** 允许输入的最小边界 */
+  min?: number
+  /** 允许输入的最大边界 */
+  max?: number
+  step?: number
+  /** 小数位数限制，如 2 表示最多两位小数 */
+  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': [value: RangeValue]
+  'update:start': [value: number | null]
+  'update:end': [value: number | null]
+  change: [value: RangeValue]
+}>()
+
+/** 根据是否传入 modelValue 自动判断绑定模式 */
+const isArrayMode = computed(() => props.modelValue !== undefined)
+
+function getInitMin(): Nullable<number> {
+  return isArrayMode.value ? props.modelValue?.[0] : props.start
+}
+function getInitMax(): Nullable<number> {
+  return isArrayMode.value ? props.modelValue?.[1] : props.end
+}
+
+function toDisplay(val: Nullable<number>): string {
+  if (val === null || val === undefined) return ''
+  return String(val)
+}
+
+const minDisplay = ref(toDisplay(getInitMin()))
+const maxDisplay = ref(toDisplay(getInitMax()))
+const minFocused = ref(false)
+const maxFocused = 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 negative = s.startsWith('-')
+  s = s.replace(/-/g, '')
+  if (negative) s = '-' + s
+
+  const dotIdx = s.indexOf('.')
+  if (dotIdx !== -1) {
+    const intPart = s.slice(0, dotIdx)
+    let decPart = s.slice(dotIdx + 1).replace(/\./g, '')
+    if (props.precision !== undefined) {
+      decPart = decPart.slice(0, props.precision)
+    }
+    s = intPart + '.' + decPart
+  }
+  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
+  if (props.precision !== undefined) {
+    return Number(Number(val).toFixed(props.precision))
+  }
+  return Number(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)
+
+/** 根据绑定模式 emit 对应事件 */
+function emitValue(): void {
+  const minVal = formatNum(parseNum(minDisplay.value))
+  const maxVal = formatNum(parseNum(maxDisplay.value))
+  if (isArrayMode.value) {
+    emit('update:modelValue', [minVal, maxVal])
+  } else {
+    emit('update:start', minVal)
+    emit('update:end', maxVal)
+  }
+  emit('change', [minVal, maxVal])
+}
+
+function onMinInput(val: string | number): void {
+  minDisplay.value = sanitize(String(val))
+}
+
+function onMaxInput(val: string | number): void {
+  maxDisplay.value = sanitize(String(val))
+}
+
+function onMinClear(): void {
+  minDisplay.value = ''
+  emitValue()
+}
+
+function onMaxClear(): void {
+  maxDisplay.value = ''
+  emitValue()
+}
+
+function onMinFocus(): void {
+  minFocused.value = true
+}
+
+function onMaxFocus(): void {
+  maxFocused.value = true
+}
+
+/** 失焦时格式化数值、钳位到 [min, max] 边界，并触发 emit */
+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)!
+    minDisplay.value = String(v)
+  } else {
+    minDisplay.value = ''
+  }
+  emitValue()
+}
+
+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)!
+    maxDisplay.value = String(v)
+  } else {
+    maxDisplay.value = ''
+  }
+  emitValue()
+}
+
+function validate(): boolean {
+  return isValid.value
+}
+
+defineExpose({ validate, isValid })
+
+/** 外部 v-model 变化时同步内部显示值；重置为空时清除焦点状态 */
+watch(
+  () => isArrayMode.value ? props.modelValue : [props.start, props.end],
+  (val) => {
+    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?.[1] == null)) {
+      minFocused.value = false
+      maxFocused.value = false
+    }
+  },
+  { deep: true }
+)
+</script>
+
+<style scoped>
+.number-range {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.number-range__input {
+  width: 140px;
+}
+
+.number-range__separator {
+  color: var(--el-text-color-primary);
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.number-range.is-disabled .number-range__separator {
+  color: var(--el-text-color-placeholder);
+}
+</style>

package/frontEnd/src/pages/TablePage.vue

@@ -1,21 +1,33 @@
 <template>
   <section class="page table-page">
     <h1 class="title">表格页面</h1>
-    <div class="toolbar">
-      <el-input v-model="keyword" placeholder="按主题搜索" clearable style="width: 240px" />
-      <el-select v-model="type" placeholder="类型" clearable style="width: 160px; margin-left: 8px">
-        <el-option label="培训" value="TRAINING" />
-        <el-option label="晨夕会" value="MORNING" />
-      </el-select>
-      <el-button type="primary" @click="onSearch" style="margin-left: 8px">查询</el-button>
-      <el-button @click="onReset" style="margin-left: 8px">重置</el-button>
-      <el-popover placement="bottom" trigger="click" width="260">
-        <template #reference>
-          <el-button style="margin-left: 8px">列设置</el-button>
-        </template>
-        <ColumnSettings v-model="visibleKeys" :columns="columns" />
-      </el-popover>
-    </div>
+    <el-form ref="searchFormRef" :model="searchForm" :rules="searchRules" inline class="toolbar">
+      <el-form-item prop="keyword">
+        <el-input v-model="searchForm.keyword" placeholder="按主题搜索" clearable style="width: 240px" />
+      </el-form-item>
+      <el-form-item prop="type" label="类型">
+        <el-select v-model="searchForm.type" placeholder="类型" clearable style="width: 160px">
+          <el-option label="培训" value="TRAINING" />
+          <el-option label="晨夕会" value="MORNING" />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="amountRange" label="金额范围">
+        <NumberRange v-model="searchForm.amountRange" min-placeholder="最小金额" max-placeholder="最大金额" :precision="2" />
+      </el-form-item>
+      <el-form-item prop="ageMax" label="年龄范围" required>
+        <NumberRange v-model:start="searchForm.ageMin" v-model:end="searchForm.ageMax" min-placeholder="最小年龄" max-placeholder="最大年龄" :precision="0" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSearch">查询</el-button>
+        <el-button @click="onReset">重置</el-button>
+        <el-popover placement="bottom" trigger="click" width="260">
+          <template #reference>
+            <el-button>列设置</el-button>
+          </template>
+          <ColumnSettings v-model="visibleKeys" :columns="columns" />
+        </el-popover>
+      </el-form-item>
+    </el-form>
 
     <el-table
       :key="tableKey"
@@ -72,11 +84,27 @@
 <script>
 import { get } from '../utils/request'
 import ColumnSettings from '../components/ColumnSettings.vue'
+import NumberRange, { rangeRule, rangeRequired } from '../components/NumberRange.vue'
 
 export default {
   name: 'TablePage',
   data() {
     return {
+      searchForm: {
+        keyword: '',
+        type: '',
+        amountRange: [null, null],
+        ageMin: null,
+        ageMax: null
+      },
+      searchRules: {
+        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
+        amountRange: [rangeRule('结束金额不能小于起始金额')],
+        ageMax: [
+          rangeRequired('请输入年龄范围', 'ageMin'),
+          rangeRule('结束年龄不能小于起始年龄', 'ageMin')
+        ]
+      },
       columns: [
         { key: 'organizationName', prop: 'organizationName', label: '所属机构', minWidth: 160 },
         { key: 'meetSubj', prop: 'meetSubj', label: '会议主题', minWidth: 240 },
@@ -94,13 +122,12 @@ export default {
       pageSize: 10,
       sortField: 'createTm',
       sortOrder: 'descending',
-      keyword: '',
-      type: '',
       tableKey: 0
     }
   },
   components: {
-    ColumnSettings
+    ColumnSettings,
+    NumberRange
   },
   created() {
     this.visibleKeys = this.columns.map(c => c.key)
@@ -108,25 +135,32 @@ export default {
   },
   methods: {
     async fetch() {
+      const { keyword, type, amountRange, ageMin, ageMax } = this.searchForm
       const params = {
         page: this.page,
         pageSize: this.pageSize,
         sortField: this.sortField,
         sortOrder: this.sortOrder
       }
-      if (this.keyword) params.meetSubj = this.keyword
-      if (this.type) params.meetTypeCd = this.type
+      if (keyword) params.meetSubj = keyword
+      if (type) params.meetTypeCd = type
+      if (amountRange[0] !== null) params.amountMin = amountRange[0]
+      if (amountRange[1] !== null) params.amountMax = amountRange[1]
+      if (ageMin !== null) params.ageMin = ageMin
+      if (ageMax !== null) params.ageMax = ageMax
       const res = await get('/meeting/list', params)
       this.rows = Array.isArray(res.list) ? res.list : []
       this.total = Number.isFinite(res.total) ? res.total : this.rows.length
     },
     onSearch() {
-      this.page = 1
-      this.fetch()
+      this.$refs.searchFormRef.validate((valid) => {
+        if (!valid) return
+        this.page = 1
+        this.fetch()
+      })
     },
     onReset() {
-      this.keyword = ''
-      this.type = ''
+      this.$refs.searchFormRef.resetFields()
       this.page = 1
       this.fetch()
     },
@@ -221,8 +255,6 @@ export default {
 }
 .toolbar {
   margin-bottom: 12px;
-  display: flex;
-  align-items: center;
 }
 .pagination {
   margin-top: 12px;

package/package.json

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