admin2 1.0.0

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

@@ -0,0 +1,1185 @@
+/* eslint-disable max-len */
+/* eslint-disable react/no-children-prop */
+/* eslint-disable eqeqeq */
+/**
+ * 名单内容页面
+ */
+
+import React, { Component, useState, useEffect, useRef } from 'react';
+import { connect, Link, history } from 'umi';
+import lodash from 'lodash';
+import { SMImageTable, SMModal } from 'sm-antd';
+import { Tooltip, message, Modal, Button, Spin, Breadcrumb, Popover, Input, Tag } from 'antd';
+import videojs from 'video.js';
+
+// 导入 video.js 样式
+import 'video.js/dist/video-js.css';
+
+import withIntlComponents from '@/hoc/withIntlComponents';
+import { getAuthFunction } from '@/utils/AuthorityManage';
+import { SM_ACCOUNT, AUTH_FUNCTION, ACCOUNT_ROLE, tableText } from '@/contants';
+import {
+    formatSearchParams,
+    getUrlParams,
+    exportFile,
+    isPrivate,
+    formatContents,
+    arryRepetition,
+    Storage,
+} from '@/utils/utils';
+import SMIcon from '@/components/SMIcon';
+import SensitiveWordSpin from '@/components/SensitiveWordSpin';
+import GlobalFilterListener from '@/components/GlobalFilterListener';
+import SMNoteTip from '@/components/SMNoteTip';
+import SMLabelSearch from '@/components/SMLabelSearch';
+import SMSelect from '@/components/SMSelect';
+import TotalCount from '@/components/TotalCount';
+import { LIST_CONTENT_URL, EXPORT_TOOLTIP, EXPORT_MD_TOOLTIP } from '@/contants/exportUrl';
+import { PAGE_SIZE } from '@/contants/pageSize';
+import {CustomMessageContent, CustomVideo} from '@/components';
+
+import SensitivewordHintModal from '../../components/SensitivewordHintModal/index';
+import SMPopConfirm from '../../components/SMPopConfirm';
+import AddMdModal from '../../components/AddMdModal';
+import AddVideoModal from '../../components/AddVideoModal';
+import MdContentImportModal from '../../components/MdContentImportModal';
+import {getRealProduct, NEXUS_PRODUCT_MAP} 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: '',
+            checkItems: '[]',
+            exportLoading: false, // 导出按钮loading状态
+            selectedContents: [], // 当前选中的名单内容
+            contentModalVisible: false,
+            contentModalType: 'add',
+            importModalVisible: false,
+            importModalType: 'add',
+            contentMoveModalVisible: false,
+            contentModalDefaultValue: {},
+            moveConfirmVisible: false,
+            listType: 4, // 当前名单列表类型
+            mdDataList: [], // 名单列表，用于移动
+            remark: '', // 备注信息
+            sensitiveWordSpin: false,
+            currentMdListId: null, // 当前选择的名单, 移动用
+            authConfig: { // 账号角色权限
+                canCreate: false,
+                canDelete: false,
+                canMove: false,
+                canEdit: false,
+                canExport: false,
+                canBatchCreate: false,
+                canBatchDelete: false,
+            },
+            pageRoute: {
+                name: '',
+                path: '',
+            },
+            currentGlobalFilter: {
+                organization: '',
+                appId: '',
+                clusterId: '',
+            },
+            defaultLabelSearchData: {
+                placeholder: '搜索名单内容',
+                addonBefore: false,
+                optionData: [
+                    {
+                        value: 'content',
+                        name: '名单内容',
+                    },
+                ],
+            },
+        };
+    }
+
+    UNSAFE_componentWillMount() {
+        const { stateConfig } = this.props;
+        const { listId = '', listName = '', checkItems = '[]' } = getUrlParams(location.href);
+        if (stateConfig) {
+            this.setState({
+                listId,
+                listName,
+                checkItems,
+                ...stateConfig,
+            });
+        } else {
+            this.setState({
+                listId,
+                listName,
+                checkItems,
+            });
+        }
+    }
+
+    /**
+     * 路由跳转
+     * @param {*} text
+     * @param {*} record
+     * @param {*} index
+     */
+    routeJumpRender = (text, record, index) => {
+        const {
+            name,
+            path,
+        } = text;
+        return (
+            <Link to={path}>{name}</Link>
+        );
+    };
+
+    getProduct = () => {
+        const { route } = this.props;
+        const serviceId = route.routeData.serviceId;
+
+        // 天枢 NEXUS 服务 product 映射
+        const isTianShu = location.pathname.includes('/new/tianShu');
+        if (isTianShu && NEXUS_PRODUCT_MAP[serviceId]) {
+            return NEXUS_PRODUCT_MAP[serviceId];
+        }
+
+        return serviceId;
+    };
+
+    getCommonParams = () => {
+        const {route} = this.props;
+        const {subType, channelType} = this.state;
+        const serviceId = route.routeData.serviceId;
+
+        // 天枢 NEXUS 服务只返回 channelType
+        const isTianShu = location.pathname.includes('/new/tianShu');
+        if (isTianShu) {
+            return {
+                channelType,
+            };
+        }
+
+        return {
+            subType,
+            realServiceId: serviceId,
+            realProduct: getRealProduct(subType, serviceId),
+        };
+    };
+
+    /**
+     * 删除名单内容
+     * @param {Array} contents 名单内容数组
+     * @param {Function} cb 回调函数
+     */
+    async deleteMdContent(contents, cb, value) {
+        const {t} = this.props;
+        if (contents.length === 0) {
+            message.error(t('请选择要删除的名单内容'));
+            cb && cb();
+            return;
+        }
+        const { dispatch, route } = this.props;
+        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] : [],
+                ...this.getCommonParams(),
+            },
+        });
+        if (code == 1100) {
+            message.success(t('删除成功，预计5分钟内生效'));
+            cb && cb();
+            if (this.state.tableDataSource.length === contents.length) {
+                this.doSearch(1);
+            }
+            this.doSearch();
+        } else {
+            cb && cb();
+            message.error(Message);
+        }
+    }
+
+    /**
+     * 移动名单内容
+     * @param {*} contents 名单内容数组
+     */
+    async moveMdContent(contents) {
+        const {t} = this.props;
+        if (contents.length === 0) {
+            message.error(t('请选择要移动的名单内容！'));
+            return;
+        } else if (!this.state.currentMdListId) {
+            message.error(t('请选择名单！'));
+            return;
+        }
+        const { dispatch, route } = this.props;
+        const { code, Message } = await dispatch({
+            type: 'mingdan/batchMove',
+            payload: {
+                listId: this.state.currentMdListId,
+                sourceListId: this.state.listId,
+                organization: this.state.currentGlobalFilter.organization,
+                product: this.getProduct(),
+                contents: contents,
+                remarks: this.state.remark ? [this.state.remark] : [],
+                ...this.getCommonParams(),
+            },
+        });
+        if (code == 1100) {
+            message.success(t('移动成功，预计5分钟内生效'));
+            this.setState({
+                moveConfirmVisible: false,
+            }, () => {
+                this.doSearch();
+            });
+        } else {
+            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,
+        });
+    }
+
+    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, t } = this.props;
+        const { contents, remark } = values;
+        const { code, Message, content } = await dispatch({
+            type: 'mingdan/addMdContent',
+            payload: {
+                listId: this.state.listId,
+                organization: this.state.currentGlobalFilter.organization,
+                product: this.getProduct(),
+                contents: contents,
+                remarks: remark && [remark],
+                ...this.getCommonParams(),
+            },
+        });
+        if (code == 1100) {
+            if (content?.errUrl) {
+                message.warning(this.createErrorMessage(content, 'success'));
+            }
+            else {
+                message.success(t('新增成功，预计5分钟内生效'));
+            }
+            this.setState({
+                contentModalVisible: false,
+            }, () => {
+                this.doSearch();
+            });
+        } else {
+            if (content?.errUrl) {
+                message.error(this.createErrorMessage(content));
+            }
+            else {
+                message.error(Message || t('操作失败'));
+            }
+        }
+    }
+
+    /**
+     * 更新名单内容
+     * @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: this.getProduct(),
+                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, isVideo, t } = this.props;
+        const formData = new FormData();
+        const text  = isVideo ? '视频文件' : '图片';
+        fileList.forEach(file => {
+            formData.append('file', file);
+        });
+        if (type == 'delete') {
+            confirm({
+                title: t(`删除敏感${text}确认`),
+                centered: true,
+                icon: <img src={tipImg} className={styles['icon-tip']} />,
+                content: t(`此操作会删除文件内的所有敏感${text}，请确认是否删除？`),
+                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('上传失败！');
+            }
+        }
+    };
+
+    /**
+     * 批量导入文件
+     * @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: this.getProduct(),
+                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 } = 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.getCommonParams(),
+            },
+        });
+        if (code == 1100) {
+            message.success('批量删除成功，预计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.getMdList();
+            this.doSearch();
+        });
+    };
+
+    // 请求搜索
+    doSearch(page) {
+        this.setState({
+            listLoading: true,
+            currentPage: page ? 1 : this.state.currentPage,
+            selectedContents: [],
+        }, () => {
+            this.getMdContentList();
+        });
+    }
+
+    //  获取名单内容列表
+    async getMdContentList() {
+        const { dispatch, isVideo } = this.props;
+        const newParams = this.getSearchParams();
+        if (isVideo) {
+            newParams.subType = 'video';
+            newParams.type = '0';
+        }
+        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,
+                });
+            }
+        });
+    }
+
+    //  获取名单列表
+    async getMdList() {
+        const { dispatch, route } = this.props;
+        const { subType = '', channelType = '', reuseGlobal = '', listType, checkItems } = this.state;
+
+        let searchParams = {
+            organization: this.state.currentGlobalFilter.organization,
+            product: this.getProduct(),
+            type: this.state.listType,
+            checkItems: JSON.parse(checkItems),
+            count: 1000,
+            offset: 0,
+        };
+
+        // 天枢使用 channelType，非天枢使用 subType
+        const isTianShu = location.pathname.includes('/new/tianShu');
+        if (isTianShu && channelType) {
+            searchParams.channelType = channelType;
+        } else if (subType) {
+            searchParams.subType = subType;
+        }
+        // 全局名单 区分全局和公司
+        if (reuseGlobal == '1' && listType == '0') {
+            searchParams.reuseGlobal = reuseGlobal;
+        }
+        const { listData } = await dispatch({
+            type: 'mingdan/getMdList',
+            payload: searchParams,
+        });
+        if (listData.length) {
+            let mdDataList = [];
+            listData.map(item => {
+                if (item.listId !== this.state.listId) {
+                    mdDataList.push({
+                        name: item.name,
+                        value: item.listId,
+                    });
+                }
+            });
+            this.setState({
+                mdDataList,
+            });
+        }
+    }
+
+    formatData = (data = []) => {
+        return data.map(item => {
+
+            const { imgUrl, content, createTime = '', remark, videoUrl } = item;
+            return {
+                url: imgUrl || videoUrl,
+                key: content,
+                md5: content,
+                updateTime: createTime.split(' ')[0] || '-',
+                operationAccount: item.user || '-',
+                remark: remark || '-',
+                operation: {
+                    hasEdit: true,
+                    hasDelete: true,
+                },
+            };
+        });
+    };
+
+    // 跳转至名单内容操作日志
+    jumpToOpLog = () => {
+        history.push({
+            pathname: `${location.pathname}OpLog`,
+            query: {
+                listName: this.state.listName,
+                listId: this.state.listId,
+                checkItems: this.state.checkItems,
+            },
+        });
+    };
+
+    // 导出数据
+    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, subType = '', channelType = '' } = this.state;
+        const { organization } = currentGlobalFilter;
+        const serviceId = this.getProduct();
+        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 canMove = getAuthFunction(AUTH_FUNCTION.BATCH_MOVE);
+        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,
+                canMove,
+                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();
+        });
+    }
+
+    // 移动确认气泡浮框内容
+    moveConfirmContent = () => {
+        const { mdDataList } = this.state;
+        const selectData = {
+            optionData: mdDataList,
+            title: '名单列表',
+            labelId: 'mingdan',
+        };
+        const {t} = this.props;
+        return (
+            <div className={styles['pop-confirm']}>
+                <div className={styles['confirm-title']}>
+                    <img src={tipImg} className={styles['title-icon-tip']} />
+                    <div className={styles['title-content']}>{t('请选择要移动至的名单')}</div>
+                </div>
+                <div className={styles['confirm-content']}>
+                    <SMSelect
+                        selectData={selectData}
+                        componentProps={{
+                            placeholder: '请选择名单',
+                        }}
+                        onChange={value => {
+                            this.setState({
+                                currentMdListId: value,
+                            });
+                        }}
+                    />
+                </div>
+                <div className={styles['confirm-remark']}>
+                    <label className={styles['remark-text']}>{t('备注')}：</label>
+                    <Input
+                        placeholder={t('请输入备注')}
+                        onChange={e => this.setState({remark: e.target.value})}
+                    />
+                </div>
+                <div className={styles['confirm-footer']}>
+                    <Button onClick={() => {
+                        this.setState({
+                            moveConfirmVisible: false,
+                        });
+                    }}
+                    >{t('取消')}
+                    </Button>
+                    <Button
+                        type="primary"
+                        onClick={() => {
+                            this.moveMdContent(this.state.selectedContents);
+                        }}
+                    >{t('确认')}
+                    </Button>
+                </div>
+            </div>
+        );
+    };
+
+    /**
+     * 显示多选操作栏
+     */
+    showSelectionExtraDom = () => {
+        const { authConfig, moveConfirmVisible } = this.state;
+        const { canMove, canDelete } = authConfig;
+        const {t} = this.props;
+        return (
+            <div>
+                {canMove
+                    ? (
+                        <Popover
+                            content={this.moveConfirmContent()}
+                            trigger="click"
+                            placement="bottomRight"
+                            visible={moveConfirmVisible}
+                            onVisibleChange={visible => {
+                                this.setState({
+                                    moveConfirmVisible: visible,
+                                });
+                            }}
+                            arrowPointAtCenter
+                        >
+                            <div
+                                className={styles['selection-operation']}
+                                onClick={() => {
+                                    this.setState({ contentMoveModalVisible: true });
+                                }}
+                            >
+                                <span className={styles['operation-content']}>{t('移动')}</span>
+                                <SMIcon
+                                    type="icon-piliangyidongtubiao"
+                                />
+                            </div>
+                        </Popover>
+                    )
+
+                    : null
+                }
+                {
+                    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>
+        );
+    };
+    /**
+     * 名单查重
+     */
+    inspectData = async values => {
+        const {t, route} = 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: this.getProduct(),
+        };
+        const result = await this.props.dispatch({
+            type: 'mingdan/inspectData',
+            payload: {
+                ...payload,
+                contents,
+            },
+        });
+        this.setState({ sensitiveWordSpin: false });
+        if (result && result.text?.length) {
+            Storage.set('sm-tj-mingdan-parameter', 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;
+        const {t, isVideo} = this.props;
+
+        return (
+            <div className={styles['img-item']}>
+                {
+                    isVideo && (
+                        <>
+                            <CustomVideo src={record.url} width={300} height="150" id={record.url} t={t} />
+                            <span className={styles['item-name']}>
+                                {t('视频url')}：
+                                <Tooltip title={record.url} placement="left">
+                                    <span className={styles['item-content']}>{record.url}</span>
+                                </Tooltip>
+                            </span>
+                        </>
+                    )
+                }
+
+                <span className={styles['item-name']}>
+                    {t('名单内容')}：
+                    <Tooltip title={record.md5} placement="left">
+                        <span className={styles['item-content']}>{record.md5}</span>
+                    </Tooltip>
+                </span>
+                <span className={styles['item-name']}>
+                    {t('操作人')}：
+                    <Tooltip title={record.operationAccount} placement="left">
+                        <span className={styles['item-content']}>{record.operationAccount}</span>
+                    </Tooltip>
+                </span>
+                <span className={styles['item-name']}>
+                    {t('更新时间')}：
+                    <Tooltip title={record.updateTime} placement="left">
+                        <span className={styles['item-content']}>{record.updateTime}</span>
+                    </Tooltip>
+                </span>
+                <span className={styles['item-name']}>
+                    {t('备注')}：
+                    <Tooltip title={record.remark} placement="left">
+                        <span className={styles['item-content']}>{record.remark}</span>
+                    </Tooltip>
+                </span>
+                {canDelete
+                    ? (
+                        <span className={styles['item-name']}>{t('操作')}：
+                            <SMPopConfirm
+                                title="请确认是否删除选中名单内容"
+                                hasTextArea
+                                onConfirm={(value, cb) => this.deleteMdContent([record.url], cb, value)}
+                                children={
+                                    <div className={styles['selection-operation']}>
+                                        <span className={styles['operation-content']}>{t('删除')}</span>
+                                    </div>
+                                }
+                            />
+                        </span>
+                    )
+                    : null
+                }
+            </div>
+        );
+    };
+
+    render() {
+        const {
+            tableDataSource,
+            listLoading,
+            listTotalCount,
+            pageSize,
+            pageSizeOptions,
+            currentPage,
+            noteInfo,
+            exportLoading,
+            pageRoute,
+            listName,
+            defaultLabelSearchData,
+            selectedContents,
+            contentModalVisible,
+            importModalType,
+            importModalVisible,
+            authConfig,
+        } = this.state;
+        const {t, currentLang, isVideo} = this.props;
+        const { canCreate, canDelete, canExport, canBatchDelete, canBatchCreate} = authConfig;
+
+        return (
+            <div>
+                <GlobalFilterListener onChange={this.globalFilterChange} />
+                <div className={styles['bread-crumb']}>
+                    <Breadcrumb separator=">">
+                        <Breadcrumb.Item>
+                            <Link to={__ASSETS_PREFIX__ + pageRoute.path}>{pageRoute.name}</Link>
+                        </Breadcrumb.Item>
+                        <Breadcrumb.Item>{listName}</Breadcrumb.Item>
+                    </Breadcrumb>
+                </div>
+                <div className={styles['note-tip']}>
+                    <SMNoteTip noteInfo={noteInfo} />
+                </div>
+                <div className={styles['search-form']}>
+                    {
+                        canCreate
+                            ? (
+                                <div className={styles['form-item']}>
+                                    <Button type="primary" onClick={() => this.showMdContentModal('add', {})}><SMIcon
+                                        type="icon-add"
+                                    />{t(isVideo ? '添加敏感视频文件' : '添加敏感图片')}
+                                    </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
+                    }
+                    <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>
+                                )
+                                : null
+                        }
+
+                    </div>
+                </div>
+                <div className={styles['table-list']}>
+                    <SMImageTable
+                        dataSource={tableDataSource}
+                        idName="url"
+                        loading={listLoading}
+                        totalCount={listTotalCount}
+                        i18nText={tableText(t)}
+                        isUs={currentLang === 'en-US'}
+                        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}
+                        isHideImage={isVideo}
+                        antdPaginationProps={{
+                            showSizeChanger: true,
+                            showQuickJumper: true,
+                        }}
+                    />
+                    {tableDataSource.length ? <TotalCount count={listTotalCount} top={-45} /> : null}
+                </div>
+                {
+                    isVideo
+                        ? (
+                            <AddVideoModal
+                                visible={contentModalVisible}
+                                onConfirm={(values, callBack) => {
+                                    this.inspectData(values, callBack);
+                                }}
+                                onCancel={() => {
+                                    this.setState({
+                                        contentModalVisible: false,
+                                    });
+                                }}
+                            />
+                        )
+                        : (
+                            <AddMdModal
+                                visible={contentModalVisible}
+                                onConfirm={values => {
+                                    this.inspectData(values);
+                                }}
+                                onCancel={() => {
+                                    this.setState({
+                                        contentModalVisible: false,
+                                    });
+                                }}
+                            />
+                        )
+                }
+
+                <MdContentImportModal
+                    visible={importModalVisible}
+                    type={importModalType}
+                    isVideo={isVideo}
+                    productType="img"
+                    onConfirm={(fileList, type, value) => {
+                        this.uploadFile(fileList, type, value);
+                    }}
+                    onCancel={() => {
+                        this.setState({
+                            importModalVisible: false,
+                        });
+                    }}
+                />
+                <SensitiveWordSpin visible={this.state.sensitiveWordSpin} />
+            </div>
+        );
+    }
+}
+
+export default connect(({ user }) => ({
+    currentUser: user.currentUser,
+}))(withIntlComponents(ListContent));