Home Explore Help
Register Sign In
qxp
/
suishenbang-oneportal
Watch 2
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

首页弹窗修改

yanym 1 year ago
parent
1d5809bd8d
commit
e7481320cf
2 changed files with 91 additions and 158 deletions
Split View Show Diff Stats
  1. 5 157
      suishenbang-admin/src/main/resources/templates/system/alertConfiguration/add.html
  2. 86 1
      suishenbang-admin/src/main/resources/templates/system/alertConfiguration/edit.html

+ 5 - 157
suishenbang-admin/src/main/resources/templates/system/alertConfiguration/add.html
View File 

@@ -5,96 +5,6 @@
 
     <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;
 
-        }
 
-        .imageBox{
 
-            width: 150px!important;
 
-            height: 150px!important;
 
-        }
 
-        .thumbBox{
 
-            margin-top: -75px!important;
 
-            margin-left: -75px!important;
 
-        }
 
-    </style>
 
 </head>
 
 <body class="white-bg">
 
 <div class="wrapper wrapper-content animated fadeInRight ibox-content">
 
@@ -110,22 +20,9 @@
 
         <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 id="div-bgUrl"></div>
 
-                <!--<div class="imageBox">-->
 
-                    <!--<div class="thumbBox" style="width:150px;height:150px;"></div>-->
 
-                    <!--<div class="spinner" style="display: none">Loading...</div>-->
 
-                <!--</div>-->
 
                 <div class="action">
 
-                    <div class="new-contentarea tc">
 
-                        <!--<a href="javascript:void(0)" class=""><label for="avatar">选择图片</label> </a>-->
 
-                        <!--<input type="file" class="" name="avatar" id="avatar" accept="image/*" value="上传"/>-->
 
-                    </div>
 
                     <input type="file" class="" name="avatar" id="avatar" accept="image/*" value="上传"/>
 
-                    <!--<input type="button" id="submitbuttonBg" onclick="upBg()" class="" value="上传"/>-->
 
                 </div>
 
             </div>
 
         </div>
 
@@ -200,22 +97,6 @@
 
         </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" />
 
@@ -224,7 +105,7 @@
 
     var prefix = ctx + "system/configuration"
 
     // var getCompanyListPrefix = "http://localhost:10001/wxportal-api/sysuser/searchOrg";
 
     var getCompanyListPrefix = "http://suishenbangtest.nipponpaint.com.cn/wxportal-api/sysuser/searchOrg";
 
-    var cropper;
 
+
 
     var photoUrl;
 
     var options = {
 
         thumbBox: '.thumbBox',
 
@@ -248,16 +129,10 @@
 
                 if ((options.imgSrc).indexOf("image/") == -1) {
 
                     $.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
 
                 }
 
-                // else {
 
-                //     cropper = $('.imageBox').cropbox(options);
 
-                // }
 
             }
 
-            console.log(333,this.files[0])
 
             reader.readAsDataURL(this.files[0]);
 
-            console.log(4444,this.files[0])
 
             upBg(this.files[0]);
 
         })
 
-        console.log('ctx',ctx);
 
     })
 
 
     $("#alertType").on('change',function () {
 
@@ -265,10 +140,13 @@
 
             if ($(this).val() == 0){
 
                 $("#alertContentItem").show();
 
                 $("#alertImageItem").hide();
 
+                $("#div-bgUrl").html("<div></div>");
 
+                photoUrl = "";
 
             }
 
             if ($(this).val() == 1){
 
                 $("#alertImageItem").show();
 
                 $("#alertContentItem").hide();
 
+                $('#alertContent').val('');
 
             }
 
         }
 
     })
 
@@ -334,36 +212,7 @@
 
         },
 
     });
 
 
-    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(imgFile) {
 
-        // cropper = $('.imageBox').cropbox(options);
 
-        // console.log(111,cropper)
 
-        // var img = cropper.getBlob();
 
-        // console.log(222,img)
 
         var formdata = new FormData();
 
         formdata.append("file", imgFile);
 
         $.ajax({
 
@@ -375,8 +224,7 @@
 
             success: function (result) {
 
                 if (result.code == 0) {
 
                     photoUrl = result.data.url;
 
-                    // $("#input_bgUrl").val(result.data.fileName);
 
-                    $("#div-bgUrl").html("<img src='" + result.data.url + "' style='width；150px;height:150px;'>");
 
+                    $("#div-bgUrl").html("<img src='" + result.data.url + "' style='width:300px;margin-bottom: 5px;'>");
 
                 } else {
 
                     $.modal.alertWarning(result.msg);
 
                 }

+ 86 - 1
suishenbang-admin/src/main/resources/templates/system/alertConfiguration/edit.html
View File 

@@ -10,12 +10,30 @@
 
         <form class="form-horizontal m" id="form-configuration-edit" th:object="${alertConfiguration}">
 
             <input name="alertId" th:field="*{alertId}" type="hidden">
 
             <div class="form-group">
 
+                <label class="col-sm-3 control-label">弹框类型：</label>
 
+                <div class="col-sm-8">
 
+                    <select name="alertType" id="alertType" class="form-control m-b"
 
+                            th:with="type=${@dict.getType('alert_configuration_type')}">
 
+                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
 
+                                th:field="*{alertType}"></option>
 
+                    </select>
 
+                </div>
 
+            </div>
 
+            <div class="form-group" id="alertImageItem">
 
+                <label class="col-sm-3 control-label">弹框图片：</label>
 
+                <div class="col-sm-8">
 
+                    <div id="div-bgUrl"></div>
 
+                    <div class="action">
 
+                        <input type="file" class="" name="avatar" id="avatar" accept="image/*" value="上传"/>
 
+                    </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">[[*{alertContent}]]</textarea>
 
                 </div>
 
             </div>
 
-
 
             <div class="form-group">    
                 <label class="col-sm-3 control-label">弹框开始时间：</label>
 
                 <div class="col-sm-8">
 
@@ -54,6 +72,7 @@
 
                 <input name="orgCode" th:field="*{orgCode}" style="display: none;">
 
                 <input name="orgName" th:field="*{orgName}" style="display: none;">
 
                 <input name="userTypeStr" th:field="*{userType}" style="display: none;">
 
+                <input name="userTypeStr" th:field="*{photoUrl}" style="display: none;">
 
             </div>
 
             <div class="form-group">
 
                 <label class="col-sm-3 control-label">部门类型：</label>
 
@@ -96,12 +115,26 @@
 
         // var getCompanyListPrefix = "http://localhost:10001/wxportal-api/sysuser/searchOrg";
 
         var getCompanyListPrefix = "http://suishenbangtest.nipponpaint.com.cn/wxportal-api/sysuser/searchOrg";
 
 
+        var photoUrl;
 
+        var options = {
 
+            thumbBox: '.thumbBox',
 
+            spinner: '.spinner',
 
+            imgSrc: ctx + 'img/profile.jpg'
 
+        }
 
+
 
         $(document).ready(function () {
 
             var formArray = $('#form-configuration-edit').serializeArray();
 
             var formData = {};
 
             $(formArray ).each(function(index, obj){
 
                 formData[obj.name] = obj.value;
 
             });
 
+            console.log(1,formData);
 
+            if (formData.alertType == '0'){
 
+                $("#alertImageItem").hide();
 
+            } else {
 
+                $("#alertContentItem").hide();
 
+                $("#div-bgUrl").html("<img src='" + formData.photoUrl + "' style='width:300px;margin-bottom: 5px;'>");
 
+            }
 
             $("#userType").selectpicker('val',formData.userType.split(','));
 
             if (formData.salesLevel == 'company_level'){
 
                 var objhx1 = {
 
@@ -230,6 +263,7 @@
 
         function submitHandler() {
 
             if ($.validate.form()) {
 
                 var alertId = $('#alertId').val();
 
+                var alertType = $('#alertType').val();
 
                 var contentVal = $('#alertContent').val();
 
                 var startTime = $('#alertStartTime').val();
 
                 var endTime = $('#alertEndTime').val();
 
@@ -237,6 +271,8 @@
 
                 var userType = $('#userType').val().join();
 
                 var objSubmit = {
 
                     alertId:alertId,
 
+                    alertType:alertType,
 
+                    photoUrl:photoUrl,
 
                     alertContent:contentVal,
 
                     alertStartTime:startTime,
 
                     alertEndTime:endTime,
 
@@ -291,6 +327,35 @@
 
             autoclose: true
 
         });
 
 
+        $('#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后缀的文件。");
 
+                }
 
+            }
 
+            reader.readAsDataURL(this.files[0]);
 
+            upBg(this.files[0]);
 
+        })
 
+
 
+        $("#alertType").on('change',function () {
 
+            if ($(this).val() != -1){
 
+                if ($(this).val() == 0){
 
+                    $("#alertContentItem").show();
 
+                    $("#alertImageItem").hide();
 
+                    $("#div-bgUrl").html("<div></div>");
 
+                    photoUrl = "";
 
+                }
 
+                if ($(this).val() == 1){
 
+                    $("#alertImageItem").show();
 
+                    $("#alertContentItem").hide();
 
+                    $('#alertContent').val('');
 
+                }
 
+            }
 
+        })
 
+
 
         $("#deptType1").on('change',function () {
 
             if ($(this).val() != -1){
 
                 var obj1 = {
 
@@ -331,6 +396,26 @@
 
             getCompanyList(obj3,"");
 
         })
 
 
+        function upBg(imgFile) {
 
+            var formdata = new FormData();
 
+            formdata.append("file", imgFile);
 
+            $.ajax({
 
+                url: ctx + "common/upload",
 
+                data: formdata,
 
+                type: "post",
 
+                processData: false,
 
+                contentType: false,
 
+                success: function (result) {
 
+                    if (result.code == 0) {
 
+                        photoUrl = result.data.url;
 
+                        $("#div-bgUrl").html("<img src='" + result.data.url + "' style='width:300px;margin-bottom: 5px;'>");
 
+                    } else {
 
+                        $.modal.alertWarning(result.msg);
 
+                    }
 
+                }
 
+            })
 
+        }
 
+
 
         /* 获取公司列表 */
 
         function getCompanyList(obj,chooseId) {
 
             var config = {