feat:用户信息界面以及话单管理界面
This commit is contained in:
zhongzm
196
src/views/user-center/cdr/index.vue
Normal file
196
src/views/user-center/cdr/index.vue
Normal 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>
|
||||
125
src/views/user-center/cdr/modules/cdr-search.vue
Normal file
125
src/views/user-center/cdr/modules/cdr-search.vue
Normal 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>
|
||||
Reference in New Issue
Block a user