admin2 1.0.0

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

@@ -0,0 +1,1053 @@
+/* eslint-disable dot-notation */
+/* eslint-disable react/no-children-prop */
+/**
+ * pages
+ * 天净-图片-图片名单-图片相似黑名单
+ * 天净-图片-图片名单-图片相等黑名单
+ * 天净-视频文件-截帧图片名单-图片相等黑名单
+ * 天净-视频流-截帧图片名单-图片相等黑名单
+ * 名单内容页面
+ */
+import React, { Component } from 'react';
+import { connect, Link, history } from 'umi';
+import lodash from 'lodash';
+import { SMImageTable, SMModal } from 'sm-antd';
+import { Tooltip, message, Modal, Button, Spin } from 'antd';
+
+import { getAuthFunction } from '@/utils/AuthorityManage';
+import { LOCAL_STORAGE, AUTH_FUNCTION, ACCOUNT_ROLE, SM_ACCOUNT } from '@/contants';
+import {formatSearchParams, exportFile, formatContents, isPrivate, arryRepetition, Storage} from '@/utils/utils';
+import GlobalFilterListener from '@/components/GlobalFilterListener';
+import SMIcon from '@/components/SMIcon';
+import SensitiveWordSpin from '@/components/SensitiveWordSpin';
+import SMNoteTip from '@/components/SMNoteTip';
+import TotalCount from '@/components/TotalCount';
+import SMLabelSearch from '@/components/SMLabelSearch';
+import { PAGE_SIZE } from '@/contants/pageSize';
+import { LIST_CONTENT_URL, EXPORT_MD_TOOLTIP } from '@/contants/exportUrl';
+import withIntlComponents from '@/hoc/withIntlComponents';
+import {IMG_BLACK_SIMILAR_ORGS} from '@/contants/imgBlackSimilayOrgs';
+import {CustomMessageContent} from '@/components';
+
+import SensitivewordHintModal from '../../components/SensitivewordHintModal/index';
+import SMPopConfirm from '../../components/SMPopConfirm';
+import AddMdModal from '../../components/AddMdModal';
+import MdContentImportModal from '../../components/MdContentImportModal';
+import {LIST_TYPE} from '../../list/CommonType/contants';
+import {getRealProduct} from '../../constants';
+
+import tipImg from './img/tip.png';
+import styles from './index.less';
+
+
+const { confirm } = Modal;
+const { ModalType } = SMModal;
+
+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',
+            sensitiveWordSpin: false,
+            contentMoveModalVisible: false,
+            contentModalDefaultValue: {},
+            listType: 4, // 当前名单列表类型
+            mdDataList: [], // 名单列表，用于移动
+            currentMdListId: null, // 当前选择的名单, 移动用
+            authConfig: {
+                // 账号角色权限
+                canCreate: false,
+                canDelete: false,
+                canEdit: false,
+                canExport: false,
+                canBatchCreate: false,
+                canBatchDelete: false,
+            },
+            imgSpin: false,
+            similarUrl: [],
+            currentGlobalFilter: {
+                organization: '',
+                appId: '',
+                clusterId: '',
+            },
+            defaultLabelSearchData: {
+                placeholder: '搜索名单内容',
+                addonBefore: false,
+                optionData: [
+                    {
+                        value: 'content',
+                        name: '名单内容',
+                    },
+                ],
+            },
+        };
+    }
+
+    UNSAFE_componentWillMount() {
+        const { stateConfig } = this.props;
+        if (stateConfig) {
+            this.setState(stateConfig);
+        }
+    }
+
+    getCommonParams = () => {
+        const {route, subType} = this.props;
+        const serviceId = route.routeData.serviceId;
+        return {
+            subType,
+            realServiceId: serviceId,
+            realProduct: getRealProduct(subType, serviceId),
+        };
+    };
+
+    /**
+     * 路由跳转
+     * @param {*} text
+     * @param {*} record
+     * @param {*} index
+     */
+    routeJumpRender = text => {
+        const { name, path } = text;
+        return <Link to={path}>{name}</Link>;
+    };
+
+    /**
+     * 删除名单内容
+     * @param {Array} contents 名单内容数组
+     * @param {Function} cb 回调函数
+     */
+    async deleteMdContent(contents, cb, value) {
+        if (contents.length === 0) {
+            message.error('请选择要删除的名单内容！');
+            cb && cb();
+            return;
+        }
+        const { dispatch, route } = this.props;
+        const { listType } = this.state;
+        const { code, Message } = await dispatch({
+            type: 'mingdan/deleteMdContent',
+            payload: {
+                listId: this.state.listId,
+                organization: this.state.currentGlobalFilter.organization,
+                product: route.routeData.serviceId,
+                contents: contents,
+                checkSampleSet: listType === '7' ? 1 : undefined,
+                remarks: value ? [value] : [],
+                ...this.getCommonParams(),
+            },
+        });
+        if (code === 1100) {
+            message.success('删除成功，预计5分钟内生效');
+            cb && cb();
+            if (this.state.tableDataSource.length === contents.length) {
+                this.doSearch(1);
+                return;
+            }
+            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,
+        });
+    }
+    async checkSampleSet(values) {
+        const { dispatch } = this.props;
+        this.setState({ imgSpin: true });
+        const newValue = values.contents.filter(item => item.trim() !== '');
+        const { code, contents, totalCount, message: Message } = await dispatch(
+            {
+                type: 'mingdan/checkSampleSet',
+                payload: {
+                    organization: this.state.currentGlobalFilter.organization,
+                    contents: newValue,
+                },
+            }
+        );
+        const newSimilarUrl = lodash.cloneDeep(contents);
+        this.setState({
+            similarUrl: newSimilarUrl,
+            imgSpin: false,
+        });
+        if (code !== 1100) {
+            message.error(Message);
+            return;
+        }
+        if (code === 1100 && totalCount && totalCount > 0) {
+            return;
+        }
+        this.addMdContent(values);
+    }
+
+    createErrorMessage = (content, type) => {
+        const {t} = this.props;
+        const messageKey = `message-${Date.now()}`;
+        const Message = (
+            <span>
+                {type === 'success'
+                    ? t('操作成功，部分图片添加失败')
+                    : t('操作失败')}，
+                <a href={content?.errUrl}>{t('点此下载')}</a>
+                {t('图片失败原因')}
+            </span>
+        );
+        return {
+            content: <CustomMessageContent Message={Message} key={messageKey} />,
+            duration: 5,
+            key: messageKey,
+        };
+    };
+
+    /**
+     * 新增名单内容
+     * @param {*} values
+     */
+    async addMdContent(values) {
+        const { dispatch, route } = this.props;
+        const { contents = [], remark } = values;
+        const { listType, key } = this.state;
+        const { code, Message, content } = await dispatch({
+            type: 'mingdan/addMdContent',
+            payload: {
+                listId: this.state.listId,
+                organization: this.state.currentGlobalFilter.organization,
+                product: route.routeData.serviceId,
+                contents: contents ? formatContents(contents) : [],
+                remarks: remark ? [remark.trim()] : [],
+                checkSampleSet: listType === '7' ? 1 : undefined,
+                type: listType === '7' ? 7 : undefined,
+                ...this.getCommonParams(),
+            },
+        });
+        if (code === 1100) {
+            if (content?.errUrl) {
+                message.warning(this.createErrorMessage(content, 'success'));
+            }
+            else {
+                message.success('新增成功，预计5分钟内生效');
+            }
+            this.setState(
+                {
+                    contentModalVisible: false,
+                    similarUrl: [],
+                },
+                () => {
+                    this.doSearch();
+                }
+            );
+        } else {
+            if (content?.errUrl) {
+                message.error(this.createErrorMessage(content));
+            }
+            else {
+                message.error(Message);
+            }
+        }
+    }
+
+    /**
+     * 更新名单内容
+     * @param {*} newValues 新值
+     * @param {*} oldValues 旧值
+     */
+    async updateMdContent(newValues, oldValues) {
+        const { dispatch, route } = this.props;
+        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: route.routeData.serviceId,
+                newContent: contents,
+                oldContent: oldContent,
+                remark: remark,
+                ...this.getCommonParams(),
+            },
+        });
+        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 } = this.props;
+        const formData = new FormData();
+        fileList.forEach(file => {
+            formData.append('file', file);
+        });
+        if (type === 'delete') {
+            confirm({
+                title: '删除敏感图片确认',
+                centered: true,
+                icon: <img src={tipImg} className={styles['icon-tip']} />,
+                content: '此操作会删除文件内的所有敏感图片，请确认是否删除？',
+                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('上传失败！');
+                    }
+                },
+                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('上传失败！');
+            }
+        }
+    };
+
+    /**
+     * 批量导入文件
+     * @param {*} content
+     */
+    batchAdd = async content => {
+        const { dispatch, route, t } = this.props;
+        const {url, remarks} = content;
+        const { code, Message, contents } = await dispatch({
+            type: 'mingdan/batchAdd',
+            payload: {
+                organization: this.state.currentGlobalFilter.organization,
+                listId: this.state.listId,
+                product: route.routeData.serviceId,
+                url: url,
+                remarks,
+                ...this.getCommonParams(),
+            },
+        });
+        if (code === 1100) {
+            if (contents?.errUrl) {
+                message.warning(this.createErrorMessage(contents, 'success'));
+            }
+            else {
+                message.success(t('批量导入成功，预计5分钟内生效'));
+            }
+            this.setState(
+                {
+                    importModalVisible: false,
+                },
+                () => {
+                    this.doSearch();
+                }
+            );
+        } else {
+            if (contents?.errUrl) {
+                message.error(this.createErrorMessage(contents));
+            }
+            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: route.routeData.serviceId,
+                url: url,
+                remarks,
+                ...this.getCommonParams(),
+            },
+        });
+        if (code === 1100) {
+            message.success(t('批量删除成功，预计5分钟内生效'));
+            this.setState(
+                {
+                    importModalVisible: false,
+                },
+                () => {
+                    this.doSearch();
+                }
+            );
+        } else {
+            message.error(Message);
+        }
+    };
+
+    globalFilterChange = obj => {
+        const {
+            orgChange,
+            currentGlobalFilter,
+        } = obj;
+        const { organization } = currentGlobalFilter;
+        if (location.pathname.includes('similarBlack') && orgChange && !IMG_BLACK_SIMILAR_ORGS.includes(organization)) {
+            history.push(__ASSETS_PREFIX__ + '/new/tianjing/image/list/image/black');
+        }
+        this.setState({
+            currentGlobalFilter,
+            listLoading: true,
+        }, () => {
+            this.updateOperationAuth();
+            this.setState({ listLoading: true }, () => this.getCurrentMd());
+        });
+    };
+
+    // 获取当前的名单，取listId，取得后在查询名单内容列表
+    async getCurrentMd() {
+        const { dispatch, route } = this.props;
+        const { currentGlobalFilter, listType, listName } = this.state;
+        const { organization } = currentGlobalFilter;
+        const { listData } = await dispatch({
+            type: 'mingdan/getMdList',
+            payload: {
+                organization: organization,
+                product: route.routeData.serviceId,
+                type: listType,
+                count: 20,
+                offset: 0,
+                name: listName,
+            },
+        });
+        if (listData.length > 0) {
+            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) {
+                const dataSource = this.formatData(listData);
+                this.setState({
+                    tableDataSource: dataSource,
+                    listLoading: false,
+                });
+            } else {
+                this.setState({
+                    tableDataSource: [],
+                    listLoading: false,
+                });
+            }
+        });
+    }
+
+    formatData = (data = []) => {
+        return data.map(item => {
+            const { imgUrl, content, createTime = '', remark } = item;
+            return {
+                url: imgUrl,
+                key: content,
+                md5: content,
+                updateTime: createTime.split(' ')[0] || '-',
+                operationAccount: item.user || '-',
+                remark: remark || '-',
+                operation: {
+                    hasEdit: true,
+                    hasDelete: true,
+                },
+            };
+        });
+    };
+
+    // 跳转至名单内容操作日志
+    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'
+            : `${listName}.csv`;
+        const searchParams = {
+            organization: currentGlobalFilter.organization,
+            product: route.routeData.serviceId,
+            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,
+            subType = '',
+            channelType = '',
+        } = this.state;
+        const { organization } = currentGlobalFilter;
+        const serviceId = route.routeData.serviceId;
+        let searchParams = {
+            organization: organization,
+            product: serviceId,
+            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 {*} current
+     * @param {*} pageSize
+     */
+    listOnSearch = (current, pageSize) => {
+        const { queryParams } = this.state;
+        let newQueryParams = lodash.cloneDeep(queryParams);
+        this.setState(
+            {
+                currentPage: pageSize === this.state.pageSize ? current : 1,
+                pageSize: pageSize,
+                queryParams: newQueryParams,
+                selectedContents: [],
+                listLoading: true,
+            },
+            () => {
+                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;
+        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']}>
+                                    删除
+                                </span>
+                                <SMIcon type="icon-shanchuxuanzhong" />
+                            </div>
+                        }
+                    />
+                ) : null}
+            </div>
+        );
+    };
+    /**
+     * 名单查重
+     */
+    inspectData = async values => {
+        const { route, dispatch, t } = this.props;
+        this.setState({ sensitiveWordSpin: true });
+        const contents = values.contents ? formatContents(values.contents) : [];
+        const payload = {
+            listId: this.state.listId,
+            organization: this.state.currentGlobalFilter.organization,
+            product: route.routeData.serviceId,
+        };
+        const result = await dispatch({
+            type: 'mingdan/inspectData',
+            payload: {
+                ...payload,
+                contents,
+            },
+        });
+        this.setState({ sensitiveWordSpin: false });
+
+        if (result && result.text?.length) {
+            Storage.set(LOCAL_STORAGE.MD_CONTENT, payload);
+            global.modal.show(ModalType.MODAL_ALERT, {
+                width: 576,
+                modalTitle: t('提示'),
+                renderChildren: () => {
+                    return (
+                        <SensitivewordHintModal
+                            closeVisible={() => {
+                                this.setState({
+                                    contentModalVisible: false,
+                                });
+                            }}
+                            textList={result.text}
+                            onOk={() => {
+                                global.modal.pop();
+                                this.addMdContent(values);
+                            }}
+                            onCancel={() => {
+                                global.modal.pop();
+                            }}
+                            onGo={() => {
+                                const valueList = arryRepetition(
+                                    contents,
+                                    result.text
+                                );
+                                global.modal.pop();
+                                this.addMdContent({ contents: valueList.join('\n') });
+                            }}
+                        />
+                    );
+                },
+            });
+        } else {
+            this.addMdContent(values);
+        }
+    };
+
+    renderImgItem = record => {
+        const canDelete = this.state.authConfig.canDelete;
+        return (
+            <div className={styles['img-item']}>
+                <span className={styles['item-name']}>
+                    名单内容：
+                    <Tooltip title={record.md5} placement="left">
+                        <span className={styles['item-content']}>
+                            {record.md5}
+                        </span>
+                    </Tooltip>
+                </span>
+                <span className={styles['item-name']}>
+                    操作人：
+                    <Tooltip title={record.operationAccount} placement="left">
+                        <span className={styles['item-content']}>
+                            {record.operationAccount}
+                        </span>
+                    </Tooltip>
+                </span>
+                <span className={styles['item-name']}>
+                    更新时间：
+                    <Tooltip title={record.updateTime} placement="left">
+                        <span className={styles['item-content']}>
+                            {record.updateTime}
+                        </span>
+                    </Tooltip>
+                </span>
+                <span className={styles['item-name']}>
+                    备注：
+                    <Tooltip title={record.remark} placement="left">
+                        <span className={styles['item-content']}>
+                            {record.remark}
+                        </span>
+                    </Tooltip>
+                </span>
+                {canDelete ? (
+                    <span className={styles['item-name']}>
+                        操作：
+                        <SMPopConfirm
+                            title="请确认是否删除选中名单内容"
+                            onConfirm={(value, cb) =>
+                                this.deleteMdContent([record.url], cb, value)
+                            }
+                            children={
+                                <div className={styles['selection-operation']}>
+                                    <span className={styles['operation-content']}>删除</span>
+                                </div>
+                            }
+                        />
+                    </span>
+                ) : null}
+            </div>
+        );
+    };
+    renderIndex() {
+        const {
+            tableDataSource,
+            listLoading,
+            listTotalCount,
+            pageSize,
+            pageSizeOptions,
+            currentPage,
+            noteInfo,
+            exportLoading,
+            defaultLabelSearchData,
+            selectedContents,
+            contentModalVisible,
+            importModalType,
+            importModalVisible,
+            authConfig,
+            listType,
+            currentGlobalFilter,
+        } = this.state;
+        const {t} = this.props;
+        const { canCreate, canExport, canBatchDelete, canBatchCreate } = authConfig;
+        const { currentUser } = this.props;
+        const isAllApp = currentUser && currentUser.apps && currentUser.apps.isAll === 1;
+
+        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>
+                        )}
+                        {canBatchCreate && !isPrivate() && listType !== '7' && (
+                            <div className={styles['form-item']}>
+                                <Button
+                                    type="primary"
+                                    onClick={() =>
+                                        this.showMdContentImportModal('add')
+                                    }
+                                    className={styles['button-white']}
+                                >
+                                    <SMIcon type="icon-piliangdaochu" />
+                                    {t('批量导入')}
+                                </Button>
+                            </div>
+                        )}
+                        {canBatchDelete && !isPrivate() && listType !== '7' && (
+                            <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>
+                        )}
+                        <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={EXPORT_MD_TOOLTIP}
+                                        placement="topRight"
+                                    >
+                                        <Spin spinning={exportLoading}>
+                                            <SMIcon
+                                                type="icon-daochu"
+                                                onClick={this.exportData}
+                                            />
+                                        </Spin>
+                                    </Tooltip>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                )}
+
+                <div className={styles['table-list']}>
+                    <SMImageTable
+                        dataSource={tableDataSource}
+                        loading={listLoading}
+                        idName="url"
+                        totalCount={listTotalCount}
+                        rowSelection={{
+                            selectedRowKeys: selectedContents,
+                            onChange: val => {
+                                this.setState({
+                                    selectedContents: val,
+                                });
+                            },
+                        }}
+                        selectionExtraDom={this.showSelectionExtraDom}
+                        wrapperStyle={{
+                            margin: 0,
+                        }}
+                        pageSizeOptions={pageSizeOptions}
+                        pageSize={pageSize}
+                        current={currentPage}
+                        showSizeChanger
+                        onSearch={this.listOnSearch}
+                        renderItem={this.renderImgItem}
+                        antdPaginationProps={{
+                            showSizeChanger: true,
+                            showQuickJumper: true,
+                        }}
+                    />
+                    {tableDataSource.length ? (
+                        <TotalCount count={listTotalCount} top={-45} />
+                    ) : null}
+                </div>
+                <AddMdModal
+                    visible={contentModalVisible}
+                    listType={listType}
+                    similarUrl={this.state.similarUrl}
+                    organization={currentGlobalFilter.organization}
+                    onConfirm={(values, activeKey) => {
+                        if (listType === '7' && activeKey === '2') {
+                            this.checkSampleSet(values);
+                            return;
+                        }
+                        if (listType !== LIST_TYPE.SIMILAR) {
+                            this.inspectData(values);
+                        } else {
+                            this.addMdContent(values);
+                        }
+                    }}
+                    onCancel={() => {
+                        this.setState({
+                            contentModalVisible: false,
+                            similarUrl: [],
+                        });
+                    }}
+                />
+                <MdContentImportModal
+                    visible={importModalVisible}
+                    type={importModalType}
+                    productType="img"
+                    onConfirm={(fileList, type, remark) => {
+                        this.uploadFile(fileList, type, remark);
+                    }}
+                    onCancel={() => {
+                        this.setState({
+                            importModalVisible: false,
+                        });
+                    }}
+                />
+                <SensitiveWordSpin visible={this.state.sensitiveWordSpin} isImg={this.state.imgSpin} />
+            </div>
+        );
+    }
+
+    render() {
+        const { route, children } = this.props;
+        const pathname = location.pathname;
+        return (
+            <div>{pathname === route.path ? this.renderIndex() : children}</div>
+        );
+    }
+}
+
+export default connect(({ user }) => ({
+    currentUser: user.currentUser,
+}))(withIntlComponents(ListContent));