client-mazu/src/components/SmallTicketPrintTemplate.vue

<template>
  <div
    class="print-wrap"
    v-show="true"
  >
    <div
      id="printMe"
      ref="printMe"
      :style="{}"
      v-if="customStyle"
    >
      <div
        class="wrap"
        v-for="(layout,index) in customStyle"
        :key="index">
        <div
          :style="layout"
          v-for="(child,idx) in layout.children"
          :key="idx">
          <div
            :style="el.style"
            v-for="(el,i) in child"
            :key="i">
            <div v-if="el.type==='ticketInfo'">
              <table
                class="table"
              >
                <tr>
                  <th>项目名</th>
                  <th>单位</th>
                  <th>数量</th>
                  <th>单价</th>
                  <th>金额</th>
                </tr>
                <tr
                  v-for="(item,j) in orderInfo"
                  :key="j">
                  <td>{{ item.tname }}</td>
                  <td>张</td>
                  <td>{{ item.num }}</td>
                  <td>{{ item.price }}</td>
                  <td>{{ item.totalPrice }}</td>
                </tr>
              </table>
            </div>

            <div v-if="el.type==='prepayment'">
              <span v-if="info.payChannel==='旅行社余额'">
                {{ el.nickname }} {{ info[el.key] }}
              </span>
            </div>

            <div v-else>
              <span v-if="el.isStatic">
                {{ el.nickname }} {{ el.content }}
              </span>
              <span v-else>
                <span v-if="info[el.key]">{{ el.nickname }} {{ info[el.key] }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  computed: {
    printTemplate () {
      return this.$store.state.app.smallTicketTemplate
    },
    showUnit () {
      return this.scenicName !== '狼山景区' && this.scenicName !== '军山景区'
    },
    scenicName () {
      return this.$localStore.get('scenicName') || this.$store.state.user.scenicName
    }
  },
  data () {
    return {
      qrImg: '',
      customStyle: null,
      info: {},
      orderInfo: []
    }
  },
  props: {
    preview: { // 仅预览时，不打印
      type: Boolean,
      default: false
    },
    currentOrder: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    startPrint () {
      const webview = document.querySelector('#printSmallTicketWebview')
      let printDoc = this.$refs.printMe.outerHTML
      if (this.preview) {
        console.log(printDoc)
        // return
      }
      // webview.openDevTools()
      webview.send('webview-print-render', printDoc)
    },
    sendPrinter (style) {
      this.getOrderInfo()

      if (style) {
        this.customStyle = JSON.parse(JSON.stringify(style))

        this.$nextTick(() => {
          this.startPrint()
        })
      } else {
        this.startPrint()
      }
    },
    getOrderInfo () {
      const orderInfo = []

      this.currentOrder.tickets.forEach(ticket => {
        let target = orderInfo.find(i => i.ticketTypeId === ticket.ticketTypeId)

        if (target) {
          target.num++
          target.totalPrice += ticket.price
        } else {
          ticket.num = 1
          ticket.totalPrice = ticket.price
          orderInfo.push(ticket)
        }
      })

      this.orderInfo = orderInfo

      const { performName, batchConfigName, ticket_price_plan_name } = this.currentOrder.tickets[0]

      this.currentOrder.createTime = moment(this.currentOrder.createTime).format('YYYY-MM-DD HH:mm:ss')

      this.info = {
        ...this.currentOrder,
        performName,
        batchConfigName,
        ticket_price_plan_name
      }
    }
  },
  watch: {
    printTemplate: {
      handler (val) {
        if (val) {
          this.customStyle = val
        }
      },
      deep: true,
      immediate: true
    },
    currentOrder: {
      handler (val) {
        if (!val) return
        this.getOrderInfo()
        let target
        let id = this.$localStore.get('defaultSmallTicketTemplate')
        target = this.$store.state.app.smallTicketTemplateList.find(i => i.id === id)

        this.$store.commit('SET_SMALL_TICKET_TEMPLATE', target ? JSON.parse(target.content) : this.printTemplate)
        this.$nextTick(() => {
          if (this.preview) return

          setTimeout(() => {
            this.sendPrinter()
          }, 100)
        })
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.img {
  height: 100%; background: no-repeat center center /contain;
}
.table {
  width: 100%;  text-align: center; border-top: 1px dashed #000;border-bottom: 1px dashed #000;
  th {
    border-bottom: 1px dashed #000;
  }
}
.print-wrap {
  background: #fff;
}
* {
  box-sizing: border-box;
}
.wrap{
    display: flex;
}
</style>