- 集成开发环境:
- Visual Studio Code
- 插件:
- (必要)*1、Vue Language Features (Volar) (and disable Vetur)
- 2、Chinese (Simplified) (VS Code的简体中文语言包)
- (推荐)3、npm Intellisense,此插件可以一键执行相应package.json中的脚本
- 4、TypeScript Vue Plugin (Volar)
请按步骤检查以下配置:
如果您的设备没有下载过node.js运行时环境,请前往下载,有则通过此步骤
以下2~5中的对应命令【……】,您可以通过[npm Intellisense]插件执行package.json的文件中对应的脚本命令,他们是效果完全相同的
请在终端中cd到本项目的目录并执行命令【npm install】
在终端中cd到本项目的目录并执行命令【vue-cli-service serve】
等待出现
- App running at:
- - Local: https://localhost:8080
- - Network: ……
后就可以在本地浏览器输入对应链接后打开测试了,每次保存文件都会自动热重载
你需要检查一些关键设置!!!在 “MeetSystem-website\src\const-data\meet.js” 中:
- 1、EXPLORER_TYPE 决定打包内容的浏览器类型 (网页端为 "normal", electron 客户端为 "electron", 手机客户端为 "mobile")
- 2、Test_Build决定服务端采用何种环境(测试服务器为 true,正式服务器为 false)
MeetSystem-website\package.json文件的version需要修改为新版本
MeetSystem-website\static\js\lib\help.js的帮助文本需要新增新版说明
MeetSystem-website\src\components\MainContent\MeetingPanel\C31_MeetingLobby.vue中的readyDownload中的客户端安装包需要更新(更新为相应版本)
终端中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】
上述2~5中的对应命令,您可以通过[npm Intellisense]插件执行package.json的文件中对应的脚本命令,他们是效果完全相同的
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" />
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的可能值列表
"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"; // 要求验收任务
业务系统对每一个 operation 做处理后更新数据,应该使用$set
- this.$set(data, 'isRead', true) // 标记已读
- this.$set(this.dataList, idx, newData) // 更新一条数据
- this.dataList.push(...nextPageDataList) // 添加一页数据
<BizDisplay
:bizData="bizData"
:uid="myUserBizId"
:typeAlias="typeAlias"
:msgAlias="msgAlias"
@on-emit="handleEmit"
/>
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", () => {
/**业务系统关闭聊天界面*/
});