feat: 添加项目成员

client/containers/Group/MemberList/MemberList.js

@@ -2,10 +2,11 @@ import React, { Component } from 'react';
 import { Table } from 'antd';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Select, Button } from 'antd';
+import { Select, Button, Modal, Row, Col, AutoComplete, message } from 'antd';
 import './MemberList.scss'
+import axios from 'axios'
 import { autobind } from 'core-decorators';
-import { fetchGroupMemberList, fetchGroupMsg } from '../../../reducer/modules/group.js'
+import { fetchGroupMemberList, fetchGroupMsg, addMember } from '../../../reducer/modules/group.js'
 const Option = Select.Option;
 
 @connect(
@@ -18,7 +19,8 @@ const Option = Select.Option;
   },
   {
     fetchGroupMemberList,
-    fetchGroupMsg
+    fetchGroupMsg,
+    addMember
   }
 )
 class MemberList extends Component {
@@ -26,7 +28,11 @@ class MemberList extends Component {
     super(props);
     this.state = {
       userInfo: [],
-      role: ''
+      role: '',
+      visible: false,
+      dataSource: [],
+      inputUid: 0,
+      inputRole: 'dev'
     }
   }
   static propTypes = {
@@ -34,6 +40,7 @@ class MemberList extends Component {
     uid: PropTypes.number,
     fetchGroupMemberList: PropTypes.func,
     fetchGroupMsg: PropTypes.func,
+    addMember: PropTypes.func,
     role: PropTypes.string
   }
 
@@ -42,6 +49,81 @@ class MemberList extends Component {
     console.log(`selected ${value}`);
   }
 
+  showModal = () => {
+    this.setState({
+      visible: true
+    });
+  }
+
+  @autobind
+  handleOk() {
+    console.log(this.props.currGroup._id, this.state.inputUid);
+    this.props.addMember({
+      id: this.props.currGroup._id,
+      member_uid: this.state.inputUid
+    }).then((res) => {
+      console.log(res);
+      if (!res.payload.data.errcode) {
+        message.success('添加成功!');
+        // 添加成功后重新获取分组成员列表
+        this.props.fetchGroupMemberList(this.props.currGroup._id).then((res) => {
+          this.setState({
+            userInfo: res.payload.data.data,
+            visible: false
+          });
+        });
+      }
+    });
+  }
+
+  @autobind
+  handleCancel() {
+    // 取消模态框的时候重置模态框中的值
+    this.setState({
+      visible: false
+    });
+  }
+
+  @autobind
+  onSelect (userName) {
+    this.state.dataSource.forEach((item) => {
+      if (item.username === userName) {
+        this.setState({
+          inputUid: item.id
+        });
+      }
+    });
+  }
+
+  @autobind
+  changeMemberRole(e) {
+    console.log(e);
+  }
+
+  @autobind
+  handleSearch (value) {
+    this.setState({
+      userName: value
+    })
+    const params = { q: value}
+
+    axios.get('/api/user/search', { params })
+      .then(data => {
+        const userList = []
+        data = data.data.data
+        if (data) {
+          data.forEach( v => userList.push({
+            username: v.username,
+            id: v.uid
+          }));
+          console.log(userList);
+          this.setState({
+            dataSource: userList
+          })
+        }
+      })
+  }
+
   componentWillReceiveProps(nextProps) {
     if (this.props.currGroup !== nextProps.currGroup) {
       this.props.fetchGroupMemberList(nextProps.currGroup._id).then((res) => {
@@ -72,7 +154,6 @@ class MemberList extends Component {
   }
 
   render() {
-    console.log(this.state);
     const columns = [{
       title: this.props.currGroup.group_name + ' 分组成员 ('+this.state.userInfo.length + ') 人',
       dataIndex: 'username',
@@ -84,6 +165,7 @@ class MemberList extends Component {
         </div>);
       }
     }, {
+      title: (this.state.role === 'owner' || this.state.role === 'admin') ? <div className="btn-container"><Button className="btn" type="primary" icon="plus" onClick={this.showModal}>添加成员</Button></div> : '',
       key: 'action',
       className: 'member-opration',
       render: (text, record) => {
@@ -102,8 +184,39 @@ class MemberList extends Component {
         }
       }
     }];
+    console.log(this.state.dataSource);
     return (
       <div className="m-panel">
+        <Modal
+          title="添加成员"
+          visible={this.state.visible}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+          >
+          <Row gutter={6} className="modal-input">
+            <Col span="5"><div className="label">用户名: </div></Col>
+            <Col span="15">
+              <AutoComplete
+                defaultValue={[]}
+                dataSource={this.state.dataSource.map(i => i.username)}
+                style={{ width: 350 }}
+                onSelect={this.onSelect}
+                onSearch={this.handleSearch}
+                placeholder="请输入用户名"
+                size="large"
+              />
+            </Col>
+          </Row>
+          <Row gutter={6} className="modal-input">
+            <Col span="5"><div className="label">权限: </div></Col>
+            <Col span="15">
+              <Select size="large" defaultValue="dev" className="select" onChange={this.changeMemberRole}>
+                <Option value="owner">组长</Option>
+                <Option value="dev">开发者</Option>
+              </Select>
+            </Col>
+          </Row>
+        </Modal>
         <Table columns={columns} dataSource={this.state.userInfo} pagination={false} />
       </div>
     );

client/containers/Group/MemberList/MemberList.scss

@@ -6,6 +6,23 @@
   min-height: 5rem;
   margin-top: 0;
 }
+
+.btn-container {
+  text-align: right;
+}
+
+.modal-input {
+  display: flex;
+  align-items: center;
+  margin-bottom: .24rem;
+  .label {
+    text-align: right;
+  }
+  .select {
+    width: 1.2rem;
+  }
+}
+
 .member-opration {
   text-align: right;
   .select {

client/reducer/modules/group.js

@@ -5,6 +5,7 @@ const FETCH_GROUP_LIST = 'yapi/group/FETCH_GROUP_LIST';
 const SET_CURR_GROUP = 'yapi/group/SET_CURR_GROUP';
 const FETCH_GROUP_MEMBER = 'yapi/group/FETCH_GROUP_MEMBER';
 const FETCH_GROUP_MSG = 'yapi/group/FETCH_GROUP_MSG';
+const ADD_FROUP_MEMBER = 'yapi/group/ADD_FROUP_MEMBER';
 
 // Reducer
 const initialState = {
@@ -35,7 +36,6 @@ export default (state = initialState, action) => {
       };
     }
     case FETCH_GROUP_MSG: {
-      console.log(action.payload.data.data.role);
       return {
         ...state,
         role: action.payload.data.data.role
@@ -57,6 +57,14 @@ export function fetchGroupMsg(id) {
   }
 }
 
+// 添加项目分组成员
+export function addMember(param) {
+  return {
+    type: ADD_FROUP_MEMBER,
+    payload: axios.post('/api/group/add_member', param)
+  }
+}
+
 // 获取分组成员列表
 export function fetchGroupMemberList(id) {
   return {