费用确认单打印

src/dashoo.cn/frontend_web/src/pages/oilsupplier/paymentinfo/paymentsure.vue

@@ -10,6 +10,7 @@
           <i class="icon icon-table2"></i> 缴费确认
         </span>
         <span style="float: right;">
+          <el-button type="primary" size="mini" style="margin-right: 15px" @click="printBtn">打印</el-button>
           <el-button type="primary" plain title="查看详情" size="mini" v-if="entityList && entityList.length > 0" :loading="sureLoading" @click="BillSureClick">确认缴费单</el-button>
         </span>
       </div>
@@ -105,6 +106,45 @@
       </el-table>
     </el-card>
 
+    <el-dialog
+      title="打印内容"
+      :visible.sync="dialogVisible"
+      width="50%"
+      center>
+      <div id="printBill" class="table-layout">
+        <el-row>
+          <el-col :span="8">
+            <div class="table-cell-title2">单位名称：</div>
+          </el-col>
+          <el-col :span="16">
+            <div class="table-cell2">{{this.formDataSup.SupplierName}}&nbsp;</div>
+          </el-col>
+          <el-col :span="8">
+            <div class="table-cell-title2">税号：</div>
+          </el-col>
+          <el-col :span="16">
+            <div class="table-cell2">{{this.formDataSup.CommercialNo}}&nbsp;</div>
+          </el-col>
+          <el-col :span="8">
+            <div class="table-cell-title2">地址、电话：</div>
+          </el-col>
+          <el-col :span="16">
+            <div class="table-cell2">{{this.formDataSup.Address}}&nbsp;&nbsp;&nbsp;&nbsp;{{this.formDataSup.Telphone}}</div>
+          </el-col>
+          <el-col :span="8">
+            <div class="table-cell-title2">开户行及账号：</div>
+          </el-col>
+          <el-col :span="16">
+            <div class="table-cell2">{{this.formDataSup.DepositBank}}&nbsp;&nbsp;&nbsp;&nbsp;{{this.formDataSup.BankAccount}}</div>
+          </el-col>
+        </el-row>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" v-print="'#printBill'">打 印</el-button>
+      </span>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -148,6 +188,9 @@
       this.initDatas()
     },
     methods: {
+      printBtn () {
+        this.dialogVisible = true
+      },
       BillSureClick () {
         this.sureLoading = true
 
@@ -288,5 +331,25 @@
     font-size: 14px;
     color: #303133;
   }
+
+  .table-cell-title2 {
+    border-right: 1px solid #DCDFE6;
+    border-bottom: 1px solid #DCDFE6;
+    padding: 10px;
+    background: #F2F6FC;
+    text-align: center;
+    font-size: 14px;
+    color: #303133;
+    text-align: right;
+  }
+  .table-cell2 {
+    border-right: 1px solid #DCDFE6;
+    border-bottom: 1px solid #DCDFE6;
+    padding: 10px;
+    text-align: center;
+    font-size: 14px;
+    color: #606266;
+    text-align: left;
+  }
 </style>