mirror of
https://github.com/chatopera/cosin.git
synced 2025-08-01 16:38:02 +08:00
Closed #60 弹屏联系人UI更新
This commit is contained in:
Kyle
parent
0f724d83df
commit
3513415862
@ -24,7 +24,7 @@
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">类型：</label>
|
||||
<div class="layui-input-inline">
|
||||
<@select "com.dic.contacts.ckind" "ckind" ckind!'' "lay-ignore required lay-verify='required' "/>
|
||||
<@select "com.dic.contacts.ckind" "ckind" '4028838b5af1047e015af140df150003'!'' "lay-ignore required lay-verify='required' "/>
|
||||
</div>
|
||||
<span><font color="red">*</font></span>
|
||||
</div>
|
||||
|
||||
@ -19,6 +19,8 @@
|
||||
<span><font color="red">*</font><b style="font-size: 10px;">(您得到此联系人的时间)</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">类型：</label>
|
||||
<div class="layui-input-inline">
|
||||
@ -152,6 +154,72 @@
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<!--未选择标签style-->
|
||||
<style>
|
||||
.unselectedClass {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
border-radius: .25em;
|
||||
background-color: #FFFFFF !important;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
padding: 0 5px;
|
||||
font-size: 14px;
|
||||
border: solid 1px #CCCCCC;
|
||||
}
|
||||
</style>
|
||||
<div class="box-body ukefu-im-theme" style="margin-top: 20px;border-bottom: 1px solid white;">
|
||||
<div class="uk-layui-form">
|
||||
<div class="layui-collapse">
|
||||
<h2 class="layui-colla-title">标签</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label" style="text-align: left;">已有标签：</label>
|
||||
<div id="contactTags" class="layui-input-inline" style="width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-body ukefu-im-theme" style="margin-top: 20px;">
|
||||
<div class="uk-layui-form">
|
||||
<div class="layui-collapse">
|
||||
<h2 class="layui-colla-title">笔记</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label" style="text-align: left;">笔记分类：</label>
|
||||
<div class="layui-input-inline">
|
||||
<select id="notesCategory" name="notesCategory" lay-filter="category" required lay-verify="required" style="display: inline">
|
||||
<option value="callout">外呼</option>
|
||||
<option value="callin">呼入</option>
|
||||
<option value="webim">WebIM</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label" style="text-align: left;">内容：</label>
|
||||
<div class="layui-input-inline" style="width: 174%;">
|
||||
<textarea id="notesContent" name="notes" class="layui-textarea" ></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-button-inline" style="float: left;">
|
||||
<button class="layui-btn" lay-submit lay-filter="notesbtn" id="notesAddBtn">立即添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
</script>
|
||||
|
||||
<div class="main-agentuser">
|
||||
<div class="chat-agent-callout">
|
||||
<div class="chat-agent-callout" style="height: 102%;">
|
||||
<h1 class="site-h1">
|
||||
<#if curagentuser??>${curagentuser.username!''}（${curagentuser.region!''}）
|
||||
<div style="float:right;" class="ukefu-service-btn">
|
||||
@ -24,6 +24,236 @@
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
<#if contacts?? && curagentuser??>
|
||||
<input hidden value="${contacts.id!''}" id="contactsId"/>
|
||||
<input hidden value="${contacts.creater!''}" id="creater"/>
|
||||
<div class="ukefu-chat-prop">
|
||||
<div class="ukefu-prop-list">
|
||||
<div class="layui-side-scroll">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">往来历史</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<div id="timeline" class="timeline-container" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<link rel="stylesheet" href="/js/timelineMe/jquery.timelineMe.css" type="text/css">
|
||||
<script type="text/javascript" src="/js/timelineMe/jquery.timelineMe.js"></script>
|
||||
<script src="/js/CSKeFu_Rest_Request.v1.js"></script>
|
||||
<script>
|
||||
// save time line datas
|
||||
var items = [];
|
||||
|
||||
function getNotesByContactId () {
|
||||
// 获取数据
|
||||
var id = $('#contactsId').val();
|
||||
var payload = {
|
||||
path: 'contacts/notes',
|
||||
data: { ops: "fetch", contactid: id },
|
||||
};
|
||||
httpRequest(payload).then(function (data) {
|
||||
// remove a click event and set color to gray
|
||||
// AUTH_ERROR
|
||||
if(data.status && data.status === "AUTH_ERROR"){
|
||||
openFail(data.status);
|
||||
return;
|
||||
}
|
||||
|
||||
if(data.rc === 0){
|
||||
// var items = [];
|
||||
if(data.totalElements > 0) {
|
||||
for(var item of data.data){
|
||||
items.push({
|
||||
type: 'bigItem',
|
||||
label: item.updatetime,
|
||||
picto: '<div style="background-color: #3ac3e8;width: 100%;height: 100%;"></div>',
|
||||
shortContent: '<div style="border: solid 1px #333333; line-height: 2em;font-weight: 300;word-break:break-all"><p>事件类型：' + item.category + '</p>' + '<p>创建者:' + item.creatername + '</p>' + '<div><label>内容：</label><span>' + item.content + '</span></div></div>',
|
||||
forcePosition: 'right'
|
||||
});
|
||||
}
|
||||
}
|
||||
// time line
|
||||
makeTimeline()
|
||||
} else {
|
||||
}
|
||||
}, function (err) {
|
||||
console.log(err)
|
||||
});
|
||||
}
|
||||
|
||||
// make time line
|
||||
function makeTimeline() {
|
||||
var el = $('#timeline');
|
||||
if(el){
|
||||
$(el).empty();
|
||||
$('#timeline').timelineMe({});
|
||||
$('#timeline').timelineMe('load',
|
||||
items
|
||||
);
|
||||
} else {
|
||||
$('#timeline').timelineMe({
|
||||
items: items,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// unselect tag
|
||||
function unOrselectTag(id) {
|
||||
var el = $("#tag_" + id);
|
||||
var xid = el.attr("name");
|
||||
|
||||
if(xid){
|
||||
// unselected tag
|
||||
var payload = {
|
||||
path: 'contacts/tags',
|
||||
data: {
|
||||
ops: "remove",
|
||||
xid: xid,
|
||||
|
||||
},
|
||||
};
|
||||
httpRequest(payload).then(function (data) {
|
||||
if(data.status && data.status === "AUTH_ERROR"){
|
||||
openFail(data.status);
|
||||
return;
|
||||
}
|
||||
|
||||
if(data.rc === 0){
|
||||
console.log(data.data);
|
||||
el.removeClass("ukefu-label").addClass("unselectedClass").attr("name", "");
|
||||
} else {
|
||||
}
|
||||
}, function (err) {
|
||||
console.log(err)
|
||||
});
|
||||
} else {
|
||||
// select tag
|
||||
var contactid = $('#contactsId').val();
|
||||
var payload = {
|
||||
path: 'contacts/tags',
|
||||
data: {
|
||||
ops: "create",
|
||||
contactid: contactid,
|
||||
tagId: id,
|
||||
},
|
||||
};
|
||||
|
||||
httpRequest(payload).then(function (data) {
|
||||
if(data.status && data.status === "AUTH_ERROR"){
|
||||
openFail(data.status);
|
||||
return;
|
||||
}
|
||||
|
||||
if(data.rc === 0){
|
||||
console.log(data.data);
|
||||
el.removeClass("unselectedClass").addClass("ukefu-label").attr("name", data.data.id);
|
||||
} else {
|
||||
}
|
||||
}, function (err) {
|
||||
console.log(err)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// get tags
|
||||
function getTags(){
|
||||
var id = $('#contactsId').val();
|
||||
var payload = {
|
||||
path: 'contacts/tags',
|
||||
data: {
|
||||
ops: "fetch",
|
||||
contactid: id,
|
||||
},
|
||||
};
|
||||
httpRequest(payload).then(function (data) {
|
||||
if(data.status && data.status === "AUTH_ERROR"){
|
||||
openFail(data.status);
|
||||
return;
|
||||
}
|
||||
|
||||
if(data.rc === 0){
|
||||
var tagsData = data.data;
|
||||
|
||||
for (var item of tagsData){
|
||||
if(item.tagged){
|
||||
$("#contactTags").append(
|
||||
'<small name="' + item.xid + '" id="tag_' + item.id + '" class="ukefu-label" style="margin: 0 6px 5px 0;cursor: pointer;" onclick="unOrselectTag(\'' + item.id + '\')">' + item.name + '</small>'
|
||||
);
|
||||
} else {
|
||||
$("#contactTags").append(
|
||||
'<small name="" id="tag_' + item.id + '" class="unselectedClass" style="margin: 0 6px 5px 0; cursor: pointer;" onclick="unOrselectTag(\'' + item.id + '\')">' + item.name + '</small>'
|
||||
);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
}
|
||||
}, function (err) {
|
||||
console.log(err)
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
layui.use('layer', function() {
|
||||
layer = layui.layer;
|
||||
|
||||
// get all notes by contact id.
|
||||
getNotesByContactId();
|
||||
|
||||
// get tags
|
||||
getTags()
|
||||
|
||||
// add notes
|
||||
$('#notesAddBtn').on('click', function(){
|
||||
var content = $('#notesContent').val() || '';
|
||||
if(!content) return;
|
||||
|
||||
var id = $('#contactsId').val();
|
||||
var category = $("#notesCategory option:selected").text();
|
||||
|
||||
var payload = {
|
||||
path: 'contacts/notes',
|
||||
data: {
|
||||
ops: "create",
|
||||
contactid: id,
|
||||
category: category,
|
||||
content: content,
|
||||
agentuser: '',
|
||||
onlineuser: ''
|
||||
},
|
||||
};
|
||||
httpRequest(payload).then(function (data) {
|
||||
if(data.status && data.status === "AUTH_ERROR"){
|
||||
openFail(data.status);
|
||||
return;
|
||||
}
|
||||
|
||||
if(data.rc === 0){
|
||||
var item = data.data;
|
||||
// get all notes by contact id.
|
||||
items.unshift({
|
||||
type: 'bigItem',
|
||||
label: item.updatetime,
|
||||
picto: '<div style="background-color: #3ac3e8;width: 100%;height: 100%;"></div>',
|
||||
shortContent: '<div style="border: solid 1px #333333; line-height: 2em;font-weight: 300;word-break:break-all"><p>事件类型：' + category + '</p>' + '<p>创建者:' + item.creatername + '</p>' + '<div><label>内容：</label><span>' + content + '</span></div></div>',
|
||||
forcePosition: 'right'
|
||||
});
|
||||
|
||||
// time line
|
||||
makeTimeline()
|
||||
} else {
|
||||
}
|
||||
}, function (err) {
|
||||
console.log(err)
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<#else>
|
||||
<div class="ukefu-chat-prop">
|
||||
<div class="ukefu-prop-list">
|
||||
<div class="layui-side-scroll">
|
||||
@ -149,3 +379,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</#if>
|
||||
Loading…
x
Reference in New Issue
Block a user