添加报销单图片展示

src/main/webapp/webpage/modules/workreimbursement/treeForm/all/workReimbursementAllFormAdd.jsp

@@ -2345,6 +2345,7 @@
                     </div>
                     <h2>基础信息
                         <span style="color: red;font-size: 14px"> （每个报销流程仅针对一张白色或蓝色报销单。提交报销单时需要将报销编号书写在报销单右上角处，流程生成后可在列表中查看报销编号）</span>
+                        <i id="previewIcon" class="layui-icon" style="font-size: 16px; color: #fec25c;cursor: pointer;">&#xe702;</i>
                     </h2>
                 </div>
                     <%--<div class="layui-item layui-col-sm6">
@@ -2692,6 +2693,77 @@
                             reimbursementVATTaxesRowIdx = ${fn:length(workReimbursement.reimbursementVATTaxes)};
                         }
                         $(document).ready(function() {
+                            layui.use(['layer'], function () {
+                                const layer = layui.layer;
+
+                                const basePath = '${pageContext.request.contextPath}';
+                                const images = [
+                                    basePath + '/webpage/modules/workreimbursement/treeForm/ReimbursementFormImg/reimbursement1.png',
+                                    basePath + '/webpage/modules/workreimbursement/treeForm/ReimbursementFormImg/reimbursement2.png'
+                                ];
+
+                                let currentIndex = 0;
+
+                                document.getElementById("previewIcon").onclick = function () {
+                                    openImageLayer(currentIndex);
+                                };
+
+                                function openImageLayer(index) {
+                                    let img = new Image();
+                                    img.src = images[index];
+
+                                    img.onload = function () {
+                                        layer.open({
+                                            type: 1,
+                                            title: '报销单图片预览',
+                                            shadeClose: true,
+                                            area: ['900px', 'auto'],
+                                            content:
+                                                '<div style="padding:0; position:relative;">' +
+
+                                                // 上一张
+                                                '<div id="prevBtn" style="' +
+                                                'position:absolute; left:10px; top:50%; transform:translateY(-50%);' +
+                                                'background:rgba(0,0,0,0.3); color:#fff; padding:8px 12px; border-radius:6px;' +
+                                                'cursor:pointer; user-select:none;">上一张</div>' +
+
+                                                // 图片
+                                                '<img id="previewImage" src="' + img.src + '" ' +
+                                                'style="width:100%;display:block;max-height:80vh;object-fit:contain;">' +
+
+                                                // 下一张
+                                                '<div id="nextBtn" style="' +
+                                                'position:absolute; right:10px; top:50%; transform:translateY(-50%);' +
+                                                'background:rgba(0,0,0,0.3); color:#fff; padding:8px 12px; border-radius:6px;' +
+                                                'cursor:pointer; user-select:none;">下一张</div>' +
+
+                                                '</div>',
+
+                                            success: function () {
+                                                document.getElementById("prevBtn").onclick = function () {
+                                                    currentIndex = (currentIndex - 1 + images.length) % images.length;
+                                                    updateImage();
+                                                };
+
+                                                document.getElementById("nextBtn").onclick = function () {
+                                                    currentIndex = (currentIndex + 1) % images.length;
+                                                    updateImage();
+                                                };
+                                            }
+                                        });
+                                    };
+                                }
+
+                                function updateImage() {
+                                    let img = new Image();
+                                    img.src = images[currentIndex];
+
+                                    img.onload = function () {
+                                        document.getElementById("previewImage").src = img.src;
+                                    };
+                                }
+                            });
+
                             <%--var data = ${fns:toJson(workReimbursement.createBy)};--%>
                             <%--addRow('#workAccountList', workAccountListRowIdx, workAccountListTpl,data,true );--%>
                             /*var data = ${fns:toJson(workReimbursement.reimbursementVATTaxes)};

src/main/webapp/webpage/modules/workreimbursement/treeForm/all/workReimbursementAllModifyApply.jsp

@@ -2332,6 +2332,7 @@
                     </div>
                     <h2>基础信息
                         <span style="color: red;font-size: 14px"> （每个报销流程仅针对一张白色或蓝色报销单。提交报销单时需要将报销编号书写在报销单右上角处，流程生成后可在列表中查看报销编号）</span>
+                        <i id="previewIcon" class="layui-icon" style="font-size: 16px; color: #fec25c;cursor: pointer;">&#xe702;</i>
                     </h2>
                 </div>
                     <%--<div class="layui-item layui-col-sm6">
@@ -2679,6 +2680,77 @@
                             reimbursementVATTaxesRowIdx = ${fn:length(workReimbursement.reimbursementVATTaxes)};
                         }
                         $(document).ready(function() {
+                            layui.use(['layer'], function () {
+                                const layer = layui.layer;
+
+                                const basePath = '${pageContext.request.contextPath}';
+                                const images = [
+                                    basePath + '/webpage/modules/workreimbursement/treeForm/ReimbursementFormImg/reimbursement1.png',
+                                    basePath + '/webpage/modules/workreimbursement/treeForm/ReimbursementFormImg/reimbursement2.png'
+                                ];
+
+                                let currentIndex = 0;
+
+                                document.getElementById("previewIcon").onclick = function () {
+                                    openImageLayer(currentIndex);
+                                };
+
+                                function openImageLayer(index) {
+                                    let img = new Image();
+                                    img.src = images[index];
+
+                                    img.onload = function () {
+                                        layer.open({
+                                            type: 1,
+                                            title: '报销单图片预览',
+                                            shadeClose: true,
+                                            area: ['900px', 'auto'],
+                                            content:
+                                                '<div style="padding:0; position:relative;">' +
+
+                                                // 上一张
+                                                '<div id="prevBtn" style="' +
+                                                'position:absolute; left:10px; top:50%; transform:translateY(-50%);' +
+                                                'background:rgba(0,0,0,0.3); color:#fff; padding:8px 12px; border-radius:6px;' +
+                                                'cursor:pointer; user-select:none;">上一张</div>' +
+
+                                                // 图片
+                                                '<img id="previewImage" src="' + img.src + '" ' +
+                                                'style="width:100%;display:block;max-height:80vh;object-fit:contain;">' +
+
+                                                // 下一张
+                                                '<div id="nextBtn" style="' +
+                                                'position:absolute; right:10px; top:50%; transform:translateY(-50%);' +
+                                                'background:rgba(0,0,0,0.3); color:#fff; padding:8px 12px; border-radius:6px;' +
+                                                'cursor:pointer; user-select:none;">下一张</div>' +
+
+                                                '</div>',
+
+                                            success: function () {
+                                                document.getElementById("prevBtn").onclick = function () {
+                                                    currentIndex = (currentIndex - 1 + images.length) % images.length;
+                                                    updateImage();
+                                                };
+
+                                                document.getElementById("nextBtn").onclick = function () {
+                                                    currentIndex = (currentIndex + 1) % images.length;
+                                                    updateImage();
+                                                };
+                                            }
+                                        });
+                                    };
+                                }
+
+                                function updateImage() {
+                                    let img = new Image();
+                                    img.src = images[currentIndex];
+
+                                    img.onload = function () {
+                                        document.getElementById("previewImage").src = img.src;
+                                    };
+                                }
+                            });
+
                             <%--var data = ${fns:toJson(workReimbursement.createBy)};--%>
                             <%--addRow('#workAccountList', workAccountListRowIdx, workAccountListTpl,data,true );--%>
                             /*var data = ${fns:toJson(workReimbursement.reimbursementVATTaxes)};

src/main/webapp/webpage/modules/workreimbursement/treeForm/new/workReimbursementNewFormAdd.jsp

@@ -2352,6 +2352,7 @@
                     </div>
                     <h2>基础信息
                         <span style="color: red;font-size: 14px"> （每个报销流程仅针对一张白色或蓝色报销单。提交报销单时需要将报销编号书写在报销单右上角处，流程生成后可在列表中查看报销编号）</span>
+                        <i id="previewIcon" class="layui-icon" style="font-size: 16px; color: #fec25c;cursor: pointer;">&#xe702;</i>
                     </h2>
                 </div>
                     <%--<div class="layui-item layui-col-sm6">
@@ -2699,6 +2700,78 @@
                             reimbursementVATTaxesRowIdx = ${fn:length(workReimbursement.reimbursementVATTaxes)};
                         }
                         $(document).ready(function() {
+                            layui.use(['layer'], function () {
+                                const layer = layui.layer;
+
+                                const basePath = '${pageContext.request.contextPath}';
+                                const images = [
+                                    basePath + '/webpage/modules/workreimbursement/treeForm/ReimbursementFormImg/reimbursement1.png',
+                                    basePath + '/webpage/modules/workreimbursement/treeForm/ReimbursementFormImg/reimbursement2.png'
+                                ];
+
+                                let currentIndex = 0;
+
+                                document.getElementById("previewIcon").onclick = function () {
+                                    openImageLayer(currentIndex);
+                                };
+
+                                function openImageLayer(index) {
+                                    let img = new Image();
+                                    img.src = images[index];
+
+                                    img.onload = function () {
+                                        layer.open({
+                                            type: 1,
+                                            title: '报销单图片预览',
+                                            shadeClose: true,
+                                            area: ['900px', 'auto'],
+                                            content:
+                                                '<div style="padding:0; position:relative;">' +
+
+                                                // 上一张
+                                                '<div id="prevBtn" style="' +
+                                                'position:absolute; left:10px; top:50%; transform:translateY(-50%);' +
+                                                'background:rgba(0,0,0,0.3); color:#fff; padding:8px 12px; border-radius:6px;' +
+                                                'cursor:pointer; user-select:none;">上一张</div>' +
+
+                                                // 图片
+                                                '<img id="previewImage" src="' + img.src + '" ' +
+                                                'style="width:100%;display:block;max-height:80vh;object-fit:contain;">' +
+
+                                                // 下一张
+                                                '<div id="nextBtn" style="' +
+                                                'position:absolute; right:10px; top:50%; transform:translateY(-50%);' +
+                                                'background:rgba(0,0,0,0.3); color:#fff; padding:8px 12px; border-radius:6px;' +
+                                                'cursor:pointer; user-select:none;">下一张</div>' +
+
+                                                '</div>',
+
+                                            success: function () {
+                                                document.getElementById("prevBtn").onclick = function () {
+                                                    currentIndex = (currentIndex - 1 + images.length) % images.length;
+                                                    updateImage();
+                                                };
+
+                                                document.getElementById("nextBtn").onclick = function () {
+                                                    currentIndex = (currentIndex + 1) % images.length;
+                                                    updateImage();
+                                                };
+                                            }
+                                        });
+                                    };
+                                }
+
+                                function updateImage() {
+                                    let img = new Image();
+                                    img.src = images[currentIndex];
+
+                                    img.onload = function () {
+                                        document.getElementById("previewImage").src = img.src;
+                                    };
+                                }
+                            });
+
+
                             <%--var data = ${fns:toJson(workReimbursement.createBy)};--%>
                             <%--addRow('#workAccountList', workAccountListRowIdx, workAccountListTpl,data,true );--%>
                             <%--workAccountListRowIdx = workAccountListRowIdx + 1;--%>

src/main/webapp/webpage/modules/workreimbursement/treeForm/new/workReimbursementNewModifyApply.jsp

@@ -2329,6 +2329,7 @@
                     </div>
                     <h2>基础信息
                         <span style="color: red;font-size: 14px"> （每个报销流程仅针对一张白色或蓝色报销单。提交报销单时需要将报销编号书写在报销单右上角处，流程生成后可在列表中查看报销编号）</span>
+                        <i id="previewIcon" class="layui-icon" style="font-size: 16px; color: #fec25c;cursor: pointer;">&#xe702;</i>
                     </h2>
                 </div>
                     <%--<div class="layui-item layui-col-sm6">
@@ -2676,6 +2677,77 @@
                             reimbursementVATTaxesRowIdx = ${fn:length(workReimbursement.reimbursementVATTaxes)};
                         }
                         $(document).ready(function() {
+                            layui.use(['layer'], function () {
+                                const layer = layui.layer;
+
+                                const basePath = '${pageContext.request.contextPath}';
+                                const images = [
+                                    basePath + '/webpage/modules/workreimbursement/treeForm/ReimbursementFormImg/reimbursement1.png',
+                                    basePath + '/webpage/modules/workreimbursement/treeForm/ReimbursementFormImg/reimbursement2.png'
+                                ];
+
+                                let currentIndex = 0;
+
+                                document.getElementById("previewIcon").onclick = function () {
+                                    openImageLayer(currentIndex);
+                                };
+
+                                function openImageLayer(index) {
+                                    let img = new Image();
+                                    img.src = images[index];
+
+                                    img.onload = function () {
+                                        layer.open({
+                                            type: 1,
+                                            title: '报销单图片预览',
+                                            shadeClose: true,
+                                            area: ['900px', 'auto'],
+                                            content:
+                                                '<div style="padding:0; position:relative;">' +
+
+                                                // 上一张
+                                                '<div id="prevBtn" style="' +
+                                                'position:absolute; left:10px; top:50%; transform:translateY(-50%);' +
+                                                'background:rgba(0,0,0,0.3); color:#fff; padding:8px 12px; border-radius:6px;' +
+                                                'cursor:pointer; user-select:none;">上一张</div>' +
+
+                                                // 图片
+                                                '<img id="previewImage" src="' + img.src + '" ' +
+                                                'style="width:100%;display:block;max-height:80vh;object-fit:contain;">' +
+
+                                                // 下一张
+                                                '<div id="nextBtn" style="' +
+                                                'position:absolute; right:10px; top:50%; transform:translateY(-50%);' +
+                                                'background:rgba(0,0,0,0.3); color:#fff; padding:8px 12px; border-radius:6px;' +
+                                                'cursor:pointer; user-select:none;">下一张</div>' +
+
+                                                '</div>',
+
+                                            success: function () {
+                                                document.getElementById("prevBtn").onclick = function () {
+                                                    currentIndex = (currentIndex - 1 + images.length) % images.length;
+                                                    updateImage();
+                                                };
+
+                                                document.getElementById("nextBtn").onclick = function () {
+                                                    currentIndex = (currentIndex + 1) % images.length;
+                                                    updateImage();
+                                                };
+                                            }
+                                        });
+                                    };
+                                }
+
+                                function updateImage() {
+                                    let img = new Image();
+                                    img.src = images[currentIndex];
+
+                                    img.onload = function () {
+                                        document.getElementById("previewImage").src = img.src;
+                                    };
+                                }
+                            });
+
                             <%--var data = ${fns:toJson(workReimbursement.createBy)};--%>
                             <%--addRow('#workAccountList', workAccountListRowIdx, workAccountListTpl,data,true );--%>
                             /*var data = ${fns:toJson(workReimbursement.reimbursementVATTaxes)};

src/main/webapp/webpage/modules/workreimbursement/treeForm/replenish/workReimbursementReplenishAudit.jsp

@@ -2320,6 +2320,7 @@
 					</div>
 					<h2>基础信息
 						<span style="color: red;font-size: 14px"> （每个报销流程仅针对一张白色或蓝色报销单。提交报销单时需要将报销编号书写在报销单右上角处，流程生成后可在列表中查看报销编号）</span>
+						<i id="previewIcon" class="layui-icon" style="font-size: 16px; color: #fec25c;cursor: pointer;">&#xe702;</i>
 					</h2>
 				</div>
 					<%--<div class="layui-item layui-col-sm6">
@@ -2665,6 +2666,77 @@
 							reimbursementVATTaxesRowIdx = ${fn:length(workReimbursement.reimbursementVATTaxes)};
 						}
 						$(document).ready(function() {
+							layui.use(['layer'], function () {
+								const layer = layui.layer;
+
+								const basePath = '${pageContext.request.contextPath}';
+								const images = [
+									basePath + '/webpage/modules/workreimbursement/treeForm/ReimbursementFormImg/reimbursement1.png',
+									basePath + '/webpage/modules/workreimbursement/treeForm/ReimbursementFormImg/reimbursement2.png'
+								];
+
+								let currentIndex = 0;
+
+								document.getElementById("previewIcon").onclick = function () {
+									openImageLayer(currentIndex);
+								};
+
+								function openImageLayer(index) {
+									let img = new Image();
+									img.src = images[index];
+
+									img.onload = function () {
+										layer.open({
+											type: 1,
+											title: '报销单图片预览',
+											shadeClose: true,
+											area: ['900px', 'auto'],
+											content:
+													'<div style="padding:0; position:relative;">' +
+
+													// 上一张
+													'<div id="prevBtn" style="' +
+													'position:absolute; left:10px; top:50%; transform:translateY(-50%);' +
+													'background:rgba(0,0,0,0.3); color:#fff; padding:8px 12px; border-radius:6px;' +
+													'cursor:pointer; user-select:none;">上一张</div>' +
+
+													// 图片
+													'<img id="previewImage" src="' + img.src + '" ' +
+													'style="width:100%;display:block;max-height:80vh;object-fit:contain;">' +
+
+													// 下一张
+													'<div id="nextBtn" style="' +
+													'position:absolute; right:10px; top:50%; transform:translateY(-50%);' +
+													'background:rgba(0,0,0,0.3); color:#fff; padding:8px 12px; border-radius:6px;' +
+													'cursor:pointer; user-select:none;">下一张</div>' +
+
+													'</div>',
+
+											success: function () {
+												document.getElementById("prevBtn").onclick = function () {
+													currentIndex = (currentIndex - 1 + images.length) % images.length;
+													updateImage();
+												};
+
+												document.getElementById("nextBtn").onclick = function () {
+													currentIndex = (currentIndex + 1) % images.length;
+													updateImage();
+												};
+											}
+										});
+									};
+								}
+
+								function updateImage() {
+									let img = new Image();
+									img.src = images[currentIndex];
+
+									img.onload = function () {
+										document.getElementById("previewImage").src = img.src;
+									};
+								}
+							});
+
 							<%--var data = ${fns:toJson(workReimbursement.createBy)};--%>
 							<%--addRow('#workAccountList', workAccountListRowIdx, workAccountListTpl,data,true );--%>
 							/*var data = ${fns:toJson(workReimbursement.reimbursementVATTaxes)};

src/main/webapp/webpage/modules/workreimbursement/treeForm/specific/workReimbursementSpecificModifyApply.jsp

@@ -2335,6 +2335,7 @@
                     </div>
                     <h2>基础信息
                         <span style="color: red;font-size: 14px"> （每个报销流程仅针对一张白色或蓝色报销单。提交报销单时需要将报销编号书写在报销单右上角处，流程生成后可在列表中查看报销编号）</span>
+                        <i id="previewIcon" class="layui-icon" style="font-size: 16px; color: #fec25c;cursor: pointer;">&#xe702;</i>
                     </h2>
                 </div>
                     <%--<div class="layui-item layui-col-sm6">
@@ -2682,6 +2683,77 @@
                             reimbursementVATTaxesRowIdx = ${fn:length(workReimbursement.reimbursementVATTaxes)};
                         }
                         $(document).ready(function() {
+                            layui.use(['layer'], function () {
+                                const layer = layui.layer;
+
+                                const basePath = '${pageContext.request.contextPath}';
+                                const images = [
+                                    basePath + '/webpage/modules/workreimbursement/treeForm/ReimbursementFormImg/reimbursement1.png',
+                                    basePath + '/webpage/modules/workreimbursement/treeForm/ReimbursementFormImg/reimbursement2.png'
+                                ];
+
+                                let currentIndex = 0;
+
+                                document.getElementById("previewIcon").onclick = function () {
+                                    openImageLayer(currentIndex);
+                                };
+
+                                function openImageLayer(index) {
+                                    let img = new Image();
+                                    img.src = images[index];
+
+                                    img.onload = function () {
+                                        layer.open({
+                                            type: 1,
+                                            title: '报销单图片预览',
+                                            shadeClose: true,
+                                            area: ['900px', 'auto'],
+                                            content:
+                                                '<div style="padding:0; position:relative;">' +
+
+                                                // 上一张
+                                                '<div id="prevBtn" style="' +
+                                                'position:absolute; left:10px; top:50%; transform:translateY(-50%);' +
+                                                'background:rgba(0,0,0,0.3); color:#fff; padding:8px 12px; border-radius:6px;' +
+                                                'cursor:pointer; user-select:none;">上一张</div>' +
+
+                                                // 图片
+                                                '<img id="previewImage" src="' + img.src + '" ' +
+                                                'style="width:100%;display:block;max-height:80vh;object-fit:contain;">' +
+
+                                                // 下一张
+                                                '<div id="nextBtn" style="' +
+                                                'position:absolute; right:10px; top:50%; transform:translateY(-50%);' +
+                                                'background:rgba(0,0,0,0.3); color:#fff; padding:8px 12px; border-radius:6px;' +
+                                                'cursor:pointer; user-select:none;">下一张</div>' +
+
+                                                '</div>',
+
+                                            success: function () {
+                                                document.getElementById("prevBtn").onclick = function () {
+                                                    currentIndex = (currentIndex - 1 + images.length) % images.length;
+                                                    updateImage();
+                                                };
+
+                                                document.getElementById("nextBtn").onclick = function () {
+                                                    currentIndex = (currentIndex + 1) % images.length;
+                                                    updateImage();
+                                                };
+                                            }
+                                        });
+                                    };
+                                }
+
+                                function updateImage() {
+                                    let img = new Image();
+                                    img.src = images[currentIndex];
+
+                                    img.onload = function () {
+                                        document.getElementById("previewImage").src = img.src;
+                                    };
+                                }
+                            });
+
                             <%--var data = ${fns:toJson(workReimbursement.createBy)};--%>
                             <%--addRow('#workAccountList', workAccountListRowIdx, workAccountListTpl,data,true );--%>
                             /*var data = ${fns:toJson(workReimbursement.reimbursementVATTaxes)};