管理项目成员模块

client/ReduxContainer.js

@@ -1,6 +1,6 @@
 import LoginRedux from './reducer/Login/Login_redux.js'
 import group from './reducer/group/group.js'
-import Interface from './reducer/Interface/Interface.js'
+import Interface from './reducer/Interface/InterfaceReducer.js'
 
 export default {
   group,

client/actions/interfaceAction.js

@@ -1,8 +1,10 @@
 import {
   FETCH_INTERFACE_DATA,
-} from '../constants/action-types.js';
+  LIST_INTERFACE_CLICK,
+  PROJECT_MEMBER_INTERFACE,
+} from '../constants/action-types.js'
 
-export function fetchAuditIcons () {
+export function fetchInterfaceData () {
   const data = [{
     key: '1',
     name: 'John Brown',
@@ -31,3 +33,15 @@ export function fetchAuditIcons () {
     payload: data,
   };
 }
+
+export function projectMember () {
+  return {
+    type: LIST_INTERFACE_CLICK
+  }
+}
+
+export function closeProjectMember () {
+  return {
+    type: PROJECT_MEMBER_INTERFACE,
+  }
+}

client/constants/action-types.js

@@ -1,5 +1,7 @@
 // Interface
-export const FETCH_INTERFACE_DATA = 'FETCH_INTERFACE_DATA';
+export const FETCH_INTERFACE_DATA = 'FETCH_INTERFACE_DATA'
+export const LIST_INTERFACE_CLICK = 'LIST_INTERFACE_CLICK'
+export const PROJECT_MEMBER_INTERFACE = 'PROJECT_MEMBER_INTERFACE'
 
 // group
 export const FETCH_GROUP_LIST = 'FETCH_GROUP_LIST'

client/containers/Interface/Interface.js

@@ -4,22 +4,35 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import InterfaceList from './InterfaceList/InterfaceList.js'
 import InterfaceTable from './InterfaceTable/InterfaceTable.js'
-import { fetchAuditIcons } from '../../actions/interface.js'
+import InterfaceMode from './InterfaceMode/InterfaceMode.js'
+import { 
+  fetchInterfaceData, 
+  projectMember,
+  closeProjectMember,
+} from '../../actions/interfaceAction.js'
 
 @connect(
   state => {
     return {
-      interfaceData: state.data,
+      interfaceData: state.Interface.interfaceData,
+      modalVisible: state.Interface.modalVisible,
+      closeProjectMember: state.Interface.closeProjectMember,
     }
   },
   {
-    fetchAuditIcons,
+    fetchInterfaceData,
+    projectMember,
+    closeProjectMember,
   }
 )
-//
+
 class Interface extends Component {
   static propTypes = {
-    fetchAuditIcons: PropTypes.func,
+    fetchInterfaceData: PropTypes.func,
+    interfaceData: PropTypes.array,
+    projectMember: PropTypes.func,
+    closeProjectMember: PropTypes.func,
+    modalVisible: PropTypes.bool,
   }
 
   constructor(props) {
@@ -27,16 +40,17 @@ class Interface extends Component {
   }
 
   componentWillMount () {
-    this.props.fetchAuditIcons()
+    this.props.fetchInterfaceData()
   }
 
   render () {
-    const data = this.props.fetchAuditIcons().payload
+    const { interfaceData, projectMember, modalVisible } = this.props
 
     return (
       <section className="interface-box">
-        <InterfaceList />
-        <InterfaceTable data={data} />
+        <InterfaceList projectMember={projectMember} />
+        <InterfaceMode modalVisible={modalVisible} closeProjectMember={this.props.closeProjectMember} />
+        <InterfaceTable data={interfaceData} />
       </section>
     )
   }

client/containers/Interface/Interface.scss

@@ -37,3 +37,30 @@
     }
   }
 }
+
+/* .interface-mode-box.css 管理项目成员弹层 */
+.interface-mode-box {
+  .add-user {
+    display: -webkit-box;
+    .ant-input {
+      width: 70%;
+      display: block;
+    }
+    .ant-btn {
+      margin: 0 0 0 15px;
+      height: 32px;
+    }
+  }
+
+  .users {
+    margin: 10px 0 0 0;
+    font-size: 0.14rem;
+    p {
+      line-height: 0.21rem;
+    }
+    .tags {
+      margin: 10px 0 0 0;
+    }
+  }
+}
+

client/containers/Interface/InterfaceList/InterfaceList.js

@@ -1,15 +1,22 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 class InterfaceList extends Component {
+  static propTypes = {
+    projectMember: PropTypes.func,  
+  }
+
   constructor(props) {
     super(props)
   }
 
   render () {
+    const { projectMember } = this.props
+
     return (
       <ul className="interface-list">
         <li className="active">添加接口</li>
-        <li>管理项目成员</li>
+        <li onClick={projectMember}>管理项目成员</li>
       </ul>
     )
   }

client/containers/Interface/InterfaceMode/InterfaceMode.js

@@ -0,0 +1,76 @@
+import React, { Component } from 'react'
+import { Modal, Input, Button } from 'antd'
+import PropTypes from 'prop-types'
+// import axios from 'axios'
+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,
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  componentDidMount () {
+    // axios.get({
+    //   url: '',
+    //   params: {}
+    // })
+    // .then(() => {
+
+    // })
+  }
+
+  handleOk (closeProjectMember) {
+    closeProjectMember()
+  }
+
+  handleCancel (closeProjectMember) {
+    closeProjectMember()
+  }
+
+  render() {
+    const { modalVisible, closeProjectMember } = this.props
+    const handleOk = this.handleOk.bind(this, closeProjectMember)
+    const handleCancel = this.handleCancel.bind(this, closeProjectMember)
+
+    return (
+      <Modal
+        title="项目成员管理"
+        onOk={ handleOk }
+        visible={ modalVisible }
+        onCancel={ handleCancel }
+        className="interface-mode-box"
+      >
+        <div className="add-user">
+          <Input placeholder="Basic usage" size="large" />
+          <Button>添加新成员</Button>          
+        </div>
+        
+        <ModeTags />
+      </Modal>
+    )
+  }
+}
+
+export default InterfaceMode

client/containers/Interface/InterfaceMode/ModeTags.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import { Tag } from 'antd'
+// import PropTypes from 'prop-types'
+
+class ModeTags extends Component {
+  // static propTypes = {
+  //   closeProjectMember: PropTypes.func,
+  // }
+
+  constructor(props) {
+    super(props)
+  }
+
+  closeTags () {
+
+  }
+
+  render() {
+    // const { userName } = this.props
+
+    return (
+      <Tag closable onClose={this.closeTags}>小花</Tag>
+    )
+  }
+}
+
+export default ModeTags

client/containers/Interface/InterfaceTable/InterfaceTable.js

@@ -42,7 +42,6 @@ class InterfaceTable extends Component {
     }]
 
     const data = this.props.data;
-    console.log(this.props.data)
 
     return (
       <section className="interface-table">

client/index.js

@@ -8,9 +8,6 @@ import { createStore, combineReducers, applyMiddleware } from 'redux'
 import { Provider } from 'react-redux'
 import ReduxContainer from './ReduxContainer.js'
 
-console.log('thunkMiddleware', thunkMiddleware)
-console.log('promiseMiddleware', promiseMiddleware)
-
 // 合并 redux 创建stroe
 const store = createStore(combineReducers( ReduxContainer ), applyMiddleware(
   thunkMiddleware.default,

client/reducer/Interface/InterfaceReducer.js

@@ -0,0 +1,32 @@
+import {
+  FETCH_INTERFACE_DATA,
+  LIST_INTERFACE_CLICK,
+  PROJECT_MEMBER_INTERFACE,
+} from '../../constants/action-types.js'
+
+const initialState = {
+  interfaceData: null,
+  modalVisible: false,
+}
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_INTERFACE_DATA:
+      return {
+        ...state,
+        interfaceData: action.payload,
+      }
+    case LIST_INTERFACE_CLICK:
+      return {
+        ...state,
+        modalVisible: true,
+      }
+    case PROJECT_MEMBER_INTERFACE:
+      return {
+        ...state,
+        modalVisible: false,
+      }
+    default:
+      return state
+  }
+}

client/reducer/interface/interface.js

@@ -1,16 +0,0 @@
-import {
-  FETCH_INTERFACE_DATA,
-} from '../../constants/action-types.js'
-
-export default (state = 3333, action) => {
-  switch (action.type) {
-    case FETCH_INTERFACE_DATA: {
-      return {
-        ...state,
-        icons: action.payload.data,
-      };
-    }
-    default:
-      return state;
-  }
-}