Browse Source

企业人员增加搜索筛选功能,样式进行调整处理

hejq 8 years ago
parent
commit
b708e30010

+ 5 - 17
src/main/webapp/WEB-INF/views/normal/setHrAccount.html

@@ -76,30 +76,18 @@
 			<div class="section-choose" >
 				<form action="">
 					<div class="form-group">
-						<input type="text" id="username" class="form-control" placeholder="姓名" />
-						<ul id="userList">
-<!--							<li><b>李亚津</b><span class="phone">13800001111</span><span>liyj@ftchina.com</span></li>
-							<li><b>李亚津</b><span class="phone">13800001111</span><span>liyj@ftchina.com</span></li>
-							<li><b>李亚津</b><span class="phone">13800001111</span><span>liyj@ftchina.com</span></li>
-							<li><b>李亚津</b><span class="phone">13800001111</span><span>liyj@ftchina.com</span></li>
-							<li><b>李亚津</b><span class="phone">13800001111</span><span>liyj@ftchina.com</span></li>
-							<li><b>李亚津</b><span class="phone">13800001111</span><span>liyj@ftchina.com</span></li>
-							<li><b>李亚津</b><span class="phone">13800001111</span><span>liyj@ftchina.com</span></li>
-							<li><b>李亚津</b><span class="phone">13800001111</span><span>liyj@ftchina.com</span></li>
-							<li><b>李亚津</b><span class="phone">13800001111</span><span>liyj@ftchina.com</span></li>
-							<li><b>李亚津</b><span class="phone">13800001111</span><span>liyj@ftchina.com</span></li>
-							<li><b>李亚津</b><span class="phone">13800001111</span><span>liyj@ftchina.com</span></li>
-							<li><b>李亚津</b><span class="phone">13800001111</span><span>liyj@ftchina.com</span></li>-->
+						<input type="text" id="username" class="form-control" placeholder="姓名" autocomplete="off" />
+						<ul id="userList" style="max-height: 200px; overflow-y: auto;">
 						</ul>
 					</div>
 					<div class="form-group">
-						<input type="text" id="usertel" class="form-control" placeholder="电话号码" />
+						<input type="text" id="usertel" class="form-control" placeholder="电话号码" autocomplete="off"/>
 					</div>
 					<div class="form-group">
-						<input type="text" id="useremail" class="form-control" placeholder="邮箱" />
+						<input type="text" id="useremail" class="form-control" placeholder="邮箱" autocomplete="off"/>
 					</div>
 					<div class="form-group">
-						<input type="text" id="useruu" class="form-control" placeholder="UU号" />
+						<input type="text" id="useruu" class="form-control" placeholder="UU号" autocomplete="off"/>
 					</div>
 					<div class="form-group">
 						<a class="btn" id="setHrAccount" type="submit">添加并设置为HR账号</a>

+ 4 - 0
src/main/webapp/resources/css/setHrAccount.css

@@ -153,4 +153,8 @@ section .container{
     left: 50%!important ;
     margin-left: -10%!important ;
     z-index: 999999;
+}
+#toast-container .toast-message {
+    font-size: 16px;
+    color: #fff;
 }

+ 5 - 1
src/main/webapp/resources/css/toastr.css

@@ -4,6 +4,8 @@
 .toast-message {
   -ms-word-wrap: break-word;
   word-wrap: break-word;
+    font-size: 16px;
+    color: #fff;
 }
 
 .toast-message a,
@@ -209,6 +211,8 @@ button.toast-close-button {
 .toast-message {
     -ms-word-wrap: break-word;
     word-wrap: break-word;
-    font-size: .4rem;
+    /*font-size: .4rem;*/
+    font-size: 12px;
+    color:#fff;
 }
 

+ 84 - 33
src/main/webapp/resources/js/common/common.js

@@ -256,46 +256,56 @@ function setHrAccount() {
     });
 }
 
+/**
+ * 获取的用户信息存放,全局调用,不用多次发生请求
+ *
+ * @type {Array}
+ */
+var users = [];
+
 /**
  * 获取当前企业已存在的用户的信息
  */
 function getExistUser() {
-    var users = [];
-    $.ajax('uuzc/existusers', {
-        dataType: 'json',
-        method: 'GET',
-        async: false,
-        success: function(data) {
-            users = data.content;
-            if(users.length == 0) {
-                $('#userList').css('display','none');
-            }
-            var ul = document.getElementById("userList");
-            for(var i = 0; i < users.length; i++) {
-                var li = document.createElement('li');
-                var b = document.createElement('b');
-                b.innerHTML = users[i].name;
-                li.appendChild(b);
-                var span = document.createElement('span');
-                span.class = "phone"
-                span.innerHTML = users[i].uid;
-                li.appendChild(span);
-                var span2 = document.createElement('span');
-                span2.innerHTML = users[i].secondUID;
-                li.appendChild(span2);
-                li.id = 'btn_' + i;
-                ul.appendChild(li);
-                (function(i) {
-                    $("#btn_" + i ).click(function() {
-                        setAccount(users[i]);
-                        $('#userList').css('display','none');
-                    });
-                })(i)
+    if(users.length == 0) {
+        $.ajax('uuzc/existusers', {
+            dataType: 'json',
+            method: 'GET',
+            async: false,
+            success: function(data) {
+                users = data.content;
+                if(users.length == 0) {
+                    $('#userList').css('display','none');
+                }
+                var ul = document.getElementById("userList");
+                for(var i = 0; i < users.length; i++) {
+                    var li = document.createElement('li');
+                    var b = document.createElement('b');
+                    b.innerHTML = users[i].name;
+                    li.appendChild(b);
+                    var span = document.createElement('span');
+                    span.class = "phone"
+                    span.innerHTML = users[i].uid;
+                    li.appendChild(span);
+                    var span2 = document.createElement('span');
+                    span2.innerHTML = users[i].secondUID;
+                    li.appendChild(span2);
+                    li.id = 'btn_' + i;
+                    ul.appendChild(li);
+                    (function(i) {
+                        $("#btn_" + i ).click(function() {
+                            setAccount(users[i]);
+                            $('#userList').css('display','none');
+                        });
+                    })(i)
+                    console.log(ul.height);
+                }
             }
-        }
-    });
+        });
+    }
 }
 
+
 /**
  * 选择现有的人员赋值
  *
@@ -314,6 +324,47 @@ function setAccount(user) {
 function suspendMessage() {
     toastr.error('网站正在升级中,敬请期待!');
 }
+
+
+$('#username').bind('input propertychange', function() {
+    var nameList = [];
+    $("#userList").find("li").remove();// 先清除以前的样式
+    for(var i = 0; i < users.length; i++) {
+        console.log(users[i].name);
+        console.log($('#username').val());
+        if(users[i].name.indexOf($('#username').val()) > -1) {
+            nameList.push(users[i]);
+        }
+    }
+    if(nameList.length == 0) {
+        $('#userList').css('display','none');
+    } else {
+        $('#userList').css('display','show');
+    }
+    var ul = document.getElementById("userList");
+    for(var i = 0; i < nameList.length; i++) {
+        var li = document.createElement('li');
+        var b = document.createElement('b');
+        b.innerHTML = nameList[i].name;
+        li.appendChild(b);
+        var span = document.createElement('span');
+        span.class = "phone"
+        span.innerHTML = nameList[i].uid;
+        li.appendChild(span);
+        var span2 = document.createElement('span');
+        span2.innerHTML = nameList[i].secondUID;
+        li.appendChild(span2);
+        li.id = 'btn_' + i;
+        ul.appendChild(li);
+        (function(i) {
+            $("#btn_" + i ).click(function() {
+                setAccount(nameList[i]);
+                $('#userList').css('display','none');
+            });
+        })(i)
+    }
+});
+
 $(function() {
 	'use strict';
 	

+ 1 - 1
src/main/webapp/resources/js/common/toastr.js

@@ -177,7 +177,7 @@
                     },
                     iconClass: 'toast-info',
                     positionClass: 'toast-top-right',
-                    timeOut: 500000, // Set timeOut and extendedTimeOut to 0 to make it sticky
+                    timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky
                     titleClass: 'toast-title',
                     messageClass: 'toast-message',
                     target: 'body',