<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
|
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
|
<%
|
String path = request.getContextPath();
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
|
+ path + "/";
|
%>
|
|
<!DOCTYPE HTML>
|
<html>
|
<head>
|
<base href="<%=basePath%>">
|
<meta name="viewport" charset="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>桌面布局信息</title>
|
<link href="static/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
|
<link href="static/plugins/jquery-easyui/themes/bootstrap/easyui.css" rel="stylesheet" type="text/css">
|
<link rel="stylesheet" href="static/styles/initialize.css" type="text/css">
|
<link rel="stylesheet" href="static/styles/common.css" type="text/css">
|
<link rel="stylesheet" href="static/plugins/layer/skin/default/layer.css" type="text/css">
|
<link rel="stylesheet" href="static/plugins/webuploader/webuploader.css" type="text/css">
|
|
<script type="text/javascript" src="static/plugins/jquery/jquery.min.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery-easyui/jquery.easyui.min.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
|
<script type="text/javascript" src="static/scripts/easyuiExtend.js"></script>
|
<script type="text/javascript" src="static/scripts/jquery-extend.js"></script>
|
<script type="text/javascript" src="static/plugins/layer/layer.js"></script>
|
<script type="text/javascript" src="static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery-easyui-datagrid-dnd/datagrid-dnd.js"></script>
|
<script src="static/plugins/ace/src-noconflict/ace.js" type="text/javascript"></script>
|
<script type="text/javascript" src="static/plugins/webuploader/webuploader.js"></script>
|
<!-- 弹窗加载组件 -->
|
<script type="text/javascript" src="static/plugins/layer/layer.js"></script>
|
<script type="text/javascript" src="static/plugins/spinjs/spin.js"></script>
|
<script type="text/javascript" src="static/plugins/spinjs/jquery.spin.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery.blockUI.js"></script>
|
<!-- wcp组件 -->
|
<script type="text/javascript" src="static/wcp/scripts/wcp.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.layer.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.blockUI.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.spin.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.jquery.js"></script>
|
|
<!--[if lt IE 9]>
|
<script type="text/javascript" src="static/plugins/json2.js"></script>
|
<![endif]-->
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.infoPicker.js"></script>
|
<style>
|
.combobox-group {
|
clear: both;
|
}
|
|
.combobox-gitem {
|
float: left;
|
padding-right: 10px;
|
}
|
|
.thumbnail {
|
overflow: hidden;
|
display: inline-block;
|
padding: 4px;
|
margin-bottom: 5px;
|
line-height: 1.5em;
|
background-color: #fff;
|
border: 1px solid #ddd;
|
border-radius: 4px;
|
text-align: center;
|
width: 110px;
|
height: 110px;
|
}
|
|
.thumbnail>img, .thumbnail a>img {
|
margin-left: auto;
|
margin-right: auto;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="margin-lr">
|
<div class="pt-main-top clear">
|
<div class="pt-nav">
|
<span class="pt-title-icon"><i class="fa fa-window-restore"></i></span>
|
<div class="pt-title">
|
<div>
|
<h4>桌面布局信息</h4>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="pt-form">
|
<form id="formLayout" method="post">
|
<div class="ptbody">
|
<div class="form-unit1">基本信息</div>
|
<input type="hidden" id="layoutId" name="layoutId" value="${layout.layoutId } " />
|
<%-- <input type="hidden" id="rowLayout" name="rowLayout" value="${layout.rowLayout } " /> --%>
|
<table style="width: 100%">
|
<tr>
|
<td class="tbtitle">布局名称：</td>
|
<td>
|
<input class="easyui-textbox" type="text" name="layoutName" value="${layout.layoutName}" data-options="required:true" style="width:100%" />
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">启用状态：</td>
|
<td>
|
<input type="hidden" id="enablingState" name="enablingState" />
|
<input class="easyui-switchbutton" id="enablingStateText" data-options="onText:'启用',offText:'停用',onChange:setEnableValue" />
|
</td>
|
|
</tr>
|
<!-- <tr>
|
<td class="tbtitle">打开方式：</td>
|
<td>
|
<input class="easyui-radiobutton" name="openType" value="0" label="内嵌">
|
<input class="easyui-radiobutton" name="openType" value="1" label="新窗口">
|
</td>
|
|
</tr> -->
|
<tr>
|
<td class="tbtitle">背景颜色：</td>
|
<td>
|
<input class="easyui-textbox" name="backgroundColor" value="${layout.backgroundColor } " type="text" style="width:100%" />
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">外链：</td>
|
<td>
|
<input class="easyui-textbox" name="externalChain" value="${layout.externalChain } " type="text" style="width:100%" />
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">排序：</td>
|
<td>
|
<input class="easyui-numberspinner" name="sortNum" value="${layout.sortNum } " style="width:100%;">
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">是否使用权限：</td>
|
<td>
|
<input type="hidden" id="enablePermission" name="enablePermission" />
|
<input id="enablePermissionText" class="easyui-switchbutton" data-options="onText:'是',offText:'否',onChange:isPermissionChange" />
|
</td>
|
|
</tr>
|
<tr>
|
<td class="tbtitle">权限名称：</td>
|
<td>
|
<input id="permissionName" name="permissionName" class="easyui-textbox" type="text" value="${layout.permissionName }"
|
data-options="editable:false,buttonText:'选择权限',prompt:'',onClickButton:function(){selectPermission();}" style="width:100%;" />
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">背景图片：</td>
|
<td>
|
<div class="thumbnail">
|
<img id="imgPicture" src="${layout.backgroundPicture }" alt="" onload="wcp.utils.autoResizeImage(100,100,'imgPicture')" />
|
<input type="hidden" id="pictureUrl" name="backgroundPicture" value="${layout.backgroundPicture }" />
|
</div>
|
<div id="picker">选择图片</div>
|
</td>
|
</tr>
|
</table>
|
<div id="dataSourcesLabel_Css" class="form-unit1">布局</div>
|
<table style="width: 100%;">
|
<tr>
|
<td class="tbtitle">布局行数：</td>
|
<td>
|
|
<input class="easyui-numberspinner" id="totalRow" name="layoutRowNumber" style="width:70%;" value="${layout.layoutRowNumber } data-options="min:1,editable:false">
|
|
<input type="button" class="pt-btn pt-btn-success" onclick="insertRow();" value="插入行" />
|
</td>
|
</tr>
|
<tr>
|
<td></td>
|
<td>
|
<div id="rowDesign">
|
<div id="rowData_1">
|
第<strong class="order">1</strong>行列数
|
<input class="easyui-numberspinner" id="number_1" style="width:20.5%;" data-options="min:1,max:10">
|
|
<a title="列的比例总共是10，举例：列数为3，比例可以是3:3:4,也可以是4:4:2;列数为2，比例可以是5:5,也可以是7:3" class="easyui-tooltip">
|
比例 <i class="fa fa-exclamation-circle"></i>
|
</a>
|
<input class="easyui-textbox" id="ratio_1" type="text" data-options="required:true,validType:['ratio[\'#formLayout input[id=number_1]\']']" style="width:30.8%" />
|
|
<input type="hidden" id="modules_1" />
|
<input type="button" class="pt-btn pt-btn-info" onclick="openDesign(this);" value="设计" />
|
|
</div>
|
</div>
|
</td>
|
</tr>
|
|
</table>
|
</div>
|
</form>
|
<div class="pt-form-btn">
|
<div class="form-group">
|
<shiro:hasPermission name="SYS_CONFIG.DESKTOP.LAYOUT.OPERATION.SAVE">
|
<button id="btnSave" class="pt-btn pt-btn-primary">保存</button>
|
</shiro:hasPermission>
|
<button id="btnClose" class="pt-btn pt-btn-default">关闭</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
<script type="text/javascript" src="static/scripts/ResizeScroll.js"></script>
|
<script>
|
//窗口参数，用于弹窗传递
|
var params = {
|
callBack : null,
|
modules: null
|
};
|
$(function() {
|
|
$("input[radiobuttonName='openType'][value='${layout.openType}']").radiobutton('check');
|
var enablePermission = "${layout.enablePermission}";
|
//判断权限名称是否可编写
|
if (enablePermission == "true") {
|
$("#permissionName").textbox("enable");
|
$('#enablePermissionText').switchbutton("check");
|
$("#enablePermission").val("true");
|
} else {
|
$('#enablePermissionText').switchbutton("uncheck");
|
$("#permissionName").textbox("disable");
|
$("#enablePermission").val("false");
|
}
|
initSwitchbutton();
|
intiRowLayout(${layout.rowLayout});
|
new ResizeScroll({
|
"id" : ".ptbody",
|
fun : function() {
|
var wh = $(window).height();
|
return (wh - 69 - 62);
|
|
}
|
});
|
|
$("#btnSave").click(function() {
|
//验证表单信息
|
var isValid = $('#formLayout').form('validate');
|
if (!isValid) {
|
wcp.notify.warn('表单验证有误，请检查表单输入项！');
|
return false;
|
}
|
var obj = $("#formLayout").serializeObject();
|
var dataArray=new Array();
|
$("#rowDesign div").each(function(){
|
var data=$(this).data("rowData");
|
if(typeof data != "undefined" && data != null){
|
dataArray.push(data);
|
|
}
|
})
|
obj.rowLayout = JSON.stringify(dataArray);
|
|
wcp.ui.setBusy("body", wcp.ajax({
|
url : "config/desktopLayout/saveLayout?layoutType=admin",
|
data : JSON.stringify(obj),
|
}).done(function(result) {
|
//判断是否需要执行回调函数
|
if (params.callBack) {
|
params.callBack();
|
}
|
|
//关闭窗口
|
closeWindow();
|
|
top.wcp.notify.success("保存成功！");
|
}));
|
});
|
uploadPicture();
|
|
$("#btnClose").click(function() {
|
closeWindow();
|
});
|
|
|
});
|
//判断权限名称是否填写
|
function isPermissionChange(checked) {
|
if (checked) {
|
$("#enablePermission").val("true");
|
$("#permissionName").textbox("enable");
|
} else {
|
$("#enablePermission").val("false");
|
$("#permissionName").textbox("disable");
|
}
|
}
|
//设置隐藏域值
|
function setEnableValue(checked) {
|
if (checked) {
|
$("#enablingState").val("true");
|
|
} else {
|
$("#enablingState").val("false");
|
|
}
|
|
}
|
|
function initSwitchbutton() {
|
var enablingState = "${layout.enablingState}";
|
if (enablingState == "true") {
|
$('#enablingStateText').switchbutton("check");
|
$("#enablingState").val("true");
|
} else {
|
$('#enablingStateText').switchbutton("uncheck");
|
$("#enablingState").val("false");
|
}
|
|
}
|
|
function intiRowLayout(rowLayout){
|
if(rowLayout != "" && rowLayout != null){
|
var rowData = rowLayout[0];
|
$("#number_1").textbox("setValue",rowData.column);
|
$("#ratio_1").textbox("setValue",rowData.ratio);
|
$("#rowData_1").data("rowData", rowData);
|
var str = "";
|
for(var i = 1; i < rowLayout.length; i++){
|
str = '<div id="rowData_'+ (i+1)+'">第<strong class="order">' + (i + 1) + '</strong>行列数 <input id="number_' + (i + 1) + '" value="'+ rowLayout[i].column +'" style="width:20%;">' +
|
' <a id="tip_' + (i + 1) + '" title="列的比例总共是10，举例：列数为3，比例可以是3:3:4,也可以是4:4:2;列数为2，比例可以是5:5,也可以是7:3">' +
|
' 比例 <i class="fa fa-exclamation-circle"></i></a> '+
|
'<input id="ratio_' + (i + 1) + '" type="text" value="'+ rowLayout[i].ratio +'" style="width:30%" data-options="required:true,validType:[\'ratio[\\\'#formLayout input[id=number_'+(i + 1) +']\\\']\']"/> ' +
|
' ' +
|
'<input type="button" value="设计" class="pt-btn pt-btn-info" onclick="openDesign(this);" />' +
|
'<input type="button" value="删除" class="pt-btn pt-btn-danger" onclick="deleteRow(this);" /></div>';
|
$("#rowDesign").append(str);
|
$("#rowData_"+(i+1)).data("rowData", rowLayout[i]);
|
$("#number_" + (i + 1)).numberspinner({
|
min : 1,
|
max : 10
|
});
|
$("#ratio_" + (i + 1)).textbox({
|
required : true
|
});
|
$("#tip_" + (i + 1)).tooltip({});
|
|
}
|
}
|
|
}
|
|
function openRight(checked) {
|
if (checked) {
|
$("#span_showRight").show();
|
|
} else {
|
$("#span_showRight").hide();
|
}
|
}
|
|
|
|
//插入行
|
function insertRow() {
|
var rows = $("#rowDesign").children("div");
|
var length = rows.length;
|
//调整序号
|
rows.each(function(index, elem) {
|
$(elem).find("strong").text(index + 1);
|
});
|
//插入新的行
|
gTimestamp = new Date().getTime();
|
str = '<div>第<strong class="order">' + (length + 1) + '</strong>行列数 <input id="number_' + (length + 1) + '" style="width:20%;">' +
|
' <a id="tip_' + (length + 1) + '" title="列的比例总共是10，举例：列数为3，比例可以是3:3:4,也可以是4:4:2;列数为2，比例可以是5:5,也可以是7:3">' +
|
' 比例 <i class="fa fa-exclamation-circle"></i></a> '+
|
'<input id="ratio_' + (length + 1) + '" data-options="required:true,validType:[\'ratio[\\\'#formLayout input[id=number_'+(length + 1) +']\\\']\']" type="text" style="width:30%" /> ' +
|
' <input id="modules_' + (length + 1)+ '" type="hidden" />' +
|
'<input type="button" value="设计" class="pt-btn pt-btn-info" onclick="openDesign(this);" />' +
|
'<input type="button" value="删除" class="pt-btn pt-btn-danger" onclick="deleteRow(this);" /></div>';
|
$("#rowDesign").append(str);
|
|
$("#number_" + (length + 1)).numberspinner({
|
min : 1,
|
max : 10
|
});
|
$("#ratio_" + (length + 1)).textbox({
|
required : true
|
});
|
$("#tip_" + (length + 1)).tooltip({});
|
|
//总行数设置
|
$("#totalRow").numberspinner('setValue', length + 1);
|
|
}
|
|
//删除行
|
function deleteRow(obj) {
|
$(obj).parent("div").remove();
|
//调整序号
|
var rows = $("#rowDesign").children("div");
|
rows.each(function(index, elem) {
|
$(elem).find("strong").text(index + 1);
|
});
|
|
//总行数设置
|
$("#totalRow").numberspinner('setValue', rows.length);
|
}
|
|
//打开设计
|
function openDesign(obj) {
|
var parent = $(obj).parent();
|
var column = parent.find("[id^=number_]").numberspinner('getValue');
|
var ratio = parent.find("[id^=ratio_]").textbox('getValue');
|
var module = $(parent).data("rowData");
|
var isValid = $('#formLayout').form('validate');
|
if (!isValid) {
|
wcp.notify.warn('表单验证有误，请检查表单输入项！');
|
return false;
|
}
|
var url = 'config/desktopLayout/editDesign?column=' + column + "&ratio=" + ratio;
|
top.layer.open({
|
title : "布局设计",
|
type : 2,
|
area : [ '1150px', '600px' ],
|
fixed : false,
|
content : url,
|
success : function(layero, index) {
|
var body = window.top.layer.getChildFrame('body', index);
|
var iframeWin = window.top[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
|
|
//将参数和回调函数传给子页面
|
iframeWin.params.rowElement = parent;
|
//iframeWin.params.rowData = modules;
|
iframeWin.load(module);
|
iframeWin.params.callBack = callBackData;
|
}
|
});
|
|
}
|
|
function uploadPicture(){
|
|
var imgFileExtensions = 'gif,jpg,jpeg,bmp,png';
|
var uploader = WebUploader.create({
|
swf : 'static/plugins/webuploader/Uploader.swf',
|
server : 'config/desktopLayout/uploadPicture',
|
pick : {
|
id : "#picker",
|
multiple : false
|
},
|
accept : {
|
title : 'Images',
|
extensions : imgFileExtensions,
|
mimeTypes : 'image/*'
|
},
|
thumb : {
|
width : 100,
|
height : 100,
|
crop : true
|
},
|
auto : true
|
});
|
uploader.on("uploadSuccess", function(file, response) { //上传成功事件
|
var $img = $("#imgPicture");
|
var thumbnailWidth = 100,
|
thumbnailHeight = 100;
|
//console.log(response);
|
$("#pictureUrl").val(response.result.fileName);
|
uploader.makeThumb(file, function(error, src) {
|
if (error) {
|
wcp.message.error("转换缩略图失败，请重新选择！", "错误");
|
return;
|
}
|
$img.attr("src", src);
|
//$img.Jcrop();
|
}, thumbnailWidth, thumbnailHeight);
|
});
|
uploader.on("uploadError", function(file, reason) { //上传失败
|
wcp.message.error("上传失败：" + reason, "错误");
|
});
|
uploader.on("beforeFileQueued", function(file) {
|
var ext = file.ext;
|
if (imgFileExtensions.indexOf(ext.toLowerCase()) == -1) {
|
wcp.message.error("请选择图片文件！", "错误");
|
return false;
|
}
|
});
|
}
|
|
function callBackData(rowElement, data){
|
$(rowElement).data("rowData", data);
|
}
|
|
//选择权限
|
function selectPermission() {
|
wcp.picker.selectPermission({
|
title : "请选择权限",
|
multiSelect : false,
|
nameElement : "permissionName",
|
layerOpener : window
|
});
|
|
}
|
function closeWindow() {
|
var index = top.layer.getFrameIndex(window.name); //获取窗口索引
|
top.layer.close(index);
|
}
|
</script>
|
</html>
|
