yiliangyiyun-pc-jj/src/views/houseSelfCollect/component/paymentPrint.vue

<template>
  <div class="center">
    <div class="header">
       <div>单位名称：黑龙江中天昊元粮食贸易有限公司</div>
       <div>税务登记编号：91230230MA1BNL7Q93</div>
    </div>
    <div class="header-top">
      <div>单位：公斤、元</div>
      <div>No.</div>
    </div>
    <div class="header-top">
      <div>开票日期：{{printData.compName}}</div>
      <div class="number">{{100000000000000}}</div>
    </div>
    <table class="table">
      <tr class="row">
        <td rowspan="4" class="col col-bgc">买方</td>
        <td class="col col-bgc">单位名称</td>
        <td class="col" colspan="3">{{ printData.compName}}</td>
        <td rowspan="4" class="col col-bgc">买方</td>
        <td class="col col-bgc">姓名</td>
        <td class="col" colspan="3">{{ printData.customerName}}</td>
      </tr>
      <tr class="row">
        <td class="col col-bgc">税务登记号</td>
        <td class="col" colspan="3">{{ printData.taxRegistrationNo}}</td>
        <td class="col col-bgc">身份证号</td>
        <td class="col" colspan="3">{{ printData.customerNumberCard}}</td>
      </tr>
      <tr class="row">
        <td class="col col-bgc">化验单号</td>
        <td class="col" colspan="3">{{ printData.paymentNo}}</td>
        <td class="col col-bgc">卡号</td>
        <td class="col" colspan="3">{{ printData. bankCard}}</td>
      </tr>
      <tr class="row">
        <td class="col col-bgc">收货仓库</td>
        <td class="col" colspan="3">{{printData.warehouseName}}</td>
        <td class="col col-bgc">地址</td>
        <td class="col" colspan="3">{{printData.compAddress}}</td>
      </tr>
      <tr class="row">
        <td class="col col-bgc">货名</td>
        <td class="col col-bgc">类型</td>
        <td class="col col-bgc">等级</td>
        <td class="col col-bgc">水分%</td>
        <td class="col col-bgc">杂质%</td>
        <td class="col col-bgc">毛重</td>
        <td class="col col-bgc">皮重</td>
        <td class="col col-bgc">扣杂重</td>
        <td class="col col-bgc">净重</td>
        <td class="col col-bgc">纯重</td>
      </tr>
      <tr class="row">
        <td class="col">{{ printData.goodsName}}</td>
        <td class="col">{{ printData.type}}</td>
        <td class="col">{{ printData.grade}}</td>
        <td class="col">{{ printData.waterContent}}</td>
        <td class="col">{{ printData.impurity}}</td>
        <td class="col">{{ printData.grossWeight}}</td>
        <td class="col">{{ printData.tare}}</td>
        <td class="col">{{ printData.buckleMiscellaneous}}</td>
        <td class="col">{{ printData.netWeight}}</td>
        <td class="col">{{ printData.pureWeight}}</td>
      </tr>
      <tr class="row">
        <td class="col col-bgc">净重单价</td>
        <td class="col col-bgc">粮款</td>
        <td class="col col-bgc">称重补助</td>
        <td class="col col-bgc">运费补助</td>
        <td class="col col-bgc">卸车补助</td>
        <td class="col col-bgc">其他补助</td>
        <td class="col col-bgc">称重扣款</td>
        <td class="col col-bgc">运费扣款</td>
        <td class="col col-bgc">卸车扣款</td>
        <td class="col col-bgc">质量扣款</td>
      </tr>
      <tr class="row">
        <td class="col ">{{ printData.tidalGrainPrice}}</td>
        <td class="col ">{{ printData.grainMoney}}</td>
        <td class="col ">{{ printData.weighingSubsidy}}</td>
        <td class="col ">{{ printData.freightSubsidy}}</td>
        <td class="col ">{{ printData.unloadSubsidy}}</td>
        <td class="col ">{{ printData.otherSubsidy}}</td>
        <td class="col ">{{ printData.weighingDeduction}}</td>
        <td class="col ">{{ printData.freightDeduction}}</td>
        <td class="col ">{{ printData.unloadDeduction}}</td>
        <td class="col ">{{ printData.qualityDeduction}}</td>
      </tr>
      <tr class="row">
        <td class="col col-bgc">其他扣款</td>
        <td class="col col-bgc">纯重单价</td>
        <td class="col col-bgc">合计应付</td>
        <td class="col col-bgc">购粮性质</td>
        <td class="col col-bgc">车牌号</td>
        <td class="col col-bgc" colspan="5">记事</td>
      </tr>
      <tr class="row">
        <td class="col ">{{ printData.otherDeduction}}</td>
        <td class="col ">{{ printData.solidGrainPrice}}</td>
        <td class="col ">{{ printData.calculationPayable}}</td>
        <td class="col ">{{ printData.natureOfGrainPurchase}}</td>
        <td class="col ">{{ printData.carNo}}</td>
        <td class="col " colspan="5">{{ printData.remarks}}</td>
      </tr>
      <tr class="row">
        <td class="col col-bgc">实付金额</td>
        <td class="col " colspan="2">{{printData.actualPayment}}</td>
        <td class="col col-bgc" colspan="3">人民币（大写）</td>
        <td class="col " colspan="4">{{printData.capitalize}}</td>

      </tr>
    </table>

    <div class="bottom">
      <div class="bottom-row1">
        <div>质检：{{ printData.qualityInspector}}</div>
        <div>毛检：{{ printData.skinInspector}}</div>
        <div>皮检：{{ printData.qualityInspector}}</div>
        <div>结算：{{ printData.settlementClerk}}</div>
        <div>付款：{{ printData.qualityInspector}}</div>
        <div>复点：{{ printData.qualityInspector}}</div>
      </div>
      <div class="bottom-row2">
        <div class="left">
          <img src="../../../../public/img/add.png" alt="" />
        </div>
        <div class="config">收货单位签名或盖章</div>
        <div class="">客户签名</div>
      </div>
      <div class="bottom-row3">扫一扫</div>
      <!-- <div class="bottom-row4">
        <el-button type="primary">关闭</el-button> 
         <el-button type="primary" @click="printSmall">打印小票</el-button> 
         <el-button type="primary" @click="printBig">打印单据</el-button>
      </div> -->
    </div>
  </div>
</template>
<script>
  export default {
    components: {},
    props: {
      printData: {
        type: Object
      }
    },
    data() {
      return {

      }
    },
    activated() {

    },
    methods: {
      printSmall() {
        window.location.href =
          '../../../../../static/payprint.html?type=1&dataList=' +
          JSON.stringify(this.printData)
      },
      printBig() {
        window.location.href =
          '../../../../../static/payprint.html?type=2&dataList=' +
          JSON.stringify(this.printData)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .number {
    text-align: right;
    margin: 0 0 10px 0;
  }

  table,
  table tr th,
  table tr td {
    border: 2px solid #333333;
    padding: 5px 0;
  }

  table {
    width: 100%;
    min-height: 25px;
    line-height: 25px;
    text-align: center;
    border-collapse: collapse;
    border: 3px solid #333333;
  }

  .col-bgc {
    background: #f6f7fb;
    // background-color: red;
  }

  .bottom-row1 {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
  }

  .bottom-row2 {
    display: flex;
    margin: 10px 0;

    .left {
      img {
        width: 41px;
        height: 41px;
        margin-right: 118px;
      }
    }

    .config {
      margin-right: 240px;
    }
  }

  .bottom-row3 {
    margin: 10px 0;
  }

  .bottom-row4 {
    margin-top: 50px;
    text-align: center;
  }
  .header{
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin: 10px 0;
  }
  .header-top{
    display: flex;
    justify-content: space-between;
  }
</style>