2
0

fix:用户管理用户信息界面

This commit is contained in:
zhongzm
2024-12-18 17:30:52 +08:00
parent 609edf74bc
commit 0939032e9b
3 changed files with 108 additions and 56 deletions

View File

@@ -9,57 +9,52 @@ import { doGetUserList } from '@/service/api/user';
import type { UserInfo, SearchModel } from '@/views/user-center/user/type'; import type { UserInfo, SearchModel } from '@/views/user-center/user/type';
// 修改API函数实现 // 修改API函数实现
const doGetUserInfo: AntDesign.TableApiFn<UserInfo, SearchModel> = async (params: SearchModel) => { const doGetUserInfo = async (params: SearchModel) => {
try { try {
console.log('Search params received in API function:', params); console.log('API function received params:', params);
// 构造API请求参数 const apiParams: Api.SystemManage.UserSearchParams = {
const apiParams = {
userName: params.username, userName: params.username,
email: params.email, email: params.email,
pageNum: params.pageNum, pageNum: params.pageNum,
pageSize: params.pageSize pageSize: params.pageSize
}; };
console.log('Sending to API:', apiParams); console.log('Sending API request with params:', apiParams);
const { data, error } = await doGetUserList(apiParams); const response = await doGetUserList(apiParams);
console.log('Response:', data, error);
if (error) { if (!response.data) {
return { return {
data: { data: {
rows: [], rows: [],
total: 0 total: 0
}, }
error: null
}; };
} }
return { return {
data: { data: {
rows: data.rows.map(user => ({ rows: response.data.rows.map(user => ({
userId: user.userId, userId: user.userId,
username: user.userName, username: user.userName,
fullname: user.nickName, fullname: user.nickName,
sex: user.sex === '1' ? 'M' : 'F', sex: user.sex === '1' ? 'M' : 'F',
birthdate: user.createTime?.split(' ')[0] || '-', birthdate: user.createTime?.split(' ')[0] || '-',
age: 0, // 如果后端没有提供年龄字段可以设为0或者根据生日计算 age: calculateAge(user.createTime),
email: user.email, email: user.email,
phonenumber: user.phonenumber, phonenumber: user.phonenumber,
isKYC: user.status === '0' // 假设status为'0'表示已验证 isKYC: user.status === '0'
})), })),
total: data.total total: response.data.total
}, }
error: null
}; };
} catch (err) { } catch (err) {
return { return {
data: { data: {
rows: [], rows: [],
total: 0 total: 0
}, }
error: null
}; };
} }
}; };
@@ -83,7 +78,7 @@ const {
mobilePagination, mobilePagination,
searchParams, searchParams,
updateSearchParams, updateSearchParams,
resetSearchParams
} = useTable({ } = useTable({
apiFn: doGetUserInfo, apiFn: doGetUserInfo,
immediate: true, immediate: true,
@@ -166,26 +161,53 @@ const {
] ]
}); });
const handUpdateModel = (item: SearchModel) => {
console.log('Received updated model:', item);
// 更新搜索参数
updateSearchParams({
...item,
pageNum: 1 // 每次搜索条件改变时重置页码
});
};
// 处理搜索 // 处理搜索
const handleSearch = () => { const handleSearch = () => {
// 使用 updateSearchParams 更新搜索参数 // 直接使用已更新搜索参数
updateSearchParams({ console.log('Executing search with params:', searchParams.value);
...searchParams,
pageNum: 1 // 搜索时重置页码
});
getData(); getData();
}; };
// 处理重置 // 处理重置
const handleReset = () => { const handleReset = () => {
const defaultParams = { // 定义默认参数
const defaultParams: SearchModel = {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
username: undefined, username: undefined,
email: undefined email: undefined
}; };
console.log('Resetting search params to:', defaultParams);
// 更新搜索参数到默认值
updateSearchParams(defaultParams); updateSearchParams(defaultParams);
resetSearchParams();
// 重新获取数据
getData();
};
const calculateAge = (birthDate: string): number => {
if (!birthDate) return 0;
const birth = new Date(birthDate);
const today = new Date();
let age = today.getFullYear() - birth.getFullYear();
const monthDiff = today.getMonth() - birth.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
age--;
}
return age;
}; };
</script> </script>
@@ -194,6 +216,7 @@ const handleReset = () => {
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"> <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<UserSearch <UserSearch
v-model:model="searchParams" v-model:model="searchParams"
@updateModel="handUpdateModel"
@reset="handleReset" @reset="handleReset"
@search="handleSearch" @search="handleSearch"
/> />

View File

@@ -8,60 +8,69 @@ const props = defineProps<{
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
'update:model': [value: SearchModel]; 'updateModel': [value: SearchModel];
'reset': []; 'reset': [];
'search': []; 'search': [];
}>(); }>();
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const localSearchParams = ref<SearchModel>({
pageNum: props.model.pageNum,
pageSize: props.model.pageSize,
username: props.model.username,
email: props.model.email
});
// 修改计算属性的实现 // 修改计算属性的实现
const formModel = computed({ const formModel = computed({
get: () => ({ get: () => ({
username: props.model.username, username: props.model.username ?? '',
email: props.model.email email: props.model.email ?? ''
}), }),
set: (val: Partial<SearchModel>) => { set: (val: Partial<{ username: string; email: string }>) => {
emit('update:model', { emit('updateModel', {
...props.model, ...props.model,
...val username: val.username || undefined,
email: val.email || undefined
}); });
} }
}); });
const handleReset = () => { const handleReset = () => {
// 重置表单字段
formRef.value?.resetFields(); formRef.value?.resetFields();
localSearchParams.value = {
// 重置表单模型的值
formModel.value = {
username: '',
email: ''
};
// 定义默认参数
const defaultParams: SearchModel = {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
username: undefined, username: undefined,
email: undefined email: undefined
}; };
emit('update:model', localSearchParams.value);
console.log('Emitting reset with params:', defaultParams);
// 发送更新事件
emit('updateModel', defaultParams);
// 发送重置事件
emit('reset'); emit('reset');
}; };
const handleSearch = () => { const handleSearch = () => {
// 确保搜索时更新所有参数 console.log('Search form values:', formModel.value);
// 确保所有必要的字段都存在
const updatedParams: SearchModel = { const updatedParams: SearchModel = {
...props.model, pageNum: props.model.pageNum || 1,
pageNum: 1, pageSize: props.model.pageSize || 10,
pageSize: 10, username: formModel.value.username || undefined,
username: formModel.value.username, email: formModel.value.email || undefined
email: formModel.value.email
}; };
console.log('Search triggered with params:', updatedParams); console.log('Emitting updated params:', updatedParams);
// 直接更新父组件的参数 emit('updateModel', updatedParams);
emit('update:model', updatedParams);
// 触发搜索
emit('search'); emit('search');
}; };
</script> </script>

View File

@@ -1,3 +1,10 @@
export interface SearchModel {
pageNum: number;
pageSize: number;
username?: string;
email?: string;
}
export interface UserInfo { export interface UserInfo {
userId: number; userId: number;
username: string; username: string;
@@ -10,9 +17,22 @@ export interface UserInfo {
isKYC: boolean; isKYC: boolean;
} }
export type SearchModel = { // 添加后端API返回的用户类型
pageNum: number; export interface ApiUser {
pageSize: number; userId: number;
username?: string; userName: string;
email?: string; nickName: string;
}; email: string;
phonenumber: string;
sex: string;
status: '0' | '1';
createTime: string;
}
// API响应类型
export interface ApiResponse<T> {
rows: T[];
total: number;
code: number;
msg: string;
}