From 27c48c5ece9ee8ee1e11a266892404dc46a2e5dd Mon Sep 17 00:00:00 2001
From: "waliang.wang" <waliang.wang@qunar.com>
Date: Thu, 13 Jul 2017 20:09:04 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B9=E7=9B=AE=E6=88=90?=
 =?UTF-8?q?=E5=91=98=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/ReduxContainer.js                      |  2 +-
 .../{interface.js => interfaceAction.js}      | 18 ++++-
 client/constants/action-types.js              |  4 +-
 client/containers/Interface/Interface.js      | 34 ++++++---
 client/containers/Interface/Interface.scss    | 29 ++++++-
 .../Interface/InterfaceList/InterfaceList.js  |  9 ++-
 .../Interface/InterfaceMode/InterfaceMode.js  | 76 +++++++++++++++++++
 .../Interface/InterfaceMode/ModeTags.js       | 27 +++++++
 .../InterfaceTable/InterfaceTable.js          |  3 +-
 client/index.js                               |  3 -
 client/reducer/Interface/InterfaceReducer.js  | 32 ++++++++
 client/reducer/interface/interface.js         | 16 ----
 12 files changed, 216 insertions(+), 37 deletions(-)
 rename client/actions/{interface.js => interfaceAction.js} (64%)
 create mode 100644 client/containers/Interface/InterfaceMode/InterfaceMode.js
 create mode 100644 client/containers/Interface/InterfaceMode/ModeTags.js
 create mode 100644 client/reducer/Interface/InterfaceReducer.js
 delete mode 100644 client/reducer/interface/interface.js

diff --git a/client/ReduxContainer.js b/client/ReduxContainer.js
index afdd53f2..e4d55926 100644
--- a/client/ReduxContainer.js
+++ b/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,
diff --git a/client/actions/interface.js b/client/actions/interfaceAction.js
similarity index 64%
rename from client/actions/interface.js
rename to client/actions/interfaceAction.js
index def0a95f..63e45f1f 100644
--- a/client/actions/interface.js
+++ b/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',
@@ -30,4 +32,16 @@ export function fetchAuditIcons () {
     type: FETCH_INTERFACE_DATA,
     payload: data,
   };
+}
+
+export function projectMember () {
+  return {
+    type: LIST_INTERFACE_CLICK
+  }
+}
+
+export function closeProjectMember () {
+  return {
+    type: PROJECT_MEMBER_INTERFACE,
+  }
 }
\ No newline at end of file
diff --git a/client/constants/action-types.js b/client/constants/action-types.js
index 82b5022f..594d8cf9 100644
--- a/client/constants/action-types.js
+++ b/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'
diff --git a/client/containers/Interface/Interface.js b/client/containers/Interface/Interface.js
index dc32b1d3..33a8db65 100644
--- a/client/containers/Interface/Interface.js
+++ b/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,19 +40,20 @@ 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>
     )
   }
 }
 
-export default Interface
\ No newline at end of file
+export default Interface
diff --git a/client/containers/Interface/Interface.scss b/client/containers/Interface/Interface.scss
index 765e24b4..128837b2 100644
--- a/client/containers/Interface/Interface.scss
+++ b/client/containers/Interface/Interface.scss
@@ -36,4 +36,31 @@
       }
     }
   }
-}
\ No newline at end of file
+}
+
+/* .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;
+    }
+  }
+}
+
diff --git a/client/containers/Interface/InterfaceList/InterfaceList.js b/client/containers/Interface/InterfaceList/InterfaceList.js
index 1db38a0b..52a0096f 100644
--- a/client/containers/Interface/InterfaceList/InterfaceList.js
+++ b/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>
     )
   }
diff --git a/client/containers/Interface/InterfaceMode/InterfaceMode.js b/client/containers/Interface/InterfaceMode/InterfaceMode.js
new file mode 100644
index 00000000..c043901d
--- /dev/null
+++ b/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
diff --git a/client/containers/Interface/InterfaceMode/ModeTags.js b/client/containers/Interface/InterfaceMode/ModeTags.js
new file mode 100644
index 00000000..5fa3c2d6
--- /dev/null
+++ b/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
diff --git a/client/containers/Interface/InterfaceTable/InterfaceTable.js b/client/containers/Interface/InterfaceTable/InterfaceTable.js
index 3664bdbe..e76d6592 100644
--- a/client/containers/Interface/InterfaceTable/InterfaceTable.js
+++ b/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">
@@ -52,4 +51,4 @@ class InterfaceTable extends Component {
   }
 }
 
-export default InterfaceTable
\ No newline at end of file
+export default InterfaceTable
diff --git a/client/index.js b/client/index.js
index 95d19a3c..577cb6e7 100644
--- a/client/index.js
+++ b/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,
diff --git a/client/reducer/Interface/InterfaceReducer.js b/client/reducer/Interface/InterfaceReducer.js
new file mode 100644
index 00000000..1e6f87f5
--- /dev/null
+++ b/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
+  }
+}
diff --git a/client/reducer/interface/interface.js b/client/reducer/interface/interface.js
deleted file mode 100644
index 89b3aed7..00000000
--- a/client/reducer/interface/interface.js
+++ /dev/null
@@ -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;
-  }
-}