his/openhis-ui-vue3/src/components/Auto/printBills/injectLabel.vue

<template>
  <div ref="print">
    <div class="printInjectCard">
      <div :id="printData.id + 'div1'">
        <div style="display:block; height: 60px; width: 280px; float:left;">
          <span style="font-weight: bolder; font-size: 16px; line-height: 36px; margin-left: 160px;">急诊输液贴</span>
          <div>
            <span style="margin-left: 8px;">{{ printData.patient.hisNo }}</span>
            <span style="margin-left: 8px;">{{ printData.patient.name }}</span>
            <span style="margin-left: 8px;">{{ printData.patient.sexName }}</span>
            <span style="margin-left: 8px;">{{ printData.patient.patientAge }}</span>
          </div>
        </div>
        <div style="display: block; width: 120px; height: 60px; float:left; ">
          <div
            :id="getId(printData.id)"
            style="float: left; margin: 5px;"
          />
          <span style="float: left; margin: 5px">{{ printData.priority }}</span>
        </div>
      </div>
      <div :id="printData.id + 'div2'">
        <table
          border="1"
          cellSpacing="0"
          width="390px"
          cellPadding="1"
          style="margin-left: 8px; border-collapse:collapse; table-layout: fixed; font-size: 14px"
          bordercolor="#333333"
        >
          <thead>
            <TR>
              <Th
                style="width: 160px"
                v-html="'药品名称'"
              />
              <Th
                style="width: 75px"
                v-html="'用量'"
              />
              <Th
                style="width: 10px"
                v-html="''"
              />
              <Th
                style="width: 50px"
                v-html="'频次'"
              />
              <Th
                style="width: 75px"
                v-html="'用法'"
              />
            </TR>
          </thead>
          <tbody>
            <tr
              v-for="item in printData.orderDetail"
              :key="item.id"
            >
              <td v-html="item.orderName" />
              <td v-html="item.doseOnce + item.doseUnit" />
              <td v-html="item.flag" />
              <td v-html="item.frequency" />
              <td v-html="item.usageName" />
            </tr>
          </tbody>
        </table>
      </div>
      <div :id="printData.id + 'div3'">
        <span>日期：</span>
        <span>{{ moment().format('YYYY-MM-DD HH:mm') }}</span>
      </div>
    </div>
  </div>
</template>
<script>
// 迁移到 hiprint
import { simplePrint, PRINT_TEMPLATE } from '@/utils/printUtils.js'
import moment from 'moment'

export default {
  name: 'VuePrintNb',
  props: {
    printData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      lastId: '',
      qrCode: ''
    }
  },
  mounted() {},
  methods: {
    /**
     * 使用 hiprint 执行打印
     * @param {string} printerName 打印机名称
     */
    async print(printerName) {
      console.log(this.printData, 'printData')
      try {
        // 构建打印数据
        const orderDetail = this.printData.orderDetail || []
        const qrCode = orderDetail[0] ? (orderDetail[0].comboNo + orderDetail[0].executionSeq) : ''

        // 转换药品明细数据
        const formattedOrderDetail = orderDetail.map(item => ({
          orderName: item.orderName,
          doseOnceUnit: (item.doseOnce || '') + (item.doseUnit || ''),
          flag: item.flag || '',
          frequency: item.frequency || '',
          usageName: item.usageName || ''
        }))

        const printData = {
          hisNo: this.printData.patient ? this.printData.patient.hisNo : '',
          name: this.printData.patient ? this.printData.patient.name : '',
          sexName: this.printData.patient ? this.printData.patient.sexName : '',
          patientAge: this.printData.patient ? this.printData.patient.patientAge : '',
          priority: this.printData.priority || '',
          qrCode: qrCode,
          orderDetail: formattedOrderDetail,
          printDate: moment().format('YYYY-MM-DD HH:mm')
        }
        // 使用 hiprint 打印
        await simplePrint(PRINT_TEMPLATE.INJECT_LABEL, printData, printerName)
      } catch (error) {
        console.error('输液标签打印失败:', error)
        if (this.openMesBox) {
          this.openMesBox('6', '打印失败: ' + (error.message || '未知错误'))
        }
      }
    }
  }
}
</script>
<style lang="less">
  .printInjectCard{
    display: grid;
    width: 400px;
    grid-template-rows: 60px 205px 30px;
    border: solid #555 1px;
    background-color: #FFFFFF;

    td{
      padding-left: 3px;
    }
  }
  @page{
    size: auto;
    margin: 32px;
  }
</style>