guangda/src/page/purchase/components/balance/balancePrint.vue

<template>
  <div>
    <Card style="width:100%" :bordered="false" :dis-hover="true">
      <p slot="title">打印采购申请表</p>
      <div slot="extra">
        <Button style="width: 80px" v-print="'#printForm'">打印</Button>
        <Button @click="$emit('return')" style="width: 80px">返回</Button>
      </div>
      <div id="printForm">
        <div class="head">
          <img class="logo" src="../../../../assets/images/dgdlogo.png" alt />
          <h2>结算单</h2>
        </div>
        <Row>
          <Col :span="8" class="infor">供应商：</Col>
          <Col :span="8" class="infor">采购订单：</Col>
          <Col :span="8" class="infor">申购单号：</Col>
          <Col :span="8" class="infor">供方负责人</Col>
          <Col :span="8" class="infor">FAX：</Col>
          <Col :span="8" class="infor">TEL：</Col>
          <Col :span="8" class="infor">账号：</Col>
          <Col :span="16" class="infor">开户行：</Col>
          <Col :span="8" class="infor">申购部门：</Col>
          <Col :span="8" class="infor">申购人：</Col>
          <Col :span="8" class="infor">申购人联系电话：</Col>
        </Row>
        <table border="1">
          <thead>
            <tr>
              <th style="width: 50px">序号</th>
              <th style="width: 110px">材料名称</th>
              <th style="width: 150px">品牌</th>
              <th style="width: 100px">规格型号</th>
              <th style="width: 50px">单位</th>
              <th style="width: 50px">数量</th>
              <th style="width: 80px">单价（元）</th>
              <th style="width: 80px">结算金额</th>
              <th style="width: 200px">备注</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in 2" :key="item">
              <td>{{ item }}</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td>合计</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td>-总价-</td>
              <td></td>
            </tr>
          </tbody>
        </table>
        <Row>
          <Col :span="12" class="foot">下单日期：</Col>
          <Col :span="12" class="foot">审核日期：</Col>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  name: "balancePrint",
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
ivu-card-head-inner,
.ivu-card-head p {
  display: inline-block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #17233d;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: normal;
}
#printForm {
  width: 800px;
  margin: 0 auto;
  .head {
    text-align: center;
    position: relative;
    .logo {
      position: absolute;
      top: 0;
      left: 0;
      height: 40px;
    }
    h2 {
      font-size: 35px;
      letter-spacing: 15px;
    }
    p {
      font-size: 18px;
    }
  }
  .line {
    height: 1px;
    background: #000;
    margin-bottom: 3px;
  }
  .infor {
    line-height: 30px;
  }
  .foot {
    line-height: 40px;
    text-align: center;
  }
  table {
    th,
    td {
      text-align: center;
      line-height: 30px;
      font-weight: normal;
      .square {
        display: inline-block;
        width: 10px;
        height: 10px;
        border: 1px solid black;
        margin-right: 2px;
      }
      p {
        padding-left: 5px;
      }
    }
  }
}
</style>