vue2server7 7.0.6 → 7.0.8

package/frontEnd/src/components/NumberRange.vue

@@ -0,0 +1,354 @@
+<!--
+  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
+      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>
+/**
+ * 区间必填校验规则，用于 el-form rules
+ * @param {string}  message    - 校验失败提示文案
+ * @param {string}  startField - 双字段模式下起始字段名；不传则为数组模式
+ * @param {string}  trigger    - 触发方式，默认 'change'
+ */
+export function rangeRequired(message = '请输入完整区间', startField, trigger = 'change') {
+  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)
+  }
+}
+
+/**
+ * 区间大小校验规则（结束值 >= 起始值），用于 el-form rules
+ * @param {string}  message    - 校验失败提示文案
+ * @param {string}  startField - 双字段模式下起始字段名；不传则为数组模式
+ * @param {string}  trigger    - 触发方式，默认 'change'
+ */
+export function rangeRule(message = '结束值不能小于起始值', startField, trigger = 'change') {
+  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)
+  }
+}
+</script>
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+
+const props = defineProps({
+  /** 数组模式绑定值 [min, max]，与 start/end 二选一 */
+  modelValue: { type: Array, default: undefined },
+  /** 双字段模式 - 起始值 */
+  start: { type: Number, default: undefined },
+  /** 双字段模式 - 结束值 */
+  end: { type: Number, default: undefined },
+  minPlaceholder: { type: String, default: '最小值' },
+  maxPlaceholder: { type: String, default: '最大值' },
+  separator: { type: String, default: '到' },
+  /** 允许输入的最小边界 */
+  min: { type: Number, default: -Infinity },
+  /** 允许输入的最大边界 */
+  max: { type: Number, default: Infinity },
+  step: { type: Number, default: 1 },
+  /** 小数位数限制，如 2 表示最多两位小数 */
+  precision: { type: Number, default: undefined },
+  disabled: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['update:modelValue', 'update:start', 'update:end', 'change'])
+
+/** 根据是否传入 modelValue 自动判断绑定模式 */
+const isArrayMode = computed(() => props.modelValue !== undefined)
+
+function getInitMin() {
+  return isArrayMode.value ? props.modelValue?.[0] : props.start
+}
+function getInitMax() {
+  return isArrayMode.value ? props.modelValue?.[1] : props.end
+}
+
+function toDisplay(val) {
+  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) {
+  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) {
+  if (val === '' || val === null || val === undefined) return null
+  const n = Number(val)
+  return Number.isNaN(n) ? null : n
+}
+
+/** 按 precision 格式化数值 */
+function formatNum(val) {
+  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() {
+  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) {
+  minDisplay.value = sanitize(val)
+}
+
+function onMaxInput(val) {
+  maxDisplay.value = sanitize(val)
+}
+
+function onMinClear() {
+  minDisplay.value = ''
+  emitValue()
+}
+
+function onMaxClear() {
+  maxDisplay.value = ''
+  emitValue()
+}
+
+function onMinFocus() {
+  minFocused.value = true
+}
+
+function onMaxFocus() {
+  maxFocused.value = true
+}
+
+/** 失焦时格式化数值、钳位到 [min, max] 边界，并触发 emit */
+function onMinBlur() {
+  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() {
+  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() {
+  return isValid.value
+}
+
+defineExpose({ validate, isValid })
+
+/** 外部 v-model 变化时同步内部显示值；重置为空时清除焦点状态 */
+watch(
+  () => isArrayMode.value ? props.modelValue : [props.start, props.end],
+  (val) => {
+    const newMin = toDisplay(val?.[0])
+    const newMax = toDisplay(val?.[1])
+    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)) {
+      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.6",
+  "version": "7.0.8",
   "description": "",
   "scripts": {
     "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",