From 2190a3aef14b46f42b532b5afc422b036240c5c9 Mon Sep 17 00:00:00 2001 From: "waliang.wang" Date: Thu, 27 Jul 2017 16:48:30 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=E6=88=90=E5=91=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/actions/interfaceAction.js | 10 +- client/constants/action-types.js | 1 + client/containers/Interface/Interface.scss | 10 ++ .../Interface/InterfaceMode/InterfaceMode.js | 118 +++++++++++++----- .../Interface/InterfaceMode/ModeTags.js | 26 ++-- client/reducer/Interface/InterfaceReducer.js | 11 +- client/reducer/interface/InterfaceReducer.js | 11 +- 7 files changed, 144 insertions(+), 43 deletions(-) diff --git a/client/actions/interfaceAction.js b/client/actions/interfaceAction.js index 53ddaaca..e13c61ca 100644 --- a/client/actions/interfaceAction.js +++ b/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 + } +} diff --git a/client/constants/action-types.js b/client/constants/action-types.js index 4e28de56..99658dfb 100644 --- a/client/constants/action-types.js +++ b/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' diff --git a/client/containers/Interface/Interface.scss b/client/containers/Interface/Interface.scss index 4f47a523..bf192ad0 100644 --- a/client/containers/Interface/Interface.scss +++ b/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; + } } } } diff --git a/client/containers/Interface/InterfaceMode/InterfaceMode.js b/client/containers/Interface/InterfaceMode/InterfaceMode.js index f6b27566..fa6115f8 100644 --- a/client/containers/Interface/InterfaceMode/InterfaceMode.js +++ b/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 ( -
-

项目成员

-
- { - list.map((value, key) => { - return - }) - } -
-
- ) -} - 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 (
- - + +
- - +
+

项目成员

+
+ { + memberList.map((value, key) => { + return + }) + } +
+
) } diff --git a/client/containers/Interface/InterfaceMode/ModeTags.js b/client/containers/Interface/InterfaceMode/ModeTags.js index 5fa3c2d6..6308937d 100644 --- a/client/containers/Interface/InterfaceMode/ModeTags.js +++ b/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 ( - 小花 + + {username} + + ) } } diff --git a/client/reducer/Interface/InterfaceReducer.js b/client/reducer/Interface/InterfaceReducer.js index 0ed7bd36..52a11ed9 100644 --- a/client/reducer/Interface/InterfaceReducer.js +++ b/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 } diff --git a/client/reducer/interface/InterfaceReducer.js b/client/reducer/interface/InterfaceReducer.js index 0ed7bd36..52a11ed9 100644 --- a/client/reducer/interface/InterfaceReducer.js +++ b/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 }