feat: 添加项目成员

This commit is contained in:
waliang.wang 2017-07-27 16:48:30 +08:00
parent c0cbb5d6f9
commit 2190a3aef1
7 changed files with 144 additions and 43 deletions

View File

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

View File

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

View File

@ -41,6 +41,16 @@
} }
.tags { .tags {
margin: 10px 0 0 0; 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;
}
} }
} }
} }

View File

@ -1,44 +1,88 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { Modal, Input, Button } from 'antd' import { Modal, Input, Button } from 'antd'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
// import axios from 'axios' import axios from 'axios'
import { autobind } from 'core-decorators'
import ModeTag from './ModeTags' 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 { class InterfaceMode extends Component {
static propTypes = { static propTypes = {
modalVisible: PropTypes.bool, modalVisible: PropTypes.bool,
closeProjectMember: PropTypes.func closeProjectMember: PropTypes.func,
memberList: PropTypes.array
} }
constructor(props) { constructor(props) {
super(props) super(props)
this.state = {
memberList: [],
userName: ''
}
} }
componentDidMount () { componentDidMount () {
// axios.get({ this.getMemberList()
// url: '', }
// params: {}
// })
// .then(() => {
// }) @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) { handleOk (closeProjectMember) {
@ -49,10 +93,18 @@ class InterfaceMode extends Component {
closeProjectMember() closeProjectMember()
} }
getInterfaceId () {
const reg = /Interface\/(\d+)/g
const url = location.href
url.match(reg)
return RegExp.$1
}
render() { render() {
const { modalVisible, closeProjectMember } = this.props const { modalVisible, closeProjectMember } = this.props
const handleOk = this.handleOk.bind(this, closeProjectMember) const handleOk = this.handleOk.bind(this, closeProjectMember)
const handleCancel = this.handleCancel.bind(this, closeProjectMember) const handleCancel = this.handleCancel.bind(this, closeProjectMember)
const { memberList } = this.state
return ( return (
<Modal <Modal
@ -63,11 +115,19 @@ class InterfaceMode extends Component {
className="interface-mode-box" className="interface-mode-box"
> >
<div className="add-user"> <div className="add-user">
<Input placeholder="Basic usage" size="large" /> <Input placeholder="Basic usage" size="large" onBlur={this.injectValue} />
<Button>新成员</Button> <Button onClick={this.addNewUser}> </Button>
</div> </div>
<article className="users">
<ModeTags /> <p>项目成员</p>
<div className="tags">
{
memberList.map((value, key) => {
return <ModeTag key={key} value={value} closeMember={this.closeMember} getMemberList={this.getMemberList} />
})
}
</div>
</article>
</Modal> </Modal>
) )
} }

View File

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

View File

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

View File

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