ConsumSupplier-Platform/src/views/components/printTable.vue

<template>
  <div>
    <div v-for="(im, inx) in taData" :key="inx">
      <div style="width:100%;height:50px;text-align:center;line-height:50px;">
        {{ userName }}
      </div>
      <table class="printTable" border="1" style="table-layout: auto">
        <thead>
          <tr>
            <th
              v-for="(item, index) in tableHeader"
              :key="index"
              :style="{ minWidth: item.minWidth + 'px' }"
            >
              {{ item.label }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in im" :key="index">
            <td v-for="(itm, idx) in tableHeader" :key="idx">
              <span v-if="itm.value == 'iFas'">
                <span v-if="item.isFas == '0'">否</span>
                <span v-if="item.isFas == '1'">是</span>
              </span>
              <span v-if="itm.value == 'serial'"> {{ index + 1 }}</span>
              <span v-else> {{ item[itm.value] }}</span>
            </td>
          </tr>
          <tr>
            <td>合计</td>
            <td colspan="5">{{ chaseData(im) }}</td>
            <td>{{ amtNumber(im) }}</td>
            <td colspan="7"></td>
          </tr>
        </tbody>
      </table>
      <div class="fot-val">
        {{ tableLabel }}
        <br />
        <br />
        &nbsp; &nbsp; &nbsp; &nbsp;{{ time }}
      </div>
      <div style="page-break-after: always"></div>
    </div>
  </div>
</template>
<script>
import { numberToChineseAmount } from "@/utils/utils";
import moment from "moment";
export default {
  components: {},
  data() {
    return {
      tableLabel: "",
      taData: [],
      userName: "",
      numBeroMount: "",
      time: ""
    };
  },
  props: {
    tableHeader: {
      type: Array,
      default: []
    },
    tableData: {
      type: Array,
      default: []
    }
  },
  methods: {
    paginData(arr, num) {
      let newArr = [];
      for (let i = 0; i < arr.length; ) {
        //注意：这里与for循环不太一样的是，没有i++
        newArr.push(arr.slice(i, (i += num)));
      }
      return newArr;
    },
    amtNumber(item) {
      let nub = 0;
      item.forEach(item => {
        nub += Number(item.amt);
      });
      let pasNub = parseFloat(nub.toFixed(4));
      return pasNub + "元";
    },
    chaseData(item) {
      let nub = 0;
      item.forEach(item => {
        nub += Number(item.amt);
      });
      let pasNub = parseFloat(nub.toFixed(4));
      let newNub = numberToChineseAmount(pasNub);
      return newNub;
    }
  },
  mounted() {
    let stopTime = moment(new Date()).format("YYYY-MM-DD");
    this.time = stopTime;
    this.userName =
      this.$route.query.branchName +
      "----" +
      this.$route.query.stmtPrd +
      "结算单";
    this.tableLabel = this.$store.state.user.username;
    let newData = this.paginData(this.tableData, 15);
    this.taData = newData;
  }
};
</script>

<style scoped lang="scss">
.printTable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0px;
  tr {
    td {
      padding: 5px;
      border: 1px solid black;
      text-align: center;
    }
    th {
      padding: 3px;
    }
  }
}
</style>
<style media="print" lang="scss">
@media print {
  html {
    zoom: 75%;
  }
  @page {
    size: auto; /* 重置页面大小，避免出现空白页 */
    margin-top: 10mm; /* 取消页眉 */
    margin-left: 6mm; /* 取消默认的左右页边距 */
    margin-right: 45mm; /* 取消默认的左右页边距 */
  }
}
.fot-val {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 50px;
}
</style>