From 2f979a0e9835caebd79c3d6b2ea0b58b9b161ead Mon Sep 17 00:00:00 2001 From: "wenbo.dong" Date: Fri, 18 Aug 2017 17:08:37 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B9=E7=9B=AEsetting=E6=88=90?= =?UTF-8?q?=E5=91=98=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../containers/Group/MemberList/MemberList.js | 3 +- .../Setting/ProjectMember/ProjectMember.js | 192 +++++++++++++++++- client/reducer/modules/project.js | 38 ++++ server/controllers/project.js | 15 +- server/models/project.js | 2 +- server/router.js | 7 +- server_dist/controllers/project.js | 100 ++++----- server_dist/models/project.js | 2 +- server_dist/router.js | 4 + 9 files changed, 292 insertions(+), 71 deletions(-) diff --git a/client/containers/Group/MemberList/MemberList.js b/client/containers/Group/MemberList/MemberList.js index 33ce2cb4..360ef460 100644 --- a/client/containers/Group/MemberList/MemberList.js +++ b/client/containers/Group/MemberList/MemberList.js @@ -1,8 +1,7 @@ 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, Popconfirm } from 'antd'; +import { Table, Select, Button, Modal, Row, Col, message, Popconfirm } from 'antd'; import './MemberList.scss'; import { autobind } from 'core-decorators'; import { fetchGroupMemberList, fetchGroupMsg, addMember, delMember, changeMemberRole } from '../../../reducer/modules/group.js' diff --git a/client/containers/Project/Setting/ProjectMember/ProjectMember.js b/client/containers/Project/Setting/ProjectMember/ProjectMember.js index a1ed1ed7..2e48feb7 100644 --- a/client/containers/Project/Setting/ProjectMember/ProjectMember.js +++ b/client/containers/Project/Setting/ProjectMember/ProjectMember.js @@ -1,10 +1,24 @@ import React, { Component } from 'react' -import { Card, Badge } from 'antd'; +import { Table, Card, Badge, Select, Button, Modal, Row, Col, message, Popconfirm } from 'antd'; import PropTypes from 'prop-types'; +import { autobind } from 'core-decorators'; import { connect } from 'react-redux'; import { fetchGroupMemberList } from '../../../../reducer/modules/group.js'; +import { getProjectMsg, getProjectMemberList, addMember, delMember, changeMemberRole } from '../../../../reducer/modules/project.js'; +import UsernameAutoComplete from '../../../../components/UsernameAutoComplete/UsernameAutoComplete.js'; import '../Setting.scss'; +const Option = Select.Option; + +const arrayAddKey = (arr) => { + return arr.map((item, index) => { + return { + ...item, + key: index + } + }); +} + @connect( state => { return { @@ -13,7 +27,12 @@ import '../Setting.scss'; } }, { - fetchGroupMemberList + fetchGroupMemberList, + getProjectMsg, + getProjectMemberList, + addMember, + delMember, + changeMemberRole } ) class ProjectMember extends Component { @@ -21,31 +40,186 @@ class ProjectMember extends Component { super(props); this.state = { groupMemberList: [], - groupName: '' + projectMemberList: [], + groupName: '', + role: '', + visible: false, + dataSource: [], + inputUid: 0, + inputRole: 'dev' } } static propTypes = { + projectId: PropTypes.number, projectMsg: PropTypes.object, uid: PropTypes.number, - fetchGroupMemberList: PropTypes.func + addMember: PropTypes.func, + delMember: PropTypes.func, + changeMemberRole: PropTypes.func, + fetchGroupMemberList: PropTypes.func, + getProjectMsg: PropTypes.func, + getProjectMemberList: PropTypes.func } + @autobind + showAddMemberModal() { + this.setState({ + visible: true + }); + } + + // 重新获取列表 + @autobind + reFetchList() { + this.props.getProjectMemberList(this.props.projectId).then((res) => { + this.setState({ + projectMemberList: arrayAddKey(res.payload.data.data), + visible: false + }); + }); + } + + // 增 - 添加成员 + @autobind + handleOk() { + console.log(this.props.projectId, this.state.inputUid); + this.props.addMember({ + id: this.props.projectId, + member_uid: this.state.inputUid + }).then((res) => { + console.log(res); + if (!res.payload.data.errcode) { + message.success('添加成功!'); + this.reFetchList(); // 添加成功后重新获取分组成员列表 + } + }); + } + // 添加成员时 选择新增成员权限 + @autobind + changeNewMemberRole(value) { + return () => { + console.log(this.props.projectId, value); + } + } + + // 删 - 删除分组成员 + @autobind + deleteConfirm(member_uid) { + return () => { + const id = this.props.projectId; + this.props.delMember({ id, member_uid }).then((res) => { + if (!res.payload.data.errcode) { + message.success(res.payload.data.errmsg); + this.reFetchList(); // 添加成功后重新获取分组成员列表 + } + }); + } + } + + // 改 - 修改成员权限 + @autobind + changeUserRole(e) { + console.log(e); + const id = this.props.projectId; + const role = e.split('-')[0]; + const member_uid = e.split('-')[1]; + this.props.changeMemberRole({ id, member_uid, role }).then((res) => { + if (!res.payload.data.errcode) { + message.success(res.payload.data.errmsg); + this.reFetchList(); // 添加成功后重新获取分组成员列表 + } + }); + } + + // 关闭模态框 + @autobind + handleCancel() { + this.setState({ + visible: false + }); + } + + @autobind + onUserSelect(childState) { + console.log(childState); + this.setState({ + inputUid: childState.uid + }) + } + async componentWillMount() { const groupMemberList = await this.props.fetchGroupMemberList(this.props.projectMsg.group_id); - console.log(groupMemberList); + const rojectMsg = await this.props.getProjectMsg(this.props.projectId); + const projectMemberList = await this.props.getProjectMemberList(this.props.projectId); this.setState({ groupMemberList: groupMemberList.payload.data.data, - groupName: this.props.projectMsg.group_name + groupName: this.props.projectMsg.group_name, + projectMemberList: arrayAddKey(projectMemberList.payload.data.data), + role: rojectMsg.payload.data.data.role }) } render () { console.log(this.props); + console.log(this.state); + const columns = [{ + title: ' 项目成员 ('+this.state.projectMemberList.length + ') 人', + dataIndex: 'username', + key: 'username', + render: (text, record) => { + return (
+
: '', + key: 'action', + className: 'member-opration', + render: (text, record) => { + if (this.state.role === 'owner' || this.state.role === 'admin') { + return ( +
+ + +
+ ) + } else { + return ''; + } + } + }]; return (
- + + +
用户名:
+ + + + + +
权限:
+ + + + + + + {this.state.groupMemberList.map((item, index) => { - console.log(this.props.uid); - console.log(item); return (