Skip to content

o2oa
o2oa

ghsby / o2oa
落后 Fork 源项目 2880 个版本

Fork自 浙江兰德纵横网络技术股份有限公司 / o2oa

通知 1
Star 1
Fork 0
o2oa
o2oa

体验新版 GitCode，发现更多精彩内容 >>

提交 5551886f 编写于 作者: F fancy
浏览文件
操作

im聊天web版本添加创建群聊功能和修改群属性等功能

上级 af9b2fa0
隐藏空白更改
内联 并排
Showing with 296 addition and 16 deletion
o2server/x_message_assemble_communicate/src/main/java/com/x/message/assemble/communicate/jaxrs/im/ActionConversationUpdate.java
浏览文件 @ 5551886f
......@@ -54,6 +54,11 @@ public class ActionConversationUpdate extends BaseAction {
}
if (wi.getPersonList() != null && !wi.getPersonList().isEmpty()) {
conversation.setPersonList(wi.getPersonList());
if (!conversation.getPersonList().contains(effectivePerson.getDistinguishedName())) {
List<String> list = conversation.getPersonList();
list.add(effectivePerson.getDistinguishedName());
conversation.setPersonList(list);
}
}
conversation.setUpdateTime(new Date());
emc.check(conversation, CheckPersistType.all);
......
o2web/source/x_component_IMV2/$Main/default/chat.html
浏览文件 @ 5551886f
<!-- title -->
<div class="chat-title" data-o2-element="chatTitleNode">
<span>{{$.convName}}</span>
<div class="o2_im_chat_content_title_more" data-o2-element="chatTitleMoreBtnNode"></div>
<div class="o2_im_chat_content_title_menu" data-o2-element="chatTitleMoreMenuNode">
<div class="o2_im_chat_content_title_menu_item" data-o2-element="chatTitleMoreMenuItem1Node" data-o2-events="click:tapUpdateConvTitle">修改群名</div>
<div class="o2_im_chat_content_title_menu_item" data-o2-element="chatTitleMoreMenuItem2Node" data-o2-events="click:tapUpdateConvMembers">修改成员</div>
</div>
</div>
<!-- 聊天内容 -->
<div class="chat-content" data-o2-element="chatContentNode">
......
o2web/source/x_component_IMV2/$Main/default/im.html
浏览文件 @ 5551886f
......@@ -5,6 +5,9 @@
<div class="add" data-o2-element="o2ImConvCreateNode" data-o2-events="click:tapCreateSingleConv">
创建单聊
</div>
<div class="group" data-o2-element="o2ImGroupConvCreateNode" data-o2-events="click:tapCreateGroupConv">
创建群聊
</div>
<!-- <div class="search_out">
<div title="搜索" class="search_icon"></div>
<div class="search_input_out">
......@@ -14,7 +17,7 @@
</div>
<!-- chat list -->
<div data-o2-element="chatItemListNode">
<div data-o2-element="chatItemListNode" class="o2_im_chat_list_conv">
</div>
......
o2web/source/x_component_IMV2/$Main/default/style.css
浏览文件 @ 5551886f
......@@ -10,6 +10,11 @@
float: left;
width: 257px;
height: 100%;
display: flex;
display: -webkit-box;
display: -webkit-flex;
flex-direction: column;
-ms-flex-direction: column;
}
.o2_im_chat_list_top {
margin-bottom: 20px;
......@@ -25,7 +30,21 @@
text-align: center;
line-height: 40px;
color: #848484;
padding-left: 24px;
float: left;
}
.o2_im_chat_list_top .group {
height: 40px;
cursor: pointer;
margin-left: 14px;
text-align: center;
line-height: 40px;
color: #848484;
padding-left: 24px;
float: left;
}
.o2_im_chat_list_top .search_out {
margin-right: 40px;
height: 40px;
......@@ -146,6 +165,10 @@
white-space: nowrap;
text-overflow:ellipsis;
}
.o2_im_chat_list_conv {
flex: 1;
overflow: auto;
}
.o2_im_chat_content {
......@@ -161,6 +184,35 @@
-ms-flex-direction: column;
}
.o2_im_chat_content_title_more {
background-image: url(../x_component_IMV2/$Main/default/icons/more.png);
background-position: center center;
background-repeat: no-repeat;
height: 30px;
width: 64px;
float: right;
cursor: pointer;
display: none;
}
.o2_im_chat_content_title_menu {
width: 98px;
position: absolute;
right: 24px;
top: 61px;
background-color: white;
border-radius: 12px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
display: none;
z-index: 10000;
}
.o2_im_chat_content_title_menu_item {
height: 48px;
text-align: center;
line-height: 48px;
cursor: pointer;
}
/* 聊天界面 */
.chat-emoji-box {
......
o2web/source/x_component_IMV2/Main.js
浏览文件 @ 5551886f
......@@ -108,6 +108,22 @@ MWF.xApplication.IMV2.Main = new Class({
this.conversationId = conv.id;
this.chatNode.empty();
this.chatNode.loadHtml(url, { "bind": data, "module": this }, function () {
var me = layout.session.user.distinguishedName;
if (conv.type === "group" && me === conv.adminPerson) {
this.chatTitleMoreBtnNode.setStyle("display", "block");
this.chatTitleMoreBtnNode.addEvents({
"click": function (e) {
var display = this.chatTitleMoreMenuNode.getStyle("display");
if (display === "none") {
this.chatTitleMoreMenuNode.setStyle("display", "block");
} else {
this.chatTitleMoreMenuNode.setStyle("display", "none");
}
}.bind(this)
});
} else {
this.chatTitleMoreBtnNode.setStyle("display", "none");
}
//获取聊天信息
this.messageList = [];
this.loadMsgListByConvId(1, 20, conv.id);
......@@ -115,6 +131,25 @@ MWF.xApplication.IMV2.Main = new Class({
scrollFx.toBottom();
}.bind(this));
},
//修改群名
tapUpdateConvTitle: function() {
this.chatTitleMoreMenuNode.setStyle("display", "none");
var form = new MWF.xApplication.IMV2.UpdateConvTitleForm(this, {}, {}, { app: this.app });
form.create();
},
//修改群成员
tapUpdateConvMembers: function() {
this.chatTitleMoreMenuNode.setStyle("display", "none");
var members = [];
for (var i = 0; i < this.conversationNodeItemList.length; i++) {
var c = this.conversationNodeItemList[i];
if (this.conversationId == c.data.id) {
members = c.data.personList;
}
}
var form = new MWF.xApplication.IMV2.CreateConversationForm(this, {}, { "title": "修改成员", "personCount": 0, "personSelected": members, "isUpdateMember": true }, { app: this.app });
form.create()
},
//点击发送消息
sendMsg: function () {
var text = this.chatBottomAreaTextareaNode.value;
......@@ -156,9 +191,54 @@ MWF.xApplication.IMV2.Main = new Class({
},
//点击创建单聊按钮
tapCreateSingleConv: function () {
var form = new MWF.xApplication.IMV2.SingleForm(this, {}, {}, { app: this.app });
// var form = new MWF.xApplication.IMV2.SingleForm(this, {}, {}, { app: this.app });
// form.create()
var form = new MWF.xApplication.IMV2.CreateConversationForm(this, {}, { "title": "创建单聊", "personCount": 1 }, { app: this.app });
form.create()
},
//点击创建群聊按钮
tapCreateGroupConv: function () {
var form = new MWF.xApplication.IMV2.CreateConversationForm(this, {}, { "title": "创建群聊", "personCount": 0, "personSelected": [] }, { app: this.app });
form.create()
},
//更新群名
updateConversationTitle: function(title, convId) {
var conv = {
id: convId,
title: title,
};
var _self = this;
o2.Actions.load("x_message_assemble_communicate").ImAction.update(conv, function (json) {
var newConv = json.data;
//点击会话 刷新聊天界面
_self.tapConv(newConv);
//刷新会话列表的title
for (var i = 0; i < this.conversationNodeItemList.length; i++) {
var cv = this.conversationNodeItemList[i];
if (cv.data.id == convId) {
//刷新
cv.refreshConvTitle(title);
}
}
}.bind(this), function (error) {
console.log(error);
}.bind(this))
},
//更新群成员
updateConversationMembers: function(members, convId) {
var conv = {
id: convId,
personList: members,
};
var _self = this;
o2.Actions.load("x_message_assemble_communicate").ImAction.update(conv, function (json) {
var newConv = json.data;
_self.tapConv(newConv);
}.bind(this), function (error) {
console.log(error);
}.bind(this))
},
/**
* 创建会话
* @param {*} persons 人员列表
......@@ -342,19 +422,19 @@ MWF.xApplication.IMV2.Main = new Class({
var url = this._getFileUrlWithWH(msgBody.fileId, 144, 192);
new Element("img", { "src": url }).inject(imgBox);
imgBox.addEvents({
"click": function(e){
"click": function (e) {
var downloadUrl = this._getFileDownloadUrl(msgBody.fileId);
window.open(downloadUrl);
}.bind(this)
});
} else if (msgBody.type == "audio") {
var url = this._getFileDownloadUrl(msgBody.fileId);
new Element("audio", { "src": url, "controls":"controls", "preload":"preload" }).inject(lastNode);
new Element("audio", { "src": url, "controls": "controls", "preload": "preload" }).inject(lastNode);
} else if (msgBody.type == "location") {
var mapBox = new Element("span").inject(lastNode);
new Element("img", { "src": "../x_component_IMV2/$Main/default/icons/location.png", "width":24, "height":24 }).inject(mapBox);
new Element("img", { "src": "../x_component_IMV2/$Main/default/icons/location.png", "width": 24, "height": 24 }).inject(mapBox);
var url = this._getBaiduMapUrl(msgBody.latitude, msgBody.longitude, msgBody.address, msgBody.addressDetail);
new Element("a", {"href":url, "target":"_blank", "text": msgBody.address}).inject(mapBox);
new Element("a", { "href": url, "target": "_blank", "text": msgBody.address }).inject(mapBox);
} else {//text
new Element("span", { "text": msgBody.body }).inject(lastNode);
}
......@@ -396,19 +476,19 @@ MWF.xApplication.IMV2.Main = new Class({
var url = this._getFileUrlWithWH(msgBody.fileId, 144, 192);
new Element("img", { "src": url }).inject(imgBox);
imgBox.addEvents({
"click": function(e){
"click": function (e) {
var downloadUrl = this._getFileDownloadUrl(msgBody.fileId);
window.open(downloadUrl);
}.bind(this)
});
} else if (msgBody.type == "audio") {
var url = this._getFileDownloadUrl(msgBody.fileId);
new Element("audio", { "src": url, "controls":"controls", "preload":"preload" }).inject(lastNode);
new Element("audio", { "src": url, "controls": "controls", "preload": "preload" }).inject(lastNode);
} else if (msgBody.type == "location") {
var mapBox = new Element("span").inject(lastNode);
new Element("img", { "src": "../x_component_IMV2/$Main/default/icons/location.png", "width":24, "height":24 }).inject(mapBox);
new Element("img", { "src": "../x_component_IMV2/$Main/default/icons/location.png", "width": 24, "height": 24 }).inject(mapBox);
var url = this._getBaiduMapUrl(msgBody.latitude, msgBody.longitude, msgBody.address, msgBody.addressDetail);
new Element("a", {"href":url, "target":"_blank", "text": msgBody.address}).inject(mapBox);
new Element("a", { "href": url, "target": "_blank", "text": msgBody.address }).inject(mapBox);
} else {//text
new Element("span", { "text": msgBody.body }).inject(lastNode);
}
......@@ -419,7 +499,7 @@ MWF.xApplication.IMV2.Main = new Class({
}
},
//图片 根据大小 url
_getFileUrlWithWH: function(id, width, height) {
_getFileUrlWithWH: function (id, width, height) {
var action = MWF.Actions.get("x_message_assemble_communicate").action;
var url = action.address + action.actions.imgFileDownloadWithWH.uri;
url = url.replace("{id}", encodeURIComponent(id));
......@@ -428,15 +508,15 @@ MWF.xApplication.IMV2.Main = new Class({
return url;
},
//file 下载的url
_getFileDownloadUrl: function(id) {
_getFileDownloadUrl: function (id) {
var action = MWF.Actions.get("x_message_assemble_communicate").action;
var url = action.address + action.actions.imgFileDownload.uri;
url = url.replace("{id}", encodeURIComponent(id));
return url;
},
//百度地图打开地址
_getBaiduMapUrl: function(lat, longt, address, content) {
var url = "https://api.map.baidu.com/marker?location="+lat+","+longt+"&title="+address+"&content="+content+"&output=html&src=net.o2oa.map";
_getBaiduMapUrl: function (lat, longt, address, content) {
var url = "https://api.map.baidu.com/marker?location=" + lat + "," + longt + "&title=" + address + "&content=" + content + "&output=html&src=net.o2oa.map";
return url;
},
//用户头像
......@@ -580,7 +660,7 @@ MWF.xApplication.IMV2.ConversationItem = new Class({
new Element("img", { "src": convData.avatarUrl, "class": "img" }).inject(avatarNode);
var bodyNode = new Element("div", { "class": "body" }).inject(this.nodeBaseItem);
var bodyUpNode = new Element("div", { "class": "body_up" }).inject(bodyNode);
new Element("div", { "class": "body_title", "text": convData.title }).inject(bodyUpNode);
this.titleNode = new Element("div", { "class": "body_title", "text": convData.title }).inject(bodyUpNode);
this.messageTimeNode = new Element("div", { "class": "body_time", "text": convData.time }).inject(bodyUpNode);
if (convData.lastMessageType == "emoji") {
this.lastMessageNode = new Element("div", { "class": "body_down" }).inject(bodyNode);
......@@ -634,6 +714,9 @@ MWF.xApplication.IMV2.ConversationItem = new Class({
this.messageTimeNode.set("text", time);
}
},
refreshConvTitle: function(title) {
this.titleNode.set("text", title);
},
addCheckClass: function () {
if (this.nodeBaseItem) {
if (!this.nodeBaseItem.hasClass("check")) {
......@@ -681,7 +764,7 @@ MWF.xApplication.IMV2.SingleForm = new Class({
style: "minder",
hasColon: true,
itemTemplate: {
person: { text: "选择人员", type: "org", orgType: "person", notEmpty: true, exclude: exclude },
person: { text: "选择人员", type: "org", orgType: "person", count: 0, notEmpty: true, exclude: exclude },
}
}, this.app);
this.form.load();
......@@ -713,4 +796,136 @@ MWF.xApplication.IMV2.SingleForm = new Class({
this.close();
}
}
});
//创建聊天 弹出窗表单
MWF.xApplication.IMV2.CreateConversationForm = new Class({
Extends: MPopupForm,
Implements: [Options, Events],
options: {
"style": "minder",
"width": 700,
"height": "200",
"hasTop": true,
"hasIcon": false,
"draggable": true,
"title": "创建单聊",
"personCount": 1, //1 是单选 0 是多选,
"personSelected": [],
"isUpdateMember": false
},
_createTableContent: function () {
var html = "<table width='100%' bordr='0' cellpadding='7' cellspacing='0' styles='formTable' style='margin-top: 20px; '>" +
"<tr><td styles='formTableTitle' lable='person' width='25%'></td>" +
" <td styles='formTableValue14' item='person' colspan='3'></td></tr>" +
"</table>";
this.formTableArea.set("html", html);
var me = layout.session.user.distinguishedName;
var exclude = [];
if (me) {
exclude = [me];
}
this.form = new MForm(this.formTableArea, this.data || {}, {
isEdited: true,
style: "minder",
hasColon: true,
itemTemplate: {
person: { text: "选择人员", type: "org", orgType: "person", count: this.options["personCount"], notEmpty: true, exclude: exclude, value: this.options["personSelected"] },
}
}, this.app);
this.form.load();
},
_createBottomContent: function () {
if (this.isNew || this.isEdited) {
this.okActionNode = new Element("button.inputOkButton", {
"styles": this.css.inputOkButton,
"text": "确定"
}).inject(this.formBottomNode);
this.okActionNode.addEvent("click", function (e) {
this.save(e);
}.bind(this));
}
this.cancelActionNode = new Element("button.inputCancelButton", {
"styles": (this.isEdited || this.isNew || this.getEditPermission()) ? this.css.inputCancelButton : this.css.inputCancelButton_long,
"text": "关闭"
}).inject(this.formBottomNode);
this.cancelActionNode.addEvent("click", function (e) {
this.close(e);
}.bind(this));
},
save: function () {
var data = this.form.getResult(true, null, true, false, true);
if (data) {
if (this.options["isUpdateMember"] === true) {
this.app.updateConversationMembers(data.person, this.app.conversationId);
}else {
this.app.newConversation(data.person, this.options["personCount"] === 1 ? "single": "group");
}
this.close();
}
}
});
//修改群名
MWF.xApplication.IMV2.UpdateConvTitleForm = new Class({
Extends: MPopupForm,
Implements: [Options, Events],
options: {
"style": "minder",
"width": 500,
"height": "200",
"hasTop": true,
"hasIcon": false,
"draggable": true,
"title": "修改群名"
},
_createTableContent: function () {
var html = "<table width='100%' bordr='0' cellpadding='7' cellspacing='0' styles='formTable' style='margin-top: 20px; '>" +
"<tr><td styles='formTableTitle' lable='title' width='25%'></td>" +
" <td styles='formTableValue14' item='title' colspan='3'></td></tr>" +
"</table>";
this.formTableArea.set("html", html);
this.form = new MForm(this.formTableArea, this.data || {}, {
isEdited: true,
style: "minder",
hasColon: true,
itemTemplate: {
title: {text: "群名", type: "text", notEmpty: true },
}
}, this.app);
this.form.load();
},
_createBottomContent: function () {
if (this.isNew || this.isEdited) {
this.okActionNode = new Element("button.inputOkButton", {
"styles": this.css.inputOkButton,
"text": "确定"
}).inject(this.formBottomNode);
this.okActionNode.addEvent("click", function (e) {
this.save(e);
}.bind(this));
}
this.cancelActionNode = new Element("button.inputCancelButton", {
"styles": (this.isEdited || this.isNew || this.getEditPermission()) ? this.css.inputCancelButton : this.css.inputCancelButton_long,
"text": "关闭"
}).inject(this.formBottomNode);
this.cancelActionNode.addEvent("click", function (e) {
this.close(e);
}.bind(this));
},
save: function () {
var data = this.form.getResult(true, null, true, false, true);
if (data) {
this.app.updateConversationTitle(data.title, this.app.conversationId);
this.close();
}
}
});
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或