feat: 增加项目成员批量导入

CHANGELOG.md

@@ -1,3 +1,9 @@
+### v1.3.6
+
+#### Feature
+
+* 增加项目成员批量导入
+
 ### v1.3.5
 
 #### Feature

client/containers/Project/Setting/ProjectMember/ProjectMember.js

@@ -6,7 +6,7 @@ import { fetchGroupMsg } from '../../../../reducer/modules/group';
 import { connect } from 'react-redux';
 import ErrMsg from '../../../../components/ErrMsg/ErrMsg.js';
 import { fetchGroupMemberList } from '../../../../reducer/modules/group.js';
-import { getProjectMemberList, getProject, addMember, delMember, changeMemberRole } from '../../../../reducer/modules/project.js';
+import { fetchProjectList, getProjectMemberList, getProject, addMember, delMember, changeMemberRole } from '../../../../reducer/modules/project.js';
 import UsernameAutoComplete from '../../../../components/UsernameAutoComplete/UsernameAutoComplete.js';
 import '../Setting.scss';
 
@@ -25,7 +25,8 @@ const arrayAddKey = (arr) => {
   state => {
     return {
       projectMsg: state.project.currProject,
-      uid: state.user.uid
+      uid: state.user.uid,
+      projectList: state.project.projectList
     }
   },
   {
@@ -35,7 +36,8 @@ const arrayAddKey = (arr) => {
     delMember,
     fetchGroupMsg,
     changeMemberRole,
-    getProject
+    getProject,
+    fetchProjectList
   }
 )
 class ProjectMember extends Component {
@@ -49,7 +51,9 @@ class ProjectMember extends Component {
       visible: false,
       dataSource: [],
       inputUids: [],
-      inputRole: 'dev'
+      inputRole: 'dev',
+      modalVisible: false,
+      selectProjectId: 0
     }
   }
   static propTypes = {
@@ -63,32 +67,45 @@ class ProjectMember extends Component {
     getProject: PropTypes.func,
     fetchGroupMemberList: PropTypes.func,
     fetchGroupMsg: PropTypes.func,
-    getProjectMemberList: PropTypes.func
+    getProjectMemberList: PropTypes.func,
+    fetchProjectList: PropTypes.func,
+    projectList: PropTypes.array
   }
-  @autobind
-  showAddMemberModal() {
+
+  showAddMemberModal = () => {
     this.setState({
       visible: true
     });
   }
 
+  showImportMemberModal = async () => {
+    await this.props.fetchProjectList(this.props.projectMsg.group_id)
+    this.setState({
+      modalVisible: true
+    });
+  }
+
   // 重新获取列表
-  @autobind
-  reFetchList() {
+
+  reFetchList = () => {
     this.props.getProjectMemberList(this.props.match.params.id).then((res) => {
       this.setState({
         projectMemberList: arrayAddKey(res.payload.data.data),
-        visible: false
+        visible: false,
+        modalVisible: false
       });
     });
   }
 
+  handleOk =()=>{
+     this.addMembers(this.state.inputUids)
+  }
+
   // 增 - 添加成员
-  @autobind
-  handleOk() {
+  addMembers = (memberUids) => {
     this.props.addMember({
       id: this.props.match.params.id,
-      member_uids: this.state.inputUids,
+      member_uids: memberUids,
       role: this.state.inputRole
     }).then((res) => {
       if (!res.payload.data.errcode) {
@@ -105,8 +122,7 @@ class ProjectMember extends Component {
     });
   }
   // 添加成员时 选择新增成员权限
-  @autobind
-  changeNewMemberRole(value) {
+  changeNewMemberRole = (value) => {
     this.setState({
       inputRole: value
     });
@@ -127,8 +143,7 @@ class ProjectMember extends Component {
   }
 
   // 改 - 修改成员权限
-  @autobind
-  changeUserRole(e) {
+  changeUserRole = (e) => {
     const id = this.props.match.params.id;
     const role = e.split('-')[0];
     const member_uid = e.split('-')[1];
@@ -141,26 +156,46 @@ class ProjectMember extends Component {
   }
 
   // 关闭模态框
-  @autobind
-  handleCancel() {
+  handleCancel = () => {
     this.setState({
       visible: false
     });
   }
+  // 关闭批量导入模态框
+  handleModalCancel = () => {
+    this.setState({
+      modalVisible: false
+    });
+  }
 
-  @autobind
-  onUserSelect(uids) {
+  // 处理选择项目
+  handleChange = (key) => {
+    this.setState({
+      selectProjectId: key
+    })
+  }
+
+  // 确定批量导入模态框
+  handleModalOk =async () => {
+    // 获取项目中的成员列表
+    const menberList = await this.props.getProjectMemberList(this.state.selectProjectId);
+    const memberUidList = menberList.payload.data.data.map(item =>{
+      return item.uid
+    })
+   this.addMembers(memberUidList)
+  }
+
+
+  onUserSelect = (uids) => {
     this.setState({
       inputUids: uids
     })
   }
 
   async componentWillMount() {
-    // console.log('projectMsg', this.props.projectMsg)
-    // await this.props.getProject(this.props.match.params.id)
+    
     const groupMemberList = await this.props.fetchGroupMemberList(this.props.projectMsg.group_id);
     const groupMsg = await this.props.fetchGroupMsg(this.props.projectMsg.group_id);
-    // const rojectMsg = await this.props.getProjectMsg(this.props.match.params.id);
     const projectMemberList = await this.props.getProjectMemberList(this.props.match.params.id);
     this.setState({
       groupMemberList: groupMemberList.payload.data.data,
@@ -182,7 +217,11 @@ class ProjectMember 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.showAddMemberModal}>添加成员</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>
+          <Button className="btn" icon="plus" onClick={this.showImportMemberModal}>批量导入成员</Button>
+        </div> : '',
       key: 'action',
       className: 'member-opration',
       render: (text, record) => {
@@ -213,6 +252,11 @@ class ProjectMember extends Component {
         }
       }
     }];
+    // 获取当前分组下的所有项目名称
+    const children = this.props.projectList.map((item, index) => (
+      <Option key={index} value={'' + item._id}>{item.name}</Option>
+    ))
+
     return (
       <div className="g-row">
         <div className="m-panel">
@@ -223,13 +267,13 @@ class ProjectMember extends Component {
             onCancel={this.handleCancel}
           >
             <Row gutter={6} className="modal-input">
-              <Col span="5"><div className="label">用户名: </div></Col>
+              <Col span="5"><div className="label usernamelabel">用户名: </div></Col>
               <Col span="15">
                 <UsernameAutoComplete callbackState={this.onUserSelect} />
               </Col>
             </Row>
             <Row gutter={6} className="modal-input">
-              <Col span="5"><div className="label">权限: </div></Col>
+              <Col span="5"><div className="label usernameauth">权限: </div></Col>
               <Col span="15">
                 <Select size="large" defaultValue="dev" className="select" onChange={this.changeNewMemberRole}>
                   <Option value="owner">组长</Option>
@@ -239,6 +283,28 @@ class ProjectMember extends Component {
               </Col>
             </Row>
           </Modal> : ""}
+          <Modal
+            title="批量导入成员"
+            visible={this.state.modalVisible}
+            onOk={this.handleModalOk}
+            onCancel={this.handleModalCancel}
+          >
+            <Row gutter={6} className="modal-input">
+              <Col span="5"><div className="label usernamelabel">项目名: </div></Col>
+              <Col span="15">
+                <Select
+                  showSearch
+                  style={{ width: 200 }}
+                  placeholder="请选择项目名称"
+                  optionFilterProp="children"
+                  onChange={this.handleChange}
+                >
+                  {children}
+                </Select>
+              </Col>
+            </Row>
+          </Modal>
+
           <Table columns={columns} dataSource={this.state.projectMemberList} pagination={false} locale={{ emptyText: <ErrMsg type="noMemberInProject" /> }} className="setting-project-member" />
           <Card bordered={false} title={this.state.groupName + ' 分组成员 ' + '(' + this.state.groupMemberList.length + ') 人'} noHovering className="setting-group">
             {this.state.groupMemberList.length ? this.state.groupMemberList.map((item, index) => {

client/containers/Project/Setting/Setting.scss

@@ -25,10 +25,11 @@
   }
 }
 
-// .setting-project-member {
-//   border: 1px solid #e9e9e9;
-//   border-radius: 4px;
-// }
+.setting-project-member {
+  .btn{
+    margin-left: 8px;
+  }
+}
 
 .setting-group {
   margin-top: .48rem;