添加图片预览imageView方法

ruoyi-admin/src/main/resources/static/ruoyi/css/ry-ui.css

@@ -49,7 +49,22 @@
 .ml20 {
 	margin-left: 20px;
 }
-
+.img-xs {
+  width: 32px;
+  height: 32px;
+}
+.img-sm {
+  width: 64px;
+  height: 64px;
+}
+.img-md {
+  width: 96px;
+  height: 96px;
+}
+.img-lg {
+  width: 120px;
+  height: 120px;
+}
 .section-content {
     min-height: 250px;
     margin-right: auto;

ruoyi-admin/src/main/resources/static/ruoyi/js/common.js

@@ -139,6 +139,12 @@ $(function() {
 	    }
 	    expandFlag = expandFlag ? false: true;
 	})
+	// 按下ESC按钮关闭弹层
+	$('body', document).on('keyup', function(e) {
+	    if (e.which === 27) {
+	        $.modal.closeAll();
+	    }
+	});
 });
 
 /** 刷新选项卡 */

ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js

@@ -131,6 +131,23 @@
             			selectionIds = _[func](selectionIds, rowIds);
             		}
             	});
+            	// 图片预览事件
+            	$("#" + $.table._option.id).on('click', '.img-circle', function() {
+    			    var src = $(this).attr('src');
+    			    var target = $(this).data('target');
+    			    if($.common.equals("self", target)) {
+    			    	layer.open({
+        			        title: false,
+        			        type: 1,
+        			        closeBtn: false,
+        			        shadeClose: true,
+        			        area: ['auto', 'auto'],
+        			        content: "<img src='" + src + "' />"
+        			    });
+    			    } else if ($.common.equals("blank", target)) {
+    			        window.open(src);
+    			    }
+    			});
             },
             // 当所有数据被加载时触发
             onLoadSuccess: function(data) {
@@ -174,6 +191,17 @@
 				actions.push('</div>');
 				return actions.join('');
 			},
+			// 图片预览
+			imageView: function (value, path, target) {
+				var _path = $.common.isEmpty(path) ? '/profile/upload' : path;
+				// blank or self
+				var _target = $.common.isEmpty(target) ? 'self' : target;
+				if ($.common.isNotEmpty(value)) {
+					return $.common.sprintf("<img class='img-circle img-xs' data-target='%s' src='%s/%s'/>", _target, _path, value);
+				} else {
+					return $.common.nullToStr(value);
+				}
+			},
             // 搜索-默认第一个form
             search: function(formId) {
             	var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;

ruoyi-admin/src/main/resources/templates/system/user/profile/profile.html

@@ -19,7 +19,7 @@
                 </div>
                 <div class="ibox-content">
                     <div class="text-center">
-                        <p><img width="120" height="120" th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{/profile/avatar/} + ${user.avatar}"></p>
+                        <p><img class="img-circle img-lg" th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{/profile/avatar/} + ${user.avatar}"></p>
                         <p><a href="javascript:avatar()">修改头像</a></p>
                     </div>
                     <ul class="list-group list-group-striped">