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

<template>
  <div class="center">
    <!-- {{customerInfo}} -->
    <div class="header">
       <div>单位名称：{{ printData.compName}}</div>
       <!-- <div>税务登记编号：91230230MA1BNL7Q93</div> -->
    </div>
    <div class="header-top">
      <div>单位：公斤/元</div>
      <div>No.</div>
    </div>
    <div class="header-top">
      <div>开票日期：{{printData.createDate}}</div>
      <!-- <div>开票日期：{{new Date(yyyy,mm,dd)}}</div> -->
      <div class="number">{{dealNo(printData.paymentNo)}}</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="4">{{ 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="4">{{ printData.identityAuthenticationInfo.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="4">{{printData.identityAuthenticationInfo.bankDeposit}}{{printData.identityAuthenticationInfo.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="4">{{printData.identityAuthenticationInfo.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>
        <!-- <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.qualityInspectionManagement.grade}}</td>
        <td class="col">{{ printData.qualityInspectionManagement.waterContent}}</td>
        <td class="col">{{ printData.qualityInspectionManagement.impurity}}</td>
        <td class="col">{{ printData.qualityInspectionManagement.bulkDensity}}</td>
        <td class="col">{{ printData.grossWeight}}</td>
        <td class="col">{{ printData.tare}}</td>
        <td class="col">{{ printData.weighingManagement.buckleMiscellaneous}}</td>
        <td class="col">{{ printData.netWeight}}</td>
      </tr>
      <tr class="row">
        <td class="col col-bgc">纯重</td>
        <td class="col col-bgc"  v-if="printData.type == '潮粮'">净重单价</td>
        <td class="col col-bgc" v-if="printData.type == '干粮'">单价</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.pureWeight}}</td>
        <td class="col " v-if="printData.type == '潮粮'">{{printData.tidalGrainPrice}}</td>
        <td class="col " v-if="printData.type == '干粮'">{{printData.qualityInspectionManagement.dryGrainPrice}}</td>
        <td class="col ">{{ printData.unitDeduction}}</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> -->
      </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" v-if="printData.type == '潮粮'">纯重单价</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="4">记事</td>
      </tr>
      <tr class="row">
        <td class="col ">{{ printData.unloadDeduction}}</td>
        <td class="col ">{{ printData.qualityDeduction}}</td>
        <td class="col ">{{ printData.otherDeduction}}</td>
        <td class="col " v-if="printData.type == '潮粮'">{{ printData.solidGrainPrice}}</td>
        <td class="col ">{{ printData.calculationPayable}}</td>
        <td class="col ">{{ printData.qualityInspectionManagement.natureOfGrainPurchase}}</td>
        <td class="col ">{{ printData.carNo}}</td>
        <td class="col " colspan="4">{{ 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.qualityInspectionManagement.qualityInspector}}</div>
        <div>毛检：{{ printData.weighingManagement.secretaryWeigher}}</div>
        <div>皮检：{{ printData.weighingManagement.skinInspector}}</div>
        <div>结算：{{ printData.settlementClerk}}</div>
        <div>付款：{{ printData.cashier}}</div>
        <div>复点：{{ }}</div>
        <div></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
      },
        customerInfo: {
        type: Object
      },
      showType:{
        type: Array
      },
       selectPrintList:{
        type: Array
      },
       selectCustomerList:{
        type: Array
      },
      billingDate:'',
    },
    data() {
      return {

      }
    },
    activated() {
      let date = new Date()
      console.log( date.getFullYear())
      console.log(this.selectPrintList)
      console.log(this.selectCustomerList)
    },
    methods: {
      dealNo(str){
        return str.slice(4)
      },
      date(){
        let date = new Date()
       let datas = date.getDate
        console.log(new Data())
        return datas
      },
      printSmall() {
        window.open('../../../../../static/payprint.html?type=1&dataList=' +JSON.stringify(this.printData))
      },
      printBig() {
         window.open('../../../../../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>