update

2025-03-07 15:26:41 +08:00 · 2025-03-07 15:26:41 +08:00 · 05870256aa
commit 05870256aa
parent 896b54128d
8 changed files with 4704 additions and 153 deletions
--- a/default.json
+++ b/default.json
@ -5,8 +5,6 @@
  "list": [
    { "deptCode": "30800", "deptName": "VIP" },
    { "deptCode": "30900", "deptName": "口腔预防科" },
-    { "deptCode": "32100", "deptName": "科研实验室" },
-    { "deptCode": "32200", "deptName": "教学实验室" },
    { "deptCode": "32300", "deptName": "口腔全科" },
    { "deptCode": "30200", "deptName": "牙体牙髓科" },
    { "deptCode": "30300", "deptName": "儿童口腔科" },
@ -16,7 +14,6 @@
    { "deptCode": "30700", "deptName": "颌面外科门诊" },
    { "deptCode": "30100", "deptName": "牙周科" },
    { "deptCode": "31000", "deptName": "黏膜科" },
-    { "deptCode": "10700", "deptName": "院感科" },
    { "deptCode": "32400", "deptName": "急诊科" }
  ]
 }
--- a/index.html
+++ b/index.html
@ -4,20 +4,15 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码生成器</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
-    <link rel="stylesheet" href="style.css">
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>
+    <link rel="stylesheet" href="./semantic.min.css">
+    <link rel="stylesheet" href="./style.css">
+    <script src="./jquery.min.js"></script>
+    <script src="./semantic.min.js"></script>
+    <script src="./qrcode.min.js"></script>
 </head>
 <body>
    <div class="ui container">
-        <div class="ui basic center aligned segment">
-            <h2 class="ui blue header">
-                <i class="qrcode icon"></i>
-                <div class="content">二维码生成器</div>
-            </h2>
-        </div>
+        <h2 class="ui blue header center aligned">二维码生成器</h2>
        
        <div class="ui two column centered grid">
            <div class="column">
@ -25,34 +20,45 @@
                    <div class="content form-content">
                        <div class="ui form">
                            <div class="field">
-                                <label><i class="heading icon"></i>二维码标题</label>
-                                <div class="ui fluid input">
-                                    <input type="text" id="qrTitle" value="扫码签到">
+                                <label>二维码标题</label>
+                                <input type="text" id="qrTitle" value="扫码签到">
+                            </div>
+
+                            <div class="field">
+                                <label>选择预定义内容</label>
+                                <div class="ui fluid search selection dropdown" id="deptSelector">
+                                    <input type="hidden" name="department">
+                                    <div class="default text">选择或搜索科室</div>
+                                    <div class="menu"></div>
                                </div>
                            </div>

                            <div class="required field">
-                                <label><i class="edit icon"></i>输入内容</label>
+                                <label>输入内容</label>
                                <textarea id="qrContent" placeholder="请输入要生成二维码的内容"></textarea>
                            </div>

                            <div class="field">
-                                <label><i class="font icon"></i>底部文字</label>
+                                <label>底部文字</label>
                                <textarea id="centerText" placeholder="请输入要在二维码下方显示的文字"></textarea>
                            </div>

                            <div class="field button-container">
-                                <div class="ui two buttons">
-                                    <button class="ui primary labeled icon button" id="generateBtn">
-                                        <i class="sync icon"></i>
-                                        生成二维码
-                                    </button>
-                                    <button class="ui labeled icon button" id="printBtn">
-                                        <i class="print icon"></i>
-                                        打印二维码
-                                    </button>
+                                <div class="ui fluid buttons">
+                                    <button class="ui primary button" id="generateBtn">生成二维码</button>
+                                    <button class="ui button" id="printBtn">打印二维码</button>
                                </div>
                            </div>
+                            
+                            <div class="ui info message print-tips">
+                                <div class="header">打印设置建议</div>
+                                <ul class="list">
+                                    <li>纸张大小: A4</li>
+                                    <li>打印方式: 单面</li>
+                                    <li>缩放比例: 100%</li>
+                                    <li>边距: 无</li>
+                                </ul>
+                            </div>
                        </div>
                    </div>
                </div>
@ -71,7 +77,7 @@
            </div>
        </div>
    </div>
-    <!-- 打印专用容器 -->
+    
    <div id="print-container" class="print-only"></div>
    <script src="script.js"></script>
 </body>
--- a/jquery.min.js
+++ b/jquery.min.js
--- a/qrcode.min.js
+++ b/qrcode.min.js
--- a/script.js
+++ b/script.js
@ -1,10 +1,12 @@
 document.addEventListener("DOMContentLoaded", function () {
+    // 缓存DOM元素
    const qrContent = document.getElementById("qrContent");
    const qrTitle = document.getElementById("qrTitle");
    const centerText = document.getElementById("centerText");
    const generateBtn = document.getElementById("generateBtn");
    const printBtn = document.getElementById("printBtn");
    const qrcodeDiv = document.getElementById("qrcode");
+    const deptSelector = $('#deptSelector');

    // 初始化表单验证
    $('.ui.form').form({
@ -13,6 +15,52 @@ document.addEventListener("DOMContentLoaded", function () {
        }
    });

+    // 加载科室数据
+    fetch('default.json')
+        .then(response => response.json())
+        .then(data => {
+            // 填充科室下拉菜单
+            const menuItems = data.list.map(dept => 
+                `<div class="item" data-value="${dept.deptCode}" data-dept-name="${dept.deptName}">${dept.deptName}</div>`
+            ).join('');
+            
+            deptSelector.find('.menu').html(menuItems);
+            
+            // 初始化下拉菜单
+            deptSelector.dropdown({
+                onChange: function(value) {
+                    if (!value) return;
+                    
+                    const deptName = $(this).find(`.item[data-value="${value}"]`).attr('data-dept-name');
+                    
+                    // 生成URL
+                    let url = data.baseUrl;
+                    if (data.type === 'searchParams') {
+                        url += `?deptCode=${value}&deptName=${deptName}`;
+                    } else {
+                        url += `/${value}`;
+                    }
+                    qrContent.value = url;
+                    
+                    // 更新标题和底部文字
+                    if (!qrTitle.value.trim()) {
+                        qrTitle.value = data.title;
+                    }
+                    centerText.value = deptName;
+                    
+                    // 自动生成二维码
+                    generateQRCode();
+                }
+            });
+            
+            // 保存配置数据
+            window.configData = data;
+        })
+        .catch(error => {
+            console.error('加载科室数据失败:', error);
+            alert('加载科室数据失败，请刷新页面重试');
+        });
+
    // 生成按钮点击事件
    generateBtn.addEventListener("click", function() {
        if (!qrContent.value.trim()) {
@ -29,12 +77,9 @@ document.addEventListener("DOMContentLoaded", function () {
            return;
        }
        
-        // 确保二维码已经生成
        if (!qrcodeDiv.querySelector('canvas')) {
            generateQRCode();
-            setTimeout(() => {
-                preparePrintAndPrint();
-            }, 300);
+            setTimeout(preparePrintAndPrint, 300);
        } else {
            preparePrintAndPrint();
        }
@ -48,7 +93,6 @@ document.addEventListener("DOMContentLoaded", function () {
            return;
        }
        
-        // 准备打印内容
        const printContainer = document.getElementById('print-container');
        printContainer.innerHTML = '';
        
@ -65,7 +109,7 @@ document.addEventListener("DOMContentLoaded", function () {
        const textSize = 24;
        const padding = 40;
        
-        // 计算文字行数
+        // 计算文字行数和高度
        const textLines = text ? text.split('\n').length : 0;
        const textHeight = textLines * textSize * 1.5;
        
@ -120,10 +164,7 @@ document.addEventListener("DOMContentLoaded", function () {
                    });
                }
                
-                // 添加到打印容器
                printContainer.appendChild(printCanvas);
-                
-                // 开始打印
                window.print();
                
            } catch (err) {
@ -145,15 +186,15 @@ document.addEventListener("DOMContentLoaded", function () {
        const qrWidth = Math.min(containerWidth * 0.9, containerHeight * 0.7);
        
        // 文字大小
-        const titleSize = Math.max(24, Math.floor(qrWidth * 0.06));
-        const textSize = Math.max(18, Math.floor(qrWidth * 0.05));
-        const padding = Math.floor(qrWidth * 0.08);
+        const titleSize = Math.max(24, Math.floor(qrWidth * .06));
+        const textSize = Math.max(18, Math.floor(qrWidth * .05));
+        const padding = Math.floor(qrWidth * .08);
        
        const title = qrTitle.value.trim();
        const text = centerText.value.trim();
        
        // 计算二维码实际大小
-        const qrImageSize = Math.min(qrWidth * 0.8, containerHeight * 0.6);
+        const qrImageSize = Math.min(qrWidth * .8, containerHeight * .6);
        
        // 计算高度
        const titleHeight = title ? titleSize + padding : 0;
@ -214,7 +255,6 @@ document.addEventListener("DOMContentLoaded", function () {
                });
            }
            
-            // 添加到DOM
            qrcodeDiv.appendChild(canvas);
        }, 100);
    }
--- a/semantic.min.css
+++ b/semantic.min.css
--- a/semantic.min.js
+++ b/semantic.min.js
--- a/style.css
+++ b/style.css
@ -3,7 +3,82 @@ body {
    padding: 2em 0;
 }

-/* 模拟 A4 纸比例 (1:1.414, 即 210mm:297mm) */
+/* 布局 */
+.ui.two.column.grid > .column {
+    display: flex;
+}
+
+.ui.fluid.card {
+    width: 100%;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.ui.card .content {
+    min-height: 400px;
+    display: flex;
+    padding: 1em !important;
+    flex-grow: 1;
+}
+
+/* 表单样式 */
+.form-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.ui.form {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.ui.form .field {
+    margin-bottom: 1em;
+}
+
+.ui.form textarea {
+    min-height: 80px;
+    resize: vertical;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    word-break: normal;
+    overflow-wrap: break-word;
+    line-height: 1.5;
+}
+
+#qrContent, #centerText {
+    font-family: "Helvetica Neue", Arial, sans-serif;
+}
+
+/* 按钮容器 */
+.button-container {
+    margin-top: auto !important;
+    padding: 0 !important;
+    width: 100%;
+}
+
+/* 使用 Semantic UI 标准按钮组 */
+.ui.fluid.buttons {
+    width: 100%;
+    margin: 0 !important;
+}
+
+.ui.fluid.buttons .button {
+    width: 50%;
+}
+
+#printBtn {
+    border: 1px solid #e0e1e2 !important;
+    background-color: #f8f9fa !important;
+}
+
+#printBtn:hover {
+    background-color: #e9ecef !important;
+}
+
+/* 预览区域 */
 .preview-paper {
    background-color: white;
    width: 100%;
@ -32,7 +107,7 @@ body {
    display: flex;
    align-items: center;
    justify-content: center;
-    overflow: visible; /* 允许内容溢出 */
+    overflow: visible;
 }

 #qrcode canvas {
@ -41,109 +116,11 @@ body {
    object-fit: contain;
 }

-/* 确保左右卡片内容区域高度一致 */
-.ui.card .content {
-    min-height: 400px;
-    display: flex;
-    padding: 1em !important;
-}
-
-/* 确保左右卡片高度一致 */
-.ui.two.column.grid > .column {
-    display: flex;
-}
-
-.ui.fluid.card {
-    width: 100%;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-}
-
-.ui.card > .content {
-    flex-grow: 1;
-}
-
-/* 右侧卡片内容区适应 A4 比例 */
-.preview-card .content {
-    padding: 1em !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-/* 输入区样式优化 */
-.form-content {
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 1em !important;
-}
-
-.ui.form {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.ui.form .field {
-    margin-bottom: 1em;
-}
-
-.ui.form textarea {
-    min-height: 80px;
-    resize: vertical;
-}
-
-/* 自动拉伸中间区域 */
-.ui.form .field:nth-child(2) textarea {
-    flex-grow: 2;
-}
-
-/* 优化按钮间距与布局 */
-.button-fields {
-    margin-top: auto !important;
-    margin-bottom: 0 !important;
-}
-
-.button-fields .field {
-    padding: 0 !important;
-    margin-bottom: 0.75em !important; /* 增加了按钮间间距 */
-}
-
-.button-fields .field:last-child {
-    margin-bottom: 0 !important;
-}
-
-/* 优化按钮容器 */
-.button-container {
-    margin-top: auto !important;
-    padding: 0 !important;
-}
-
-/* 按钮间距调整 */
-.ui.two.buttons {
-    gap: 10px; /* 增加按钮之间的间距 */
-    display: flex;
-}
-
-/* 确保按钮宽度相等 */
-.ui.two.buttons .button {
-    margin: 0 !important;
-    flex: 1;
-}
-
-/* 为打印按钮添加一点视觉区分 */
-#printBtn {
-    box-shadow: none !important;
-    border: 1px solid #e0e1e2 !important;
-    background-color: #f8f9fa !important;
-}
-
-#printBtn:hover {
-    background-color: #e9ecef !important;
-}
-
 /* 打印样式 */
+#print-container {
+    display: none;
+}
+
@media print {
    @page {
        size: A4 portrait;
@ -162,7 +139,6 @@ body {
        display: none !important;
    }
    
-    /* 显示打印容器 */
    #print-container {
        display: block !important;
        position: fixed;
@ -184,8 +160,3 @@ body {
        height: auto !important;
    }
 }
-
-/* 打印专用容器（正常不显示） */
-#print-container {
-    display: none;
-}