增加了抄送、强制结束、回退功能WEB前端功能
This commit is contained in:
parent
c4056bfcb3
commit
5e94446a3a
@ -16,6 +16,12 @@ public class NodeFormButtonVO {
|
||||
private Integer btnAttachment;
|
||||
@ApiModelProperty(name = "btnGoBack", value = "回退按钮")
|
||||
private Integer btnGoBack;
|
||||
@ApiModelProperty(name = "btnForcedEnd", value = "强制结束按钮")
|
||||
private Integer btnForcedEnd;
|
||||
@ApiModelProperty(name = "btnPrint", value = "打印按钮")
|
||||
private Integer btnPrint;
|
||||
@ApiModelProperty(name = "btnCc", value = "抄送按钮")
|
||||
private Integer btnCc;
|
||||
|
||||
public Integer getBtnAttachment() {
|
||||
return btnAttachment == null ? 0 : btnAttachment;
|
||||
@ -32,4 +38,28 @@ public class NodeFormButtonVO {
|
||||
public void setBtnGoBack(Integer btnGoBack) {
|
||||
this.btnGoBack = btnGoBack;
|
||||
}
|
||||
|
||||
public Integer getBtnForcedEnd() {
|
||||
return btnForcedEnd == null ? 0 : btnForcedEnd;
|
||||
}
|
||||
|
||||
public void setBtnForcedEnd(Integer btnForcedEnd) {
|
||||
this.btnForcedEnd = btnForcedEnd;
|
||||
}
|
||||
|
||||
public Integer getBtnPrint() {
|
||||
return btnPrint == null ? 0 : btnPrint;
|
||||
}
|
||||
|
||||
public void setBtnPrint(Integer btnPrint) {
|
||||
this.btnPrint = btnPrint;
|
||||
}
|
||||
|
||||
public Integer getBtnCc() {
|
||||
return btnCc == null ? 0 : btnCc;
|
||||
}
|
||||
|
||||
public void setBtnCc(Integer btnCc) {
|
||||
this.btnCc = btnCc;
|
||||
}
|
||||
}
|
||||
@ -13,8 +13,9 @@ import java.util.List;
|
||||
public class FormButtonVO {
|
||||
|
||||
private Integer btnAttachment;
|
||||
private Integer btnForcedEnd;
|
||||
private Integer btnPrint;
|
||||
private Integer btnCC;
|
||||
private Integer btnCc;
|
||||
private Integer btnGoBack;
|
||||
private List<GoBackUserTaskVO> goBackUserTasks;
|
||||
|
||||
@ -26,6 +27,14 @@ public class FormButtonVO {
|
||||
this.btnAttachment = btnAttachment;
|
||||
}
|
||||
|
||||
public Integer getBtnForcedEnd() {
|
||||
return btnForcedEnd == null ? 0 : btnForcedEnd;
|
||||
}
|
||||
|
||||
public void setBtnForcedEnd(Integer btnForcedEnd) {
|
||||
this.btnForcedEnd = btnForcedEnd;
|
||||
}
|
||||
|
||||
public Integer getBtnPrint() {
|
||||
return btnPrint == null ? 0 : btnPrint;
|
||||
}
|
||||
@ -34,12 +43,12 @@ public class FormButtonVO {
|
||||
this.btnPrint = btnPrint;
|
||||
}
|
||||
|
||||
public Integer getBtnCC() {
|
||||
return btnCC == null ? 0 : btnCC;
|
||||
public Integer getBtnCc() {
|
||||
return btnCc == null ? 0 : btnCc;
|
||||
}
|
||||
|
||||
public void setBtnCC(Integer btnCC) {
|
||||
this.btnCC = btnCC;
|
||||
public void setBtnCc(Integer btnCc) {
|
||||
this.btnCc = btnCc;
|
||||
}
|
||||
|
||||
public Integer getBtnGoBack() {
|
||||
|
||||
@ -202,10 +202,14 @@ public class OaFormReportRouteServiceImpl extends DefaultBaseService implements
|
||||
return;
|
||||
}
|
||||
formButtonVO.setBtnAttachment(nodeButtonDTO.getBtnAttachment());
|
||||
formButtonVO.setBtnCc(nodeButtonDTO.getBtnCc());
|
||||
formButtonVO.setBtnPrint(nodeButtonDTO.getBtnPrint());
|
||||
if (StringUtils.isBlank(currentTaskId)) {
|
||||
formButtonVO.setBtnGoBack(0);
|
||||
formButtonVO.setBtnForcedEnd(0);
|
||||
} else {
|
||||
formButtonVO.setBtnGoBack(nodeButtonDTO.getBtnGoBack());
|
||||
formButtonVO.setBtnForcedEnd(nodeButtonDTO.getBtnForcedEnd());
|
||||
}
|
||||
if (formButtonVO.getBtnGoBack() == 1) {
|
||||
LOG.debug("存在回退按钮，查询历史节点");
|
||||
|
||||
@ -26,11 +26,11 @@
|
||||
`form_id` char(36) DEFAULT NULL COMMENT '表单ID',
|
||||
`node_id` char(60) DEFAULT NULL COMMENT '节点ID',
|
||||
`node_index` int(11) DEFAULT NULL COMMENT '节点下标',
|
||||
`btn_attachment` int(1) DEFAULT NULL COMMENT '附件上传按钮',
|
||||
`btn_go_back` int(1) DEFAULT NULL COMMENT '回退按钮',
|
||||
`btn_forced_end` int(1) DEFAULT NULL COMMENT '强制结束按钮',
|
||||
`btn_print` int(1) DEFAULT NULL COMMENT '打印按钮',
|
||||
`btn_cc` int(1) DEFAULT NULL COMMENT '抄送按钮',
|
||||
`btn_attachment` int(1) DEFAULT '0' COMMENT '附件上传按钮',
|
||||
`btn_go_back` int(1) DEFAULT '0' COMMENT '回退按钮',
|
||||
`btn_forced_end` int(1) DEFAULT '0' COMMENT '强制结束按钮',
|
||||
`btn_print` int(1) DEFAULT '0' COMMENT '打印按钮',
|
||||
`btn_cc` int(1) DEFAULT '0' COMMENT '抄送按钮',
|
||||
PRIMARY KEY (`id`),
|
||||
UNIQUE KEY `node_button_id` (`node_button_id`),
|
||||
KEY `model_id` (`model_id`,`model_version`),
|
||||
|
||||
@ -66,7 +66,10 @@ var OaNodeManagePopupCtrl = ['$scope', '$timeout', '$http', function ($scope, $t
|
||||
formFields: [],
|
||||
formButton: {
|
||||
btnAttachment: 0,
|
||||
btnGoBack: 0
|
||||
btnGoBack: 0,
|
||||
btnForcedEnd: 0,
|
||||
btnCc: 0,
|
||||
btnPrint: 0
|
||||
},
|
||||
oaUserTaskListeners: []
|
||||
}
|
||||
|
||||
@ -441,6 +441,42 @@
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">3</td>
|
||||
<td>强制结束</td>
|
||||
<td>
|
||||
<label class="radio-inline">
|
||||
<input ng-model="oaNodeManage.formButton.btnForcedEnd" type="radio" value="0"> 关闭
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input ng-model="oaNodeManage.formButton.btnForcedEnd" type="radio" value="1"> 开启
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">4</td>
|
||||
<td>抄送</td>
|
||||
<td>
|
||||
<label class="radio-inline">
|
||||
<input ng-model="oaNodeManage.formButton.btnCc" type="radio" value="0"> 关闭
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input ng-model="oaNodeManage.formButton.btnCc" type="radio" value="1"> 开启
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">5</td>
|
||||
<td>打印</td>
|
||||
<td>
|
||||
<label class="radio-inline">
|
||||
<input ng-model="oaNodeManage.formButton.btnPrint" type="radio" value="0"> 关闭
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input ng-model="oaNodeManage.formButton.btnPrint" type="radio" value="1"> 开启
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
.select-user-container {background-color:#fff; padding: 0px;height: 100%;width: 500px; position:relative;}
|
||||
.select-user-container .top {border-top: 1px;border-right: 1px;border-bottom: 0;border-left: 1px;border-style: solid;border-color: silver;padding: 5px;}
|
||||
.select-user-container .top .selected-user {border: 1px dotted silver;line-height: 30px;padding: 5px;overflow: hidden;}
|
||||
.select-user-container .top .selected-user .list {width: 498px;height: 60px;overflow-y: scroll;overflow-x: hidden;}
|
||||
.select-user-container .center {border: 1px solid silver;height: 40px;overflow: hidden;}
|
||||
.select-user-container .center .list {padding: 5px 8px;line-height: 30px;height: 50px;white-space: nowrap;overflow-x: scroll;overflow-y: hidden;}
|
||||
.select-user-container .center .list span {cursor: pointer;}
|
||||
.select-user-container .center .list span::after {content: ' > ';}
|
||||
.select-user-container .center .list span:last-child {color: #b7b5b5; cursor: default;}
|
||||
.select-user-container .center .list span:last-child::after {content: ''}
|
||||
.select-user-container .bottom {font-size: 0;}
|
||||
.select-user-container .bottom .left {display: inline-block;width: 198px;border-top: 0;border-right: 1px;border-bottom: 1px;border-left: 1px;border-style: solid;border-color: silver;overflow: hidden;}
|
||||
.select-user-container .bottom .left .list {width: 216px;height: 300px;overflow-y: scroll;overflow-x: hidden;}
|
||||
.select-user-container .bottom .left .list div {font-size: 14px;padding: 5px 8px;line-height: 28px;border-top: 0;border-right: 1px;border-bottom: 1px;border-left: 0;border-style: dotted;border-color: silver; cursor: pointer;}
|
||||
.select-user-container .bottom .left .list div:last-child {border-bottom: 0;}
|
||||
.select-user-container .bottom .right {display: inline-block;width: 299px;border-top: 0;border-right: 1px;border-bottom: 1px;border-left: 0px;border-style: solid;border-color: silver;overflow: hidden;}
|
||||
.select-user-container .bottom .right .list {width: 316px;height: 300px;overflow-y: scroll;overflow-x: hidden;}
|
||||
.select-user-container .bottom .right .list .user-item {padding: 5px;border-bottom: 1px dotted silver; cursor: pointer;}
|
||||
.select-user-container .bottom .right .list .user-item .avatar {display: inline-block;width: 40px;height: 40px; line-height: 40px; font-size: 20px; border-radius: 20px; text-align: center;}
|
||||
.select-user-container .bottom .right .list .user-item .avatar img {width: 100%;height: 100%;}
|
||||
.select-user-container .bottom .right .list .user-item .info {display: inline-block;font-size: 14px;line-height: 20px;vertical-align: top;margin-left: 5px;}
|
||||
.select-user-container .bottom .right .list .user-item .info div {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 244px;}
|
||||
.select-user-container .bottom .right .list .user-item .checked {display: none;}
|
||||
.select-user-container .bottom .right .list .active {background: #f1f1f1;position: relative;}
|
||||
.select-user-container .bottom .right .list .active .checked {position: absolute;display: block;top: 12px;right: 12px;width: 25px;height: 25px; font-size: 25px;}
|
||||
.select-user-container .footer {background-color:#fff;position: absolute;bottom: 0;width: 100%;text-align: center;}
|
||||
.select-user-container .footer div {padding: 5px;}
|
||||
@ -89,9 +89,11 @@ function OaFormUtil(layui) {
|
||||
var comment = item.comment;
|
||||
if (comment) {
|
||||
if (comment.type === 'JOINTLY_SIGN') {
|
||||
commentText = '类型：会签。内容：' + comment.content + '。时间：' + comment.time;
|
||||
commentText = '动作：会签。批注：' + comment.content + '。时间：' + comment.time;
|
||||
} else if (comment.type === 'GO_BACK') {
|
||||
commentText = '类型：回退。内容：' + comment.content + '。时间：' + comment.time;
|
||||
commentText = '动作：回退。批注：' + comment.content + '。时间：' + comment.time;
|
||||
} else if (comment.type === 'FORCED_END') {
|
||||
commentText = '动作：强制结束。批注：' + comment.content + '。时间：' + comment.time;
|
||||
}
|
||||
}
|
||||
var li = [
|
||||
@ -126,7 +128,7 @@ function OaFormUtil(layui) {
|
||||
' <td>' + item.userNames + '</td>',
|
||||
' </tr>',
|
||||
' <tr>',
|
||||
' <td class="row-title">批注</td>',
|
||||
' <td class="row-title">备注</td>',
|
||||
' <td>' + commentText + '</td>',
|
||||
' </tr>',
|
||||
' </tbody>',
|
||||
@ -213,11 +215,35 @@ function OaFormUtil(layui) {
|
||||
*/
|
||||
this.initSubmitBtns = function (confirmAssignees) {
|
||||
var btnColor = ['', 'layui-btn-normal', 'layui-btn-warm'];
|
||||
var btns = '';
|
||||
for (var i = 0, item; item = confirmAssignees[i++];) {
|
||||
btns += '<button type="button" id="submitFormBtn' + i + '" class="layui-btn layui-btn-sm ' + btnColor[(i - 1) % 3] + ' confirm-btn" lay-submit lay-filter="submit' + i + '" data-select-type="' + item.nodeType + '" data-index="' + (i - 1) + '" data-next-end-event="' + item.nextEndEvent + '" data-btn-exc="' + item.btnExc + '">' + item.btnText + '</button>'
|
||||
if(confirmAssignees.length < 3) {
|
||||
var btns = '';
|
||||
for (var i = 0, item; item = confirmAssignees[i++];) {
|
||||
btns += '<button type="button" id="submitFormBtn' + i + '" class="layui-btn layui-btn-sm ' + btnColor[(i - 1) % 3] + ' confirm-btn" lay-submit lay-filter="submit' + i + '" data-select-type="' + item.nodeType + '" data-index="' + (i - 1) + '" data-next-end-event="' + item.nextEndEvent + '" data-btn-exc="' + item.btnExc + '">' + item.btnText + '</button>'
|
||||
}
|
||||
$('#submitBtnGroup').append(btns);
|
||||
} else {
|
||||
$('#submitBtnGroup').append('<button type="button" id="showSubmitFormBtns" class="layui-btn layui-btn-primary layui-btn-xs"><i class="fa fa-list-ul" aria-hidden="true"></i> 提交</button>');
|
||||
|
||||
var html = '<div class="layui-btn-container" style="padding: 10px;">';
|
||||
for (var i = 0, item; item = confirmAssignees[i++];) {
|
||||
html += '<button type="button" id="submitFormBtn' + i + '" class="layui-col-xs12 layui-btn layui-btn-sm ' + btnColor[(i - 1) % 3] + ' confirm-btn" lay-submit lay-filter="submit' + i + '" data-select-type="' + item.nodeType + '" data-index="' + (i - 1) + '" data-next-end-event="' + item.nextEndEvent + '" data-btn-exc="' + item.btnExc + '">' + item.btnText + '</button>'
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
$(document).on('click', '#showSubmitFormBtns', function() {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
area: ['200px', '100%'],
|
||||
offset: 'l',
|
||||
anim: 2,
|
||||
isOutAnim: false,
|
||||
closeBtn: 0,
|
||||
shadeClose: true,
|
||||
content: html
|
||||
});
|
||||
})
|
||||
}
|
||||
$('#submitBtnGroup').append(btns);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -275,16 +301,26 @@ function OaFormUtil(layui) {
|
||||
function initButton() {
|
||||
var buttons = '';
|
||||
buttons += '<div class="layui-btn-group">'
|
||||
if(formButton.btnPrint) {
|
||||
buttons += '<button id="printBtn" type="button" class="layui-btn layui-btn-xs layui-btn-primary confirm-btn">打印</button>';
|
||||
}
|
||||
if (formButton.btnGoBack) {
|
||||
buttons += '<button id="goBackBtn" type="button" class="layui-btn layui-btn-sm layui-btn-danger confirm-btn">回退</button>';
|
||||
buttons += '<button id="goBackBtn" type="button" class="layui-btn layui-btn-xs layui-btn-warm confirm-btn">回退</button>';
|
||||
}
|
||||
if(formButton.btnForcedEnd) {
|
||||
buttons += '<button id="forcedEndBtn" type="button" class="layui-btn layui-btn-xs layui-btn-danger confirm-btn">强制结束</button>';
|
||||
}
|
||||
if(formButton.btnCc) {
|
||||
buttons += '<button id="ccBtn" type="button" class="layui-btn layui-btn-xs layui-btn-normal confirm-btn">抄送</button>';
|
||||
}
|
||||
if (formButton.btnAttachment) {
|
||||
buttons += '<button id="attachmentBtn" type="button" class="layui-btn layui-btn-sm layui-btn-default confirm-btn">上传附件</button>';
|
||||
buttons += '<button id="attachmentBtn" type="button" class="layui-btn layui-btn-xs layui-btn-default confirm-btn">上传附件</button>';
|
||||
}
|
||||
buttons += '</div>';
|
||||
buttons += '<div class="layui-btn-group">';
|
||||
buttons += '<button id="showAttachmentBtn" type="button" class="layui-btn layui-btn-sm layui-btn-primary" title="附件列表"><i class="fa fa-list-ul" aria-hidden="true"></i></button>';
|
||||
buttons += '<button id="showAttachmentBtn" type="button" class="layui-btn layui-btn-xs layui-btn-primary" title="附件列表"><i class="fa fa-list-ul" aria-hidden="true"></i></button>';
|
||||
buttons += '<input type="hidden" name="attachments" id="attachments"/>';
|
||||
buttons += '<input type="hidden" name="ccs" id="ccs"/>';
|
||||
buttons += '</div>';
|
||||
$('#formButtonGroup').append(buttons);
|
||||
}
|
||||
@ -428,6 +464,7 @@ function OaFormUtil(layui) {
|
||||
}
|
||||
});
|
||||
|
||||
// 回退
|
||||
$(document.body).on('click', '#goBackBtn', function () {
|
||||
if (!taskId) {
|
||||
return;
|
||||
@ -511,6 +548,68 @@ function OaFormUtil(layui) {
|
||||
});
|
||||
});
|
||||
})
|
||||
|
||||
// 强制结束
|
||||
$(document.body).on('click', '#forcedEndBtn', function() {
|
||||
layer.confirm('确定结束吗?', function (confirmLayerIndex) {
|
||||
layer.close(confirmLayerIndex);
|
||||
|
||||
layer.prompt({title: '请输入结束原因', formType: 2}, function (reason, promptIndex) {
|
||||
layer.close(promptIndex);
|
||||
|
||||
var loadLayerIndex;
|
||||
restAjax.put(restAjax.path('api/oa-form-report/update-forced-end/process-instance-id/{processInstanceId}/task-id/{taskId}', [processInstanceId, taskId]), {
|
||||
reason: reason
|
||||
}, null, function (code, data) {
|
||||
layer.msg('结束成功');
|
||||
}, function (code, data) {
|
||||
$('.confirm-btn').show();
|
||||
layer.msg(data.msg);
|
||||
}, function () {
|
||||
$('.confirm-btn').hide();
|
||||
loadLayerIndex = layer.msg('提交中...', {icon: 16, time: 0, shade: 0.3});
|
||||
}, function () {
|
||||
layer.close(loadLayerIndex);
|
||||
});
|
||||
});
|
||||
});
|
||||
})
|
||||
|
||||
// 抄送
|
||||
$(document.body).on('click', '#ccBtn', function() {
|
||||
function getCcArray() {
|
||||
var selectedUserIdArray = [];
|
||||
var ccsArray = $('#ccs').val().split(',');
|
||||
for(var i = 0, item; item = ccsArray[i++];) {
|
||||
if(!item) {
|
||||
continue;
|
||||
}
|
||||
var ccArray = item.split(':');
|
||||
selectedUserIdArray.push(ccArray[0]);
|
||||
}
|
||||
return selectedUserIdArray;
|
||||
}
|
||||
var osUserSelect = new OaUserSelect(layui, {
|
||||
isApp: isApp,
|
||||
headers: headers,
|
||||
departmentRootId: 0,
|
||||
selectedUserIdArray: getCcArray(),
|
||||
onConfirm: function(selectedUserArray) {
|
||||
if(selectedUserArray.length == 0) {
|
||||
return;
|
||||
}
|
||||
var ccs = '';
|
||||
for(var i = 0, item; item = selectedUserArray[i++];) {
|
||||
if (ccs.length > 0) {
|
||||
ccs += ',';
|
||||
}
|
||||
ccs += item.userId + ':' + item.userName.replace(/[\,\:]/g, '，');
|
||||
}
|
||||
$('#ccs').val(ccs);
|
||||
}
|
||||
});
|
||||
osUserSelect.open();
|
||||
})
|
||||
}
|
||||
|
||||
initButton();
|
||||
|
||||
380
module-form/src/main/resources/static/form/js/oa-user-select.js
Normal file
380
module-form/src/main/resources/static/form/js/oa-user-select.js
Normal file
@ -0,0 +1,380 @@
|
||||
function OaUserSelect(layui, opt) {
|
||||
var $ = layui.$;
|
||||
var layer = layui.layer;
|
||||
var restAjax = layui.restajax;
|
||||
|
||||
var isApp = opt && opt.isApp ? opt.isApp : false;
|
||||
var headers = opt && opt.headers ? opt.headers : {};
|
||||
var departmentRootId = opt && opt.departmentRootId ? opt.departmentRootId : 0;
|
||||
var selectedUserIdArray = opt && opt.selectedUserIdArray && (opt.selectedUserIdArray instanceof Array) ? opt.selectedUserIdArray : [];
|
||||
var selectType = opt && opt.selectType && (opt.selectType === 'checkbox' || opt.selectType === 'radio') ? 'radio' : 'checkbox';
|
||||
var onConfirm = opt && opt.onConfirm && typeof(opt.onConfirm) === 'function' ? opt.onConfirm : null;
|
||||
|
||||
var Consts = {
|
||||
avatarColorArray: [
|
||||
{
|
||||
bgColor: '#b4b4c4',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
bgColor: '#7182e7',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
bgColor: '#304eff',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
bgColor: '#ff75ef',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
bgColor: '#ff7878',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
bgColor: '#d2d2d2',
|
||||
color: '#000'
|
||||
},
|
||||
{
|
||||
bgColor: '#b8c926',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
bgColor: '#8d3434',
|
||||
color: '#fff'
|
||||
}
|
||||
]
|
||||
}
|
||||
// 变量
|
||||
var Properties = {
|
||||
containerWidth : 0,
|
||||
containerTopSelectedUserListWidth : 0,
|
||||
containerBottomLeftWidth : 0,
|
||||
containerBottomLeftListWidth : 0,
|
||||
containerBottomLeftListHeight : 0,
|
||||
containerBottomRightWidth : 0,
|
||||
containerBottomRightListWidth : 0,
|
||||
containerBottomRightListHeight : 0,
|
||||
containerBottomRightListUserItemInfoDivWidth : 0,
|
||||
selectedDepartmentArray: [],
|
||||
subDepartmentArray: [],
|
||||
userArray: [],
|
||||
selectedUserArray: [],
|
||||
layerIndex: null
|
||||
}
|
||||
var Methods = {
|
||||
initStyle: function() {
|
||||
document.querySelectorAll('.select-user-container').forEach(function(item) {
|
||||
item.style.width = Properties.containerWidth;
|
||||
});
|
||||
document.querySelectorAll('.select-user-container .top .selected-user .list').forEach(function(item) {
|
||||
item.style.width = Properties.containerTopSelectedUserListWidth;
|
||||
});
|
||||
document.querySelectorAll('.select-user-container .bottom .left').forEach(function(item) {
|
||||
item.style.width = Properties.containerBottomLeftWidth;
|
||||
});
|
||||
document.querySelectorAll('.select-user-container .bottom .left .list').forEach(function(item) {
|
||||
item.style.width = Properties.containerBottomLeftListWidth;
|
||||
item.style.height = Properties.containerBottomLeftListHeight;
|
||||
});
|
||||
document.querySelectorAll('.select-user-container .bottom .right').forEach(function(item) {
|
||||
item.style.width = Properties.containerBottomRightWidth;
|
||||
});
|
||||
document.querySelectorAll('.select-user-container .bottom .right .list').forEach(function(item) {
|
||||
item.style.width = Properties.containerBottomRightListWidth;
|
||||
item.style.height = Properties.containerBottomRightListHeight;
|
||||
});
|
||||
document.querySelectorAll('.select-user-container .footer').forEach(function(item) {
|
||||
item.style.width = Properties.containerWidth;
|
||||
})
|
||||
},
|
||||
// 初始化用户列表样式
|
||||
initUserListStyle: function() {
|
||||
document.querySelectorAll('.select-user-container .bottom .right .list .user-item .info div').forEach(function(item) {
|
||||
item.style.width = Properties.containerBottomRightListUserItemInfoDivWidth;
|
||||
});
|
||||
document.querySelectorAll('.select-user-container .bottom .right .list .user-item .checked').forEach(function(item) {
|
||||
item.style.right = 28 +'px';
|
||||
});
|
||||
},
|
||||
// 用户是否被选择
|
||||
getSelectedUserIndex: function (userId) {
|
||||
for(var i = 0; i < Properties.selectedUserArray.length; i++) {
|
||||
var item = Properties.selectedUserArray[i];
|
||||
if(userId === item.userId) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
},
|
||||
// 刷新已选择的用户
|
||||
refreshSelectedUser: function() {
|
||||
var doms = '';
|
||||
for(var i = 0, item; item = Properties.selectedUserArray[i++];) {
|
||||
doms += '<a href="javascript:void(0);" class="layui-btn layui-btn-xs" data-user-id="'+ item.userId +'" >'+ item.userName +' <i class="fa fa-close remove-user" data-user-id="'+ item.userId +'"></i></a>';
|
||||
}
|
||||
$('#selectedUsers').empty();
|
||||
$('#selectedUsers').append(doms);
|
||||
},
|
||||
// 刷新选择的部门
|
||||
refreshSelectedDepartments: function() {
|
||||
var doms = '';
|
||||
for(var i = 0, item; item = Properties.selectedDepartmentArray[i++];) {
|
||||
doms += '<span '+ (i === Properties.selectedDepartmentArray.length ? '' : 'class="selected-department"') +' data-department-id="'+ item.departmentId +'">'+ item.departmentName +'</span>';
|
||||
}
|
||||
$('#selectedDepartments').empty();
|
||||
$('#selectedDepartments').append(doms);
|
||||
},
|
||||
// 刷新下级部门
|
||||
refreshSubDepartments: function() {
|
||||
var doms = '';
|
||||
for(var i = 0, item; item = Properties.subDepartmentArray[i++];) {
|
||||
doms += '<div class="sub-department" data-department-id="'+ item.departmentId +'"><i class="fa fa-university"></i> '+ item.departmentName +'</div>'
|
||||
}
|
||||
$('#subDepartments').empty();
|
||||
$('#subDepartments').append(doms);
|
||||
},
|
||||
// 刷新用户
|
||||
refreshUsers: function() {
|
||||
var doms = '';
|
||||
|
||||
for(var i = 0, item; item = Properties.userArray[i++];) {
|
||||
var color = Consts.avatarColorArray[(i - 1) % Consts.avatarColorArray.length];
|
||||
|
||||
doms += [
|
||||
'<div class="user-item '+ (Methods.getSelectedUserIndex(item.userId) != -1 ? 'active' : '') +'" data-user-id="'+ item.userId +'" data-user-name="'+ item.userName +'">',
|
||||
' <div class="avatar" style="background-color: '+ color.bgColor +'; color: '+ color.color +'">'+ item.userName.substring(0, 1) +'</div>',
|
||||
' <div class="info">',
|
||||
' <div class="username">'+ item.userName +'（'+ item.userUsername +'）</div>',
|
||||
' <div class="phone">'+ item.userPhone +'</div>',
|
||||
' </div>',
|
||||
' <div class="checked"><i class="fa fa-check"></i></div>',
|
||||
'</div>'
|
||||
].join('');
|
||||
}
|
||||
$('#users').empty();
|
||||
$('#users').append(doms);
|
||||
Methods.initUserListStyle();
|
||||
},
|
||||
// 清除选择的部门
|
||||
clearSelectedDepartment: function(departmentId) {
|
||||
for(var i = 0; i < Properties.selectedDepartmentArray.length; i++) {
|
||||
var item = Properties.selectedDepartmentArray[i];
|
||||
if(departmentId === item.departmentId) {
|
||||
Properties.selectedDepartmentArray.splice(i, Properties.selectedDepartmentArray.length - i);
|
||||
return;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 移除点击事件
|
||||
removeClickEvent: function() {
|
||||
$(document).off('click', '.select-user-container .selected-department')
|
||||
// 部门列表点击
|
||||
$(document).off('click', '.select-user-container .sub-department')
|
||||
// 用户列表点击
|
||||
$(document).off('click', '.select-user-container .user-item')
|
||||
// 移除
|
||||
$(document).off('click', '.select-user-container .remove-user');
|
||||
|
||||
$(document).off('click', '#userSelectConfirmBtn');
|
||||
// 关闭
|
||||
$(document).off('click', '#userSelectCloseBtn');
|
||||
},
|
||||
// 关闭窗口
|
||||
close: function() {
|
||||
layer.close(Properties.layerIndex);
|
||||
},
|
||||
}
|
||||
var Init = {
|
||||
initHtml: function() {
|
||||
var html = [
|
||||
'<div class="select-user-container">',
|
||||
' <div class="top">',
|
||||
' <div class="selected-user">',
|
||||
' <div id="selectedUsers" class="list"></div>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div class="center">',
|
||||
' <div id="selectedDepartments" class="list"></div>',
|
||||
' </div>',
|
||||
' <div class="bottom">',
|
||||
' <div class="left">',
|
||||
' <div id="subDepartments" class="list"></div>',
|
||||
' </div>\n' +
|
||||
' <div class="right">',
|
||||
' <div id="users" class="list"></div>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div class="footer">',
|
||||
' <div class="layui-btn-group">',
|
||||
' <button id="userSelectConfirmBtn" type="button" class="layui-btn layui-btn-sm">确认</button>',
|
||||
' <button id="userSelectCloseBtn" type="button" class="layui-btn layui-btn-primary layui-btn-sm">关闭</button>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join('');
|
||||
return html;
|
||||
},
|
||||
// 初始化选择的用户
|
||||
initSelectedUser: function () {
|
||||
if(selectedUserIdArray.length == 0) {
|
||||
Methods.refreshSelectedUser();
|
||||
return;
|
||||
}
|
||||
top.restAjax.post(top.restAjax.path('api/user/listbyids', []), {
|
||||
ids: selectedUserIdArray
|
||||
}, null, function(code, data) {
|
||||
for(var i = 0, item; item = data[i++];) {
|
||||
var user = {
|
||||
userId: item.userId,
|
||||
userName: item.userName
|
||||
};
|
||||
Properties.selectedUserArray.push(user);
|
||||
Methods.refreshSelectedUser();
|
||||
}
|
||||
}, function(code, data) {
|
||||
layer.msg(data.msg);
|
||||
});
|
||||
},
|
||||
// 刷新部门和用户
|
||||
refreshDepartmentUser: function () {
|
||||
Methods.refreshSelectedDepartments();
|
||||
Methods.refreshSubDepartments();
|
||||
Methods.refreshUsers();
|
||||
},
|
||||
// 初始化部门与部门用户
|
||||
initDepartmentAndUser: function(parentDepartmentId) {
|
||||
var loadLayerIndex;
|
||||
top.restAjax.get(top.restAjax.path('api/department/user/get-department-contain-user-and-sub/department-id/{departmentId}', [parentDepartmentId]), {}, null, function(code, data) {
|
||||
Properties.selectedDepartmentArray.push({
|
||||
departmentId: data.departmentId,
|
||||
departmentName: data.departmentName,
|
||||
departmentCode: data.departmentCode
|
||||
});
|
||||
Properties.subDepartmentArray = data.subDepartments;
|
||||
Properties.userArray = data.users;
|
||||
Init.refreshDepartmentUser();
|
||||
}, function(code, data) {
|
||||
layer.msg(data.msg);
|
||||
}, function() {
|
||||
loadLayerIndex = layer.msg('正在加载...', {icon: 16, time: 0, shade: 0.3});
|
||||
}, function() {
|
||||
layer.close(loadLayerIndex);
|
||||
});
|
||||
},
|
||||
initClickEvent: function() {
|
||||
$(document).on('click', '.select-user-container .selected-department', function() {
|
||||
var departmentId = this.dataset.departmentId;
|
||||
Methods.clearSelectedDepartment(departmentId);
|
||||
Init.initDepartmentAndUser(departmentId);
|
||||
})
|
||||
// 部门列表点击
|
||||
$(document).on('click', '.select-user-container .sub-department', function() {
|
||||
var departmentId = this.dataset.departmentId;
|
||||
Init.initDepartmentAndUser(departmentId);
|
||||
})
|
||||
// 用户列表点击
|
||||
$(document).on('click', '.select-user-container .user-item', function() {
|
||||
var userId = this.dataset.userId;
|
||||
var userName = this.dataset.userName;
|
||||
if(selectType === 'radio') {
|
||||
// 单选
|
||||
Properties.selectedUserArray = [];
|
||||
Properties.selectedUserArray.push({
|
||||
userId: userId,
|
||||
userName: userName
|
||||
});
|
||||
} else {
|
||||
// 多选
|
||||
var selectedIndex = Methods.getSelectedUserIndex(userId);
|
||||
if(selectedIndex == -1) {
|
||||
// 不存在，添加
|
||||
Properties.selectedUserArray.push({
|
||||
userId: userId,
|
||||
userName: userName
|
||||
});
|
||||
} else {
|
||||
// 存在，移除
|
||||
Properties.selectedUserArray.splice(selectedIndex, 1);
|
||||
}
|
||||
}
|
||||
Methods.refreshSelectedUser();
|
||||
Methods.refreshUsers();
|
||||
})
|
||||
// 移除
|
||||
$(document).on('click', '.select-user-container .remove-user', function() {
|
||||
var userId = this.dataset.userId;
|
||||
var selectedIndex = Methods.getSelectedUserIndex(userId);
|
||||
Properties.selectedUserArray.splice(selectedIndex, 1);
|
||||
Methods.refreshSelectedUser();
|
||||
Methods.refreshUsers();
|
||||
});
|
||||
|
||||
$(document).on('click', '#userSelectConfirmBtn', function(e) {
|
||||
if(onConfirm) {
|
||||
var selectUserArray = [];
|
||||
onConfirm(Properties.selectedUserArray);
|
||||
}
|
||||
Methods.close();
|
||||
});
|
||||
// 关闭
|
||||
$(document).on('click', '#userSelectCloseBtn', function(e) {
|
||||
Methods.close();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.open = function() {
|
||||
var winWidth = window.innerWidth;
|
||||
var winHeight = window.innerHeight;
|
||||
var layerWidth;
|
||||
var layerHeight;
|
||||
if(isApp) {
|
||||
layerWidth = winWidth;
|
||||
layerHeight = winHeight * 0.8;
|
||||
} else {
|
||||
layerWidth = winWidth > 400 ? 400 : winWidth;
|
||||
layerHeight = winHeight > 500 ? 500 : winHeight * 0.8
|
||||
}
|
||||
|
||||
Properties.containerWidth = layerWidth +'px';
|
||||
Properties.containerTopSelectedUserListWidth = (layerWidth - 2) + 'px';
|
||||
Properties.containerBottomLeftWidth = (layerWidth * (2 / 5) - 2) +'px';
|
||||
Properties.containerBottomLeftListWidth = (layerWidth * (2 / 5) + 16) +'px';
|
||||
Properties.containerBottomLeftListHeight = (layerHeight - 166) +'px';
|
||||
Properties.containerBottomRightWidth = (layerWidth * (3 / 5) - 1) +'px';
|
||||
Properties.containerBottomRightListWidth = (layerWidth * (3 / 5) + 16) +'px';
|
||||
Properties.containerBottomRightListHeight = (layerHeight - 166) +'px';
|
||||
Properties.containerBottomRightListUserItemInfoDivWidth = (layerWidth * (3 / 5) - 56) +'px';
|
||||
|
||||
Properties.layerIndex = layer.open({
|
||||
type: 1,
|
||||
area: [layerWidth +'px', layerHeight +'px'],
|
||||
offset: isApp ? 'b' : 'auto',
|
||||
closeBtn: 0,
|
||||
anim: isApp ? 2 : 0,
|
||||
isOutAnim: false,
|
||||
title: false,
|
||||
shadeClose: false,
|
||||
scrollbar: false,
|
||||
content: Init.initHtml(),
|
||||
success: function() {
|
||||
Methods.initStyle();
|
||||
Methods.initUserListStyle();
|
||||
Init.initSelectedUser();
|
||||
Init.initDepartmentAndUser(departmentRootId);
|
||||
Init.initClickEvent();
|
||||
},
|
||||
end: function () {
|
||||
// 所有属性置空
|
||||
Properties.selectedDepartmentArray = [];
|
||||
Properties.subDepartmentArray = [];
|
||||
Properties.userArray = [];
|
||||
Properties.selectedUserArray = [];
|
||||
Methods.removeClickEvent();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@ -21,10 +21,10 @@
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form layui-form-pane" lay-filter="dataForm">
|
||||
<div class="layui-row oa-form-header-tool-bar">
|
||||
<div class="layui-col-xs8 tool-bar-left layui-layout-admin">
|
||||
<div class="layui-col-xs7 tool-bar-left layui-layout-admin">
|
||||
<div id="submitBtnGroup" class="layui-btn-group"></div>
|
||||
</div>
|
||||
<div class="layui-col-xs4 tool-bar-right">
|
||||
<div class="layui-col-xs5 tool-bar-right">
|
||||
<div id="formButtonGroup"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,8 +21,8 @@
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form layui-form-pane" lay-filter="dataForm">
|
||||
<div class="layui-row oa-form-header-tool-bar">
|
||||
<div class="layui-col-xs8 tool-bar-left"></div>
|
||||
<div class="layui-col-xs4 tool-bar-right">
|
||||
<div class="layui-col-xs7 tool-bar-left"></div>
|
||||
<div class="layui-col-xs5 tool-bar-right">
|
||||
<div class="layui-btn-group">
|
||||
<button id="attachmentBtn" type="button" class="layui-btn layui-btn-sm layui-btn-primary">附件上传</button>
|
||||
<button id="printBtn" type="button" class="layui-btn layui-btn-sm">打印</button>
|
||||
|
||||
@ -21,10 +21,10 @@
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form layui-form-pane" lay-filter="dataForm">
|
||||
<div class="layui-row oa-form-header-tool-bar">
|
||||
<div class="layui-col-xs8 tool-bar-left layui-layout-admin">
|
||||
<div class="layui-col-xs7 tool-bar-left layui-layout-admin">
|
||||
<div id="submitBtnGroup" class="layui-btn-group"></div>
|
||||
</div>
|
||||
<div class="layui-col-xs4 tool-bar-right">
|
||||
<div class="layui-col-xs5 tool-bar-right">
|
||||
<div id="formButtonGroup"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user