2
0

fix:用户信息界面搜索栏重置功能修复

This commit is contained in:
zhongzm
2025-02-14 14:35:34 +08:00
parent bf149afbbb
commit 410b6c40cb
2 changed files with 50 additions and 91 deletions

View File

@@ -205,18 +205,13 @@ const handleSearch = () => {
// 处理重置
const handleReset = () => {
// 定义默认参数
const defaultParams: SearchModel = {
pageNum: 1,
pageSize: 10,
username: undefined,
email: undefined
};
const currentPageSize = searchParams.pageSize;
console.log('Resetting search params to:', defaultParams);
// 更新搜索参数到默认值
updateSearchParams(defaultParams);
// 重置搜索参数
searchParams.username = '';
searchParams.email = '';
searchParams.pageNum = 1;
searchParams.pageSize = currentPageSize;
// 重新获取数据
getData();

View File

@@ -1,113 +1,77 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import type { FormInstance } from 'ant-design-vue';
import type { SearchModel } from '@/views/user-center/user/type';
import { Form as AForm, FormItem as AFormItem, Input as AInput, Button as AButton, Space as ASpace, Card as ACard } from 'ant-design-vue';
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';
const { t } = useI18n();
const props = defineProps<{
model: SearchModel;
}>();
const emit = defineEmits<{
'updateModel': [value: SearchModel];
'reset': [];
'search': [];
}>();
interface Props {
model: {
username?: string;
email?: string;
pageNum: number;
pageSize: number;
};
loading?: boolean;
}
const formRef = ref<FormInstance>();
// 修改计算属性的实现
const formModel = computed({
get: () => ({
username: props.model.username ?? '',
email: props.model.email ?? ''
}),
set: (val: Partial<{ username: string; email: string }>) => {
emit('updateModel', {
...props.model,
username: val.username || undefined,
email: val.email || undefined
});
}
const props = withDefaults(defineProps<Props>(), {
loading: false
});
const handleReset = () => {
// 重置表单字段
formRef.value?.resetFields();
const emit = defineEmits(['update:model', 'search', 'reset']);
// 重置表单模型的值
formModel.value = {
username: '',
email: ''
};
// 使用计算属性来处理双向绑定
const formModel = computed({
get: () => props.model,
set: (val) => emit('update:model', val)
});
// 定义默认参数
const defaultParams: SearchModel = {
pageNum: 1,
pageSize: 10,
username: undefined,
email: undefined
};
console.log('Emitting reset with params:', defaultParams);
// 发送更新事件
emit('updateModel', defaultParams);
// 发送重置事件
emit('reset');
const search = () => {
emit('search');
};
const handleSearch = () => {
console.log('Search form values:', formModel.value);
// 确保所有必要的字段都存在
const updatedParams: SearchModel = {
pageNum: props.model.pageNum || 1,
pageSize: props.model.pageSize || 10,
username: formModel.value.username || undefined,
email: formModel.value.email || undefined
};
console.log('Emitting updated params:', updatedParams);
emit('updateModel', updatedParams);
emit('search');
const reset = () => {
// 只触发重置事件
emit('reset');
};
</script>
<template>
<ACard :bordered="false">
<AForm
ref="formRef"
:model="formModel"
layout="inline"
class="flex flex-wrap gap-16px items-center"
>
<AFormItem :label="t('page.user.username')" name="username">
<ACard :bordered="false" class="search-card">
<AForm layout="inline">
<AFormItem :label="t('page.user.username')">
<AInput
v-model:value="formModel.username"
:placeholder="t('page.user.pleusername')"
allow-clear
class="w-200px"
@pressEnter="search"
/>
</AFormItem>
<AFormItem :label="t('page.user.email')" name="email">
<AFormItem :label="t('page.user.email')">
<AInput
v-model:value="formModel.email"
:placeholder="t('page.user.pleemail')"
allow-clear
class="w-200px"
@pressEnter="search"
/>
</AFormItem>
<AFormItem class="flex-1 justify-end mb-0">
<AFormItem>
<ASpace>
<AButton type="primary" ghost @click="handleSearch">
<AButton type="primary" ghost :loading="loading" @click="search">
<template #icon>
<icon-mdi-search />
</template>{{ t('page.user.search') }}</AButton>
<AButton @click="handleReset">
<icon-mdi-search />
</template>
{{ t('page.user.search') }}
</AButton>
<AButton @click="reset">
<template #icon>
<icon-mdi-refresh />
</template>{{ t('page.user.reset') }}</AButton>
<icon-mdi-refresh />
</template>
{{ t('page.user.reset') }}
</AButton>
</ASpace>
</AFormItem>
</AForm>