abb-antd/src/views/sqarepartmanage/report/modules/PrintSparePartMonthReport.vue

<template>
  <div class="print-content" v-show="visible">
    <a-row :gutter="48" slot="extra">
      <a-col :md="48" :sm="48">
        <span class="table-page-search-submitButtons" style="float: right">
          <a-button type="primary" v-print="'#print-container2'" :disabled="disabled">打印</a-button>
          <a-button style="margin-left: 8px" @click="handleCancel()">返回列表</a-button>
        </span>
      </a-col>
    </a-row>
    <div class="container" id="print-container2">
      <div class="text-center" style="position:relative;font-size:20px;font-weight:bold">
        Hitachi<br/> 备件月统计报表
      </div>
      <div>
        <div class="col-md-4 text-center" style="padding: 0">统计周期: {{ record.startMonth }} 至 {{ record.endMonth }}</div>
      </div>
      <table class="gridtable list">
        <tbody>
          <tr>
            <td class="text-center">月份</td>
            <td class="text-center">更换备件总数</td>
            <td class="text-center">更换备件总价值(元)</td>
          </tr>
          <tr :key="index" v-for="(item,index) in items">
            <td class="text-center">{{ item.month}}</td>
            <td class="text-center">{{ item.totalNum }}</td>
            <td class="text-center">{{ item.totalPrice }}</td>
          </tr>
        </tbody>
      </table>
      <div class="row">
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/util'

export default {
  name: 'PrintSparePartMonthReport',
  components: { },
  data () {
    return {
      visible: false,
      disabled: true,
      record: {},
      count: 0,
      items: [],
      user: this.$store.getters.userInfo
      // 下拉框map
    }
  },
  props: {},
  created () {
    // 下拉框map
  },
  computed: {
  },
  methods: {
    base (record) {
      this.disabled = true
      this.visible = true
      this.record = record
      this.items = record.data
      this.disabled = false
    },
    formatDateEn (value) {
      return formatDate(new Date(value), 'yyyy-MM-dd')
    },
    handleCancel (values) {
      this.visible = false
      this.$emit('ok', values)
    }
  }
}
</script>
<style media=print>
/* 应用这个样式的在打印时隐藏 */
.noPrint {
  display: none;
}

/* 应用这个样式的，从那个标签结束开始另算一页，之后在遇到再起一页，以此类推 */
.page {
  page-break-after: always;
}
</style>
<style>
.print-content{
  width: 1123px;
  background-color: #fff;
}

#print-container2 * {
  font-family: SimHei !important;
  color: #333447;
  line-height: 1.5;
}

.container {
  width: 95%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

table.gridtable {
  width: 100%;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
}

table.gridtable th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
}

table.gridtable td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
}

table.content td {
  height: 95px;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.container:before,
.container:after,
.row:before, .row:after {
  display: table;
  content: " ";
}

.container:after, .row:after {
  clear: both;
}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
  float: left;
}

.col-md-12 {
  width: 100%;
}

.col-md-11 {
  width: 91.66666667%;
}

.col-md-10 {
  width: 83.33333333%;
}

.col-md-9 {
  width: 75%;
}

.col-md-8 {
  width: 66.66666667%;
}

.col-md-7 {
  width: 58.33333333%;
}

.col-md-6 {
  width: 50%;
}

.col-md-5 {
  width: 41.66666667%;
}

.col-md-4 {
  width: 33.33333333%;
}

.col-md-3 {
  width: 25%;
}

.col-md-2 {
  width: 16.66666667%;
}

.col-md-1 {
  width: 8.33333333%;
}
</style>