yiliangyiyun-pc-jj/src/views/outboundManagement/component/weightCheckPrint.vue

<template>
    <div class="center">
        <!-- <div class="title">粮食检斤单</div> -->
        <div class="number">{{tableData.number}}</div>
        <table class="table">
          <tr class="row">
            <td class="col col-bgc" v-if="tableData.serviceManagementType == 3">客户姓名</td>
            <td class="col" colspan="2" v-if="tableData.serviceManagementType == 3">{{tableData.customer}}</td>
            <td class="col col-bgc" v-if="tableData.serviceManagementType == 1">发货单位</td>
            <td class="col" colspan="2" v-if="tableData.serviceManagementType == 1">{{tableData.contractManagement ? tableData.contractManagement.seller : ""}}</td>
            <td class="col col-bgc" v-if="tableData.serviceManagementType == 3">客户电话</td>
            <td class="col" v-if="tableData.serviceManagementType == 3">{{tableData.customerPhone}}</td>
            <td class="col col-bgc" v-if="tableData.serviceManagementType == 1">联系电话</td>
            <td class="col" v-if="tableData.serviceManagementType == 1">{{tableData.contractManagement ? tableData.contractManagement.sellerPhone : ""}}</td>
            <td class="col col-bgc">车牌号</td>
            <td class="col" colspan="2">{{tableData.carNumber}}</td>
          </tr>
          <tr class="row">
            <td class="col col-bgc">收货单位</td>
            <td class="col" colspan="2">{{tableData.compName}}</td>
            <td class="col col-bgc">联系人</td>
            <td class="col" >{{tableData.person}}</td>
            <td class="col col-bgc">联系电话</td>
            <td class="col" colspan="2">{{tableData.personPhone}}</td>
          </tr>
          <tr class="row">
            <td class="col col-bgc">货名</td>
            <td class="col">{{tableData.goodsName}}</td>
            <td class="col col-bgc">类型</td>
            <td class="col">{{tableData.type}}</td>
            <td class="col col-bgc">容量（克/升）</td>
            <td class="col">{{tableData.qualityInspectionManagement.bulkDensity}}</td>
            <td class="col col-bgc">不完善粒（%）</td>
            <td class="col">{{tableData.qualityInspectionManagement.imperfectGrain}}</td>
          </tr>
          <tr class="row">
            <td class="col col-bgc">等级</td>
            <td class="col">{{tableData.qualityInspectionManagement.grade}}</td>
            <td class="col col-bgc">水分（%）</td>
            <td class="col">{{tableData.qualityInspectionManagement.waterContent}}</td>
            <td class="col col-bgc">热损伤（%）</td>
            <td class="col">{{tableData.qualityInspectionManagement.jiaorenli}}</td>
            <td class="col col-bgc" colspan="2">质检&nbsp;&nbsp;{{tableData.qualityInspectionManagement.qualityDate}}</td>
          </tr>
          <tr class="row">
            <td class="col col-bgc">杂质（%）</td>
            <td class="col">{{tableData.qualityInspectionManagement.impurity}}</td>
            <td class="col col-bgc">霉变粒（%）</td>
            <td class="col">{{tableData.qualityInspectionManagement.mildewGrain}}</td>
            <td class="col col-bgc">扣杂</td>
            <td class="col">{{tableData.qualityInspectionManagement.buckleMiscellaneous}}</td>
          </tr>
          <tr class="row">
            <td class="col col-bgc">毛重（公斤）</td>
            <td class="col">{{tableData.grossWeight}}</td>
            <td class="col col-bgc">皮重（公斤）</td>
            <td class="col">{{tableData.tare}}</td>
             <td class="col col-bgc">扣重（公斤）</td>
            <td class="col">{{tableData.buckleMiscellaneous}}</td>
            <td class="col col-bgc">净重（公斤）</td>
            <td class="col">{{tableData.netWeight}}</td>
          </tr>
          <tr class="row">
            <td class="col col-bgc" colspan="2">毛重检斤时间</td>
            <td class="col" colspan="2">{{tableData.grossDate}}</td>
            <td class="col col-bgc" colspan="2"> 皮重检斤时间</td>
            <td class="col" colspan="2">{{tableData.tareDate}}</td>
          </tr>
        </table>
        <div class="bottom">
          <div class="bottom-row1">
            <div>毛检：{{tableData.secretaryWeigher}}</div>
            <div style="margin-left:60px">皮检：{{tableData.skinInspector}}</div>
            <!-- <div>{{tableData.qualityDate}}</div> -->
          </div>
          <div class="bottom-row2">
            <div class="left">
              <img :src="tableData.codeUrl" alt="" />
            </div>
            <div class="config">收货单位签名或盖章：</div>
            <div class="autograph">客户签名：</div>
            <div class="autograph">司机签名：</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{
    props: {
      tableData: {
        type: Object
      }
    },
      data(){
          return{

          }
      },
      methods:{
        
            printSmall() {
      window.location.href =
        '../../../../static/weightCheck.html?type=1&tableData=' +
        JSON.stringify(this.tableData)
    },
    printBig() {
      window.location.href =
        '../../../../static/weightCheck.html?type=2&tableData=' +
        JSON.stringify(this.tableData)
    },

      }
}
</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;
  }

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

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

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

    .config {
        margin-top: 20px;
      margin-right: 240px;
    }
    .autograph{
        margin-top: 20px;
        margin-right: 240px;
    }
  }

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

  .bottom-row4 {
    margin-top: 50px;
    text-align: center;
  }
</style>