From cfcddb414e365caa5bc7f127d7df9b3d969de815 Mon Sep 17 00:00:00 2001
From: Kyle <succpeking@hotmail.com>
Date: Sat, 8 Sep 2018 23:02:27 +0800
Subject: [PATCH] =?UTF-8?q?Closed=20#66=20=E5=9C=A8=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E8=81=94=E7=B3=BB=E4=BA=BA=E6=A8=A1=E5=9D=97=E4=B8=AD=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=A0=87=E7=AD=BE=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../static/js/CSKeFu_Rest_Request.v1.js       |   2 +-
 .../apps/business/contacts/detail.html        | 180 ++++++++++++++----
 2 files changed, 141 insertions(+), 41 deletions(-)

diff --git a/contact-center/app/src/main/resources/static/js/CSKeFu_Rest_Request.v1.js b/contact-center/app/src/main/resources/static/js/CSKeFu_Rest_Request.v1.js
index 764f2237..47ccf56c 100644
--- a/contact-center/app/src/main/resources/static/js/CSKeFu_Rest_Request.v1.js
+++ b/contact-center/app/src/main/resources/static/js/CSKeFu_Rest_Request.v1.js
@@ -22,7 +22,7 @@ function httpRequest(opts) {
 
     payload.data = JSON.stringify(opts.data);
 
-    var index = layer.msg('查询中，请稍候',{icon: 16,time:false,shade:0.8});
+    var index = layer.msg('执行中，请稍候',{icon: 16,time:false,shade:0.8});
 
     return new Promise(function(resolve, reject) {
         $.ajax(payload)
diff --git a/contact-center/app/src/main/resources/templates/apps/business/contacts/detail.html b/contact-center/app/src/main/resources/templates/apps/business/contacts/detail.html
index 7d32cbac..80540ef8 100644
--- a/contact-center/app/src/main/resources/templates/apps/business/contacts/detail.html
+++ b/contact-center/app/src/main/resources/templates/apps/business/contacts/detail.html
@@ -18,6 +18,7 @@
                     <div class="box-body ukefu-im-theme">
                         <div class="uk-layui-form">
                             <input hidden value="${contacts.id!''}" id="contactsId"/>
+                            <input hidden value="${contacts.creater!''}" id="creater"/>
                             <div class="layui-collapse">
                                 <div class="layui-colla-item">
                                     <h2 class="layui-colla-title">基本信息</h2>
@@ -140,6 +141,22 @@
                             </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">
+                                        <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">
@@ -178,7 +195,7 @@
                         <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" style="height: 1060px; overflow-y: auto;">
+                                <div id="timeline" class="timeline-container" type="text" style="height: 1243px; overflow-y: auto;">
                                 </div>
                             </div>
                         </div>
@@ -191,44 +208,25 @@
 </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/jquery.cookie.min.js"></script>
-<script>
-    function httpRequest(opts) {
-        var localUrl = 'http://localhost:8035';
-        var devUrl = 'http://47.104.19.187:8035';
-        var proUrl = 'http://pro';
-
-        var postfix = '/api/';
-
-        var urlPath = opts.path || '';
-        var query = opts.query || '';
-
-        var apiHost = window.location.origin;
-
-        var payload = {};
-        payload.url = apiHost + postfix + urlPath + query;
-        payload.method = payload.method || 'POST';
-        payload.contentType = 'application/json;charset=UTF-8';
-        payload.headers = {
-            authorization: $.cookie('authorization')
-        };
-        payload.dataType = 'json';
-
-        payload.data = JSON.stringify(opts.data);
-
-        return new Promise(function(resolve, reject) {
-            $.ajax(payload)
-                .done(function (data) {
-                    console.log('Rest api 返回的值：', data);
-                    resolve(data);
-                })
-                .fail(function (jqXHR, textStatus ) {
-                    console.error('Rest api 返回error：', jqXHR);
-                    reject(jqXHR)
-                });
-        });
+<script src="/js/CSKeFu_Rest_Request.v1.js"></script>
+<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>
+<script>
     // save time line datas
     var items = [];
 
@@ -243,6 +241,7 @@
             // remove a click event and set color to gray
             // AUTH_ERROR
             if(data.status && data.status === "AUTH_ERROR"){
+                openFail(data.status);
                 return;
             }
 
@@ -284,11 +283,112 @@
         }
     }
 
-    $(document).ready(function () {
+    // 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;
@@ -309,6 +409,7 @@
             };
             httpRequest(payload).then(function (data) {
                 if(data.status && data.status === "AUTH_ERROR"){
+                    openFail(data.status);
                     return;
                 }
 
@@ -333,4 +434,3 @@
         });
     });
 </script>
-