删除确认框通用性调整

src/components/admin/userGroupManagement.jsx

@@ -7,6 +7,7 @@ import { connect } from 'dva'
 import './userGroupManagement.less'
 import DetailBox from './userGroupDetailBox'
 import AddMemberBox from '../common/selectUserBox/selectUserBox'
+import DeleteBox from '../common/deleteBox/deleteBox'
 const { Sider, Content } = Layout
 const { Search } = Input
 
@@ -69,7 +70,7 @@ class UserGroupManagement extends React.Component {
     render() {
         const { userGroup, dispatch } = this.props;
         const { selectedGroup } = userGroup;
-        const { tableBodyHeight, pageSize } = this.state;
+        const { tableBodyHeight, pageSize, visibleDeleteBox } = this.state;
 
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         let filterLabel = (userGroup.filterLabel || '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
@@ -140,10 +141,23 @@ class UserGroupManagement extends React.Component {
                     <div className='groupname'>
                         <span>{selectedGroup ? selectedGroup.name : ''}</span>
                         {selectedGroup && <Button className='delete-btn' onClick={() => {
-                            dispatch({ type: 'userGroup/remoteDelete', group: selectedGroup });
+                            this.setState({
+                                visibleDeleteBox: true
+                            })
                         }}>
                             <Icon type="delete" />删除用户组
                         </Button>}
+                        {visibleDeleteBox && <DeleteBox
+                            visibleBox={visibleDeleteBox}
+                            text={`确定要删除用户组【${selectedGroup.name}】吗？`}
+                            hideBox={() => {
+                                this.setState({
+                                    visibleDeleteBox: false
+                                })
+                            }}
+                            okHandler={() =>{
+                                dispatch({ type: 'userGroup/remoteDelete', group: selectedGroup });
+                        }} />}
                         {selectedGroup && <Button className='edit-btn' onClick={() => {this.showDetailBox('modify')}}>
                             <Icon type="edit" />编辑用户组
                         </Button>}

src/components/chart/list.jsx

@@ -466,14 +466,13 @@ class ChartList extends React.Component {
                     }}
                 />}
                 {visibleDeleteBox && <DeleteBox
-                    visibleDeleteBox={visibleDeleteBox}
-                    type='chart'
+                    visibleBox={visibleDeleteBox}
+                    text={`确定要删除图表【${selectedRecord.name}】吗？`}
                     hideBox={() => {
                         this.setState({
                             visibleDeleteBox: false
                         })
                     }}
-                    selectedRecord={selectedRecord}
                     okHandler={() => {
                         dispatch({ type: 'chart/remoteDelete', code: this.state.selectedRecord.code })
                 }} />}

src/components/common/deleteBox/deleteBox.jsx

@@ -3,29 +3,21 @@ import { Modal } from 'antd'
 
 
 /**
- * 通用的删除对话框，需传入：
- * type类型用于展示删除目标
- * visibleDeleteBox用于关联其父级容器中管理显示与否的state
- * hideBox方法用于隐藏对话框
- * selectedRecord用于传入被选中的条目
- * onOk方法用于执行删除操作
- * 
  * @class DeleteBox
  * @extends {React.Component}
- * 
  *
  */
 class DeleteBox extends React.Component {
 
     componentDidMount() {
-        window.addEventListener('keydown', this.hhh);
+        window.addEventListener('keydown', this.keydown);
     }
 
     componentWillUnmount() {
-        window.removeEventListener('keydown', this.hhh);
+        window.removeEventListener('keydown', this.keydown);
     }
 
-    hhh = (e) => {
+    keydown = (e) => {
         if(e.keyCode === 13) { // 按下回车
             this.onOk();
         }
@@ -38,20 +30,16 @@ class DeleteBox extends React.Component {
     }
 
     render() {
-        const { visibleDeleteBox, hideBox, selectedRecord, type } = this.props
-        const typeMapper = {
-            'datasource': '数据源',
-            'chart': '图表',
-            'dashboard': '看板'
-        }
+        const { visibleBox, hideBox, title, text } = this.props
         return (
-            <Modal 
-                visible={visibleDeleteBox}
+            <Modal
+                title={title || '删除确认'}
+                visible={visibleBox}
                 onCancel={hideBox}
                 onOk={this.onOk}
                 destroyOnClose={true}
             >
-                <span>确定要删除{typeMapper[type]}：{selectedRecord ? selectedRecord.name : ''} 吗？</span>
+                <span>{text || '确定要删除该对象吗？'}</span>
             </Modal>
         )
     }

src/components/dashboard/list.jsx

@@ -228,18 +228,17 @@ class DashboardList extends React.Component {
                         })
                     }}
                 />}
-                <DeleteBox
-                    visibleDeleteBox={visibleDeleteBox}
-                    type='dashboard'
+                {visibleDeleteBox && <DeleteBox
+                    visibleBox={visibleDeleteBox}
+                    text={`确定要删除看板【${selectedRecord.name}】吗？`}
                     hideBox={() => {
                         this.setState({
                             visibleDeleteBox: false
                         })
                     }}
-                    selectedRecord={selectedRecord}
                     okHandler={() => {
                         dispatch({ type: 'dashboard/remoteDelete', code: this.state.selectedRecord.code })
-                    }} />
+                    }} />}
             </Layout>
         )
     }

src/components/dataSource/list.jsx

@@ -481,14 +481,13 @@ class DataSource extends React.Component {
                             onlyAdmin={true}
                         />
                         {visibleDeleteBox && <DeleteBox
-                            visibleDeleteBox={visibleDeleteBox}
-                            type='datasource'
+                            visibleBox={visibleDeleteBox}
+                            text={`确定要删除数据源【${selectedRecord.name}】吗？`}
                             hideBox={() => {
                                 this.setState({
                                     visibleDeleteBox: false
                                 })
                             }}
-                            selectedRecord={selectedRecord}
                             okHandler={() =>{
                                 dispatch({ type: 'dataSource/remoteDelete', code: selectedRecord.code })
                         }} />}