H5/recycle.git - Gitblit

import { maskPhoneNumber } from '@/utils/utils';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { DatePicker, Input, message, Select, Tag, Typography } from 'antd';
import moment from 'moment';
import { useRef } from 'react';
import { getCallRecords } from './service';
 
const { RangePicker } = DatePicker;
 
const callTypeOptions = [
  { label: '呼入', value: 'callin' },
  { label: '外呼', value: 'callout' },
  { label: '双向呼叫', value: 'twoWayCall' },
  { label: '智能外呼', value: 'autoCallout' },
  { label: '外呼任务', value: 'callTask' },
];
 
const callTypeLabels = {
  callin: '呼入',
  callout: '外呼',
  twoWayCall: '双向呼叫',
  autoCallout: '智能外呼',
  callTask: '外呼任务',
  INBOUND: '呼入',
  OUTBOUND: '外呼',
};
 
const callStatusLabels = {
  ANSWER: '已接通',
  NO_ANSWER: '未接通',
};
 
const hangupPartyLabels = {
  CUSTOMER: '客户',
  ROBOT: '机器人',
};
 
const formatDateTime = (value) => {
  if (!value) return '';
  return typeof value.format === 'function' ? value.format('YYYY-MM-DD HH:mm:ss') : value;
};
 
const normalizeSearchParams = (params) => {
  const { current, pageSize, timeRange, ...rest } = params;
  const [startTime, endTime] = Array.isArray(timeRange) ? timeRange : [];
 
  return {
    ...rest,
    startTime: formatDateTime(startTime),
    endTime: formatDateTime(endTime),
    page: current > 0 ? current : 1,
    pageSize: pageSize > 0 ? pageSize : 1000,
  };
};
 
const renderText = (text) => text || '-';
 
const CallRecords = () => {
  const actionRef = useRef();
  const defaultTimeRange = [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')];
 
  const columns = [
    {
      title: '查询时间',
      dataIndex: 'timeRange',
      width: 260,
      renderFormItem: () => (
        <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" style={{ width: '100%' }} />
      ),
      formItemProps: { rules: [{ required: true, message: '请选择查询时间' }] },
      hideInTable: true,
    },
    {
      title: '呼叫类型',
      dataIndex: 'callType',
      width: 130,
      renderFormItem: () => (
        <Select mode="multiple" allowClear options={callTypeOptions} placeholder="请选择呼叫类型" />
      ),
      render: (text) => <Tag color="blue">{callTypeLabels[text] || text || '-'}</Tag>,
    },
    {
      title: '客户号码',
      dataIndex: 'customerNumber',
      width: 140,
      render: (text) => maskPhoneNumber(text) || '-',
    },
    { title: '外显号码', dataIndex: 'displayNumber', width: 140, render: renderText },
    { title: '服务号码', dataIndex: 'serviceNumber', width: 140, render: renderText },
    {
      title: '通话状态',
      dataIndex: 'status',
      width: 140,
      renderFormItem: () => <Input placeholder="如 ANSWER" />,
      hideInTable: true,
    },
    {
      title: '通话状态',
      dataIndex: 'callStatus',
      width: 140,
      hideInSearch: true,
      render: (text) => callStatusLabels[text] || text || '-',
    },
    {
      title: '通话 ID',
      dataIndex: 'callId',
      width: 220,
      hideInSearch: true,
      ellipsis: true,
      render: renderText,
    },
    {
      title: '机器人名称',
      dataIndex: 'voiceAgentName',
      width: 120,
      hideInSearch: true,
      render: renderText,
    },
    {
      title: '机器人 ID',
      dataIndex: 'voiceAgentId',
      width: 180,
      hideInSearch: true,
      ellipsis: true,
      render: renderText,
    },
    {
      title: '人工坐席号码',
      dataIndex: 'agentNumber',
      width: 120,
      hideInSearch: true,
      render: renderText,
    },
    {
      title: '转接队列号码',
      dataIndex: 'queueNumber',
      width: 140,
      hideInSearch: true,
      render: renderText,
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      width: 180,
      hideInSearch: true,
      render: renderText,
    },
    {
      title: '接通时间',
      dataIndex: 'answerTime',
      width: 180,
      hideInSearch: true,
      render: renderText,
    },
    { title: '结束时间', dataIndex: 'endTime', width: 180, hideInSearch: true, render: renderText },
    {
      title: '通话时长（秒）',
      dataIndex: 'durationSeconds',
      width: 130,
      hideInSearch: true,
      render: renderText,
    },
    {
      title: '是否转人工',
      dataIndex: 'transferredToAgent',
      width: 130,
      hideInSearch: true,
      render: (value) => (value ? <Tag color="green">是</Tag> : <Tag>否</Tag>),
    },
    {
      title: '转人工类型',
      dataIndex: 'transferType',
      width: 130,
      hideInSearch: true,
      render: renderText,
    },
    {
      title: '转人工时间',
      dataIndex: 'transferTime',
      width: 180,
      hideInSearch: true,
      render: renderText,
    },
    {
      title: '挂机方',
      dataIndex: 'hangupParty',
      width: 110,
      hideInSearch: true,
      render: (text) => hangupPartyLabels[text] || text || '-',
    },
    {
      title: '失败原因',
      dataIndex: 'failureReason',
      width: 180,
      hideInSearch: true,
      ellipsis: true,
      render: renderText,
    },
    {
      title: '通话路径',
      dataIndex: 'recordUrl',
      width: 120,
      hideInSearch: true,
      render: (url) =>
        url ? (
          <Typography.Link href={url} download>
            下载录音
          </Typography.Link>
        ) : (
          '-'
        ),
    },
    {
      title: '通话录音',
      dataIndex: 'recordUrl',
      width: 280,
      hideInSearch: true,
      render: (url) =>
        url ? <audio controls preload="none" src={url} style={{ width: '260px' }} /> : '-',
    },
    {
      title: '任务 ID',
      dataIndex: 'taskId',
      width: 200,
      hideInSearch: true,
      ellipsis: true,
      render: renderText,
    },
    {
      title: '累计呼叫次数',
      dataIndex: 'dialCount',
      width: 130,
      hideInSearch: true,
      render: renderText,
    },
  ];
 
  return (
    <PageContainer title="通话记录">
      <ProTable
        rowKey="callId"
        actionRef={actionRef}
        columns={columns}
        form={{ initialValues: { timeRange: defaultTimeRange } }}
        search={{ defaultCollapsed: false }}
        scroll={{ x: 2900 }}
        sticky={{ offsetScroll: 0 }}
        pagination={{ showSizeChanger: true, showQuickJumper: true, defaultPageSize: 20 }}
        request={async (params) => {
          const requestData = normalizeSearchParams(params);
          const start = moment(requestData.startTime, 'YYYY-MM-DD HH:mm:ss', true);
          const end = moment(requestData.endTime, 'YYYY-MM-DD HH:mm:ss', true);
 
          if (!start.isValid() || !end.isValid() || end.isBefore(start)) {
            message.error('请选择有效的查询时间范围');
            return { data: [], total: 0, success: false };
          }
 
          if (end.diff(start, 'seconds') > 7 * 24 * 60 * 60) {
            message.error('查询时间跨度不能超过 7 天');
            return { data: [], total: 0, success: false };
          }
 
          const response = await getCallRecords(requestData);
          return {
            data: response?.data?.list || [],
            total: response?.data?.total || 0,
            success: response?.code === 200 || response?.code === '200',
          };
        }}
      />
    </PageContainer>
  );
};
 
export default CallRecords;