feat: 添加项目成员

client/actions/interfaceAction.js

@@ -3,7 +3,8 @@ import {
   LIST_INTERFACE_CLICK,
   PROJECT_MEMBER_INTERFACE,
   DELETE_INTERFACE_DATA,
-  SAVE_INTERFACE_PROJECT_ID
+  SAVE_INTERFACE_PROJECT_ID,
+  GET_INTERFACE_GROUP_LIST
 } from '../constants/action-types.js'
 
 export function fetchInterfaceData (value) {
@@ -38,3 +39,10 @@ export function saveInterfaceProjectId (value) {
     payload: value
   }
 }
+
+export function getInterfaceGroupList (value) {
+  return {
+    type: GET_INTERFACE_GROUP_LIST,
+    payload: value
+  }
+}

client/constants/action-types.js

@@ -5,6 +5,7 @@ export const PROJECT_MEMBER_INTERFACE = 'PROJECT_MEMBER_INTERFACE'
 export const PUSH_INTERFACE_NAME = 'PUSH_INTERFACE_NAME'
 export const DELETE_INTERFACE_DATA = 'DELETE_INTERFACE_DATA'
 export const SAVE_INTERFACE_PROJECT_ID = 'SAVE_INTERFACE_PROJECT_ID'
+export const GET_INTERFACE_GROUP_LIST = 'GET_INTERFACE_GROUP_LIST'
 
 // addInterFace
 export  const FETCH_ADD_INTERFACE_INPUT = 'FETCH_ADD_INTERFACE_INPUT'

client/containers/Interface/Interface.scss

@@ -41,6 +41,16 @@
     }
     .tags {
       margin: 10px 0 0 0;
+      span {
+        border-radius: 4px;
+        padding: 4px 11px;
+        margin: 0 10px 0 0;
+      }
+      .anticon {
+        font-size: 17px;
+        margin: 0 0 0 6px;
+        vertical-align: 3px;
+      }
     }
   }
 }

client/containers/Interface/InterfaceMode/InterfaceMode.js

@@ -1,44 +1,88 @@
 import React, { Component } from 'react'
 import { Modal, Input, Button } from 'antd'
 import PropTypes from 'prop-types'
-// import axios from 'axios'
+import axios from 'axios'
+import { autobind } from 'core-decorators'
 import ModeTag from './ModeTags'
 
-// Tags
-const ModeTags = () => {
-  const list = [1, 2, 3, 4]
-  return (
-    <article className="users">
-      <p>项目成员</p>
-      <div className="tags">
-        {
-          list.map((value, key) => {
-            return <ModeTag key={key} />
-          })
-        }
-      </div>
-    </article>
-  )
-}
-
 class InterfaceMode extends Component {
   static propTypes = {
     modalVisible: PropTypes.bool,
-    closeProjectMember: PropTypes.func
+    closeProjectMember: PropTypes.func,
+    memberList: PropTypes.array
   }
 
   constructor(props) {
     super(props)
+    this.state = {
+      memberList: [],
+      userName: ''
+    }
   }
 
   componentDidMount () {
-    // axios.get({
-    //   url: '',
-    //   params: {}
-    // })
-    // .then(() => {
+    this.getMemberList()
+  }
 
-    // })
+  @autobind
+  getMemberList () {
+    const params = {
+      id: this.getInterfaceId()
+    }
+    axios.get('/project/get_member_list', { params })
+      .then(data => {
+        console.log(data)
+        this.setState({
+          'memberList': data.data.data
+        })
+      })
+      .catch(err => {
+        console.log(err)
+      })
+  }
+
+  @autobind
+  closeMember (id) {
+    const params = {
+      member_uid: id,
+      id: this.getInterfaceId()
+    }
+
+    axios.post('/project/del_member', params)
+      .then(() => {
+        this.getMemberList()
+      })
+      .catch(err => {
+        console.log(err)
+      })
+  }
+
+  @autobind
+  addNewUser () {
+    const { userName } = this.state
+    const params = { q: userName}
+    axios.get('/user/search', { params })
+      .then(data => {
+        const member_uid = data.data.data[0].uid
+        const params = {id: this.getInterfaceId(), member_uid}
+        axios.post('/project/add_member', params)
+          .then( () => {
+            this.getMemberList()
+          })
+          .catch (err => {
+            console.log(err)
+          })
+      })
+      .catch (err => {
+        console.log(err)
+      })
+  }
+
+  @autobind
+  injectValue (e) {
+    this.setState({
+      userName: e.target.value
+    })
   }
 
   handleOk (closeProjectMember) {
@@ -49,10 +93,18 @@ class InterfaceMode extends Component {
     closeProjectMember()
   }
 
+  getInterfaceId () {
+    const reg = /Interface\/(\d+)/g
+    const url = location.href
+    url.match(reg)
+    return RegExp.$1
+  }
+
   render() {
     const { modalVisible, closeProjectMember } = this.props
     const handleOk = this.handleOk.bind(this, closeProjectMember)
     const handleCancel = this.handleCancel.bind(this, closeProjectMember)
+    const { memberList } = this.state
 
     return (
       <Modal
@@ -63,11 +115,19 @@ class InterfaceMode extends Component {
         className="interface-mode-box"
       >
         <div className="add-user">
-          <Input placeholder="Basic usage" size="large" />
-          <Button>添加新成员</Button>          
+          <Input placeholder="Basic usage" size="large" onBlur={this.injectValue} />
+          <Button onClick={this.addNewUser}>添 加</Button>          
         </div>
-        
-        <ModeTags />
+        <article className="users">
+          <p>项目成员</p>
+          <div className="tags">
+            {
+              memberList.map((value, key) => {
+                return <ModeTag key={key} value={value} closeMember={this.closeMember} getMemberList={this.getMemberList} />
+              })
+            }
+          </div>
+        </article>
       </Modal>
     )
   }

client/containers/Interface/InterfaceMode/ModeTags.js

@@ -1,25 +1,33 @@
 import React, { Component } from 'react'
-import { Tag } from 'antd'
-// import PropTypes from 'prop-types'
+import { autobind } from 'core-decorators'
+import PropTypes from 'prop-types'
+import { Icon } from 'antd'
 
 class ModeTags extends Component {
-  // static propTypes = {
-  //   closeProjectMember: PropTypes.func,
-  // }
+  static propTypes = {
+    value: PropTypes.object,
+    _id: PropTypes.number,
+    closeMember: PropTypes.func
+  }
 
   constructor(props) {
     super(props)
   }
 
+  @autobind
   closeTags () {
-
+    const { closeMember, value: { _id } } = this.props
+    closeMember(_id)
   }
 
   render() {
-    // const { userName } = this.props
-
+    const { value: { username='', _id } } = this.props
+    console.log(this.props, _id, username)
     return (
-      <Tag closable onClose={this.closeTags}>小花</Tag>
+      <span onClick={this.closeTags}>
+        {username}
+        <Icon className="dynamic-delete-button" type="minus-circle-o" />
+      </span>
     )
   }
 }

client/reducer/Interface/InterfaceReducer.js

@@ -3,14 +3,16 @@ import {
   LIST_INTERFACE_CLICK,
   PROJECT_MEMBER_INTERFACE,
   DELETE_INTERFACE_DATA,
-  SAVE_INTERFACE_PROJECT_ID
+  SAVE_INTERFACE_PROJECT_ID,
+  GET_INTERFACE_GROUP_LIST
 } from '../../constants/action-types.js'
 
 const initialState = {
   interfaceData: [],
   modalVisible: false,
   interfaceName: '',
-  projectId: ''
+  projectId: '',
+  memberList: []
 }
 
 export default (state = initialState, action) => {
@@ -40,6 +42,11 @@ export default (state = initialState, action) => {
         ...state,
         projectId: action.payload
       }
+    case GET_INTERFACE_GROUP_LIST:
+      return {
+        ...state,
+        projectId: action.payload
+      }
     default:
       return state
   }

client/reducer/interface/InterfaceReducer.js

@@ -3,14 +3,16 @@ import {
   LIST_INTERFACE_CLICK,
   PROJECT_MEMBER_INTERFACE,
   DELETE_INTERFACE_DATA,
-  SAVE_INTERFACE_PROJECT_ID
+  SAVE_INTERFACE_PROJECT_ID,
+  GET_INTERFACE_GROUP_LIST
 } from '../../constants/action-types.js'
 
 const initialState = {
   interfaceData: [],
   modalVisible: false,
   interfaceName: '',
-  projectId: ''
+  projectId: '',
+  memberList: []
 }
 
 export default (state = initialState, action) => {
@@ -40,6 +42,11 @@ export default (state = initialState, action) => {
         ...state,
         projectId: action.payload
       }
+    case GET_INTERFACE_GROUP_LIST:
+      return {
+        ...state,
+        projectId: action.payload
+      }
     default:
       return state
   }