Main.js 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110
  1. MWF.require("MWF.widget.UUID", null, false);
  2. MWF.xDesktop.requireApp("Template", "MForm", null, false);
  3. MWF.xDesktop.requireApp("Template", "MPopupForm", null, false);
  4. MWF.xApplication.IMV2.Main = new Class({
  5. Extends: MWF.xApplication.Common.Main,
  6. Implements: [Options, Events],
  7. options: {
  8. "style": "default",
  9. "name": "IMV2",
  10. "mvcStyle": "style.css",
  11. "icon": "icon.png",
  12. "width": "1024",
  13. "height": "768",
  14. "isResize": true,
  15. "isMax": true,
  16. "title": MWF.xApplication.IMV2.LP.title,
  17. "conversationId": ""
  18. },
  19. onQueryLoad: function () {
  20. this.lp = MWF.xApplication.IMV2.LP;
  21. this.app = this;
  22. this.conversationNodeItemList = [];
  23. this.conversationId = this.options.conversationId || "";
  24. this.messageList = [];
  25. this.emojiList = [];
  26. //添加87个表情
  27. for (var i = 1; i < 88; i++) {
  28. var emoji = {
  29. "key": i > 9 ? "[" + i + "]" : "[0" + i + "]",
  30. "path": i > 9 ? "/x_component_IMV2/$Main/emotions/im_emotion_" + i + ".png" : "/x_component_IMV2/$Main/emotions/im_emotion_0" + i + ".png",
  31. };
  32. this.emojiList.push(emoji);
  33. }
  34. },
  35. onQueryClose: function () {
  36. this.closeListening();
  37. },
  38. // 获取组件名称
  39. loadComponentName: function () {
  40. o2.Actions.load("x_component_assemble_control").ComponentAction.get("IMV2", function (json) {
  41. var imComponent = json.data;
  42. if (imComponent && imComponent.title) {
  43. this.setTitle(imComponent.title);
  44. }
  45. }.bind(this), function (err) {
  46. console.log(err);
  47. })
  48. },
  49. // 加载应用
  50. loadApplication: function (callback) {
  51. var url = this.path + this.options.style + "/im.html";
  52. this.content.loadHtml(url, { "bind": { "lp": this.lp, "data": {} }, "module": this }, function () {
  53. //设置content
  54. this.app.content = this.o2ImMainNode;
  55. //启动监听
  56. this.startListening();
  57. //获取会话列表
  58. this.conversationNodeItemList = [];
  59. o2.Actions.load("x_message_assemble_communicate").ImAction.myConversationList(function (json) {
  60. if (json.data && json.data instanceof Array) {
  61. this.loadConversationList(json.data);
  62. }
  63. }.bind(this));
  64. }.bind(this));
  65. this.loadComponentName();
  66. },
  67. // 监听ws消息
  68. startListening: function () {
  69. if (layout.desktop && layout.desktop.message) {
  70. this.messageNumber = layout.desktop.message.items.length;
  71. //查询ws消息 如果增加
  72. if (this.listener) {
  73. clearInterval(this.listener);
  74. }
  75. this.listener = setInterval(function () {
  76. var newNumber = layout.desktop.message.items.length;
  77. //判断是否有新的ws消息
  78. if (newNumber > this.messageNumber) {
  79. this.reciveNewMessage();
  80. this.messageNumber = newNumber;
  81. }
  82. }.bind(this), 1000);
  83. }
  84. },
  85. // 关闭监听
  86. closeListening: function () {
  87. if (this.listener) {
  88. clearInterval(this.listener);
  89. }
  90. },
  91. // 接收新的消息 会话列表更新 或者 聊天窗口更新
  92. reciveNewMessage: function () {
  93. //查询会话数据
  94. this._checkConversationMessage();
  95. //查询聊天数据
  96. this._checkNewMessage();
  97. },
  98. //加载会话列表
  99. loadConversationList: function (list) {
  100. for (var i = 0; i < list.length; i++) {
  101. var chat = list[i];
  102. var itemNode = this._createConvItemNode(chat);
  103. this.conversationNodeItemList.push(itemNode);
  104. if (this.conversationId && this.conversationId == chat.id) {
  105. this.tapConv(chat);
  106. }
  107. }
  108. },
  109. //分页获取会话的消息列表数据
  110. loadMsgListByConvId: function (page, size, convId) {
  111. var data = { "conversationId": convId };
  112. o2.Actions.load("x_message_assemble_communicate").ImAction.msgListByPaging(page, size, data, function (json) {
  113. var list = json.data;
  114. for (var i = 0; i < list.length; i++) {
  115. this.messageList.push(list[i]);
  116. this._buildMsgNode(list[i], true);
  117. }
  118. }.bind(this), function (error) {
  119. console.log(error);
  120. }.bind(this), false);
  121. },
  122. //点击会话
  123. tapConv: function (conv) {
  124. this._setCheckNode(conv);
  125. var url = this.path + this.options.style + "/chat.html";
  126. var data = { "convName": conv.title };
  127. this.conversationId = conv.id;
  128. this.chatNode.empty();
  129. this.chatNode.loadHtml(url, { "bind": data, "module": this }, function () {
  130. var me = layout.session.user.distinguishedName;
  131. if (conv.type === "group" && me === conv.adminPerson) {
  132. this.chatTitleMoreBtnNode.setStyle("display", "block");
  133. this.chatTitleMoreBtnNode.addEvents({
  134. "click": function (e) {
  135. var display = this.chatTitleMoreMenuNode.getStyle("display");
  136. if (display === "none") {
  137. this.chatTitleMoreMenuNode.setStyle("display", "block");
  138. } else {
  139. this.chatTitleMoreMenuNode.setStyle("display", "none");
  140. }
  141. }.bind(this)
  142. });
  143. } else {
  144. this.chatTitleMoreBtnNode.setStyle("display", "none");
  145. }
  146. //获取聊天信息
  147. this.messageList = [];
  148. this.loadMsgListByConvId(1, 20, conv.id);
  149. var scrollFx = new Fx.Scroll(this.chatContentNode);
  150. scrollFx.toBottom();
  151. }.bind(this));
  152. },
  153. //修改群名
  154. tapUpdateConvTitle: function () {
  155. this.chatTitleMoreMenuNode.setStyle("display", "none");
  156. var form = new MWF.xApplication.IMV2.UpdateConvTitleForm(this, {}, {}, { app: this.app });
  157. form.create();
  158. },
  159. //修改群成员
  160. tapUpdateConvMembers: function () {
  161. this.chatTitleMoreMenuNode.setStyle("display", "none");
  162. var members = [];
  163. for (var i = 0; i < this.conversationNodeItemList.length; i++) {
  164. var c = this.conversationNodeItemList[i];
  165. if (this.conversationId == c.data.id) {
  166. members = c.data.personList;
  167. }
  168. }
  169. var form = new MWF.xApplication.IMV2.CreateConversationForm(this, {}, { "title": "修改成员", "personCount": 0, "personSelected": members, "isUpdateMember": true }, { app: this.app });
  170. form.create()
  171. },
  172. //点击发送消息
  173. sendMsg: function () {
  174. var text = this.chatBottomAreaTextareaNode.value;
  175. if (text) {
  176. this.chatBottomAreaTextareaNode.value = "";
  177. this._newAndSendTextMsg(text, "text");
  178. } else {
  179. console.log("没有消息内容!");
  180. }
  181. },
  182. //点击表情按钮
  183. showEmojiBox: function () {
  184. if (!this.emojiBoxNode) {
  185. this.emojiBoxNode = new Element("div", { "class": "chat-emoji-box" }).inject(this.chatNode);
  186. var _self = this;
  187. for (var i = 0; i < this.emojiList.length; i++) {
  188. var emoji = this.emojiList[i];
  189. var emojiNode = new Element("img", { "src": emoji.path, "class": "chat-emoji-img" }).inject(this.emojiBoxNode);
  190. emojiNode.addEvents({
  191. "mousedown": function (ev) {
  192. _self.sendEmojiMsg(this.emoji);
  193. _self.hideEmojiBox();
  194. }.bind({ emoji: emoji })
  195. });
  196. }
  197. }
  198. this.emojiBoxNode.setStyle("display", "block");
  199. this.hideFun = this.hideEmojiBox.bind(this);
  200. document.body.addEvent("mousedown", this.hideFun);
  201. },
  202. // 点击发送文件消息
  203. showChooseFile: function () {
  204. if (!this.uploadFileAreaNode) {
  205. this.createUploadFileNode();
  206. }
  207. this.fileUploadNode.click();
  208. },
  209. //创建文件选择框
  210. createUploadFileNode: function () {
  211. this.uploadFileAreaNode = new Element("div");
  212. var html = "<input name=\"file\" type=\"file\" multiple/>";
  213. this.uploadFileAreaNode.set("html", html);
  214. this.fileUploadNode = this.uploadFileAreaNode.getFirst();
  215. this.fileUploadNode.addEvent("change", function () {
  216. var files = this.fileUploadNode.files;
  217. if (files.length) {
  218. var file = files.item(0);
  219. var formData = new FormData();
  220. formData.append('file', file);
  221. formData.append('fileName', file.name);
  222. var fileExt = file.name.substring(file.name.lastIndexOf("."));
  223. // 图片消息
  224. var type = "file"
  225. if (fileExt.toLowerCase() == ".bmp" || fileExt.toLowerCase() == ".jpeg"
  226. || fileExt.toLowerCase() == ".png" || fileExt.toLowerCase() == ".jpg") {
  227. type = "image"
  228. } else { // 文件消息
  229. type = "file"
  230. }
  231. //上传文件
  232. o2.Actions.load("x_message_assemble_communicate").ImAction.uploadFile(this.conversationId, type, formData, "{}", function (json) {
  233. if (json.data) {
  234. var fileId = json.data.id
  235. var fileExtension = json.data.fileExtension
  236. var fileName = json.data.fileName
  237. this._newImageOrFileMsgAndSend(type, fileId, fileName, fileExtension)
  238. }
  239. }.bind(this), function (error) {
  240. console.log(error);
  241. }.bind(this))
  242. }
  243. }.bind(this));
  244. },
  245. hideEmojiBox: function () {
  246. //关闭emojiBoxNode
  247. this.emojiBoxNode.setStyle("display", "none");
  248. document.body.removeEvent("mousedown", this.hideFun);
  249. },
  250. //发送表情消息
  251. sendEmojiMsg: function (emoji) {
  252. this._newAndSendTextMsg(emoji.key, "emoji");
  253. },
  254. //点击创建单聊按钮
  255. tapCreateSingleConv: function () {
  256. // var form = new MWF.xApplication.IMV2.SingleForm(this, {}, {}, { app: this.app });
  257. // form.create()
  258. var form = new MWF.xApplication.IMV2.CreateConversationForm(this, {}, { "title": "创建单聊", "personCount": 1 }, { app: this.app });
  259. form.create()
  260. },
  261. //点击创建群聊按钮
  262. tapCreateGroupConv: function () {
  263. var form = new MWF.xApplication.IMV2.CreateConversationForm(this, {}, { "title": "创建群聊", "personCount": 0, "personSelected": [] }, { app: this.app });
  264. form.create()
  265. },
  266. //更新群名
  267. updateConversationTitle: function (title, convId) {
  268. var conv = {
  269. id: convId,
  270. title: title,
  271. };
  272. var _self = this;
  273. o2.Actions.load("x_message_assemble_communicate").ImAction.update(conv, function (json) {
  274. var newConv = json.data;
  275. //点击会话 刷新聊天界面
  276. _self.tapConv(newConv);
  277. //刷新会话列表的title
  278. for (var i = 0; i < this.conversationNodeItemList.length; i++) {
  279. var cv = this.conversationNodeItemList[i];
  280. if (cv.data.id == convId) {
  281. //刷新
  282. cv.refreshConvTitle(title);
  283. }
  284. }
  285. }.bind(this), function (error) {
  286. console.log(error);
  287. }.bind(this))
  288. },
  289. //更新群成员
  290. updateConversationMembers: function (members, convId) {
  291. var conv = {
  292. id: convId,
  293. personList: members,
  294. };
  295. var _self = this;
  296. o2.Actions.load("x_message_assemble_communicate").ImAction.update(conv, function (json) {
  297. var newConv = json.data;
  298. _self.tapConv(newConv);
  299. }.bind(this), function (error) {
  300. console.log(error);
  301. }.bind(this))
  302. },
  303. /**
  304. * 创建会话
  305. * @param {*} persons 人员列表
  306. * @param {*} cType 会话类型 "single" "group"
  307. */
  308. newConversation: function (persons, cType) {
  309. var conv = {
  310. type: cType,
  311. personList: persons,
  312. };
  313. var _self = this;
  314. o2.Actions.load("x_message_assemble_communicate").ImAction.create(conv, function (json) {
  315. var newConv = json.data;
  316. var isOld = false;
  317. for (var i = 0; i < _self.conversationNodeItemList.length; i++) {
  318. var c = _self.conversationNodeItemList[i];
  319. if (newConv.id == c.data.id) {
  320. isOld = true;
  321. _self.tapConv(c);
  322. }
  323. }
  324. if (!isOld) {
  325. var itemNode = _self._createConvItemNode(newConv);
  326. _self.conversationNodeItemList.push(itemNode);
  327. _self.tapConv(newConv);
  328. }
  329. }.bind(this), function (error) {
  330. console.log(error);
  331. }.bind(this))
  332. },
  333. //创建会话ItemNode
  334. _createConvItemNode: function (conv) {
  335. return new MWF.xApplication.IMV2.ConversationItem(conv, this);
  336. },
  337. //会话ItemNode 点击背景色
  338. _setCheckNode: function (conv) {
  339. for (var i = 0; i < this.conversationNodeItemList.length; i++) {
  340. var item = this.conversationNodeItemList[i];
  341. if (item.data.id == conv.id) {
  342. item.addCheckClass();
  343. } else {
  344. item.removeCheckClass();
  345. }
  346. }
  347. },
  348. //创建图片或文件消息
  349. _newImageOrFileMsgAndSend: function (type, fileId, fileName, fileExt) {
  350. var distinguishedName = layout.session.user.distinguishedName;
  351. var time = this._currentTime();
  352. var body = {
  353. "body": "[文件]",
  354. "type": type,
  355. "fileId": fileId,
  356. "fileExtension": fileExt,
  357. "fileName": fileName
  358. };
  359. var bodyJson = JSON.stringify(body);
  360. var uuid = (new MWF.widget.UUID).toString();
  361. var message = {
  362. "id": uuid,
  363. "conversationId": this.conversationId,
  364. "body": bodyJson,
  365. "createPerson": distinguishedName,
  366. "createTime": time,
  367. "sendStatus": 1
  368. };
  369. o2.Actions.load("x_message_assemble_communicate").ImAction.msgCreate(message,
  370. function (json) {
  371. console.log("消息发送成功!");
  372. }.bind(this),
  373. function (error) {
  374. console.log(error);
  375. }.bind(this));
  376. this.messageList.push(message);
  377. this._buildSender(body, distinguishedName, false);
  378. this._refreshConvMessage(message);
  379. },
  380. //创建文本消息 并发送
  381. _newAndSendTextMsg: function (text, type) {
  382. var distinguishedName = layout.session.user.distinguishedName;
  383. var time = this._currentTime();
  384. var body = { "body": text, "type": type };
  385. var bodyJson = JSON.stringify(body);
  386. var uuid = (new MWF.widget.UUID).toString();
  387. var textMessage = {
  388. "id": uuid,
  389. "conversationId": this.conversationId,
  390. "body": bodyJson,
  391. "createPerson": distinguishedName,
  392. "createTime": time,
  393. "sendStatus": 1
  394. };
  395. o2.Actions.load("x_message_assemble_communicate").ImAction.msgCreate(textMessage,
  396. function (json) {
  397. //data = json.data;
  398. console.log("消息发送成功!");
  399. }.bind(this),
  400. function (error) {
  401. console.log(error);
  402. }.bind(this));
  403. this.messageList.push(textMessage);
  404. this._buildSender(body, distinguishedName, false);
  405. this._refreshConvMessage(textMessage);
  406. },
  407. //刷新会话Item里面的最后消息内容
  408. _refreshConvMessage: function (msg) {
  409. for (var i = 0; i < this.conversationNodeItemList.length; i++) {
  410. var node = this.conversationNodeItemList[i];
  411. if (node.data.id == this.conversationId) {
  412. node.refreshLastMsg(msg);
  413. }
  414. }
  415. },
  416. //检查会话列表是否有更新
  417. _checkConversationMessage: function () {
  418. o2.Actions.load("x_message_assemble_communicate").ImAction.myConversationList(function (json) {
  419. if (json.data && json.data instanceof Array) {
  420. var newConList = json.data;
  421. for (var j = 0; j < newConList.length; j++) {
  422. var nCv = newConList[j];
  423. var isNew = true;
  424. for (var i = 0; i < this.conversationNodeItemList.length; i++) {
  425. var cv = this.conversationNodeItemList[i];
  426. if (cv.data.id == nCv.id) {
  427. isNew = false;
  428. //刷新
  429. cv.refreshLastMsg(nCv.lastMessage);
  430. }
  431. }
  432. //新会话 创建
  433. if (isNew) {
  434. var itemNode = this._createConvItemNode(nCv);
  435. this.conversationNodeItemList.push(itemNode);
  436. }
  437. }
  438. //this.loadConversationList(json.data);
  439. }
  440. }.bind(this));
  441. },
  442. //检查是否有新消息
  443. _checkNewMessage: function () {
  444. if (this.conversationId && this.conversationId != "") {//是否有会话窗口
  445. var data = { "conversationId": this.conversationId };
  446. o2.Actions.load("x_message_assemble_communicate").ImAction.msgListByPaging(1, 10, data, function (json) {
  447. var list = json.data;
  448. if (list && list.length > 0) {
  449. var msg = list[0];
  450. //检查聊天框是否有变化
  451. if (this.conversationId == msg.conversationId) {
  452. for (var i = 0; i < list.length; i++) {
  453. var isnew = true;
  454. var m = list[i];
  455. for (var j = 0; j < this.messageList.length; j++) {
  456. if (this.messageList[j].id == m.id) {
  457. isnew = false;
  458. }
  459. }
  460. if (isnew) {
  461. this.messageList.push(m);
  462. this._buildMsgNode(m, false);
  463. // this._refreshConvMessage(m);
  464. }
  465. }
  466. }
  467. }
  468. }.bind(this), function (error) {
  469. console.log(error);
  470. }.bind(this), false);
  471. }
  472. },
  473. //创建消息html节点
  474. _buildMsgNode: function (msg, isTop) {
  475. var createPerson = msg.createPerson;
  476. var jsonbody = msg.body;
  477. var body = JSON.parse(jsonbody);//todo 目前只有一种text类型
  478. var distinguishedName = layout.session.user.distinguishedName;
  479. if (createPerson != distinguishedName) {
  480. this._buildReceiver(body, createPerson, isTop);
  481. } else {
  482. this._buildSender(body, createPerson, isTop);
  483. }
  484. },
  485. /**
  486. * 消息发送体
  487. * @param msgBody 消息体
  488. * @param createPerson 消息人员
  489. * @param isTop 是否放在顶部
  490. */
  491. _buildSender: function (msgBody, createPerson, isTop) {
  492. var receiverBodyNode = new Element("div", { "class": "chat-sender" }).inject(this.chatContentNode, isTop ? "top" : "bottom");
  493. var avatarNode = new Element("div").inject(receiverBodyNode);
  494. var avatarUrl = this._getIcon(createPerson);
  495. var name = createPerson;
  496. if (createPerson.indexOf("@") != -1) {
  497. name = name.substring(0, createPerson.indexOf("@"));
  498. }
  499. var avatarImg = new Element("img", { "src": avatarUrl }).inject(avatarNode);
  500. var nameNode = new Element("div", { "text": name }).inject(receiverBodyNode);
  501. var lastNode = new Element("div").inject(receiverBodyNode);
  502. var lastFirstNode = new Element("div", { "class": "chat-left_triangle" }).inject(lastNode);
  503. //text
  504. if (msgBody.type == "emoji") { // 表情
  505. var img = "";
  506. for (var i = 0; i < this.emojiList.length; i++) {
  507. if (msgBody.body == this.emojiList[i].key) {
  508. img = this.emojiList[i].path;
  509. }
  510. }
  511. new Element("img", { "src": img, "class": "chat-content-emoji" }).inject(lastNode);
  512. } else if (msgBody.type == "image") {//image
  513. var imgBox = new Element("div", { "class": "img-chat" }).inject(lastNode);
  514. var url = this._getFileUrlWithWH(msgBody.fileId, 144, 192);
  515. new Element("img", { "src": url }).inject(imgBox);
  516. imgBox.addEvents({
  517. "click": function (e) {
  518. var downloadUrl = this._getFileDownloadUrl(msgBody.fileId);
  519. window.open(downloadUrl);
  520. }.bind(this)
  521. });
  522. } else if (msgBody.type == "audio") {
  523. var url = this._getFileDownloadUrl(msgBody.fileId);
  524. new Element("audio", { "src": url, "controls": "controls", "preload": "preload" }).inject(lastNode);
  525. } else if (msgBody.type == "location") {
  526. var mapBox = new Element("span").inject(lastNode);
  527. new Element("img", { "src": "../x_component_IMV2/$Main/default/icons/location.png", "width": 24, "height": 24 }).inject(mapBox);
  528. var url = this._getBaiduMapUrl(msgBody.latitude, msgBody.longitude, msgBody.address, msgBody.addressDetail);
  529. new Element("a", { "href": url, "target": "_blank", "text": msgBody.address }).inject(mapBox);
  530. } else if (msgBody.type == "file") { //文件
  531. var mapBox = new Element("span").inject(lastNode);
  532. var fileIcon = this._getFileIcon(msgBody.fileExtension);
  533. new Element("img", { "src": "../x_component_IMV2/$Main/file_icons/" + fileIcon, "width": 48, "height": 48 }).inject(mapBox);
  534. var downloadUrl = this._getFileDownloadUrl(msgBody.fileId);
  535. new Element("a", { "href": downloadUrl, "target": "_blank", "text": msgBody.fileName }).inject(mapBox);
  536. } else {//text
  537. new Element("span", { "text": msgBody.body }).inject(lastNode);
  538. }
  539. if (!isTop) {
  540. var scrollFx = new Fx.Scroll(this.chatContentNode);
  541. scrollFx.toBottom();
  542. }
  543. },
  544. /**
  545. * 消息接收体
  546. * @param msgBody
  547. * @param createPerson 消息人员
  548. * @param isTop 是否放在顶部
  549. */
  550. _buildReceiver: function (msgBody, createPerson, isTop) {
  551. var receiverBodyNode = new Element("div", { "class": "chat-receiver" }).inject(this.chatContentNode, isTop ? "top" : "bottom");
  552. var avatarNode = new Element("div").inject(receiverBodyNode);
  553. var avatarUrl = this._getIcon(createPerson);
  554. var name = createPerson;
  555. if (createPerson.indexOf("@") != -1) {
  556. name = name.substring(0, createPerson.indexOf("@"));
  557. }
  558. var avatarImg = new Element("img", { "src": avatarUrl }).inject(avatarNode);
  559. var nameNode = new Element("div", { "text": name }).inject(receiverBodyNode);
  560. var lastNode = new Element("div").inject(receiverBodyNode);
  561. var lastFirstNode = new Element("div", { "class": "chat-right_triangle" }).inject(lastNode);
  562. if (msgBody.type == "emoji") { // 表情
  563. var img = "";
  564. for (var i = 0; i < this.emojiList.length; i++) {
  565. if (msgBody.body == this.emojiList[i].key) {
  566. img = this.emojiList[i].path;
  567. }
  568. }
  569. new Element("img", { "src": img, "class": "chat-content-emoji" }).inject(lastNode);
  570. } else if (msgBody.type == "image") {//image
  571. var imgBox = new Element("div", { "class": "img-chat" }).inject(lastNode);
  572. var url = this._getFileUrlWithWH(msgBody.fileId, 144, 192);
  573. new Element("img", { "src": url }).inject(imgBox);
  574. imgBox.addEvents({
  575. "click": function (e) {
  576. var downloadUrl = this._getFileDownloadUrl(msgBody.fileId);
  577. window.open(downloadUrl);
  578. }.bind(this)
  579. });
  580. } else if (msgBody.type == "audio") {
  581. var url = this._getFileDownloadUrl(msgBody.fileId);
  582. new Element("audio", { "src": url, "controls": "controls", "preload": "preload" }).inject(lastNode);
  583. } else if (msgBody.type == "location") {
  584. var mapBox = new Element("span").inject(lastNode);
  585. new Element("img", { "src": "../x_component_IMV2/$Main/default/icons/location.png", "width": 24, "height": 24 }).inject(mapBox);
  586. var url = this._getBaiduMapUrl(msgBody.latitude, msgBody.longitude, msgBody.address, msgBody.addressDetail);
  587. new Element("a", { "href": url, "target": "_blank", "text": msgBody.address }).inject(mapBox);
  588. } else if (msgBody.type == "file") { //文件
  589. var mapBox = new Element("span").inject(lastNode);
  590. var fileIcon = this._getFileIcon(msgBody.fileExtension);
  591. new Element("img", { "src": "../x_component_IMV2/$Main/file_icons/" + fileIcon, "width": 48, "height": 48 }).inject(mapBox);
  592. var downloadUrl = this._getFileDownloadUrl(msgBody.fileId);
  593. new Element("a", { "href": downloadUrl, "target": "_blank", "text": msgBody.fileName }).inject(mapBox);
  594. } else {//text
  595. new Element("span", { "text": msgBody.body }).inject(lastNode);
  596. }
  597. if (!isTop) {
  598. var scrollFx = new Fx.Scroll(this.chatContentNode);
  599. scrollFx.toBottom();
  600. }
  601. },
  602. //图片 根据大小 url
  603. _getFileUrlWithWH: function (id, width, height) {
  604. var action = MWF.Actions.get("x_message_assemble_communicate").action;
  605. var url = action.getAddress() + action.actions.imgFileDownloadWithWH.uri;
  606. url = url.replace("{id}", encodeURIComponent(id));
  607. url = url.replace("{width}", encodeURIComponent(width));
  608. url = url.replace("{height}", encodeURIComponent(height));
  609. return url;
  610. },
  611. //file 下载的url
  612. _getFileDownloadUrl: function (id) {
  613. var action = MWF.Actions.get("x_message_assemble_communicate").action;
  614. var url = action.getAddress() + action.actions.imgFileDownload.uri;
  615. url = url.replace("{id}", encodeURIComponent(id));
  616. return url;
  617. },
  618. //百度地图打开地址
  619. _getBaiduMapUrl: function (lat, longt, address, content) {
  620. var url = "https://api.map.baidu.com/marker?location=" + lat + "," + longt + "&title=" + address + "&content=" + content + "&output=html&src=net.o2oa.map";
  621. return url;
  622. },
  623. //用户头像
  624. _getIcon: function (id) {
  625. var orgAction = MWF.Actions.get("x_organization_assemble_control")
  626. var url = (id) ? orgAction.getPersonIcon(id) : "../x_component_IMV2/$Main/default/icons/group.png";
  627. return url + "?" + (new Date().getTime());
  628. },
  629. // 文件类型icon图
  630. _getFileIcon: function (ext) {
  631. if (ext) {
  632. if (ext === "jpg" || ext === "jpeg") {
  633. return "icon_file_jpeg.png";
  634. } else if (ext === "gif") {
  635. return "icon_file_gif.png";
  636. } else if (ext === "png") {
  637. return "icon_file_png.png";
  638. } else if (ext === "tiff") {
  639. return "icon_file_tiff.png";
  640. } else if (ext === "bmp" || ext === "webp") {
  641. return "icon_file_img.png";
  642. } else if (ext === "ogg" || ext === "mp3" || ext === "wav" || ext === "wma") {
  643. return "icon_file_mp3.png";
  644. } else if (ext === "mp4") {
  645. return "icon_file_mp4.png";
  646. } else if (ext === "avi") {
  647. return "icon_file_avi.png";
  648. } else if (ext === "mov" || ext === "rm" || ext === "mkv") {
  649. return "icon_file_rm.png";
  650. } else if (ext === "doc" || ext === "docx") {
  651. return "icon_file_word.png";
  652. } else if (ext === "xls" || ext === "xlsx") {
  653. return "icon_file_excel.png";
  654. } else if (ext === "ppt" || ext === "pptx") {
  655. return "icon_file_ppt.png";
  656. } else if (ext === "html") {
  657. return "icon_file_html.png";
  658. } else if (ext === "pdf") {
  659. return "icon_file_pdf.png";
  660. } else if (ext === "txt" || ext === "json") {
  661. return "icon_file_txt.png";
  662. } else if (ext === "zip") {
  663. return "icon_file_zip.png";
  664. } else if (ext === "rar") {
  665. return "icon_file_rar.png";
  666. } else if (ext === "7z") {
  667. return "icon_file_arch.png";
  668. } else if (ext === "ai") {
  669. return "icon_file_ai.png";
  670. } else if (ext === "att") {
  671. return "icon_file_att.png";
  672. } else if (ext === "au") {
  673. return "icon_file_au.png";
  674. } else if (ext === "cad") {
  675. return "icon_file_cad.png";
  676. } else if (ext === "cdr") {
  677. return "icon_file_cdr.png";
  678. } else if (ext === "eps") {
  679. return "icon_file_eps.png";
  680. } else if (ext === "exe") {
  681. return "icon_file_exe.png";
  682. } else if (ext === "iso") {
  683. return "icon_file_iso.png";
  684. } else if (ext === "link") {
  685. return "icon_file_link.png";
  686. } else if (ext === "swf") {
  687. return "icon_file_flash.png";
  688. } else if (ext === "psd") {
  689. return "icon_file_psd.png";
  690. } else if (ext === "tmp") {
  691. return "icon_file_tmp.png";
  692. } else {
  693. return "icon_file_unkown.png";
  694. }
  695. } else {
  696. return "icon_file_unkown.png";
  697. }
  698. },
  699. //输出特殊的时间格式
  700. _friendlyTime: function (date) {
  701. var day = date.getDate();
  702. var monthIndex = date.getMonth();
  703. var year = date.getFullYear();
  704. var time = date.getTime();
  705. var today = new Date();
  706. var todayDay = today.getDate();
  707. var todayMonthIndex = today.getMonth();
  708. var todayYear = today.getFullYear();
  709. var todayTime = today.getTime();
  710. var retTime = "";
  711. //同一天
  712. if (day === todayDay && monthIndex === todayMonthIndex && year === todayYear) {
  713. var hour = 0;
  714. if (todayTime > time) {
  715. hour = parseInt((todayTime - time) / 3600000);
  716. if (hour == 0) {
  717. retTime = Math.max(parseInt((todayTime - time) / 60000), 1) + "分钟前"
  718. } else {
  719. retTime = hour + "小时前"
  720. }
  721. }
  722. return retTime;
  723. }
  724. var dates = parseInt(time / 86400000);
  725. var todaydates = parseInt(todayTime / 86400000);
  726. if (todaydates > dates) {
  727. var days = (todaydates - dates);
  728. if (days == 1) {
  729. retTime = "昨天";
  730. } else if (days == 2) {
  731. retTime = "前天 ";
  732. } else if (days > 2 && days < 31) {
  733. retTime = days + "天前";
  734. } else if (days >= 31 && days <= 2 * 31) {
  735. retTime = "一个月前";
  736. } else if (days > 2 * 31 && days <= 3 * 31) {
  737. retTime = "2个月前";
  738. } else if (days > 3 * 31 && days <= 4 * 31) {
  739. retTime = "3个月前";
  740. } else {
  741. retTime = this._formatDate(date);
  742. }
  743. }
  744. return retTime;
  745. },
  746. //yyyy-MM-dd
  747. _formatDate: function (date) {
  748. var month = date.getMonth() + 1;
  749. var day = date.getDate();
  750. month = (month.toString().length == 1) ? ("0" + month) : month;
  751. day = (day.toString().length == 1) ? ("0" + day) : day;
  752. return date.getFullYear() + '-' + month + '-' + day;
  753. },
  754. //当前时间 yyyy-MM-dd HH:mm:ss
  755. _currentTime: function () {
  756. var today = new Date();
  757. var year = today.getFullYear(); //得到年份
  758. var month = today.getMonth();//得到月份
  759. var date = today.getDate();//得到日期
  760. var hour = today.getHours();//得到小时
  761. var minu = today.getMinutes();//得到分钟
  762. var sec = today.getSeconds();//得到秒
  763. month = month + 1;
  764. if (month < 10) month = "0" + month;
  765. if (date < 10) date = "0" + date;
  766. if (hour < 10) hour = "0" + hour;
  767. if (minu < 10) minu = "0" + minu;
  768. if (sec < 10) sec = "0" + sec;
  769. return year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;
  770. }
  771. });
  772. //会话对象
  773. MWF.xApplication.IMV2.ConversationItem = new Class({
  774. initialize: function (data, main) {
  775. this.data = data;
  776. this.main = main;
  777. this.container = this.main.chatItemListNode;
  778. this.load();
  779. },
  780. load: function () {
  781. var avatarDefault = this.main._getIcon();
  782. var convData = {
  783. "id": this.data.id,
  784. "avatarUrl": avatarDefault,
  785. "title": this.data.title,
  786. "time": "",
  787. "lastMessage": "",
  788. "lastMessageType": "text"
  789. };
  790. var distinguishedName = layout.session.user.distinguishedName;
  791. if (this.data.type && this.data.type === "single") {
  792. var chatPerson = "";
  793. if (this.data.personList && this.data.personList instanceof Array) {
  794. for (var j = 0; j < this.data.personList.length; j++) {
  795. var person = this.data.personList[j];
  796. if (person !== distinguishedName) {
  797. chatPerson = person;
  798. }
  799. }
  800. }
  801. convData.avatarUrl = this.main._getIcon(chatPerson);
  802. var name = chatPerson;
  803. if (chatPerson.indexOf("@") != -1) {
  804. name = name.substring(0, chatPerson.indexOf("@"));
  805. }
  806. convData.title = name;
  807. }
  808. if (this.data.lastMessage) {
  809. //todo 其它消息类型
  810. var mBody = JSON.parse(this.data.lastMessage.body);
  811. convData.lastMessage = mBody.body;
  812. if (this.data.lastMessage.createTime) {
  813. var time = this.main._friendlyTime(o2.common.toDate(this.data.lastMessage.createTime));
  814. convData.time = time;
  815. }
  816. if (mBody.type) {
  817. convData.lastMessageType = mBody.type;
  818. }
  819. }
  820. this.node = new Element("div", { "class": "item" }).inject(this.container);
  821. this.nodeBaseItem = new Element("div", { "class": "base" }).inject(this.node);
  822. var avatarNode = new Element("div", { "class": "avatar" }).inject(this.nodeBaseItem);
  823. new Element("img", { "src": convData.avatarUrl, "class": "img" }).inject(avatarNode);
  824. var bodyNode = new Element("div", { "class": "body" }).inject(this.nodeBaseItem);
  825. var bodyUpNode = new Element("div", { "class": "body_up" }).inject(bodyNode);
  826. this.titleNode = new Element("div", { "class": "body_title", "text": convData.title }).inject(bodyUpNode);
  827. this.messageTimeNode = new Element("div", { "class": "body_time", "text": convData.time }).inject(bodyUpNode);
  828. if (convData.lastMessageType == "emoji") {
  829. this.lastMessageNode = new Element("div", { "class": "body_down" }).inject(bodyNode);
  830. var imgPath = "";
  831. for (var i = 0; i < this.main.emojiList.length; i++) {
  832. var emoji = this.main.emojiList[i];
  833. if (emoji.key == convData.lastMessage) {
  834. imgPath = emoji.path;
  835. }
  836. }
  837. new Element("img", { "src": imgPath, "style": "width: 16px;height: 16px;" }).inject(this.lastMessageNode);
  838. } else {
  839. this.lastMessageNode = new Element("div", { "class": "body_down", "text": convData.lastMessage }).inject(bodyNode);
  840. }
  841. var _self = this;
  842. this.node.addEvents({
  843. "click": function () {
  844. _self.main.tapConv(_self.data);
  845. }
  846. });
  847. },
  848. /**
  849. *
  850. * 刷新会话列表的最后消息内容
  851. * @param {*} lastMessage
  852. */
  853. refreshLastMsg: function (lastMessage) {
  854. //目前是text 类型的消息
  855. var jsonbody = lastMessage.body;
  856. var body = JSON.parse(jsonbody);
  857. if (this.lastMessageNode) {
  858. if (body.type == "emoji") { //表情 消息
  859. var imgPath = "";
  860. for (var i = 0; i < this.main.emojiList.length; i++) {
  861. var emoji = this.main.emojiList[i];
  862. if (emoji.key == body.body) {
  863. imgPath = emoji.path;
  864. }
  865. }
  866. this.lastMessageNode.empty();
  867. new Element("img", { "src": imgPath, "style": "width: 16px;height: 16px;" }).inject(this.lastMessageNode);
  868. } else { //文本消息
  869. this.lastMessageNode.empty();
  870. this.lastMessageNode.set('text', body.body);
  871. }
  872. }
  873. var time = this.main._friendlyTime(o2.common.toDate(lastMessage.createTime));
  874. if (this.messageTimeNode) {
  875. this.messageTimeNode.set("text", time);
  876. }
  877. },
  878. refreshConvTitle: function (title) {
  879. this.titleNode.set("text", title);
  880. },
  881. addCheckClass: function () {
  882. if (this.nodeBaseItem) {
  883. if (!this.nodeBaseItem.hasClass("check")) {
  884. this.nodeBaseItem.addClass("check");
  885. }
  886. }
  887. },
  888. removeCheckClass: function () {
  889. if (this.nodeBaseItem) {
  890. if (this.nodeBaseItem.hasClass("check")) {
  891. this.nodeBaseItem.removeClass("check");
  892. }
  893. }
  894. }
  895. });
  896. //弹出窗 表单 单聊创建的form
  897. MWF.xApplication.IMV2.SingleForm = new Class({
  898. Extends: MPopupForm,
  899. Implements: [Options, Events],
  900. options: {
  901. "style": "minder",
  902. "width": 700,
  903. //"height": 300,
  904. "height": "200",
  905. "hasTop": true,
  906. "hasIcon": false,
  907. "draggable": true,
  908. "title": "创建单聊"
  909. },
  910. _createTableContent: function () {
  911. var html = "<table width='100%' bordr='0' cellpadding='7' cellspacing='0' styles='formTable' style='margin-top: 20px; '>" +
  912. "<tr><td styles='formTableTitle' lable='person' width='25%'></td>" +
  913. " <td styles='formTableValue14' item='person' colspan='3'></td></tr>" +
  914. "</table>";
  915. this.formTableArea.set("html", html);
  916. var me = layout.session.user.distinguishedName;
  917. var exclude = [];
  918. if (me) {
  919. exclude = [me];
  920. }
  921. this.form = new MForm(this.formTableArea, this.data || {}, {
  922. isEdited: true,
  923. style: "minder",
  924. hasColon: true,
  925. itemTemplate: {
  926. person: { text: "选择人员", type: "org", orgType: "person", count: 0, notEmpty: true, exclude: exclude },
  927. }
  928. }, this.app);
  929. this.form.load();
  930. },
  931. _createBottomContent: function () {
  932. if (this.isNew || this.isEdited) {
  933. this.okActionNode = new Element("button.inputOkButton", {
  934. "styles": this.css.inputOkButton,
  935. "text": "确定"
  936. }).inject(this.formBottomNode);
  937. this.okActionNode.addEvent("click", function (e) {
  938. this.save(e);
  939. }.bind(this));
  940. }
  941. this.cancelActionNode = new Element("button.inputCancelButton", {
  942. "styles": (this.isEdited || this.isNew || this.getEditPermission()) ? this.css.inputCancelButton : this.css.inputCancelButton_long,
  943. "text": "关闭"
  944. }).inject(this.formBottomNode);
  945. this.cancelActionNode.addEvent("click", function (e) {
  946. this.close(e);
  947. }.bind(this));
  948. },
  949. save: function () {
  950. var data = this.form.getResult(true, null, true, false, true);
  951. if (data) {
  952. this.app.newConversation(data.person, "single");
  953. this.close();
  954. }
  955. }
  956. });
  957. //创建聊天 弹出窗表单
  958. MWF.xApplication.IMV2.CreateConversationForm = new Class({
  959. Extends: MPopupForm,
  960. Implements: [Options, Events],
  961. options: {
  962. "style": "minder",
  963. "width": 700,
  964. "height": "200",
  965. "hasTop": true,
  966. "hasIcon": false,
  967. "draggable": true,
  968. "title": "创建单聊",
  969. "personCount": 1, //1 是单选 0 是多选,
  970. "personSelected": [],
  971. "isUpdateMember": false
  972. },
  973. _createTableContent: function () {
  974. var html = "<table width='100%' bordr='0' cellpadding='7' cellspacing='0' styles='formTable' style='margin-top: 20px; '>" +
  975. "<tr><td styles='formTableTitle' lable='person' width='25%'></td>" +
  976. " <td styles='formTableValue14' item='person' colspan='3'></td></tr>" +
  977. "</table>";
  978. this.formTableArea.set("html", html);
  979. var me = layout.session.user.distinguishedName;
  980. var exclude = [];
  981. if (me) {
  982. exclude = [me];
  983. }
  984. this.form = new MForm(this.formTableArea, this.data || {}, {
  985. isEdited: true,
  986. style: "minder",
  987. hasColon: true,
  988. itemTemplate: {
  989. person: { text: "选择人员", type: "org", orgType: "person", count: this.options["personCount"], notEmpty: true, exclude: exclude, value: this.options["personSelected"] },
  990. }
  991. }, this.app);
  992. this.form.load();
  993. },
  994. _createBottomContent: function () {
  995. if (this.isNew || this.isEdited) {
  996. this.okActionNode = new Element("button.inputOkButton", {
  997. "styles": this.css.inputOkButton,
  998. "text": "确定"
  999. }).inject(this.formBottomNode);
  1000. this.okActionNode.addEvent("click", function (e) {
  1001. this.save(e);
  1002. }.bind(this));
  1003. }
  1004. this.cancelActionNode = new Element("button.inputCancelButton", {
  1005. "styles": (this.isEdited || this.isNew || this.getEditPermission()) ? this.css.inputCancelButton : this.css.inputCancelButton_long,
  1006. "text": "关闭"
  1007. }).inject(this.formBottomNode);
  1008. this.cancelActionNode.addEvent("click", function (e) {
  1009. this.close(e);
  1010. }.bind(this));
  1011. },
  1012. save: function () {
  1013. var data = this.form.getResult(true, null, true, false, true);
  1014. if (data) {
  1015. if (this.options["isUpdateMember"] === true) {
  1016. this.app.updateConversationMembers(data.person, this.app.conversationId);
  1017. } else {
  1018. this.app.newConversation(data.person, this.options["personCount"] === 1 ? "single" : "group");
  1019. }
  1020. this.close();
  1021. }
  1022. }
  1023. });
  1024. //修改群名
  1025. MWF.xApplication.IMV2.UpdateConvTitleForm = new Class({
  1026. Extends: MPopupForm,
  1027. Implements: [Options, Events],
  1028. options: {
  1029. "style": "minder",
  1030. "width": 500,
  1031. "height": "200",
  1032. "hasTop": true,
  1033. "hasIcon": false,
  1034. "draggable": true,
  1035. "title": "修改群名"
  1036. },
  1037. _createTableContent: function () {
  1038. var html = "<table width='100%' bordr='0' cellpadding='7' cellspacing='0' styles='formTable' style='margin-top: 20px; '>" +
  1039. "<tr><td styles='formTableTitle' lable='title' width='25%'></td>" +
  1040. " <td styles='formTableValue14' item='title' colspan='3'></td></tr>" +
  1041. "</table>";
  1042. this.formTableArea.set("html", html);
  1043. this.form = new MForm(this.formTableArea, this.data || {}, {
  1044. isEdited: true,
  1045. style: "minder",
  1046. hasColon: true,
  1047. itemTemplate: {
  1048. title: { text: "群名", type: "text", notEmpty: true },
  1049. }
  1050. }, this.app);
  1051. this.form.load();
  1052. },
  1053. _createBottomContent: function () {
  1054. if (this.isNew || this.isEdited) {
  1055. this.okActionNode = new Element("button.inputOkButton", {
  1056. "styles": this.css.inputOkButton,
  1057. "text": "确定"
  1058. }).inject(this.formBottomNode);
  1059. this.okActionNode.addEvent("click", function (e) {
  1060. this.save(e);
  1061. }.bind(this));
  1062. }
  1063. this.cancelActionNode = new Element("button.inputCancelButton", {
  1064. "styles": (this.isEdited || this.isNew || this.getEditPermission()) ? this.css.inputCancelButton : this.css.inputCancelButton_long,
  1065. "text": "关闭"
  1066. }).inject(this.formBottomNode);
  1067. this.cancelActionNode.addEvent("click", function (e) {
  1068. this.close(e);
  1069. }.bind(this));
  1070. },
  1071. save: function () {
  1072. var data = this.form.getResult(true, null, true, false, true);
  1073. if (data) {
  1074. this.app.updateConversationTitle(data.title, this.app.conversationId);
  1075. this.close();
  1076. }
  1077. }
  1078. });