mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2025-01-18 13:04:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev

Browse Source
This commit is contained in:
sean 2017-08-16 12:19:56 +08:00
commit 99721ace01
4 changed files with 192 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
client/containers/Group/MemberList/MemberList.js
View File

@ -2,10 +2,11 @@ import React, { Component } from 'react';
import { Table } from 'antd';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Select, Button } from 'antd';
import { Select, Button, Modal, Row, Col, AutoComplete, message } from 'antd';
import './MemberList.scss'
import axios from 'axios'
import { autobind } from 'core-decorators';
import { fetchGroupMemberList, fetchGroupMsg } from '../../../reducer/modules/group.js'
import { fetchGroupMemberList, fetchGroupMsg, addMember } from '../../../reducer/modules/group.js'
const Option = Select.Option;
@connect(
@ -18,7 +19,8 @@ const Option = Select.Option;
},
{
fetchGroupMemberList,
fetchGroupMsg
fetchGroupMsg,
addMember
}
)
class MemberList extends Component {
@ -26,7 +28,11 @@ class MemberList extends Component {
super(props);
this.state = {
userInfo: [],
role: ''
role: '',
visible: false,
dataSource: [],
inputUid: 0,
inputRole: 'dev'
}
}
static propTypes = {
@ -34,6 +40,7 @@ class MemberList extends Component {
uid: PropTypes.number,
fetchGroupMemberList: PropTypes.func,
fetchGroupMsg: PropTypes.func,
addMember: PropTypes.func,
role: PropTypes.string
}
@ -42,6 +49,81 @@ class MemberList extends Component {
console.log(`selected ${value}`);
}
showModal = () => {
this.setState({
visible: true
});
}
@autobind
handleOk() {
console.log(this.props.currGroup._id, this.state.inputUid);
this.props.addMember({
id: this.props.currGroup._id,
member_uid: this.state.inputUid
}).then((res) => {
console.log(res);
if (!res.payload.data.errcode) {
message.success('添加成功!');
// 添加成功后重新获取分组成员列表
this.props.fetchGroupMemberList(this.props.currGroup._id).then((res) => {
this.setState({
userInfo: res.payload.data.data,
visible: false
});
});
}
});
}
@autobind
handleCancel() {
// 取消模态框的时候重置模态框中的值
this.setState({
visible: false
});
}
@autobind
onSelect (userName) {
this.state.dataSource.forEach((item) => {
if (item.username === userName) {
this.setState({
inputUid: item.id
});
}
});
}
@autobind
changeMemberRole(e) {
console.log(e);
}
@autobind
handleSearch (value) {
this.setState({
userName: value
})
const params = { q: value}
axios.get('/api/user/search', { params })
.then(data => {
const userList = []
data = data.data.data
if (data) {
data.forEach( v => userList.push({
username: v.username,
id: v.uid
}));
console.log(userList);
this.setState({
dataSource: userList
})
}
})
}
componentWillReceiveProps(nextProps) {
if (this.props.currGroup !== nextProps.currGroup) {
this.props.fetchGroupMemberList(nextProps.currGroup._id).then((res) => {
@ -72,7 +154,6 @@ class MemberList extends Component {
}
render() {
console.log(this.state);
const columns = [{
title: this.props.currGroup.group_name + ' 分组成员 ('+this.state.userInfo.length + ') 人',
dataIndex: 'username',
@ -84,6 +165,7 @@ class MemberList extends Component {
</div>);
}
}, {
title: (this.state.role === 'owner' || this.state.role === 'admin') ? <div className="btn-container"><Button className="btn" type="primary" icon="plus" onClick={this.showModal}>添加成员</Button></div> : '',
key: 'action',
className: 'member-opration',
render: (text, record) => {
@ -102,8 +184,39 @@ class MemberList extends Component {
}
}
}];
console.log(this.state.dataSource);
return (
<div className="m-panel">
<Modal
title="添加成员"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Row gutter={6} className="modal-input">
<Col span="5"><div className="label">用户名: </div></Col>
<Col span="15">
<AutoComplete
defaultValue={[]}
dataSource={this.state.dataSource.map(i => i.username)}
style={{ width: 350 }}
onSelect={this.onSelect}
onSearch={this.handleSearch}
placeholder="请输入用户名"
size="large"
/>
</Col>
</Row>
<Row gutter={6} className="modal-input">
<Col span="5"><div className="label">权限: </div></Col>
<Col span="15">
<Select size="large" defaultValue="dev" className="select" onChange={this.changeMemberRole}>
<Option value="owner">组长</Option>
<Option value="dev">开发者</Option>
</Select>
</Col>
</Row>
</Modal>
<Table columns={columns} dataSource={this.state.userInfo} pagination={false} />
</div>
);

17
client/containers/Group/MemberList/MemberList.scss
View File

@ -6,6 +6,23 @@
min-height: 5rem;
margin-top: 0;
}
.btn-container {
text-align: right;
}
.modal-input {
display: flex;
align-items: center;
margin-bottom: .24rem;
.label {
text-align: right;
}
.select {
width: 1.2rem;
}
}
.member-opration {
text-align: right;
.select {

105
client/containers/Project/Interface/InterfaceList/Run.js
View File

@ -74,7 +74,7 @@ export default class Run extends Component {
req_headers = [],
req_body_type,
req_query = [],
req_params = [],
// req_params = [],
req_body_other = '',
req_body_form = []
} = currInterface;
@ -86,48 +86,27 @@ export default class Run extends Component {
domains[item.name] = item.domain;
})
const pathParam = [];
req_params.forEach(item => {
pathParam.push({key: item.name, value: item.value})
})
const query = [];
req_query.forEach(item => {
query.push({key: item.name, value: item.value})
})
const bodyForm = [];
req_body_form.forEach(item => {
bodyForm.push({key: item.name, value: item.value, type: 'text'})
})
const bodyOther = req_body_other;
const headers = []
let contentTypeIndex = -1;
req_headers.forEach((headerItem, index) => {
if (headerItem.name) {
// TODO 'Content-Type' 排除大小写不同格式影响
if (headerItem.name === 'Content-Type'){
contentTypeIndex = index;
headerItem.value = headerItem.value || 'application/x-www-form-urlencoded';
}
headers.push({name: headerItem.name, value: headerItem.value});
let hasContentType = false;
req_headers.forEach(headerItem => {
// TODO 'Content-Type' 排除大小写不同格式影响
if (headerItem.name === 'Content-Type'){
hasContentType = true;
headerItem.value = headerItem.value || 'application/x-www-form-urlencoded';
}
})
if (contentTypeIndex === -1) {
headers.push({name: 'Content-Type', value: 'application/x-www-form-urlencoded'});
if (!hasContentType) {
req_headers.push({name: 'Content-Type', value: 'application/x-www-form-urlencoded'});
}
this.setState({
method,
domains,
pathParam,
pathParam: [{name: 'id', value: ''}],
pathname,
query,
bodyForm,
headers,
bodyOther,
query: req_query.concat(),
bodyForm: req_body_form.concat(),
headers: req_headers.concat(),
bodyOther: req_body_other,
currDomain: domains.prd,
bodyType: req_body_type || 'form',
loading: false
@ -205,7 +184,7 @@ export default class Run extends Component {
setContentType(type) {
const headersObj = this.getHeadersObj(this.state.headers);
headersObj['Content-Type'] = type;
this.setState({headers: this.objToArr(headersObj, 'name')})
this.setState({headers: this.objToArr(headersObj)})
}
@autobind
@ -213,7 +192,7 @@ export default class Run extends Component {
const query = JSON.parse(JSON.stringify(this.state.query));
const v = e.target.value;
if (isKey) {
query[index].key = v;
query[index].name = v;
} else {
query[index].value = v;
}
@ -222,7 +201,7 @@ export default class Run extends Component {
@autobind
addQuery() {
const { query } = this.state;
this.setState({query: query.concat([{key: '', value: ''}])})
this.setState({query: query.concat([{name: '', value: ''}])})
}
@autobind
deleteQuery(index) {
@ -234,22 +213,31 @@ export default class Run extends Component {
changePathParam(e, index, isKey) {
const pathParam = JSON.parse(JSON.stringify(this.state.pathParam));
const v = e.target.value;
const name = pathParam[index].name;
let newPathname = this.state.pathname;
if (isKey) {
pathParam[index].key = v;
if (!name && v) {
newPathname += `/:${v}`;
} else {
newPathname = newPathname.replace(`/:${name}`, v ? `/:${v}` : '')
}
pathParam[index].name = v;
} else {
pathParam[index].value = v;
}
this.setState({ pathParam });
this.setState({ pathParam, pathname: newPathname });
}
@autobind
addPathParam() {
const { pathParam } = this.state;
this.setState({pathParam: pathParam.concat([{key: '', value: ''}])})
this.setState({pathParam: pathParam.concat([{name: '', value: ''}])})
}
@autobind
deletePathParam(index) {
const { pathParam } = this.state;
this.setState({pathParam: pathParam.filter((item, i) => +index !== +i)});
const name = pathParam[index].name;
const newPathname = this.state.pathname.replace(`/:${name}`, '');
this.setState({pathParam: pathParam.filter((item, i) => +index !== +i), pathname: newPathname});
}
@autobind
@ -257,7 +245,7 @@ export default class Run extends Component {
const bodyForm = JSON.parse(JSON.stringify(this.state.bodyForm));
switch (type) {
case 'key':
bodyForm[index].key = e.target.value
bodyForm[index].name = e.target.value
break;
case 'type':
bodyForm[index].type = e
@ -280,7 +268,7 @@ export default class Run extends Component {
@autobind
addBody() {
const { bodyForm } = this.state;
this.setState({bodyForm: bodyForm.concat([{key: '', value: '', type: 'text'}])})
this.setState({bodyForm: bodyForm.concat([{name: '', value: '', type: 'text'}])})
}
@autobind
deleteBody(index) {
@ -314,7 +302,7 @@ export default class Run extends Component {
}
objToArr(obj, key, value) {
const keyName = key || 'key';
const keyName = key || 'name';
const valueName = value || 'value';
const arr = []
Object.keys(obj).forEach((_key) => {
@ -327,8 +315,8 @@ export default class Run extends Component {
arrToObj(arr) {
const obj = {};
arr.forEach(item => {
if (item.key && item.type !== 'file') {
obj[item.key] = item.value || '';
if (item.name && item.type !== 'file') {
obj[item.name] = item.value || '';
}
})
return obj;
@ -336,8 +324,8 @@ export default class Run extends Component {
getFiles(bodyForm) {
const files = {};
bodyForm.forEach(item => {
if (item.key && item.type === 'file') {
files[item.key] = item.value
if (item.name && item.type === 'file') {
files[item.name] = item.value
}
})
return files;
@ -345,8 +333,8 @@ export default class Run extends Component {
getQueryObj(query) {
const queryObj = {};
query.forEach(item => {
if (item.key) {
queryObj[item.key] = item.value || '';
if (item.name) {
queryObj[item.name] = item.value || '';
}
})
return queryObj;
@ -371,7 +359,10 @@ export default class Run extends Component {
const { method, domains, pathParam, pathname, query, headers, bodyForm, bodyOther, currDomain, bodyType } = this.state;
const hasPlugin = this.hasCrossRequestPlugin();
const pathParamStr = pathParam.reduce((v, item) => v + '/' + item.value, '');
let path = pathname;
pathParam.forEach(item => {
path = path.replace(`:${item.name}`, item.value || `:${item.name}`);
});
const search = decodeURIComponent(URL.format({query: this.getQueryObj(query)}));
return (
@ -406,7 +397,7 @@ export default class Run extends Component {
Object.keys(domains).map((key, index) => (<Option value={domains[key]} key={index}>{key + '：' + domains[key]}</Option>))
}
</Select>
<Input value={pathname + pathParamStr + search} onChange={this.changePath} spellCheck="false" style={{flexBasis: 180, flexGrow: 1}} />
<Input value={path + search} onChange={this.changePath} spellCheck="false" style={{flexBasis: 180, flexGrow: 1}} />
</InputGroup>
<Button
onClick={this.reqRealInterface}
@ -427,7 +418,7 @@ export default class Run extends Component {
pathParam.map((item, index) => {
return (
<div key={index} className="key-value-wrap">
<Input value={item.key} onChange={e => this.changePathParam(e, index, true)} className="key" />
<Input value={item.name} onChange={e => this.changePathParam(e, index, true)} className="key" />
<span className="eq-symbol">=</span>
<Input value={item.value} onChange={e => this.changePathParam(e, index)} className="value" />
<Icon type="delete" className="icon-btn" onClick={() => this.deletePathParam(index)} />
@ -435,14 +426,14 @@ export default class Run extends Component {
)
})
}
<Button type="primary" icon="plus" onClick={this.addQuery}>Add query parameter</Button>
<Button type="primary" icon="plus" onClick={this.addPathParam}>Add path parameter</Button>
</Panel>
<Panel header="QUERY PARAMETERS" key="1">
{
query.map((item, index) => {
return (
<div key={index} className="key-value-wrap">
<Input value={item.key} onChange={e => this.changeQuery(e, index, true)} className="key" />
<Input value={item.name} onChange={e => this.changeQuery(e, index, true)} className="key" />
<span className="eq-symbol">=</span>
<Input value={item.value} onChange={e => this.changeQuery(e, index)} className="value" />
<Icon type="delete" className="icon-btn" onClick={() => this.deleteQuery(index)} />
@ -504,7 +495,7 @@ export default class Run extends Component {
bodyForm.map((item, index) => {
return (
<div key={index} className="key-value-wrap">
<Input value={item.key} onChange={e => this.changeBody(e, index, 'key')} className="key" />
<Input value={item.name} onChange={e => this.changeBody(e, index, 'key')} className="key" />
<span>[</span>
<Select value={item.type} onChange={e => this.changeBody(e, index, 'type')}>
<Option value="file">File</Option>

10
client/reducer/modules/group.js
View File

@ -5,6 +5,7 @@ const FETCH_GROUP_LIST = 'yapi/group/FETCH_GROUP_LIST';
const SET_CURR_GROUP = 'yapi/group/SET_CURR_GROUP';
const FETCH_GROUP_MEMBER = 'yapi/group/FETCH_GROUP_MEMBER';
const FETCH_GROUP_MSG = 'yapi/group/FETCH_GROUP_MSG';
const ADD_FROUP_MEMBER = 'yapi/group/ADD_FROUP_MEMBER';
// Reducer
const initialState = {
@ -35,7 +36,6 @@ export default (state = initialState, action) => {
};
}
case FETCH_GROUP_MSG: {
console.log(action.payload.data.data.role);
return {
...state,
role: action.payload.data.data.role
@ -57,6 +57,14 @@ export function fetchGroupMsg(id) {
}
}
// 添加项目分组成员
export function addMember(param) {
return {
type: ADD_FROUP_MEMBER,
payload: axios.post('/api/group/add_member', param)
}
}
// 获取分组成员列表
export function fetchGroupMemberList(id) {
return {