小程序选人控件实现多选及多层级无规则嵌套

引言

在很多系统中都有选择联系人的需求，市面上也没什么好的参照，产品经理看企业微信的选人挺好用的，就说参照这个做一个吧。。。算了，还是试着做吧，企业微信的选人的确做的挺好，不得不佩服。

设计

在设计之初，首先要明确业务需求：

1. 支持多选
2. 支持多层级
3. 支持无规则嵌套
4. 最下面显示和操作已选人员的footer

首先考虑从显示样式入手，footer可以选择一个典型的浮层的方式，内容采用类似card的设计，整体效果还可以。
样式确定以后，考虑组件交互，点击card的时候该做什么事情呢？思考片刻，应该弹出已选人的列表，可以删除，继续添加人员，可以点击底部按钮完成选人。

首先需要实现一个人员列表的组件，以及已选人员列表的组件，接下来就是最关键的选人页面的实现了。

选人页面

最终实现的选人页面效果如下图所示：

这是第一个页面，是个人通讯录，点击某一个分组，会显示分组内的人员，同时在这个页面上可以选择组织架构。组织架构有两级，如果点击一级组织架构会显示该组织架构下的二级组织架构，如果选择的是二级组织架构，会显示二级组织架构下的所有人员。

选中人员以后会添加到已选人员列表中，列表支持增删改查。

点击“完成”按钮，即可完成选人操作。

技术实现

小程序选人控件的实现主要涉及以下几个方面：

• 数据结构的设计 ：选人控件需要存储选中的人员信息，因此需要设计一个合理的数据结构来存储这些信息。
• 界面的设计 ：选人控件需要提供一个友好的用户界面，以便用户可以轻松地选择人员。
• 交互逻辑的实现 ：选人控件需要实现各种交互逻辑，例如选中人员、删除人员、完成选人等。

数据结构的设计

选人控件需要存储选中的人员信息，因此需要设计一个合理的数据结构来存储这些信息。本控件采用JSON对象来存储选中的人员信息，JSON对象包含以下字段：

• id ：人员的ID
• name ：人员的姓名
• avatar ：人员的头像
• department ：人员的部门
• position ：人员的职位

界面的设计

选人控件需要提供一个友好的用户界面，以便用户可以轻松地选择人员。本控件采用列表的形式来显示人员信息，列表中包含人员的姓名、头像、部门和职位。

交互逻辑的实现

选人控件需要实现各种交互逻辑，例如选中人员、删除人员、完成选人等。本控件通过以下方式实现这些交互逻辑：

• 选中人员 ：当用户点击人员列表中的某一项时，该人员将被选中。选中的人员将被添加到已选人员列表中。
• 删除人员 ：当用户点击已选人员列表中的某一项时，该人员将被删除。
• 完成选人 ：当用户点击“完成”按钮时，选人操作将完成。选中的人员信息将被返回给调用页面。

结语

小程序选人控件是常见的选择联系人的控件,可实现多选和多层级无规则嵌套。本文介绍了小程序选人控件的实现方法,并提供了示例代码,方便开发者快速上手。