feat: 优化报名人数筛选功能
This commit is contained in:
@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
InputNumber,
|
||||
Table,
|
||||
Form,
|
||||
Space,
|
||||
@@ -20,8 +21,6 @@ import {
|
||||
} from './model/useEventListModel';
|
||||
import { useEventListColumns } from './model/useEventListColumns';
|
||||
import { getProvinceCityCascaderOptions } from '@/utils/areaData';
|
||||
import { toIntegerOnly } from '@/utils/form';
|
||||
import { handleIntegerInput, handleIntegerBlur, blockNonDigitKey } from './model/integerInput';
|
||||
import { useContainerSize } from '@/hooks';
|
||||
import { usePermissionStore } from '@/stores/permissionStore';
|
||||
import EventRegulationModal from './components/EventRegulationModal';
|
||||
@@ -270,15 +269,17 @@ export default defineComponent({
|
||||
</Form.Item>
|
||||
<Form.Item label="报名人数">
|
||||
<Space.Compact>
|
||||
<Input
|
||||
value={filterForm.scBegin}
|
||||
<InputNumber
|
||||
placeholder="请输入"
|
||||
style={{ width: '100px' }}
|
||||
allowClear
|
||||
onInput={(e: Event) => handleIntegerInput(e, (v) => (filterForm.scBegin = v))}
|
||||
onKeydown={blockNonDigitKey}
|
||||
onBlur={(e: Event) => handleIntegerBlur(e, (v) => (filterForm.scBegin = v))}
|
||||
onUpdate:value={(val: string) => (filterForm.scBegin = toIntegerOnly(val))}
|
||||
style={{ width: '140px' }}
|
||||
value={filterForm.scBegin || undefined}
|
||||
precision={0}
|
||||
step={0}
|
||||
min={0}
|
||||
controls={false}
|
||||
onUpdate:value={(val: any) =>
|
||||
(filterForm.scBegin = val != null ? String(val) : '')
|
||||
}
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
<Input
|
||||
@@ -292,15 +293,15 @@ export default defineComponent({
|
||||
value="至"
|
||||
disabled
|
||||
/>
|
||||
<Input
|
||||
value={filterForm.scEnd}
|
||||
<InputNumber
|
||||
placeholder="请输入"
|
||||
style={{ width: '100px' }}
|
||||
allowClear
|
||||
onInput={(e: Event) => handleIntegerInput(e, (v) => (filterForm.scEnd = v))}
|
||||
onKeydown={blockNonDigitKey}
|
||||
onBlur={(e: Event) => handleIntegerBlur(e, (v) => (filterForm.scEnd = v))}
|
||||
onUpdate:value={(val: string) => (filterForm.scEnd = toIntegerOnly(val))}
|
||||
style={{ width: '140px' }}
|
||||
value={filterForm.scEnd || undefined}
|
||||
precision={0}
|
||||
step={0}
|
||||
min={0}
|
||||
controls={false}
|
||||
onUpdate:value={(val: any) => (filterForm.scEnd = val != null ? String(val) : '')}
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Space.Compact>
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
/** 报名人数筛选项 — 整数输入处理(页面特有逻辑) */
|
||||
|
||||
import { toIntegerOnly } from '@/utils/form';
|
||||
|
||||
/** 整数规范化:去除前导零,如 055 → 55;空值保持为空 */
|
||||
function normalizeIntegerString(value: unknown): string {
|
||||
const digits = toIntegerOnly(value);
|
||||
if (!digits) return '';
|
||||
return String(parseInt(digits, 10));
|
||||
}
|
||||
|
||||
/** 整数 Input 事件处理:同步过滤 DOM 值与外部状态 */
|
||||
export function handleIntegerInput(e: Event, setter: (value: string) => void): void {
|
||||
const el = e.target as HTMLInputElement | null;
|
||||
if (!el) return;
|
||||
|
||||
const next = toIntegerOnly(el.value);
|
||||
if (el.value !== next) {
|
||||
el.value = next;
|
||||
}
|
||||
setter(next);
|
||||
}
|
||||
|
||||
/** 整数 Input 失焦处理:规范化数字并同步状态 */
|
||||
export function handleIntegerBlur(e: Event, setter: (value: string) => void): void {
|
||||
const el = e.target as HTMLInputElement | null;
|
||||
if (!el) return;
|
||||
|
||||
const next = normalizeIntegerString(el.value);
|
||||
if (el.value !== next) {
|
||||
el.value = next;
|
||||
}
|
||||
setter(next);
|
||||
}
|
||||
|
||||
/** 阻止非数字键入(含小数点),配合 handleIntegerInput 处理粘贴 */
|
||||
export function blockNonDigitKey(e: KeyboardEvent): void {
|
||||
if (e.ctrlKey || e.metaKey || e.altKey) return;
|
||||
if (e.key.length !== 1) return;
|
||||
if (!/^\d$/.test(e.key)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user