feat: 项目广场布局

This commit is contained in:
wenbo.dong 2017-08-11 17:47:25 +08:00
parent f1ff064f15
commit eb931166ef
12 changed files with 65 additions and 182 deletions

View File

@ -1,8 +1,8 @@
import './ProjectBox.scss'
import './ProjectCard.scss'
import React, { Component } from 'react'
// import PropTypes from 'prop-types'
class ProjectBox extends Component {
class ProjectCard extends Component {
constructor(props) {
super(props);
this.state = {
@ -25,4 +25,4 @@ class ProjectBox extends Component {
}
export default ProjectBox
export default ProjectCard

View File

@ -4,7 +4,7 @@ import Header from './Header/Header.js'
import Intro from './Intro/Intro.js'
import Loading from './Loading/Loading.js'
import MockDoc from './MockDoc/MockDoc.js'
import ProjectBox from './ProjectBox/ProjectBox.js'
import ProjectCard from './ProjectCard/ProjectCard.js'
import Subnav from './Subnav/Subnav.js'
export {
@ -14,6 +14,6 @@ export {
Intro,
Loading,
MockDoc,
ProjectBox,
ProjectCard,
Subnav
}

View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import './Follows.scss';
import Subnav from '../../components/Subnav/Subnav.js';
import ProjectBox from '../../components/ProjectBox/ProjectBox.js';
import ProjectCard from '../../components/ProjectCard/ProjectCard.js';
class Follows extends Component {
render () {
@ -19,10 +19,10 @@ class Follows extends Component {
<div className="g-row">
<div className="follow-box">
<div className="follow-container">
<ProjectBox />
<ProjectBox />
<ProjectBox />
<ProjectBox />
<ProjectCard />
<ProjectCard />
<ProjectCard />
<ProjectCard />
</div>
</div>
</div>

View File

@ -1,9 +1,11 @@
import React, { Component } from 'react';
import GroupList from './GroupList/GroupList.js';
import ProjectList from './ProjectList/ProjectList.js';
import MemberList from './MemberList/MemberList.js';
import Subnav from '../../components/Subnav/Subnav.js';
import { Route, Switch, Redirect } from 'react-router-dom';
import { Row, Col } from 'antd';
import { Row, Col, Tabs } from 'antd';
const TabPane = Tabs.TabPane;
import './Group.scss'
@ -21,7 +23,10 @@ export default class Group extends Component {
<GroupList></GroupList>
</Col>
<Col span={18}>
<ProjectList/>
<Tabs type="card" className="m-tab">
<TabPane tab="项目列表" key="1"><ProjectList/></TabPane>
<TabPane tab="成员列表" key="2"><MemberList/></TabPane>
</Tabs>
</Col>
</Row>
</div>

View File

@ -0,0 +1,16 @@
import React, { Component } from 'react';
import './MemberList.scss'
class MemberList extends Component {
render() {
return (
<div className="m-panel">
chengyuan 列表 成员
</div>
);
}
}
export default MemberList;

View File

@ -0,0 +1,8 @@
.m-panel{
background-color: #fff;
padding: 24px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
border-radius: 4px;
min-height: 5rem;
margin-top: 0;
}

View File

@ -1,16 +1,12 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Table, Button, Modal, Form, Input, Icon, Tooltip, Select, Popconfirm, message } from 'antd';
import { Table, Popconfirm, message } from 'antd';
import { addProject, fetchProjectList, delProject, changeUpdateModal, changeTableLoading } from '../../../reducer/modules/project';
import UpDateModal from './UpDateModal';
import { Link } from 'react-router-dom'
import variable from '../../../constants/variable';
import common from '../../../common';
import { autobind } from 'core-decorators';
const { TextArea } = Input;
const FormItem = Form.Item;
const Option = Select.Option;
import './ProjectList.scss'
@ -78,17 +74,6 @@ const getColumns = (data, props) => {
}];
}
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 }
}
};
@connect(
state => {
return {
@ -132,49 +117,6 @@ class ProjectList extends Component {
currPage: PropTypes.number
}
// 显示模态框 - 创建项目
@autobind
showAddProjectModal() {
this.setState({
visible: true
});
}
// 确认添加项目
@autobind
handleOk(e) {
const { form, currGroup, changeTableLoading, addProject, fetchProjectList } = this.props;
const that = this;
e.preventDefault();
form.validateFields((err, values) => {
if (!err) {
values.protocol = this.state.protocol.split(':')[0];
// 获取当前分组id传入values
values.group_id = currGroup._id;
changeTableLoading(true);
addProject(values).then((res) => {
// 添加项目成功后再次请求列表
if (res.payload.data.errcode == 0) {
that.setState({
visible: false
});
form.resetFields();
message.success('创建成功! ');
fetchProjectList(currGroup._id, this.props.currPage).then(() => {
changeTableLoading(false);
});
} else {
changeTableLoading(false);
message.error(res.payload.data.errmsg);
}
}).catch(() => {
changeTableLoading(false);
});
}
});
}
// 取消修改
@autobind
handleCancel() {
@ -235,93 +177,8 @@ class ProjectList extends Component {
}
render() {
const { getFieldDecorator } = this.props.form;
return (
<div className="m-container">
<Modal
title="创建项目"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Form>
<FormItem
{...formItemLayout}
label="项目名称"
>
{getFieldDecorator('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', {
rules: [{
required: true,
message: '请输入项目线上域名!'
}]
})(
<Input addonBefore={(
<Select defaultValue="http://" 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', {
rules: [{
required: false, message: '请输入项目基本路径'
}]
})(
<Input />
)}
</FormItem>
<FormItem
{...formItemLayout}
label="描述"
>
{getFieldDecorator('desc', {
rules: [{
required: false, message: '请输入描述!'
}]
})(
<TextArea rows={4} />
)}
</FormItem>
</Form>
</Modal>
<UpDateModal/>
<Button className="m-btn" icon="plus" type="primary"
onClick={this.showAddProjectModal}
disabled={this.props.currGroup._id ? false : true}>创建项目</Button>
<div className="m-panel">
<Table
className="m-table"
bordered={true}
@ -340,4 +197,4 @@ class ProjectList extends Component {
}
}
export default Form.create()(ProjectList);
export default ProjectList;

View File

@ -1,14 +1,15 @@
.m-container{
.ant-tabs-bar {
border-bottom: 1px solid transparent;
margin-bottom: 0;
}
.m-panel{
background-color: #fff;
padding: 24px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
border-radius: 4px;
min-height: 5rem;
}
.m-table {
text-align: left;
margin-top: .16rem;
margin-top: 0;
}
.ant-input-group-wrapper {

View File

@ -1,10 +1,5 @@
@import '../../styles/common.scss';
.ant-tabs-nav-wrap {
font-size: .16rem;
text-align: center;
}
.login-form-button {
// background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important;
// border: none !important;

View File

@ -249,11 +249,11 @@
</li>
<li >
<a href="#-follow-list">/follow/list</a>
<a href="#-follow-del">/follow/del</a>
</li>
<li >
<a href="#-follow-list">/follow/list</a>
<a href="#-follow-add">/follow/add</a>
</li>
</ul>
@ -3456,13 +3456,13 @@
<div class="con-list-item">
<blockquote class="api">
<h3 id="-follow-list" class="page-header subject">
/follow/list
<h3 id="-follow-del" class="page-header subject">
/follow/del
<span class="ui-badge">POST</span>
<a class="hashlink" href="#-follow-list">#</a>
<a class="hashlink" href="#-follow-del">#</a>
</h3>
</blockquote>
<p>
@ -3521,13 +3521,13 @@
<div class="con-list-item">
<blockquote class="api">
<h3 id="-follow-list" class="page-header subject">
/follow/list
<h3 id="-follow-add" class="page-header subject">
/follow/add
<span class="ui-badge">POST</span>
<a class="hashlink" href="#-follow-list">#</a>
<a class="hashlink" href="#-follow-add">#</a>
</h3>
</blockquote>
<p>

View File

@ -46,7 +46,7 @@ class followController extends baseController {
// ctx.body = yapi.commons.resReturn(null, 402, err.message);
// }
}
/**
@ -61,7 +61,7 @@ class followController extends baseController {
* @returns {Object}
* @example /follow/list
*/
async list(ctx) {
let uid = ctx.request.query.uid,
page = ctx.request.query.page || 1,
@ -74,7 +74,7 @@ class followController extends baseController {
try {
let result = await this.Model.listWithPaging(uid, page, limit);
let count = await this.Model.listCount(uid);
ctx.body = yapi.commons.resReturn({
total: Math.ceil(count / limit),
list: result
@ -87,7 +87,7 @@ class followController extends baseController {
/**
* 取消关注
* @interface /follow/list
* @interface /follow/del
* @method POST
* @category follow
* @foldnumber 10
@ -113,7 +113,7 @@ class followController extends baseController {
/**
* 添加关注
* @interface /follow/list
* @interface /follow/add
* @method POST
* @category follow
* @foldnumber 10
@ -173,6 +173,7 @@ class followController extends baseController {
}
module.exports = followController;
</pre>
</div>
</div>