admin2 1.0.0

package/src/pages/pageComponents/typeErrorCorrection/index.jsx

@@ -0,0 +1,1090 @@
+/* eslint-disable max-len */
+/**
+ * 天网历史记录（登录、注册、事件、短信通道、羊毛党）
+ */
+
+import React, { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
+import { connect } from 'umi';
+import moment from 'moment';
+import _ from 'lodash';
+import { SMTable } from 'sm-antd';
+import { Tooltip, message, Popconfirm, Button } from 'antd';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+import SMText from '@/components/SMText';
+import SMImage from '@/components/SMImage';
+import SMAudio from '@/components/SMAudio';
+import SMSearchForm from '@/components/SMSearchForm';
+import GlobalFilterListener from '@/components/GlobalFilterListener';
+import SMRiskLevel from '@/components/SMRiskLevel';
+import { PAGE_SIZE } from '@/contants/pageSize';
+import {getIntlTableColums, formatUs} from '@/utils/helpers';
+import {useLanguage} from '@/hooks';
+import withIntlComponents from '@/hoc/withIntlComponents';
+import {REQUEST_CODE} from '@/contants';
+import {cancelFeedback} from '@/services/history';
+import {getFirstLabel} from '@/services/tx';
+
+import {DATE_FORMAT_TIME, CHANGE_DATE, SERVICEID_LIST, AUTH_FUNCTION, tableText} from '@/contants';
+import {
+    formatSearchParams,
+    exportFile,
+    backTop,
+    getDisabledDate,
+    formatArrayParams,
+    handleOperation,
+} from '@/utils/utils';
+import { getAuthFunction } from '@/utils/AuthorityManage';
+
+import SMDetailDrawer from '../historyPage/components/HistoryDetailDrawer';
+import {
+    dateType,
+    defaultRiskLevelData,
+    defaultChannelEventData,
+    defaultLabelDateSearch,
+    defaultSearchButtonData,
+    defaultResetButtonData,
+    defaultExportData,
+    defaultLabelSearchData,
+    defaultCaseTypeData,
+    defaultLabelData,
+    defaultDescriptionData,
+} from './constants';
+import {TwCopy, CASE_TYPE, PAGE_TYPE} from '../historyPage/constants';
+import {useGetStorageTime} from '../../pageComponents/hooks';
+import {TITLE_MAP} from '../trendPage/TypeFour/contants';
+import {
+    handleLabelAll,
+    getLabelConfig,
+} from '../historyPage/help';
+
+import styles from './index.less';
+
+// 与 TypeErrorPage 中带 detailOperation 列的服务一致，detailRender 会展示单条「取消纠错」
+const CANCEL_ERROR_DETAIL_OPERATION_SERVICE_LIST = [
+    'POST_TEXT',
+    'POST_TEXT_EN',
+    'POST_TEXT_AR',
+    'POST_ARTICLE',
+    'POST_IMG',
+    'POST_VIDEO_IMG',
+    'POST_VIDEOSTREAM_IMG',
+    'POST_VIDEOSTREAM_IMG_EN',
+    'POST_VIDEOSTREAM_IMG_AR',
+];
+
+// 与单条「取消纠错」展示条件对齐：detailOperation 服务 + 视频文件纠错记录（audioRender）
+const isSupportCancelErrorCorrection = routeData => {
+    const { serviceId, pageType } = routeData || {};
+    if (pageType === 'POST_VIDEO_FILE') {
+        return true;
+    }
+    return CANCEL_ERROR_DETAIL_OPERATION_SERVICE_LIST.includes(serviceId);
+};
+
+const defaultDateType = dateType[1].value;
+const defaulTimeList = [moment().startOf('day'), moment().endOf('day')];
+const CREATE_TIME = 'createTime'; // 纠错时间
+const AddLabelSearchList = { // 新增下拉搜索字段
+    TEXT: {
+        value: 'text',
+        name: '文本内容',
+    },
+    IMAGE_URL: {
+        value: 'url',
+        name: '图片URL',
+    },
+    IMAGE_MD5: {
+        value: 'md5',
+        name: '图片MD5',
+    },
+    IMAGE_ORC: {
+        value: 'orcText',
+        name: '图片OCR内容',
+    },
+    AUDIO_ASR: {
+        value: 'asrText',
+        name: '音频ASR内容',
+    },
+    REQUEST_ID: {
+        value: 'requestId',
+        name: '流水号',
+    },
+    SESSION_ID: {
+        value: 'sessionId',
+        name: '会话标识',
+    },
+    TOKEN_ID: {
+        value: 'tokenId',
+        name: '账号',
+    },
+};
+
+const TypeErrorCorrection = props => {
+    const {
+        dispatch,
+        route,
+        formatData,
+        formatDetailData,
+        setTableKey,
+        stateConfig,
+    } = props;
+    const initTime = {
+        startTime: moment(defaulTimeList[0]).format(DATE_FORMAT_TIME),
+        endTime: moment(defaulTimeList[1]).format(DATE_FORMAT_TIME),
+    };
+
+    const firstUpdate = useRef(true);
+    const {getStorageTime} = useGetStorageTime();
+
+    const {t} = useLanguage();
+    const showBatchCancelOperator = isSupportCancelErrorCorrection(route?.routeData)
+        && getAuthFunction(AUTH_FUNCTION.DETAIL);
+
+    const [currentGlobalFilter, setCurrentGlobalFilter] = useState({}); // 顶部筛选框
+    const [listLoading, setListLoading] = useState(false);
+    const [labelDateSearch, setLabelDateSearch] = useState(defaultLabelDateSearch);
+    const [riskLevelData, setRiskLevelData] = useState(defaultRiskLevelData); // 二次验证下的验证方式
+    const [channelEventData, setChannelEventData] = useState(defaultChannelEventData); // 渠道列表
+    const [tableDataSource, setTableDataSource] = useState([]); // 列表数据
+    const [queryParams, setQueryParams] = useState(initTime); // 查询参数
+    const [currentPage, setCurrentPage] = useState(1); // 页码
+    const [pageSize, setPageSize] = useState(20); // 页数
+    const [listData, setListData] = useState([]); // 数据列表
+    const [detailData, setDetailData] = useState({}); // 历史记录列表数据
+    const [activityData, setActivityData] = useState([]);
+    const [listTotalCount, setListTotalCount] = useState(0); // 总页数
+    const [tableColumns, setTableColumns] = useState(stateConfig.tableColumns); // 设置表头
+    const [channelMap, setChannelMap] = useState([]); // 渠道
+    const [detailIndex, setDetailIndex] = useState(0); // 当前详情数据的index
+    const [resetCount, setResetCount] = useState(0); // 重置刷新筛选栏
+    const [detailVisible, setDetailVisible] = useState(false); // 重置刷新筛选栏
+    const [refresh, setRefresh] = useState(1);
+    const [storageTime, setStorageTime] = useState(0);
+    const [labelSearchData, setLabelSearchData] = useState(defaultLabelSearchData); // 字段搜索内容
+    const [firstLabelList, setFirstLabelList] = useState([]); // 客户标注列表
+    const [selectedContents, setSelectedContents] = useState([]); // 批量取消纠错选中项
+
+    // 初始化参数
+    const initQueryParams = useCallback(() => {
+
+        return {
+            dateType: dateType[1].value,
+            startTime: moment(defaulTimeList[0]).format(DATE_FORMAT_TIME),
+            endTime: moment(defaulTimeList[1]).format(DATE_FORMAT_TIME),
+        };
+    }, []);
+
+    /**
+     * 格式化字段筛选
+     * 智能文本识别(中文+国际+阿语)：新增 “文本内容” (默认值=文本内容)
+       智能图片识别 + 智能视频文件识别 > 截帧图片 + 智能视频流识别(中文+英文+阿语) > 截帧图片：新增 “图片MD5、图片OCR内容” (默认值=流水号)
+       智能音频文件识别(中文+英文+阿语+B类外语) + 智能音频流识别(中文+英文+阿语+B类外语) + 智能视频文件识别 > 音频片段 + 智能视频流识别(中文+英文+阿语) > 音频片段：新增 “音频ASR内容” (默认值=流水号)
+       智能视频文件识别 > 视频文件 + 智能视频流识别(中文+英文+阿语) > 视频文件：新增 “图片MD5、图片OCR内容、音频ASR内容” (默认值=流水号)
+     */
+    const formatLabelSearchData = useCallback(() => {
+        const {serviceId, specialServiceId} = route.routeData;
+        const newLabelSearchData = _.cloneDeep(defaultLabelSearchData);
+        switch (specialServiceId || serviceId) {
+            case SERVICEID_LIST.POST_TEXT:
+            case SERVICEID_LIST.POST_TEXT_AR:
+            case SERVICEID_LIST.POST_TEXT_EN:
+                newLabelSearchData.data.optionData.unshift(AddLabelSearchList.TEXT);
+                break;
+            case SERVICEID_LIST.POST_IMG:
+            case SERVICEID_LIST.POST_VIDEO_IMG:
+            case SERVICEID_LIST.POST_VIDEOSTREAM_IMG_EN:
+            case SERVICEID_LIST.POST_VIDEOSTREAM_IMG_AR:
+            case SERVICEID_LIST.POST_VIDEOSTREAM_IMG:
+                newLabelSearchData.data.optionData.push(
+                    AddLabelSearchList.IMAGE_URL,
+                    AddLabelSearchList.IMAGE_MD5,
+                    AddLabelSearchList.IMAGE_ORC
+                );
+                break;
+            case SERVICEID_LIST.POST_AUDIOCLIPS:
+            case SERVICEID_LIST.POST_AUDIOCLIPS_EN:
+            case SERVICEID_LIST.POST_AUDIOCLIPS_AR:
+            case SERVICEID_LIST.POST_AUDIOCLIPS_B:
+            case SERVICEID_LIST.POST_AUDIOSTREAMCLIPS:
+            case SERVICEID_LIST.POST_AUDIOSTREAMCLIPS_EN:
+            case SERVICEID_LIST.POST_AUDIOSTREAMCLIPS_AR:
+            case SERVICEID_LIST.POST_AUDIOSTREAMCLIPS_B:
+            case SERVICEID_LIST.POST_VIDEOSTREAM_AUDIO:
+            case SERVICEID_LIST.POST_VIDEOSTREAM_AUDIO_EN:
+            case SERVICEID_LIST.POST_VIDEOSTREAM_AUDIO_AR:
+            case SERVICEID_LIST.POST_VIDEO_AUDIO:
+                newLabelSearchData.data.optionData.push(AddLabelSearchList.AUDIO_ASR);
+                break;
+            case SERVICEID_LIST.POST_VIDEO:
+            case SERVICEID_LIST.POST_VIDEOSTREAM:
+            case SERVICEID_LIST.POST_VIDEOSTREAM_EN:
+            case SERVICEID_LIST.POST_VIDEOSTREAM_AR:
+                newLabelSearchData.data.optionData.push(
+                    AddLabelSearchList.IMAGE_URL,
+                    AddLabelSearchList.IMAGE_MD5,
+                    AddLabelSearchList.IMAGE_ORC,
+                    AddLabelSearchList.AUDIO_ASR
+                );
+                break;
+            case SERVICEID_LIST.POST_NEXUS_IMAGE:
+                newLabelSearchData.data.optionData = [
+                    AddLabelSearchList.TEXT,
+                    AddLabelSearchList.IMAGE_URL,
+                    AddLabelSearchList.REQUEST_ID,
+                    AddLabelSearchList.SESSION_ID,
+                    AddLabelSearchList.TOKEN_ID,
+                ];
+        }
+        setLabelSearchData(newLabelSearchData);
+    }, [route]);
+
+    // 初始化筛选列表
+    const initSerach = useCallback(() => {
+        let serviceId = route.routeData.serviceId;
+        switch (route.routeData.serviceId) {
+            case 'POST_TEXT_AR':
+            case 'POST_TEXT_EN':
+                serviceId = 'POST_TEXT';
+                break;
+            case 'POST_AUDIOSTREAM':
+            case 'POST_AUDIOSTREAM_EN':
+            case 'POST_AUDIOSTREAM_AR':
+            case 'POST_VIDEO_AUDIO':
+            case 'POST_VIDEOSTREAM_AUDIO_EN':
+            case 'POST_VIDEOSTREAM_AUDIO_AR':
+            case 'POST_VIDEOSTREAM_AUDIO':
+                serviceId = 'POST_AUDIO';
+                break;
+            case 'POST_VIDEO_IMG':
+            case 'POST_VIDEOSTREAM_IMG_EN':
+            case 'POST_VIDEOSTREAM_IMG_AR':
+            case 'POST_VIDEOSTREAM_IMG':
+                serviceId = 'POST_IMG';
+                break;
+        }
+        defaultLabelDateSearch.data.dateData.defaultValue = defaulTimeList;
+        defaultLabelDateSearch.data.dateData.dateFormat = DATE_FORMAT_TIME;
+        defaultLabelDateSearch.data.selectData.list = dateType;
+        defaultLabelDateSearch.data.selectData.defaultValue = defaultDateType;
+        defaultCaseTypeData.data.selectData.optionData = formatUs(CASE_TYPE, ['name'], t);
+        defaultLabelData.data.selectData.optionData = formatUs(firstLabelList, ['label_name'], t) || [];
+        defaultDescriptionData.data.selectData.defaultValue = t(defaultDescriptionData.data.selectData.defaultValue);
+    }, [route.routeData.serviceId, firstLabelList]);
+
+    // 客户标注列表
+    const getFirstLabelList = useCallback(async () => {
+        let serviceId = route.routeData.serviceId;
+        const labelConfig = getLabelConfig(serviceId);
+        const {code, contents = []} = await getFirstLabel({product: labelConfig.product, category: 'rule'});
+        if (REQUEST_CODE.SUCCESS === code) {
+            setFirstLabelList(contents);
+        }
+    }, [route.routeData.serviceId]);
+
+    // 获取识别结果列表
+    const getRiskLevelList = useCallback(async organization => {
+        if (dispatch) {
+            let resultList = await dispatch({
+                type: 'base/fetchRiskLevelList',
+                payload: {
+                    organization,
+                    serviceId: route.routeData && route.routeData.serviceId,
+                },
+            });
+            const newRiskLevelData = _.cloneDeep(riskLevelData);
+            const newOptionData = [];
+            const riskLevelMap = {};
+            if (resultList) {
+                resultList.forEach(item => {
+                    if (item.risk_level === 'VERIFY') { // 2次验证
+                        return;
+                    }
+                    let itemOption = {
+                        value: item.risk_level,
+                        name: item.risk_level_name,
+                    };
+                    riskLevelMap[item.risk_level] = item.risk_level_name;
+                    newOptionData.push(itemOption);
+                });
+            }
+            newRiskLevelData.data.selectData.optionData = newOptionData;
+            setRiskLevelData(newRiskLevelData);
+        }
+    }, [dispatch, riskLevelData, route.routeData]);
+
+    // 发生时间日期控件限制
+    const changeDateType = useCallback(() => {
+        const {disabledDateEnd, disabledDateStart} = getDisabledDate(storageTime);
+        const newDate = _.cloneDeep(labelDateSearch);
+        const dateData = newDate.data.dateData;
+        dateData.disabledDateEnd = disabledDateEnd;
+        dateData.disabledDateStart = disabledDateStart;
+        setLabelDateSearch(newDate);
+    }, [storageTime, labelDateSearch]);
+
+    // 获取渠道事件列表
+    const getChannelEventList =  useCallback(async organization => {
+        if (dispatch) {
+            let resultList = await dispatch({
+                type: 'base/fetchChannelEventList',
+                payload: {
+                    organization,
+                    serviceId: route.routeData && route.routeData.serviceId,
+                },
+            });
+            if (resultList) {
+                let channelMap = {};
+                let newOptionData = [];
+                let newChannelEventData = _.cloneDeep(channelEventData);
+                resultList.forEach(item => {
+                    newOptionData.push({
+                        value: `${item.channel}`,
+                        name: item.displayName,
+                    });
+                    if (item.channel !== '') {
+                        channelMap[item.channel] = item.channelName;
+                    }
+                });
+                newChannelEventData.data.selectData.optionData = newOptionData;
+                setChannelEventData(newChannelEventData);
+                setChannelMap(channelMap);
+            }
+        }
+    }, [channelEventData, dispatch, route.routeData]);
+
+    // 获取风险标签
+    const getNewRiskLabelList = async () => {
+        if (dispatch) {
+            const labelConfig = getLabelConfig(route.routeData.serviceId);
+            const riskLabelList = await dispatch({
+                type: labelConfig.action,
+                payload: {
+                    product: labelConfig.product,
+                    category: 'rule',
+                },
+            });
+            defaultDescriptionData.data.selectData.optionData = formatUs(riskLabelList, ['label_name'], t);
+        }
+    };
+
+    // 获取搜索菜单
+    const getFormData = useCallback(() => {
+        let formData = [];
+        formData.push(
+            labelDateSearch,
+            channelEventData,
+            riskLevelData,
+            defaultLabelData,
+            defaultCaseTypeData,
+            defaultDescriptionData,
+            labelSearchData,
+            defaultSearchButtonData,
+            defaultResetButtonData
+        );
+        if (getAuthFunction(AUTH_FUNCTION.EXPORT)) {
+            formData.push(defaultExportData);
+        }
+        return formData;
+    }, [channelEventData, riskLevelData, labelDateSearch, labelSearchData]);
+
+    // 重置
+    const resetParams = useCallback(async () => {
+        const newQueryParams =  initQueryParams();
+        setRiskLevelData(defaultRiskLevelData);
+        setQueryParams(newQueryParams);
+        setCurrentPage(1);
+        setResetCount(resetCount + 1);
+    }, [initQueryParams, resetCount]);
+
+    // 获取查询接口参数
+    const getSearchParams = useCallback(() => {
+        const { organization, appId } = currentGlobalFilter;
+        const {specialServiceId, serviceId} = route.routeData;
+        const searchParams = {
+            ...queryParams,
+            organization: organization,
+            serviceId: specialServiceId || serviceId,
+            appId: appId,
+            count: pageSize,
+            offset: (currentPage - 1) * pageSize,
+        };
+        // 处理一下searchParams，如果为'' || 'all', 则删除该项
+        const newSearchParams = formatArrayParams(formatSearchParams(searchParams));
+        return newSearchParams;
+    }, [currentGlobalFilter, currentPage, pageSize, queryParams, route.routeData]);
+
+    /**
+     * 搜索筛选项更改
+     * @param {*} name   更改筛选项类型名称
+     * @param {*} value  更改后的值
+     */
+    const changeQueryParams = useCallback((name, value, type) => {
+        const newQueryParams = _.cloneDeep(queryParams);
+        switch (name) {
+            case 'eventId':
+                newQueryParams.eventId = value;
+                break;
+            case 'channel':
+                newQueryParams.channel = value;
+                break;
+            case 'labelSearch':
+                labelSearchData.data.optionData.forEach(item => {
+                    newQueryParams[item.value] = '';
+                });
+                newQueryParams[value.searchId] = value.searchText || '';
+                break;
+            case 'dateType':
+                newQueryParams.dateType = value.searchId;
+                newQueryParams.startTime = moment(moment(value.searchText[0]).format()).format(DATE_FORMAT_TIME);
+                newQueryParams.endTime = moment(moment(value.searchText[1]).format()).format(DATE_FORMAT_TIME);
+                if (type === CHANGE_DATE) {
+                    changeDateType();
+                }
+                break;
+            case 'desc':
+                if (value) {
+                    newQueryParams[name] = value.join(':');
+                }
+                break;
+            case 'riskType':
+                newQueryParams[name] = value;
+                break;
+            default:
+                newQueryParams[name] = value;
+        }
+        setQueryParams(newQueryParams);
+        setCurrentPage(1);
+    }, [queryParams]);
+
+    // 上一条 下一条
+    const changeDetailData = useCallback(e => {
+        // 没有打开详情时 不做处理
+        if (!detailVisible) {
+            return;
+        }
+        let newIndex = 0;
+        if (e && e.keyCode === 37) {
+            if (currentPage === 1 && detailIndex === 0) {
+                message.info('已经是第一条数据了');
+                return;
+            } else if (detailIndex === 0) {
+                setCurrentPage(currentPage);
+                setPageSize(pageSize);
+            } else {
+                newIndex = detailIndex - 1;
+                setDetailIndex(newIndex);
+            }
+        } else if (e && e.keyCode === 39) {
+            if ((currentPage - 1) * pageSize + detailIndex + 1 === listTotalCount) {
+                message.info('已经是最后一条数据了');
+                return;
+            } else if (detailIndex === pageSize - 1) {
+                setCurrentPage(currentPage + 1);
+                setDetailIndex(0);
+            } else {
+                newIndex = detailIndex + 1;
+                setDetailIndex(newIndex);
+            }
+        }
+    }, [currentPage, detailIndex, detailVisible, listTotalCount, pageSize]);
+
+    // 打开侧边栏
+    const clickDetail = useCallback(index => {
+        setDetailIndex(index);
+        setDetailVisible(true);
+    }, []);
+
+
+    const handleCancelError = useCallback(async record => {
+        let serviceId = route.routeData.serviceId;
+        const params = {
+            organization: currentGlobalFilter.organization,
+            requestId: record.requestId,
+            serviceId: route.routeData.serviceId,
+        };
+        if (serviceId === 'POST_NEXUS_MULTIMODAL') {
+            params.id = record?.id;
+        }
+        const result  = await cancelFeedback(params);
+        if (result.code === REQUEST_CODE.SUCCESS) {
+            message.success(result.message);
+            setSelectedContents([]);
+            doSearch();
+        }
+        else {
+            message.error(result.message);
+        }
+    }, [route, currentGlobalFilter]);
+
+    const handleRowSelectionChange = useCallback(value => {
+        setSelectedContents(value);
+    }, []);
+
+    const handleSelectCurrentPage = useCallback(() => {
+        const newSelectContents = tableDataSource
+            ?.filter(item => item?.currentData?.status !== -1)
+            ?.map(item => item.rowId) || [];
+        setSelectedContents(newSelectContents);
+    }, [tableDataSource]);
+
+    const getSelectedRequestIds = useCallback(() => {
+        return selectedContents
+            ?.map(rowId => tableDataSource?.find(item => item?.rowId === rowId)?.requestId)
+            ?.filter(Boolean) || [];
+    }, [selectedContents, tableDataSource]);
+
+    const isCancelDisabled = useCallback(record => {
+        return record?.currentData?.status === -1;
+    }, []);
+
+    // 关闭侧边栏
+    const closeDetail = useCallback(() => {
+        setDetailVisible(false);
+        setDetailIndex(0);
+    }, []);
+
+    // 文本类表格展示内容
+    const textRender = useCallback((text, record) => {
+        const isCopy = TwCopy.filter(
+            item => record.currentData.input[item] === text || record.requestId === text).length;
+        text = text instanceof Array ? text.join('|') : text;
+
+        return (
+            <Tooltip title={text ? text : '-'} placement="left">
+                <CopyToClipboard
+                    className={isCopy ? styles.copy : styles.text}
+                    text={isCopy ? (text || '-') : null}
+                    onCopy={() => isCopy && message.success('复制成功')}
+                >
+                    <span>
+                        {text ? text : '-'}
+                    </span>
+                </CopyToClipboard>
+            </Tooltip>
+        );
+    }, []);
+
+    const timeRender = useCallback(text => {
+        const contentText = text ? moment(text).format(DATE_FORMAT_TIME) : '-';
+        const toolTipTitle = <span className={styles.tooltip}>{contentText}</span>;
+        return (
+            <Tooltip title={toolTipTitle} placement="left">
+                <span className={styles.text}>{contentText}</span>
+            </Tooltip>
+        );
+    }, []);
+
+    const riskLevelRender = useCallback(text => {
+        const riskLevelStr = text.split('|')[0];
+        const riskLevel = text.split('|')[1];
+        return (
+            <SMRiskLevel riskLevel={riskLevel} riskLevelStr={riskLevelStr} />
+        );
+    }, []);
+
+    const detailRender = useCallback((text, record, index) => {
+        const isShowCancel = record?.currentData?.status !== -1; // 已取消状态不展示 取消纠错按钮
+        return getAuthFunction(AUTH_FUNCTION.DETAIL) && (
+            <>
+                <span
+                    className={styles.action}
+                    onClick={() => {
+                        clickDetail(index, record);
+                    }}
+                >
+                    {t(record.detail)}
+                </span>
+
+                {isShowCancel
+                    ? (
+                        <span
+                            className={styles.action}
+                            style={{marginLeft: 10}}
+                        >
+                            <Popconfirm
+                                title={t('请确认是否取消纠错?')}
+                                okText={t('是')}
+                                cancelText={t('否')}
+                                onConfirm={() => handleCancelError(record)}
+                            >
+                                {t('取消纠错')}
+                            </Popconfirm>
+                        </span>
+                    )
+                    : <></>
+                }
+            </>
+        );
+    }, [clickDetail, handleCancelError]);
+
+    const highLightRender = useCallback((text, record) => {
+        const matchedItem = record.currentData.output.matchedItem || '';
+        const toolTipTitle = (
+            <span className={styles.tooltip}>
+                <SMText content={text} keywords={matchedItem} />
+            </span>
+        );
+        return (
+            <Tooltip title={toolTipTitle} placement="left">
+                <span>
+                    <SMText content={text} keywords={matchedItem} ellipsis />
+                </span>
+            </Tooltip>
+        );
+    }, []);
+
+    const imgRender = useCallback(text => {
+        return (
+            <SMImage width={150} height={200} url={text} />
+        );
+    }, []);
+
+    const audioRender = useCallback((text, record) => {
+        const {serviceId, specialServiceId, pageType} = route.routeData;
+        const isShowCancel = record?.currentData?.status !== -1; // 已取消状态不展示 取消纠错按钮
+        // 是否为流片段类型
+        const isClips = [
+            SERVICEID_LIST.POST_AUDIOCLIPS,
+            SERVICEID_LIST.POST_AUDIOSTREAMCLIPS,
+        ].includes(specialServiceId);
+        // 是否展示视频截帧
+
+        const isVideo = [SERVICEID_LIST.POST_VIDEO, SERVICEID_LIST.POST_VIDEOSTREAM].includes(serviceId);
+        // 是否展示音频片段
+        const isAudio = [
+            SERVICEID_LIST.POST_AUDIO,
+            SERVICEID_LIST.POST_AUDIOSTREAM,
+            SERVICEID_LIST.POST_VIDEO,
+            SERVICEID_LIST.POST_VIDEOSTREAM,
+        ].includes(serviceId);
+        // 是否隐藏播放功能 片段
+        const isShowPlay = [
+            SERVICEID_LIST.POST_VIDEO,
+            SERVICEID_LIST.POST_VIDEOSTREAM,
+            SERVICEID_LIST.POST_AUDIOSTREAM,
+        ].includes(serviceId);
+
+        return (
+            <div className={styles.operation}>
+                {
+                    isVideo && getAuthFunction(AUTH_FUNCTION.IMAGE_DETAIL) && (
+                        <span
+                            className={styles.action}
+                            onClick={() => {
+                                handleOperation({
+                                    record,
+                                    type: PAGE_TYPE.IMG,
+                                    serviceId: route.routeData.serviceId,
+                                    queryParams: {
+                                        startTime: moment(queryParams.startTime).format('x'),
+                                        endTime: moment(queryParams.endTime).format('x'),
+                                    },
+                                    rawValue: {
+                                        startTime: record.currentData.input.startTime,
+                                        timestamp: moment(record.timestamp).format('x') * 1,
+                                    },
+                                    storageTime,
+                                });
+                            }}
+                        >
+                            截帧图片
+                        </span>
+                    )
+                }
+                {
+                    !isClips && isAudio && getAuthFunction(AUTH_FUNCTION.AUDIO_CLIPS_DETAIL) && (
+                        <span
+                            className={styles.action}
+                            onClick={() => {
+                                handleOperation({
+                                    record,
+                                    type: PAGE_TYPE.AUDIO,
+                                    serviceId: route.routeData.serviceId,
+                                    queryParams: {
+                                        startTime: moment(queryParams.startTime).format('x'),
+                                        endTime: moment(queryParams.endTime).format('x'),
+                                    },
+                                    rawValue: {
+                                        audioTime: record.currentData.input.audioTime,
+                                        timestamp: moment(record.timestamp).format('x') * 1,
+                                        startTime: record.currentData.input.startTime,
+                                    },
+                                    storageTime,
+                                });
+                            }}
+                        >
+                            音频片段
+                        </span>
+                    )
+                }
+                {pageType === 'POST_VIDEO_FILE' && isShowCancel && (
+                    <span
+                        className={styles.action}
+                        style={{marginLeft: 10}}
+                    >
+                        <Popconfirm
+                            title={t('请确认是否取消纠错?')}
+                            okText={t('是')}
+                            cancelText={t('否')}
+                            onConfirm={() => handleCancelError(record)}
+                        >
+                            {t('取消纠错')}
+                        </Popconfirm>
+                    </span>
+                )}
+                {
+                    !isShowPlay
+                    && <SMAudio
+                        audioUrl={text}
+                        audioId={record.requestId}
+                        showSpeedFlag={false}
+                        showDownloadFlag={false}
+                        showSilenceFlag={false}
+                        showProgressFlag={false}
+                        showSimpleTimeFlag
+                    />
+                }
+
+            </div>
+        );
+    }, [queryParams.startTime, queryParams.endTime, storageTime]);
+
+    const listOnSearch = useCallback(async (pagination, filters, sorter) => {
+        const { current, pageSize } = pagination;
+        let { order } = sorter;
+        order = order === 'ascend' ? 'asc' : 'desc';
+        let newQueryParams = _.cloneDeep(queryParams);
+        newQueryParams.sort = order;
+        setRefresh(refresh + 1);
+        setCurrentPage(current);
+        setPageSize(pageSize);
+        setQueryParams(newQueryParams);
+        setDetailIndex(0);
+    }, [queryParams, refresh]);
+
+    // 初始化表格
+    const initTableColumns = useCallback(() => {
+        if (tableColumns) {
+            tableColumns.forEach(item => {
+                switch (item.type) {
+                    case 'time':
+                        item.render = timeRender;
+                        break;
+                    case 'text':
+                        item.render = textRender;
+                        break;
+                    case 'riskLevel':
+                        item.render = riskLevelRender;
+                        break;
+                    case 'detail':
+                        item.render = detailRender;
+                        break;
+                    case 'highLight':
+                        item.render = highLightRender;
+                        break;
+                    case 'img':
+                        item.render = imgRender;
+                        break;
+                    case 'audio':
+                        item.render = audioRender;
+                        break;
+                }
+            });
+        }
+    }, [
+        audioRender,
+        detailRender,
+        highLightRender,
+        imgRender,
+        riskLevelRender,
+        tableColumns,
+        textRender,
+        timeRender,
+    ]);
+
+    // 列表导出
+    const exportData = useCallback(callback => {
+        let newSearchParams = getSearchParams();
+        newSearchParams.count = 10000;
+        const {specialServiceId, serviceId} = route.routeData;
+        let downloadTitle = `${t(TITLE_MAP[specialServiceId || serviceId])}.-${t('纠错记录')}.csv`;
+        let downloadUrl = '/webapi/feedback/downloadList';
+        exportFile(downloadUrl, downloadTitle, newSearchParams).then(() => {
+            callback && callback();
+        });
+    }, [getSearchParams, route.routeData]);
+
+    // 获取历史记录列表数据
+    const getHistoryList = useCallback(async () => {
+        const newParams = getSearchParams();
+        if (dispatch) {
+            const dataSoucre = await dispatch({
+                type: 'history/getFeedbackList',
+                payload: newParams,
+            });
+            const { items = [], totalCount } = dataSoucre.content;
+            setListData(items);
+            setListTotalCount(totalCount);
+            setSelectedContents([]);
+            setListLoading(false);
+            let data = formatData && formatData(items, channelMap);
+            const { dataSource } = data;
+            setTableDataSource(dataSource);
+            if (items.length) {
+                let newDetailData = (formatDetailData && formatDetailData(items[detailIndex], channelMap)) || {};
+                setDetailData(newDetailData);
+                setActivityData(items[detailIndex]);
+            }
+        }
+    }, [
+        channelMap,
+        detailIndex,
+        getSearchParams,
+        dispatch,
+        formatData,
+        formatDetailData,
+    ]);
+
+    // 查询列表
+    const doSearch =  useCallback(async () => {
+        backTop();
+        setListLoading(true);
+        await getHistoryList();
+    }, [getHistoryList]);
+
+    const handleBatchCancelError = useCallback(async () => {
+        if (!selectedContents?.length) {
+            message.warn(t('请先选择需要取消纠错的记录'));
+            return;
+        }
+        const requestIds = getSelectedRequestIds();
+        if (!requestIds?.length) {
+            message.warn(t('请先选择需要取消纠错的记录'));
+            return;
+        }
+        const params = {
+            organization: currentGlobalFilter.organization,
+            requestIds,
+            serviceId: route.routeData.serviceId,
+        };
+        const result = await cancelFeedback(params);
+        if (result.code === REQUEST_CODE.SUCCESS) {
+            message.success(result.message);
+            setSelectedContents([]);
+            doSearch();
+        }
+        else {
+            message.error(result.message);
+        }
+    }, [selectedContents, getSelectedRequestIds, currentGlobalFilter, route, doSearch, t]);
+
+    const renderSelectShowDom = useCallback(() => {
+        if (!selectedContents?.length) {
+            return null;
+        }
+        return (
+            <div className={styles['select-show-dom']}>
+                {t('已选择')}
+                <span>{selectedContents?.length}</span>
+                {t('项')}
+                <span
+                    className={styles['operation-content']}
+                    onClick={handleSelectCurrentPage}
+                >
+                    {t('选中当页')}
+                </span>
+                <span
+                    className={styles['operation-content']}
+                    onClick={() => setSelectedContents([])}
+                >
+                    {t('取消选中')}
+                </span>
+            </div>
+        );
+    }, [selectedContents, handleSelectCurrentPage, t]);
+
+    const renderSelectionExtraDom = useCallback(() => {
+        if (!selectedContents?.length) {
+            return null;
+        }
+        return (
+            <Popconfirm
+                title={t('取消纠错后该条记录将被删除且不再展示，请确认是否继续？')}
+                okText={t('是')}
+                cancelText={t('否')}
+                onConfirm={handleBatchCancelError}
+            >
+                <span className={styles['operation-content']}>
+                    {t('批量取消纠错')}
+                </span>
+            </Popconfirm>
+        );
+    }, [selectedContents, handleBatchCancelError, t]);
+
+    /**
+     * 按钮点击事件
+     * @param {*} val
+     */
+    const onButtonClick = useCallback(name => {
+        switch (name) {
+            case 'historySearch':
+                doSearch();
+                break;
+            case 'historyReset':
+                resetParams();
+                break;
+        }
+    }, [doSearch, resetParams]);
+
+    const globalFilterChange = useCallback(async obj => { // 顶部搜索
+        const {
+            orgChange,
+            currentGlobalFilter,
+        } = obj;
+        setCurrentGlobalFilter(currentGlobalFilter);
+        if (orgChange) {
+            // 获取识别结果列表
+            getRiskLevelList(currentGlobalFilter.organization);
+            // // 获取渠道列表
+            getChannelEventList(currentGlobalFilter.organization);
+            setResetCount(resetCount + 1);
+            setQueryParams(initQueryParams());
+            const storageTime = await getStorageTime(
+                currentGlobalFilter.organization,
+                route.routeData.specialServiceId || route.routeData.serviceId,
+                props.dispatch);
+            setStorageTime(storageTime);
+        }
+    }, [
+        getChannelEventList,
+        getRiskLevelList,
+        initQueryParams,
+        getStorageTime,
+        resetCount,
+        route.routeData,
+        props.dispatch,
+    ]);
+
+    useEffect(() => {
+        if (!showBatchCancelOperator) {
+            setSelectedContents([]);
+        }
+    }, [showBatchCancelOperator]);
+
+    useEffect(() => {
+        window.addEventListener('keydown', changeDetailData);
+
+        return () => {
+            window.removeEventListener('keydown', changeDetailData);
+        };
+    }, [detailVisible, detailIndex]);
+
+    useEffect(() => {
+        if (firstUpdate.current) {
+            firstUpdate.current = false;
+            return;
+        }
+        doSearch();
+    }, [currentGlobalFilter, refresh, resetCount]);
+
+    useEffect(() => {
+        const currentData =  listData[detailIndex];
+        let detailData = [];
+        if (currentData) {
+            detailData = formatDetailData(currentData);
+        }
+        setDetailData(detailData);
+        setActivityData(currentData);
+    }, [detailIndex]);
+
+    useEffect(() => {
+        formatLabelSearchData(); // 格式化字段筛选
+        getNewRiskLabelList();
+        getFirstLabelList(); // 客户标注列表
+    }, []);
+
+    useLayoutEffect(() => {
+        initSerach(); // 初始化筛选栏数据
+    }, [initSerach]);
+
+    useLayoutEffect(() => {
+        setQueryParams(initQueryParams()); // 初始化参数
+    }, []);
+
+    useLayoutEffect(() => {
+        changeDateType(CREATE_TIME);
+        initTableColumns(); // 初始化表头
+    }, [storageTime, queryParams.startTime, queryParams.endTime]);
+
+    return (
+        <div>
+            <GlobalFilterListener onChange={globalFilterChange} />
+            <SMSearchForm
+                formData={getFormData()}
+                hasExport
+                listLoading={listLoading}
+                resetCount={resetCount}
+                isGlobalSearch
+                isErrorCorrection
+                exportData={callback => exportData(callback)}
+                onButtonClick={name => onButtonClick(name)}
+                onChange={changeQueryParams}
+            />
+            <div className={styles['table-list']}>
+                <SMTable
+                    columns={getIntlTableColums(tableColumns, t)}
+                    dataSource={tableDataSource}
+                    idName="rowId"
+                    loading={listLoading}
+                    totalCount={listTotalCount}
+                    wrapperStyle={{margin: 0}}
+                    scroll={{x: 300, y: '50vh'}}
+                    popoverStyle={{width: 250}}
+                    setTableKey={setTableKey}
+                    showTotal={() => `${t('共')}${listTotalCount}${t('条')}`}
+                    i18nText={tableText(t)}
+                    setLocalTable
+                    {...(showBatchCancelOperator ? {
+                        selectShowDom: renderSelectShowDom,
+                        selectionExtraDom: renderSelectionExtraDom,
+                        rowSelection: {
+                            selectedRowKeys: selectedContents,
+                            getCheckboxProps: record => {
+                                return {
+                                    disabled: isCancelDisabled(record),
+                                };
+                            },
+                            onChange: handleRowSelectionChange,
+                        },
+                    } : {})}
+                    customLoadingUrl={props.customLoadingIcon}
+                    antdProps={{
+                        rowKey: record => record?.rowId,
+                        pagination: {
+                            showQuickJumper: true,
+                            defaultPageSize: pageSize,
+                            pageSizeOptions: PAGE_SIZE,
+                            total: listTotalCount,
+                            current: currentPage,
+                            showSizeChanger: true,
+                        },
+                        onChange: listOnSearch,
+                    }}
+                />
+            </div>
+            <SMDetailDrawer
+                activityData={{...activityData, serviceId: route.routeData.serviceId}}
+                detailData={detailData}
+                searchParams={getSearchParams()}
+                visible={detailVisible}
+                onClose={closeDetail}
+                doSearch={doSearch}
+            />
+        </div>
+    );
+};
+
+export default connect(({ user }) => ({
+    currentUser: user.currentUser,
+}))(withIntlComponents(TypeErrorCorrection));