完善表单工具用户选择

module-form/src/main/resources/static/form/css/form.css

@@ -71,6 +71,7 @@
 
 /* 用户选择 */
 .select-user {
+    height: 100%;
     position: relative;
     overflow: hidden;
 }
@@ -105,6 +106,10 @@
     cursor: pointer;
 }
 
+.select-user .active {
+    background-color: #f1f1f1;
+}
+
 .select-user .list .item:hover {
     background-color: #f1f1f1;
 }
@@ -138,10 +143,15 @@
 }
 
 .select-user .list .item .checkbox {
+    display: none;
     margin-left: 5px;
     font-size: 25px;
 }
 
+.select-user .list .active .checkbox {
+    display: block;
+}
+
 .select-user .foot {
     position: absolute;
     bottom: 0;

module-form/src/main/resources/static/form/js/form-util.js

@@ -491,45 +491,112 @@ function FormUtil(layui, viewer) {
         });
     }
 
-    this.selectUsers = function (inputId, users) {
+    /**
-        function initDom() {
+     * 选择用户列表
-            var itemHtml = '';
+     * @param selectType 类型：单选（radio）、多选（checkbox）
-            for (var i = 0, user; user = users[i++];) {
+     * @param callback 回调，参数: [{userId: '', userUsername: '', username: ''}]
-                itemHtml += '<div class="item" data-user-id="' + user.userId + '">';
+     * @param users 要选择的用户数组，格式： [{userId: '', userUsername: '', username: ''}]
-                itemHtml += '<div class="avatar">';
+     * @param selectedUserIds 已经选择的用户ID数组，格式：['userId1', 'userId2']
-                if (user.avatar) {
+     */
-                    itemHtml += '<img src="route/file/download/true/' + user.avatar + '"/>';
+    this.selectUsers = function (selectType, callback, users, selectedUserIds) {
-                } else {
+        if(selectType != 'radio' && selectType != 'checkbox') {
-                    itemHtml += '<img src="assets/images/profile-photo.jpg"/>';
+            throw 'selectType(arg1): [radio|checkbox]';
-                }
+            return;
-                itemHtml += '</div>';
-                itemHtml += '<div class="info">';
-                itemHtml += '<div class="text">' + user.userUsername + '</div>';
-                itemHtml += '<div class="text">' + user.username + '</div>';
-                itemHtml += '</div>';
-                itemHtml += '<div class="checkbox">';
-                itemHtml += '<i class="fa fa-check-square-o"></i>';
-                itemHtml += '</div>';
-                itemHtml += '</div>';
-            }
-            layer.open({
-                type: 1,
-                area: ['300px', '400px'],
-                closeBtn: 0,
-                title: '选择候选人',
-                shadeClose: true,
-                scrollbar: false,
-                content: '<div class="select-user" class="select-user">' +
-                    '<div class="list">'
-                    + itemHtml +
-                    '</div>' +
-                    '<div class="foot">'+
-                    '<button type="button" class="layui-btn layui-btn-sm">确定</button>'+
-                    '</div>'+
-                    '</div>',
-            })
         }
-        initDom();
+        if (!users && !(users instanceof Array)) {
+            callback([]);
+        }
+
+        selectedUserIds = selectedUserIds && (selectedUserIds instanceof Array) ? selectedUserIds : [];
+        selectedUserIds = selectType == 'radio' && selectedUserIds.length > 1 ? selectedUserIds[0] : selectedUserIds;
+
+        var selectedUserMap = {};
+        var selectedUsers = [];
+        var itemHtml = '';
+
+        function addUserToMap(userId, userUsername, username) {
+            selectedUserMap[userId] = {
+                userId: userId,
+                userUsername: userUsername,
+                username: username,
+            }
+        }
+
+        for (var i = 0, user; user = users[i++];) {
+            var isActive = false;
+            for (var j = 0, selectedUserId; selectedUserId = selectedUserIds[j++];) {
+                if (user.userId === selectedUserId) {
+                    isActive = true;
+                    addUserToMap(user.userId, user.userUsername, user.username);
+                    break;
+                }
+            }
+            itemHtml += '<div class="item' + (isActive ? ' active' : '') + '" data-user-id="' + user.userId + '" data-user-username="' + user.userUsername + '" data-username="' + user.username + '">';
+            itemHtml += '<div class="avatar">';
+            if (user.avatar) {
+                itemHtml += '<img src="route/file/download/true/' + user.avatar + '"/>';
+            } else {
+                itemHtml += '<img src="assets/images/profile-photo.jpg"/>';
+            }
+            itemHtml += '</div>';
+            itemHtml += '<div class="info">';
+            itemHtml += '<div class="text">' + user.userUsername + '</div>';
+            itemHtml += '<div class="text">' + user.username + '</div>';
+            itemHtml += '</div>';
+            itemHtml += '<div class="checkbox">';
+            itemHtml += '<i class="fa fa-check-square-o"></i>';
+            itemHtml += '</div>';
+            itemHtml += '</div>';
+        }
+
+        var layIndex = layer.open({
+            type: 1,
+            area: ['300px', '400px'],
+            closeBtn: 0,
+            title: '选择候选人',
+            shadeClose: false,
+            scrollbar: false,
+            content: '<div class="select-user">' +
+                '<div class="list">'
+                + itemHtml +
+                '</div>' +
+                '<div class="foot">' +
+                '<button type="button" class="layui-btn layui-btn-sm confirm-btn">确定</button>' +
+                '</div>' +
+                '</div>',
+            end: function () {
+                callback(selectedUsers);
+            }
+        });
+
+        function addClick() {
+            $('.select-user .list .item').click(function () {
+                var dataset = this.dataset;
+                var userId = dataset.userId;
+                if(selectType === 'radio') {
+                    $('.select-user .list .item').removeClass('active');
+                    $(this).addClass('active');
+                    selectedUserMap = {};
+                    addUserToMap(userId, dataset.userUsername, dataset.username);
+                } else {
+                    if (selectedUserMap[userId]) {
+                        delete selectedUserMap[userId];
+                        $(this).removeClass('active');
+                    } else {
+                        addUserToMap(userId, dataset.userUsername, dataset.username);
+                        $(this).addClass('active');
+                    }
+                }
+            });
+            $('.select-user .foot .confirm-btn').click(function () {
+                for (var key in selectedUserMap) {
+                    selectedUsers.push(selectedUserMap[key]);
+                }
+                layer.close(layIndex);
+            });
+        }
+
+        addClick();
     }
 
 }