update

src/views/contract/components/printPaymentForm.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <xy-dialog title="打印预览" :is-show.sync="isShow" :width="90" @on-ok="print" ok-text="打印">
+    <xy-dialog title="打印预览" :is-show.sync="isShow" :width="90" @on-ok="printHtml" ok-text="打印">
       <template v-slot:normalContent>
         <div class="form-switch">
           <RadioGroup v-model="currentForm" type="button">
             <Radio label="pre" :disabled="!getBeforeForms">事前审批表格</Radio>
-            <Radio label="post" :disabled="!getForms">事后支付表格</Radio>
             <Radio label="finance" :disabled="!fundLog">财务审核表</Radio>
+            <Radio label="post" :disabled="!getForms">事后支付表格</Radio>
           </RadioGroup>
         </div>
         
@@ -104,66 +104,76 @@ export default {
     },
     replaceControls(element) {
       // 替换所有输入框（文本、数字、日期）为纯文本
-      const inputs = element.getElementsByTagName('input')
+      const inputs = element.getElementsByTagName('input');
       Array.from(inputs).forEach(input => {
-        const span = document.createElement('span')
-        let displayText = input.value || ''
-        
-        // 处理不同类型的输入框
+        const span = document.createElement('span');
+        let displayText = input.value || '';
         if (input.type === 'checkbox' || input.type === 'radio') {
-          // 获取当前选中的值
-          const checkedInput = element.querySelector(`input[name="${input.name}"]:checked`)
+          const checkedInput = element.querySelector(`input[name="${input.name}"]:checked`);
           if (checkedInput) {
-            // 获取显示文本（如果有label，使用label的文本）
-            const label = element.querySelector(`label[for="${checkedInput.id}"]`)
-            displayText = label ? label.textContent : checkedInput.value || ''
+            const label = element.querySelector(`label[for="${checkedInput.id}"]`);
+            displayText = label ? label.textContent : checkedInput.value || '';
           } else {
-            displayText = ''
+            displayText = '';
           }
         } else if (input.type === 'date') {
-          displayText = input.value ? new Date(input.value).toLocaleDateString() : ''
+          displayText = input.value ? new Date(input.value).toLocaleDateString() : '';
         }
-        
-        span.textContent = displayText
-        // 复制原始输入框的样式
-        span.style.cssText = window.getComputedStyle(input).cssText
-        span.style.display = 'inline-block'
-        span.style.width = input.offsetWidth + 'px'
-        span.style.height = input.offsetHeight + 'px'
-        span.style.border = 'none'
-        span.style.backgroundColor = 'transparent'
-        input.parentNode.replaceChild(span, input)
-      })
-
+        span.textContent = displayText;
+        // 继承所有关键样式
+        const style = window.getComputedStyle(input);
+        span.style.cssText = style.cssText;
+        [
+          'width', 'height', 'padding', 'margin', 'font', 'fontSize', 'fontFamily',
+          'lineHeight', 'verticalAlign', 'border', 'background', 'color',
+          'boxSizing'
+        ].forEach(key => {
+          span.style[key] = style[key];
+        });
+        // 全部居中对齐，充满td
+        span.style.width = '100%';
+        span.style.display = 'block';
+        span.style.textAlign = 'center';
+        input.parentNode.replaceChild(span, input);
+      });
       // 替换所有下拉框为纯文本
-      const selects = element.getElementsByTagName('select')
+      const selects = element.getElementsByTagName('select');
       Array.from(selects).forEach(select => {
-        const span = document.createElement('span')
-        span.textContent = select.options[select.selectedIndex]?.text || ''
-        // 复制原始下拉框的样式
-        span.style.cssText = window.getComputedStyle(select).cssText
-        span.style.display = 'inline-block'
-        span.style.width = select.offsetWidth + 'px'
-        span.style.height = select.offsetHeight + 'px'
-        span.style.border = 'none'
-        span.style.backgroundColor = 'transparent'
-        select.parentNode.replaceChild(span, select)
-      })
-
+        const span = document.createElement('span');
+        span.textContent = select.options[select.selectedIndex]?.text || '';
+        const style = window.getComputedStyle(select);
+        span.style.cssText = style.cssText;
+        [
+          'width', 'height', 'padding', 'margin', 'font', 'fontSize', 'fontFamily',
+          'lineHeight', 'verticalAlign', 'border', 'background', 'color',
+          'boxSizing'
+        ].forEach(key => {
+          span.style[key] = style[key];
+        });
+        span.style.width = '100%';
+        span.style.display = 'block';
+        span.style.textAlign = 'center';
+        select.parentNode.replaceChild(span, select);
+      });
       // 替换所有文本域为纯文本
-      const textareas = element.getElementsByTagName('textarea')
+      const textareas = element.getElementsByTagName('textarea');
       Array.from(textareas).forEach(textarea => {
-        const span = document.createElement('span')
-        span.textContent = textarea.value || ''
-        // 复制原始文本域的样式
-        span.style.cssText = window.getComputedStyle(textarea).cssText
-        span.style.display = 'inline-block'
-        span.style.width = textarea.offsetWidth + 'px'
-        span.style.height = textarea.offsetHeight + 'px'
-        span.style.border = 'none'
-        span.style.backgroundColor = 'transparent'
-        textarea.parentNode.replaceChild(span, textarea)
-      })
+        const span = document.createElement('span');
+        span.textContent = textarea.value || '';
+        const style = window.getComputedStyle(textarea);
+        span.style.cssText = style.cssText;
+        [
+          'width', 'height', 'padding', 'margin', 'font', 'fontSize', 'fontFamily',
+          'lineHeight', 'verticalAlign', 'border', 'background', 'color',
+          'boxSizing'
+        ].forEach(key => {
+          span.style[key] = style[key];
+        });
+        span.style.width = '100%';
+        span.style.display = 'block';
+        span.style.textAlign = 'center';
+        textarea.parentNode.replaceChild(span, textarea);
+      });
     },
     async print() {
       try {
@@ -204,6 +214,37 @@ export default {
     moneyFormat(val) {
       if (!val && val !== 0) return '-'
       return Number(val).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
+    },
+    printHtml() {
+      // 克隆打印区域
+      const printNode = this.$refs.printtable.cloneNode(true);
+      // 替换控件为纯文本（保留样式）
+      this.replaceControls(printNode);
+
+      const win = window.open('', '_blank');
+      win.document.write(`
+        <html>
+          <head>
+            <title>打印</title>
+            <style>
+              @page { size: A4; margin: 10mm; }
+              body { margin: 0; padding: 0; }
+              .white-container, .form-container { width: 794px !important; margin: 0 auto; }
+            </style>
+          </head>
+          <body>
+            <div class="white-container">
+              <div class="form-container">
+                ${printNode.innerHTML}
+              </div>
+            </div>
+          </body>
+        </html>
+      `);
+      win.document.close();
+      win.focus();
+      win.print();
+      win.close();
     }
   }
 }