完成打印缩放功能

src/views/contract/components/printPaymentForm.vue

@@ -510,7 +510,22 @@ export default {
       const inputs = element.getElementsByTagName('input')
       Array.from(inputs).forEach(input => {
         if (input.type === 'checkbox' || input.type === 'radio') {
-          // 跳过checkbox和radio，不替换，保持原样
+          if (input.type === 'radio') {
+            // 找到同组radio中被选中的
+            const name = input.name
+            const checkedRadio = element.querySelector(`input[type="radio"][name="${name}"]:checked`)
+            if (checkedRadio) {
+              // 找到包含radio组的td
+              const td = checkedRadio.closest('td')
+              if (td) {
+                // 找到隐藏的div
+                const hiddenDiv = td.querySelector('div[style*="display: none"]')
+                if (hiddenDiv) {
+                  hiddenDiv.textContent = checkedRadio.value
+                }
+              }
+            }
+          }
           return
         }
         const span = document.createElement('span')
@@ -538,9 +553,11 @@ export default {
         ].forEach(key => {
           span.style[key] = style[key]
         })
-        span.style.width = '100%'
+        span.style.whiteSpace = 'normal'
+        span.style.wordBreak = 'break-all'
+        span.style.overflowWrap = 'break-word'
         span.style.display = 'block'
-        span.style.textAlign = 'center'
+        span.style.width = '100%'
         input.parentNode.replaceChild(span, input)
       })
 
@@ -570,6 +587,7 @@ export default {
         span.style.width = '100%'
         span.style.display = 'block'
         span.style.textAlign = 'center'
+        span.style.whiteSpace = 'pre-line' // 关键：自动换行
         select.parentNode.replaceChild(span, select)
       })
 
@@ -599,6 +617,7 @@ export default {
         span.style.width = '100%'
         span.style.display = 'block'
         span.style.textAlign = 'center'
+        span.style.whiteSpace = 'pre-line' // 关键：自动换行
         textarea.parentNode.replaceChild(span, textarea)
       })
     },
@@ -638,12 +657,46 @@ export default {
       return Number(val).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
     },
     printHtml() {
-      const printNode = this.$refs.printtable.cloneNode(true)
+      // 先同步用户输入到HTML
+      const dom = this.$refs.printtable
+      if (dom) {
+        // 获取所有输入控件
+        const inputs = dom.querySelectorAll('input, select, textarea')
+        inputs.forEach(input => {
+          const fieldName = input.getAttribute('data-field')
+          if (fieldName) {
+            if (input.type === 'checkbox' || input.type === 'radio') {
+              // 对于复选框和单选框，需要找到选中的值
+              const checkedInput = dom.querySelector(`[data-field="${fieldName}"]:checked`)
+              if (checkedInput) {
+                // 找到同组的所有radio
+                const name = checkedInput.name
+                const radioGroup = dom.querySelectorAll(`input[type="radio"][name="${name}"]`)
+                radioGroup.forEach(radio => {
+                  // 移除所有radio的checked属性
+                  radio.removeAttribute('checked')
+                })
+                // 设置选中radio的checked属性
+                checkedInput.setAttribute('checked', 'checked')
+              }
+            } else {
+              // 对于其他类型的输入，直接设置value
+              input.setAttribute('value', input.value)
+            }
+          }
+        })
+      }
+
+      // 使用同步后的HTML数据
+      const printNode = document.createElement('div')
+      printNode.innerHTML = dom.innerHTML
+
       // 移除财务审核表
       const financeTable = printNode.querySelector('.finance-review-table')
       if (financeTable) {
         financeTable.remove()
       }
+
       // 替换控件为纯文本（保留样式）
       this.replaceControls(printNode)
 
@@ -661,7 +714,7 @@ export default {
         totalInput.value = total.toFixed(2)
       }
 
-      // 更新大写金额显示
+      // 更新大写金额
       const upperCaseInput = printNode.querySelector('input[data-field="upperCaseAmount"]')
       if (upperCaseInput) {
         upperCaseInput.value = numberToChinese(total)
@@ -672,35 +725,52 @@ export default {
         ? '2mm 10mm 10mm 2mm'
         : '10mm 10mm 10mm 10mm';
       const win = window.open('', '_blank')
+      // 动态计算宽高、缩放和平移
+      const isPortrait = orientation === 'portrait';
+      const pageWidth = isPortrait ? 210 : 297;
+      const scale = 0.8;
+      const translateX = ((pageWidth - pageWidth * scale) / 2).toFixed(2) + 'mm';
+
       win.document.write(`
         <html>
           <head>
             <title>打印</title>
             <style>
               @page { size: A4 ${orientation}; margin: ${margin}; }
-              body { 
+              body {
-                margin: 0; 
+                margin: 0;
-                padding: 0; 
+                padding: 0;
+                width: ${pageWidth}mm;
+                display: flex;
+                justify-content: center;
+                align-items: flex-start;
               }
-              .white-container { 
+              .white-container {
-                width: 100% !important; 
+                display: inline-block;
-                margin: 0 auto;
-                margin-left: 0px;
                 background: #fff;
-                padding: 0px;
                 box-sizing: border-box;
+                transform: scale(${scale}) translateX(${translateX});
+                transform-origin: top left;
+                margin: 0;
+                padding: 0;
               }
-              .form-container { 
+              .form-container { width: 100% !important; margin: 0 auto; }
-                width: 100% !important;
+              table { width: 100%; border-collapse: collapse; }
-                margin: 0 auto;
+              td { border: 1px solid #000; padding: 8px; }
-              }
+              @media print {
-              table {
+                body {
-                width: 100%;
+                  width: ${pageWidth}mm;
-                border-collapse: collapse;
+                  margin: 0;
-              }
+                  padding: 0;
-              td {
+                  display: flex;
-                border: 1px solid #000;
+                  justify-content: center;
-                padding: 8px;
+                  align-items: flex-start;
+                }
+                .white-container {
+                  transform: scale(${scale}) translateX(${translateX});
+                  transform-origin: top left;
+                  display: inline-block;
+                }
               }
             </style>
           </head>