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

This commit is contained in:
suxiaoxin 2017-08-17 15:19:50 +08:00
commit 729fa3828c
13 changed files with 495 additions and 100 deletions

View File

@ -3,6 +3,37 @@ import PropTypes from 'prop-types';
import { AutoComplete } from 'antd';
import axios from 'axios';
/**
* 用户名输入框自动完成组件
*
* @component UsernameAutoComplete
* @examplelanguage js
*
* * 用户名输入框自动完成组件
* * 用户名输入框自动完成组件
*
*
*/
/**
* 获取自动输入的用户信息
*
* 获取子组件state
* @property callbackState
* @type function
* @description 类型提示支持数组传值也支持用函数格式化字符串函数有两个参数(scale, index)
* 受控属性滑块滑到某一刻度时所展示的刻度文本信息如果不需要标签请将该属性设置为 [] 空列表来覆盖默认转换函数
* @returns {object} {uid: xxx, username: xxx}
* @examplelanguage js
* @example
* onUserSelect(childState) {
* this.setState({
* uid: childState.uid,
* username: childState.username
* })
* }
*
*/
class UsernameAutoComplete extends Component {
constructor(props) {
super(props);

View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { message, Row, Col } from 'antd';
import { message, Row, Col, Icon } from 'antd';
import { addProject, fetchProjectList, delProject, changeUpdateModal, changeTableLoading } from '../../../reducer/modules/project';
import ProjectCard from '../../../components/ProjectCard/ProjectCard.js';
// import variable from '../../../constants/variable';
@ -26,52 +26,6 @@ import './ProjectList.scss'
// return handle;
// };
// const getColumns = (data, props) => {
// const { changeUpdateModal, userInfo } = props;
// return [{
// title: '项目名称',
// dataIndex: 'name',
// key: 'name',
// render: (text, record) => {
// return <Link to={`/project/${record._id}`}>{text}</Link>
// }
// },{
// title: 'Mock基本URL',
// key: 'domain',
// render: (item) => {
// return 'http://'+ item.prd_host + item.basepath;
// }
//
// }, {
// title: '创建人',
// dataIndex: 'owner',
// key: 'owner',
// render: (text, record, index) => {
// // data是projectList的列表值
// // 根据序号找到对应项的uid根据uid获取对应项目的创建人
// return <span>{userInfo[data[index].uid] ? userInfo[data[index].uid].username : ''}</span>;
// }
// }, {
// title: '创建时间',
// dataIndex: 'add_time',
// key: 'add_time',
// render: time => <span>{common.formatTime(time)}</span>
// }, {
// title: '操作',
// key: 'action',
// render: (text, record, index) => {
// const id = record._id;
// return (
// <span>
// <a onClick={() => changeUpdateModal(true, index)}>修改</a>
// <span className="ant-divider" />
// <Popconfirm title="你确定要删除项目吗?" onConfirm={deleteConfirm(id, props)} okText="确定" cancelText="取消">
// <a href="#">删除</a>
// </Popconfirm>
// </span>
// )}
// }];
// }
@connect(
state => {
@ -180,12 +134,15 @@ class ProjectList extends Component {
return (
<div className="m-panel">
<Row gutter={16}>
{projectData.map((item, index) => {
{projectData.length ? projectData.map((item, index) => {
return (
<Col span={8} key={index}>
<ProjectCard projectData={item} />
</Col>);
})}
}) : (<div className="empty-tip">
<p><Icon type="frown-o" /> 该分组还没有项目呢</p>
<p>请点击右上角 <Icon type="plus-circle" /> 按钮新建项目</p>
</div>)}
</Row>
</div>
);

View File

@ -31,3 +31,9 @@
cursor: not-allowed;
opacity: 0.5;
}
.empty-tip {
text-align: center;
font-size: .14rem;
color: #999;
}

View File

@ -42,20 +42,18 @@ class Activity extends Component {
}
render () {
return (
<div>
<div className="g-row">
<section className="news-box">
<div className="logHead">
{/*<Breadcrumb />*/}
<div className="Mockurl">
<span>Mock地址</span>
<p>{this.state.mockURL}</p>
<Button type="primary"><a href = {`/api/project/download?project_id=${this.props.match.params.id}`}>下载Mock数据</a></Button>
</div>
<div className="g-row">
<section className="news-box">
<div className="logHead">
{/*<Breadcrumb />*/}
<div className="Mockurl">
<span>Mock地址</span>
<p>{this.state.mockURL}</p>
<Button type="primary"><a href = {`/api/project/download?project_id=${this.props.match.params.id}`}>下载Mock数据</a></Button>
</div>
<TimeTree typeid = {+this.props.match.params.id} />
</section>
</div>
</div>
<TimeTree typeid = {+this.props.match.params.id} />
</section>
</div>
)
}

View File

@ -6,6 +6,7 @@
font-size: 0.14rem;
background: #FFF;
display: block;
min-height: 550px;
.news-timeline{
padding: 24px;

View File

@ -1,5 +1,5 @@
import React, { Component } from 'react'
import { Timeline, Spin } from 'antd'
import { Timeline, Spin, Avatar } from 'antd'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { formatTime } from '../../../../common.js';
@ -58,7 +58,8 @@ function timeago(timestamp) {
state => {
return {
newsData: state.news.newsData,
curpage: state.news.curpage
curpage: state.news.curpage,
curUid: state.user.uid
}
},
{
@ -75,7 +76,8 @@ class TimeTree extends Component {
setLoading: PropTypes.func,
loading: PropTypes.bool,
curpage: PropTypes.number,
typeid: PropTypes.number
typeid: PropTypes.number,
curUid: PropTypes.number
}
constructor(props) {
@ -109,8 +111,9 @@ class TimeTree extends Component {
render() {
let data = this.props.newsData ? this.props.newsData.list : [];
if (data && data.length) {
data = data.map(function (item, i) {
return (<Timeline.Item key={i}>
return (<Timeline.Item dot={<Avatar src={`/api/user/avatar?uid=${item.uid}`} />} key={i}>
<span className="logoTimeago">{timeago(item.add_time)}</span>
<span className="logusername"><Link to={`/user/profile/${item.uid}`}>{item.username}</Link></span>
<span className="logtype">{item.type}</span>

View File

@ -219,7 +219,7 @@ class View extends Component {
width: '45%'
}];
return <div className="caseContainer">
return this.props.curData.title?<div className="caseContainer">
<div className="colName">
<span className="colKey">接口名</span>
<span className="colValue">{this.props.curData.title}</span>
@ -271,7 +271,7 @@ class View extends Component {
desc: "123",
required: 0
}])}*/}
</div>
</div>:<div className="caseContainer"></div>;
}
}

View File

@ -6,7 +6,7 @@ import { Subnav } from '../../components/index'
import { getProject } from '../../reducer/modules/project';
import Interface from './Interface/Interface.js'
import Activity from './Activity/Activity.js'
import { Setting } from './Setting/Setting.js'
import Setting from './Setting/Setting.js'
@connect(

View File

@ -0,0 +1,355 @@
import React, { Component } from 'react'
import { Form, Input, Icon, Tooltip, Select, Button, Row, Col, message } from 'antd';
import PropTypes from 'prop-types';
import { updateProject, fetchProjectList, delProject, changeUpdateModal, changeTableLoading } from '../../../reducer/modules/project';
import { connect } from 'react-redux';
const { TextArea } = Input;
const FormItem = Form.Item;
const Option = Select.Option;
// layout
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 }
}
};
const formItemLayoutWithOutLabel = {
wrapperCol: {
xs: { span: 24, offset: 0 },
sm: { span: 20, offset: 6 }
}
};
let uuid = 0;
@connect(
state => {
return {
projectList: state.project.projectList,
handleUpdateIndex: state.project.handleUpdateIndex,
tableLoading: state.project.tableLoading,
currGroup: state.group.currGroup
}
},
{
fetchProjectList,
updateProject,
delProject,
changeUpdateModal,
changeTableLoading
}
)
class Setting extends Component {
constructor(props) {
super(props);
this.state = {
protocol: 'http:\/\/',
envProtocolChange: 'http:\/\/'
}
}
static propTypes = {
form: PropTypes.object,
fetchProjectList: PropTypes.func,
updateProject: PropTypes.func,
delProject: PropTypes.func,
changeUpdateModal: PropTypes.func,
changeTableLoading: PropTypes.func,
projectList: PropTypes.array,
currGroup: PropTypes.object,
handleUpdateIndex: PropTypes.number
}
// 修改线上域名的协议类型 (http/https)
protocolChange = (value) => {
this.setState({
protocol: value
})
}
handleCancel = () => {
this.props.form.resetFields();
this.props.changeUpdateModal(false, -1);
}
// 确认修改
handleOk = (e) => {
e.preventDefault();
const { form, updateProject, changeUpdateModal, currGroup, projectList, handleUpdateIndex, fetchProjectList, changeTableLoading } = this.props;
form.validateFields((err, values) => {
if (!err) {
// console.log(projectList[handleUpdateIndex]);
let assignValue = Object.assign(projectList[handleUpdateIndex], values);
values.protocol = this.state.protocol.split(':')[0];
assignValue.env = assignValue.envs.map((item, index) => {
return {
name: values['envs-name-' + index],
domain: values['envs-protocol-' + index] + values['envs-domain-' + index]
}
});
// console.log(assignValue);
changeTableLoading(true);
updateProject(assignValue).then((res) => {
if (res.payload.data.errcode == 0) {
changeUpdateModal(false, -1);
message.success('修改成功! ');
fetchProjectList(currGroup._id).then(() => {
changeTableLoading(false);
});
} else {
changeTableLoading(false);
message.error(res.payload.data.errmsg);
}
}).catch(() => {
changeTableLoading(false);
});
form.resetFields();
}
});
}
// 项目的修改操作 - 删除一项环境配置
remove = (id) => {
const { form } = this.props;
// can use data-binding to get
const envs = form.getFieldValue('envs');
// We need at least one passenger
if (envs.length === 0) {
return;
}
// can use data-binding to set
form.setFieldsValue({
envs: envs.filter(key => {
const realKey = key._id ? key._id : key
return realKey !== id;
})
});
}
// 项目的修改操作 - 添加一项环境配置
add = () => {
uuid++;
const { form } = this.props;
// can use data-binding to get
const envs = form.getFieldValue('envs');
const nextKeys = envs.concat(uuid);
// can use data-binding to set
// important! notify form to detect changes
form.setFieldsValue({
envs: nextKeys
});
}
render () {
const { getFieldDecorator, getFieldValue } = this.props.form;
// const that = this;
const { projectList, handleUpdateIndex } = this.props;
let initFormValues = {};
let envMessage = [];
// 如果列表存在且用户点击修改按钮时,设置表单默认值
if (projectList.length !== 0 && handleUpdateIndex !== -1) {
// console.log(projectList[handleUpdateIndex]);
const { name, basepath, desc, env } = projectList[handleUpdateIndex];
initFormValues = { name, basepath, desc, env };
if (env.length !== 0) {
envMessage = env;
}
initFormValues.prd_host = projectList[handleUpdateIndex].prd_host;
initFormValues.prd_protocol = projectList[handleUpdateIndex].protocol + '\:\/\/';
}
getFieldDecorator('envs', { initialValue: envMessage });
const envs = getFieldValue('envs');
const formItems = envs.map((k, index) => {
const secondIndex = 'next' + index; // 为保证key的唯一性
return (
<Row key={index} type="flex" justify="space-between" align={index === 0 ? 'middle' : 'top'}>
<Col span={10} offset={2}>
<FormItem
label={index === 0 ? (
<span>环境名称</span>) : ''}
required={false}
key={index}
>
{getFieldDecorator(`envs-name-${index}`, {
validateTrigger: ['onChange', 'onBlur'],
initialValue: envMessage.length !== 0 ? k.name : '',
rules: [{
required: false,
whitespace: true,
validator(rule, value, callback) {
if (value) {
if (value.length === 0) {
callback('请输入环境域名');
} else if (!/\S/.test(value)) {
callback('请输入环境域名');
} else if (/prd/.test(value)) {
callback('环境域名不能是"prd"');
} else {
return callback();
}
} else {
callback('请输入环境域名');
}
}
}]
})(
<Input placeholder="请输入环境名称" style={{ width: '90%', marginRight: 8 }} />
)}
</FormItem>
</Col>
<Col span={10}>
<FormItem
label={index === 0 ? (
<span>环境域名</span>) : ''}
required={false}
key={secondIndex}
>
{getFieldDecorator(`envs-domain-${index}`, {
validateTrigger: ['onChange', 'onBlur'],
initialValue: envMessage.length !== 0 && k.domain ? k.domain.split('\/\/')[1] : '',
rules: [{
required: false,
whitespace: true,
message: "请输入环境域名",
validator(rule, value, callback) {
if (value) {
if (value.length === 0) {
callback('请输入环境域名');
} else if (!/\S/.test(value)) {
callback('请输入环境域名');
} else {
return callback();
}
} else {
callback('请输入环境域名');
}
}
}]
})(
<Input placeholder="请输入环境域名" style={{ width: '90%', marginRight: 8 }} addonBefore={
getFieldDecorator(`envs-protocol-${index}`, {
initialValue: envMessage.length !== 0 && k.domain ? k.domain.split('\/\/')[0] + '\/\/' : 'http\:\/\/',
rules: [{
required: true
}]
})(
<Select>
<Option value="http://">{'http:\/\/'}</Option>
<Option value="https://">{'https:\/\/'}</Option>
</Select>
)} />
)}
</FormItem>
</Col>
<Col span={2}>
{/* 新增的项中,只有最后一项有删除按钮 */}
{(envs.length > 0 && k._id) || (envs.length == index + 1) ? (
<Icon
className="dynamic-delete-button"
type="minus-circle-o"
onClick={() => {
return this.remove(k._id ? k._id : k);
}}
/>
) : null}
</Col>
</Row>
);
});
return (
<div className="g-row m-container">
<Form>
<FormItem
{...formItemLayout}
label="项目名称"
>
{getFieldDecorator('name', {
initialValue: initFormValues.name,
rules: [{
required: true, message: '请输入项目名称!'
}]
})(
<Input />
)}
</FormItem>
<FormItem
{...formItemLayout}
label={(
<span>
线上域名&nbsp;
<Tooltip title="将根据配置的线上域名访问mock数据">
<Icon type="question-circle-o" />
</Tooltip>
</span>
)}
>
{getFieldDecorator('prd_host', {
initialValue: initFormValues.prd_host,
rules: [{
required: true, message: '请输入项目线上域名!'
}]
})(
<Input addonBefore={(
<Select defaultValue={initFormValues.prd_protocol} onChange={this.protocolChange}>
<Option value="http://">{'http:\/\/'}</Option>
<Option value="https://">{'https:\/\/'}</Option>
</Select>)} />
)}
</FormItem>
<FormItem
{...formItemLayout}
label={(
<span>
基本路径&nbsp;
<Tooltip title="基本路径为空表示根路径">
<Icon type="question-circle-o" />
</Tooltip>
</span>
)}
>
{getFieldDecorator('basepath', {
initialValue: initFormValues.basepath,
rules: [{
required: false, message: '请输入项目基本路径! '
}]
})(
<Input />
)}
</FormItem>
<FormItem
{...formItemLayout}
label="描述"
>
{getFieldDecorator('desc', {
initialValue: initFormValues.desc,
rules: [{
required: false, message: '请输入描述!'
}]
})(
<TextArea rows={4} />
)}
</FormItem>
{formItems}
<FormItem {...formItemLayoutWithOutLabel}>
<Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
<Icon type="plus" /> 添加环境配置
</Button>
</FormItem>
</Form>
</div>
)
}
}
export default Form.create()(Setting);

View File

@ -57,7 +57,9 @@ class projectController extends baseController {
name: 'string',
basepath: 'string',
group_id: 'number',
desc: 'string'
desc: 'string',
color: 'string',
icon: 'string'
});
if (await this.checkAuth(params.group_id, 'group', 'edit') !== true) {
@ -92,6 +94,8 @@ class projectController extends baseController {
project_type: params.project_type || 'private',
uid: this.getUid(),
group_id: params.group_id,
icon: params.icon,
color: params.color,
add_time: yapi.commons.time(),
up_time: yapi.commons.time()
};
@ -104,7 +108,9 @@ class projectController extends baseController {
type: 'project',
uid: this.getUid(),
username: username,
typeid: params.group_id
typeid: params.group_id,
color: params.color,
icon: params.icon
});
ctx.body = yapi.commons.resReturn(result);
} catch (e) {
@ -152,12 +158,15 @@ class projectController extends baseController {
try {
let result = await this.Model.addMember(params.id, userdata);
let username = this.getUsername();
let project = await this.Model.get(params.id);
yapi.commons.saveLog({
content: `用户${username}添加了项目成员${userdata.username}`,
type: 'project',
uid: this.getUid(),
username: username,
typeid: params.id
typeid: params.id,
color: project.color,
icon: project.icon
});
ctx.body = yapi.commons.resReturn(result);
} catch (e) {
@ -204,7 +213,9 @@ class projectController extends baseController {
type: 'project',
uid: this.getUid(),
username: username,
typeid: params.id
typeid: params.id,
color: project.color,
icon: project.icon
});
ctx.body = yapi.commons.resReturn(result);
} catch (e) {
@ -386,7 +397,9 @@ class projectController extends baseController {
type: 'project',
uid: this.getUid(),
username: username,
typeid: params.id
typeid: params.id,
color: project.color,
icon: project.icon
});
ctx.body = yapi.commons.resReturn(result);
} catch (e) {
@ -420,7 +433,9 @@ class projectController extends baseController {
name: 'string',
basepath: 'string',
group_id: 'number',
desc: 'string'
desc: 'string',
icon: 'string',
color: 'string'
});
if (!id) {
return ctx.body = yapi.commons.resReturn(null, 405, '项目id不能为空');
@ -457,7 +472,8 @@ class projectController extends baseController {
data.basepath = params.basepath;
}
if (params.env) data.env = params.env;
if(params.color) data.color = params.color;
if(params.icon) data.icon = params.icon;
let result = await this.Model.up(id, data);
let username = this.getUsername();
@ -466,7 +482,9 @@ class projectController extends baseController {
type: 'project',
uid: this.getUid(),
username: username,
typeid: id
typeid: id,
icon: params.icon,
color: params.color
});
ctx.body = yapi.commons.resReturn(result);
} catch (e) {

View File

@ -20,6 +20,8 @@ class projectModel extends baseModel {
env: [
{ name: String, domain: String }
],
icon: String,
color: String,
add_time: Number,
up_time: Number
};
@ -58,7 +60,7 @@ class projectModel extends baseModel {
list(group_id, auth) {
let params = {group_id: group_id}
if(!auth) params.project_type = 'public';
return this.model.find(params).select("_id uid name basepath desc group_id project_type env add_time up_time").sort({ _id: -1 }).exec();
return this.model.find(params).select("_id uid name basepath desc group_id project_type color icon env add_time up_time").sort({ _id: -1 }).exec();
}
listWithPaging(group_id, page, limit) {

View File

@ -138,7 +138,9 @@ var projectController = function (_baseController) {
name: 'string',
basepath: 'string',
group_id: 'number',
desc: 'string'
desc: 'string',
color: 'string',
icon: 'string'
});
_context.next = 4;
@ -204,6 +206,8 @@ var projectController = function (_baseController) {
project_type: params.project_type || 'private',
uid: this.getUid(),
group_id: params.group_id,
icon: params.icon,
color: params.color,
add_time: _yapi2.default.commons.time(),
up_time: _yapi2.default.commons.time()
};
@ -220,7 +224,9 @@ var projectController = function (_baseController) {
type: 'project',
uid: this.getUid(),
username: username,
typeid: params.group_id
typeid: params.group_id,
color: params.color,
icon: params.icon
});
ctx.body = _yapi2.default.commons.resReturn(result);
_context.next = 32;
@ -262,7 +268,7 @@ var projectController = function (_baseController) {
key: 'addMember',
value: function () {
var _ref2 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee2(ctx) {
var params, check, userdata, result, username;
var params, check, userdata, result, username, project;
return _regenerator2.default.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
@ -337,30 +343,37 @@ var projectController = function (_baseController) {
case 24:
result = _context2.sent;
username = this.getUsername();
_context2.next = 28;
return this.Model.get(params.id);
case 28:
project = _context2.sent;
_yapi2.default.commons.saveLog({
content: '\u7528\u6237' + username + '\u6DFB\u52A0\u4E86\u9879\u76EE\u6210\u5458' + userdata.username,
type: 'project',
uid: this.getUid(),
username: username,
typeid: params.id
typeid: params.id,
color: project.color,
icon: project.icon
});
ctx.body = _yapi2.default.commons.resReturn(result);
_context2.next = 33;
_context2.next = 36;
break;
case 30:
_context2.prev = 30;
case 33:
_context2.prev = 33;
_context2.t1 = _context2['catch'](21);
ctx.body = _yapi2.default.commons.resReturn(null, 402, _context2.t1.message);
case 33:
case 36:
case 'end':
return _context2.stop();
}
}
}, _callee2, this, [[21, 30]]);
}, _callee2, this, [[21, 33]]);
}));
function addMember(_x2) {
@ -459,7 +472,9 @@ var projectController = function (_baseController) {
type: 'project',
uid: this.getUid(),
username: username,
typeid: params.id
typeid: params.id,
color: project.color,
icon: project.icon
});
ctx.body = _yapi2.default.commons.resReturn(result);
_context3.next = 33;
@ -923,7 +938,9 @@ var projectController = function (_baseController) {
type: 'project',
uid: this.getUid(),
username: username,
typeid: params.id
typeid: params.id,
color: project.color,
icon: project.icon
});
ctx.body = _yapi2.default.commons.resReturn(result);
_context9.next = 35;
@ -986,7 +1003,9 @@ var projectController = function (_baseController) {
name: 'string',
basepath: 'string',
group_id: 'number',
desc: 'string'
desc: 'string',
icon: 'string',
color: 'string'
});
if (_id2) {
@ -1060,11 +1079,12 @@ var projectController = function (_baseController) {
data.basepath = params.basepath;
}
if (params.env) data.env = params.env;
_context10.next = 31;
if (params.color) data.color = params.color;
if (params.icon) data.icon = params.icon;
_context10.next = 33;
return this.Model.up(_id2, data);
case 31:
case 33:
result = _context10.sent;
username = this.getUsername();
@ -1073,24 +1093,26 @@ var projectController = function (_baseController) {
type: 'project',
uid: this.getUid(),
username: username,
typeid: _id2
typeid: _id2,
icon: params.icon,
color: params.color
});
ctx.body = _yapi2.default.commons.resReturn(result);
_context10.next = 40;
_context10.next = 42;
break;
case 37:
_context10.prev = 37;
case 39:
_context10.prev = 39;
_context10.t1 = _context10['catch'](0);
ctx.body = _yapi2.default.commons.resReturn(null, 402, _context10.t1.message);
case 40:
case 42:
case 'end':
return _context10.stop();
}
}
}, _callee10, this, [[0, 37]]);
}, _callee10, this, [[0, 39]]);
}));
function up(_x11) {

View File

@ -55,6 +55,8 @@ var projectModel = function (_baseModel) {
project_type: { type: String, required: true, enum: ['public', 'private'] },
members: [{ uid: Number, role: { type: String, enum: ['owner', 'dev'] }, username: String, email: String }],
env: [{ name: String, domain: String }],
icon: String,
color: String,
add_time: Number,
up_time: Number
};
@ -99,7 +101,7 @@ var projectModel = function (_baseModel) {
value: function list(group_id, auth) {
var params = { group_id: group_id };
if (!auth) params.project_type = 'public';
return this.model.find(params).select("_id uid name basepath desc group_id project_type env add_time up_time").sort({ _id: -1 }).exec();
return this.model.find(params).select("_id uid name basepath desc group_id project_type color icon env add_time up_time").sort({ _id: -1 }).exec();
}
}, {
key: 'listWithPaging',