admin2 1.0.0

package/src/pages/pageComponents/StrategyPage/components/RuleCollapse/index.js

@@ -0,0 +1,1554 @@
+/* eslint-disable guard-for-in */
+/* eslint-disable react/jsx-closing-tag-location */
+import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
+import {Collapse, Popconfirm, message, Button, Empty, Spin, Tooltip} from 'antd';
+import _, { set } from 'lodash';
+import { connect } from 'umi';
+import SMIcon from '@/components/SMIcon';
+import { SMTable, SMModal, SMForm } from 'sm-antd';
+
+import {useColumns, useLanguage} from '@/hooks';
+import { formatVariableList } from '@/utils/utils';
+import {MODEL_TYPE, AUTH_FUNCTION, SM_ACCOUNT, tableText, REQUEST_CODE} from '@/contants';
+import AuthorityManage, { getAuthFunction } from '@/utils/AuthorityManage';
+import {formatUs} from '@/utils/helpers';
+import {
+    preOnline,
+    updateStatus,
+    updateRiskLevel,
+    batchOpen,
+    deleteStrategy,
+    batchUpdateStatus,
+    orgUpdate,
+    orgRecover,
+} from '@/services/strategy';
+
+import {
+    getTableColumns,
+    ruleColumnList,
+    grayFromData,
+    remindTableCoumn,
+    remindTableOrg,
+    enabledForm,
+    defaultVariable,
+    OPERATOR_EXTRA,
+    groupClomns,
+    operaeType,
+    ALL,
+    TEXTAREA_FORM,
+} from '../../contants';
+import BatchUpdateModal from '../BatchUpdateModal';
+import AddListModal from '../AddRuleMdoal';
+import RuleMdoal from '../RuleModal';
+
+import style from './index.less';
+import RuleModalCustomer from '../RuleModalCustomer';
+
+const { Panel } = Collapse;
+const { ModalType } = SMModal;
+const enabledParam = 1;
+
+const STRING = 'string'; // 字符串变量传参特殊处理;
+const VAL = 'val'; // 变量类型；
+
+const RuleCollapse = props => {
+    const {
+        collapseChange,
+        eventId,
+        dispatch,
+        currentUser,
+        method,
+        currentGlobalFilter,
+        ruleLoading,
+        listData,
+        isGlobal,
+        activeKey,
+        setActiveKey,
+        setSelectedRowKeys,
+        selectedRowKeys,
+        productId,
+        route,
+        group,
+        isCurrentCustomer,
+        isOpenStatus,
+        degradeMode,
+    } = props;
+    const {dataSource, risklevelList, ruleList = {}, productList, riskMapList, riskTypeList, groupList} = listData;
+    const {jumpRuleLog} = method;
+    const {contents, totalCount: ruleCount} = ruleList;
+    const isSM = currentUser.organization === SM_ACCOUNT || isGlobal;
+    const groupData = groupList.filter(item => item.group_code === group);
+
+    const formRef = useRef({});
+    const grayRef = useRef();
+
+    const {t} = useLanguage();
+
+    const [data, setData] = useState([]);
+    const [visible, setvisible] = useState(false);
+    const [activityEvent, setActivityEvent] = useState(eventId);
+    const [ruleVisible, setRuleVisible] =  useState(false);
+    const [record, setRecord] = useState({});
+    const [variableData, setVariableData] = useState([]);
+    const [conditions, setConditions] = useState([]);
+    const [ruleType, setRuleType] = useState(operaeType.ADD);
+    const [ruleModalVisible, setRuleModalVisible] = useState(false);
+    const [customerModalVisible, setCustomerModalVisible] = useState(false);
+
+    const [activityAppId, setActivityAppId] = useState([]);
+    const [modalLoading, setModalLoading] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const authList = useMemo(() => ({
+        createRule: getAuthFunction(AUTH_FUNCTION.CREATE_RULE),
+        deleteRule: getAuthFunction(AUTH_FUNCTION.DELETE_RULE),
+        globalDeleteRule: getAuthFunction(AUTH_FUNCTION.GLOBAL_DELETE_RULE),
+        updateRule: getAuthFunction(AUTH_FUNCTION.UPDATE_RULE),
+        copyRule: getAuthFunction(AUTH_FUNCTION.COPY_RULE),
+        exportRule: getAuthFunction(AUTH_FUNCTION.EXPORT_RULE),
+        createRuleSet: getAuthFunction(AUTH_FUNCTION.CREATE_RULE_SET),
+        updateRuleSet: getAuthFunction(AUTH_FUNCTION.UPDATE_RULE_SET),
+        deleteRuleSet: getAuthFunction(AUTH_FUNCTION.DELETE_RULE_SET),
+        enableOrDisableRule: getAuthFunction(AUTH_FUNCTION.ENABLE_OR_DISABLE_RULE),
+        ruleDetail: getAuthFunction(AUTH_FUNCTION.RULE_DETAIL),
+        updateRatio: getAuthFunction(AUTH_FUNCTION.UPDATE_RATIO),
+        openOrRecoverRule: getAuthFunction(AUTH_FUNCTION.OPEN_OR_RECOVER_RULE),
+        twNewStrategyLog: AuthorityManage.checkSaasRouteAction('twNewStrategyLog'),
+        twGlobalStrategyCenter: AuthorityManage.checkSaasRouteAction('twGlobalStrategyCenter'),
+        formApp: getAuthFunction(AUTH_FUNCTION.FORM_APP),
+        batchUpdateHandle: getAuthFunction(AUTH_FUNCTION.BATCH_UPDATE_HANDLE),
+        batchDisable: getAuthFunction(AUTH_FUNCTION.BATCH_DISABLE),
+    }), []);
+
+    // 获取事件列表
+    const getEventList = useCallback(() => {
+        let list = [];
+        productList.map(item => {
+            list = list.concat(item.events || []);
+        });
+
+        return list;
+    }, [productList]);
+
+    // 删除策略
+    const deleteRuleSet = useCallback(async (e, id) => {
+        e.stopPropagation();
+        const result =  await dispatch({
+            type: 'strategy/deleteRuleSet',
+            payload: {id},
+        });
+        if (result) {
+            method.getRuleSetList && method.getRuleSetList();
+        }
+    }, [dispatch, method]);
+
+    // 灰度提交
+    const graySubmit = useCallback(async (val, record) => {
+        let submitValue = _.cloneDeep(record);
+        submitValue.ruleId = record.ruleId;
+        submitValue.meta.ruleId = record.ruleId;
+        submitValue.appId = currentGlobalFilter.appId;
+        submitValue.organization = currentGlobalFilter.organization;
+        const operands =  _.cloneDeep(submitValue.meta._condition.operands || []);
+        let isAdd = true;
+        let number = 0;
+        _.keys(submitValue.meta).forEach(item => {
+
+            if (item.includes('left')) {
+                number++;
+            }
+        });
+        operands.map(item => {
+            const sonOperands = item.operands;
+            const profile = sonOperands[0].operands[0];
+            if (profile === 'profile.randomid') {
+                sonOperands[1].operands[0] = val.ratio;
+                isAdd = false;
+            }
+        });
+        if (isAdd) {
+            const left = {operands: ['profile.randomid'], operator: 'var', type: 'int'};
+            const right = {operands: [val.ratio], operator: 'val', type: 'int'};
+            operands.push({operands: [left, right], operator: '<=', type: 'boolean'});
+            submitValue.meta[`left${number}_0`] = 'profile.randomid';
+            submitValue.meta[`operator${number}_0`] = '<=';
+            submitValue.meta[`right${number}_0`] = val.ratio;
+            submitValue.meta[`varType${number}_0`] = 'int';
+            submitValue.meta[`inputType${number}_0`] = 'val';
+            submitValue.meta._condition.operands = operands;
+        }
+        else {
+            _.keys(submitValue.meta).forEach(item => {
+                if (submitValue.meta[item] === 'profile.randomid') {
+                    const right = item.replace('left', 'right');
+                    submitValue.meta[right] = val.ratio;
+                }
+            });
+            try {
+                submitValue.meta._condition.operands.forEach((item, index) => {
+                    if (item.operands[0].operands.includes('profile.randomid')) {
+                        item.operands[1].operands = [val.ratio];
+                        item.operator = '<=';
+                        submitValue.meta[`operator${index}_0`] = '<=';
+                    }
+                });
+            } catch (error) {
+            }
+        }
+        const params = {
+            organization: currentGlobalFilter.organization,
+            eventIds: val.eventId || [eventId],
+            appIds: val.appId || [currentGlobalFilter.appId],
+            auditInfo: isCurrentCustomer ? undefined : {applyReason: val.remark, attachment: []},
+            user: currentUser.account,
+            oldRule: record,
+            newRule: submitValue,
+        };
+        const result = await preOnline(params);
+        if (result.code === REQUEST_CODE.SUCCESS) {
+            message.success(result.message);
+            global.modal.pop();
+            global.modal.pop();
+            method.getRuleList && method.getRuleList(record.ruleSetId);
+        }
+    }, [currentUser.account, currentGlobalFilter, eventId, isCurrentCustomer, method]);
+    // 开放、回收、禁用
+    const batchEditRule = useCallback(async (type, val, record) => {
+        let result = {};
+        const rulesObj = {...record};
+        rulesObj.organization = currentGlobalFilter.organization;
+        rulesObj.appId = currentGlobalFilter.appId;
+        rulesObj.eventId = eventId;
+        let params = {
+            appIds: val.appId ? (_.isArray(val.appId) ? val.appId : [val.appId]) : [currentGlobalFilter.appId],
+            eventIds: val.eventId ? val.eventId : [eventId],
+            organization: currentGlobalFilter.organization,
+            auditInfo: {applyReason: val.remark || '-', attachment: []},
+            oldRule: record,
+            newRule: rulesObj,
+        };
+        switch (type) {
+            case 'enabled':
+                params.newRule.enabled = val.enabled ? '1' : '0';
+                if (isCurrentCustomer) {
+                    params.auditInfo = undefined;
+                }
+                result = await updateStatus(params);
+                break;
+            case 'isOpen':
+                params.newRule.isOpen = val.isOpen;
+                result = await batchOpen(params);
+                break;
+        }
+        if (result.code === REQUEST_CODE.SUCCESS) {
+            message.success(result.message);
+            global.modal.pop();
+            global.modal.pop();
+            if (isCurrentCustomer) {
+                method.getRuleList && method.getRuleList(record.ruleSetId);
+            }
+        }
+    }, [
+        eventId,
+        currentGlobalFilter,
+        isCurrentCustomer,
+        method,
+    ]);
+
+    const customerStatusChange = useCallback(async (status, record) => {
+        const rulesObj = {...record};
+        rulesObj.organization = currentGlobalFilter.organization;
+        rulesObj.appId = currentGlobalFilter.appId;
+        rulesObj.eventId = eventId;
+        rulesObj.enabled = status;
+        const params = {
+            appIds: [currentGlobalFilter.appId],
+            eventIds: [eventId],
+            organization: currentGlobalFilter.organization,
+            rule: rulesObj,
+            environment: 'online',
+            action: status ? 'open' : 'close',
+        };
+        const result = await orgUpdate(params);
+        if (result.code === 1100) {
+            method.getRuleList && method.getRuleList(record.ruleSetId);
+            message.success(result.message);
+        }
+    }, [
+        eventId,
+        currentGlobalFilter,
+        method,
+    ]);
+
+    const customerRecoverChange = useCallback(async (status, record) => {
+        // rulesObj.organization = currentGlobalFilter.organization;
+        // rulesObj.appId = currentGlobalFilter.appId;
+        // rulesObj.eventId = eventId;
+        const params = {
+            appId: currentGlobalFilter.appId,
+            eventId: eventId,
+            organization: currentGlobalFilter.organization,
+            ruleId: record.ruleId,
+            group_code: group,
+        };
+        const result = await orgRecover(params);
+        if (result.code === 1100) {
+            message.success(result.message);
+            method.getRuleList && method.getRuleList(record.ruleSetId);
+        }
+    }, [
+        eventId,
+        group,
+        currentGlobalFilter,
+        method,
+    ]);
+
+    // 格式化变量参数
+    const getMeta = useCallback((item, list) => {
+        const meta = item.meta;
+        let number = 0;
+        _.keys(meta).forEach(item => {
+            if (item.includes('left')) {
+                number++;
+            }
+        });
+        const lists = list || variableData;
+        const data = defaultVariable(lists);
+        const condiatesData = [];
+        for (let i = 0; i < number; i++) {
+            const item = lists.filter(item => {
+
+                return item.id === meta[`left${i}_0`] || meta[`left${i}`];
+            });
+
+            const newData = _.cloneDeep(data);
+            const type =  item[0] && item[0].type;
+            newData.left.definition.default = meta[`left${i}_0`] || meta[`left${i}`];
+            newData.left.definition.var = `left${i}_0`;
+            newData.left.definition.type = type;
+            newData.operator.definition.default = meta[`operator${i}_0`] || meta[`operator${i}`];
+            newData.operator.definition.var = `operator${i}_0`;
+            newData.operator.definition.condiates = OPERATOR_EXTRA[type];
+            newData.rightVal.definition.default = meta[`right${i}_0`] || meta[`right${i}`];
+            newData.rightVal.definition.var = `right${i}_0`;
+            if ((meta[`inputType${i}_0`] || meta[`inputType${i}`]) === 'val') {
+                newData.rightVal.definition.default = meta[`right${i}_0`] || meta[`right${i}`];
+                newData.rightVal.definition.var = `right${i}_0`;
+                condiatesData.push([newData.left, newData.operator, newData.rightVal]);
+            }
+            else {
+                newData.rightVar.definition.default = meta[`right${i}_0`] || meta[`right${i}`];
+                newData.rightVar.definition.var = `right${i}_0`;
+                newData.rightVar.definition.condiates = variableData;
+                condiatesData.push([newData.left, newData.operator, newData.rightVar]);
+            }
+        }
+        setConditions(condiatesData);
+    }, [variableData]);
+    // 修改
+    const updateRule = useCallback(async (val, record) => {
+        const environment = (isSM || isCurrentCustomer) ? 'experiment' : 'online';
+        if (val.enabled) { // 启用
+            const ruleObj = {...record};
+            if (isSM || isCurrentCustomer) {
+                const ruleId =  `E${record.ruleId.substring(1, record.ruleId.length)}`;
+                ruleObj.ruleId = ruleId;
+                ruleObj.meta.ruleId = ruleId;
+            }
+            ruleObj.enabled = val.enabled ? 1 : 0;
+            ruleObj.appId = currentGlobalFilter.appId;
+            ruleObj.organization = currentGlobalFilter.organization;
+            ruleObj.eventId = eventId;
+            delete ruleObj.id;
+            const params = {
+                appIds: val.appId ? (_.isArray(val.appId) ? val.appId : [val.appId]) : [currentGlobalFilter.appId],
+                environment: environment,
+                eventIds: val.eventId || [eventId],
+                organization: currentGlobalFilter.organization,
+                rule: ruleObj,
+                marker: val.marker,
+                sourceRuleId: record.ruleId,
+            };
+            if (isSM || isCurrentCustomer) {
+                params.sourceRuleId = record.ruleId;
+            };
+            const result =  await dispatch({
+                type: 'strategy/updateRule',
+                payload: params,
+            });
+            if (result) {
+                method.getRuleList && method.getRuleList(record.ruleSetId);
+                global.modal.pop();
+                global.modal.pop();
+                message.success('启用规则成功，请前往策略实验室查看');
+            }
+        }
+        else {// 开放回收禁用
+            batchEditRule('enabled', val, record);
+        }
+    }, [
+        dispatch,
+        method,
+        currentGlobalFilter,
+        isSM,
+        isCurrentCustomer,
+        eventId,
+        batchEditRule,
+    ]);
+    // 恢复策略集
+    const deleteRule = useCallback(async (val, record) => {
+        const result = await deleteStrategy(
+            {
+                rule: record,
+                auditInfo: {applyReason: val.remark, attachment: []},
+                appIds: [currentGlobalFilter.appId],
+                eventIds: [eventId],
+                organization: currentGlobalFilter.organization,
+                environment: 'online',
+            });
+        if (result.code === REQUEST_CODE.SUCCESS) {
+            global.modal.pop();
+            message.success(result.message);
+        }
+    }, [currentGlobalFilter, eventId]);
+
+    // 策略比对提醒
+    const ruleRemindModal = useCallback(async (val, record, type) => {
+        const isAppIdMultiple = val.appId && val.appId.length > 1; // 应用多选
+        const isEvendIdMultiple = val.eventId && val.eventId.length > 1; // 事件多选
+        if (currentGlobalFilter.organization !== SM_ACCOUNT && !isAppIdMultiple && !isEvendIdMultiple) {
+            if (type === 'enabled') {
+                updateRule(val, record);
+            }
+            else {
+                graySubmit(val, record);
+            }
+        }
+        else {
+            const params = {
+                'organization': currentGlobalFilter.organization,
+                'eventId': eventId,
+                'appId': currentGlobalFilter.appId,
+                'ruleId': record.ruleId,
+                'eventIds': val.eventId,
+                'appIds': val.appId || [currentGlobalFilter.appId],
+                environment: 'online',
+            };
+            const result = await dispatch({
+                type: 'strategy/ruleCheckDiffRule',
+                payload: params,
+            });
+            if (result) {
+                global.modal.show(ModalType.MODAL_ALERT, {
+                    width: 670,
+                    modalTitle: t('策略对比提醒'),
+                    renderChildren: () => {
+                        return (
+                            <div className={style.remind}>
+                                <div className={style['remind-title']}><span>{t('策略不一致列表')}</span></div>
+                                <SMTable
+                                    dataSource={result.diffRule || []}
+                                    columns={remindTableCoumn()}
+                                    isHidePagination
+                                />
+                                {currentGlobalFilter.organization === SM_ACCOUNT && <>
+                                    <div
+                                        className={`${style['remind-title']} ${style['remind-bottom']}`}
+                                    >
+                                        <span>{t('特殊公司列表')}</span>
+                                    </div>
+                                    <SMTable
+                                        dataSource={result.cusConfig || []}
+                                        columns={remindTableOrg()}
+                                        isHidePagination
+                                    />
+                                </>
+                                }
+
+                                <div className={style.footer}>
+                                    <Button type="dashed" onClick={() => global.modal.pop()}>{t('重新调整')}</Button>
+                                    <Button
+                                        onClick={() => {
+                                            if (type === 'enabled') {
+                                                updateRule(val, record);
+                                            }
+                                            else {
+                                                graySubmit(val, record);
+                                            }
+                                        }}
+                                    >
+                                        {t('确认操作')}
+                                    </Button>
+                                </div>
+                            </div>
+                        );
+                    },
+                });
+            }
+        }
+
+    }, [graySubmit, updateRule, eventId, currentGlobalFilter, dispatch, t]);
+    const variableList = useCallback(async eventList => {
+        setLoading(true);
+        const defaultEventId = isGlobal
+            ? (eventList.length === 1 ? activityEvent[0] : 'global')
+            : eventId;
+
+        const result = await dispatch({
+            type: 'strategy/variableList',
+            payload: {
+                appId: currentGlobalFilter.appId,
+                enabled: enabledParam,
+                eventId: defaultEventId,
+                organization: currentGlobalFilter.organization,
+            },
+        });
+        setLoading(false);
+        if (result && result.length) {
+            const list = formatVariableList(result);
+            const data = defaultVariable(list, t);
+            if (ruleType === operaeType.ADD) {
+                setConditions([[data.left, data.operator, data.rightVal]]);
+            }
+            setVariableData(list);
+
+            return list;
+        }
+        return [];
+    }, [currentGlobalFilter, activityEvent, dispatch, eventId, isGlobal, ruleType]);
+    // 策略分组提交
+    const submitGroup = useCallback(async (val, data) => {
+        const list = groupList.filter(item => item.group_code === val.group);
+        // 此处的data是record，将当前选中的record 的 id删掉导致了分组提交后，页面白屏的bug  不能修改原数据
+        const params = {
+            organization: data.organization,
+            appIds: [data.appId],
+            eventIds: [data.eventId],
+            environment: 'experiment',
+            ruleId: val.ruleId,
+            ruleName: data.ruleName,
+            rule: {
+                ...data,
+                group_code: val.group,
+                appId: data.appId,
+                ruleId: val.ruleId,
+                ruleSetId: val.ruleSet,
+                id: undefined, // 此处是将之前的删掉data.id给干掉
+                meta: {
+                    ...data.meta,
+                    ruleId: val.ruleId,
+                    group_value: _.get(list, '0.group_value', ''),
+                    group_variable: _.get(list, '0.group_variable', ''),
+                },
+            },
+        };
+        const result = await dispatch({
+            type: MODEL_TYPE.STRATEGY_LIST.ADD_RULE,
+            payload: params,
+        });
+        if (result) {
+            global.modal.pop();
+        }
+    }, [dispatch, groupList]);
+    const eventChange = useCallback(val => {
+        if (val.includes(ALL)) {
+            formRef.current.setFieldsValue({
+                eventId: getEventList().map(item => item.eventId),
+            });
+        }
+    }, [getEventList]);
+    // 上线下线
+    const handleChange = useCallback(async (val, record, key) => {
+        const show = currentGlobalFilter.organization !== SM_ACCOUNT;
+        const showRemark = !isCurrentCustomer;
+        switch (key) {
+            case 'enabled':
+                if (val) {
+                    updateRule({enabled: val}, record);
+                }
+                else {
+                    global.modal.show(ModalType.MODAL_ALERT, {
+                        width: 576,
+                        modalTitle: t(`批量${val ? '启用' : '禁用'}范围`),
+                        renderChildren: () => {
+                            return (
+                                <SMForm
+                                    formData={
+                                        formatUs(
+                                            enabledForm(getEventList(), show, eventChange, showRemark),
+                                            ['label', 'placeholder'],
+                                            t)}
+                                    initialValues={{eventId: [eventId], appId: [currentGlobalFilter.appId]}}
+                                    setForm={ref => formRef.current = ref}
+                                    // eslint-disable-next-line max-len
+                                    onSubmit={submitValue => ruleRemindModal({...submitValue, [key]: val}, record, 'enabled')}
+                                    isShowSubmitBtn
+                                    submitText={t('提交')}
+                                    cancelText={t('取消')}
+                                    onCancel={() => global.modal.pop()}
+                                />
+                            );
+                        },
+                    });
+                }
+                break;
+            case 'isOpen':
+                batchEditRule('isOpen', {isOpen: val}, record);
+                break;
+            case 'status':
+                customerStatusChange(val, record);
+                break;
+            case 'recover':
+                customerRecoverChange(val, record);
+                break;
+            case 'view':
+                const list = await variableList(record.eventId);
+                getMeta(record, list);
+                setRuleType('view');
+                setRecord(record);
+                setRuleModalVisible(true);
+                break;
+            case 'group':
+                global.modal.show(ModalType.MODAL_ALERT, {
+                    width: 576,
+                    modalTitle: t('复制分组规则'),
+                    cancelHandl: true,
+                    renderChildren: () => {
+                        return (
+                            <SMForm
+                                formData={groupClomns(dataSource, risklevelList, groupList)}
+                                isShowSubmitBtn
+                                initialValues={{
+                                    ruleId: record.ruleId.replace('M', 'E'),
+                                    ruleSet: record.ruleSetId,
+                                    group_code: record.group_code,
+                                    riskLevel: record.riskLevel,
+                                }}
+                                onSubmit={val => submitGroup(val, record)}
+                            />
+                        );
+                    },
+                });
+                break;
+            case 'ruleLog':
+                jumpRuleLog?.(record.ruleId);
+                break;
+        }
+    }, [
+        eventId,
+        getEventList,
+        ruleRemindModal,
+        batchEditRule,
+        getMeta,
+        currentGlobalFilter,
+        updateRule,
+        groupList,
+        dataSource,
+        risklevelList,
+        variableList,
+        submitGroup,
+        eventChange,
+        jumpRuleLog,
+        t,
+        isCurrentCustomer,
+        customerStatusChange,
+        customerRecoverChange,
+    ]);
+    const ruleCheckDiffRule = useCallback(async (val, record) => {
+        const result = await dispatch({
+            type: 'strategy/ruleSetIsExist',
+            payload: {
+                appIds: [currentGlobalFilter.appId],
+                eventIds: typeof val.eventId === 'string' ? [val.eventId] : val.eventId,
+                organization: currentGlobalFilter.organization,
+                ruleSetId: record.ruleSetId,
+            }});
+        if (result && result.length) {
+            global.modal.show(ModalType.MODAL_ALERT, {
+                width: 576,
+                modalTitle: t('规则集不存在列表'),
+                confirmText: t('重新调整'),
+                onlyConfirm: true,
+                confirmHandle: () => global.modal.pop(),
+                renderChildren: () => {
+                    return (
+                        <SMTable
+                            columns={ruleColumnList()}
+                            dataSource={result}
+                            isHidePagination
+                        />
+                    );
+                },
+            });
+        }
+        else {
+            ruleRemindModal(val, record);
+        }
+    }, [dispatch, currentGlobalFilter, ruleRemindModal, t]);
+    const handleGrayChange = useCallback(val => {
+        if (val.includes(ALL)) {
+            grayRef.current.setFieldsValue({
+                eventId: getEventList().map(item => item.eventId),
+            });
+        }
+    }, [getEventList]);
+    // 修改灰度比例
+    const handleGray = useCallback(record => {
+        const showRemark = !isCurrentCustomer;
+        global.modal.show(ModalType.MODAL_ALERT, {
+            width: 576,
+            modalTitle: t('修改灰度比例'),
+            renderChildren: () => {
+                return (
+                    <div>
+                        {isCurrentCustomer && (
+                            <div
+                                style={{
+                                    background: '#fffbe6',
+                                    border: '1px solid #ffe58f',
+                                    padding: '8px 12px',
+                                    marginBottom: 16,
+                                    borderRadius: 4,
+                                }}
+                            >
+                                {t('修改灰度比例会影响策略生效范围，请谨慎操作。')}
+                            </div>
+                        )}
+                        <SMForm
+                            formData={formatUs(
+                                grayFromData(
+                                    getEventList(),
+                                    currentGlobalFilter.organization !== SM_ACCOUNT,
+                                    handleGrayChange,
+                                    showRemark
+                                ),
+                                ['label', 'placeholder'],
+                                t
+                            )}
+                            onSubmit={val => ruleCheckDiffRule(val, record)}
+                            initialValues={{eventId: [eventId], appId: [currentGlobalFilter.appId]}}
+                            isShowSubmitBtn
+                            submitText={t('确定')}
+                            cancelText={t('取消')}
+                            onCancel={() => global.modal.pop()}
+                            setForm={ref => grayRef.current = ref}
+                        />
+                    </div>
+                );
+            },
+        });
+    }, [getEventList, ruleCheckDiffRule, currentGlobalFilter, eventId, handleGrayChange, t, isCurrentCustomer]);
+
+    const handleClick = useCallback((val, record) => {
+        setRuleType('view');
+        getMeta(record);
+        setRecord(record);
+        setRuleModalVisible(true);
+    }, [getMeta]);
+
+    // 批量修改、禁用
+    const formatReview = useCallback(async (val, type) => {
+        const OldRulesList = [];
+        const newRulesList = [];
+        let result = {};
+
+        selectedRowKeys.forEach(item => {
+            data.forEach(dataItem => {
+                const newItem = {...dataItem};
+                if (newItem.id === item) {
+                    newItem.score = val.score ? val.score : dataItem.score;
+                    newItem.riskLevel = val.riskLevel ? val.riskLevel : dataItem.riskLevel;
+                    newItem.verifyType = val.verifyType ? val.verifyType : dataItem.verifyType;
+                    if (type) {
+                        newItem.enabled = 0;
+                    }
+                    newRulesList.push({...newItem, meta: []});
+                    OldRulesList.push({...dataItem, meta: []});
+                }
+            });
+        });
+        let params = {
+            environment: 'online',
+            auditInfo: isCurrentCustomer ? undefined : {applyReason: val.remark, 'attachment': []},
+            user: currentUser.account,
+            appIds: [currentGlobalFilter.appId],
+            eventIds: [eventId],
+            organization: currentGlobalFilter.organization,
+            oldRules: OldRulesList,
+            newRules: newRulesList,
+        };
+        if (type  === 'ruleOffline') {
+            result = await batchUpdateStatus(params);
+        }
+        else {
+            result = await updateRiskLevel(params);
+        }
+
+        if (result.code === REQUEST_CODE.SUCCESS) {
+            global.modal.pop();
+            setvisible(false);
+            message.success(result.message);
+            method.getRuleList && method.getRuleList(newRulesList[0].ruleSetId);
+        }
+
+    }, [
+        selectedRowKeys,
+        eventId,
+        data,
+        currentUser.account,
+        currentGlobalFilter,
+        isCurrentCustomer,
+        method,
+    ]);
+    const batchForbidden = useCallback(isDisabled => {
+        if (isDisabled) {
+            return;
+        }
+        const formData = isCurrentCustomer ? [] : [{
+            label: t('申请原因'),
+            type: 'textarea',
+            placeholder: t('请输入修改原因'),
+            required: true,
+            definition: {
+                var: 'remark',
+            }},
+        ];
+        global.modal.show(ModalType.MODAL_ALERT, {
+            width: 400,
+            renderChildren: () => {
+                return (
+                    <div>
+                        <span>{t('是否批量禁用')}？</span>
+                        <SMForm
+                            formData={formData}
+                            onSubmit={val => formatReview(val, 'ruleOffline')}
+                            isShowSubmitBtn
+                            onCancel={() => global.modal.pop()}
+                        />
+                    </div>
+                );
+            },
+        });
+    }, [formatReview, t, isCurrentCustomer]);
+    // 显示多选操作栏
+    const showSelectionExtraDom = useCallback(() => {
+        const isDisabled = selectedRowKeys.length === 0 || degradeMode;
+        const color = isDisabled ? { color: '#666', cursor: 'not-allowed' } : { color: '#00bca1', cursor: 'pointer' };
+        if (authList.batchUpdateHandle) {
+            return (
+                <div className={style.extra}>
+                    {authList.batchUpdateHandle && (
+                        <Tooltip title={degradeMode ? t('请关闭策略降级模式后进行修改。') : ''}>
+                            <span
+                                style={color}
+                                onClick={() => {
+                                    if (isDisabled) {
+                                        return;
+                                    }
+                                    setvisible(true);
+                                }}
+                            >
+                                {t('批量修改处置建议')}
+                            </span>
+                        </Tooltip>
+                    )}
+                    <span>|</span>
+                    {authList.batchDisable && (
+                        <Tooltip title={degradeMode ? t('请关闭策略降级模式后进行修改。') : ''}>
+                            <span style={color} onClick={() => batchForbidden(isDisabled)}>{t('批量禁用')}</span>
+                        </Tooltip>
+                    )}
+                </div>
+            );
+        }
+        return [];
+    }, [selectedRowKeys, batchForbidden, authList, degradeMode, t]);
+
+    // 策略是否存在
+    const ruleSetDiff =  useCallback(async val => {
+        if (!activityEvent.length) {
+            message.error(t('事件不能为空'));
+            return;
+        }
+        setModalLoading(true);
+        setActivityAppId(val.appId);
+        setActivityEvent(val.eventId);
+        const result = await dispatch({
+            type: 'strategy/ruleSetIsExist',
+            payload: {
+                appIds: val.appId || [currentGlobalFilter.appId],
+                eventIds: val.eventId || activityEvent,
+                organization: currentGlobalFilter.organization,
+                ruleSetId: record.ruleSetId,
+            }});
+
+        if (result && result.length) {
+            global.modal.show(ModalType.MODAL_ALERT, {
+                width: 576,
+                modalTitle: t('规则集不存在列表'),
+                confirmText: t('重新调整'),
+                onlyConfirm: true,
+                confirmHandle: () => global.modal.pop(),
+                renderChildren: () => {
+                    return (
+                        <SMTable
+                            columns={formatUs(ruleColumnList(), ['title'], t)}
+                            dataSource={result}
+                            isHidePagination
+                        />
+                    );
+                },
+            });
+        }
+        else {
+            const list =  await variableList(val.eventId);
+            if (ruleType === operaeType.UPDATE) {
+                getMeta(record, list);
+            }
+            setRuleVisible(false);
+            setRuleModalVisible(true);
+        }
+        setModalLoading(false);
+    }, [
+        activityEvent,
+        dispatch,
+        record,
+        currentGlobalFilter,
+        getMeta,
+        ruleType,
+        variableList,
+        t,
+    ]);
+
+    const customerRuleUpdate =  useCallback(async record => {
+        setRecord(record);
+        setRuleType(operaeType.UPDATE);
+        setActivityEvent([eventId]);
+        const list = await variableList(eventId);
+        getMeta(record, list);
+        setCustomerModalVisible(true);
+    }, [eventId, variableList, getMeta]);
+
+    /**
+     * 获取风险原因
+     */
+    const getRiskReasons = riskReasons => {
+        let result = {
+            operator: 'concat',
+            operands: [],
+            type: 'string',
+        };
+
+        if (riskReasons) {
+            riskReasons = String(riskReasons);
+            riskReasons = _.trim(riskReasons);
+
+            if (!riskReasons) {
+                result = {};
+            } else {
+                const reg = /\${[\w\d\.\-_$]+}/ig;
+                const matches = riskReasons.match(reg);
+                const riskReasonArr = riskReasons.split(reg);
+                const operands = [];
+
+                for (let i = 0; i < riskReasonArr.length; i++) {
+                    const word = riskReasonArr[i];
+                    let variable = matches ? matches[i] : null;
+
+                    if (word) {
+                        operands.push({
+                            operator: 'val',
+                            operands: [word],
+                        });
+                    }
+
+                    if (variable) {
+                        variable = variable.replace(/(\${)|(})/ig, '');
+                        operands.push({
+                            operator: 'var',
+                            operands: [variable],
+                        });
+                    }
+                }
+
+                result.operands = operands;
+            }
+        } else {
+            result = {};
+        }
+
+        return result;
+    };
+    /**
+     * 获取基础信息
+     */
+    const getBaseInfo = useCallback(originData => {
+        const {score, riskTypeName, riskReasons, ruleName} = originData;
+        const riskTypeNameIsNum = /^\d+$/.test(riskTypeName);
+        let baseInfo = {
+            score: {
+                operator: 'val',
+                operands: score,
+                type: 'int',
+            },
+        };
+
+        // 风险类型/风险原因
+        if (!riskTypeNameIsNum && riskTypeName) {
+            baseInfo.ruleNameDesc = getRiskReasons(ruleName);
+
+            if (riskReasons) {
+                baseInfo.riskReasons = getRiskReasons(`${riskTypeName}：${riskReasons}`);
+            } else {
+                baseInfo.riskReasons = getRiskReasons(riskTypeName);
+            }
+        }
+
+        // 解决三级标签问题
+        if (riskTypeNameIsNum) {
+            baseInfo.ruleNameDesc = getRiskReasons(ruleName);
+            baseInfo.riskReasons = getRiskReasons(ruleName);
+        }
+
+        return baseInfo;
+    }, []);
+    /**
+     * 格式化条件
+     */
+    const formatCondition = useCallback(originData => {
+        let conditions = [];
+        for (let key in originData) {
+            const reg = /left(\d+(?:_\d+)?)/;
+            const matches = key.match(reg);
+            if (matches && matches.length) {
+                const index = matches[1];
+                const rightValue = originData[`right${index}`].replace(/\s+/g, '');
+                conditions.push([{
+                    left: originData[`left${index}`],
+                    operator: originData[`operator${index}`],
+                    right: rightValue,
+                    varType: originData[`varType${index}`],
+                    inputType: originData[`inputType${index}`],
+                }]);
+
+            }
+        }
+        return conditions;
+    }, []);
+    /**
+     * 获取规则条件操作项
+     */
+    const getOperands = (_condition, _operands) => {
+        let rightVal = _condition.right;
+        let isArrayString = rightVal.indexOf(',') !== -1;
+        if (_condition.inputType === 'val' && _condition.varType === 'string' && !isArrayString) {
+            rightVal = _condition.right;
+        }
+        if (_condition.inputType === 'val' && _condition.varType === 'boolean') {
+            rightVal = _condition.right.toUpperCase();
+        }
+        if (_condition.operator === 'notSubsetp') {
+            _operands.push({
+                'operator': 'not',
+                'operands': [
+                    {
+                        operator: 'subsetp',
+                        operands: [{
+                            operator: 'var',
+                            operands: [_condition.left],
+                            type: _condition.varType,
+                        }, {
+                            operator: _condition.inputType,
+                            operands: rightVal.split(','),
+                            type: _condition.varType,
+                        }],
+                        type: 'boolean',
+                    },
+                ],
+                'type': 'blooean',
+
+            });
+        } else {
+            // 原有逻辑
+            _operands.push({
+                operator: _condition.operator,
+                operands: [{
+                    operator: 'var',
+                    operands: [_condition.left],
+                    type: _condition.varType,
+                }, {
+                    operator: _condition.inputType,
+                    operands: rightVal.split(','),
+                    type: _condition.varType,
+                }],
+                type: 'boolean',
+            });
+        }
+
+        return _operands;
+    };
+    /**
+     * 获取自定义条件
+     */
+    const getCondition =  useCallback(originData => {
+        let reuslt = {};
+        const conditions = formatCondition(originData);
+        let operands = [];
+        conditions.forEach(condition => {
+            // eslint-disable-next-line
+            if (condition.length == 1) {
+                let _condition = condition[0];
+                operands = getOperands(_condition, operands);
+            } else {
+                let orOperands = [];
+                for (let i = 0; i < condition.length; i++) {
+                    let _condition = condition[i];
+                    orOperands = getOperands(_condition, orOperands);
+                }
+
+                const orCondition = {
+                    operator: 'or',
+                    operands: orOperands,
+                    type: 'blooean',
+                };
+
+                operands.push(orCondition);
+
+            }
+        });
+        reuslt = {
+            operator: 'and',
+            operands: operands,
+            type: 'blooean',
+        };
+
+        return reuslt;
+    }, [formatCondition]);
+    // 添加规则
+    const addRule = useCallback((e, item, type) => {
+        e.stopPropagation();
+        if (type === operaeType.UPDATE) {
+            setRecord(item);
+            setRuleType(operaeType.UPDATE);
+        }
+        else {
+            setRecord(item);
+            setRuleType(operaeType.ADD);
+            const data = defaultVariable(variableData, t);
+            setConditions([[data.left, data.operator, data.rightVal]]);
+        }
+        setRuleVisible(true);
+        setActivityEvent([eventId]);
+    }, [eventId, variableData]);
+
+    /**
+     * 传参特殊逻辑处理
+     * @param {*} leftType 左边变量类型
+     * @param {*} inputType 常量、变量
+     * @param {*} rightValue 右边值
+     * 1: 输入类型为常量
+     * 2：左边变量值类型为string
+     * 3：右边值不包含，
+     */
+    const specialRuleParams = (leftType, inputType, rightValue) => {
+        let insideValue = rightValue;
+        if (inputType === VAL && STRING === leftType && !(rightValue.includes(','))) {
+            insideValue = `"${rightValue}"`;
+        }
+        return insideValue;
+    };
+
+    // 获取规则参数
+    const ruleParams =  useCallback(val => {
+        const example = {}; // condittion中的参数right值做特殊处理
+        let outerExample = {}; // 放入meta下面的参数不做特殊处理
+        let isNull = false;
+        let isReturn = false;
+        conditions.forEach((item, index) => {
+            const rightValue = item[2].definition.default;
+            const leftType = item[0].definition.type; // 左边变量类型；
+            const leftValue = item[0].definition.default;
+            const inputType =  item[2].definition.inputType;
+            const operatorValue = item[1].definition.default;
+            if (!rightValue || !leftValue || !operatorValue) {
+                isNull = true;
+                return;
+            }
+            example[`left${index}_0`] = leftValue;
+            example[`varType${index}_0`] = item[0].definition.type;
+            example[`operator${index}_0`] = operatorValue;
+            example[`right${index}_0`] = specialRuleParams(leftType, inputType, rightValue);
+            example[`boxItemLength${index}`] = '1';
+            example[`inputType${index}_0`] = item[2].definition.inputType; // 变量类型右边值需要加上operator
+            outerExample[`boxItemLength${index}`] = '1';
+            outerExample[`left${index}_0`] = leftValue;
+            outerExample[`varType${index}_0`] = item[0].definition.type;
+            outerExample[`operator${index}_0`] = operatorValue;
+            outerExample[`right${index}_0`] = rightValue;
+            outerExample[`inputType${index}_0`] = item[2].definition.inputType;
+        });
+        if (!example || isNull) {
+            isReturn = true;
+        }
+        let number = 0;
+        _.keys(example).forEach(item => {
+            if (item.includes('left')) {
+                number++;
+            }
+        });
+        for (let i = 0; i < number; i++) {
+        }
+        const meta = {
+            const: [],
+            _result: [],
+            _phase: 'common',
+            _customTemplate: 1,
+            _baseInfo: getBaseInfo(val),
+            _condition: getCondition(example),
+            ruleId: val.ruleId,
+            score: val.score,
+            marker: val.marker,
+            pullBlack: (val.isBlack === '0' || !val.isBlack) ? '0' : '1',
+            riskLevel: val.riskLevel,
+            riskType: val.riskType,
+            ruleName: val.ruleName,
+            riskReasons: val.riskReasons,
+            riskTypeName: val.riskTypeName,
+            group_value: _.get(groupData, '0.group_value', ''),
+            group_variable: _.get(groupData, '0.group_variable', ''),
+            ...outerExample,
+        };
+        if (val.verifytype) {
+            meta.verifyType = val.verifytype;
+        }
+        // 拉黑字段的fields存在值，且选择了拉黑
+        if (val?.blackFields?.fields?.length > 0 && val.isBlack === '1') {
+            meta.blackFields = val.blackFields;
+        }
+        let obj = {
+            appId: currentGlobalFilter.appId,
+            creator: currentUser.account,
+            enabled: enabledParam,
+            eventId: eventId,
+            isFinalCounter: 0,
+            isOpen: 0,
+            marker: val.marker,
+            organization: currentGlobalFilter.organization,
+            riskLevel: val.riskLevel,
+            riskType: val.riskType,
+            ruleName: val.ruleName,
+            templateId: 'T0000',
+            ruleSetId: record.ruleSetId,
+            group_code: group,
+        };
+        if (val.verifytype) {
+            obj.verifyType = val.verifytype;
+        }
+        obj.ruleId = val.ruleId;
+        obj.meta = meta;
+        const params = {
+            organization: currentGlobalFilter.organization,
+            appIds: activityAppId || [currentGlobalFilter.appId],
+            eventIds: activityEvent,
+            ruleId: val.ruleId,
+            environment: 'experiment',
+            rule: obj,
+        };
+        if (ruleType === operaeType.UPDATE) {
+            params.sourceRuleId = record.ruleId;
+        }
+        return {params, isReturn};
+    }, [
+        eventId,
+        activityEvent,
+        currentUser,
+        record,
+        getBaseInfo,
+        getCondition,
+        ruleType,
+        activityAppId,
+        currentGlobalFilter,
+        conditions,
+        group,
+        groupData,
+    ]);
+    // 新增、修改规则 参数处理
+    const ruleSubmit = useCallback(async val => {
+        const {params, isReturn} = ruleParams(val);
+        if (isReturn) {
+            message.warning(t('条件不能为空'));
+            return;
+        }
+        const url = ruleType === operaeType.UPDATE ? 'strategy/updateRule' : 'strategy/addRule';
+        const result =  await dispatch({
+            type: url,
+            payload: params,
+        });
+        if (result) {
+            setRuleModalVisible(false);
+            setRuleVisible(false);
+        }
+    }, [dispatch, ruleParams, ruleType]);
+
+    // 客户新增、修改规则 参数处理
+    const customerRuleSubmit = useCallback(async val => {
+        const rulesObj = _.cloneDeep(record);
+        rulesObj.riskLevel = val.riskLevel;
+        rulesObj.meta.riskLevel = val.riskLevel;
+        if (val.riskLevel === 'VERIFY' && val.verifytype) {
+            rulesObj.verifyType = val.verifytype;
+            rulesObj.meta.verifyType = val.verifytype;
+        }
+        rulesObj.organization = currentGlobalFilter.organization;
+        rulesObj.appId = currentGlobalFilter.appId;
+        rulesObj.eventId = eventId;
+
+        const params = {
+            appIds: [currentGlobalFilter.appId],
+            eventIds: [eventId],
+            organization: currentGlobalFilter.organization,
+            rule: rulesObj,
+            environment: 'online',
+            action: 'updateRiskLevel',
+        };
+        const result = await orgUpdate(params);
+        if (result) {
+            setCustomerModalVisible(false);
+            method.getRuleList && method.getRuleList(record.ruleSetId);
+        }
+    }, [currentGlobalFilter, eventId, method, record]);
+
+    const handleDelete =  useCallback((record, type) => {
+        global.modal.show(ModalType.MODAL_ALERT, {
+            width: 576,
+            renderChildren: () => {
+                return (
+                    <div>
+                        <span>{t(`是否{${type}}规则`)}？</span>
+                        <SMForm
+                            formData={TEXTAREA_FORM}
+                            onSubmit={val => {
+                                deleteRule(val, record);
+                            }}
+                            isShowSubmitBtn
+                            onCancel={() => global.modal.pop()}
+                        />
+                    </div>
+                );
+            },
+        });
+    }, [deleteRule]);
+    // 获取表头
+    const columns = useColumns(
+        getTableColumns(
+            {
+                ...props,
+                onChange: handleChange,
+                handleGray,
+                handleClick,
+                handleUpdate: (e, record) => addRule(e, record, operaeType.UPDATE),
+                handleDelete,
+                customerRuleUpdate,
+                t,
+            },
+            isGlobal,
+            currentGlobalFilter.organization === SM_ACCOUNT,
+            authList,
+            isOpenStatus,
+            degradeMode
+        ));
+
+    const headerDom = useCallback(item => {
+        return (
+            <div className={style['header-content']}>
+                <div>{item.ruleSetName}({t('规则总数')}:{item.ruleCount}, {t('运行中规则')}:{item.enableRuleCount})</div>
+                <div>
+                    {isGlobal && authList.createRule
+                    && <><SMIcon type={'icon-xinzeng'} onClick={e => addRule(e, item)} />
+                        <span className={style.divide} /></>
+                    }
+                    {isGlobal && authList.updateRuleSet
+                    && <SMIcon type={'icon-xiugaixuanzhong-copy'} onClick={e => method.updateRuleSet(e, item)} />}
+
+                    {isGlobal && authList.createRuleSet
+                        && <>  <span className={style.divide} />
+                            <Popconfirm
+                                title={t('是否删除规则集')}
+                                okText={t('是')}
+                                cancelText={t('否')}
+                                onConfirm={e => {deleteRuleSet(e, item.id);}}
+                                placement="topRight"
+                            >
+                                <SMIcon type={'icon-shanchuweixuanzhong'} onClick={e => e.stopPropagation()} />
+                            </Popconfirm>
+                        </>
+                    }
+                </div>
+            </div>
+        );
+    }, [addRule, deleteRuleSet, isGlobal, method, authList]);
+    const getCollapse = useCallback(() => {
+        if (!dataSource.length) {
+
+            return <Empty className={style.empty} />;
+        }
+        return dataSource.map(item => {
+            return (
+                <Panel
+                    key={item.ruleSetId}
+                    showArrow={false}
+                    header={headerDom(item)}
+                >
+                    <SMTable
+                        dataSource={data}
+                        columns={formatUs(columns, ['title'], t)}
+                        loading={ruleLoading}
+                        i18nText={tableText(t)}
+                        rowSelection={isCurrentCustomer && isOpenStatus !== 2 ? undefined : {
+                            selectedRowKeys,
+                            onChange: selectedRowKeys => {
+                                setSelectedRowKeys(selectedRowKeys);
+                            },
+                        }}
+                        // setLocalTable
+                        selectionExtraDom={(isCurrentCustomer && isOpenStatus !== 2)
+                            ? undefined : showSelectionExtraDom}
+                        isHidePagination
+                        totalCount={data && data.length}
+                    />
+                </Panel>
+            );
+        });
+    }, [
+        columns,
+        dataSource,
+        selectedRowKeys,
+        showSelectionExtraDom,
+        data,
+        headerDom,
+        ruleLoading,
+        setSelectedRowKeys,
+        t,
+        isCurrentCustomer,
+        isOpenStatus,
+    ]);
+
+    const variableChange = useCallback((val, list) => {
+        let number = 0;
+        const data = _.cloneDeep(conditions);
+        _.keys(val).forEach(item => {
+            if (item.includes('left')) {
+                number++;
+            }
+        }, []);
+        for (let i = 0; i < number; i++) {
+            const obj = variableData.filter(item => {
+                return item.id === val[`left${i}_0`];
+            })[0];
+            try {
+                data[i][1].definition.condiates = OPERATOR_EXTRA[obj.type];
+                data[i][0].definition.type = obj.type;
+                data[i][0].definition.default = val[`left${i}_0`];
+                data[i][1].definition.default = val[`operator${i}_0`];
+                data[i][2].definition.default = val[`right${i}_0`];
+            } catch (error) {
+            }
+        }
+        setConditions(data);
+    }, [conditions, variableData]);
+
+    useEffect(() => {
+        setData(contents || []);
+        setActiveKey(contents && contents.length && contents[0].ruleSetId);
+    }, [contents]);
+
+    useEffect(() => {
+        setActiveKey([]);
+    }, [productList]);
+
+    useEffect(() => {
+        setActivityEvent(eventId);
+    }, [eventId]);
+
+    useEffect(() => {
+        setActivityAppId([currentGlobalFilter.appId]);
+    }, [currentGlobalFilter]);
+
+    return (
+        <div className={style['rule-collapse']}>
+            <Spin spinning={loading}>
+                <Collapse
+                    activeKey={activeKey}
+                    onChange={val => {
+                        setSelectedRowKeys([]);
+                        const newVal = val.length ? val[val.length - 1] : '';
+                        setActiveKey(newVal);
+                        collapseChange(newVal);
+                    }}
+                >
+                    {getCollapse()}
+                </Collapse>
+                <BatchUpdateModal
+                    risklevelList={risklevelList}
+                    formatReview={formatReview}
+                    visible={visible}
+                    isCurrentCustomer={isCurrentCustomer}
+                    closable={() => {
+                        setvisible(false);
+                    }}
+                />
+                <AddListModal
+                    visible={ruleVisible}
+                    loading={modalLoading}
+                    eventId={eventId}
+                    appId={currentGlobalFilter.appId}
+                    ruleType={ruleType}
+                    isGlobal={currentGlobalFilter.organization === SM_ACCOUNT || isGlobal}
+                    currentGlobalFilter={currentGlobalFilter}
+                    eventList={getEventList()}
+                    ruleSetDiff={ruleSetDiff}
+                    onCancel={() => setRuleVisible(false)}
+                />
+                <RuleMdoal
+                    visible={ruleModalVisible}
+                    record={record}
+                    riskMapList={riskMapList}
+                    risklevelList={risklevelList}
+                    variableData={variableData}
+                    setConditions={setConditions}
+                    variableChange={variableChange}
+                    ruleType={ruleType}
+                    conditions={conditions}
+                    productId={productId}
+                    riskTypeList={riskTypeList}
+                    onCancel={() => setRuleModalVisible(false)}
+                    onClose={() => {
+                        setRuleModalVisible(false);
+                        setRuleVisible(false);
+                    }}
+                    ruleSubmit={ruleSubmit}
+                />
+                <RuleModalCustomer
+                    visible={customerModalVisible}
+                    record={record}
+                    riskMapList={riskMapList}
+                    risklevelList={risklevelList}
+                    variableData={variableData}
+                    setConditions={setConditions}
+                    variableChange={variableChange}
+                    ruleType={ruleType}
+                    conditions={conditions}
+                    productId={productId}
+                    riskTypeList={riskTypeList}
+                    onCancel={() => setCustomerModalVisible(false)}
+                    onClose={() => {
+                        setCustomerModalVisible(false);
+                        setRuleVisible(false);
+                    }}
+                    ruleSubmit={customerRuleSubmit}
+                />
+            </Spin>
+        </div>
+    );
+};
+export default connect(({}) => ({}))(RuleCollapse);