admin123
/
shop-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(用户搜索): 添加统一搜索框并优化搜索逻辑 

在用户管理页面中，将原有的姓名、手机号、身份证号三个独立搜索框合并为一个统一搜索框，并根据输入内容自动识别搜索类型。新增 `handleSearchInput` 方法，通过正则表达式判断输入内容为身份证号、手机号或姓名，并动态更新搜索参数。简化了用户操作，提升了搜索体验。
This commit is contained in:
dzq 2025-05-24 16:24:03 +08:00
parent b4451bd2ea
commit e1f18cfc48
1 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/views/user/ab98/index.vue
View File

@ -19,11 +19,12 @@ defineOptions({
const router = useRouter();
const formRef = ref();
const tagOptions = ref<string[]>([]);
const searchFormParams = reactive<Ab98UserQuery>({
const searchFormParams = reactive<Ab98UserQuery & { search?: string }>({
name: undefined,
tel: undefined,
idnum: undefined,
tagName: undefined
tagName: undefined,
search: undefined
});
const pageLoading = ref(false);
@ -54,6 +55,27 @@ async function getList() {
pagination.total = data.total;
}
const handleSearchInput = (value) => {
// 身份证号正则(18位)
const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
// 手机号正则
const phoneRegex = /^1[3-9]\d{9}$/;
if (idCardRegex.test(value)) {
searchFormParams.idnum = value;
searchFormParams.name = '';
searchFormParams.tel = '';
} else if (phoneRegex.test(value)) {
searchFormParams.tel = value;
searchFormParams.name = '';
searchFormParams.idnum = '';
} else {
searchFormParams.name = value;
searchFormParams.tel = '';
searchFormParams.idnum = '';
}
};
const resetForm = formEl => {
if (!formEl) return;
formEl.resetFields();
@ -92,17 +114,9 @@ onMounted(() => {
<div class="float-right w-full">
<el-form ref="formRef" :inline="true" :model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
<el-form-item label="姓名：" prop="name">
<el-input v-model="searchFormParams.name" placeholder="请输入" clearable class="!w-[160px]"
@keyup.enter="onSearch" />
</el-form-item>
<el-form-item label="手机号：" prop="tel">
<el-input v-model="searchFormParams.tel" placeholder="请输入" clearable class="!w-[160px]"
@keyup.enter="onSearch" />
</el-form-item>
<el-form-item label="身份证：" prop="idnum">
<el-input v-model="searchFormParams.idnum" placeholder="请输入" clearable class="!w-[160px]"
@keyup.enter="onSearch" />
<el-form-item label="搜索：" prop="search">
<el-input v-model="searchFormParams.search" placeholder="请输入姓名/手机号/身份证" clearable class="!w-[300px]"
@keyup.enter="onSearch" @change="handleSearchInput" />
</el-form-item>
<el-form-item label="标签：" prop="tagName">
<el-select v-model="searchFormParams.tagName" placeholder="请选择" clearable class="!w-[160px]">