提示

如果您需要专业团队为您和您的企业订制 AIGC 工具可以通过 cube@spap.com 或者 xujiangwei@spap.com 邮箱联系我们。

Web/HTML5 - 群组管理

在 魔方引擎 里我们可以将若干联系人分为一个 群组 ，在同一群组里联系人能共享群组的数据，群组也是 时信魔方 的基础管理单元，其他模块都会使用到群组数据。

联系人服务模块 提供了操作群组的接口，Group 是描述群组的对象实体， GroupAppendix 群组附录对象描述了群组相关的数据，例如群组的公告等。

快速开始

按照以下步骤运行演示程序：

  1. 安装时信魔方服务器：服务器安装指南 。

  2. 执行以下命令运行演示程序：

    git clone https://gitee.com/shixinhulian/cube-javascript
cd cube-javascript/cube
npm install
npm run example

  3. 打开浏览器（Chrome 或 Firefox）输入：http://localhost:8000/examples/groups-mgmt/ 或 https://localhost:4430/examples/groups-mgmt/ 进入演示程序界面。

  4. 在账号 ID 输入框内输入任意账号 ID，例如：20000 。在账号名称输入框内输入任意名称，点击“ 登录 ”按钮，启动程序并登录账号。

  5. 点击“ 创建群组 ”按钮，依次输入群组名称，选择群组成员完成新群组的创建。

  6. 点击“ 添加群成员 ”按钮可选择需要添加的新成员，点击“ 移除群成员 ”可移除已选择群组成员。

  7. 点击“ 修改群公告 ”按钮，输入新的群组公告。

  8. 点击“ 解散群组 ”按钮，确认之后可解散选中的群组。

群组管理

群组管理


理解示例程序

示例程序主要演示了以下群组功能：

  • 查询当前签入的联系人所在的群组 - 使用 queryGroups() 方法以群组的更新时间为查询线索获得群组。

    cube.contact.queryGroups(beginning, ending, function(list) {
    [...]
});

  • 创建群组 - 使用 createGroup() 方法创建新的群组。

    cube.contact.createGroup(groupName, list, function(group) {
    // 群组创建成功
    [...]
}, function(error) {
    [...]
});

    该方法会触发 ContactEvent.GroupCreated 事件。

  • 解散群组 - 使用 dissolveGroup() 方法解散群组。这里需要注意的是，只有群组的创建人可以解散群组。

    cube.contact.dissolveGroup(group, function(group) {
    // 群组解散成功
    [...]
}, function(error) {
    [...]
});

    该方法会触发 ContactEvent.GroupDissolved 事件。

  • 添加群组成员 - 使用 Group#addMembers() 方法向群组添加联系人。

    group.addMembers(list, function(group, members) {
    [...]
}, function(error) {
    [...]
});

    该方法会触发 ContactEvent.GroupMemberAdded 事件。

  • 移除群组成员 - 使用 Group#removeMembers() 方法从群组里移除联系人。

    group.removeMembers(list, function() {
    [...]
}, function(error) {
    [...]
});

    该方法会触发 ContactEvent.GroupMemberRemoved 事件。

  • 修改群组公告内容 - 使用 GroupAppendix#updateNotice() 方法更新群组的公告信息。

    // notice 是新的公告内容字符串
group.getAppendix().updateNotice(notice, function(appendix) {
    [...]
}, function(error) {
    [...]
});

    该方法会触发 ContactEvent.GroupAppendixUpdated 事件。

需要注意的是，在示例程序里我们总是使用 getGroup() 方法来获取 Group 实例，我们推荐在您的应用程序里也这样操作。您的应用程序仅保存群组的 ID ，通过群组 ID 来获取 Group 实例。


代码详解

示例里我们使用的文件有：

  • index.html ：主页面文件。

  • main.css ：页面样式表文件。

  • main.js ：示例的程序主文件。包括程序逻辑流程和页面事件处理。

  • helper.js ：提供一些帮助函数的库文件。这个示例主要使用了 dialog 函数来显示联系人列表对话框。

  • cube.js ：时信魔方的 JavaScript 客户端库文件。

  1. 在示例程序的主文件 main.js 里我们增加了几个函数来帮助我们完成界面上的操作：

    • getSelectedGroupId - 该函数返回在群列表里选择的群组的 ID 。

    • querySelectedContacts - 该函数返回联系人对话框里被选中的联系人。

    • presetContactsDialog - 在显示联系人对话框之前对数据进行预处理，预先设置要禁用的选项。

    • resetContactsDialog - 重置联系人对话框的数据。

  2. 当用户登录后，触发 onSignIn 回调函数调用 refreshGroupList() 查询当前签入联系人所在的群组。

    function refreshGroupList() {
    [...]

    // 查找自己所在的群组
    cube.contact.queryGroups(function(list) {
        list.forEach(function(group) {
            [...]
        });
    });
}

  3. 创建群组、解散群组、添加群组成员、移除群组成员和修改群公告按钮对应的回调函数依次是：

    • createGroup

    • dissolveGroup

    • addMember

    • removeMember

    • updateNotice