Ext.namespace("JDBS.Apps.AppClass.JDBSIM");
/**
* 在线交流功能界面类
*/
JDBS.Apps.AppClass.JDBSIM.IMUI=function(o){
this.app=o.app||null;//指向im app
delete o.app;
//传递给面板的配置参数
var treeLoader = new Ext.tree.TreeLoader({
preloadChildren: true,
clearOnLoad:false,
baseParams: null,
url:JDBS.Apps.MainApp.HandleAjaxUrl + "&action=onlineHandler&todo=getAllUser",
requestMethod: "GET",
listeners:{
beforeload:{fn:function(){
if(this.app.stateTast){
this.app.stateTast.cancel();
}
this.body.mask("加载中...","x-mask-loading");
},scope:this},
load:{fn:function(){
if (!Ext.isEmpty(this.app.userInf.username))this.app.getUStat();
this.body.unmask();
this.expandAll();
},scope:this}
}
});
var treeNode = new Ext.tree.AsyncTreeNode({
text: '',
id: 'root',
expanded: false,
listeners: {
"click": function(node, e){
e.stopEvent();
alert(node.text);
}
}
});
/**
* 设置在线状态
* 改变状态时保存当前状态
* @param {string} 节点id
* @param {number} 状态 1 在线 2 离线 3 有消息
*/
this.setStateByNode=function(node,index,arr){
var onCls="JDBSIM_IconCls_UserOnLine",offCls="JDBSIM_IconCls_UserOffLine",hm="JDBSIM_IconCls_HaveMsg";
var n=this.getNodeById(node.id),newNode;
if(node.id.substr(0,1)=="f"){
if(!n){
n=this.getNodeById(node.id.replace("f","m"));
}
}
if (n){
}else{
var imapp=this.app,root,newNode;
if (!Ext.isEmpty(imapp.userInf.username)){
//客服端直接添加到客户请求列表，客户端添加到临时会话
var role=node.id.substr(0,1),root;
switch(role){
case ("k"):{
root=this.getNodeById("customer");
break;
}
case("c"):{
root=this.getNodeById("cs");
break;
}
case("f"):{
root=this.getNodeById("stranger");
node.id=node.id.replace("f","m");
if(!root){
root=this.getRootNode().appendChild(
new Ext.tree.TreeNode({
text:"临时会话",
id:"stranger",
iconCls:"JDBSIM_IconCls_StrangerG",
leaf:false,
expanded:true
})
);
root.expand(true);
}
break;
}
}
n=new Ext.tree.TreeNode(node);
n.attributes.num=0;
root.appendChild(n);
}
}
var nui=n.getUI(),oldcls,newcls;
oldcls=n.attributes.online?onCls:offCls;
n.attributes.online=node.online;
newcls=node.online?onCls:offCls;
var imgel=nui.getIconEl();
if (oldcls!=newcls){
imgel.className=imgel.className.replace(oldcls,newcls);
}
//------------
if (parseInt(node.num) > 0) {
n.setText(n.attributes.rawtext+ "<spancolor:red;"">(" + node.num + ")</span>");
if (!n.attributes.chatW) {
if (node.num > (n.attributes.num||0)) {
//新消息
if (this.app.runMode == 2)
this.app.playSound();
}
}
n.attributes.num =node.num;
}
else {
n.setText(n.attributes.rawtext);
n.attributes.num = 0;
}
//--------------------------
};
/**
* 批量设置在线状态
* @param {Object} 状态数组
*/
this.setStateBatch=function(a){
if (a.length>0){
Ext.each(a,this.setStateByNode,this);
}
};
/**
* 刷新用户列表
* @param {Object} oc
*/
this.refreshList=function(oc){
this.root.reload();
}
var oc = {
collapsible: true,
loader: treeLoader,
title: "在线交流",
iconCls: "iconCls_east",
rootVisible: false,
lines: false,
autoScroll: true,
expanded: true,
bbar:[],
listeners: {
render:function(tp){
tp.expandAll();
},
click: function(node, e){
//alert("单击事件");
}
},
tools: [{
id: 'refresh',
on: {
click: function(){
this.refreshList();
},
scope:this
}
}],
root: treeNode
};
//bbar: [{xtype:"button",text:"设置",tooltip:"设置",iconCls:""}],
if (this.app.runMode==1){
oc.bbar=[{text:"查找用户",iconCls:"iconCls_searchAdd",handler:function(bnt,e){
this.searchFriend();
},scope:this.app}]
}else{
oc.bbar.push({
text:"",
iconCls:(this.app.config.sound==1)?"JDBSIM_IconCls_SoundOn":"JDBSIM_IconCls_SoundOff",
handler:function(bnt,e){
bnt.setIconClass(bnt.iconCls.toggle("JDBSIM_IconCls_SoundOn","JDBSIM_IconCls_SoundOff"));
this.app.config.sound=(bnt.iconCls=="JDBSIM_IconCls_SoundOn")?1:0;
},
scope:this
});
}
Ext.apply(oc, o);
JDBS.Apps.AppClass.JDBSIM.IMUI.superclass.constructor.call(this, oc);
};
Ext.extend(JDBS.Apps.AppClass.JDBSIM.IMUI, Ext.tree.TreePanel, {});
/**
* 获取消息的store
* @param {Object} oc
* 配置对象中需要 fields属性
*/
JDBS.Apps.AppClass.JDBSIM.MsgStore=function(o){
var oc={
proxy: new Ext.data.HttpProxy({
url:JDBS.Apps.MainApp.HandleAjaxUrl+"&action=onlineHandler&todo=getmsg",
method: "POST"
}), autoLoad: false,
reader: new Ext.data.JsonReader({
//id: "id_9dsoft",
//totalProperty: "total",
root: "result",
successProperty: "success",
remoteSort: false,
fields:o.fields
})
}
delete o.fields;
Ext.apply(oc,o);
JDBS.Apps.AppClass.JDBSIM.MsgStore.superclass.constructor.call(this,oc);
};
Ext.extend(JDBS.Apps.AppClass.JDBSIM.MsgStore,Ext.data.Store,{});
/**
* 对话窗口类
*
* @param {Object} oc
* uid:对方id,ut;对方类型,un:对方用户名,uonline 对方在线状态,mun:自己用户名,muid:自己id,mut:自己用户类型
* node:点击的节点,getMsg_interval:提取消息的时间间隔 默认 5 秒
*/
JDBS.Apps.AppClass.JDBSIM.ChatWindow = function(oc){
this.imApp=JDBS.Apps.AppClass.JDBSIM.App||null;
this.toUID=oc.uid;//用户id
this.toUT=oc.ut; //用户类型
this.toU=oc.un; //用户名
this.fromNode=oc.node||null;
delete oc.node;
delete oc.un;
this.TimerId=null;
this.mun=oc.mun;//自己用户名
this.mid=oc.mid;
this.mut=oc.mut;
this.mUserInf=oc.mUserInf;//存储登录用户信息
this.getMsg_interval=oc.getMsg_interval||5000;
delete oc.mun;delete oc.mid;delete oc.mut;delete oc.mUserInf;
this.fields=[{name:"sender"},{name:"sendtime"},{name:"content"},{name:"id_9dsoft"}];
var msgstore = new JDBS.Apps.AppClass.JDBSIM.MsgStore({fields:this.fields});
this.msgStore=msgstore;
var newMsgHander=function(rs,op,suc){
//suc=true;
if (!this.TimerId){
this.TimerId=new Ext.util.DelayedTask();
}
var DT=this.TimerId;
if (suc){
if (rs.length>0){
//填充消息列表
this.addMsg(rs);
//窗口闪三次
//去掉消息提示
if (this.fromNode) {
this.fromNode.setText(this.fromNode.attributes.rawtext);
this.fromNode.attributes.num=0;
this.fromNode.attributes.chatW=true;
}
if (this.imApp){
if (this.imApp.runMode==2){
this.imApp.playSound();
}
}
}
}else{
//alert("获取消息失败");
}
DT.delay(this.getMsg_interval,function(){this.checkMsg()},this);
};
/**
* 检测新消息,通过一个store获取新消息
*/
this.checkMsg=function(){
this.msgStore.load({params:{tou:this.toU,tout:this.toUT,touid:this.toUID},callback:newMsgHander,scope:this});
};
/**
* 发送消息
*/
this.addMsg=function(rs){
this.msList.add(rs);
//刷新列表
var gv=this.msGrid.getView();
gv.refresh();
//滚动到底部
gv.scrollToBottom();
}
this.closeW=function(){
//关闭窗口
this.close();
};
this.sendMsg=function(){
var f=this.chatF,bf=this.chatF.getForm(),editor=bf.findField("content");
var rc=Ext.data.Record.create(this.fields),sc=editor.getValue(),stripC=Ext.util.Format.stripTags(sc);
if (Ext.isEmpty(stripC.trim())){Ext.Msg.alert('提示', '消息内容不能为空!');return false;}else{
//内容长度限制
if(stripC.length>200){
Ext.MessageBox.show({title:"提示",msg:"消息内容长度不能超过200个字符",icon:Ext.MessageBox.WARNING,buttons:{ok:true}});
return false;
}
}
bf.submit({
url:JDBS.Apps.MainApp.HandleAjaxUrl+"&action=onlineHandler&todo=sendmsg",
method:"POST",
params:{tou:this.toU,tout:this.toUT,touid:this.toUID},
success:function(f,a){
//由服务器端返回发送时间
f.findField("content").setValue("");
var id=a.result.data.newid,st=a.result.data.sendtime;
var co={sender:this.mun,sendtime:st,content:sc,id_9dsoft:id};
var r=new rc(co);
this.addMsg(r);
},
failure:function(f,a){
//发送失败
var id=0,st=new Date();
sc="<spancolor:red"">消息发送失败,请重试</span><br />"+sc;
var co={sender:this.mun,sendtime:st,content:sc,id_9dsoft:id};
var r=new rc(co);
this.addMsg(r);
},
scope:this
});
};
var gs=new Ext.data.SimpleStore({
data:[],
fields:this.fields,
sortInfo:{field: "sendtime", direction: "ASC"}
});
//gs.on("add",function(s,rs,i){alert(rs.length);});
this.msList=gs;//消息列表store
//消息表格
//------------------------------------------
//对话框功能按钮
var tbar=[];
(function(){
//this=chatwindow
tbar.push({text:"查看交流记录",handler:function(bnt,e){
if(this.mUserInf.usertype=="001"){
var mapp=JDBS.Apps.MainApp;
var tabid=mapp.NameRules.centerTabPre+"001001";
var p=mapp.West.items.items[0];
p.fireEvent("click",p.getNodeById("001001"));
}else{
JDBS.Apps.OnlineServer.App.getOnlineLog({cname:this.toU,cid:this.toUID});
};
},scope:this,iconCls:"iconCls_menu_linelog"});
//查看资料
if((this.mUserInf.usertype=="001" && this.toUT=="001")||this.mUserInf.usertype=="002"){
tbar.push({text:"查看资料",handler:function(bnt,e){
//根据不同的登录用户调用不同的方法显示
if (this.mUserInf.usertype=="001"){
JDBS.Apps.AppClass.JDBSIM.App.userPorfile({
uid:this.toUID.substr(1),
ut:'001',
un:this.toU
})
}else{
JDBS.Apps.OnlineServer.App.getCustomerInf({cid:this.toUID,cname:this.toU});
}
},scope:this,iconCls:"iconCls_menu_profile"});
}
//发送文件
if ((this.mUserInf.usertype == '002') || (this.mUserInf.usertype== '001' && this.toUT == '002')) {
tbar.push({
text: "传送文件",
handler: function(bnt, e){
var mapp=(this.mUserInf.usertype=="002")?JDBS.Apps.OnlineServer.App:JDBS.Apps.MainApp;
var title = "给" + (this.toUT== "001" ? '客户 ' : '客服 ') + this.toU + " 传送文件";
//var url=JDBS.Apps.MainApp.HandleAjaxUrl+"&action=fileupload&p2=1&tout="+this.toUT+"&toun="+this.toUN;
//发送文件
var idpre = mapp.NameRules.sendFile;
idpre += this.toUID +"_"+ this.toUT;
var oq = {
action: "getFunc",
todo: "sendfile",
p2: 1,
toun: this.toU,
tout: this.toUT,
touid: this.toUID,
ctnId: idpre
};
autoLoad = {
method: "GET",
url: JDBS.Apps.MainApp.HandleAjaxUrl,
params: oq,
scripts: true,
nocache: true
};
if (this.mUserInf.usertype == "002") {
delete oq.action;
JDBS.Apps.OnlineServer.App.openInTabPanel({
id:idpre,
title:title,
params:oq,
iconCls:"iconCls_sendFile"
});
}
else {
JDBS.Apps.Funcs.CallServerFunc({
id: idpre,
title: title,
autoLoad: autoLoad,
iconCls: "iconCls_sendFile"
});
}
},
iconCls: "iconCls_sendFile",
scope: this
})
}
}).call(this);
//------------------------------------------
this.msGrid=new Ext.grid.GridPanel({
xtype: "grid",
store:gs,
tbar:tbar,
columns: [{
header: "username",
sortable: false,
dataIndex:"sender",
renderer:function(value,p,record,rowIndex,colIndex,store){
var st=record.get("sendtime");
var s='<span class="JDBSIM_MsgListSender">{0}</span><span class="JDBSIM_MsgListTime">{1}</span>';
return String.format(s,value,Ext.util.Format.date(st,'y-m-d H:i:s'));
}
}],
hideHeaders: true,
loadMask: false,
anchor: "100% 55%",
viewConfig: {
forceFit: true,
enableRowBody: true,
showPreview: true,
getRowClass: function(record, rowIndex, p, store){
p.body = '<div class="JDBSIM_MsgListContent">' + record.get("content") + '</div>';
return 'x-grid3-row-expanded';
}
}
});
this.chatF=new Ext.form.FormPanel({
anchor: "100% 45%",
items: [{
xtype:"htmleditor",
enableAlignments: false,
anchor:"100% 100%",
hideLabel:true,
name:"content",
enableSourceEdit:false,
enableLists:false
}]
});
var c = {
540,
height: 400,
layout:"anchor",
items: [this.msGrid,this.chatF],
buttons:[{text:"发送",handler:this.sendMsg,scope:this,iconCls:"JDBSIM_IconCls_sendMsg"},{text:"取消",handler:this.closeW,scope:this,iconCls:"iconCls_cancel"}],
listeners:{render:
{fn:this.checkMsg,scope:this},"beforeclose":{fn:function(w){if(this.TimerId){
this.TimerId.cancel();
if (this.fromNode){
this.fromNode.attributes.chatW=false;
}
}
return true;},scope:this}},
iconCls:"JDBSIM_IconCls_chatw",
keys:{key:Ext.EventObject.ENTER,fn:function(){
//alert("a");
//this.buttons[0].fireEvent("click");
},ctrl:false,alt:true,scope:this}
};
Ext.apply(c,oc);
Ext.QuickTips.init();
JDBS.Apps.AppClass.JDBSIM.ChatWindow.superclass.constructor.call(this,c);
};
Ext.extend(JDBS.Apps.AppClass.JDBSIM.ChatWindow, Ext.Window, {});
/**
* 在线交流应用程序
*/
JDBS.Apps.AppClass.JDBSIM.App = function(){
//私有成员区
/**
* 用户状态返回时处理函数
* @param {Object} op
* @param {Object} suc
* @param {Object} response
*/
var fstateHandler=function(op,suc,response){
if (suc){
response=Ext.util.JSON.decode(response.responseText);
if (response.success){
this.IMUI.setStateBatch(response.result);
}else{
}
}else{
}
if(!this.stateTast){
this.stateTast=new Ext.util.DelayedTask();
}
var DT=this.stateTast;
DT.delay(this.config.interval_state,function(){this.getUStat();},this);
};
return {
//运行模式,1客户端运行,2在线客服运行
runMode:1,
/**
* 用户信息
*/
userInf:{username:"",usertype:"",usercode:""},
//好友面板
IMUI: null,
//右键菜单
userListMenu:null,
/**
* 初始化
* @param {Object} config
* @param {userC} 用户配置信息 包含属性：username,usertype,usercode
* 配置选项说明
* container 要包含im ui的窗口,为面板的 renderTo属性配置
*/
init:function(o,userC){
userC=userC||{};
this.WG.zseed=7000;
Ext.apply(this.userInf,userC);
o= o||{};
this.runMode=o.runMode||1;
o.app=this;
delete o.runMode;
Ext.applyIf(o,{
renderTo:null
});
this.makeUI(o);
this.userListMenu=new Ext.menu.Menu({
items:[
{
hideOnClick:true
,text:"查看资料"
}
,{
hideOnClick:true
,text:"交流记录"
}
,{
hideOnClick:true
,text:"删除好友"
}
,{
hideOnClick:true
,text:"开始对话"
}
]
});
/*
this.userInf.username=JDBS.Apps.MainApp.UserInfo.username;
this.userInf.usertype="001";
*/
},
/**
* 窗口组
*/
WG: new Ext.WindowGroup(),
/**
* 获取好友状态(包括在线状态、消息状态)
*/
getUStat:function(){
//return false;//for test
Ext.Ajax.request(
{
url:JDBS.Apps.MainApp.HandleAjaxUrl+"&action=onlineHandler&todo=getstate",
callback:fstateHandler,
scope:this,
method:"GET"
});
},
/**
* 刷新用户状态的任务对象
* @param {Object} o
*/
stateTast:null,
/**
* 获取对话窗口id
* @param {Object} o
*/
getWId:function(o){
var wPre="chatWindow";
return wPre+"_"+o.ut+"_"+o.uid;
},
/**
* 打开一个对话窗口
* @param {Object} o
* ut(用户类型)-un(用户名)-uid(用户id)
* 2008年8月7日 14时41分15秒 只打开一个对话框窗口
*/
createCW:function(o){
var wid=this.getWId(o),
wt="与{0} {1} </b>对话",
sw=[];
switch(o.uid.substr(0,1)){
case "f":{
wt=String.format(wt,"好友",o.un);
break;
}
case "c":{
if (this.WG.get(wid)){this.WG.bringToFront(wid);return false;};
wt=String.format(wt,"客服",o.un);
if (this.config.oneSerW){
sw=this.WG.getBy(function(w){if (w.id.indexOf("_c")>-1){return true;}});
if (sw.length>0){
Ext.Msg.show(
{title:"提示",
msg:"您已打开一个与客服交流的窗口,不能同时与多名客服交流",
buttons:{ok:true},icon:Ext.Msg.WARNING,fn:function(){
window.aaa=sw;
window.aaab=this.WG;
this.WG.bringToFront(sw[0].id);
},scope:this});
return false;
}}
break;
}
case "k":{
wt=String.format(wt,"客户",o.un);
break;
}
case "m":{
wt=String.format(wt,"用户",o.un);
break;
}
}
if(this.WG.get(wid)){
this.WG.bringToFront(wid);
}else{
Ext.apply(o,{id:wid,title:wt,manager:this.WG});
var w=new JDBS.Apps.AppClass.JDBSIM.ChatWindow(o);
w.show();
};
},
//生成ui,返回一个面板
makeUI:function(o){
var imui = new JDBS.Apps.AppClass.JDBSIM.IMUI(o);
this.IMUI = imui;
//事件处理
var dbH = function(node, e){
//双击打开对话窗口,节点属性 type
if (!Ext.isEmpty(node.attributes.type)){
var o ={
un: node.attributes.rawtext,
ut: node.attributes.type,
uid:node.id,
mun:this.userInf.username,
mUserInf:this.userInf,
getMsg_interval:this.config.interval_msg,
node:node
};
this.createCW(o);
}
}
//定义ui的事件处理
imui.on("dblclick",dbH, this); //双击事件
imui.on("render",function(tp){
/*
var bnt=Ext.get(tp.getBottomToolbar().items.items[0].id);
bnt.on({
"click":{
fn:function(bnt,e){
this.set();
},
scope:this
}
});*/
},this)
},
//配置信息
config:{
interval_state:5000
,interval_msg:5000
,sound:1 //是否声音通知
,oneSerW:true //是否仅限制同时只能与一个客服对话
},
//即时交流工具参数设置
//配置信息永久保存在cookie中
set:function(){
var setValues={
//刷新消息状态时间间隔
interval_state:parseInt(Cookies.get("im_interval_state")||"30000")/1000,
//获取消息时间间隔
interval_getMsg:parseInt(Cookies.get("im_interval_msg")||"30000")/1000
};
var form=new Ext.FormPanel({
defaults:{
xtype:"numberfield",
maxValue:180,
minValue:30,
50
},
plain:false,
baseCls:"x-plain",
items:[{
fieldLabel:"刷新在线状态间隔(秒)",
name:"is"
,value:setValues.interval_state,
labelWidth:150
},
{
fieldLabel:"获取对话时间间隔(秒)",
name:"im",
value:setValues.interval_getMsg,
labelWidth:150
}
],
buttons:[
{text:"保存",
handler:function(bnt,e){
}
},
{text:"取消",
handler:function(bnt,e){}}
]
});
var win=new Ext.Window({
title: "在线交流参数设置",
items: [form],
layout: "fit",
autoHeight:false,
autoWidth:false,
plain:false,
250,
height:140,
bodyStyle: "padding-top:10px"
});
win.show();
},
//查看用户资料 需要的参数 {uid:"",ut:'',un:''}
userPorfile:function(o){
var title="用户 "+o.un+" 的资料",
mapp=JDBS.Apps.MainApp,
id=mapp.NameRules.friendProfile+o.uid+"_"+o.ut;
var q={
id_9dsoft:o.uid,
action:"getfunc",
todo:"PublicProfile",
ctnid:id
};
JDBS.Apps.Funcs.CallServerFunc({
id:id,
title:title,
iconCls:"iconCls_menu_profile",
autoLoad:{
url:JDBS.Apps.MainApp.HandleAjaxUrl,
scripts:true,
nocache:true,
params:q,
method:"GET"
}
});
},
searchFriend:function(){
var title="查找添加好友",
mapp=JDBS.Apps.MainApp,
id=mapp.NameRules.searchFriend;
var q={
action:"getfunc",
todo:"searchFriend",
ctnid:id
};
JDBS.Apps.Funcs.CallServerFunc({
id:id,
title:title,
iconCls:"iconCls_search",
autoLoad:{
url:JDBS.Apps.MainApp.HandleAjaxUrl,
scripts:true,
nocache:true,
params:q,
method:"GET"
}
});
},
//播放声音 o
//{s:1,t:2} s:声音类型 1:新消息通知 t:播放次数
playSound:function(o){
if (this.config.sound==0) return false;
o = o ||{};
Ext.applyIf(o,{s:1,t:1});
var sound;
switch (o.s){
case 1:{
sound=Ext.fly("JDBSIM_NewMsgAlert").dom;
break;
}
}
if (Ext.isIE) {
sound.volume = 0;
sound.loop=o.t;
sound.src = sound.src;
}
}
}
}
();