添加打印页面

src/views/warehouseBusiness/inStock/index.vue

@@ -1434,14 +1434,294 @@
         </el-table-column>
       </el-table>
       <div slot="footer" class="dialog-footer">
+        <el-button
+          type="danger"
+          size="mini"
+          prop="打印"
+          @click="showEditDialog_ss"
+          >收货单
+        </el-button>
+        <el-button
+          type="danger"
+          size="mini"
+          prop="打印"
+          @click="showEditDialog_s"
+          >入库单
+        </el-button>
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
+      <el-dialog
+        title="入库页面"
+        :modal= false
+        style="box-shadow: 0 1px 3px rgba(0, 0, 0, 0) !important"
+        :visible.sync="editDialogVisible_s"
+        width="70%"
+        
+      >
+        <table
+          id="print_area"
+          class="biaoge zzss"
+          border="1"
+          style="border-collapse: collapse; border: none"
+        >
+          <tr>
+            <td
+              width="100"
+              colspan="7"
+              class="zzss"
+              style=" font-size: 28px; font-weight: bold; border: none"
+            >
+              青岛大木进进仓单
+            </td>
+          </tr>
+          <tr>
+            <td
+              width="100"
+              colspan="7"
+              class="zzss"
+              style="font-size: 28px; font-weight: bold; border: none"
+            >
+              &nbsp;
+            </td>
+          </tr>
+          <tr>
+            <td width="450" colspan="2" class="zzss">货权方：某某有限公司</td>
+            <td width="450" colspan="2" class="zzss">仓库：某某3号大仓</td>
+            <td width="450" colspan="3" class="zzss">
+              地址：青岛市市北区郑州路1344号
+            </td>
+          </tr>
+          <tr>
+            <td width="200" colspan="2" class="zzss">保管方：某某有限公司</td>
+            <td width="200" colspan="2" class="zzss">联系人：张三</td>
+            <td width="200" colspan="3" class="zzss">
+              电话：0532-561651561-546
+            </td>
+          </tr>
+          <tr>
+            <td width="100" border="1">提单号</td>
+            <td width="100">品名</td>
+            <td width="100">箱型</td>
+            <td width="100">品牌</td>
+            <td width="100">件数</td>
+            <td width="100">重量</td>
+            <td width="100">包装规格</td>
+          </tr>
+          <tr>
+            <td width="100">56165654555</td>
+            <td width="100">某某商品</td>
+            <td width="100">20GP</td>
+            <td width="100">某某</td>
+            <td width="100">包</td>
+            <td width="100">吨</td>
+            <td width="100">50kg</td>
+          </tr>
+          <tr>
+            <td width="100">序号</td>
+            <td width="100">入货日期</td>
+            <td width="100">箱量(20GP)</td>
+            <td width="100">重量</td>
+            <td width="100">件数</td>
+            <td width="100">入库重量</td>
+            <td width="100">入库件数</td>
+          </tr>
+          <tr>
+            <td width="100">1</td>
+            <td width="100">2020-11-20</td>
+            <td width="100">10</td>
+            <td width="100">100</td>
+            <td width="100">10000</td>
+            <td width="100">20</td>
+            <td width="100">3000</td>
+          </tr>
+          <tr>
+            <td width="100">2</td>
+            <td width="100">2020-11-20</td>
+            <td width="100">10</td>
+            <td width="100">100</td>
+            <td width="100">10000</td>
+            <td width="100">20</td>
+            <td width="100">3000</td>
+          </tr>
+          <tr>
+            <td width="100">3</td>
+            <td width="100">2020-11-20</td>
+            <td width="100">10</td>
+            <td width="100">100</td>
+            <td width="100">10000</td>
+            <td width="100">20</td>
+            <td width="100">3000</td>
+          </tr>
+          <tr>
+            <td width="100">4</td>
+            <td width="100">2020-11-20</td>
+            <td width="100">10</td>
+            <td width="100">100</td>
+            <td width="100">10000</td>
+            <td width="100">20</td>
+            <td width="100">3000</td>
+          </tr>
+          <tr>
+            <td width="100">5</td>
+            <td width="100">2020-11-20</td>
+            <td width="100">10</td>
+            <td width="100">100</td>
+            <td width="100">10000</td>
+            <td width="100">20</td>
+            <td width="100">3000</td>
+          </tr>
+          <tr>
+            <td width="100">6</td>
+            <td width="100">2020-11-20</td>
+            <td width="100">10</td>
+            <td width="100">100</td>
+            <td width="100">10000</td>
+            <td width="100">20</td>
+            <td width="100">3000</td>
+          </tr>
+          <tr>
+            <td width="100">7</td>
+            <td width="100">2020-11-20</td>
+            <td width="100">10</td>
+            <td width="100">100</td>
+            <td width="100">10000</td>
+            <td width="100">20</td>
+            <td width="100">3000</td>
+          </tr>
+          <tr>
+            <td width="100" colspan="2">合计：</td>
+            <td width="100">10</td>
+            <td width="100">100</td>
+            <td width="100">10000</td>
+            <td width="100">20</td>
+            <td width="100">3000</td>
+          </tr>
+          <tr>
+            <td width="100">备注：</td>
+            <td width="100" colspan="6"></td>
+          </tr>
+          <tr>
+            <td width="100" colspan="7" class="zzss">
+              本进仓单经仓管员签字并经保管方盖章后即专项作为货物所有人的货权证明，本单据不得转让。
+            </td>
+          </tr>
+          <tr style="border: none">
+            <td width="100" colspan="2" class="zzss" style="border: none">
+              开单员：
+            </td>
+            <td width="100" colspan="3" class="zzss" style="border: none"></td>
+            <td width="100" colspan="2" class="zzss" style="border: none">
+              仓管员：张三
+            </td>
+          </tr>
+          <tr style="border: none">
+            <td width="100" colspan="2" class="zzss" style="border: none">
+              开单时间：
+            </td>
+            <td width="100" colspan="3" class="zzss" style="border: none"></td>
+            <td width="100" colspan="2" class="zzss" style="border: none">
+              (盖章)
+            </td>
+          </tr>
+        </table>
+        <button @click="printSomething">打印</button>
+      </el-dialog>
+      <el-dialog
+        title="收货单打印"
+        style="box-shadow: 0 1px 3px rgba(0, 0, 0, 0) !important"
+        :visible.sync="editDialogVisible_ss"
+        width="70%"
+        :modal= false
+      >
+        <table
+          id="print_area"
+          class="biaoge zzss"
+          border="1"
+          style="border-collapse: collapse; border: none"
+        >
+          <tr>
+            <td
+              width="1400"
+              colspan="6"
+              class="zzss"
+              style="font-size: 28px; font-weight: bold; border: none"
+            >
+              大木国际物流(青岛)有限公司收货单
+            </td>
+          </tr>
+          <tr>
+            <td
+              width="900"
+              colspan="4"
+              class="zzss"
+              style="font-size: 28px; font-weight: bold"
+            >
+              &nbsp;
+            </td>
+            <td
+              width="500"
+              colspan="2"
+              style="padding-bottom: 0px; font-weight: bold; border: none"
+              class="zzss"
+            >
+              出库日期：2020-11-20
+            </td>
+          </tr>
+          <tr>
+            <td width="200">车号</td>
+            <td width="200">苏HFN751</td>
+            <td width="200">货物品名</td>
+            <td width="200" colspan="4" class="zzss">某某商品名</td>
+          </tr>
+          <tr>
+            <td width="1400" colspan="6">&nbsp;</td>
+          </tr>
+          <tr>
+            <td>备注:</td>
+            <td colspan="5"></td>
+          </tr>
+          <tr>
+            <td>收费</td>
+            <td>装箱费</td>
+            <td>100元</td>
+            <td colspan="4">办单费：5元，过磅费自理</td>
+          </tr>
+          <tr>
+            <td>司机签字：</td>
+            <td></td>
+            <td>电话</td>
+            <td>15896154516</td>
+            <td colspan="2" rowspan="2">
+              确认货物数量无误，包装于货物完好！<br />出库盖好篷布，如有违背责任自负<br />装卸工是否收小费
+            </td>
+          </tr>
+          <tr>
+            <td>制表：</td>
+            <td>张三</td>
+            <td>机械/人工：</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td colspan="6" class="zzss">&nbsp;</td>
+          </tr>
+          <tr>
+            <td width="280" class="zzss"></td>
+            <td width="280" class="zzss"></td>
+            <td width="280" class="zzss"></td>
+            <td width="280" class="zzss"></td>
+            <td width="290" class="zzss">地址：淮河东路96号</td>
+            <td width="290" class="zzss">电话：18685818919</td>
+          </tr>
+        </table>
+        <button @click="printSomething">打印</button>
+      </el-dialog>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import print from 'print-js'
   import {
     listWarehousebills,
     getWarehousebills,
@@ -1474,6 +1754,10 @@
           deptId: null
         },
         queryForm: {},
+        // 添加用户对话框
+      editDialogVisible_s: false,
+      editDialogVisible_ss: false,
+      editDialogClosed_ss: false,
         dataList: [],
         warehouseCrList: [],
         warehouseDrList: [],
@@ -1633,6 +1917,17 @@
       });
     },
     methods: {
+        printSomething() {
+      // 此处的style即为打印时的样式
+      const style =
+        "@media print { .print-div{ padding:8px;background-color:#cccccc;line-height:12px } .red{ color:#f00} .green{color:green} td{text-align: center}}";
+      print({
+        printable: "print_area",
+        type: "html",
+        style: style, // 亦可使用引入的外部css;
+        scanStyles: false,
+      });
+    },
       // 添加list
       addRelevant() {
         console.log(JSON.stringify(this.dataList))
@@ -1654,6 +1949,14 @@
           remark: null
         });
       },
+      // 收货单打印界面
+    showEditDialog_s() {
+      console.log("@@@@");
+      this.editDialogVisible_s = true;
+    },
+    showEditDialog_ss() {
+      this.editDialogVisible_ss = true;
+    },
       // 收款信息
       addCollection() {
         var obj = {};
@@ -1964,3 +2267,24 @@
     },
   };
 </script>
+<style lang="scss">
+.juzhong > th {
+  text-align: center;
+}
+.biaoge > tr > td {
+  height: 30px;
+  text-align: center;
+  border-right: 1px solid #dfe6ec !important;
+  order-bottom: 1px solid #dfe6ec !important;
+  border-bottom: 1px solid #dfe6ec !important;
+}
+.el-table thead th {
+  background: #1890ff;
+  color: #fff;
+}
+
+.upload-demo {
+  margin-left: 50px;
+}
+
+</style>