100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
import React from 'react';
|
||
import { Modal, Tag } from 'antd';
|
||
import { ExclamationCircleOutlined } from '@ant-design/icons';
|
||
import type { ProColumns } from '@ant-design/pro-table';
|
||
import ProTable from '@ant-design/pro-table';
|
||
import './riskStyle.less'
|
||
|
||
interface RiskPreventionSoftProps {
|
||
modalVisible: boolean;
|
||
onCancel: () => void;
|
||
onSubmit: () => void;
|
||
data: Array<any>;
|
||
}
|
||
|
||
const modalHeight = window.innerHeight * 96 / 100;
|
||
|
||
/**
|
||
* 风险防控通用(软控)
|
||
* @param props
|
||
* @returns
|
||
*/
|
||
const RiskPreventionSoft: React.FC<RiskPreventionSoftProps> = (props) => {
|
||
const { modalVisible, onCancel, onSubmit, data } = props;
|
||
|
||
const columns: ProColumns<any[]>[] = [
|
||
{
|
||
dataIndex: 'regulationStrategy',
|
||
title: '规则响应策略',
|
||
width: '13%',
|
||
valueEnum: {
|
||
hard: { text: '强控', status: 'Error' },
|
||
soft: { text: '软控', status: 'Warning' },
|
||
alarm: { text: '预警', status: 'Processing' }
|
||
},
|
||
},
|
||
{
|
||
dataIndex: 'regulationName',
|
||
title: '规则模型名称',
|
||
width: '13%',
|
||
},
|
||
{
|
||
dataIndex: 'regulationRank',
|
||
title: '风险响应等级',
|
||
width: '13%',
|
||
valueEnum: {
|
||
first: { text: '风险一级' },
|
||
second: { text: '风险二级' },
|
||
third: { text: '风险三级' }
|
||
},
|
||
},
|
||
{
|
||
dataIndex: 'message',
|
||
title: '规则相应内容',
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Modal
|
||
destroyOnClose
|
||
title="风控中心校验结果"
|
||
visible={modalVisible}
|
||
width={'60%'}
|
||
style={{ maxHeight: modalHeight }}
|
||
bodyStyle={{ maxHeight: modalHeight - 107, overflowY: 'auto', padding: '8px 24px 16px' }}
|
||
centered
|
||
onCancel={() => onCancel()}
|
||
onOk={() => {
|
||
onSubmit();
|
||
onCancel();
|
||
}}
|
||
>
|
||
<div>
|
||
<Tag icon={<ExclamationCircleOutlined />} color="warning" className="risk-top-tag">
|
||
当前业务操作受以下风控规则限制
|
||
</Tag>
|
||
{data.map(ite => ite?.result.map((item: any) => (
|
||
<div>
|
||
<div className="risk-table-title">
|
||
<span className="table-scene-name">场景名称：<span>{item.sceneName}</span></span>
|
||
<span>{item.publishDepartName}</span>
|
||
</div>
|
||
<ProTable<any>
|
||
columns={columns}
|
||
dataSource={item.regulationData}
|
||
rowKey="regulationId"
|
||
size='small'
|
||
pagination={false}
|
||
toolBarRender={false}
|
||
search={false}
|
||
/>
|
||
</div>
|
||
)
|
||
))}
|
||
</div>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default RiskPreventionSoft;
|