From 61cbda430ea91eee77dd8df5bc38a7ddf732f3c0 Mon Sep 17 00:00:00 2001
From: "wenbo.dong" <wenbo.dong@qunar.com>
Date: Wed, 16 Aug 2017 20:31:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B9=E7=9B=AE=E6=88=90=E5=91=98?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../UsernameAutoComplete.js                   |  2 +-
 .../containers/Group/MemberList/MemberList.js | 55 +++++++++++++------
 client/reducer/modules/group.js               | 13 ++++-
 3 files changed, 51 insertions(+), 19 deletions(-)

diff --git a/client/components/UsernameAutoComplete/UsernameAutoComplete.js b/client/components/UsernameAutoComplete/UsernameAutoComplete.js
index 40b07a22..55aef157 100644
--- a/client/components/UsernameAutoComplete/UsernameAutoComplete.js
+++ b/client/components/UsernameAutoComplete/UsernameAutoComplete.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { AutoComplete } from 'antd';
-import axios from 'axios'
+import axios from 'axios';
 
 class UsernameAutoComplete extends Component {
   constructor(props) {
diff --git a/client/containers/Group/MemberList/MemberList.js b/client/containers/Group/MemberList/MemberList.js
index cafafb3d..5668128c 100644
--- a/client/containers/Group/MemberList/MemberList.js
+++ b/client/containers/Group/MemberList/MemberList.js
@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import { Table } from 'antd';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Select, Button, Modal, Row, Col, message } from 'antd';
+import { Select, Button, Modal, Row, Col, message, Popconfirm } from 'antd';
 import './MemberList.scss';
 import { autobind } from 'core-decorators';
-import { fetchGroupMemberList, fetchGroupMsg, addMember } from '../../../reducer/modules/group.js'
+import { fetchGroupMemberList, fetchGroupMsg, addMember, delMember } from '../../../reducer/modules/group.js'
 import UsernameAutoComplete from '../../../components/UsernameAutoComplete/UsernameAutoComplete.js';
 const Option = Select.Option;
 
@@ -29,7 +29,8 @@ const arrayAddKey = (arr) => {
   {
     fetchGroupMemberList,
     fetchGroupMsg,
-    addMember
+    addMember,
+    delMember
   }
 )
 class MemberList extends Component {
@@ -50,6 +51,7 @@ class MemberList extends Component {
     fetchGroupMemberList: PropTypes.func,
     fetchGroupMsg: PropTypes.func,
     addMember: PropTypes.func,
+    delMember: PropTypes.func,
     role: PropTypes.string
   }
 
@@ -58,12 +60,36 @@ class MemberList extends Component {
     console.log(`selected ${value}`);
   }
 
-  showModal = () => {
+  @autobind
+  showAddMemberModal() {
     this.setState({
       visible: true
     });
   }
 
+  @autobind
+  reFetchList() {
+    this.props.fetchGroupMemberList(this.props.currGroup._id).then((res) => {
+      this.setState({
+        userInfo: arrayAddKey(res.payload.data.data),
+        visible: false
+      });
+    });
+  }
+
+  @autobind
+  deleteConfirm(member_uid) {
+    return () => {
+      const id = this.props.currGroup._id;
+      this.props.delMember({ id, member_uid }).then((res) => {
+        if (!res.payload.data.errcode) {
+          message.success(res.payload.data.errmsg);
+          this.reFetchList(); // 添加成功后重新获取分组成员列表
+        }
+      });
+    }
+  }
+
   @autobind
   handleOk() {
     console.log(this.props.currGroup._id, this.state.inputUid);
@@ -74,13 +100,7 @@ class MemberList extends Component {
       console.log(res);
       if (!res.payload.data.errcode) {
         message.success('添加成功!');
-        // 添加成功后重新获取分组成员列表
-        this.props.fetchGroupMemberList(this.props.currGroup._id).then((res) => {
-          this.setState({
-            userInfo: arrayAddKey(res.payload.data.data),
-            visible: false
-          });
-        });
+        this.reFetchList(); // 添加成功后重新获取分组成员列表
       }
     });
   }
@@ -94,8 +114,10 @@ class MemberList extends Component {
   }
 
   @autobind
-  changeMemberRole(e) {
-    console.log(e);
+  changeMemberRole(value) {
+    return () => {
+      console.log(this.props.currGroup._id, value);
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -136,7 +158,6 @@ class MemberList extends Component {
   }
 
   render() {
-    console.log(this.state);
     const columns = [{
       title: this.props.currGroup.group_name + ' 分组成员 ('+this.state.userInfo.length + ') 人',
       dataIndex: 'username',
@@ -148,7 +169,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> : '',
+      title: (this.state.role === 'owner' || this.state.role === 'admin') ? <div className="btn-container"><Button className="btn" type="primary" icon="plus" onClick={this.showAddMemberModal}>添加成员</Button></div> : '',
       key: 'action',
       className: 'member-opration',
       render: (text, record) => {
@@ -159,7 +180,9 @@ class MemberList extends Component {
                 <Option value="owner">组长</Option>
                 <Option value="dev">开发者</Option>
               </Select>
-              <Button type="danger" icon="minus" className="btn-danger" />
+              <Popconfirm placement="topRight" title="你确定要删除吗? " onConfirm={this.deleteConfirm(record.uid)} okText="确定" cancelText="">
+                <Button type="danger" icon="minus" className="btn-danger" />
+              </Popconfirm>
             </div>
           )
         } else {
diff --git a/client/reducer/modules/group.js b/client/reducer/modules/group.js
index db83a95c..c6562629 100644
--- a/client/reducer/modules/group.js
+++ b/client/reducer/modules/group.js
@@ -5,7 +5,8 @@ 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';
+const ADD_GROUP_MEMBER = 'yapi/group/ADD_GROUP_MEMBER';
+const DEL_GROUP_MEMBER = 'yapi/group/DEL_GROUP_MEMBER';
 
 // Reducer
 const initialState = {
@@ -60,11 +61,19 @@ export function fetchGroupMsg(id) {
 // 添加项目分组成员
 export function addMember(param) {
   return {
-    type: ADD_FROUP_MEMBER,
+    type: ADD_GROUP_MEMBER,
     payload: axios.post('/api/group/add_member', param)
   }
 }
 
+// 删除项目分组成员
+export function delMember(param) {
+  return {
+    type: DEL_GROUP_MEMBER,
+    payload: axios.post('/api/group/del_member', param)
+  }
+}
+
 // 获取分组成员列表
 export function fetchGroupMemberList(id) {
   return {