删除数据源时添加确认对话框

src/components/datasource/dataSource.jsx

@@ -5,6 +5,7 @@ import './dataSource.less'
 import { dateFormat } from '../../utils/baseUtils'
 import GroupSelector from './groupSelector'
 import TransferBox from './transferBox';
+import DeleteBox from './deleteBox';
 const { Content } = Layout
 const { Search } = Input
 const { TreeNode } = Tree
@@ -17,6 +18,7 @@ class DataSource extends React.Component {
             visibleGroupMenu: false, // 显示分组菜单
             visibleSetGroupMenu: false, //
             visibleTransferBox: false,
+            visibleDeleteBox: false,
             groupEditing: false, // 是否处于编辑状态
         }
     };
@@ -243,7 +245,7 @@ class DataSource extends React.Component {
     render() {
         
         const { dataSource, dispatch } = this.props;
-        const { selectedRecord, visibleTransferBox } = this.state;
+        const { selectedRecord, visibleTransferBox, visibleDeleteBox } = this.state;
 
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         let filterLabel = dataSource.filterLabel.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
@@ -283,10 +285,11 @@ class DataSource extends React.Component {
                 </Menu.Item>
                 <Menu.Item
                     onClick={(e) => {
-                        dispatch({ type: 'dataSource/remoteDelete', code: selectedRecord.code });
+                        this.setState({ visibleDeleteBox: true})
                     }}
                 >
                     <Icon type="delete" />删除
+                    
                 </Menu.Item>
             </Menu>
         );
@@ -462,6 +465,15 @@ class DataSource extends React.Component {
                                     visibleTransferBox: false
                                 })
                             }} />
+                        <DeleteBox
+                            visibleDeleteBox={visibleDeleteBox}
+                            onCancel={() => {
+                                this.setState({
+                                    visibleDeleteBox: false
+                                })
+                            }}
+                            selectedRecord={selectedRecord}
+                            onOk={() =>dispatch({ type: 'dataSource/remoteDelete', code: selectedRecord.code })} />
                     </Card>
                 </Content>
             </Layout>

src/components/datasource/deleteBox.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Modal } from 'antd'
+
+
+class DeleteBox extends React.Component {
+    render() {
+        const { visibleDeleteBox, onCancel, selectedRecord } = this.props
+        return (
+            <Modal 
+                visible={visibleDeleteBox}
+                onCancel={onCancel}
+            >
+                <span>确定要删除数据源：{selectedRecord ? selectedRecord.name : ''} 吗？</span>
+            </Modal>
+        )
+    }
+}
+
+export default DeleteBox