admin2 1.0.0

package/src/pages/pageComponents/mdPage/listOpLog/CommonType/index.less

@@ -0,0 +1,11 @@
+.bread-crumb {
+    background-color: #ffffff;
+    padding: 24px 32px 0 32px;
+}
+.text-operation {
+    color: #13cbb9;
+    cursor: pointer;
+}
+.table-list{
+    margin-top: 20px;
+}

package/src/pages/pageComponents/mdPage/listSearch/CommonType/index.jsx

@@ -0,0 +1,696 @@
+/* eslint-disable react/no-children-prop */
+/**
+ * 天净文本，音频文件，音频流（片段），视频文件（音频片段），视频流（音频片段）历史记录
+ */
+
+import React, { Component } from 'react';
+import moment from 'moment';
+import { connect } from 'umi';
+import lodash from 'lodash';
+import { SMTable } from 'sm-antd';
+import { Tooltip, message, Switch, Space } from 'antd';
+
+import { getAuthFunction } from '@/utils/AuthorityManage';
+import {AUTH_FUNCTION, tableText} from '@/contants';
+import SMSearchForm from '@/components/SMSearchForm';
+import TotalCount from '@/components/TotalCount';
+import GlobalFilterListener from '@/components/GlobalFilterListener';
+import {formatSearchParams, getUrlParams} from '@/utils/utils';
+import SMIcon from '@/components/SMIcon';
+import SMNoteTip from '@/components/SMNoteTip';
+import SMRiskLevel from '@/components/SMRiskLevel';
+import SMImage from '@/components/SMImage';
+import { PAGE_SIZE } from '@/contants/pageSize';
+import withIntlComponents from '@/hoc/withIntlComponents';
+import {getIntlTableColums} from '@/utils/helpers';
+import {getRealProduct} from '@/pages/pageComponents/mdPage/constants.js';
+
+import {
+    VIDEOSTREAM_EN_TEXT,
+    VIDEOSTREAM_AR_TEXT,
+    VIDEOSTREAM_EN_IMG,
+    VIDEOSTREAM_AR_IMG,
+    ASR_OCR,
+    GLOBAL,
+    getVideoStreamState,
+    formatNewMdData,
+} from '../../list/CommonType/contants';
+import MdContentModal from '../../components/MdContentModal';
+import SMPopConfirm from '../../components/SMPopConfirm';
+
+import styles from './index.less';
+class ListSearch extends Component {
+    constructor(props) {
+        super(props);
+        const {t} = props;
+        this.state = {
+            tableDataSource: [],
+            tableColumns: [],
+            listTotalCount: 0, // 列表总数
+            currentPage: 1, // 当前列表页码
+            pageSize: 20, // 当前列表分页
+            pageSizeOptions: PAGE_SIZE,
+            queryParams: {}, // 列表搜索参数
+            noteInfo:
+                 '输入名单内容即可检索与该内容相关的名单信息，对于名单内容的操作会在5分钟内生效。',
+            contentModalVisible: false,
+            contentModalType: 'modify',
+            contentModalDefaultValue: {},
+            listId: '',
+            isVideoStreamEngOrAlb: getVideoStreamState(location.pathname),
+            checkedOnlyCustom: 0, // 默认不选中 仅查看公司自定义名单
+            authConfig: {
+                // 账号角色权限
+                canDelete: false,
+                canEdit: false,
+            },
+            currentGlobalFilter: {
+                organization: '',
+                appId: '',
+                clusterId: '',
+            },
+            defaultLabelSearchData: {
+                type: 'labelSearch',
+                name: 'labelSearch',
+                data: {
+                    placeholder: t('请输入名单内容'),
+                    addonBefore: false,
+                    optionData: [
+                        {
+                            value: 'content',
+                            name: t('名单内容'),
+                        },
+                    ],
+                },
+            },
+            defaultSearchTypeData: {
+                type: 'switch',
+                name: 'searchType',
+                data: {
+                    name: t('仅查看公司自定义名单'),
+                    defaultChecked: false,
+                },
+            },
+        };
+    }
+
+    UNSAFE_componentWillMount() {
+        const { stateConfig } = this.props;
+        if (stateConfig) {
+            this.setState(stateConfig);
+        }
+    }
+
+    // 根据url参数设置查询条件
+    setDefaultSearchParams = () => {
+        const {queryParams, defaultLabelSearchData, searchType, defaultSearchTypeData} = this.state;
+        const newDefaultSearchTypeData = lodash.cloneDeep(defaultSearchTypeData);
+        const urlParams = getUrlParams(location.href);
+        const checkedIsOnlyCustom = urlParams.isOnlyCustomList && Number(urlParams.isOnlyCustomList) === 1;
+        if (urlParams.searchKey) {
+            queryParams.content = decodeURIComponent(urlParams.searchContent);
+            defaultLabelSearchData.data.defaultContent = decodeURIComponent(urlParams.searchContent);
+        }
+        if (checkedIsOnlyCustom) {
+            newDefaultSearchTypeData.data.defaultChecked = true;
+            queryParams.type = searchType;
+        }
+        this.setState({
+            queryParams,
+            ...(checkedIsOnlyCustom
+                ? {
+                    defaultSearchTypeData: newDefaultSearchTypeData,
+                    checkedOnlyCustom: 1,
+                } : {}),
+        }, () => this.doSearch());
+    };
+
+    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;
+    };
+    /**
+      * 列表文本类型 展示
+      * @param {*} text
+      * @param {*} record
+      * @param {*} index
+      */
+    textRender = text => {
+        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
+      */
+    imgRender = text => {
+        return <SMImage width={'80%'} height={100} url={text} />;
+    };
+
+    // 处置建议 展示
+    riskLevelRender = text => {
+        const riskLevelStr = text.split('|')[0];
+        const riskLevel = text.split('|')[1];
+        return (
+            <SMRiskLevel riskLevel={riskLevel} riskLevelStr={riskLevelStr} />
+        );
+    };
+
+    /**
+      * 名单启用禁用开关
+      * @param {*} text
+      * @param {*} record
+      * @param {*} index
+      */
+    switchRender = text => {
+        const { checked = true } = text;
+        const {t} = this.props;
+        return (
+            <Switch
+                size="small"
+                checked={checked}
+                defaultChecked={checked}
+                disabled
+                checkedChildren={t('启用')}
+                unCheckedChildren={t('禁用')}
+            />
+        );
+    };
+
+    /**
+      * 操作类型 渲染（置顶，编辑，删除）
+      * @param {*} text
+      * @param {*} record
+      * @param {*} index
+      */
+    operationRender = (text, record) => {
+        const { hasEdit = true, hasDelete = true } = text;
+        const { listContent, remark = '', listId } = record;
+        const { authConfig } = this.state;
+        const { canDelete, canEdit } = authConfig;
+        return (
+            <Space size={16}>
+                {hasEdit && canEdit ? (
+                    <SMIcon
+                        type="icon-xiugai"
+                        onClick={() => {
+                            this.showMdContentModal(
+                                'modify',
+                                { contents: listContent, remark },
+                                listId
+                            );
+                        }}
+                    />
+                ) : null}
+                {hasDelete && canDelete ? (
+                    <SMPopConfirm
+                        title="请确认是否删除名单内容"
+                        onConfirm={(value, cb) =>
+                            this.deleteMdContent([listContent], cb, listId)
+                        }
+                        children={<SMIcon type="icon-shanchuxuanzhong" />}
+                    />
+                ) : null}
+                {!(hasEdit && canEdit) && !(hasDelete && canDelete) ? (
+                    <span>-</span>
+                ) : null}
+            </Space>
+        );
+    };
+
+    /**
+      * 展示新增或修改名单内容弹窗
+      * @param {*} type 弹窗类型 新增 || 修改
+      * @param {*} defaultValue 默认值
+      */
+    showMdContentModal(type, defaultValue, listId) {
+        this.setState({
+            contentModalVisible: true,
+            contentModalType: type,
+            contentModalDefaultValue: defaultValue,
+            listId: listId,
+        });
+    }
+
+    /**
+      * 删除名单内容
+      * @param {Array} contents 名单内容数组
+      * @param {Function} cb 回调函数
+      * @param {String} listId 名单id
+      */
+    async deleteMdContent(contents, cb, listId) {
+        const { dispatch, route } = this.props;
+        const { code, Message } = await dispatch({
+            type: 'mingdan/deleteMdContent',
+            payload: {
+                listId: listId,
+                organization: this.state.currentGlobalFilter.organization,
+                product: this.getProduct(),
+                contents: contents,
+                ...this.getCommonParams(), // 删除名单内容时多加这3个参数
+            },
+        });
+        if (code === 1100) {
+            message.success('删除成功，预计5分钟内生效');
+            cb && cb();
+            this.doSearch();
+        } else {
+            cb && cb();
+            message.error(Message);
+        }
+    }
+
+    // 获取删除修改操作需要的参数
+    getCommonParams = () => {
+        const {route} = this.props;
+        const {subType} = this.state;
+        const serviceId = route.routeData.serviceId;
+        return {
+            subType,
+            realServiceId: serviceId,
+            realProduct: getRealProduct(subType, serviceId),
+        };
+    };
+
+    /**
+      * 更新名单内容
+      * @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(), // 更新名单内容时 多加3个参数
+            },
+        });
+        if (code === 1100) {
+            message.success('修改成功，预计5分钟内生效');
+            this.setState(
+                {
+                    contentModalVisible: false,
+                },
+                () => {
+                    this.doSearch();
+                }
+            );
+        } else {
+            message.error(Message || '操作失败！');
+        }
+    }
+
+    globalFilterChange = obj => {
+        const {
+            currentGlobalFilter,
+        } = obj;
+        this.setState(
+            {
+                currentGlobalFilter,
+                listLoading: true,
+            },
+            async () => {
+                this.updateOperationAuth();
+                this.setState(
+                    {
+                        currentPage: 1,
+                    },
+                    () => {
+                        this.setDefaultSearchParams();
+                    }
+                );
+            }
+        );
+    };
+
+    // 请求搜索
+    doSearch() {
+        this.getSearchList();
+    }
+
+    //  获取名单列表
+    async getSearchList() {
+        const { dispatch } = this.props;
+        const newParams = this.getSearchParams();
+        if (!newParams.content) {
+            this.setState({
+                listLoading: false,
+            });
+            return;
+        }
+        const { listData, totalCount } = await dispatch({
+            type: 'mingdan/getMdContentList',
+            payload: newParams,
+        });
+        this.setState(
+            {
+                listData,
+                listTotalCount: totalCount,
+            },
+            () => {
+                if (listData.length) {
+                    let data = this.formatData(listData);
+                    const dataSource = data;
+                    this.setState({
+                        tableDataSource: dataSource,
+                        listLoading: false,
+                    });
+                } else {
+                    this.setState({
+                        tableDataSource: [],
+                        listLoading: false,
+                    });
+                }
+            }
+        );
+    }
+
+    // 获取查询接口参数
+    getSearchParams = () => {
+        const { route } = this.props;
+        const {
+            currentGlobalFilter,
+            queryParams,
+            currentPage,
+            pageSize,
+            subType = '',
+        } = this.state;
+        const { organization, appId } = currentGlobalFilter;
+        const serviceId = this.getProduct();
+        let searchParams = {
+            organization: organization,
+            appId: appId,
+            product: serviceId,
+            count: pageSize,
+            offset: (currentPage - 1) * pageSize,
+            ...queryParams,
+        };
+        if (subType) {
+            searchParams.subType = subType;
+        }
+
+        // 处理一下searchParams，如果为'' || 'all', 则删除该项
+        let newSearchParams = formatSearchParams(searchParams);
+        return newSearchParams;
+    };
+
+    // 更新操作权限
+    updateOperationAuth = () => {
+        const canDelete = getAuthFunction(AUTH_FUNCTION.DELETE);
+        const canEdit = getAuthFunction(AUTH_FUNCTION.UPDATE);
+        this.setState({
+            authConfig: {
+                // 账号角色权限
+                canDelete,
+                canEdit,
+            },
+        });
+    };
+
+    // 获取搜索菜单
+    getFormData() {
+        const {
+            defaultLabelSearchData,
+            defaultSearchTypeData,
+            isShowSearchType,
+        } = this.state;
+        let formData = [defaultLabelSearchData];
+        if (isShowSearchType) {
+            formData.push(defaultSearchTypeData);
+        }
+        return formData;
+    }
+
+    // 获取列表表单项
+    getTableColumns = () => {
+        const { isImg = false } = this.state;
+        const isTw = location.pathname.includes('tianwang');
+        return [
+            {
+                title: '名单名称',
+                key: 'listName',
+                dataIndex: 'listName',
+                width: '12%',
+                ellipsis: true,
+                render: this.textRender,
+            },
+            {
+                title: '名单内容',
+                key: 'listContent',
+                dataIndex: 'listContent',
+                width: '12%',
+                ellipsis: true,
+                render: isImg ? this.imgRender : this.textRender,
+            },
+            {
+                title: '匹配字段',
+                key: 'checkItem',
+                dataIndex: 'checkItem',
+                width: '12%',
+                ellipsis: true,
+                render: this.textRender,
+            },
+            {
+                title: '处置建议',
+                key: 'actionSuggest',
+                dataIndex: 'actionSuggest',
+                width: '12%',
+                ellipsis: true,
+                render: this.riskLevelRender,
+            },
+            {
+                title: '生效应用',
+                key: 'acctionApp',
+                dataIndex: 'acctionApp',
+                width: '12%',
+                ellipsis: true,
+                render: this.textRender,
+            },
+            {
+                title: isTw ? '生效事件' : '渠道',
+                key: 'channelEvent',
+                dataIndex: 'channelEvent',
+                width: '12%',
+                ellipsis: true,
+                render: this.textRender,
+            },
+            {
+                title: '有效期',
+                key: 'time',
+                dataIndex: 'time',
+                type: 'text',
+                width: '12%',
+                ellipsis: true,
+                render: this.textRender,
+            },
+            {
+                title: '状态',
+                key: 'status',
+                dataIndex: 'status',
+                width: 90,
+                ellipsis: true,
+                render: this.switchRender,
+            },
+            {
+                title: '操作',
+                key: 'operation',
+                dataIndex: 'operation',
+                width: '12%',
+                ellipsis: true,
+                render: this.operationRender,
+            },
+        ];
+    };
+
+    formatData = data => {
+        let dataSource = [];
+
+        dataSource = data.map(item => {
+            return {
+                key: `${item.listId}${item.content}`,
+                listId: item.listId,
+                listName: item.name || '-',
+                listContent: item.content,
+                checkItem: item.checkItemsCN.join('|') || '-',
+                actionSuggest: `${item.actionCN}|${item.config.action}`,
+                acctionApp: item.appCN,
+                channelEvent: item.channelEventCN,
+                list: item,
+                time:
+                     item.config.startTime && item.config.endTime
+                         ? `${moment(moment.unix(item.config.startTime)).format('YYYY-MM-DD HH:mm:ss')} 至 ${moment(
+                             moment.unix(item.config.endTime)
+                         ).format('YYYY-MM-DD HH:mm:ss')}`
+                         : '永久',
+                status: {
+                    checked: item.status === 1,
+                },
+                operation: {
+                    hasEdit: item.couldOperate === 1 && !this.state.isImg,
+                    hasDelete: item.couldOperate === 1,
+                },
+            };
+        });
+
+        return formatNewMdData(dataSource);
+    };
+
+    /**
+      * 列表排序更改，切换页码/翻页
+      * @param {*} pagination
+      * @param {*} filters
+      * @param {*} sorter
+      */
+    listOnSearch = pagination => {
+        const { current, pageSize } = pagination;
+        const { queryParams } = this.state;
+        let newQueryParams = lodash.cloneDeep(queryParams);
+        this.setState(
+            {
+                currentPage: current,
+                pageSize: pageSize,
+                queryParams: newQueryParams,
+            },
+            () => {
+                this.doSearch();
+            }
+        );
+    };
+
+    /**
+      * 搜索筛选项更改
+      * @param {*} name   更改筛选项类型名称
+      * @param {*} value  更改后的值
+      */
+    changeQueryParams(name, value) {
+        const { queryParams, searchType } = this.state;
+        let newQueryParams = lodash.cloneDeep(queryParams);
+        switch (name) {
+            case 'labelSearch':
+                const { searchId, searchText } = value;
+                newQueryParams[searchId] = searchText;
+                break;
+            case 'searchType':
+                if (value) {
+                    newQueryParams.type = searchType;
+                } else {
+                    delete newQueryParams.type;
+                }
+                break;
+            default:
+                newQueryParams[name] = value;
+        }
+        this.setState(
+            {
+                queryParams: newQueryParams,
+                listLoading: true,
+                currentPage: 1,
+            },
+            () => {
+                this.doSearch();
+            }
+        );
+    }
+
+    // 渲染主页面
+    render() {
+        const {
+            tableDataSource,
+            listLoading,
+            listTotalCount,
+            pageSize,
+            pageSizeOptions,
+            currentPage,
+            noteInfo,
+            contentModalDefaultValue,
+            contentModalType,
+            contentModalVisible,
+        } = this.state;
+        const {t} = this.props;
+        const formData = this.getFormData();
+        const tableColumns = getIntlTableColums(this.getTableColumns(), t);
+        return (
+            <div>
+                <GlobalFilterListener onChange={this.globalFilterChange} />
+                <div className={styles['note-tip']}>
+                    <SMNoteTip noteInfo={noteInfo} />
+                </div>
+                <SMSearchForm
+                    formData={formData}
+                    formKey={'searchForm' + this.state.checkedOnlyCustom}
+                    onChange={(name, value) => {
+                        this.changeQueryParams(name, value);
+                    }}
+                />
+                <div className={styles['table-list']}>
+                    <SMTable
+                        columns={tableColumns}
+                        dataSource={tableDataSource}
+                        loading={listLoading}
+                        totalCount={listTotalCount}
+                        showTotal={() => `${t('共')}${listTotalCount}${t('条')}`}
+                        i18nText={tableText(t)}
+                        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}
+                    isDefaultBlack={this.state.isBlack}
+                    initialValues={contentModalDefaultValue}
+                    onConfirm={(values, type, oldValues) => {
+                        this.updateMdContent(values, oldValues);
+                    }}
+                    onCancel={() => {
+                        this.setState({
+                            contentModalVisible: false,
+                        });
+                    }}
+                />
+            </div>
+        );
+    }
+}
+
+export default connect(({ user }) => ({
+    currentUser: user.currentUser,
+}))(withIntlComponents(ListSearch));