diff --git a/module-form/src/main/resources/static/form/css/form.css b/module-form/src/main/resources/static/form/css/form.css index bdd75f6f..c6574f05 100644 --- a/module-form/src/main/resources/static/form/css/form.css +++ b/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; diff --git a/module-form/src/main/resources/static/form/js/form-util.js b/module-form/src/main/resources/static/form/js/form-util.js index c025fa5b..3cfe4c6c 100644 --- a/module-form/src/main/resources/static/form/js/form-util.js +++ b/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 = ''; - for (var i = 0, user; user = users[i++];) { - itemHtml += '
'; - itemHtml += '
'; - if (user.avatar) { - itemHtml += ''; - } else { - itemHtml += ''; - } - itemHtml += '
'; - itemHtml += '
'; - itemHtml += '
' + user.userUsername + '
'; - itemHtml += '
' + user.username + '
'; - itemHtml += '
'; - itemHtml += '
'; - itemHtml += ''; - itemHtml += '
'; - itemHtml += '
'; - } - layer.open({ - type: 1, - area: ['300px', '400px'], - closeBtn: 0, - title: '选择候选人', - shadeClose: true, - scrollbar: false, - content: '
' + - '
' - + itemHtml + - '
' + - '
'+ - ''+ - '
'+ - '
', - }) + /** + * 选择用户列表 + * @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; } - 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 += '
'; + itemHtml += '
'; + if (user.avatar) { + itemHtml += ''; + } else { + itemHtml += ''; + } + itemHtml += '
'; + itemHtml += '
'; + itemHtml += '
' + user.userUsername + '
'; + itemHtml += '
' + user.username + '
'; + itemHtml += '
'; + itemHtml += '
'; + itemHtml += ''; + itemHtml += '
'; + itemHtml += '
'; + } + + var layIndex = layer.open({ + type: 1, + area: ['300px', '400px'], + closeBtn: 0, + title: '选择候选人', + shadeClose: false, + scrollbar: false, + content: '
' + + '
' + + itemHtml + + '
' + + '
' + + '' + + '
' + + '
', + 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(); } } \ No newline at end of file