mirror of
https://github.com/YMFE/yapi.git
synced 2024-12-21 05:19:42 +08:00
feat: 项目广场布局
This commit is contained in:
parent
f1ff064f15
commit
eb931166ef
@ -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
|
@ -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
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
16
client/containers/Group/MemberList/MemberList.js
Normal file
16
client/containers/Group/MemberList/MemberList.js
Normal 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;
|
8
client/containers/Group/MemberList/MemberList.scss
Normal file
8
client/containers/Group/MemberList/MemberList.scss
Normal 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;
|
||||
}
|
@ -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>
|
||||
线上域名
|
||||
<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>
|
||||
基本路径
|
||||
<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;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user