前言

• 若依(ruoyi)： v4.3
• 360极速浏览器 12.0.1550.0 (正式版本) （32 位）
• 操作系统 Windows 10 OS Version 2004 (Build 19041.572)
• JavaScript V8 7.8.279.23
• jQuery v2.1.4

表格图片预览功能

若依(ruoyi)自带了一个表格图片预览功能。该功能可以在示例演示>表格>表格图片预览功能中找到。

表格图片预览功能图片超宽问题

表格图片预览功能遇到超宽图片（比如屏幕宽度1024px，图片宽度为1800px）时，图片会将弹出层撑宽至与图片同宽（只有设定图片宽度是auto时，才会出现此问题）。这时，将无法看到关闭按钮，也就无法关闭图片预览功能。

表格图片预览功能图片超宽时，改为指定图片宽度

表格图片预览功能图片超宽时，将图片宽度指定一个小于当前窗口的宽度值，这样就可以看到关闭按钮，或者看到部分留白（点击留白部分也可以关闭图片预览）。

找到ry-ui.js，在其中找到下面部分的代码：

// 图片预览事件
$(optionsIds).off("click").on("click", '.img-circle', function() {
    var src = $(this).attr('src');
    var target = $(this).data('target');
    if($.common.equals("self", target)) {
        var height = $(this).data('height');
		var width = $(this).data('width');
		// 如果是移动端，就使用自适应大小弹窗
		if ($.common.isMobile()) {
			width = 'auto';
			height = 'auto';
		}
        layer.open({
    		id: "div_img",
 			title: false,
 			type: 1,
 			closeBtn: true,
 			shadeClose: true,
 			area: ['auto', 'auto'],
 			content: "<img src='" + src + "' height='" + height + "' width='" + width + "'/>",
 		});
	} else if ($.common.equals("blank", target)) {
	    window.open(src);
	}
});

在上面的代码中添加success回调函数，添加后代码如下：

// 图片预览事件
$(optionsIds).off("click").on("click", '.img-circle', function() {
    var src = $(this).attr('src');
    var target = $(this).data('target')||"self";
    if($.common.equals("self", target)) {
        var height = $(this).data('height')||"auto";
		var width = $(this).data('width')||"auto";
		// 如果是移动端，就使用自适应大小弹窗
		if ($.common.isMobile()) {
			width = 'auto';
			height = 'auto';
		}
        layer.open({
    		id: "div_img", /* 给个固定的ID，方便后面查找元素 */
 			title: false,
 			type: 1,
 			closeBtn: true, /* 关闭按钮 */
 			shadeClose: true, /* 点击阴影区域关闭弹窗 */
 			area: ['auto', 'auto'],
 			content: "<img src='" + src + "' height='" + height + "' width='" + width + "'/>",
 			success: function(layero, index){
 			    // 图片加载完成后，再次处理图片宽度
        	    $('#div_img > img', layero).load(function(){
        	        // 获取图片宽和高
        		    let imgElement = $('#div_img > img', layero);
        			let imgWidth = imgElement.width();
        			let imgHeight = imgElement.height();
        			
        			// 获取 mainContent 宽和高。若依中，多数情况下页面嵌套页面。        		
        			let mainContent = $('#content-main', window.parent.document);
        			if (mainContent.length<=0) {
        			    /* 修正mainContent：如果在新窗口中打开链接时，没有父级窗口 */
        				mainContent = $(window);
        			}
        			let mainContentWidth = mainContent.width();
        			let mainContentHeight = mainContent.height();

        			/* 计算图片的宽度 */
        			let newImgWidth = imgWidth;
        			/* 图片超宽时，将图片的宽度设置为当前窗口的95%。图片高度auto */
        			if (imgWidth > mainContentWidth*0.95) {
        				newImgWidth = mainContentWidth*0.95;
        			}
        			/* 图片超高时，计算一个让图片不超高的宽度。图片高度auto */
        			if (imgHeight > mainContentHeight*0.95) {
        				let tmpNewImgWidth = imgWidth*(mainContentHeight*0.95/imgHeight);
        				if (newImgWidth > tmpNewImgWidth) {
        					newImgWidth = tmpNewImgWidth;
        				}
        			}
        			
        			// 重设图片的宽和高
       			    // 图片容器的高度设置为auto，不设置时，该容器的高度为固定值
       			    $("#div_img", layero).height('auto');
       			    // 指定图片的宽度
       			    $("#div_img > img", layero).attr({width: newImgWidth });
       			    // 很重要。触发窗口的 resize 事件，让 layer 调整位置。
       			    $(window).resize();
        		});
        	}
 		});
	} else if ($.common.equals("blank", target)) {
	    window.open(src);
	}
});

参考

https://www.w3school.com.cn/jquery/event_resize.asp
https://www.cnblogs.com/ymy124/p/4538695.html
https://www.w3school.com.cn/jquery/attributes_attr.asp
https://www.w3school.com.cn/jquery/css_height.asp
https://www.w3school.com.cn/jquery/css_width.asp