2
0

feat:用户信息界面以及话单管理界面

This commit is contained in:
zhongzm
2024-12-13 19:20:32 +08:00
parent 57e33781d1
commit 7649d22630
7 changed files with 664 additions and 3 deletions

View File

@@ -13,9 +13,9 @@ export function doDeleteUser(userId: number | string) {
return request({ url: `/system/user/${userId}`, method: 'delete' });
}
export function doGetUserList(params?: Api.SystemManage.UserSearchParams) {
return request<Api.SystemManage.UserList>({
url: '/system/user/list',
export function doGetUserList(params?: { userName?: string; email?: string }) {
return request<Api.Common.PaginatingQueryRecord<Api.Auth.User>>({
url: '/system/user/listUser',
method: 'get',
params
});

View File

@@ -38,6 +38,7 @@ declare module 'vue' {
AppProvider: typeof import('./../components/common/app-provider.vue')['default']
ARadio: typeof import('ant-design-vue/es')['Radio']
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
ARow: typeof import('ant-design-vue/es')['Row']
ASegmented: typeof import('ant-design-vue/es')['Segmented']
ASelect: typeof import('ant-design-vue/es')['Select']

View File

@@ -0,0 +1,196 @@
<script setup lang="tsx">
import { useTable } from '@/hooks/common/table';
import { SimpleScrollbar } from '~/packages/materials/src';
import CdrSearch from './modules/cdr-search.vue';
import { computed, shallowRef } from 'vue';
import { useElementSize } from '@vueuse/core';
// 定义话单信息接口
interface CdrInfo {
id: number;
callId: string;
callerNumber: string;
startTime: string;
endTime: string;
duration: number;
recordingUrl?: string;
}
// 搜索模型
type SearchModel = {
pageNum: number;
pageSize: number;
callId?: string;
callerNumber?: string;
startTime?: string;
endTime?: string;
};
// 模拟话单数据
const mockCdrs: CdrInfo[] = [
{
id: 1,
callId: 'CALL2024031501',
callerNumber: '13800138000',
startTime: '2024-03-15 10:00:00',
endTime: '2024-03-15 10:05:30',
duration: 330,
recordingUrl: 'https://example.com/recording/1.wav'
},
{
id: 2,
callId: 'CALL2024031502',
callerNumber: '13800138001',
startTime: '2024-03-15 11:00:00',
endTime: '2024-03-15 11:00:15',
duration: 15,
}
];
// 格式化通话时长
const formatDuration = (seconds: number) => {
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const remainingSeconds = seconds % 60;
const parts = [];
if (hours > 0) parts.push(`${hours}`);
if (minutes > 0) parts.push(`${minutes}`);
parts.push(`${remainingSeconds}`);
return parts.join('');
};
const doGetCdrInfo = async (params: SearchModel) => {
await new Promise(resolve => setTimeout(resolve, 500));
let filteredCdrs = [...mockCdrs];
// 根据搜索条件过滤
if (params.callId) {
filteredCdrs = filteredCdrs.filter(cdr =>
cdr.callId.toLowerCase().includes(params.callId!.toLowerCase())
);
}
if (params.callerNumber) {
filteredCdrs = filteredCdrs.filter(cdr =>
cdr.callerNumber.includes(params.callerNumber!)
);
}
const startIndex = (params.pageNum - 1) * params.pageSize;
const endIndex = startIndex + params.pageSize;
const paginatedCdrs = filteredCdrs.slice(startIndex, endIndex);
return {
data: {
rows: paginatedCdrs,
total: filteredCdrs.length
},
error: null
};
};
const wrapperEl = shallowRef<HTMLElement | null>(null);
const { height: wrapperElHeight } = useElementSize(wrapperEl);
const scrollConfig = computed(() => ({
y: wrapperElHeight.value - 72,
x: 1200
}));
const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
apiFn: doGetCdrInfo,
immediate: true,
apiParams: {
pageNum: 1,
pageSize: 10
} as SearchModel,
rowKey: 'id',
columns: (): AntDesign.TableColumn<AntDesign.TableDataWithIndex<CdrInfo>>[] => [
{
key: 'callId',
dataIndex: 'callId',
title: '话单ID',
align: 'center',
width: 150
},
{
key: 'callerNumber',
dataIndex: 'callerNumber',
title: '主叫号码',
align: 'center',
width: 120
},
{
key: 'startTime',
dataIndex: 'startTime',
title: '开始时间',
align: 'center',
width: 180
},
{
key: 'endTime',
dataIndex: 'endTime',
title: '结束时间',
align: 'center',
width: 180
},
{
key: 'duration',
dataIndex: 'duration',
title: '连接时长',
align: 'center',
width: 120,
customRender: ({ record }: { record: CdrInfo }) => formatDuration(record.duration)
},
]
});
</script>
<template>
<SimpleScrollbar>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<CdrSearch
v-model:model="searchParams"
@reset="resetSearchParams"
@search="getData"
/>
<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="id"
size="small"
:pagination="mobilePagination"
:scroll="scrollConfig"
class="h-full"
/>
</ACard>
</div>
</SimpleScrollbar>
</template>
<style scoped></style>

View File

@@ -0,0 +1,125 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import { Form } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
import dayjs, { Dayjs } from 'dayjs';
// 修改类型定义以匹配 ARangePicker 的期望类型
type TimeRangeValue = [Dayjs, Dayjs] | [string, string] | undefined;
interface SearchModel {
pageNum: number;
pageSize: number;
callId?: string;
callerNumber?: string;
startTime?: string;
endTime?: string;
}
// 修改 props 定义
const props = withDefaults(defineProps<{
model: SearchModel;
}>(), {
model: () => ({
pageNum: 1,
pageSize: 10,
callId: '',
callerNumber: '',
startTime: '',
endTime: ''
})
});
const emit = defineEmits<{
'update:model': [value: SearchModel];
'search': [];
'reset': [];
}>();
const formRef = ref<FormInstance>();
const { resetFields } = Form.useForm(props.model);
const formModel = computed({
get: () => props.model,
set: (val: SearchModel) => emit('update:model', val)
});
// 修改 timeRange 的实现
const timeRange = computed({
get() {
const { startTime, endTime } = formModel.value;
if (!startTime || !endTime) return undefined;
return [dayjs(startTime), dayjs(endTime)] as [Dayjs, Dayjs];
},
set(val: TimeRangeValue) {
emit('update:model', {
...formModel.value,
startTime: val ? (typeof val[0] === 'string' ? val[0] : val[0].format('YYYY-MM-DD HH:mm:ss')) : '',
endTime: val ? (typeof val[1] === 'string' ? val[1] : val[1].format('YYYY-MM-DD HH:mm:ss')) : ''
});
}
});
function handleReset() {
resetFields();
emit('reset');
}
function handleSearch() {
emit('search');
}
</script>
<template>
<ACard :bordered="false" class="search-card">
<AForm
ref="formRef"
:model="formModel"
layout="inline"
class="flex flex-wrap gap-16px items-center"
>
<AFormItem label="话单ID" name="callId">
<AInput
v-model:value="formModel.callId"
placeholder="请输入话单ID"
allow-clear
/>
</AFormItem>
<AFormItem label="主叫号码" name="callerNumber">
<AInput
v-model:value="formModel.callerNumber"
placeholder="请输入主叫号码"
allow-clear
/>
</AFormItem>
<AFormItem label="连接时长">
<ARangePicker
v-model:value="timeRange"
show-time
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
:style="{
width: '200px',
// 可以添加其他样式
// maxWidth: '100%',
// minWidth: '300px'
}"
/>
</AFormItem>
<AFormItem class="flex-1 justify-end">
<ASpace>
<AButton @click="handleReset">重置</AButton>
<AButton type="primary" @click="handleSearch">查询</AButton>
</ASpace>
</AFormItem>
</AForm>
</ACard>
</template>
<style scoped>
.search-card {
:deep(.ant-card-body) {
padding: 16px;
}
}
</style>

View 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>

View 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>

View 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;
};