完善表单工具用户选择

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,11 +491,47 @@ function FormUtil(layui, viewer) {
         });
     }
 
-    this.selectUsers = function (inputId, users) {
+    /**
-        function initDom() {
+     * 选择用户列表
+     * @param selectType 类型：单选（radio）、多选（checkbox）
+     * @param callback 回调，参数: [{userId: '', userUsername: '', username: ''}]
+     * @param users 要选择的用户数组，格式： [{userId: '', userUsername: '', username: ''}]
+     * @param selectedUserIds 已经选择的用户ID数组，格式：['userId1', 'userId2']
+     */
+    this.selectUsers = function (selectType, callback, users, selectedUserIds) {
+        if(selectType != 'radio' && selectType != 'checkbox') {
+            throw 'selectType(arg1): [radio|checkbox]';
+            return;
+        }
+        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++];) {
-                itemHtml += '<div class="item" data-user-id="' + user.userId + '">';
+            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 + '"/>';
@@ -512,24 +548,55 @@ function FormUtil(layui, viewer) {
             itemHtml += '</div>';
             itemHtml += '</div>';
         }
-            layer.open({
+
+        var layIndex = layer.open({
             type: 1,
             area: ['300px', '400px'],
             closeBtn: 0,
             title: '选择候选人',
-                shadeClose: true,
+            shadeClose: false,
             scrollbar: false,
-                content: '<div class="select-user" class="select-user">' +
+            content: '<div class="select-user">' +
                 '<div class="list">'
                 + itemHtml +
                 '</div>' +
-                    '<div class="foot">'+
+                '<div class="foot">' +
-                    '<button type="button" class="layui-btn layui-btn-sm">确定</button>'+
+                '<button type="button" class="layui-btn layui-btn-sm confirm-btn">确定</button>' +
-                    '</div>'+
+                '</div>' +
                 '</div>',
-            })
+            end: function () {
+                callback(selectedUsers);
             }
-        initDom();
+        });
+
+        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();
     }
 
 }