人员选择器设为通用组件

src/components/admin/addGroupMemberBox.jsx

@@ -1,128 +0,0 @@
-import React from 'react'
-import { Modal, Row, Col, Select, Spin } from 'antd'
-import { connect } from 'dva'
-import * as service from '../../services/index'
-import URLS from '../../constants/url'
-const SelectOption = Select.Option
-
-class AddGroupMemberBox extends React.Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            selectedUser: null,
-            userData: [],
-            fetching: false
-        }
-    }
-
-    okHandler = () => {
-        const { userGroup, dispatch } = this.props;
-        const { selectedGroup } = userGroup;
-        const { selectedUser } = this.state;
-
-        dispatch({ type: 'userGroup/remoteMemberAdd', user: selectedUser, group: selectedGroup });
-    }
-
-    hideBox = () => {
-        const { dispatch } = this.props;
-        dispatch({ type: 'userGroup/setNewModelField', name: 'visibleAddMemberBox', value: false });
-    }
-
-    fetchUserData = (keyword) => {
-        this.setState({ userData: [], fetching: true }, () => {
-            const body = keyword || '';
-            service.fetch({
-                url: URLS.USER_QUERY,
-                body: body,
-            }).then(r => {
-                if(!r.err && r.data.code > 0) {
-                    return r;
-                }else {
-                    let obj = {};
-                    throw obj;
-                }
-            }).then(r => {
-                console.log('获得用户数据', body, r);
-                const resData = r.data.data || [];
-                this.setState({
-                    userData: resData.map(d => ({
-                        code: d.id,
-                        name: d.name,
-                        account: d.userName,
-                        password: d.passWord,
-                        role: d.role,
-                        department: d.department,
-                        post: d.post,
-                    })),
-                    fetching: false
-                });
-            }).catch(ex => {
-                this.setState({
-                    userData: [],
-                    fetching: false
-                });
-                console.error('fetch error', ex);
-            });
-        });
-    }
-
-    render() {
-        const { userGroup} = this.props;
-        const { userData, fetching } = this.state;
-        const { newOne } = userGroup;
-
-        return (
-            <Modal
-                className='addmember-box'
-                title='添加用户组成员'
-                visible={newOne.visibleAddMemberBox}
-                onOk={this.okHandler}
-                onCancel={this.hideBox}
-                maskClosable={false}
-                destroyOnClose={true}
-            >
-                <Row type='flex'>
-                    <Col span={24}>
-                        <Select
-                            style={{ width: '100%' }}
-                            // mode='multiple'
-                            showSearch
-                            filterOption={false}
-                            labelInValue={true}
-                            notFoundContent={fetching ? <Spin size="small" /> : '无'}
-                            onSearch={(value) => {
-                                const timeout = this.state.timeout;
-                                timeout && window.clearTimeout(timeout);
-                                this.setState({
-                                    timeout: window.setTimeout(() => {
-                                        this.fetchUserData(value)
-                                    }, 500)
-                                });
-                            }}
-                            onChange={(value) => {
-                                console.log(value);
-                                this.setState({
-                                    selectedUser: {
-                                        code: value.key,
-                                        name: value.label
-                                    }
-                                });
-                            }}
-                        >
-                            { userData.map((s, i) => {
-                                return <SelectOption key={i} value={s.code}>{s.name}</SelectOption>
-                            }) }
-                        </Select>
-                    </Col>
-                </Row>
-                {/* <Table
-                    columns={columns}
-                    dataSource={dataSource}
-                /> */}
-            </Modal>
-        );
-    }
-}
-
-export default connect(({ present: { user, userGroup } }) => ({ user, userGroup }))(AddGroupMemberBox);

src/components/admin/userGroupManagement.jsx

@@ -6,12 +6,19 @@ import { Layout, Input, Table, Button, Icon, Menu } from 'antd'
 import { connect } from 'dva'
 import './userGroupManagement.less'
 import DetailBox from './userGroupDetailBox'
-import AddMemberBox from './addGroupMemberBox'
+import AddMemberBox from '../common/selectUserBox'
 const { Sider, Content } = Layout
 const { Search } = Input
 
 class UserGroupManagement extends React.Component {
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            visibleAddMemberBox: false
+        }
+    }
+
     componentDidMount() {
         const { dispatch } = this.props;
         dispatch({ type: 'userGroup/fetchList' });
@@ -130,10 +137,26 @@ class UserGroupManagement extends React.Component {
                         size='small'
                     />
                     <div className='addbtn-area'>
-                        {selectedGroup && <Button className='add-btn' onClick={() => {this.showAddMemberBox()}}>
+                        {selectedGroup && <Button className='add-btn' onClick={() => {
+                            this.setState({
+                                visibleAddMemberBox: true
+                            });
+                        }}>
                             <Icon type="plus-circle-o" />添加用户
                         </Button>}
-                        <AddMemberBox />
+                        <AddMemberBox
+                            visibleBox={this.state.visibleAddMemberBox}
+                            title='添加用户组成员'
+                            hideBox={() => {
+                                this.setState({
+                                    visibleAddMemberBox: false
+                                });
+                            }}
+                            multiple={false}
+                            okHandler={(selectedUser) => {
+                                dispatch({ type: 'userGroup/remoteMemberAdd', user: selectedUser, group: selectedGroup });
+                            }}
+                        />
                     </div>
                 </Content>
             </Layout>

src/components/chart/list.jsx

@@ -12,7 +12,7 @@ import 'ant-design-pro/dist/ant-design-pro.css'
 import GroupSelector from '../datasource/groupSelector'
 import Thumbnail from './thumbnail'
 import DistributeBox from './distributeBox';
-import TransferBox from './transferBox'
+import TransferBox from '../common/selectUserBox'
 import DeleteBox from '../common/deleteBox'
 const { Content } = Layout
 const { Search } = Input
@@ -444,15 +444,17 @@ class ChartList extends React.Component {
                     });
                 }} />
                 <TransferBox
-                    visibleTransferBox={visibleTransferBox}
-                    onOk={(user) => {
+                    visibleBox={visibleTransferBox}
+                    title='选择移交对象'
+                    okHandler={(user) => {
                         dispatch({ type: 'chart/transfer', chartCode: this.state.selectedRecord.code, userCode: user.code });
                     }}
                     hideBox={() => {
                         this.setState({
                             visibleTransferBox: false
                         })
-                    }} />
+                    }}
+                />
                 <DeleteBox
                     visibleDeleteBox={visibleDeleteBox}
                     type='chart'

src/components/chart/transferBox.jsx → src/components/common/selectUserBox.jsx

@@ -1,14 +1,18 @@
+/**
+ * 人员选择器
+ */
 import React from 'react'
 import { Modal, Row, Col, Select, Spin } from 'antd'
 import * as service from '../../services/index'
 import URLS from '../../constants/url'
 const SelectOption = Select.Option
 
-class TransferBox extends React.Component {
+class AddGroupMemberBox extends React.Component {
+
     constructor(props) {
         super(props);
         this.state = {
-            selected: null,
+            selectedUser: null,
             userData: [],
             fetching: false
         }
@@ -53,15 +57,16 @@ class TransferBox extends React.Component {
     }
 
     render() {
-        const { visibleTransferBox, hideBox, onOk } = this.props;
+        const { visibleBox, title, hideBox, okHandler, multiple } = this.props;
         const { userData, fetching } = this.state;
 
         return (
-            <Modal 
-                visible={visibleTransferBox}
-                title='选择移交对象'
+            <Modal
+                className='addmember-box'
+                title={title}
+                visible={visibleBox}
                 onOk={() => {
-                    onOk(this.state.selected);
+                    okHandler(this.state.selectedUser);
                     hideBox();
                 }}
                 onCancel={hideBox}
@@ -72,20 +77,11 @@ class TransferBox extends React.Component {
                     <Col span={24}>
                         <Select
                             style={{ width: '100%' }}
-                            // mode='multiple'
+                            mode={ multiple ? 'multiple' : 'sigle'}
                             showSearch
                             filterOption={false}
                             labelInValue={true}
                             notFoundContent={fetching ? <Spin size="small" /> : '无'}
-                            onFocus={(value) => {
-                                const timeout = this.state.timeout;
-                                timeout && window.clearTimeout(timeout);
-                                this.setState({
-                                    timeout: window.setTimeout(() => {
-                                        this.fetchUserData(value)
-                                    }, 500)
-                                });
-                            }}
                             onSearch={(value) => {
                                 const timeout = this.state.timeout;
                                 timeout && window.clearTimeout(timeout);
@@ -95,10 +91,12 @@ class TransferBox extends React.Component {
                                     }, 500)
                                 });
                             }}
+                            onFocus={() => {
+                                this.fetchUserData('');
+                            }}
                             onChange={(value) => {
-                                console.log(value);
                                 this.setState({
-                                    selected: {
+                                    selectedUser: {
                                         code: value.key,
                                         name: value.label
                                     }
@@ -112,8 +110,8 @@ class TransferBox extends React.Component {
                     </Col>
                 </Row>
             </Modal>
-        )
+        );
     }
 }
 
-export default TransferBox
+export default AddGroupMemberBox;

src/components/dashboard/list.jsx

@@ -4,7 +4,7 @@ import { connect } from 'dva'
 import { dateFormat } from '../../utils/baseUtils'
 import Ellipsis from 'ant-design-pro/lib/Ellipsis'
 import DistributeBox from './distributeBox'
-import TransferBox from '../chart/transferBox';
+import TransferBox from '../common/selectUserBox';
 import 'ant-design-pro/dist/ant-design-pro.css'
 import Thumbnail from './thumbnail'
 import './list.less'
@@ -212,7 +212,8 @@ class DashboardList extends React.Component {
                         });
                     }} />
                 <TransferBox
-                    visibleTransferBox={visibleTransferBox}
+                    visibleBox={visibleTransferBox}
+                    title='选择移交对象'
                     onOk={(user) => {
                         dispatch({ type: 'dashboard/transfer', dashboardCode: this.state.selectedRecord.code, userCode: user.code });
                     }}

src/components/datasource/dataSource.jsx

@@ -4,7 +4,7 @@ import { connect } from 'dva'
 import './dataSource.less'
 import { dateFormat } from '../../utils/baseUtils'
 import GroupSelector from './groupSelector'
-import TransferBox from '../chart/transferBox';
+import TransferBox from '../common/selectUserBox';
 import DeleteBox from '../common/deleteBox';
 const { Content } = Layout
 const { Search } = Input
@@ -459,7 +459,8 @@ class DataSource extends React.Component {
                             }}
                         />
                         <TransferBox
-                            visibleTransferBox={visibleTransferBox}
+                            visibleBox={visibleTransferBox}
+                            title='选择移交对象'
                             onOk={(user) => {
                                 dispatch({ type: 'dataSource/transfer', dataSourceCode: this.state.selectedRecord.code, userCode: user.code });
                             }}