mirror of
https://github.com/YMFE/yapi.git
synced 2024-12-21 05:19:42 +08:00
管理项目成员模块
This commit is contained in:
parent
e16d5a4dc9
commit
27c48c5ece
@ -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,
|
||||
|
@ -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,
|
||||
}
|
||||
}
|
@ -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'
|
||||
|
@ -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
|
||||
export default Interface
|
||||
|
@ -36,4 +36,31 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
76
client/containers/Interface/InterfaceMode/InterfaceMode.js
Normal file
76
client/containers/Interface/InterfaceMode/InterfaceMode.js
Normal file
@ -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
|
27
client/containers/Interface/InterfaceMode/ModeTags.js
Normal file
27
client/containers/Interface/InterfaceMode/ModeTags.js
Normal file
@ -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
|
@ -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
|
||||
export default InterfaceTable
|
||||
|
@ -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,
|
||||
|
32
client/reducer/Interface/InterfaceReducer.js
Normal file
32
client/reducer/Interface/InterfaceReducer.js
Normal file
@ -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
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user