search

mynameisjohnahahah / Notes

记录平时看到对自己有帮助的内容
0 stars 0 forks source link

lodop控件的使用(打印控件) #11

Open mynameisjohnahahah opened 5 years ago

mynameisjohnahahah commented 5 years ago

lodop

下载地址

然后引入lopodFun.js

import { getLodop } from '@/utils/lopodFun'

打印标签

标签的数据

[[{"group_id":1,"drug_id":3110035100261,"drug_name":"富马酸酮替芬片","spec":"1mg","dose_type":2,"diag_num":1,"unit_take":443,"usage":2,"frequency":2,"days":1,"take_num":1,"take_rate":1,"count":2,"unit_diag":48,"show_count":2,"show_unit":48,"explanation":"","refund_count":0,"is_recycle":0,"price_sell":35,"total_price":70}],[{"group_id":3,"drug_id":3110035100198,"drug_name":"氨茶碱片","spec":"0.1g","dose_type":2,"diag_num":0.1,"unit_take":431,"usage":2,"frequency":3,"days":1,"take_num":0.1,"take_rate":0.1,"count":3,"unit_diag":48,"show_count":3,"show_unit":48,"explanation":"","refund_count":0,"is_recycle":0,"price_sell":18,"total_price":54},{"group_id":3,"drug_id":3110035100203,"drug_name":"醋酸泼尼松片（强的松）","spec":"5mg","dose_type":2,"diag_num":5,"unit_take":443,"usage":2,"frequency":3,"days":1,"take_num":5,"take_rate":5,"count":3,"unit_diag":48,"show_count":3,"show_unit":48,"explanation":"","refund_count":0,"is_recycle":0,"price_sell":16,"total_price":48},{"group_id":3,"drug_id":3110035100203,"drug_name":"醋酸泼尼松片（强的松）","spec":"5mg","dose_type":2,"diag_num":5,"unit_take":443,"usage":2,"frequency":3,"days":1,"take_num":5,"take_rate":5,"count":3,"unit_diag":48,"show_count":3,"show_unit":48,"explanation":"","refund_count":0,"is_recycle":0,"price_sell":16,"total_price":48},{"group_id":3,"drug_id":3110035103897,"drug_name":"头孢克洛颗粒","spec":"0.125g","dose_type":61,"diag_num":1,"unit_take":18,"usage":2,"frequency":3,"days":1,"take_num":2,"take_rate":1,"count":6,"unit_diag":18,"show_count":6,"show_unit":18,"explanation":"","refund_count":0,"is_recycle":0,"price_sell":250,"total_price":1500},{"group_id":3,"drug_id":3110035103897,"drug_name":"头孢克洛颗粒","spec":"0.125g","dose_type":61,"diag_num":1,"unit_take":18,"usage":2,"frequency":3,"days":1,"take_num":2,"take_rate":1,"count":6,"unit_diag":18,"show_count":6,"show_unit":18,"explanation":"","refund_count":0,"is_recycle":0,"price_sell":250,"total_price":1500}]]

HTML代码

<div v-for="(item, k) in labelData" :key="k">
      <div :id="'label' + k">
        <div class="page-label">
          <p>{{ caseData.patient_info.name }}，{{ caseData.patient_info.sex | formatGender }}，{{ patientAge }}，{{ formatDateDD(caseData.register_at) }}</p>
          <div v-if="item.length > 1">
            <div v-for="(items, i) in item" :key="i">
              <p>{{ items.drug_name }}({{ items.spec }})，每次{{ items.take_num }}{{ Unit[items.unit_take] }}，共{{ items.count }}{{ Unit[items.unit_diag] }}</p>
            </div>
          </div>
          <div v-else>
            <p>{{ item[0].drug_name }}({{ item[0].spec }})，每次{{ item[0].take_num }}{{ Unit[item[0].unit_take] }}，共{{ item[0].count }}{{ Unit[item[0].unit_diag] }}</p>
          </div>
          <p class="usage">用法：{{ Usage[item[0].usage] }}，{{ FrequencyDesc[item[0].frequency] }}，{{ item[0].days }}天</p>
        </div>
      </div>
    </div>

JS代码

let  LODOP = getLodop()
// 标签可能存在多个 执行循环打印
this.labelData.forEach((item, i) => {
  let html = document.getElementById(`label${i}`).innerHTML
  let printStyleCss = "<link href='https://geffoliu.cn/test.css' rel='stylesheet' />"
  html = `<head>${printStyleCss}</head></body>` + html + "</body>"
  LODOP.SET_PRINT_PAGESIZE (3, '60mm', '40mm', '');
  LODOP.SET_PRINT_MODE("POS_BASEON_PAPER", true); //设置以纸张边缘为基点
  LODOP.SET_PRINTER_INDEXA("Gprinter  GP-3150TN")
  // LODOP.SET_PRINTER_INDEXA("Microsoft Print to PDF")
  LODOP.ADD_PRINT_HTM(2, 2, "100%", "100%", html)
  LODOP.PRINT()
  // LODOP.PREVIEW()
})

效果图

image

打印收据

HTML

<div class="page-receipt-wrap" id="receipt">
      <div class="page-receipt-bg"></div>
      <div class="page-receipt">
        <div class="page-receipt-content">
          <p class="ele fp-id">1</p>
          <p class="ele title">1</p>
          <p class="ele case-id">1</p><!--流水号、系列号-->
          <p class="ele date"> 1</p><!--日期-->
          <p class="ele name">1</p><!--姓名-->
          <p class="ele western-medicine-fee">1</p><!--西药费-->
          <p class="ele chinese-medicine-fee">1</p><!--中草药费-->
          <p class="ele therapy-fee">1</p><!--治疗费-->
          <p class="ele examination-fee"></p><!--检查费-->
          <p class="ele consumables-fee"></p><!--材料费-->
          <p class="ele consultation-fee"></p><!--诊查费-->
          <p class="ele other-fee"></p><!--其他费用-->
          <p class="ele money-total-tridition"></p><!--金额总计（大写）-->
          <p class="ele money-total"></p><!--金额总计（大写）-->
        </div>
      </div>
    </div>

没给数据，自己想象 😆

JS代码

let LODOP = getLodop()
let html = document.getElementById('receipt').innerHTML
let printStyleCss = "<link href='https://geffoliu.cn/test.css' rel='stylesheet'/>"
html = `<head>${printStyleCss}</head></body>` + html + "</body>"
LODOP.SET_PRINT_PAGESIZE(3, "", "", "0000")
LODOP.SET_PRINTER_INDEXA("EPSON LQ-610K ESC/P2")
LODOP.ADD_PRINT_HTM(2, 2, "100%", "100%", html)
LODOP.PRINT()

效果图

image

❗️ 注意，收据规格是191mm*101mm，机器上的纸张可能没有，需要自己新建一个，以win10为例，打开"打印机和扫描仪"，在右边找到打印机服务器属性，在里面的纸张规格添加一张

image

执行单

执行单数据

[{"2019-02-26":{"1":[{"days":1,"dose":2,"dose_unit":445,"explanation":"","frequency":1,"group_id":1,"medicine_id":3110035100066,"medicine_name":"维D2果糖酸钙注射液（CCO）","spec":"2ml*10支","total_num":1,"total_unit":73,"usage":3},{"days":1,"dose":5,"dose_unit":443,"explanation":"","frequency":1,"group_id":1,"medicine_id":3110035100258,"medicine_name":"地塞米松磷酸钠注射液","spec":"5mg:1ml","total_num":1,"total_unit":73,"usage":3}]}}]

HTML

<div v-for="(exeItem, k) in executeData" :key="k">
      <div :id="'execution' + k">
        <div class="page-a5">
          <div class="print-header">
            <p class="title">{{ caseData.clinic_name || '' }} 执行单{{ k + 1 }}</p>
            <div class="clinical-info">
              <p>
                <span>流水号：<b>{{ caseId }}</b></span>
                <span>收费类别：{{ caseData.charge_info.fee_type || '自费' }}</span>
                <span>科室：{{ caseData.register_info.department_name || '全科' }}</span>
              </p>
              <p>
                <span>医生：{{ caseData.register_info.doctor_name || '' }}</span>
                <span>时间：{{ formatDate(caseData.register_at) }}</span>
              </p>
            </div>
            <p class="patient-info">
              <span>患者姓名：{{ caseData.patient_info.name }}</span>
              <span>性别：{{ caseData.patient_info.sex | formatGender }}</span>
              <span>年龄：{{ patientAge }}</span>
              <span>联系方式：{{ caseData.patient_info.tel }}</span>
            </p>
          </div>
          <div class="print-main">
            <table class="main-table">
              <tr style="height: 10px;">
                <td class="main-top" >
                  <div style="padding: 10px;">
                    <span>中医诊断：{{ caseData.diagnostic_info.tcm_diagnosis }}；</span>
                    <span>西医诊断：{{ caseData.diagnostic_info.western_diagnosis }}；</span>
                    <span>过敏史：{{ caseData.diagnostic_info.anaphylaxis || '无' }}；</span>
                    <span>特殊史：{{ caseData.diagnostic_info.special_disease || '无' }}；</span>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="main-bottom" style="vertical-align: top;">
                  <div>
                    <table v-for="(group, exeDay) in exeItem" :key="exeDay" border="1">
                      <tr><th colspan="10" style="text-align:left;padding-left:10px;">执行日期：{{ exeDay }}</th></tr>
                      <tr>
                        <th style="width:6%;">组别</th>
                        <th style="text-align:left;padding-left:10px;">项目</th>
                        <!-- <th style="width:8%;">规格</th> -->
                        <th style="width:8%;">用法</th>
                        <th style="width:8%;">用量</th>
                        <th style="width:10%;">频次</th>
                        <th style="width:6%;">天数</th>
                        <th style="width:6%;">滴速</th>
                        <th style="width:10%;">执行时间</th>
                        <th style="width:6%;">签名</th>
                        <th style="width:10%;text-align:left;padding-left:10px;">备注</th>
                      </tr>
                      <tr v-for="(item, gid) in group" :key="item.gid">
                        <td>{{ gid }}</td>
                        <td style="text-align:left;padding-left:10px;">
                          <template v-for="x in item">
                            <p class="main-pro" :key="x.medicine_id">{{ x.medicine_name }} （{{ x.spec }}）</p>
                          </template>
                        </td>
                        <td>{{ Usage[item[0].usage] }}</td>
                        <td>
                          <template v-for="x in item">
                            <p :key="x.medicine_id">{{ x.dose }}{{ Unit[x.dose_unit] }}</p>
                          </template>
                        </td>
                        <td>{{ Frequency[item[0].frequency] }}</td>
                        <td>{{ item[0].days }}</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td style="text-align:left;padding-left:10px;">
                          <template v-for="x in item" v-if="x.examination !== undefined && x.examination.length > 0">
                            <span :key="x.medicine_id">{{ x.explanation }}；</span>
                          </template>
                        </td>
                      </tr>
                      <tr><td colspan="11" style="text-align:left;padding-left:10px;line-height: 30px;">签名：</td></tr>
                    </table>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>

JS代码

let LODOP = getLodop()
this.executeData.forEach((item, i) => {
  let html = document.getElementById(`execution${i}`).innerHTML
  let printStyleCss = "<link href='https://geffoliu.cn/test.css' rel='stylesheet' />"
  html = `<head>${printStyleCss}</head></body>` + html + "</body>"
  LODOP.SET_PRINT_PAGESIZE(3, "", "", "A5")
  // LODOP.SET_PRINT_MODE("POS_BASEON_PAPER", true); //设置以纸张边缘为基点
  // LODOP.SET_PRINTER_INDEXA("Microsoft Print to PDF")
  LODOP.SET_PRINTER_INDEXA("HP0A042F (HP DeskJet 2600 series)")
  LODOP.SET_PRINT_MODE("CATCH_PRINT_STATUS", 1)

   LODOP.ADD_PRINT_HTM(2, 2, "100%", "100%", html)
   LODOP.PRINT()
})

效果图

image

mynameisjohnahahah commented 5 years ago

关于lodop的一些说明

官网 购买地址 API