前端分页规范

基于项目中分页经常出错的情况，整理以下常见情景及对应解决办法：

常见场景

1. 多tab页面，每个页面都有分页，tab切换分页出错
2. 页面中有多个搜索项，搜索后或清空搜索项分页出错
3. 新增、编辑、删除后分页显示错误

解决方案

1. 多tab页代码不要放在一个文件中，每个tab页放在独立的文件中
2. 一般性搜索和普通拉列表公用一个接口，因此前端也只需写一个获取数据函数
3. 新增、编辑、删除成功后立即调用获取数据函数
4. 删除后判断是否删除本页最后一条记录逻辑，如删除最后一条记录，跳转上一页
   (前端代码一个文件代码量建议不超过500行)

技术实现

1. 多tab页面分离，参考智慧楼宇代码src/views/video/videoDevice.vue文件及涉及相关代码

//关键代码示例
    <el-tabs style="margin-top: 10px" v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
        //recordTable组件是单个tab分支页面
        <recordTable :search="form" type="first" ref="first"/>
      </el-tab-pane>
      <el-tab-pane label="识别成功" name="second">
        <recordTable :search="form" type="second" ref="second"/>
      </el-tab-pane>
      <el-tab-pane label="识别失败" name="third">
        <recordTable :search="form" type="third" ref="third"/>
      </el-tab-pane>
    </el-tabs>

2. 一般性搜索和普通拉列表公用一个接口，因此前端也只需写一个获取数据函数
   （请参考智慧楼宇代码src/views/video/recordTable.vue）
3. 删除后判断是否删除本页最后一条记录逻辑，如删除最后一条记录，跳转上一页
   删除成功后，拉取数据的接口中添加逻辑判断（参考智慧楼宇代码src/views/liftManage.vue中deleteMember函数方法）

       if（返回数据条数=0 && 当前页数>1）{
              //设置当前页码-1
              //重新调用获取数据函数
       }else{
              //处理数据相关代码
       }

4.开发小技巧，如遇两个页面很类似时，可使用vue的mixins混合技巧
（参考智慧楼宇代码src/views/system/devicePass.vue中deleteMember函数方法），代码如下

<script type="text/javascript">
    import passSetting from './password'
    import { restCorpDevicePassword } from '@/api/login'
    export default {
        mixins: [ passSetting ],
        methods: {
            updatePass(){        
              this.$refs.passForm.validate((valid) => {
                if(valid){
                    if(this.passForm.password != this.passForm.repass){
                      this.$message.error('两次密码输入不一致!')
                      return; 
                    }
                   let params = {};
                    params.password = this.aesEncry(this.passForm.password);
                    params.corpId = this.corpId;
                    params.code = this.aesEncry(this.passForm.code);
                    params.phone = this.aesEncry(this.phone);
                    restCorpDevicePassword(params).then(response => {
                        if(response.status == 200){
                          if (response.data.error == 200) {
                              this.$message.success('密码重置成功');
                            }else{
                              this.$message.error(response.data.error_description);
                            }
                            
                        }else{
                          this.$message.error(response.data.error_description);
                        }
                    })
                }
              })
            },
        }
    }
</script>