通知公告改附件

lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/templates/system/notice/add.html

@@ -3,6 +3,7 @@
 <head>
 	<th:block th:include="include :: header('新增通知公告')" />
 	<th:block th:include="include :: summernote-css" />
+	<th:block th:include="include :: bootstrap-fileinput-css"/>
 </head>
 <body class="white-bg">
     <div class="wrapper wrapper-content animated fadeInRight ibox-content">
@@ -28,6 +29,12 @@
 				    <div class="summernote"></div>
 				</div>
 			</div>
+			<div class="form-group">
+				<label class="col-sm-2 control-label">附件：</label>
+				<div class="col-sm-10">
+					<input id="fileinput" type="file" name="files" class="file-loading" multiple/>
+				</div>
+			</div>
 			<div class="form-group">
 				<label class="col-sm-2 control-label">公告状态：</label>
 				<div class="col-sm-10">
@@ -40,10 +47,15 @@
 		</form>
 	</div>
     <th:block th:include="include :: footer" />
+	<th:block th:include="include :: bootstrap-fileinput-js" />
     <th:block th:include="include :: summernote-js" />
     <script type="text/javascript">
         var prefix = ctx + "system/notice";
 
+		$(function (){
+			uploadFiles();
+		})
+
 	    $('.summernote').summernote({
 	    	placeholder: '请输入公告内容',
 			height : 192,
@@ -87,11 +99,76 @@
 		
 		function submitHandler() {
 	        if ($.validate.form()) {
-	        	var sHTML = $('.summernote').summernote('code');
+				if($("#fileinput").fileinput('getFilesCount') > 0){
-				$("#noticeContent").val(sHTML);
+					$('#fileinput').fileinput('upload');
-				$.operate.save(prefix + "/add", $('#form-notice-add').serialize());
+				}else{
+					var sHTML = $('.summernote').summernote('code');
+					$("#noticeContent").val(sHTML);
+					$.operate.save(prefix + "/add", $('#form-notice-add').serialize());
+				}
 	        }
 	    }
+
+		/** 上传附件 */
+		function uploadFiles() {
+			var filePreview = { fileList: null, previewRespDTOS: null }
+			initFile("fileinput", prefix + "/addNoticeFile", filePreview);
+		}
+
+		/** 初始化文件 */
+		function initFile(elementId, url, filePreview) {
+			var preview = filePreview.previewRespDTOS;
+
+			$("#" + elementId).fileinput({
+				'theme': 'explorer',
+				initialPreviewAsData: true,
+				dropZoneEnabled: true,
+				dropZoneTitle: "上传附件",
+				uploadUrl: url,
+				uploadAsync: true,//异步上传
+				enctype: 'multipart/form-data',
+				showClose: false,
+				showPreview: true,
+				showUpload: false,
+				// showBrowse: false,
+				previewFileIcon: '<i class="fas fa-file"></i>',
+				preferIconicPreview: true,
+				uploadExtraData: function () {
+					var sHTML = $('.summernote').summernote('code');
+					$("#noticeContent").val(sHTML);
+					var formData = $("#form-notice-add").serialize();
+					formData = decodeURIComponent(formData, true);
+					var arr = formData.split("&");
+					var data = {};
+					for (var i=0; i<arr.length; i++) {
+						var item = arr[i].split('=');
+						var value = item[1].replace("+", " ");
+						data[item[0]] = value;
+					}
+					return data;
+				},
+				layoutTemplates: {
+					// actionDelete: ''//去掉删除按钮
+					actionUpload: ''    // 去掉上传按钮
+				},
+				initialPreview: filePreview.fileList == null ? [] : filePreview.fileList,
+				initialPreviewConfig: preview == null ? [] : preview
+			});
+
+			$("#fileinput").on("fileuploaded", function(event, data, previewId, index) {
+				if (data.response.code === 0) {
+					$.modal.close();
+					var parent = window.parent;
+					parent.$.modal.msgSuccess(data.response.message);
+					parent.$.table.refresh();
+				} else {
+					// 清理文件输入控件
+					$('#fileinput').fileinput('clear');
+					$.modal.msgError(data.response.message);
+				}
+			});
+
+		}
 	</script>
 </body>
 </html>

lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/templates/system/notice/edit.html

@@ -3,6 +3,7 @@
 <head>
 	<th:block th:include="include :: header('修改通知公告')" />
 	<th:block th:include="include :: summernote-css" />
+    <th:block th:include="include :: bootstrap-fileinput-css"/>
 </head>
 <body class="white-bg">
     <div class="wrapper wrapper-content animated fadeInRight ibox-content">
@@ -29,6 +30,12 @@
                     <div id="editor" class="summernote"></div>
                 </div>
             </div>
+            <div class="form-group">
+                <label class="col-sm-2 control-label">附件：</label>
+                <div class="col-sm-10">
+                    <input id="fileinput" type="file" name="files" class="file-loading" multiple/>
+                </div>
+            </div>
             <div class="form-group">
 				<label class="col-sm-2 control-label">公告状态：</label>
 				<div class="col-sm-10">
@@ -41,9 +48,14 @@
 		</form>
     </div>
     <th:block th:include="include :: footer" />
+    <th:block th:include="include :: bootstrap-fileinput-js" />
     <th:block th:include="include :: summernote-js" />
     <script type="text/javascript">
         var prefix = ctx + "system/notice";
+
+        $(function (){
+            initFile();
+        })
     
 	    $(function() {
 		    $('.summernote').summernote({
@@ -90,13 +102,96 @@
 			focusCleanup: true
 		});
 		
-		function submitHandler() {
+		// function submitHandler() {
-	        if ($.validate.form()) {
+	    //     if ($.validate.form()) {
-	        	var sHTML = $('.summernote').summernote('code');
+	    //     	var sHTML = $('.summernote').summernote('code');
-				$("#noticeContent").val(sHTML);
+		// 		$("#noticeContent").val(sHTML);
-				$.operate.save(prefix + "/edit", $('#form-notice-edit').serialize());
+		// 		$.operate.save(prefix + "/edit", $('#form-notice-edit').serialize());
-	        }
+	    //     }
-	    }
+	    // }
+
+        function submitHandler() {
+            if ($.validate.form()) {
+                if($("#fileinput").fileinput('getFilesCount') > 0){
+                    $('#fileinput').fileinput('upload');
+                }else{
+                    var sHTML = $('.summernote').summernote('code');
+                    $("#noticeContent").val(sHTML);
+                    $.operate.save(prefix + "/edit", $('#form-notice-edit').serialize());
+                }
+            }
+        }
+
+        function initFile() {
+            $.ajax({
+                type: "POST",
+                url: prefix + "/queryFiles",
+                data: {"noticeId": $('#noticeId').val()},
+                dataType: 'json',
+                success: function (result) {
+                    if (result.success == true) {
+                        var filePreview = result.data.filePreview;
+                        var preview = filePreview.previewRespDTOS;
+                        if (preview != null) {
+                            for (var i = 0; i < preview.length; i++) {
+                                // 图片删除的地址
+                                preview[i].url = prefix + "/removeFile"
+                            }
+                        }
+                        $("#fileinput").fileinput({
+                            'theme': 'explorer',
+                            initialPreviewAsData: true,
+                            dropZoneEnabled: true,
+                            dropZoneTitle: "上传附件",
+                            uploadUrl: prefix + "/editNoticeFile",
+                            uploadAsync: false,//异步上传
+                            enctype: 'multipart/form-data',
+                            showClose: false,
+                            showPreview: true,
+                            showUpload: false,
+                            // showBrowse: false,
+                            previewFileIcon: '<i class="fas fa-file"></i>',
+                            preferIconicPreview: true,
+                            uploadExtraData: function () {
+                                var sHTML = $('.summernote').summernote('code');
+                                $("#noticeContent").val(sHTML);
+                                var formData = $("#form-notice-edit").serialize();
+                                formData = decodeURIComponent(formData, true);
+                                var arr = formData.split("&");
+                                var data = {};
+                                for (var i=0; i<arr.length; i++) {
+                                    var item = arr[i].split('=');
+                                    var value = item[1].replace("+", " ");
+                                    data[item[0]] = value;
+                                }
+                                return data;
+                            },
+                            layoutTemplates: {
+                                // actionDelete: ''//去掉删除按钮
+                                actionUpload: ''    // 去掉上传按钮
+                            },
+                            initialPreview: filePreview.fileList == null ? [] : filePreview.fileList,
+                            initialPreviewConfig: preview == null ? [] : preview
+                        });
+
+                        // 此事件仅在ajax上传且文件批量上传成功之后触发
+                        $("#fileinput").on("filebatchuploadsuccess", function (event, data, previewId, index) {
+                            if (data.response.code === 0) {
+                                $.modal.close();
+                                var parent = window.parent;
+                                parent.$.modal.msgSuccess(data.response.message);
+                                parent.$.table.refresh();
+                            } else {
+                                // 清理文件输入控件
+                                $('#fileinput').fileinput('clear');
+                                $.modal.msgError(data.message);
+                            }
+
+                        });
+                    }
+                }
+            })
+        }
 	</script>
 </body>
 </html>