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

src/views/user-center/cdr/index.vue

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