Tenlion/wg-basic
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善表单工具用户选择

Browse Source
This commit is contained in:
wanggeng 2022-04-18 12:01:41 +08:00
parent 9a9936fb02
commit 1c25164b7a
2 changed files with 115 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
module-form/src/main/resources/static/form/css/form.css
View File

@ -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;

143
module-form/src/main/resources/static/form/js/form-util.js
View File

@ -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 += '<div class="item" data-user-id="' + user.userId + '">';
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>';
}
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>',
})
/**
* 选择用户列表
* @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 += '<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();
}
}