feat: interfaceList页实现数据分页

CHANGELOG.md

@@ -2,7 +2,13 @@
 
 #### Feature
 
-*  增加测试集合列表的拖动功能
+* 增加测试集合列表的拖动功能
+* interfaceList页实现数据分页
+
+#### Bug Fixed
+
+* 将部分数据拷贝变成使用immer
+
 
 ### v1.3.6
 

client/components/TimeLine/TimeLine.js

@@ -164,15 +164,14 @@ class TimeTree extends Component {
   }
 
   async getApiList() {
-    let result = await this.props.fetchInterfaceList(this.props.typeid);
+    let result = await this.props.fetchInterfaceList({project_id: this.props.typeid, limit: 'all'});
     this.setState({
-      apiList: result.payload.data.data
+      apiList: result.payload.data.data.list
     })
   }
 
   handleSelectApi = (interfaceId) => {
     this.curInterfaceId = interfaceId;
-    console.log(interfaceId)
     this.props.fetchNewsData(this.props.typeid, this.props.type, 1, 10, interfaceId)
   }
 

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

@@ -103,11 +103,7 @@ class AddInterfaceForm extends Component {
             <Input onBlur={this.handlePath} addonBefore={prefixSelector} placeholder="/path" />
             )}
         </FormItem>
-        {/* <FormItem
-        >
-          <span>注： 详细的接口数据可以在编辑页面中添加</span>
-        </FormItem> */}
-         <FormItem
+        <FormItem
           {...formItemLayout}
           label="注"
         >

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

@@ -11,6 +11,7 @@ import { Link } from 'react-router-dom';
 import variable from '../../../../constants/variable';
 import './Edit.scss';
 const Option = Select.Option;
+const limit = 10;
 
 @connect(
   state => {
@@ -19,7 +20,9 @@ const Option = Select.Option;
       curProject: state.project.currProject,
       catList: state.inter.list,
       totalTableList: state.inter.totalTableList,
-      catTableList: state.inter.catTableList
+      catTableList: state.inter.catTableList,
+      totalCount: state.inter.totalCount,
+      count: state.inter.count
     }
   }, {
     fetchInterfaceListMenu,
@@ -32,7 +35,9 @@ class InterfaceList extends Component {
     this.state = {
       visible: false,
       data: [],
-      catid: null
+      catid: null,
+      total: null,
+      current: 1
     }
   }
 
@@ -46,7 +51,9 @@ class InterfaceList extends Component {
     fetchInterfaceList: PropTypes.func,
     fetchInterfaceCatList: PropTypes.func,
     totalTableList: PropTypes.array,
-    catTableList: PropTypes.array
+    catTableList: PropTypes.array,
+    totalCount: PropTypes.number,
+    count: PropTypes.number
     
   }
 
@@ -57,11 +64,22 @@ class InterfaceList extends Component {
       this.setState({
         catid: null
       })
-      await this.props.fetchInterfaceList(projectId);
+      let option ={
+        page: this.state.current,
+        limit,
+        project_id: projectId
+      }
+      await this.props.fetchInterfaceList(option);
     } else if (isNaN(params.actionId)) {
       let catid = params.actionId.substr(4)
       this.setState({ catid: +catid })
-      await this.props.fetchInterfaceCatList(catid);
+      let option ={
+        page: this.state.current,
+        limit,
+        catid
+      }
+
+      await this.props.fetchInterfaceCatList(option);
     }
   }
 
@@ -80,9 +98,14 @@ class InterfaceList extends Component {
 
   componentWillReceiveProps(nextProps) {
     let _actionId = nextProps.match.params.actionId;
+    
     if (this.actionId !== _actionId) {
       this.actionId = _actionId;
-      this.handleRequest(nextProps)
+      this.setState({
+        current: 1
+      }, ()=>this.handleRequest(nextProps))
+      
+      
     } 
    
   }
@@ -129,6 +152,12 @@ class InterfaceList extends Component {
     }
   }
 
+  changePage = (current) => {
+    this.setState({
+      current: current
+    }, () => this.handleRequest(this.props))
+  }
+
   render() {
 
     const columns = [{
@@ -202,11 +231,15 @@ class InterfaceList extends Component {
     //   return item;
     // }) : [];
     let data = [];
+    let total = 0;
     const { params } = this.props.match;
     if (!params.actionId) {
-      data = this.props.totalTableList
+      data = this.props.totalTableList;
+      total = this.props.totalCount;
     } else if (isNaN(params.actionId)) {
-      data = this.props.catTableList
+      data = this.props.catTableList;
+      total = this.props.count
+
     }
 
     data = data.map(item => {
@@ -214,11 +247,16 @@ class InterfaceList extends Component {
       return item;
     })
 
-
+    const pageConfig = {
+      total: total,
+      pageSize: limit,
+      current: this.state.current,
+      onChange: this.changePage
+    }
 
     return (
       <div style={{ padding: '24px' }}>
-        <h2 className="interface-title" style={{ display: 'inline-block', margin: 0 }}>{intername ? intername : '全部接口'}共 ({data.length}) 个</h2>
+        <h2 className="interface-title" style={{ display: 'inline-block', margin: 0 }}>{intername ? intername : '全部接口'}共 ({total}) 个</h2>
 
         <Button style={{ float: 'right' }} type="primary" onClick={() => this.setState({ visible: true })}>添加接口</Button>
         <div >
@@ -228,7 +266,7 @@ class InterfaceList extends Component {
         </div>
         <Table
           className="table-interfacelist"
-          // pagination={false}
+          pagination={pageConfig}
           columns={columns}
           onChange={this.handleChange}
           dataSource={data}

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

@@ -204,7 +204,7 @@ class InterfaceMenu extends Component {
       async onOk() {
         await that.props.deleteInterfaceData(id, that.props.projectId)
         await that.getList()
-        await that.props.fetchInterfaceCatList(catid)
+        await that.props.fetchInterfaceCatList({catid})
         ref.destroy()
         that.props.history.push('/project/' + that.props.match.params.id + '/interface/api/cat_' + catid)
       },
@@ -225,7 +225,7 @@ class InterfaceMenu extends Component {
         await that.props.deleteInterfaceCatData(catid, that.props.projectId)
         await that.getList()
         // await that.props.getProject(that.props.projectId)
-        await that.props.fetchInterfaceList(that.props.projectId)
+        await that.props.fetchInterfaceList({project_id: that.props.projectId})
         that.props.history.push('/project/' + that.props.match.params.id + '/interface/api')
         ref.destroy()
       },

client/reducer/modules/interface.js

@@ -19,7 +19,9 @@ const initialState = {
   list: [],
   editStatus: false, // 记录编辑页面是否有编辑,
   totalTableList: [],
-  catTableList: []
+  catTableList: [],
+  count:0,
+  totalCount: 0
 
 }
 
@@ -53,14 +55,16 @@ export default (state = initialState, action) => {
     case FETCH_INTERFACE_LIST: {
       return {
         ...state,
-        totalTableList: action.payload.data.data
+        totalTableList: action.payload.data.data.list,
+        totalCount: action.payload.data.data.count
       };
     }
 
     case FETCH_INTERFACE_CAT_LIST: {
       return {
         ...state,
-        catTableList: action.payload.data.data
+        catTableList: action.payload.data.data.list,
+        count: action.payload.data.data.count
       };
     }
     default:
@@ -135,16 +139,16 @@ export async function fetchInterfaceListMenu(projectId) {
 }
 
 
-export async function fetchInterfaceList(projectId) {
-  let result = await axios.get('/api/interface/list?project_id=' + projectId);
+export async function fetchInterfaceList(params) {
+  let result = await axios.get('/api/interface/list',{params});
   return {
     type: FETCH_INTERFACE_LIST,
     payload: result
   }
 }
 
-export async function fetchInterfaceCatList(catid) {
-  let result = await axios.get('/api/interface/list_cat?catid=' + catid);
+export async function fetchInterfaceCatList(params) {
+  let result = await axios.get('/api/interface/list_cat', {params});
   return {
     type: FETCH_INTERFACE_CAT_LIST,
     payload: result

exts/yapi-plugin-statistics/statisticsClientPage/index.scss

@@ -4,12 +4,16 @@
   @include row-width-limit;
   margin: 0 auto .24rem;
   margin-top: 24px;
+  min-width: 11.2rem;
+  
+  
   .content {
     -webkit-box-flex: 1;
     padding: 24px;
     width:100%;
     background: #fff;
     min-height: 5rem;
+    // overflow-x: scroll;
   }
   .m-row {
     border-bottom: 1px solid #f0f0f0;

server/controllers/interface.js

@@ -324,11 +324,15 @@ class interfaceController extends baseController {
    * @category interface
    * @foldnumber 10
    * @param {Number}   project_id 项目id，不能为空
+   * @param {Number}   page 当前页
+   * @param {Number}   limit 每一页限制条数
    * @returns {Object}
    * @example ./api/interface/list.json
    */
   async list(ctx) {
     let project_id = ctx.request.query.project_id;
+    let page = ctx.request.query.page || 1,
+    limit = ctx.request.query.limit || 10;
     let project = await this.projectModel.getBaseInfo(project_id);
     if (!project) {
       return ctx.body = yapi.commons.resReturn(null, 407, '不存在的项目');
@@ -343,8 +347,20 @@ class interfaceController extends baseController {
     }
 
     try {
-      let result = await this.Model.list(project_id);
-      ctx.body = yapi.commons.resReturn(result);
+      let result
+      if(limit === 'all'){
+        result = await this.Model.list(project_id);
+      } else{
+        result = await this.Model.listWithPage(project_id, page, limit);
+      }
+      
+      let count = await this.Model.listCount({project_id});
+      console.log('count', count);
+      ctx.body = yapi.commons.resReturn({
+        count: count,
+        total: Math.ceil(count / limit),
+        list: result
+      });
       yapi.emitHook('interface_list', project_id).then();
     } catch (err) {
       ctx.body = yapi.commons.resReturn(null, 402, err.message);
@@ -360,23 +376,35 @@ class interfaceController extends baseController {
   }
 
   async listByCat(ctx) {
+    console.log(ctx.request.query)
     let catid = ctx.request.query.catid;
+    let page = ctx.request.query.page || 1,
+    limit = ctx.request.query.limit || 10;
+    console.log(catid)
     if (!catid) {
       return ctx.body = yapi.commons.resReturn(null, 400, 'catid不能为空');
     }
     try {
       let catdata = await this.catModel.get(catid);
+     
       let project = await this.projectModel.getBaseInfo(catdata.project_id);
       if (project.project_type === 'private') {
         if (await this.checkAuth(project._id, 'project', 'view') !== true) {
           return ctx.body = yapi.commons.resReturn(null, 406, '没有权限');
         }
       }
-      let result = await this.Model.listByCatid(catid)
+      
+      let result = await this.Model.listByCatidWithPage(catid, page, limit)
 
-      ctx.body = yapi.commons.resReturn(result);
+      let count = await this.Model.listCount({catid});
+      console.log('count', count);
+      ctx.body = yapi.commons.resReturn({
+        count: count,
+        total: Math.ceil(count / limit),
+        list: result
+      });
     } catch (err) {
-      ctx.body = yapi.commons.resReturn(null, 402, err.message);
+      ctx.body = yapi.commons.resReturn(null, 402, err.message+'1');
     }
 
   }

server/models/interface.js

@@ -141,6 +141,20 @@ class interfaceModel extends baseModel {
       .exec();
   }
 
+  listWithPage(project_id, page, limit) {
+    page = parseInt(page);
+    limit = parseInt(limit);
+    return this.model.find({
+      project_id: project_id
+    })
+      .sort({ title: 1 })
+      .skip((page - 1) * limit)
+      .limit(limit)
+      .select('_id title uid path method project_id catid edit_uid status add_time up_time')
+      .exec();
+
+  }
+
   listByPid(project_id) {
     return this.model.find({
       project_id: project_id
@@ -164,6 +178,20 @@ class interfaceModel extends baseModel {
       .exec();
   }
 
+  listByCatidWithPage(catid, page, limit) {
+    page = parseInt(page);
+    limit = parseInt(limit);
+    return this.model.find({
+      catid: catid
+    })
+      .sort({ title: 1 })
+      .skip((page - 1) * limit)
+      .limit(limit)
+      .select('_id title uid path method project_id catid edit_uid status add_time up_time')
+      .exec();
+
+  }
+
   listByInterStatus(catid, status){
     let option ={}
     if(status === 'open') {
@@ -222,6 +250,10 @@ class interfaceModel extends baseModel {
       .exec();
   }
 
+  listCount(option) {
+    return this.model.count(option);
+}
+
 
 }