client-mazu/src/components/PrintTemplate.vue

<template>
  <div
    class="print-wrap"
    v-show="true"
  >
    <div
      id="printMe"
      ref="printMe"
      v-if="elementStyle"
      :data-ticket-no="currentTicket && (currentTicket.ticketNo || '')"
      :style="[elementStyle.canvas,defaultTemplate==='horizen'?{width:elementStyle.canvas.height,height:elementStyle.canvas.width}:{}]"
    >
      <div
        v-if="currentTicket"
        :style="[{ position: 'relative',width: elementStyle.canvas.width,height:elementStyle.canvas.height},defaultTemplate==='horizen'?{transform:elementStyle.canvas.reverse?'translateX(50%) rotate(90deg)':'translateX(-100%) rotate(-90deg)', transformOrigin:elementStyle.canvas.reverse?'0 0':'100% 0'}:{ transform:elementStyle.canvas.reverse?'rotate(180deg)':''}]">
        <div
          class="el sign"
          :style="elementStyle.sign">
          窗
        </div>

        <span
          v-if="projectName!=='mazu'"
          class="el"
          :style="elementStyle.num">
          - NO.{{ isNaN(currentTicket.index)? 1 : currentTicket.index + 1 }} -
        </span>
        <span
          v-else
          class="el"
          :style="elementStyle.num">
          - NO.{{ isNaN(currentTicket.id)? '00000000' : currentTicket.id.toString().padStart(8,'0') }} -
        </span>

        <template>
          <span
            class="el"
            v-if="!currentTicket.is_otaorder && !currentTicket.teamId"
            :style="elementStyle.price">
            <i style="font-size:0.8em; font-style:normal">{{ elementStyle.price&&elementStyle.price.format }}</i> ¥ {{ currentTicket.isPrint_price_active ? currentTicket.print_price*currentTicket.checkNum : currentTicket.price }} <span v-if="showUnit">元</span>
          </span>

          <span
            class="el"
            v-if="!currentTicket.is_otaorder && !currentTicket.teamId"
            :style="elementStyle.singlePrice">
            <i style="font-size:0.8em; font-style:normal">{{ elementStyle.singlePrice&&elementStyle.singlePrice.format }}</i> ¥ {{ currentTicket.isPrint_price_active ? currentTicket.print_price : $NP.divide(currentTicket.price, currentTicket.checkNum) }} <span v-if="showUnit">元</span>
          </span>
        </template>

        <div :style="elementStyle.orderNo">
          {{ elementStyle.orderNo&&elementStyle.orderNo.format || '订单号：' }}{{ currentTicket.orderNo }}
        </div>

        <div
          :style="elementStyle.saleAdminName">
          {{ elementStyle.saleAdminName&&elementStyle.saleAdminName.format||'售票员：' }}{{ currentTicket.saleAdminName }}
        </div>

        <div
          :style="elementStyle.guestName"
          v-if="(currentTicket.buyerName||currentTicket.guestName)">
          {{ elementStyle.guestName&&elementStyle.guestName.format||'游客：' }} {{ currentTicket.guestName || currentTicket.buyerName }}
          <span v-if="currentTicket.guestIdentify && elementStyle.guestName&&elementStyle.guestName.showId">（{{ currentTicket.guestIdentify.replace(/^(.{6})(?:\d+)(.{4})$/,"$1******$2") }}）</span>
        </div>

        <div
          :style="elementStyle.teamName">
          {{ elementStyle.teamName&&elementStyle.teamName.format||'团队名称：' }} {{ currentTicket.teamName }}
        </div>

        <div :style="elementStyle.ticketId">
          {{ elementStyle.ticketId&&elementStyle.ticketId.format || '票号：' }}{{ currentTicket.ticketNo }}
        </div>
        <div
          :style="elementStyle.createTime">
          {{ elementStyle.createTime&&elementStyle.createTime.format || '出票时间：' }}{{ fmtTime(currentTicket.buyTime) }}
        </div>

        <div :style="elementStyle.scenics">
          {{ scenics }}
        </div>

        <div v-if="elementStyle.scenic" :style="elementStyle.scenic">
          <div :style="((elementStyle.scenic && (elementStyle.scenic.direction==='inline'|| !elementStyle.scenic.direction))?{}:{display: 'flex','flex-direction': 'column'})">
            <template v-if="elementStyle.scenic && elementStyle.scenic.number==='0'">
              <span
                style="margin-right:5px"
                v-for="(item,index) in scenicList"
                :key="index">
                {{ item.scenicName }} {{ item.checkLimitTimes }}次<span v-if="index!==(scenicList.length-1)">,</span>
              </span>
            </template>
            <template v-else>
              <span
                style="margin-right:5px"
                v-for="(item,index) in scenicList.slice(0,elementStyle.scenic.number||2)"
                :key="index">
                {{ item.scenicName }} {{ item.checkLimitTimes }}次<span v-if="elementStyle.scenic.number>scenicList.length?index!==(scenicList.length-1):index!==(elementStyle.scenic.number||2)-1">,</span>
              </span>

              <span v-if="elementStyle.scenic.number<scenicList.length">...(多景点门票)</span>
            </template>
          </div>
        </div>

        <div :style="elementStyle.ticketTypeName">
          {{ elementStyle.ticketTypeName&&elementStyle.ticketTypeName.format || '' }}{{ currentTicket.ticketTypeName }}
        </div>

        <div
          class="img"
          :style="[elementStyle.qrcode,{backgroundImage:`url(${qrImg})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', backgroundSize: 'contain', display: qrImg ? 'block' : 'none'}]">
        </div>

        <!--
        <div
          v-if="currentTicket.invoiceQrcode"
          class="img-wrap"
          :style="[elementStyle.invoiceQrcode,{display:currentTicket.invoiceQrcode?'block':'none'}]">
          <div
            class="img"
            :style="{backgroundImage:`url(${fpImg})`,height:'100%'}">
          </div>

          <div v-if="elementStyle.invoiceQrcode">
            {{ elementStyle.invoiceQrcode&&elementStyle.invoiceQrcode.format }}
          </div>
        </div>
        -->
        <!-- 不需要再设置display，否则它会覆盖elementStyle里设置的display -->
        <!-- <div
          v-if="currentTicket.invoiceQrcode"
          class="img-wrap"
          :style="[elementStyle.invoiceQrcode]">
          <div
            class="img"
            :style="{backgroundImage:`url(${fpImg})`,height:'100%'}">
          </div>

          <div v-if="elementStyle.invoiceQrcode">
            {{ elementStyle.invoiceQrcode&&elementStyle.invoiceQrcode.format }}
          </div>
        </div> -->

        <!--
        <div
          v-if="currentTicket.allInvoiceQrcode"
          class="img-wrap"
          :style="[elementStyle.allInvoiceQrcode,{display:currentTicket.allInvoiceQrcode?'block':'none'}]">
          <div
            class="img"
            :style="{backgroundImage:`url(${afpImg})`,height:'100%'}">
          </div>

          <div v-if="elementStyle.allInvoiceQrcode">
            {{ elementStyle.allInvoiceQrcode.format }}
          </div>
        </div>
        -->

        <!-- 不需要再设置display，否则它会覆盖elementStyle里设置的display -->
        <!-- <div
          v-if="currentTicket.allInvoiceQrcode"
          class="img-wrap"
          :style="[elementStyle.allInvoiceQrcode]">
          <div
            class="img"
            :style="{backgroundImage:`url(${afpImg})`,height:'100%'}">
          </div>

          <div v-if="elementStyle.allInvoiceQrcode">
            {{ elementStyle.allInvoiceQrcode.format }}
          </div>
        </div> -->

        <div :style="elementStyle.playDateBegin">
          <span v-if="currentTicket.isNeedPlaytime">
            {{ elementStyle.playDateBegin&&elementStyle.playDateBegin.format||'游玩日期：' }}{{ currentTicket.playDateBegin | formatDate }} <br>
          </span>
          <span v-else>
            有效日期: {{ currentTicket.playDateBegin | formatDate }}<span v-if="currentTicket.playDateBegin !== currentTicket.playDateEnd"> 至 {{ currentTicket.playDateEnd | formatDate }}</span><br>
          </span>
        </div>

        <!-- <div
          v-if="elementStyle.playDateBegin"
          :style="elementStyle.playDateBegin">
          {{ elementStyle.playDateBegin&&elementStyle.playDateBegin.format||'游玩日期：' }}{{ currentTicket.playDateBegin | formatDate }}
        </div> -->

        <div
          :style="elementStyle.orderRemark"
          v-if="currentTicket.remark">
          {{ elementStyle.orderRemark&&elementStyle.orderRemark.format||'订单备注：' }}{{ currentTicket.remark || '' }}
        </div>
        <!-- <div
          :style="elementStyle.performName"
          v-if="currentTicket.performName">
          {{ elementStyle.performName&&elementStyle.performName.format||'节目：' }}{{ currentTicket.performName }}
          {{ elementStyle.performName&&elementStyle.performName.format||'节目：' }}{{ '草房子' === scenicName ? '' : currentTicket.performName }}
        </div> -->

        <div
          :style="elementStyle.batchConfigName"
          v-if="currentTicket.batchConfigName">
          {{ elementStyle.batchConfigName&&elementStyle.batchConfigName.format||'场次：' }}{{ currentTicket.batchConfigName }}
        </div>

        <!-- <div
          :style="elementStyle.serialNumber"
          v-if="currentTicket.serialNumber">
          {{ elementStyle.serialNumber&&elementStyle.serialNumber.format||'场次内序号：' }}{{ currentTicket.serialNumber }}
        </div> -->

        <!-- <div
          :style="elementStyle.queueSerialNumber"
          v-if="currentTicket.queue_info">
          <span>{{ elementStyle.queueSerialNumber&&elementStyle.queueSerialNumber.format||'排队序列号：：' }}</span>
          <span> {{ currentTicket.queue_info.queue_serialNumber }}</span>
        </div> -->

        <!-- <div
          :style="elementStyle.schedule"
          v-if="currentTicket.scheduleConfigName">
          {{ elementStyle.schedule&&elementStyle.schedule.format||'班次：' }}{{ currentTicket.scheduleConfigName }}
        </div> -->

        <!-- <div
          :style="elementStyle.scheduleSerialNumber"
          v-if="currentTicket.scheduleSerialNumber">
          {{ elementStyle.scheduleSerialNumber&&elementStyle.scheduleSerialNumber.format||'班次内序号：' }}{{ currentTicket.scheduleSerialNumber }}
        </div> -->

        <!-- <div
          :style="elementStyle.areaName"
          v-if="currentTicket.seatAreaName">
          {{ elementStyle.areaName&&elementStyle.areaName.format||'区域：' }}{{ currentTicket.seatAreaName }}
        </div> -->

        <!-- <div
          :style="elementStyle.pricePlan"
          v-if="currentTicket.ticket_price_plan_name">
          {{ elementStyle.pricePlan&&elementStyle.pricePlan.format||'价格方案：' }}{{ currentTicket.ticket_price_plan_name }}
        </div> -->

        <!-- <div
          :style="elementStyle.seatNameNew"
          v-if="currentTicket.seatNameNew">
          {{ elementStyle.seatNameNew&&elementStyle.seatNameNew.format||'A区' }}{{ currentTicket.seatNameNew }}
        </div> -->

        <!-- <div
          :style="elementStyle.rowTag"
          v-if="currentTicket.seatRowTag">
          {{ currentTicket.seatRowTag }}{{ elementStyle.rowTag&&elementStyle.rowTag.format||'排' }}
        </div> -->

        <!-- <div
          :style="elementStyle.seatName"
          v-if="currentTicket.seatName">
          {{ currentTicket.seatName }}{{ elementStyle.seatName&&elementStyle.seatName.format||'座' }}
        </div> -->

        <div
          :style="elementStyle.batchConfigName"
          v-if="currentTicket.batchConfigName">
          {{ elementStyle.batchConfigName&&elementStyle.batchConfigName.format||'场次：' }}{{ currentTicket.batchConfigName }}
        </div>

        <!-- <div
          :style="elementStyle.schedule"
          v-if="currentTicket.scheduleConfigName">
          {{ elementStyle.schedule&&elementStyle.schedule.format||'班次：' }}{{ currentTicket.scheduleConfigName }}
        </div> -->

        <!-- <div
          :style="elementStyle.areaName"
          v-if="currentTicket.seatAreaName">
          {{ elementStyle.areaName&&elementStyle.areaName.format||'区域：' }}{{ currentTicket.seatAreaName }}
        </div> -->

        <div :style="elementStyle.checkNum">
          {{ elementStyle.checkNum&&elementStyle.checkNum.format||'检票人数：' }}{{ currentTicket.checkNum }} 人
        </div>

        <div :style="elementStyle.remark">
          {{ elementStyle.remark&&elementStyle.remark.format||'' }}<span
            style="white-space: pre-wrap;"
            v-html="elementStyle.canvas.remark.replace(/\n/g,'<br>')">
          </span>
        </div>

        <div :style="elementStyle.fixedText">
          {{ elementStyle.fixedText&&elementStyle.fixedText.format||'固定文字：' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  computed: {
    elementStyle () {
      let style = {}
      if (this.customStyle) {
        this.customStyle.elements.forEach(i => {
          style[i.type] = i.style
        })
        style.canvas = this.customStyle.canvas

        if (!style.scenic) {
          style.scenic = { display: 'none' }
        }
      }
      console.log(this.customStyle || style)
      // let eKeys = ''
      // for (let i in this.customStyle.elements) {
      //   eKeys += this.customStyle.elements[i].type + ','
      // }
      // console.log('e keys', eKeys)
      return this.customStyle ? style : null
    },
    scenicList () {
      return this.currentTicket?.ticketScenic || this.currentTicket?.ticketCheckScenicList || []
    },
    scenics () {
      if (this.currentTicket) {
        const scenics = this.scenicList.map(i => i.scenicName)
        return scenics.join(' - ')
      } else {
        return ''
      }
    },
    printTemplate () {
      return this.$store.state.app.printTemplate
    },
    showUnit () {
      return this.scenicName !== '狼山景区' && this.scenicName !== '军山景区'
    },
    scenicName () {
      return this.$localStore.get('scenicName') || this.$store.state.user.scenicName
    },
    projectName () {
      return this.$store.state.app.projectName
    }
  },
  data () {
    return {
      qrImg: '',
      fpImg: '',
      afpImg: '',
      customStyle: null,
      defaultTemplate: ''
    }
  },
  props: {
    preview: { // 仅预览时，不打印
      type: Boolean,
      default: false
    },
    currentTicket: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    fmtTime (time) {
      if (!time) return ''
      const d = new Date(time)
      const pad = n => String(n).padStart(2, '0')
      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
    },
    startPrint () {
      const webview = document.querySelector('#printWebview')
      let printDoc = this.$refs.printMe.outerHTML
      // if (this.preview) {
      // return
      // }
      // webview.openDevTools()
      this.$log.warn(`[print-queue] 发送门票渲染到 webview，票号：${this.currentTicket && this.currentTicket.ticketNo}`)
      webview.send('webview-print-render', printDoc)
    },
    sendPrinter (style) {
      if (style) {
        this.customStyle = JSON.parse(JSON.stringify(style))
        this.defaultTemplate = this.customStyle.theme

        this.$nextTick(() => {
          this.startPrint()
        })
      } else {
        this.startPrint()
      }
    }
  },
  watch: {
    printTemplate: {
      handler (val) {
        if (val) {
          this.defaultTemplate = val.canvas && val.canvas.direction
          // console.log(this.defaultTemplate)
          this.customStyle = val
        }
      },
      deep: true,
      immediate: true
    },
    currentTicket: {
      handler (val) {
        if (!val) return
        let target
        const printTemplateId = val.printTemplateId || val.print_model_id
        this.$log.warn(`[print-queue] 渲染门票 票号：${val.ticketNo || ''}，序号：${val.index}`)
        console.log('current ticket printTemplateId', printTemplateId)

        if (printTemplateId) {
          target = this.$store.state.app.printTemplateList.find(i => i.id === printTemplateId)
        } else {
          let id = this.$localStore.get('defaultTemplate')
          target = this.$store.state.app.printTemplateList.find(i => i.id === id)
        }
        console.log('selected print template', target && JSON.parse(target.content))

        if (!target) {
          target = this.$store.state.app.printTemplateList.find(i => i.isDefault) || this.$store.state.app.printTemplateList[0]
        }

        this.$store.commit('SET_PRINT_TEMPLATE', target ? JSON.parse(target.content) : this.printTemplate)
        this.$nextTick(async () => {
          var opts = {
            errorCorrectionLevel: 'H',
            type: 'image/png',
            quality: 1,
            color: {
              dark: '#000000ff', // Blue dots
              light: '#0000' // Transparent background
            }
          }

          if (this.currentTicket.ticketNo) {
            this.qrImg = await QRCode.toDataURL(this.currentTicket.ticketNo, opts)
          }

          if (this.currentTicket.invoiceQrcode) {
            this.fpImg = await QRCode.toDataURL(this.currentTicket.invoiceQrcode, opts)
          }

          if (this.currentTicket.allInvoiceQrcode) {
            this.afpImg = await QRCode.toDataURL(this.currentTicket.allInvoiceQrcode, opts)
          }
          console.warn('print ticket', this.currentTicket)
          if (this.preview) return

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

<style scoped>
.img{
  height: 100%;
  background: no-repeat center center /contain;
}
</style>