混合分页设计

一、前言

需求：混合数据合并一起排序。

例如：文件和文件夹一起排序

主要思路有：

1. 设计层面：抽象成同一类。例如：文件和文件夹都抽象成文件
2. 实现层面：修改查询实现方式

根据分页特性可分为两种：

1. 传统分页：入参有page，pageSize
2. 滚动分页：入参有hasMore，lastLable

两个接口有两个：

1. 直属组织下（部门和员工）
2. 部门下（子部门和员工）

需求点：

1. 仅展示已开户员工
2. 部门可见性
3. 部门和员工混合排序
4. 增加 nickName 字段：用来名片转发

客户端展示方式：

• 移动端：下拉刷新
• PC 端：左侧栏组织，右侧栏部门和员工

方案一：

增加 deptNum 字段，处理如下：

1. 客户端查询时带上 deptNum 表示：当前有多少个部门
2. 服务端根据 deptNum 来判断：是否有足够的部门

客户端判断列表结束：

• list.size() 列表总数 < limit 数

服务端额外处理：

• 每次查询都需要查询 部门总数 ，和 deptNum 进行比较。
• 补齐操作：查处出的部门数 < limit，则查询员工

1. 查询 "组织" 直属部门和员工：

GET /v2/org/:orgId/dept/list
Parameter: page=10&limit=20&deptNum=10
  
Response:
{
  "code": 0,
  "msg": "OK",
  "data": {
    "list": [
      {
        "id": "dept_5t3rgfutb79e",
        "name": "测试组",
        "type": 0,
        "image": ""
      },
      {
        "id": "emp_123123",
        "name": "名称",
        "type": 1,
        "image": "/image/23ds_efdf_3rgfbvc4ytg.jpg",
        "accountId": "u_123123231",
        "nick": "nick"
      }
    ]
  }
}

请求参数说明：

参数	类型	是否必须	说明
orgId	string	是	组织 id

返回参数说明：

参数	类型	是否必须	说明
orgId	string	是	组织ID
orgName	string	是	组织名称
deptId	string	是	部门ID
deptNmae	string	否	部门名称
parentDeptId	string	否	父级部门的 id
parentDeptName	string	否	父级部门的名称
children	list	是	下级部门（非级联）

1. 查询 "部门" 子部门和员工：

GET /v2/org/:orgId/dept/:deptId/list
Parameter: page=10&limit=20&deptNum=10
  
Response:
{
  "code": 0,
  "msg": "OK",
  "data": {
    "list": [
      {
        "id": "dept_5t3rgfutb79e",
        "name": "测试组",
        "type": 0,
        "image": ""
      },
      {
        "id": "emp_123",
        "name": "名称",
        "type": 1,
        "image": "/image/23ds_efdf_3rgfbvc4ytg.jpg",
        "accountId": "u_123123231",
        "nick": "nick"
      }
    ]
  }
}

方案二：滚动分页

增加三个字段：

• hasMore：还有更多
• lastLabel: 最后一个标签
• type：类别，0 部门，1 员工

处理如下：

• 客户端处理：

• • 首次查询：传参 lastLabel = null
  • 之后查询：传参 lastLabel != null 且有 type

• 服务端处理：

• • 根据 lastLabel 和 type 进行查询
  • 补齐操作

客户端判断列表结束：

• hasMore = false

1. 查询 "组织" 直属部门和员工：

GET /v2/org/:orgId/dept/list
Parameter: limit=20&lastLabel=dept_5t3rgfutb79e&type=0
  
Response:
{
  "code": 0,
  "msg": "OK",
  "data": {
    "hasMore": true,
    "list": [
      {
        "id": "dept_5t3rgfutb79e",
        "name": "测试组",
        "type": 0,
        "image": ""
      },
      {
        "id": "u_accountId",
        "name": "名称",
        "type": 1,
        "image": "http://percent.cn"
      }
    ]
  }
}

1. 查询 "部门" 子部门和员工：

GET /v2/org/:orgId/dept/:deptId/list
Parameter: limit=20&lastLabel=dept_5t3rgfutb79e&type=0
  
Response:
{
  "code": 0,
  "msg": "OK",
  "data": {
    "hasMore": true,
    "list": [
      {
        "id": "dept_5t3rgfutb79e",
        "name": "测试组",
        "type": 0,
        "image": ""
      },
      {
        "id": "u_accountId",
        "name": "名称",
        "type": 1,
        "image": "http://percent.cn"
      }
    ]
  }
}

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情