diff --git a/contact-center/app/src/main/java/com/chatopera/cc/webim/web/handler/api/rest/ApiContactTagsController.java b/contact-center/app/src/main/java/com/chatopera/cc/webim/web/handler/api/rest/ApiContactTagsController.java
index 35c90e5b..3c0af13e 100644
--- a/contact-center/app/src/main/java/com/chatopera/cc/webim/web/handler/api/rest/ApiContactTagsController.java
+++ b/contact-center/app/src/main/java/com/chatopera/cc/webim/web/handler/api/rest/ApiContactTagsController.java
@@ -144,7 +144,6 @@ public class ApiContactTagsController extends Handler {
 
         // 创建关系
         TagRelation rel = new TagRelation();
-        rel.setId(UKTools.getUUID());
         rel.setDataid(contactid);
         rel.setUserid(contactid);
         rel.setTagid(tagId);
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/agent/calloutcontact/add.html b/contact-center/app/src/main/resources/templates/apps/agent/calloutcontact/add.html
index 15bd11b1..8ce5ca1b 100644
--- a/contact-center/app/src/main/resources/templates/apps/agent/calloutcontact/add.html
+++ b/contact-center/app/src/main/resources/templates/apps/agent/calloutcontact/add.html
@@ -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>
diff --git a/contact-center/app/src/main/resources/templates/apps/agent/calloutcontact/edit.html b/contact-center/app/src/main/resources/templates/apps/agent/calloutcontact/edit.html
index 66141bab..03035a7b 100644
--- a/contact-center/app/src/main/resources/templates/apps/agent/calloutcontact/edit.html
+++ b/contact-center/app/src/main/resources/templates/apps/agent/calloutcontact/edit.html
@@ -19,18 +19,20 @@
                                 <span><font color="red">*</font><b style="font-size: 10px;">(您得到此联系人的时间)</b></span>
 							</div>
 						</div>
-						<div class="layui-inline">
-							<label class="layui-form-label">类型：</label>
-							<div class="layui-input-inline">
-								<#if contacts.ckind?? && contacts.ckind != ''>
-								<@select "com.dic.contacts.ckind" "ckind" contacts.ckind!'' "lay-ignore required lay-verify='required' "/>
-								<#else>
-								<@select "com.dic.contacts.ckind" "ckind" "" "lay-ignore"/>
-								</#if>
-							</div>
-                            <span><font color="red">*</font></span>
-						</div>
 					</div>
+                    <div class="layui-form-item">
+                        <div class="layui-inline">
+                            <label class="layui-form-label">类型：</label>
+                            <div class="layui-input-inline">
+                                <#if contacts.ckind?? && contacts.ckind != ''>
+                                <@select "com.dic.contacts.ckind" "ckind" contacts.ckind!'' "lay-ignore required lay-verify='required' "/>
+                                <#else>
+                                <@select "com.dic.contacts.ckind" "ckind" "" "lay-ignore"/>
+                            </#if>
+                        </div>
+                        <span><font color="red">*</font></span>
+                    </div>
+                    </div>
 					<div class="layui-form-item">
 						<div class="layui-inline">
 							<label class="layui-form-label">共享联系人：</label>
@@ -141,17 +143,88 @@
 							</div>
 						</div>
 					</div>
-				</div>
-			</div>
-		</div>
 
-		<div class="layui-form-button" style="position: inherit;">
-			<div class="layui-button-block">
-				<button class="layui-btn" lay-submit lay-filter="formDemo">立即更新</button>
-				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
+<div class="layui-form-button" style="position: inherit;">
+    <div class="layui-button-block">
+        <button class="layui-btn" lay-submit lay-filter="formDemo">立即更新</button>
+        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
+    </div>
+</div>
+				</div>
+
 			</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">
+        <div class="uk-layui-form">
+            <div class="layui-collapse">
+                <div class="layui-colla-item">
+                    <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>
+    <div class="box-body ukefu-im-theme">
+        <div class="uk-layui-form">
+            <div class="layui-collapse">
+                <div class="layui-colla-item">
+                    <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">网页</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>
 </div>
 
 <script>
diff --git a/contact-center/app/src/main/resources/templates/apps/agent/mainagentuser_callout.html b/contact-center/app/src/main/resources/templates/apps/agent/mainagentuser_callout.html
index d7285fe5..22d4d3dc 100644
--- a/contact-center/app/src/main/resources/templates/apps/agent/mainagentuser_callout.html
+++ b/contact-center/app/src/main/resources/templates/apps/agent/mainagentuser_callout.html
@@ -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>
\ No newline at end of file
diff --git a/contact-center/app/src/main/resources/templates/apps/business/contacts/add.html b/contact-center/app/src/main/resources/templates/apps/business/contacts/add.html
index 01d6abb5..4a0a2963 100644
--- a/contact-center/app/src/main/resources/templates/apps/business/contacts/add.html
+++ b/contact-center/app/src/main/resources/templates/apps/business/contacts/add.html
@@ -20,7 +20,7 @@
 						<div class="layui-inline">
 							<label class="layui-form-label" style="width:60px;line-height: 35px;">类型：</label>
 							<div class="layui-input-inline" style="width:218px;margin-right:0px;padding-top:9px;">
-								<@select "com.dic.contacts.ckind" "ckind" ckind!'' "lay-ignore required lay-verify='required' "/>
+                                <@select "com.dic.contacts.ckind" "ckind" ckind!'' "lay-ignore required lay-verify='required' "/>
 							</div>
 						</div>
 					</div>
@@ -142,7 +142,7 @@
 		</div>
 	</form>
 </div>
-
+<script src="/js/moment.min.js"></script>
 <script>
 	//Demo
 	$('#province').change(function(){
@@ -167,6 +167,8 @@
 	layui.use('element', function(){
 		var element = layui.element();
 	});
+
+    $("#getdate").val(moment().format('YYYY-MM-DD'));
 	layui.use('laydate', function() {
 		var laydate = layui.laydate;
 
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..db95ee2b 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>
@@ -143,29 +144,49 @@
                     <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: 149%;">
-                                                <textarea id="notesContent" name="notes" class="layui-textarea" ></textarea>
+                                <div class="layui-colla-item">
+                                    <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 class="layui-form-item">
-                                        <div class="layui-button-inline" style="float: right;">
-                                            <button class="layui-btn" lay-submit lay-filter="notesbtn" id="notesAddBtn">立即添加</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="box-body ukefu-im-theme" style="margin-top: 20px;">
+                        <div class="uk-layui-form">
+                            <div class="layui-collapse">
+                                <div class="layui-colla-item">
+                                    <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">网页</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: 149%;">
+                                                    <textarea id="notesContent" name="notes" class="layui-textarea" ></textarea>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="layui-form-item">
+                                            <div class="layui-button-inline" style="float: right;">
+                                                <button class="layui-btn" lay-submit lay-filter="notesbtn" id="notesAddBtn">立即添加</button>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -178,12 +199,12 @@
                         <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>
                     </div>
-                    </div>
+                </div>
             </div>
         </div>
 
@@ -191,44 +212,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 +245,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 +287,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 +413,7 @@
             };
             httpRequest(payload).then(function (data) {
                 if(data.status && data.status === "AUTH_ERROR"){
+                    openFail(data.status);
                     return;
                 }
 
@@ -333,4 +438,3 @@
         });
     });
 </script>
-