vue2server7 7.0.19 → 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>

package/frontEnd/src/pages/TablePage.vue

@@ -11,11 +11,11 @@
           <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 label="金额范围">
+        <NumberRange ref="amountRangeRef" v-model="searchForm.amountRange" min-placeholder="最小金额" max-placeholder="最大金额" :precision="2" error-message="结束金额不能小于起始金额" @validate="onAmountValidate" />
       </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 label="年龄范围">
+        <NumberRange ref="ageRangeRef" v-model:start="searchForm.ageMin" v-model:end="searchForm.ageMax" min-placeholder="最小年龄" max-placeholder="最大年龄" :precision="0" error-message="结束年龄不能小于起始年龄" @validate="onAgeValidate" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSearch">查询</el-button>
@@ -65,7 +65,7 @@
           <template v-else-if="col.type === 'action'">
             <el-button type="text" size="small" @click="onView(row)">详情</el-button>
             <el-button type="text" size="small" @click="onDelete(row)">删除</el-button>
-          </template>
+    x x      </template>
           <template v-else>
             {{ row[col.prop] }}
           </template>
@@ -81,168 +81,234 @@
   </section>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import { get } from '../utils/request'
 import ColumnSettings from '../components/ColumnSettings.vue'
-import NumberRange, { rangeRule, rangeRequired } from '../components/NumberRange.vue'
+import NumberRange 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 },
-        { key: 'meetNo', prop: 'meetNo', label: '会议编号', minWidth: 180 },
-        { key: 'displayName', prop: 'displayName', label: '创建人', width: 120 },
-        { key: 'meetTypeCd', prop: 'meetTypeCd', label: '类型', width: 120, align: 'center', type: 'type' },
-        { key: 'createTm', prop: 'createTm', label: '创建日期', width: 160, align: 'center', type: 'date', sortable: 'custom' },
-        { key: 'updateTm', prop: 'updateTm', label: '最近编辑时间', width: 190, align: 'center', type: 'datetime', sortable: 'custom' },
-        { key: 'action', prop: '', label: '操作', width: 140, align: 'center', fixed: 'right', type: 'action' }
-      ],
-      visibleKeys: [],
-      rows: [],
-      total: 0,
-      page: 1,
-      pageSize: 10,
-      sortField: 'createTm',
-      sortOrder: 'descending',
-      tableKey: 0
-    }
-  },
-  components: {
-    ColumnSettings,
-    NumberRange
-  },
-  created() {
-    this.visibleKeys = this.columns.map(c => c.key)
-    this.fetch()
-  },
-  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 (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.$refs.searchFormRef.validate((valid) => {
-        if (!valid) return
-        this.page = 1
-        this.fetch()
-      })
-    },
-    onReset() {
-      this.$refs.searchFormRef.resetFields()
-      this.page = 1
-      this.fetch()
-    },
-    onPageChange(p) {
-      this.page = p
-      this.fetch()
-    },
-    onSortChange({ prop, order }) {
-      this.sortField = prop || ''
-      this.sortOrder = order || ''
-      this.page = 1
-      this.fetch()
-    },
-    // 通过改变 key 强制表格重渲染，确保动态列显示/隐藏立即生效
-    bumpTableKey() {
-      this.tableKey += 1
-    },
-    onView(row) {
-      const lines = [
-        `会议主题：${row.meetSubj || ''}`,
-        `内容：${row.plainContent || ''}`,
-        `所属机构：${row.organizationName || ''}`,
-        `会议类型：${this.formatType(row.meetTypeCd)}`,
-        `创建人：${row.displayName || ''}`,
-        `创建日期：${this.formatDate(row.createTm)}`,
-        `最近编辑时间：${this.formatDateTime(row.updateTm)}`
-      ]
-      this.$alert(lines.join('\n'), '会议详情', { confirmButtonText: '确定' })
-    },
-    onDelete(row) {
-      this.$confirm(`确定删除会议「${row.meetSubj || ''}」吗？`, '提示', {
-        type: 'warning',
-        confirmButtonText: '确定',
-        cancelButtonText: '取消'
-      })
-        .then(() => {
-          this.rows = this.rows.filter(item => item.id !== row.id)
-          this.$message({ type: 'success', message: '删除成功' })
-        })
-        .catch(() => {})
-    },
-    formatType(code) {
-      if (code === 'TRAINING') return '培训'
-      if (code === 'MORNING') return '晨夕会'
-      return code || ''
-    },
-    getTypeTag(code) {
-      if (code === 'TRAINING') return 'primary'
-      if (code === 'MORNING') return 'warning'
-      return 'info'
-    },
-    formatDate(value) {
-      if (!value) return ''
-      if (value.length === 10) return value
-      const d = new Date(value)
-      if (Number.isNaN(d.getTime())) return ''
-      const yyyy = d.getFullYear()
-      const mm = String(d.getMonth() + 1).padStart(2, '0')
-      const dd = String(d.getDate()).padStart(2, '0')
-      return `${yyyy}-${mm}-${dd}`
-    },
-    formatDateTime(value) {
-      if (!value) return ''
-      if (value.length >= 16 && value.includes(' ')) return value
-      const d = new Date(value)
-      if (Number.isNaN(d.getTime())) return ''
-      const yyyy = d.getFullYear()
-      const mm = String(d.getMonth() + 1).padStart(2, '0')
-      const dd = String(d.getDate()).padStart(2, '0')
-      const hh = String(d.getHours()).padStart(2, '0')
-      const mi = String(d.getMinutes()).padStart(2, '0')
-      const ss = String(d.getSeconds()).padStart(2, '0')
-      return `${yyyy}-${mm}-${dd} ${hh}:${mi}:${ss}`
-    }
-  }
-  ,
-  watch: {
-    visibleKeys() {
-      this.bumpTableKey()
-    }
+// 类型定义
+interface SearchForm {
+  keyword: string
+  type: string
+  amountRange: [number | null, number | null]
+  ageMin: number | null
+  ageMax: number | null
+}
+
+interface ColumnConfig {
+  key: string
+  prop: string
+  label: string
+  width?: number
+  minWidth?: number
+  align?: 'left' | 'center' | 'right'
+  headerAlign?: 'left' | 'center' | 'right'
+  sortable?: boolean | 'custom'
+  fixed?: boolean | 'left' | 'right'
+  type?: string
+}
+
+interface MeetingRow {
+  id: string | number
+  organizationName?: string
+  meetSubj?: string
+  meetNo?: string
+  displayName?: string
+  meetTypeCd?: string
+  createTm?: string
+  updateTm?: string
+  plainContent?: string
+  [key: string]: any
+}
+
+interface SortChangeParams {
+  prop?: string
+  order?: 'ascending' | 'descending' | null
+}
+
+// 组件引用
+const searchFormRef = ref<FormInstance>()
+const amountRangeRef = ref<InstanceType<typeof NumberRange>>()
+const ageRangeRef = ref<InstanceType<typeof NumberRange>>()
+
+// 校验状态
+const amountValid = ref(true)
+const ageValid = ref(true)
+
+const onAmountValidate = (valid: boolean) => {
+  amountValid.value = valid
+}
+
+const onAgeValidate = (valid: boolean) => {
+  ageValid.value = valid
+}
+
+// 响应式数据
+const searchForm = reactive<SearchForm>({
+  keyword: '',
+  type: '',
+  amountRange: [null, null],
+  ageMin: null,
+  ageMax: null
+})
+
+const searchRules = {
+  type: [{ required: true, message: '请选择类型', trigger: 'change' }]
+}
+
+const columns: ColumnConfig[] = [
+  { key: 'organizationName', prop: 'organizationName', label: '所属机构', minWidth: 160 },
+  { key: 'meetSubj', prop: 'meetSubj', label: '会议主题', minWidth: 240 },
+  { key: 'meetNo', prop: 'meetNo', label: '会议编号', minWidth: 180 },
+  { key: 'displayName', prop: 'displayName', label: '创建人', width: 120 },
+  { key: 'meetTypeCd', prop: 'meetTypeCd', label: '类型', width: 120, align: 'center', type: 'type' },
+  { key: 'createTm', prop: 'createTm', label: '创建日期', width: 160, align: 'center', type: 'date', sortable: 'custom' },
+  { key: 'updateTm', prop: 'updateTm', label: '最近编辑时间', width: 190, align: 'center', type: 'datetime', sortable: 'custom' },
+  { key: 'action', prop: '', label: '操作', width: 140, align: 'center', fixed: 'right', type: 'action' }
+]
+
+const visibleKeys = ref<string[]>([])
+const rows = ref<MeetingRow[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(10)
+const sortField = ref('createTm')
+const sortOrder = ref<'ascending' | 'descending' | ''>('descending')
+const tableKey = ref(0)
+
+// 方法
+const fetch = async () => {
+  const { keyword, type, amountRange, ageMin, ageMax } = searchForm
+  const params: Record<string, any> = {
+    page: page.value,
+    pageSize: pageSize.value,
+    sortField: sortField.value,
+    sortOrder: sortOrder.value
   }
+  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)
+  rows.value = Array.isArray(res.list) ? res.list : []
+  total.value = Number.isFinite(res.total) ? res.total : rows.value.length
+}
+
+const onSearch = () => {
+  // 校验 NumberRange 组件
+  const isAmountValid = amountRangeRef.value?.validate() ?? true
+  const isAgeValid = ageRangeRef.value?.validate() ?? true
+
+  searchFormRef.value?.validate((valid: boolean) => {
+    if (!valid || !isAmountValid || !isAgeValid) return
+    page.value = 1
+    fetch()
+  })
+}
+
+const onReset = () => {
+  searchFormRef.value?.resetFields()
+  amountRangeRef.value?.reset()
+  ageRangeRef.value?.reset()
+  page.value = 1
+  fetch()
+}
+
+const onPageChange = (p: number) => {
+  page.value = p
+  fetch()
+}
+
+const onSortChange = ({ prop, order }: SortChangeParams) => {
+  sortField.value = prop || ''
+  sortOrder.value = order || ''
+  page.value = 1
+  fetch()
+}
+
+// 通过改变 key 强制表格重渲染，确保动态列显示/隐藏立即生效
+const bumpTableKey = () => {
+  tableKey.value += 1
 }
+
+const onView = (row: MeetingRow) => {
+  const lines = [
+    `会议主题：${row.meetSubj || ''}`,
+    `内容：${row.plainContent || ''}`,
+    `所属机构：${row.organizationName || ''}`,
+    `会议类型：${formatType(row.meetTypeCd)}`,
+    `创建人：${row.displayName || ''}`,
+    `创建日期：${formatDate(row.createTm)}`,
+    `最近编辑时间：${formatDateTime(row.updateTm)}`
+  ]
+  ElMessageBox.alert(lines.join('\n'), '会议详情', { confirmButtonText: '确定' })
+}
+
+const onDelete = (row: MeetingRow) => {
+  ElMessageBox.confirm(`确定删除会议「${row.meetSubj || ''}」吗？`, '提示', {
+    type: 'warning',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消'
+  })
+    .then(() => {
+      rows.value = rows.value.filter(item => item.id !== row.id)
+      ElMessage({ type: 'success', message: '删除成功' })
+    })
+    .catch(() => {})
+}
+
+const formatType = (code?: string): string => {
+  if (code === 'TRAINING') return '培训'
+  if (code === 'MORNING') return '晨夕会'
+  return code || ''
+}
+
+const getTypeTag = (code?: string): string => {
+  if (code === 'TRAINING') return 'primary'
+  if (code === 'MORNING') return 'warning'
+  return 'info'
+}
+
+const formatDate = (value?: string): string => {
+  if (!value) return ''
+  if (value.length === 10) return value
+  const d = new Date(value)
+  if (Number.isNaN(d.getTime())) return ''
+  const yyyy = d.getFullYear()
+  const mm = String(d.getMonth() + 1).padStart(2, '0')
+  const dd = String(d.getDate()).padStart(2, '0')
+  return `${yyyy}-${mm}-${dd}`
+}
+
+const formatDateTime = (value?: string): string => {
+  if (!value) return ''
+  if (value.length >= 16 && value.includes(' ')) return value
+  const d = new Date(value)
+  if (Number.isNaN(d.getTime())) return ''
+  const yyyy = d.getFullYear()
+  const mm = String(d.getMonth() + 1).padStart(2, '0')
+  const dd = String(d.getDate()).padStart(2, '0')
+  const hh = String(d.getHours()).padStart(2, '0')
+  const mi = String(d.getMinutes()).padStart(2, '0')
+  const ss = String(d.getSeconds()).padStart(2, '0')
+  return `${yyyy}-${mm}-${dd} ${hh}:${mi}:${ss}`
+}
+
+// 监听器
+watch(visibleKeys, () => {
+  bumpTableKey()
+})
+
+// 生命周期
+onMounted(() => {
+  visibleKeys.value = columns.map(c => c.key)
+  fetch()
+})
 </script>
 
 <style scoped>

package/package.json

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