Skip to content

Commit

Permalink
feat: 增加分组项目分类
Browse files Browse the repository at this point in the history
  • Loading branch information
czyzeyong committed Feb 4, 2021
1 parent 3531d09 commit e4888b4
Show file tree
Hide file tree
Showing 35 changed files with 647 additions and 227 deletions.
7 changes: 6 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,14 @@ yapi 目前尚不支持接口多级分类,因此按照[社区项目](https://g

postman 也是支持多级目录的,只有这样改才能更好的适配,目前还没对 postman 的数据做适配,欢迎大家一起开发。

以下是官方原文档:
# 增加的特性
1. 多级接口分类
2. 对接RAP1的多级接口分类
3. 分组项目分类

----
以下是官方原文档:


## YApi 可视化接口管理平台

Expand Down
42 changes: 39 additions & 3 deletions client/containers/AddProject/AddProject.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { connect } from 'react-redux';
import { Button, Form, Input, Icon, Tooltip, Select, message, Row, Col, Radio } from 'antd';
import { addProject } from '../../reducer/modules/project.js';
import { fetchGroupList } from '../../reducer/modules/group.js';
import { fetchSubGroupList } from '../../reducer/modules/subGroup.js'
import { autobind } from 'core-decorators';
import { setBreadcrumb } from '../../reducer/modules/user';
const { TextArea } = Input;
Expand Down Expand Up @@ -33,13 +34,15 @@ const formItemLayout = {
state => {
return {
groupList: state.group.groupList,
subGroupList: state.subGroup.subGroupList,
currGroup: state.group.currGroup
};
},
{
fetchGroupList,
addProject,
setBreadcrumb
setBreadcrumb,
fetchSubGroupList
}
)
@withRouter
Expand All @@ -48,17 +51,20 @@ class ProjectList extends Component {
super(props);
this.state = {
groupList: [],
subGroupList: [],
currGroupId: null
};
}
static propTypes = {
groupList: PropTypes.array,
subGroupList: PropTypes.array,
form: PropTypes.object,
currGroup: PropTypes.object,
addProject: PropTypes.func,
history: PropTypes.object,
setBreadcrumb: PropTypes.func,
fetchGroupList: PropTypes.func
fetchGroupList: PropTypes.func,
fetchSubGroupList: PropTypes.func
};

handlePath = e => {
Expand All @@ -67,6 +73,12 @@ class ProjectList extends Component {
basepath: handlePath(val)
});
};
handleGroupSelect = async (value) => {
await this.props.fetchSubGroupList(value)
this.setState({
subGroupList: this.props.subGroupList
})
};

// 确认添加项目
@autobind
Expand All @@ -78,6 +90,7 @@ class ProjectList extends Component {
values.group_id = values.group;
values.icon = constants.PROJECT_ICON[0];
values.color = pickRandomProperty(constants.PROJECT_COLOR);
values.sub_group_id = values.subGroup || 0
addProject(values).then(res => {
if (res.payload.data.errcode == 0) {
form.resetFields();
Expand All @@ -99,6 +112,13 @@ class ProjectList extends Component {
}
this.setState({
currGroupId: this.props.currGroup._id ? this.props.currGroup._id : this.props.groupList[0]._id
}, async () => {
if (this.state.currGroupId) {
await this.props.fetchSubGroupList(this.state.currGroupId)
this.setState({
subGroupList: this.props.subGroupList
})
}
});
this.setState({ groupList: this.props.groupList });
}
Expand All @@ -125,7 +145,7 @@ class ProjectList extends Component {
}
]
})(
<Select>
<Select onSelect={this.handleGroupSelect}>
{this.state.groupList.map((item, index) => (
<Option
disabled={
Expand All @@ -140,6 +160,22 @@ class ProjectList extends Component {
</Select>
)}
</FormItem>
<FormItem {...formItemLayout} label="所属分类">
{getFieldDecorator('subGroup', {
initialValue: ''
})(
<Select>
{this.state.subGroupList.map((item, index) => (
<Option
value={item._id.toString()}
key={index}
>
{item.name}
</Option>
))}
</Select>
)}
</FormItem>

<hr className="breakline" />

Expand Down
7 changes: 7 additions & 0 deletions client/containers/Group/Group.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import ProjectList from './ProjectList/ProjectList.js';
import MemberList from './MemberList/MemberList.js';
import GroupLog from './GroupLog/GroupLog.js';
import GroupSetting from './GroupSetting/GroupSetting.js';
import SubGroupSetting from './SubGroupSetting/SubGroupSetting.js'
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Route, Switch, Redirect } from 'react-router-dom';
Expand Down Expand Up @@ -106,6 +107,12 @@ export default class Group extends Component {
<GroupSetting />
</TabPane>
) : null}
{(this.props.curUserRole === 'admin' || this.props.curUserRoleInGroup === 'owner') &&
this.props.currGroup.type !== 'private' ? (
<TabPane tab="项目分类" key="5">
<SubGroupSetting />
</TabPane>
) : null}
</Tabs>
</Content>
</Layout>
Expand Down
69 changes: 57 additions & 12 deletions client/containers/Group/ProjectList/ProjectList.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
delProject,
changeUpdateModal
} from '../../../reducer/modules/project';
import { fetchSubGroupList } from '../../../reducer/modules/subGroup.js'
import ProjectCard from '../../../components/ProjectCard/ProjectCard.js';
import ErrMsg from '../../../components/ErrMsg/ErrMsg.js';
import { autobind } from 'core-decorators';
Expand All @@ -22,6 +23,7 @@ import './ProjectList.scss';
projectList: state.project.projectList,
userInfo: state.project.userInfo,
tableLoading: state.project.tableLoading,
subGroupList: state.subGroup.subGroupList,
currGroup: state.group.currGroup,
currPage: state.project.currPage
};
Expand All @@ -31,7 +33,8 @@ import './ProjectList.scss';
addProject,
delProject,
changeUpdateModal,
setBreadcrumb
setBreadcrumb,
fetchSubGroupList
}
)
class ProjectList extends Component {
Expand All @@ -45,6 +48,7 @@ class ProjectList extends Component {
}
static propTypes = {
form: PropTypes.object,
subGroupList: PropTypes.array,
fetchProjectList: PropTypes.func,
addProject: PropTypes.func,
delProject: PropTypes.func,
Expand All @@ -56,7 +60,8 @@ class ProjectList extends Component {
setBreadcrumb: PropTypes.func,
currPage: PropTypes.number,
studyTip: PropTypes.number,
study: PropTypes.bool
study: PropTypes.bool,
fetchSubGroupList: PropTypes.func
};

// 取消修改
Expand Down Expand Up @@ -88,6 +93,7 @@ class ProjectList extends Component {
// 切换分组
if (this.props.currGroup !== nextProps.currGroup && nextProps.currGroup._id) {
this.props.fetchProjectList(nextProps.currGroup._id, this.props.currPage);
this.props.fetchSubGroupList(nextProps.currGroup._id)
}

// 切换项目列表
Expand All @@ -107,12 +113,24 @@ class ProjectList extends Component {
let projectData = this.state.projectData;
let = [];
let followProject = [];
let subGroup = this.props.subGroupList;
let projectDataWithGroup = [];
let projectDataWithGroupMap = {};
let noGroup = [];
for (var i in projectData) {
if (projectData[i].follow) {
followProject.push(projectData[i]);
} else {
.push(projectData[i]);
}
if (projectData[i].sub_group_id) {
if (!projectDataWithGroupMap[projectData[i].sub_group_id]) {
projectDataWithGroupMap[projectData[i].sub_group_id] = [];
}
projectDataWithGroupMap[projectData[i].sub_group_id].push(projectData[i]);
} else {
noGroup.push(projectData[i]);
}
}
followProject = followProject.sort((a, b) => {
return b.up_time - a.up_time;
Expand All @@ -122,6 +140,24 @@ class ProjectList extends Component {
});
projectData = [...followProject, ...];

subGroup.forEach(item => {
if (projectDataWithGroupMap[item._id]) {
projectDataWithGroup.push({
subGroupName: item.name,
subGroupId: item._id,
children: [...projectDataWithGroupMap[item._id]]
});
} else {
noGroup = noGroup.concat(projectDataWithGroupMap[item._id] || []);
}
});
projectDataWithGroup.push({
subGroupName: '未分类',
subGroupId: -1,
children: [...noGroup]
});


const isShow = /(admin)|(owner)|(dev)/.test(this.props.currGroup.role);

const Follow = () => {
Expand Down Expand Up @@ -193,17 +229,26 @@ class ProjectList extends Component {
}) : <ErrMsg type="noProject" />} */}
{this.props.currGroup.type === 'private' ? (
<OwnerSpace />
) : projectData.length ? (
projectData.map((item, index) => {
) : projectDataWithGroup.length ? (
projectDataWithGroup.map(item => {
return (
<Col xs={8} lg={6} xxl={4} key={index}>
<ProjectCard
projectData={item}
callbackResult={this.receiveRes}
isShow={isShow}
/>
</Col>
);
item.children.length > 0 ? (
<React.Fragment key={item.subGroupId}>
<Col span={24} className="sub-group-title" >{item.subGroupName}</Col>
{item.children.map((project,index) => {
return (
<Col xs={8} lg={6} xxl={4} key={index}>
<ProjectCard
projectData={project}
callbackResult={this.receiveRes}
isShow={isShow}
/>
</Col>
)
})}
</React.Fragment>
) : null
)
})
) : (
<ErrMsg type="noProject" />
Expand Down
7 changes: 7 additions & 0 deletions client/containers/Group/ProjectList/ProjectList.scss
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,10 @@
cursor: not-allowed;
opacity: 0.5;
}

.sub-group-title {
font-size: 16px;
line-height: 40px;
border-bottom: 1px solid #eee;
margin-bottom: 10px;
}
90 changes: 90 additions & 0 deletions client/containers/Group/SubGroupSetting/SubGroupSetting.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
/*
* @Author: caizeyong
* @Date: 2021-02-03 18:45:15
* @Description:
*/
import React, { PureComponent as Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { fetchSubGroupList } from '../../../reducer/modules/subGroup.js'
import { Input, Button, message } from 'antd';
import Axios from 'axios';
import './SubGroupSetting.scss'

@connect(
state => {
return {
currGroup: state.group.currGroup,
subGroupList: state.subGroup.subGroupList
}
},
{
fetchSubGroupList
}
)
class SubGroupSetting extends Component {
constructor(props) {
super(props);
this.state = {
name: ''
}
}
static propTypes = {
currGroup: PropTypes.object,
subGroupList: PropTypes.array,
fetchSubGroupList: PropTypes.func
};
handleClick = () => {
let isExists = this.props.subGroupList.some(g => {
return g.name === this.state.name.trim()
})
if (isExists) {
message.error('分类已存在,请勿重复添加');
return
}
Axios.post('/api/subgroup/add', {
name: this.state.name.trim(),
group_id: this.props.currGroup._id
}).then(res => {
console.log(res);
this.props.fetchSubGroupList(this.props.currGroup._id);
this.setState({
name: ''
});
})
}
handleChange = (e) => {
this.setState({
name: e.target.value
})
}
render () {
return (
<div className="sub-group">
<div className="sub-group__form">
<div>
<Input placeholder="请输入分类名称" value={this.state.name} onChange={this.handleChange} onPressEnter={this.handleClick}/>
</div>
<Button type="primary" onClick={this.handleClick}>添加</Button>
</div>
<div className="sub-group__title">已添加分组</div>
<ul className="sub-group__list">
{this.props.subGroupList.map(subGroup => (
<li key={subGroup._id}>{subGroup.name}</li>
))}
</ul>
</div>
)
}
componentWillReceiveProps(nextProps) {
// 切换分组时,更新分组信息并关闭删除分组操作
if (this.props.currGroup._id !== nextProps.currGroup._id) {
this.props.fetchSubGroupList(nextProps.currGroup._id)
}
}
componentDidMount () {
this.props.fetchSubGroupList(this.props.currGroup._id)
}
}

export default SubGroupSetting;
Loading

0 comments on commit e4888b4

Please sign in to comment.