admin2 1.0.0

package/src/pages/pageComponents/mdPage/listContent/TextBlackType/index.jsx

@@ -0,0 +1,1184 @@
+/* eslint-disable react/no-children-prop */
+/**
+ * pages
+ * 天净-图片-OCR名单(OCR敏感词名单)
+ * 天净-音频文件-音频ASR名单(ASR敏感词名单)
+ * 天净-音频流-音频ASR名单(ASR敏感词名单)
+ * 天净-视频文件-截帧OCR名单(OCR敏感词名单) 天净-视频文件-音频ASR名单(ASR敏感词名单)
+ * 天净-视频流-截帧OCR名单(OCR敏感词名单) 天净-视频流-音频ASR名单(ASR敏感词名单)
+ * 名单内容页面
+ */
+
+import React, { Component } from 'react';
+import { connect, Link, history } from 'umi';
+import lodash from 'lodash';
+import { SMTable, SMModal } from 'sm-antd';
+import {
+    Tooltip,
+    message,
+    Modal,
+    Space,
+    Button,
+    Spin,
+} from 'antd';
+
+import { getAuthFunction } from '@/utils/AuthorityManage';
+import {AUTH_FUNCTION, ACCOUNT_ROLE, SM_ACCOUNT, tableText} from '@/contants';
+import {
+    formatSearchParams,
+    exportFile,
+    formatContents,
+    Storage,
+    arryRepetition,
+    isPrivate,
+} from '@/utils/utils';
+import TotalCount from '@/components/TotalCount';
+import SMIcon from '@/components/SMIcon';
+import SMNoteTip from '@/components/SMNoteTip';
+import SMLabelSearch from '@/components/SMLabelSearch';
+import { PAGE_SIZE } from '@/contants/pageSize';
+import SensitiveWordSpin from '@/components/SensitiveWordSpin';
+import { LIST_CONTENT_URL, EXPORT_TOOLTIP, EXPORT_MD_TOOLTIP } from '@/contants/exportUrl';
+import GlobalFilterListener from '@/components/GlobalFilterListener';
+import withIntlComponents from '@/hoc/withIntlComponents';
+import {getIntlTableColums} from '@/utils/helpers';
+import {SMSelect} from '@/components';
+
+import SMPopConfirm from '../../components/SMPopConfirm';
+import MdContentModal from '../../components/MdContentModal';
+import MdContentImportModal from '../../components/MdContentImportModal';
+import SensitivewordHintModal from '../../components/SensitivewordHintModal/index';
+import {
+    VIDEOSTREAM_EN_TEXT,
+    VIDEOSTREAM_AR_TEXT,
+    VIDEOSTREAM_EN_IMG,
+    VIDEOSTREAM_AR_IMG,
+    ASR_OCR,
+    GLOBAL,
+    getVideoStreamState,
+} from '../../list/CommonType/contants';
+import {getRealProduct} from '../../constants';
+
+import tipImg from './img/tip.png';
+import styles from './index.less';
+
+const { ModalType } = SMModal;
+const { confirm } = Modal;
+class ListContent extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            tableDataSource: [],
+            listTotalCount: 0, // 列表总数
+            currentPage: 1, // 当前列表页码
+            pageSize: 20, // 当前列表分页
+            pageSizeOptions: PAGE_SIZE,
+            queryParams: {}, // 列表搜索参数
+            noteInfo: '根据您的需求，添加符合要求的名单内容',
+            isSMShow: false,
+            listId: '',
+            listName: '',
+            exportLoading: false, // 导出按钮loading状态
+            selectedContents: [], // 当前选中的名单内容
+            contentModalVisible: false,
+            contentModalType: 'add',
+            importModalVisible: false,
+            importModalType: 'add',
+            contentMoveModalVisible: false,
+            contentModalDefaultValue: {},
+            listType: 4, // 当前名单列表类型
+            mdDataList: [], // 名单列表，用于移动
+            currentMdListId: null, // 当前选择的名单, 移动用,
+            sensitiveWordSpin: false, // 敏感词查重
+            languageList: [],
+            isVideoStreamEngOrAlb: getVideoStreamState(location.pathname),
+            authConfig: {
+                // 账号角色权限
+                canCreate: false,
+                canDelete: false,
+                canEdit: false,
+                canExport: false,
+                canBatchCreate: false,
+                canBatchDelete: false,
+            },
+            currentGlobalFilter: {
+                organization: '',
+                appId: '',
+                clusterId: '',
+            },
+            defaultLabelSearchData: {
+                placeholder: '搜索名单内容',
+                addonBefore: false,
+                optionData: [
+                    {
+                        value: 'content',
+                        name: '名单内容',
+                    },
+                ],
+            },
+        };
+    }
+
+    UNSAFE_componentWillMount() {
+        const { stateConfig } = this.props;
+        if (stateConfig) {
+            this.setState(stateConfig);
+        }
+    }
+
+    componentWillUnmount = () => {
+        //  Storage.remove("sm-tj-mingdan-repetition-list"); //清除重复名单数据详情
+        // Storage.remove("sm-tj-mingdan-parameter"); //查询参数
+    };
+    getProduct = () => {
+        const { route, stateConfig } = this.props;
+
+        const { isVideoStreamEngOrAlb, currentGlobalFilter } = this.state;
+        const { isGlobalProduct, isOrganizationProduct } = stateConfig;
+        const { organization } = currentGlobalFilter;
+        if (isVideoStreamEngOrAlb || isGlobalProduct || (organization === GLOBAL && isOrganizationProduct)) {
+            return ASR_OCR[route.routeData.serviceId];
+        }
+        return route.routeData.serviceId;
+    };
+
+    getCommmonParams = () => {
+        const {route, subType} = this.props;
+        const serviceId = route.routeData.serviceId;
+        return {
+            subType,
+            realServiceId: serviceId,
+            realProduct: getRealProduct(subType, serviceId),
+        };
+    };
+    /**
+     * 列表文本类型 展示
+     * @param {*} text
+     * @param {*} record
+     * @param {*} index
+     */
+    textRender = (text, record, index) => {
+        const toolTipTitle = <span className={styles.tooltip}>{text}</span>;
+        return (
+            <Tooltip title={toolTipTitle} placement="left">
+                <span className={styles.text}>{text}</span>
+            </Tooltip>
+        );
+    };
+
+    /**
+     * 列表时间类型展示
+     * @param {*} text
+     * @param {*} record
+     * @param {*} index
+     */
+    timeRender = (text, record, index) => {
+        const contentText = text.slice(5);
+        const toolTipTitle = <span className={styles.tooltip}>{text}</span>;
+        return (
+            <Tooltip title={toolTipTitle} placement="left">
+                <span className={styles.text}>{contentText}</span>
+            </Tooltip>
+        );
+    };
+
+    /**
+     * 路由跳转
+     * @param {*} text
+     * @param {*} record
+     * @param {*} index
+     */
+    routeJumpRender = (text, record, index) => {
+        const { name, path } = text;
+        return <Link to={path}>{name}</Link>;
+    };
+
+    /**
+     * 操作类型 渲染（编辑，删除）
+     * @param {*} text
+     * @param {*} record
+     * @param {*} index
+     */
+    operationRender = (text, record, index) => {
+        const { hasEdit = true, hasDelete = true } = text;
+        const { mdContent, remark } = record;
+        const { authConfig } = this.state;
+        const { canEdit, canDelete } = authConfig;
+        return (
+            <Space size={16}>
+                {hasEdit && canEdit ? (
+                    <SMIcon
+                        type="icon-xiugai"
+                        onClick={() => {
+                            this.showMdContentModal('modify', {
+                                contents: mdContent,
+                                remark,
+                            });
+                        }}
+                    />
+                ) : null}
+                {hasDelete && canDelete ? (
+                    <SMPopConfirm
+                        title="请确认是否删除名单内容"
+                        placeholder="请输入删除名单原因"
+                        hasTextArea
+                        onConfirm={(value, cb) =>
+                            this.deleteMdContent([mdContent], cb, value)
+                        }
+                        children={<SMIcon type="icon-shanchuxuanzhong" />}
+                    />
+                ) : null}
+                {!canDelete && !canEdit ? <span>-</span> : null}
+            </Space>
+        );
+    };
+
+    /**
+     * 删除名单内容
+     * @param {Array} contents 名单内容数组
+     * @param {Function} cb 回调函数
+     */
+    async deleteMdContent(contents, cb, value) {
+        const {dispatch, route, subType} = this.props;
+        const serviceId = route.routeData.serviceId;
+        if (contents.length === 0) {
+            message.error('请选择要删除的名单内容！');
+            cb && cb();
+            return;
+        }
+        const { code, Message } = await dispatch({
+            type: 'mingdan/deleteMdContent',
+            payload: {
+                listId: this.state.listId,
+                organization: this.state.currentGlobalFilter.organization,
+                product: this.getProduct(),
+                contents: contents,
+                remarks: value ? [value] : [],
+                subType,
+                realServiceId: serviceId,
+                realProduct: getRealProduct(subType, serviceId),
+            },
+        });
+        if (code === 1100) {
+            message.success('删除成功，预计5分钟内生效');
+            cb && cb();
+            if (this.state.tableDataSource.length === contents.length) {
+                this.doSearch(1);
+            }
+            this.doSearch();
+        } else {
+            cb && cb();
+            message.error(Message);
+        }
+    }
+
+    /**
+     * 展示新增或修改名单内容弹窗
+     * @param {*} type 弹窗类型 新增 || 修改
+     * @param {*} defaultValue 默认值
+     */
+    showMdContentModal(type, defaultValue) {
+        this.setState({
+            contentModalVisible: true,
+            contentModalType: type,
+            contentModalDefaultValue: defaultValue,
+        });
+    }
+
+    /**
+     * 展示 批量导入或删除名单内容弹窗
+     * @param {*} type
+     */
+    showMdContentImportModal(type) {
+        this.setState({
+            importModalType: type,
+            importModalVisible: true,
+        });
+    }
+
+    /**
+     * 新增名单内容
+     * @param {*} values
+     */
+    async addMdContent(values) {
+        const { dispatch, route, subType} = this.props;
+        const { contents, remark } = values;
+        const serviceId = route.routeData.serviceId;
+        const { code, Message } = await dispatch({
+            type: 'mingdan/addMdContent',
+            payload: {
+                listId: this.state.listId,
+                organization: this.state.currentGlobalFilter.organization,
+                product: this.getProduct(),
+                contents: contents ? formatContents(contents) : [],
+                remarks: remark ? [remark.trim()] : [],
+                subType,
+                realServiceId: serviceId,
+                realProduct: getRealProduct(subType, serviceId),
+            },
+        });
+        if (code === 1100) {
+            message.success('新增成功，预计5分钟内生效');
+
+            this.setState(
+                {
+                    contentModalVisible: false,
+                },
+                () => {
+                    this.doSearch();
+                }
+            );
+        } else {
+            message.error(Message || '操作失败！');
+        }
+    }
+
+    /**
+     * 更新名单内容
+     * @param {*} newValues 新值
+     * @param {*} oldValues 旧值
+     */
+    async updateMdContent(newValues, oldValues) {
+        const {route, subType, dispatch} = this.props;
+        const serviceId = route.routeData.serviceId;
+        const { contents, remark } = newValues;
+        const oldContent = oldValues.contents;
+        const { code, Message } = await dispatch({
+            type: 'mingdan/updateMdContent',
+            payload: {
+                listId: this.state.listId,
+                organization: this.state.currentGlobalFilter.organization,
+                product: this.getProduct(),
+                newContent: contents,
+                oldContent: oldContent,
+                remark: remark,
+                subType,
+                realServiceId: serviceId,
+                realProduct: getRealProduct(subType, serviceId),
+            },
+        });
+        if (code === 1100) {
+            message.success('修改成功，预计5分钟内生效');
+            this.setState(
+                {
+                    contentModalVisible: false,
+                },
+                () => {
+                    this.doSearch();
+                }
+            );
+        } else {
+            message.error(Message || '操作失败！');
+        }
+    }
+
+    /**
+     * 批量导入/删除 先上传文件
+     * @param {*} fileList
+     * @param {*} type
+     */
+    uploadFile = async (fileList, type, remark) => {
+        const {dispatch, t} = this.props;
+        const formData = new FormData();
+        fileList.forEach(file => {
+            formData.append('file', file);
+        });
+        if (type === 'delete') {
+            confirm({
+                title: t('删除名单内容确认'),
+                centered: true,
+                icon: <img src={tipImg} className={styles['icon-tip']} />,
+                content: t('此操作会删除文件内的所有名单内容，请确认是否删除？'),
+                onOk: async () => {
+                    const { code, content } = await dispatch({
+                        type: 'mingdan/uploadFile',
+                        payload: formData,
+                    });
+                    if (code === 1100) {
+                        content.remarks = remark ? [remark] : [];
+                        this.batchDelete(content);
+                    } else {
+                        message.error(t('上传失败！'));
+                    }
+                },
+                onCancel: () => {
+                    this.setState({
+                        importModalVisible: false,
+                    });
+                },
+            });
+        } else {
+            const { code, content } = await dispatch({
+                type: 'mingdan/uploadFile',
+                payload: formData,
+            });
+            if (code === 1100) {
+                content.remarks = remark ? [remark] : [];
+                this.batchAdd(content);
+            } else {
+                message.error(t('上传失败！'));
+            }
+        }
+    };
+
+    /**
+     * 批量导入文件
+     * @param {*} content
+     */
+    batchAdd = async content => {
+        const {dispatch, route, t} = this.props;
+        const {url, remarks} = content;
+        const { code, Message } = await dispatch({
+            type: 'mingdan/batchAdd',
+            payload: {
+                organization: this.state.currentGlobalFilter.organization,
+                listId: this.state.listId,
+                product: this.getProduct(),
+                url: url,
+                remarks,
+                ...this.getCommmonParams(),
+            },
+        });
+        if (code === 1100) {
+            message.success(t('批量导入成功，预计5分钟内生效'));
+            this.setState(
+                {
+                    importModalVisible: false,
+                },
+                () => {
+                    this.doSearch();
+                }
+            );
+        } else {
+            message.error(Message);
+        }
+    };
+
+    /**
+     * 批量删除文件
+     * @param {*} content
+     */
+    batchDelete = async content => {
+        const {dispatch, route, t} = this.props;
+        const {url, remarks} = content;
+        const { code, Message } = await dispatch({
+            type: 'mingdan/batchDelete',
+            payload: {
+                organization: this.state.currentGlobalFilter.organization,
+                listId: this.state.listId,
+                product: this.getProduct(),
+                url: url,
+                remarks,
+                ...this.getCommmonParams(),
+            },
+        });
+        if (code === 1100) {
+            message.success(t('批量删除成功，预计5分钟内生效'));
+            this.setState(
+                {
+                    importModalVisible: false,
+                },
+                () => {
+                    this.doSearch();
+                }
+            );
+        } else {
+            message.error(Message);
+        }
+    };
+
+    globalFilterChange = obj => {
+        const {
+            orgChange,
+            appIdChange,
+            clusterIdChange,
+            currentGlobalFilter,
+        } = obj;
+        this.setState(
+            {
+                currentGlobalFilter,
+                listLoading: true,
+            },
+            async () => {
+                this.updateOperationAuth();
+                this.setState(
+                    {
+                        listLoading: true,
+                    },
+                    () => {
+                        this.getCurrentMd();
+                    }
+                );
+            }
+        );
+    };
+
+    // 获取当前的名单，取listId，取得后在查询名单内容列表
+    async getCurrentMd() {
+        const { dispatch, route, isBlei, currentUser } = this.props;
+        const { currentGlobalFilter, listType, listName } = this.state;
+        const { organization } = currentGlobalFilter;
+        const { listData, totalCount } = await dispatch({
+            type: 'mingdan/getMdList',
+            payload: {
+                organization: organization,
+                product: this.getProduct(),
+                type: listType,
+                count: 20,
+                offset: 0,
+                ...(isBlei ? {} : {name: listName}),
+            },
+        });
+        const languageKey = `${route.routeData.serviceId}_${currentUser.account}`;
+        if (listData.length > 0) {
+            if (isBlei) {
+                const languageList = lodash.map(listData, item => {
+                    return {
+                        value: item.listId,
+                        name: lodash.get(item, 'langName'),
+                    };
+                });
+                const langStorage = Storage.get(languageKey);
+                const langStorageId = lodash.find(languageList, {name: langStorage});
+                const langStorageListId = lodash.get(langStorageId, 'value');
+                if (!langStorage || !langStorageListId) {
+                    Storage.set(languageKey, languageList[0].name);
+                }
+                this.setState(
+                    {
+                        listId: langStorageListId ? langStorageListId : listData[0].listId,
+                        languageList: isBlei ? languageList : [],
+                    },
+                    () => {
+                        this.doSearch();
+                    }
+                );
+            } else {
+                this.setState(
+                    {
+                        listId: listData[0].listId,
+                    },
+                    () => {
+                        this.doSearch();
+                    }
+                );
+            }
+        } else {
+            this.setState({
+                tableDataSource: [],
+                listLoading: false,
+            });
+        }
+    }
+
+    // 请求搜索
+    doSearch(page) {
+        this.setState(
+            {
+                listLoading: true,
+                currentPage: page ? 1 : this.state.currentPage,
+                selectedContents: [],
+            },
+            () => {
+                this.getMdContentList();
+            }
+        );
+    }
+
+    //  获取名单内容列表
+    async getMdContentList() {
+        const { dispatch } = this.props;
+        const newParams = this.getSearchParams();
+        const { listData, totalCount } = await dispatch({
+            type: 'mingdan/getMdContentList',
+            payload: newParams,
+        });
+        this.setState(
+            {
+                listData,
+                listTotalCount: totalCount,
+            },
+            () => {
+                if (listData.length) {
+                    let dataSource = this.formatData(listData);
+                    this.setState({
+                        tableDataSource: dataSource,
+                        listLoading: false,
+                    });
+                } else {
+                    this.setState({
+                        tableDataSource: [],
+                        listLoading: false,
+                    });
+                }
+            }
+        );
+    }
+
+    // 获取列表表单项
+    getTableColumns = () => {
+        return [
+            {
+                title: '名单内容',
+                key: 'mdContent',
+                dataIndex: 'mdContent',
+                width: '15%',
+                ellipsis: true,
+                render: this.textRender,
+            },
+            {
+                title: '更新时间',
+                key: 'updateTime',
+                dataIndex: 'updateTime',
+                width: 120,
+                ellipsis: true,
+                render: this.timeRender,
+            },
+            {
+                title: '操作账号',
+                key: 'operationAccount',
+                dataIndex: 'operationAccount',
+                width: '15%',
+                ellipsis: true,
+                render: this.textRender,
+            },
+            {
+                title: '备注',
+                key: 'remark',
+                dataIndex: 'remark',
+                width: '15%',
+                ellipsis: true,
+                render: this.textRender,
+            },
+            {
+                title: '操作',
+                key: 'operation',
+                dataIndex: 'operation',
+                width: 120,
+                ellipsis: true,
+                render: this.operationRender,
+            },
+        ];
+    };
+
+    formatData = data => {
+        let dataSource = [];
+        dataSource = data.map(item => {
+            return {
+                key: item.content,
+                id: item.content,
+                mdContent: item.content,
+                updateTime: item.createTime || '-',
+                timeBased: item.efficientTime || '永久',
+                operationAccount: item.user || '-',
+                remark: item.remark || '-',
+                operation: {
+                    hasEdit: true,
+                    hasDelete: true,
+                },
+            };
+        });
+        return dataSource;
+    };
+
+    // 跳转至名单内容操作日志
+    jumpToOpLog = () => {
+        history.push({
+            pathname: `${location.pathname}/contentOpLog`,
+            query: {
+                listName: this.state.listName,
+                listId: this.state.listId,
+            },
+        });
+    };
+
+    // 导出数据
+    exportData = () => {
+        const { listName, listId, currentGlobalFilter, queryParams, channelType } = this.state;
+        const { route } = this.props;
+        const title = `${listName}.csv`;
+        const searchParams = {
+            organization: currentGlobalFilter.organization,
+            product: this.getProduct(),
+            listId,
+            ...queryParams,
+        };
+        // 天枢使用 channelType
+        const isTianShu = location.pathname.includes('/new/tianShu');
+        if (isTianShu && channelType) {
+            searchParams.channelType = channelType;
+        }
+        const downloadUrl = LIST_CONTENT_URL;
+
+        exportFile(downloadUrl, title, searchParams).then(() => {
+            this.setState({
+                exportLoading: false,
+            });
+        });
+    };
+
+    // 获取查询接口参数
+    getSearchParams = () => {
+        const { route } = this.props;
+        const {
+            currentGlobalFilter,
+            queryParams,
+            currentPage,
+            pageSize,
+            listId,
+            channelType = '',
+        } = this.state;
+        const { organization } = currentGlobalFilter;
+        const serviceId = route.routeData.serviceId;
+        let searchParams = {
+            organization: organization,
+            product: this.getProduct(),
+            listId: listId,
+            count: pageSize,
+            offset: (currentPage - 1) * pageSize,
+            ...queryParams,
+        };
+        // 天枢使用 channelType
+        const isTianShu = location.pathname.includes('/new/tianShu');
+        if (isTianShu && channelType) {
+            searchParams.channelType = channelType;
+        }
+        // 处理一下searchParams，如果为'' || 'all', 则删除该项
+        let newSearchParams = formatSearchParams(searchParams);
+        return newSearchParams;
+    };
+
+    // 更新操作权限
+    updateOperationAuth = () => {
+        const { currentUser } = this.props;
+        const { isSMShow, currentGlobalFilter } = this.state;
+        const currentUserOrg = currentUser.organization; // 当前用户公司的org
+        const roleIds = currentUser.roleIds;
+        const organization = currentGlobalFilter.organization;
+        let canCreate = getAuthFunction(AUTH_FUNCTION.CREATE);
+        let canBatchCreate = getAuthFunction(AUTH_FUNCTION.BATCH_CREATE);
+        let canDelete = getAuthFunction(AUTH_FUNCTION.DELETE);
+        let canBatchDelete = getAuthFunction(AUTH_FUNCTION.BATCH_DELETE);
+        let canEdit = getAuthFunction(AUTH_FUNCTION.UPDATE);
+        let canExport = getAuthFunction(AUTH_FUNCTION.EXPORT);
+        if (currentUserOrg === SM_ACCOUNT && organization === SM_ACCOUNT) {
+            if (!isSMShow || !roleIds.includes(ACCOUNT_ROLE.SM_ROLE)) {
+                canDelete = false;
+                canEdit = false;
+                canCreate = false;
+                canBatchCreate = false;
+                canBatchDelete = false;
+            }
+        }
+        this.setState({
+            authConfig: {
+                // 账号角色权限
+                canCreate,
+                canDelete,
+                canEdit,
+                canExport,
+                canBatchCreate,
+                canBatchDelete,
+            },
+        });
+    };
+
+    /**
+     * 列表排序更改，切换页码/翻页
+     * @param {*} pagination
+     * @param {*} filters
+     * @param {*} sorter
+     */
+    listOnSearch = (pagination, filters, sorter) => {
+        const { current, pageSize } = pagination;
+        const { queryParams } = this.state;
+        let newQueryParams = lodash.cloneDeep(queryParams);
+        this.setState(
+            {
+                currentPage: current,
+                pageSize: pageSize,
+                queryParams: newQueryParams,
+                listLoading: true,
+                selectedContents: [],
+            },
+            () => {
+                this.getMdContentList();
+            }
+        );
+    };
+
+    /**
+     * 搜索筛选项更改
+     * @param {*} name   更改筛选项类型名称
+     * @param {*} value  更改后的值
+     */
+    changeQueryParams(name, value) {
+        const { queryParams } = this.state;
+        let newQueryParams = lodash.cloneDeep(queryParams);
+        switch (name) {
+            default:
+                newQueryParams[name] = value;
+        }
+        this.setState(
+            {
+                queryParams: newQueryParams,
+            },
+            () => {
+                this.doSearch();
+            }
+        );
+    }
+
+    /**
+     * 显示多选操作栏
+     */
+    showSelectionExtraDom = () => {
+        const { authConfig } = this.state;
+        const { canDelete } = authConfig;
+        const {t} = this.props;
+        return (
+            <div>
+                {canDelete ? (
+                    <SMPopConfirm
+                        title="请确认是否删除选中名单内容"
+                        hasTextArea
+                        onConfirm={(value, cb) =>
+                            this.deleteMdContent(
+                                this.state.selectedContents,
+                                cb,
+                                value
+                            )
+                        }
+                        children={
+                            <div className={styles['selection-operation']}>
+                                <span className={styles['operation-content']}>
+                                    {t('删除')}
+                                </span>
+                                <SMIcon type="icon-shanchuxuanzhong" />
+                            </div>
+                        }
+                    />
+                ) : null}
+            </div>
+        );
+    };
+
+    changeFilter = value => {
+        const {currentUser, route} = this.props;
+        const languageKey = `${route.routeData.serviceId}_${currentUser.account}`;
+        const languageName = lodash.find(this.state.languageList, {value: value});
+        Storage.set(languageKey, lodash.get(languageName, 'name'));
+        this.setState({
+            listId: value,
+        }, () => this.doSearch());
+    };
+
+    /**
+     * 名单查重
+     */
+    inspectData = async (values, type, oldValues) => {
+        const {t, route, subType} = this.props;
+        const serviceId = route.routeData.serviceId;
+        this.setState({
+            sensitiveWordSpin: true,
+        });
+        let contents = values.contents ? formatContents(values.contents) : [];
+        let result = await this.props.dispatch({
+            type: 'mingdan/inspectData',
+            payload: {
+                listId: this.state.listId,
+                organization: this.state.currentGlobalFilter.organization,
+                product: this.getProduct(),
+                contents,
+                subType,
+                realServiceId: serviceId,
+                realProduct: getRealProduct(subType, serviceId),
+            },
+        });
+        this.setState({
+            sensitiveWordSpin: false,
+        });
+
+        if (result && result.text?.length) {
+            Storage.set('sm-tj-mingdan-parameter', {
+                listId: this.state.listId,
+                organization: this.state.currentGlobalFilter.organization,
+                product: this.getProduct(),
+                action: result.action,
+            });
+            global.modal.show(ModalType.MODAL_ALERT, {
+                width: 576,
+                modalTitle: t('提示'),
+
+                renderChildren: () => {
+                    return (
+                        <SensitivewordHintModal
+                            closeVisible={() => {
+                                this.setState({
+                                    contentModalVisible: false,
+                                });
+                            }}
+                            textList={result.text}
+                            action={result.action}
+                            onOk={() => {
+                                global.modal.pop();
+                                if (type === 'add') {
+                                    this.addMdContent(values);
+                                } else {
+                                    this.updateMdContent(values, oldValues);
+                                }
+                            }}
+                            onCancel={() => {
+                                global.modal.pop();
+                            }}
+                            onGo={() => {
+                                let valueList = arryRepetition(
+                                    contents,
+                                    result.text
+                                );
+
+                                global.modal.pop();
+                                if (type === 'add') {
+
+                                    this.addMdContent({
+                                        contents: valueList.join('\n'),
+                                    });
+                                } else {
+                                    this.updateMdContent(
+                                        { contents: valueList.join('\n') },
+                                        oldValues
+                                    );
+                                }
+                            }}
+                        />
+                    );
+                },
+            });
+        } else {
+            if (type === 'add') {
+                this.addMdContent(values);
+            } else {
+                this.updateMdContent(values, oldValues);
+            }
+        }
+    };
+
+    renderIndex() {
+        const {
+            tableDataSource,
+            listLoading,
+            listTotalCount,
+            pageSize,
+            pageSizeOptions,
+            currentPage,
+            noteInfo,
+            exportLoading,
+            defaultLabelSearchData,
+            selectedContents,
+            contentModalVisible,
+            contentModalType,
+            contentModalDefaultValue,
+            importModalType,
+            importModalVisible,
+            authConfig,
+            languageList,
+        } = this.state;
+        const {t, isBlei, route} = this.props;
+
+        const tableColumns = getIntlTableColums(this.getTableColumns(), t);
+        const { canCreate, canExport, canBatchDelete, canBatchCreate } = authConfig;
+        const { currentUser } = this.props;
+        const isAllApp
+            = currentUser && currentUser.apps && currentUser.apps.isAll === 1;
+        const languageKey = `${route.routeData.serviceId}_${currentUser.account}`;
+        const selectData = {
+            defaultValue: lodash.find(languageList, {name: Storage.get(languageKey)})
+            || lodash.get(languageList, '[0].value'),
+            optionData: languageList,
+            title: t('语种'),
+            labelId: 'listId',
+        };
+
+        return (
+            <div>
+                <GlobalFilterListener onChange={this.globalFilterChange} />
+                <div className={styles['note-tip']}>
+                    <SMNoteTip noteInfo={noteInfo} />
+                </div>
+                {isAllApp ? (
+                    <div className={styles['search-form']}>
+                        {canCreate ? (
+                            <div className={styles['form-item']}>
+                                <Button
+                                    type="primary"
+                                    onClick={() =>
+                                        this.showMdContentModal('add', {})
+                                    }
+                                >
+                                    <SMIcon type="icon-add" />
+                                    {t('添加名单内容')}
+                                </Button>
+                            </div>
+                        ) : null}
+                        {canBatchCreate && !isPrivate() ? (
+                            <div className={styles['form-item']}>
+                                <Button
+                                    type="primary"
+                                    onClick={() =>
+                                        this.showMdContentImportModal('add')
+                                    }
+                                    className={styles['button-white']}
+                                >
+                                    <SMIcon type="icon-piliangdaochu" />
+                                    {t('批量导入')}
+                                </Button>
+                            </div>
+                        ) : null}
+                        {canBatchDelete && !isPrivate() ? (
+                            <div className={styles['form-item']}>
+                                <Tooltip
+                                    title={t('可以批量删除上传文件内的所有敏感词')}
+                                    placement="right"
+                                >
+                                    <Button
+                                        type="primary"
+                                        onClick={() =>
+                                            this.showMdContentImportModal(
+                                                'delete'
+                                            )
+                                        }
+                                        className={styles['button-white']}
+                                    >
+                                        <SMIcon type="icon-shanchuxuanzhong" />
+                                        {t('批量删除')}
+                                    </Button>
+                                </Tooltip>
+                            </div>
+                        ) : null}
+                        {isBlei && (
+                            <div className={styles['item-search']}>
+                                <SMSelect
+                                    selectData={selectData}
+                                    onChange={this.changeFilter}
+                                />
+                            </div>
+                        )}
+                        <div className={styles['item-search']}>
+                            <SMLabelSearch
+                                onSearch={(searchId, searchText) => {
+                                    this.changeQueryParams(
+                                        searchId,
+                                        searchText
+                                    );
+                                }}
+                                configData={defaultLabelSearchData}
+                            />
+                        </div>
+                        <div className={styles['item-right']}>
+                            <div className={styles['item-oplog']}>
+                                {getAuthFunction(AUTH_FUNCTION.OPLOG) && (
+                                    <Button onClick={this.jumpToOpLog} type="link">
+                                        {t('操作日志')}
+                                    </Button>
+                                )}
+                            </div>
+                            {canExport ? (
+                                <div className={styles['export-icon']}>
+                                    <Tooltip
+                                        title={t(EXPORT_MD_TOOLTIP)}
+                                        placement="topRight"
+                                    >
+                                        <Spin spinning={exportLoading}>
+                                            <SMIcon
+                                                type="icon-daochu"
+                                                onClick={this.exportData}
+                                            />
+                                        </Spin>
+                                    </Tooltip>
+                                </div>
+                            ) : null}
+                        </div>
+                    </div>
+                ) : null}
+                <div className={styles['table-list']}>
+                    <SMTable
+                        columns={tableColumns}
+                        dataSource={tableDataSource}
+                        loading={listLoading}
+                        totalCount={listTotalCount}
+                        showTotal={() => `${t('共')}${listTotalCount}${t('条')}`}
+                        i18nText={tableText(t)}
+                        rowSelection={{
+                            selectedRowKeys: selectedContents,
+                            onChange: val => {
+                                this.setState({
+                                    selectedContents: val,
+                                });
+                            },
+                        }}
+                        selectionExtraDom={this.showSelectionExtraDom}
+                        wrapperStyle={{
+                            margin: 0,
+                        }}
+                        customLoadingUrl={this.props.customLoadingIcon}
+                        antdProps={{
+                            pagination: {
+                                showQuickJumper: true,
+                                defaultPageSize: pageSize,
+                                pageSizeOptions: pageSizeOptions,
+                                total: listTotalCount,
+                                current: currentPage,
+                                showSizeChanger: true,
+                            },
+                            onChange: this.listOnSearch,
+                        }}
+                    />
+                    {tableDataSource.length ? (
+                        <TotalCount count={listTotalCount} />
+                    ) : null}
+                </div>
+                <MdContentModal
+                    visible={contentModalVisible}
+                    type={contentModalType}
+                    initialValues={contentModalDefaultValue}
+                    isDefaultBlack={this.state.isBlack}
+                    onConfirm={(values, type, oldValues) => {
+                        this.inspectData(values, type, oldValues);
+                    }}
+                    onCancel={() => {
+                        this.setState({
+                            contentModalVisible: false,
+                        });
+                    }}
+                />
+                <MdContentImportModal
+                    visible={importModalVisible}
+                    type={importModalType}
+                    onConfirm={(fileList, type, remark) => {
+                        this.uploadFile(fileList, type, remark);
+                    }}
+                    onCancel={() => {
+                        this.setState({
+                            importModalVisible: false,
+                        });
+                    }}
+                />
+
+                <SensitiveWordSpin visible={this.state.sensitiveWordSpin} />
+            </div>
+        );
+    }
+
+    render() {
+        const { route, children } = this.props;
+        const pathname = location.pathname;
+        return (
+            <div>{pathname === route.path ? this.renderIndex() : children}</div>
+        );
+    }
+}
+
+export default connect(({ user, mingdan }) => ({
+    currentUser: user.currentUser,
+    mingdan,
+}))(withIntlComponents(ListContent));