添加打印按钮

src/views/businessManagement/salesOrder/detailsPageEdit.vue

@@ -67,6 +67,12 @@
                          plain
                          @click="dialogVisible = !dialogVisible"
               >导入</el-button>
+              <el-button type="info"
+                         icon="el-icon-edit"
+                         size="small"
+                         plain
+                         @click="printVisible = !printVisible"
+              >打印</el-button>
             </template>
           </avue-crud>
         </basic-container>
@@ -139,6 +145,137 @@
           <el-button type="primary" @click="importGoods">导入</el-button>
         </span>
     </el-dialog>
+<!--    打印-->
+    <el-dialog
+      title="打印单"
+      append-to-body
+      class="el-dialogDeep"
+      :visible.sync="printVisible"
+      width="100%"
+      fullscreen
+      :close-on-click-modal="false"
+      :close-on-press-escape="false">
+      <div class="print-div">
+        <div
+          style="
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-item: center;
+            font-size: 24px;
+            margin-bottom: 5px;
+            width: 100%;
+            text-align: center;
+          "
+        >
+          <div><b>VITAL INDUSTRIAL GROUP LIMITED</b></div>
+          <div>NO.37 DONGHAI ROAD, QINGDAO, CHINA</div>
+          <div>TEL:0086-532-86019080     FAX:0086-532-86019080 </div>
+          <div>
+            <b>COMMERCIAL INVOICE</b>
+            <span style="float: right">ORIGINAL</span>
+          </div>
+        </div>
+        <div class="print_table" style="display: flex">
+          <table
+            border="0"
+            cellspacing="0"
+            cellpadding="0"
+            style="width: 100%; line-height: 30px"
+          >
+            <tr>
+              <td colspan="5" rowspan="3">MESSERS:</td>
+              <td colspan="2">INVOICE NO.</td>
+              <td colspan="3"></td>
+            </tr>
+            <tr>
+              <td colspan="2">DATE</td>
+              <td colspan="3"></td>
+            </tr>
+            <tr>
+              <td colspan="2">INCOTERM .</td>
+              <td colspan="3"></td>
+            </tr>
+            <tr>
+              <td colspan="5">PI NO.:</td>
+              <td colspan="2">DELIVERY PORT</td>
+              <td colspan="3"></td>
+            </tr>
+            <tr>
+              <td rowspan="2">NO.</td>
+              <td rowspan="2">DESCRIPTION</td>
+              <td>THICK</td>
+              <td>LENGTH</td>
+              <td>WIDTH</td>
+              <td rowspan="2">SHEETS</td>
+              <td rowspan="2">CRATES</td>
+              <td>UNIT PRICE</td>
+              <td>TOTAL</td>
+              <td>T. AMOUNT</td>
+            </tr>
+            <tr>
+              <td>mm</td>
+              <td>mm</td>
+              <td>mm</td>
+              <td>US$/M²</td>
+              <td>M²</td>
+              <td>US$</td>
+            </tr>
+            <tr>
+              <td>1</td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>2</td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+            </tr>
+            <tr>
+              <td colspan="9" style="text-align: right">FUMIGATION COST:</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td colspan="9" style="text-align: right">INSURANCE:</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td colspan="9" style="text-align: right">TOTAL:</td>
+              <td>0.00</td>
+            </tr>
+          </table>
+        </div>
+        <div class="print-footer" style="margin-top: 8px">
+          <div style="font-weight: bold">TOTAL AMOUNT: U.S. DOLLARS NINE THOUSAND FORTY SIX CENTS TWENTY FIVE ONLY.</div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -161,6 +298,7 @@ export default {
     return {
       form: {},
       data:[],
+      printVisible: false,
       treeDeptId:'',
       page:{
         pageSize: 10,
@@ -847,4 +985,42 @@ export default {
     }
   }
 }
+.print-div {
+  color: #000;
+}
+
+.print_table {
+  table {
+    border-right: 1px solid #000;
+    border-bottom: 1px solid #000;
+    font-size: 12px;
+    margin-bottom: 5px;
+  }
+
+  table td {
+    border-left: 1px solid #000;
+    border-top: 1px solid #000;
+    vertical-align: middle;
+    padding: 2px;
+    text-align: center;
+  }
+}
+.table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  background-color: transparent;
+  display: table;
+  width: 99%;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.table td {
+  text-align: left;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #000000;
+  padding: 10.5px 0 10.5px 30px;
+  //border: 1px solid #000;
+}
 </style>