检测报告管理

src/main/resources/static/js/tools/toolsMge.js

@@ -1,6 +1,9 @@
 let form, layer,  table, tableIns;
 let pageNum = 1, limitSize = 10; // 默认第一页，分页数量为10
 let orgData,selectOrgId;
+var modal = $('#myModal');
+var span = $('.close');
+var printButton = $('#PrintButton');
 
 layui.use(['form', 'layer', 'table', 'laydate'], function () {
     form = layui.form;
@@ -102,7 +105,7 @@ function initTable(dataList, limit, page) {
                 },
                 {
                     field: "qrCode", title: "二维码", width: '6%', unresize: true, align: "center", templet: function (d) {
-                        return '<a href="#" style="color: blue;" onclick="handleClick2(\'' + d + '\')">打印</a>';
+                        return '<a href="#" style="color: blue;" onclick="handleClick2(\'' + d.submitLocation + '\',\'' + d.sampleTools + '\',\'' + d.devModule + '\',\'' + d.devCode + '\',\'' + d.experTime + '\',\'' + d.nextExperTime + '\',\'' + d.experUser + '\',\'' + d.experConclu + '\',\'' + d.customName + '\')">打印</a>';
                     }
                 },
                 // {title: "操作", unresize: true, width: 85, align: "center",
@@ -146,29 +149,52 @@ function handleClick1(submitLocation,sampleTools,devModule,devCode,experTime,nex
     openIframe2("addOrEditUser", title, "child/certificateView.html", '30%', '70%', param);
 }
 
-function handleClick2(view1) {
+/**
-    alert('Clicked on: ' + view1);
+ * 打印二维码
+ */
+function handleClick2(submitLocation,sampleTools,devModule,devCode,experTime,nextExperTime,experUser,experConclu,customName) {
     // 准备二维码内容
     const qrCodeData = {
-        "样品名称": "安全帽",
+        "样品名称": sampleTools,
-        "规格型号": "普通款",
+        "规格型号": devModule,
-        "样品编号": "0001",
+        "样品编号": devCode,
-        "检验日期": "2024-07-21",
+        "检验日期": experTime,
-        "下次检验日期": "2024-09-30",
+        "下次检验日期": nextExperTime,
-        "试验人员": "admin",
+        "试验人员": experUser,
-        "试验结果": "试验结论",
+        "试验结果": experConclu,
-        "送检单位": "单位"
+        "送检单位": customName
     };
     // 将对象转换为字符串
-    const qrCodeString = JSON.stringify(qrCodeData, null, 2); // 使 JSON 字符串更易读
+    const qrCodeString = JSON.stringify(qrCodeData, null, 2);
     // 清空二维码容器
     $('#Qrcode').empty();
     // 生成二维码
     $('#Qrcode').qrcode(utf16to8(qrCodeString));
-    // 打印二维码
+    // 显示模态对话框
-    printQRCode();
+    modal.show();
+    // // 打印二维码
+    // printQRCode();
+    window.print();
 }
 
+// 关闭模态对话框
+span.click(function() {
+    modal.hide();
+});
+
+// 点击模态对话框外部区域也可以关闭模态对话框
+$(window).click(function(event) {
+    if ($(event.target).is(modal)) {
+        modal.hide();
+    }
+});
+
+// 打印二维码
+printButton.click(function() {
+    // 使用浏览器的打印功能打印二维码
+    window.print();
+});
+
 function utf16to8(str) {
     var out, i, len, c;
     out = "";
@@ -189,11 +215,6 @@ function utf16to8(str) {
     return out;
 }
 
-function printQRCode() {
-    // 使用浏览器的打印功能打印页面
-    window.print();
-}
-
 // 获取参数
 function getReqParams(page, limit, type) {
     var selectedValue =$('#sampleTools').val()

src/main/resources/static/pages/tools/toolsMge.html

@@ -40,12 +40,7 @@
                 <div class="layui-inline btns">
                     <button type="button" class="layui-btn layui-btn-normal layui-btn-sm btn-1" onclick="query(1)">查询
                     </button>
-<!--                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm btn-2"-->
+                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm btn-1" onclick="downloads()"><i class="layui-icon layui-icon-download-circle" style="font-size: 24px;"></i></button>
-<!--                            onclick="addData(null)">-->
-<!--                        <div class="layout" style="justify-content: space-around;"><img-->
-<!--                                src="../../img/form/add_icon3.png">-->
-<!--                            <p>新增</p></div>-->
-<!--                    </button>-->
                 </div>
             </div>
         </form>
@@ -54,13 +49,57 @@
         <table id="table_data" class="table" lay-filter="table_data"></table>
         <div id="voi-page" class="layout"></div>
     </div>
+</div>
+<!-- 模态对话框 -->
+<div id="myModal" class="modal" style="text-align: center;">
+    <div style="width: 380px; margin-left: 30%; margin-top: 11%">
+        <div class="modal-content">
             <div id="Qrcode"></div>
         </div>
+    </div>
+
+</div>
 </body>
 <style>
     .layui-table-init {
         background-color: transparent !important;
     }
+
+    #Qrcode {
+        margin-top: 20px;
+    }
+    /* 模态对话框样式 */
+    .modal {
+        display: none;
+        position: fixed;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgb(0,0,0);
+        background-color: rgba(0,0,0,0.4);
+    }
+    .modal-content {
+        background-color: #fefefe;
+        margin: 15% auto;
+        padding: 20px;
+        border: 1px solid #888;
+        width: 80%;
+    }
+    .close {
+        color: #aaa;
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+    }
+    .close:hover,
+    .close:focus {
+        color: black;
+        text-decoration: none;
+        cursor: pointer;
+    }
 </style>
 
 <script src="../../js/tools/toolsMge.js" charset="UTF-8" type="text/javascript"></script>