opti: filtering interface on the server instead of client

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

@@ -43,6 +43,7 @@ class InterfaceList extends Component {
     this.state = {
       visible: false,
       data: [],
+      filteredInfo: {},
       catid: null,
       total: null,
       current: 1
@@ -75,18 +76,21 @@ class InterfaceList extends Component {
       let option = {
         page: this.state.current,
         limit,
-        project_id: projectId
+        project_id: projectId,
+        status: this.state.filteredInfo.status,
+        tag: this.state.filteredInfo.tag
       };
       await this.props.fetchInterfaceList(option);
     } else if (isNaN(params.actionId)) {
       let catid = params.actionId.substr(4);
-      this.setState({ catid: +catid });
+      this.setState({catid: +catid});
       let option = {
         page: this.state.current,
         limit,
-        catid
+        catid,
+        status: this.state.filteredInfo.status,
+        tag: this.state.filteredInfo.tag
       };
-
       await this.props.fetchInterfaceCatList(option);
     }
   };
@@ -109,10 +113,13 @@ class InterfaceList extends Component {
       message.success('接口集合简介更新成功');
     });
   };
+
   handleChange = (pagination, filters, sorter) => {
     this.setState({
-      sortedInfo: sorter
-    });
+      current: pagination.current || 1,
+      sortedInfo: sorter,
+      filteredInfo: filters
+    }, () => this.handleRequest(this.props));
   };
 
   componentWillMount() {
@@ -176,20 +183,25 @@ class InterfaceList extends Component {
     }
   };
 
-  changePage = current => {
-    this.setState(
-      {
-        current: current
-      },
-      () => this.handleRequest(this.props)
-    );
-  };
+  //page change will be processed in handleChange by pagination
+  // changePage = current => {
+  //   if (this.state.current !== current) {
+  //     this.setState(
+  //       {
+  //         current: current
+  //       },
+  //       () => this.handleRequest(this.props)
+  //     );
+  //   }
+  // };
 
   render() {
     let tag = this.props.curProject.tag;
-    let filter = tag.map(item => {
-      return { text: item.name, value: item.name };
+    let tagFilter = tag.map(item => {
+      return {text: item.name, value: item.name};
     });
+    let {filteredInfo} = this.state;
+    filteredInfo = filteredInfo || {};
 
     const columns = [
       {
@@ -299,7 +311,7 @@ class InterfaceList extends Component {
           let textMsg = text.length > 0 ? text.join('\n') : '未设置';
           return <div className="table-desc">{textMsg}</div>;
         },
-        filters: filter,
+        filters: tagFilter,
         onFilter: (value, record) => {
           return record.tag.indexOf(value) >= 0;
         }
@@ -341,8 +353,8 @@ class InterfaceList extends Component {
     const pageConfig = {
       total: total,
       pageSize: limit,
-      current: this.state.current,
-      onChange: this.changePage
+      current: this.state.current
+      // onChange: this.changePage
     };
 
     const isDisabled = this.props.catList.length === 0;

client/reducer/modules/interface.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import qs from 'qs';
 // Actions
 const INIT_INTERFACE_DATA = 'yapi/interface/INIT_INTERFACE_DATA';
 const FETCH_INTERFACE_DATA = 'yapi/interface/FETCH_INTERFACE_DATA';
@@ -93,7 +94,7 @@ export function updateInterfaceData(updata) {
 }
 
 export async function deleteInterfaceData(id) {
-  let result = await axios.post('/api/interface/del', { id: id });
+  let result = await axios.post('/api/interface/del', {id: id});
   return {
     type: DELETE_INTERFACE_DATA,
     payload: result
@@ -109,7 +110,7 @@ export async function saveImportData(data) {
 }
 
 export async function deleteInterfaceCatData(id) {
-  let result = await axios.post('/api/interface/del_cat', { catid: id });
+  let result = await axios.post('/api/interface/del_cat', {catid: id});
   return {
     type: DELETE_INTERFACE_CAT_DATA,
     payload: result
@@ -134,7 +135,12 @@ export async function fetchInterfaceListMenu(projectId) {
 }
 
 export async function fetchInterfaceList(params) {
-  let result = await axios.get('/api/interface/list', { params });
+  let result = await axios.get('/api/interface/list', {
+    params,
+    paramsSerializer: params => {
+      return qs.stringify(params, {indices: false})
+    }
+  })
   return {
     type: FETCH_INTERFACE_LIST,
     payload: result
@@ -142,7 +148,12 @@ export async function fetchInterfaceList(params) {
 }
 
 export async function fetchInterfaceCatList(params) {
-  let result = await axios.get('/api/interface/list_cat', { params });
+  let result = axios.get('/api/interface/list_cat', {
+    params,
+    paramsSerializer: params => {
+      return qs.stringify(params, {indices: false})
+    }
+  })
   return {
     type: FETCH_INTERFACE_CAT_LIST,
     payload: result

package.json

@@ -81,7 +81,8 @@
     "tslib": "1.8.0",
     "underscore": "1.8.3",
     "url": "0.11.0",
-    "yapi-plugin-qsso": "^1.1.0"
+    "yapi-plugin-qsso": "^1.1.0",
+    "qs": "^6.7.0"
   },
   "devDependencies": {
     "antd": "3.2.2",

server/controllers/interface.js

@@ -329,7 +329,7 @@ class interfaceController extends baseController {
 
   async save(ctx) {
     let params = ctx.params;
-    
+
     if (!this.$tokenAuth) {
       let auth = await this.checkAuth(params.project_id, 'project', 'edit');
       if (!auth) {
@@ -449,6 +449,8 @@ class interfaceController extends baseController {
     let project_id = ctx.params.project_id;
     let page = ctx.request.query.page || 1,
       limit = ctx.request.query.limit || 10;
+    let status = ctx.request.query.status,
+      tag = ctx.request.query.tag;
     let project = await this.projectModel.getBaseInfo(project_id);
     if (!project) {
       return (ctx.body = yapi.commons.resReturn(null, 407, '不存在的项目'));
@@ -463,14 +465,31 @@ class interfaceController extends baseController {
     }
 
     try {
-      let result;
+      let result, count;
       if (limit === 'all') {
         result = await this.Model.list(project_id);
+        count = await this.Model.listCount({project_id});
       } else {
-        result = await this.Model.listWithPage(project_id, page, limit);
+        let option = {project_id};
+        if (status) {
+          if (Array.isArray(status)) {
+            option.status = {"$in": status};
+          } else {
+            option.status = status;
+          }
+        }
+        if (tag) {
+          if (Array.isArray(tag)) {
+            option.tag = {"$in": tag};
+          } else {
+            option.tag = tag;
+          }
+        }
+
+        result = await this.Model.listByOptionWithPage(option, page, limit);
+        count = await this.Model.listCount(option);
       }
 
-      let count = await this.Model.listCount({ project_id });
 
       ctx.body = yapi.commons.resReturn({
         count: count,
@@ -497,6 +516,8 @@ class interfaceController extends baseController {
     let catid = ctx.request.query.catid;
     let page = ctx.request.query.page || 1,
       limit = ctx.request.query.limit || 10;
+    let status = ctx.request.query.status,
+      tag = ctx.request.query.tag;
 
     if (!catid) {
       return (ctx.body = yapi.commons.resReturn(null, 400, 'catid不能为空'));
@@ -511,9 +532,26 @@ class interfaceController extends baseController {
         }
       }
 
-      let result = await this.Model.listByCatidWithPage(catid, page, limit);
 
-      let count = await this.Model.listCount({ catid });
+      let option = {catid}
+      if (status) {
+        if (Array.isArray(status)) {
+          option.status = {"$in": status};
+        } else {
+          option.status = status;
+        }
+      }
+      if (tag) {
+        if (Array.isArray(tag)) {
+          option.tag = {"$in": tag};
+        } else {
+          option.tag = tag;
+        }
+      }
+
+      let result = await this.Model.listByOptionWithPage(option, page, limit);
+
+      let count = await this.Model.listCount(option);
 
       ctx.body = yapi.commons.resReturn({
         count: count,
@@ -620,7 +658,7 @@ class interfaceController extends baseController {
       },
       params
     );
-    
+
     if (params.path) {
       let http_path;
       http_path = url.parse(params.path, true);
@@ -717,7 +755,7 @@ class interfaceController extends baseController {
       );
 
       let project = await this.projectModel.getBaseInfo(interfaceData.project_id);
-    
+
       let interfaceUrl = `${ctx.request.origin}/project/${
         interfaceData.project_id
       }/interface/api/${id}`;

server/models/interface.js

@@ -239,6 +239,20 @@ class interfaceModel extends baseModel {
       .exec();
   }
 
+  listByOptionWithPage(option, page, limit) {
+    page = parseInt(page);
+    limit = parseInt(limit);
+    return this.model
+      .find(option)
+      .sort({index: 1})
+      .skip((page - 1) * limit)
+      .limit(limit)
+      .select(
+        '_id title uid path method project_id catid edit_uid api_opened status add_time up_time, index, tag'
+      )
+      .exec();
+  }
+
   listByInterStatus(catid, status) {
     let option = {};
     if (status === 'open') {