|
|
@@ -4,11 +4,111 @@
|
|
|
<th:block th:include="include :: header('新增弹框配置')" />
|
|
|
<th:block th:include="include :: datetimepicker-css" />
|
|
|
<th:block th:include="include :: bootstrap-select-css" />
|
|
|
+ <th:block th:include="include :: cropbox-css"/>
|
|
|
+ <style>
|
|
|
+ .bg-sm {
|
|
|
+ width: 119px;
|
|
|
+ height: 109px;
|
|
|
+ font-size: 75px;
|
|
|
+ color: black;
|
|
|
+ text-align: center
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-md {
|
|
|
+ width: 180px;
|
|
|
+ height: 150px;
|
|
|
+ font-size: 105px;
|
|
|
+ color: black;
|
|
|
+ text-align: center
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-lg {
|
|
|
+ width: 365px;
|
|
|
+ height: 160px;
|
|
|
+ font-size: 115px;
|
|
|
+ color: black;
|
|
|
+ text-align: center
|
|
|
+ }
|
|
|
+
|
|
|
+ .thumbBox_S {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ width: 238px;
|
|
|
+ height: 218px;
|
|
|
+ margin-left: -119px;
|
|
|
+ margin-top: -109px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid rgb(102, 102, 102);
|
|
|
+ box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
|
|
|
+ background: none repeat scroll 0% 0% transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .thumbBox_M {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ width: 360px;
|
|
|
+ height: 300px;
|
|
|
+ margin-left: -180px;
|
|
|
+ margin-top: -150px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid rgb(102, 102, 102);
|
|
|
+ box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
|
|
|
+ background: none repeat scroll 0% 0% transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .thumbBox_L {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ width: 730px;
|
|
|
+ height: 320px;
|
|
|
+ margin-left: -365px;
|
|
|
+ margin-top: -160px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid rgb(102, 102, 102);
|
|
|
+ box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
|
|
|
+ background: none repeat scroll 0% 0% transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imageBox_S {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 400px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imageBox_M {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 400px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imageBox_L {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 800px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body class="white-bg">
|
|
|
-<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
|
|
+<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="div1">
|
|
|
<form class="form-horizontal m" id="form-configuration-add">
|
|
|
<div class="form-group">
|
|
|
+ <label class="col-sm-3 control-label">弹框类型：</label>
|
|
|
+ <div class="col-sm-3">
|
|
|
+ <select title="请选择" id="alertType" name="alertType" class="form-control m-b selectpicker" th:with="type=${@dict.getType('alert_configuration_type')}">
|
|
|
+ <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group" id="alertImageItem">
|
|
|
+ <label class="col-sm-3 control-label">弹框图片：</label>
|
|
|
+ <div class="col-sm-8">
|
|
|
+ <input id="input_bgUrl" name="bgUrl" type="hidden"/>
|
|
|
+ <div class="thumbnail slideshow_span" id="div-bgUrl" onclick="javascript:bgUpload('bg')">
|
|
|
+ <i class="fa fa-plus"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group" id="alertContentItem">
|
|
|
<label class="col-sm-3 control-label">弹框内容：</label>
|
|
|
<div class="col-sm-8">
|
|
|
<textarea id="alertContent" name="alertContent" class="form-control"></textarea>
|
|
|
@@ -79,23 +179,74 @@
|
|
|
</div>-->
|
|
|
</form>
|
|
|
</div>
|
|
|
+
|
|
|
+<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="div2" style="display: none">
|
|
|
+ <div class="imageBox">
|
|
|
+ <div class="thumbBox" style="width:200px;height:200px;"></div>
|
|
|
+ <div class="spinner" style="display: none">Loading...</div>
|
|
|
+ </div>
|
|
|
+ <div class="action" style="margin: 10px auto;">
|
|
|
+ <div class="new-contentarea tc">
|
|
|
+ <a href="javascript:void(0)" class="upload-img"> <label for="avatar">选择图片</label> </a>
|
|
|
+ <input type="file" class="" name="avatar" id="avatar" accept="image/*"/>
|
|
|
+ </div>
|
|
|
+ <input type="button" id="submitbuttonBg" onclick="upBg()" class="btn-info Btnsty_peyton" value="上传"/>
|
|
|
+ <input type="button" id="submitbuttonQr" onclick="upQr()" class="btn-info Btnsty_peyton" value="上传"/>
|
|
|
+ <input type="button" onclick="back()" class="btn-info Btnsty_peyton " value="返回"/>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
<th:block th:include="include :: footer" />
|
|
|
<th:block th:include="include :: datetimepicker-js" />
|
|
|
<th:block th:include="include :: bootstrap-select-js" />
|
|
|
+<th:block th:include="include :: cropbox-js"/>
|
|
|
<script type="text/javascript">
|
|
|
var prefix = ctx + "system/configuration"
|
|
|
- //var getCompanyListPrefix = "http://localhost:10001/wxportal-api/sysuser/searchOrg";
|
|
|
+ // var getCompanyListPrefix = "http://localhost:10001/wxportal-api/sysuser/searchOrg";
|
|
|
var getCompanyListPrefix = "http://suishenbang.nipponpaint.com.cn/wxportal-api/sysuser/searchOrg";
|
|
|
+ var cropper;
|
|
|
+ var options = {
|
|
|
+ thumbBox: '.thumbBox',
|
|
|
+ spinner: '.spinner',
|
|
|
+ imgSrc: ctx + 'img/profile.jpg'
|
|
|
+ }
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
var obj = {
|
|
|
parType: "diy_level",
|
|
|
parValue: ""
|
|
|
}
|
|
|
+ $("#alertContentItem").hide();
|
|
|
+ $("#alertImageItem").hide();
|
|
|
getCompanyList(obj);
|
|
|
+ $('#avatar').on('change', function () {
|
|
|
+ var reader = new FileReader();
|
|
|
+ reader.onload = function (e) {
|
|
|
+ options.imgSrc = e.target.result;
|
|
|
+ //根据MIME判断上传的文件是不是图片类型
|
|
|
+ if ((options.imgSrc).indexOf("image/") == -1) {
|
|
|
+ $.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
|
|
|
+ } else {
|
|
|
+ cropper = $('.imageBox').cropbox(options);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ reader.readAsDataURL(this.files[0]);
|
|
|
+ })
|
|
|
console.log('ctx',ctx);
|
|
|
})
|
|
|
|
|
|
+ $("#alertType").on('change',function () {
|
|
|
+ if ($(this).val() != -1){
|
|
|
+ if ($(this).val() == 0){
|
|
|
+ $("#alertContentItem").show();
|
|
|
+ $("#alertImageItem").hide();
|
|
|
+ }
|
|
|
+ if ($(this).val() == 1){
|
|
|
+ $("#alertImageItem").show();
|
|
|
+ $("#alertContentItem").hide();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
$("#deptType1").on('change',function () {
|
|
|
if ($(this).val() != -1){
|
|
|
var obj1 = {
|
|
|
@@ -157,6 +308,81 @@
|
|
|
},
|
|
|
});
|
|
|
|
|
|
+ function back() {
|
|
|
+ $("#div1").show();
|
|
|
+ $("#div2").hide();
|
|
|
+ }
|
|
|
+
|
|
|
+ /*上传背景图片*/
|
|
|
+ function bgUpload(value) {
|
|
|
+ if (value == 'bg') {
|
|
|
+ $("#submitbuttonQr").hide();
|
|
|
+ $("#submitbuttonBg").show();
|
|
|
+ } else if (value == 'qr') {
|
|
|
+ $("#submitbuttonBg").hide();
|
|
|
+ $("#submitbuttonQr").show();
|
|
|
+ }
|
|
|
+ $("#div1").hide();
|
|
|
+ $("#div2").show();
|
|
|
+ var imgUrl = ctx + 'img/profile.jpg';
|
|
|
+ options = {
|
|
|
+ thumbBox: '.thumbBox',
|
|
|
+ spinner: '.spinner',
|
|
|
+ imgSrc: imgUrl
|
|
|
+ }
|
|
|
+ cropper = $('.imageBox').cropbox(options);
|
|
|
+ }
|
|
|
+
|
|
|
+ function upBg() {
|
|
|
+ var img = cropper.getBlob();
|
|
|
+ var formdata = new FormData();
|
|
|
+ formdata.append("file", img);
|
|
|
+ $.ajax({
|
|
|
+ url: ctx + "common/upload",
|
|
|
+ data: formdata,
|
|
|
+ type: "post",
|
|
|
+ processData: false,
|
|
|
+ contentType: false,
|
|
|
+ success: function (result) {
|
|
|
+ if (result.code == 0) {
|
|
|
+ $("#input_bgUrl").val(result.data.fileName);
|
|
|
+ $("#div-bgUrl").html("<img src='" + result.data.url + "' style='width；100%;height:100%;'>");
|
|
|
+ $("#div1").show();
|
|
|
+ $("#div2").hide();
|
|
|
+ } else {
|
|
|
+ $("#div1").show();
|
|
|
+ $("#div2").hide();
|
|
|
+ $.modal.alertWarning(result.msg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function sizeChange() {
|
|
|
+ size = $("#sel_magnetSize").val();
|
|
|
+ $("#div-bgUrl").removeClass("bg-sm");
|
|
|
+ $("#div-bgUrl").removeClass("bg-md");
|
|
|
+ $("#div-bgUrl").removeClass("bg-lg");
|
|
|
+ $("#imageBox").removeClass();
|
|
|
+ $("#thumbBox").removeClass();
|
|
|
+ if (size == "l" || size == "L") {
|
|
|
+ $("#div-bgUrl").addClass("bg-lg");
|
|
|
+ size = "L";
|
|
|
+ $("#imageBox").addClass("imageBox imageBox_L");
|
|
|
+ $("#thumbBox").addClass("thumbBox_L");
|
|
|
+ } else if (size == "m" || size == "M") {
|
|
|
+ $("#div-bgUrl").addClass("bg-md");
|
|
|
+ size = "M";
|
|
|
+ $("#imageBox").addClass("imageBox imageBox_M");
|
|
|
+ $("#thumbBox").addClass("thumbBox_M");
|
|
|
+ } else if (size == "s" || size == "S") {
|
|
|
+ $("#div-bgUrl").addClass("bg-sm");
|
|
|
+ size = "S";
|
|
|
+ $("#imageBox").addClass("imageBox imageBox_S");
|
|
|
+ $("#thumbBox").addClass("thumbBox_S");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
function submitHandler() {
|
|
|
if ($.validate.form()) {
|
|
|
var contentVal = $('#alertContent').val();
|
