I3v-meet-system NPM

百雀会议网页端(I3V-Meet-System For WebSite)

首次打开本项目需要了解的操作(Necessary Operations Before First Development)

请按步骤检查以下配置：

1、node.js运行时环境

如果您的设备没有下载过node.js运行时环境,请前往下载，有则通过此步骤

准备体验npm Intellisense插件的便携性

以下2~5中的对应命令【……】，您可以通过npm Intellisense插件执行package.json的文件中对应的脚本命令，他们是效果完全相同的

2、安装/更新依赖

请在终端中cd到本项目的目录并执行命令【npm install】

3、启动本机测试

在终端中cd到本项目的目录并执行命令【vue-cli-service serve】

等待出现

App running at:
- Local: https://localhost:8080
- Network: ……

后就可以在本地浏览器输入对应链接后打开测试了，每次保存文件都会自动热重载

4、打包前准备

你需要检查一些关键设置！！！在 “MeetSystem-website\src\data-center\environmentCenter.js” 中：

1、EXPLORER_TYPE 决定打包内容的浏览器类型 (网页端为 "normal", electron 客户端为 "electron", 手机客户端为 "mobile")
2、EnvironmentSelector 决定使用的后端

MeetSystem-website\package.json文件的version需要修改为新版本

MeetSystem-website\src\data-center\descriptionCenter.js的帮助文本需要新增新版说明

MeetSystem-website\src\components\MainContent\MeetingPanel\C31_MeetingLobby.vue中的readyDownload中的客户端安装包需要更新(更新为相应版本)

5、打包项目

终端中cd到本项目目录并执行命令【vue-cli-service build】

稍等打包完成后，与网站有关的所有内容将在dist文件夹中

如需部署站点，直接复制dist文件夹内所有内容到站点文件夹中即可
如需用于客户端，直接复制dist文件夹内所有内容到【MeetSystem-electron】项目的web目录（如无需自行创建）中，也可以通过执行命令将dist文件夹复制到指定目录

【rimraf ../MeetSystem-electron/web && xcopy dist ..\MeetSystem-electron\web\ /E】

如果在打包时就确定需要直接用于客户端，可执行以下命令，打包后直接复制到对应目录，更便捷

【rimraf ../MeetSystem-electron/web && vue-cli-service build && xcopy dist ..\MeetSystem-electron\web\ /E】

体验npm Intellisense插件的便携性

上述2~5中的对应命令，您可以通过npm Intellisense插件执行package.json的文件中对应的脚本命令，他们是效果完全相同的

以上是由Luyi新撰写的README文件，以下为保留的旧README参考文件

支持的环境

vue ^2.6.14

@vue/cli-plugin-babel": "~5.0.0"
@vue/cli-plugin-eslint": "~5.0.0"
@vue/cli-plugin-router": "~5.0.0"
@vue/cli-plugin-vuex": "~5.0.0"
@vue/cli-service": "~5.0.0"

安装

npm install i3v-chat-system
npm install -D @babel/plugin-proposal-private-methods

配置

# 在babel.config.cjs文件添加以下配置
plugins: ["@babel/plugin-proposal-private-methods"],

初始化

import { $tinode } from  "i3v-chat-system"

//  初始化$tinode(只应该执行一次)
// 填写配置初始化
$tinode.init({
    appName : 'appName', // 必填
    host : 'host', // 必填
    apiKey : 'apiKey', // 必填
    transport : 'transport',
    secure : 'secure'
    onSetupCompleted = () => { console.log('初始化完成') },
})

// 检查是否连接到聊天服务器
const isConnected =await $tinode.connect()
if(!isConnected) {
  console.log("无法连接到聊天服务器")
  return
}

// 通过用户名和密码登录
const { code } = await $tinode.loginBasic({ username: "登录名一般是手机号", password: "密码一般是sass系统或者业务系统的token"})
if(code === 200){
  console.log("登录成功,可以使用聊天界面组件了")
}

退出聊天系统

$tinode.instance.disconnect();

使用内置聊天组件

// 引入组件
import { ChatMenu, MessageAndInput } from "i3v-chat-system"
components:{
  ChatMenu, MessageAndInput
}
//  判断是否已经授权
const isAuthenticated = $tinode.instance.isAuthenticated()
// 输出聊天好友列表
<ChatMenu v-if="isAuthenticated" @on-set-topic="onSetTopic" :filter="(topic) => true" />
// 其中filter是一个函数，用于过滤列表。

// 点击列表中的一项选择当前的topic，并且可以把它传参给MessageAndInput
onSetTopic(topic){
  this.topic = topic
}

// 如果不使用聊天列表组件，可以通过如下方法获取可聊天的话题数组:
const topicList = $tinode.getState('topicList')

// 使用聊天信息和输入界面,传入选择到的topic参数
// hasCloser： 是否显示关闭按钮;如果使用，用户按关闭按钮时，通过订阅"tinode-askClose"执行
// autoScrollBottom 是否自动滚动到底部，默认值是false
<MessageAndInput v-if="isAuthenticated" :topicId="topic.topic" :hasCloser="true" :autoScrollBottom="autoScrollBottom" />

使用对接业务系统的批量显示组件 BizDataDisplay

import { BizDataDisplay } from "i3v-chat-system"

// 显示系统通知界面，包括任务通知等
<BizDataDisplay
  :topicId="topicId"
  :dataList="dataList"
  :uid="myUserBizId"
  :typeAlias="typeAlias"
  :msgAlias="msgAlias"
  @on-emit="handleEmit"
/>

// 参数说明
  topicId: 聊天机器人id
  dataList: 业务系统取得的分页系统消息数据
  uid: 业务系统的用户id
  typeAlias: String, // dataList元素中"busType"字段的别名；如果dataList元素里业务类型字段名是businessType,可以通过设置 typeAlias: "businessType"做映射
  msgAlias: String, // dataList元素中"msgContent"字段的别名；如果dataList元素里消息内容字段名是msgContent,可以通过设置 typeAlias: "msgContent"做映射

// dataList是从业务系统传来的数据，必须包含以下字段:
{
  id: String, // 消息的id，必须是唯一值
  isRead: Boolean, // 是否已读
  busType: String, // 业务类型，如'2','approval'等
  msgContent: String // 包含消息内容的JSON字符串
  creatTime: String // 创建时间
  ...  // 其它数据
}

// handleEmit参数如下：
{
  operation: "操作字符串",
  data: {} // 是从dataList传入的的元素
}

operation 包含以下值

// operation的可能值列表
"ask-comment-task"; // 要求对任务评论
"ask-detail-task"; // 要求查看任务详情
"ask-confirm-task"; // 要求确认任务
"ask-reject-task"; // 要求拒绝任务
"ask-detail-tenent"; // 要求查看企业详情
"ask-confirm-tenent"; // 要求要求确认加入企业的申请
"ask-reject-tenent"; // 要求拒绝加入企业的申请
"ask-detail-project"; // 要求查看项目详情
"ask-confirm-task-attention"; // 要求确认任务关注
"ask-reject-task-attention"; // 要求拒绝任务关注
"ask-comment-approval"; // 要求评论立项审批
"ask-detail-approval"; // 要求查看立项审批详情
"ask-detail-project-report"; // 要求要求查看项目报告详情
"ask-comment-result-approval"; // 要求评论业绩审批
"ask-detail-result-approval"; // 要求查看业绩审批详情
"ask-mark-read"; // 要求对一条记录标记为已读
"ask-detail-clue"; // 要求查看线索详情
"ask-assign-clue"; // 要求分配线索
"ask-appoint-other-assign-clue"; // 要求指定他人分配线索
"ask-focus-clue"; // 要求关注线索
"ask-back-clue"; // 要求退回线索
"ask-change-clue"; // 要求转交线索
"ask-sure-clue"; // 要求确认线索
"on-scroll-top"; // 当滚动到顶部
"on-scroll-bottom"; // 当滚动到底部
"ask-detail-business"; // 要求查看商机详
"ask-detail-follow-up"; // 要求查看跟进详情
"ask-change-task"; // 要求转交任务
"ask-continue-task"; // 要求继续任务
"ask-accecptance-task"; // 要求验收任务

业务系统与 BizDataDisplay 的数据交换

业务系统对每一个 operation 做处理后更新数据，应该使用$set

this.$set(data, 'isRead', true) // 标记已读
this.$set(this.dataList, idx, newData) // 更新一条数据
this.dataList.push(...nextPageDataList) // 添加一页数据

使用对接业务系统的单条显示组件 BizDisplay

  <BizDisplay
    :bizData="bizData"
    :uid="myUserBizId"
    :typeAlias="typeAlias"
    :msgAlias="msgAlias"
    @on-emit="handleEmit"
  />

使用 pubsub 与组件和聊天系统交互

import PubSub from "pubsub-js";

/**
 * @description: 发布消息
 * @param {String} topic 订阅主题
 * @param {any} payload 负载
 * @return {token}
 */
function publish(topic, payload) {
  PubSub.publish(topic, payload);
}

/**
 * @description: 订阅消息
 * @param {Array} tokens 订阅列表
 * @param {String} topic 如on-click-row
 * @param {Function} callback 回调函数
 * @return {void}
 */
function subscribe(tokens, topic, callback) {
  validateTopic(topic);
  if (typeof callback === "function") {
    tokens.push(PubSub.subscribe(topic, (_, payload) => callback(payload)));
  }
}

/**
 * @description: 销毁订阅
 * @param {Array} tokens 订阅列表
 * @return {void}
 */
function unsubscribe(tokens) {
  tokens.forEach((token) => {
    PubSub.unsubscribe(token);
  });
  tokens.length = 0;
}
export default {
  publish,
  subscribe,
  unsubscribe,
};

// 获取到未读消息总数
$pubsub.subscribe("tinode-totalUnreadCount", (number) => {
  console.log("未读消息总数：", number);
});

// 关闭聊天界面
$pubsub.subscribe("tinode-askClose", () => {
  /**业务系统关闭聊天界面*/
});

i3v-meet-system

axios bowser element-ui exceljs globalthis i3v-chat-system vue ws

i3v-chat-system i3v-media-components-center

1 year ago

1 year ago

1 year ago

1 year ago