feat: 支持接口分类的多级目录 以及yapi 导入导出json 数据按照多级目录形式跳转

README.md

@@ -1,3 +1,16 @@
+# Why fork YApi ? What I did ?
+yapi 目前尚不支持接口多级分类，因此按照[社区项目](https://github.com/herenwei/yapi)的[方式](https://github.com/herenwei/yapi/commit/448a6486110858326b2756b9f85bceafcd158446#)进行了二次开发。在该项目的基础上，我调整了拖拽接口功能（分类不支持拖拽，但可以设置排序值来决定顺序），支持接口可拖拽排序或拖入到别的分类下（该项目仅支持同级目录下的接口排序）。
+
+除了以上不同点外，yapi本身的导入导出`json`数据也要配套的进行调整，否则多级目录导出的数据导入到别的项目将导致不直接包含接口的目录丢失。
+
+由于业务需要，对 [RAP1](https://github.com/thx/RAP) 导出的接口数据也做了导入支持，在插件 [rap1平台数据导入](https://github.com/wxxcarl/yapi-plugin-import-rap) 基础上按照多级目录适配做了调整，发布在 [这里](https://github.com/zeyongTsai/yapi-plugin-import-rap)。
+
+postman 也是支持多级目录的，只有这样改才能更好的适配，目前还没对 postman 的数据做适配，欢迎大家一起开发。
+
+以下是官方原文档：
+
+----
+
 ## YApi 可视化接口管理平台
 
 体验地址：

client/containers/Project/Interface/InterfaceList/AddInterfaceCatForm.js

@@ -1,6 +1,6 @@
 import React, { PureComponent as Component } from 'react';
 import PropTypes from 'prop-types';
-import { Form, Input, Button } from 'antd';
+import { Form, Input, Button, TreeSelect, InputNumber } from 'antd';
 const FormItem = Form.Item;
 function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
@@ -10,7 +10,8 @@ class AddInterfaceForm extends Component {
  form: PropTypes.object,
  onSubmit: PropTypes.func,
  onCancel: PropTypes.func,
- catdata: PropTypes.object
+ catdata: PropTypes.object,
+ catlist: PropTypes.array
  };
  handleSubmit = e => {
  e.preventDefault();
@@ -34,8 +35,40 @@ class AddInterfaceForm extends Component {
  }
  };
 
+ const currentId = this.props.catdata ? this.props.catdata._id + '' || 0 + '' : 0 + ''
+ const temp = [...this.props.catlist];
+ temp.forEach(f => {
+ f.children = temp.filter(g => g.parent_id == f._id);
+ f.children.forEach(x => {
+ x.value = x._id + '';
+ x.title = x.name;
+ x.selectable = (x._id + '') != currentId
+ });
+ });
+ const treeData = temp.filter(f => f.parent_id == 0);
+ treeData.forEach(x => {
+ x.value = x._id + '';
+ x.title = x.name;
+ x.selectable = (x._id + '') != currentId
+ });
+
+ treeData.splice(0, 0, {
+ _id: 0,
+ value: 0 + '',
+ title: '空',
+ selectable: (0 + '') != currentId
+ });
+
  return (
  <Form onSubmit={this.handleSubmit}>
+ <FormItem {...formItemLayout} label="父级分类">
+ {getFieldDecorator('parent_id', {
+ initialValue: this.props.catdata ? this.props.catdata.parent_id + '' || null : 0 + ''
+ })(
+ <TreeSelect treeData={treeData}>
+ </TreeSelect>
+ )}
+ </FormItem>
  <FormItem {...formItemLayout} label="分类名">
  {getFieldDecorator('name', {
  rules: [
@@ -52,7 +85,11 @@ class AddInterfaceForm extends Component {
  initialValue: this.props.catdata ? this.props.catdata.desc || null : null
  })(<Input placeholder="备注" />)}
  </FormItem>
-
+ <FormItem {...formItemLayout} label="排序">
+ {getFieldDecorator('index', {
+ initialValue: this.props.catdata ? this.props.catdata.index + '' || null : null
+ })(<InputNumber placeholder="排序（从小到大）" />)}
+ </FormItem> 
  <FormItem className="catModalfoot" wrapperCol={{ span: 24, offset: 8 }}>
  <Button onClick={this.props.onCancel} style={{ marginRight: '10px' }}>
  取消

client/containers/Project/Interface/InterfaceList/InterfaceEditForm.js

@@ -6,7 +6,7 @@ import constants from '../../../../constants/variable.js';
 import { handlePath, nameLengthLimit } from '../../../../common.js';
 import { changeEditStatus } from '../../../../reducer/modules/interface.js';
 import json5 from 'json5';
-import { message, Affix, Tabs, Modal } from 'antd';
+import { message, Affix, Tabs, Modal, TreeSelect } from 'antd';
 import EasyDragSort from '../../../../components/EasyDragSort/EasyDragSort.js';
 import mockEditor from 'client/components/AceEditor/mockEditor';
 import AceEditor from 'client/components/AceEditor/AceEditor';
@@ -803,6 +803,26 @@ class InterfaceEditForm extends Component {
 
  const DEMOPATH = '/api/user/{id}';
 
+ const temp = [...this.props.cat];
+ temp.forEach(f => {
+ f.children = temp.filter(g => g.parent_id == f._id);
+ f.children.forEach(x => {
+ x.value = x._id + '';
+ x.title = x.name;
+ });
+ });
+ const treeData = temp.filter(f => f.parent_id == 0);
+ treeData.forEach(x => {
+ x.value = x._id + '';
+ x.title = x.name;
+ });
+
+ treeData.splice(0, 0, {
+ _id: 0,
+ value: 0 + '',
+ title: '空'
+ });
+
  return (
  <div>
  <Modal
@@ -839,15 +859,8 @@ class InterfaceEditForm extends Component {
  initialValue: this.state.catid + '',
  rules: [{ required: true, message: '请选择一个分类' }]
  })(
- <Select placeholder="请选择一个分类">
- {this.props.cat.map(item => {
- return (
- <Option key={item._id} value={item._id + ''}>
- {item.name}
- </Option>
- );
- })}
- </Select>
+ <TreeSelect treeData={treeData}>
+ </TreeSelect>
  )}
  </FormItem>
 

client/containers/Project/Interface/InterfaceList/InterfaceList.js

@@ -2,7 +2,7 @@ import React, { PureComponent as Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import axios from 'axios';
-import { Table, Button, Modal, message, Tooltip, Select, Icon } from 'antd';
+import { Table, Button, Modal, message, Tooltip, TreeSelect, Select, Icon } from 'antd';
 import AddInterfaceForm from './AddInterfaceForm';
 import {
  fetchInterfaceListMenu,
@@ -249,20 +249,31 @@ class InterfaceList extends Component {
  key: 'catid',
  width: 28,
  render: (item, record) => {
+ const temp = [...this.props.catList];
+ temp.forEach(f => {
+ f.children = temp.filter(g => g.parent_id == f._id);
+ f.children.forEach(x => {
+ x.value = x._id + '';
+ x.title = x.name;
+ x.selectable = (x._id + '') != item + ''
+ });
+ });
+ const treeData = temp.filter(f => f.parent_id == 0);
+ treeData.forEach(x => {
+ x.value = x._id + '';
+ x.title = x.name;
+ x.selectable = (x._id + '') != item + ''
+ });
+
+ treeData.splice(0, 0, {
+ _id: 0,
+ value: 0 + '',
+ title: '空',
+ selectable: (0 + '') != item + ''
+ });
  return (
- <Select
- value={item + ''}
- className="select path"
- onChange={catid => this.changeInterfaceCat(record._id, catid)}
- >
- {this.props.catList.map(cat => {
- return (
- <Option key={cat.id + ''} value={cat._id + ''}>
- <span>{cat.name}</span>
- </Option>
- );
- })}
- </Select>
+ <TreeSelect className="select path" treeData={treeData} onChange={catid => this.changeInterfaceCat(record._id, catid)} value={item + ''}>
+ </TreeSelect>
  );
  }
  },