feat:用户信息界面以及话单管理界面
This commit is contained in:
zhongzm
222
src/views/user-center/user/index.vue
Normal file
222
src/views/user-center/user/index.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<script setup lang="tsx">
|
||||
import { Tag } from 'ant-design-vue';
|
||||
import { useTable } from '@/hooks/common/table';
|
||||
import { SimpleScrollbar } from '~/packages/materials/src';
|
||||
import UserSearch from './modules/user-search.vue';
|
||||
import { computed, shallowRef } from 'vue';
|
||||
import { useElementSize } from '@vueuse/core';
|
||||
import { doGetUserList } from '@/service/api/user';
|
||||
import type { UserInfo, SearchModel } from '@/views/user-center/user/type';
|
||||
|
||||
// 修改API函数实现
|
||||
const doGetUserInfo: AntDesign.TableApiFn<UserInfo, SearchModel> = async (params: SearchModel) => {
|
||||
try {
|
||||
console.log('Search params received in API function:', params);
|
||||
|
||||
// 直接使用传入的 params
|
||||
const apiParams = {
|
||||
userName: params.username,
|
||||
email: params.email,
|
||||
pageNum: params.pageNum,
|
||||
pageSize: params.pageSize
|
||||
};
|
||||
|
||||
console.log('Sending to API:', apiParams);
|
||||
|
||||
const { data, error } = await doGetUserList(apiParams);
|
||||
console.log('Response:', data, error);
|
||||
|
||||
if (error) {
|
||||
return {
|
||||
data: {
|
||||
rows: [],
|
||||
total: 0
|
||||
},
|
||||
error: null
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
rows: data.rows.map(user => ({
|
||||
userId: user.userId,
|
||||
username: user.userName,
|
||||
fullname: user.nickName,
|
||||
sex: user.sex === '1' ? 'M' : 'F',
|
||||
birthdate: user.createTime?.split(' ')[0] || '-',
|
||||
age: 0,
|
||||
email: user.email,
|
||||
phonenumber: user.phonenumber,
|
||||
isKYC: user.status === '0'
|
||||
})),
|
||||
total: data.total
|
||||
},
|
||||
error: null
|
||||
};
|
||||
} catch (err) {
|
||||
return {
|
||||
data: {
|
||||
rows: [],
|
||||
total: 0
|
||||
},
|
||||
error: null
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const wrapperEl = shallowRef<HTMLElement | null>(null);
|
||||
const { height: wrapperElHeight } = useElementSize(wrapperEl);
|
||||
|
||||
const scrollConfig = computed(() => {
|
||||
return {
|
||||
y: wrapperElHeight.value - 72,
|
||||
x: 1000
|
||||
};
|
||||
});
|
||||
|
||||
const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams, updateSearchParams, resetSearchParams } = useTable<AntDesign.TableApiFn<UserInfo, SearchModel>>({
|
||||
apiFn: doGetUserInfo,
|
||||
immediate: true,
|
||||
apiParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
username: undefined,
|
||||
email: undefined
|
||||
} as SearchModel,
|
||||
rowKey: 'userId',
|
||||
columns: (): AntDesign.TableColumn<AntDesign.TableDataWithIndex<UserInfo>>[] => [
|
||||
{
|
||||
key: 'username',
|
||||
dataIndex: 'username',
|
||||
title: '用户名',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
key: 'fullname',
|
||||
dataIndex: 'fullname',
|
||||
title: '姓名',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
key: 'sex',
|
||||
dataIndex: 'sex',
|
||||
title: '性别',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
customRender: ({ record }: { record: UserInfo }) => {
|
||||
const sexMap = {
|
||||
'M': '男',
|
||||
'F': '女'
|
||||
};
|
||||
return sexMap[record.sex] || '-';
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'birthdate',
|
||||
dataIndex: 'birthdate',
|
||||
title: '出生日期',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
key: 'age',
|
||||
dataIndex: 'age',
|
||||
title: '年龄',
|
||||
align: 'center',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
key: 'email',
|
||||
dataIndex: 'email',
|
||||
title: '邮箱',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
key: 'phonenumber',
|
||||
dataIndex: 'phonenumber',
|
||||
title: '手机号',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
key: 'isKYC',
|
||||
dataIndex: 'isKYC',
|
||||
title: 'KYC验证',
|
||||
align: 'center',
|
||||
customRender: ({ record }: { record: UserInfo }) => {
|
||||
const KYC_STATUS = {
|
||||
verified: '已验证',
|
||||
unverified: '未验证'
|
||||
} as const;
|
||||
return (
|
||||
<Tag color={record.isKYC ? 'success' : 'warning'}>
|
||||
{record.isKYC ? KYC_STATUS.verified : KYC_STATUS.unverified}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 处理搜索
|
||||
const handleSearch = () => {
|
||||
// 使用 updateSearchParams 更新搜索参数
|
||||
updateSearchParams({
|
||||
...searchParams,
|
||||
pageNum: 1 // 搜索时重置页码
|
||||
});
|
||||
getData();
|
||||
};
|
||||
|
||||
// 处理重置
|
||||
const handleReset = () => {
|
||||
const defaultParams: SearchModel = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
username: undefined,
|
||||
email: undefined
|
||||
};
|
||||
// 使用 updateSearchParams 更新参数
|
||||
updateSearchParams(defaultParams);
|
||||
resetSearchParams();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SimpleScrollbar>
|
||||
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
|
||||
<UserSearch
|
||||
v-model:model="searchParams"
|
||||
@reset="handleReset"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<ACard
|
||||
title="个人信息"
|
||||
:bordered="false"
|
||||
:body-style="{ flex: 1, overflow: 'hidden' }"
|
||||
class="flex-col-stretch sm:flex-1-hidden card-wrapper"
|
||||
>
|
||||
<template #extra>
|
||||
<TableHeaderOperation
|
||||
v-model:columns="columnChecks"
|
||||
:loading="loading"
|
||||
:show-delete="false"
|
||||
:show-add="false"
|
||||
@refresh="getData"
|
||||
/>
|
||||
</template>
|
||||
<ATable
|
||||
ref="wrapperEl"
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
:loading="loading"
|
||||
row-key="userId"
|
||||
size="small"
|
||||
:pagination="mobilePagination"
|
||||
:scroll="scrollConfig"
|
||||
class="h-full"
|
||||
/>
|
||||
</ACard>
|
||||
</div>
|
||||
</SimpleScrollbar>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
99
src/views/user-center/user/modules/user-search.vue
Normal file
99
src/views/user-center/user/modules/user-search.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<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';
|
||||
|
||||
const props = defineProps<{
|
||||
model: SearchModel;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:model': [value: SearchModel];
|
||||
'reset': [];
|
||||
'search': [];
|
||||
}>();
|
||||
|
||||
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({
|
||||
get: () => ({
|
||||
username: props.model.username,
|
||||
email: props.model.email
|
||||
}),
|
||||
set: (val: Partial<SearchModel>) => {
|
||||
emit('update:model', {
|
||||
...props.model,
|
||||
...val
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const handleReset = () => {
|
||||
formRef.value?.resetFields();
|
||||
localSearchParams.value = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
username: undefined,
|
||||
email: undefined
|
||||
};
|
||||
emit('update:model', localSearchParams.value);
|
||||
emit('reset');
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
// 确保搜索时更新所有参数
|
||||
const updatedParams: SearchModel = {
|
||||
...props.model,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
username: formModel.value.username,
|
||||
email: formModel.value.email
|
||||
};
|
||||
|
||||
console.log('Search triggered with params:', updatedParams);
|
||||
|
||||
// 直接更新父组件的参数
|
||||
emit('update:model', updatedParams);
|
||||
// 触发搜索
|
||||
emit('search');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ACard :bordered="false">
|
||||
<AForm
|
||||
ref="formRef"
|
||||
:model="formModel"
|
||||
layout="inline"
|
||||
class="flex flex-wrap gap-16px items-center"
|
||||
>
|
||||
<AFormItem label="用户名" name="username">
|
||||
<AInput
|
||||
v-model:value="formModel.username"
|
||||
placeholder="请输入用户名"
|
||||
allow-clear
|
||||
/>
|
||||
</AFormItem>
|
||||
<AFormItem label="邮箱" name="email">
|
||||
<AInput
|
||||
v-model:value="formModel.email"
|
||||
placeholder="请输入邮箱"
|
||||
allow-clear
|
||||
/>
|
||||
</AFormItem>
|
||||
<AFormItem class="flex-1 justify-end mb-0">
|
||||
<ASpace>
|
||||
<AButton @click="handleReset">重置</AButton>
|
||||
<AButton type="primary" @click="handleSearch">搜索</AButton>
|
||||
</ASpace>
|
||||
</AFormItem>
|
||||
</AForm>
|
||||
</ACard>
|
||||
</template>
|
||||
18
src/views/user-center/user/type.ts
Normal file
18
src/views/user-center/user/type.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
export interface UserInfo {
|
||||
userId: number;
|
||||
username: string;
|
||||
fullname: string;
|
||||
sex: 'M' | 'F';
|
||||
birthdate: string;
|
||||
age: number;
|
||||
email: string;
|
||||
phonenumber: string;
|
||||
isKYC: boolean;
|
||||
}
|
||||
|
||||
export type SearchModel = {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
username?: string;
|
||||
email?: string;
|
||||
};
|
||||
Reference in New Issue
Block a user