web_dist/src/views/clinic/MzGuideBill.vue

<template>
  <el-container>
    <el-header style="height: 35px; margin-top: 10px">
      <el-input v-model="patientId" style="width: 220px" clearable @keyup.enter="fetchList">
        <template #prepend>门诊id号</template>
      </el-input>
      <el-button icon="Search" type="primary" @click="fetchList">检索</el-button>
      <el-button type="primary" icon="RefreshLeft" @click="reset">重置</el-button>
      <el-button type="primary" icon="Printer" @click="printObj">打印</el-button>
    </el-header>
    <el-container>
      <el-aside width="330px">
        <el-table ref="listTable" :data="roughList" @row-click="fetchDetail" :height="tableHeight" highlight-current-row>
          <el-table-column prop="deptName" label="执行科室"></el-table-column>
          <el-table-column prop="doctorName" label="执行医生"></el-table-column>
          <el-table-column prop="priceTime" label="执行时间"></el-table-column>
          <el-table-column prop="fixedAmt" label="费用总计（￥）"></el-table-column>
        </el-table>
      </el-aside>
      <el-main>
        <div
          id="printArea"
          style="
            width: 520px;
            font-size: 12px;
            display: inline-block;
            width: 520px;
            padding-bottom: 10px;
            vertical-align: middle;
            background-color: rgb(255, 255, 255);
            border-radius: 4px;
            border: 1px solid rgb(235, 238, 245);
            font-size: 18px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
            text-align: left;
            overflow: hidden;
            backface-visibility: hidden;
          "
        >
          <div style="display: flex; width: 100%; height: 50px; line-height: 50px; padding: 15px 0 10px 20px">
            <div>
              <img style="width: 50px" :src="logo" />
            </div>
            <div style="font-size: 18px; font-weight: bold; width: 320px">泰和医院门诊指引单</div>
            <div>
              <svg id="barcode"></svg>
            </div>
          </div>
          <div style="padding: 5px 20px">
            <div style="margin-top: 10px; height: 32px; line-height: 32px; font-size: 13px; border-bottom: 1px solid #333">
              <span style="margin-left: 30px">门诊号：{{ patientId }}</span>
              <span style="margin-left: 30px">姓名：{{ currentRow.patName }}</span>
              <span style="margin-left: 30px">日期：{{ fixTime(currentRow.priceTime) }}</span>
            </div>
            <div>
              <div style="display: flex; height: 30px; line-height: 30px; font-size: 13px; border-bottom: 1px solid lightgray">
                <div style="width: 120px; text-align: center">项目类别</div>
                <div style="width: 100px; text-align: center">项目费用(￥)</div>
                <div style="width: 140px; text-align: center">执行科室名称</div>
                <div style="width: 120px; text-align: center">执行科室地址</div>
              </div>
              <div v-for="(item, index) in detail.list" :key="index" style="display: flex; height: 30px; line-height: 30px; font-size: 12px; border-bottom: 1px solid lightgray">
                <div style="width: 120px; text-align: center">{{ item.itemType }}</div>
                <div style="width: 100px; text-align: center">{{ item.fixedAmt }}</div>
                <div style="width: 140px; text-align: center">{{ item.execDeptName }}</div>
                <div style="width: 120px; text-align: center">{{ item.execDeptAddress }}</div>
              </div>
              <div style="display: flex; height: 30px; line-height: 30px; border-bottom: 1px solid lightgray">
                <div style="width: 120px; text-align: center">合计</div>
                <div style="width: 100px; text-align: center">{{ detail.sum }}</div>
              </div>
              <div style="margin-top: 10px; width: 100%; font-size: 12px; color: gray; text-align: right">请缴费后至以上科室取药或检查治疗，检查完成后可关注服务号查询结果。</div>
            </div>
          </div>
          <div style="margin: 30px 0 7px 20px; font-size: 13px; display: flex">
            <div style="width: 130px">
              <div id="wxqrcode"></div>
              <div style="width: 100px; text-align: center">微信支付</div>
            </div>
          </div>
          <div style="margin-left: 20px; margin-bottom: 20px; font-size: 13px; font-weight: bold">如有故障请联系服务中心：88518702</div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { onMounted, reactive, ref } from 'vue'
import { getRoughList, getDetailFees } from '@/api/mz-pay-qrcode'
import { qrcanvas } from 'qrcanvas'
import JsBarcode from 'jsbarcode'
import { initLodop, getLodop } from '@/utils/c-lodop'
import logo from '@/assets/csthyylogoplain.png'
export default {
  setup() {
    const patientId = ref('')
    const tableHeight = window.innerHeight - 45
    const listTable = ref(null)
    const roughList = ref([])
    const detail = reactive({
      sum: 0,
      list: [],
      wxQrcode: '',
    })
    const fetchList = () => {
      getRoughList(patientId.value).then((res) => {
        roughList.value = res
        if (res.length > 0) {
          listTable.value.setCurrentRow(res[0])
          fetchDetail(res[0])
        }
      })
    }
    const currentRow = ref({})
    const fetchDetail = (row) => {
      JsBarcode('#barcode', patientId.value, {
        lineColor: '#333', //线条颜色
        width: 2, //线宽
        height: 26, //条码高度
        displayValue: false, //是否显示文字信息
      })
      currentRow.value = row
      row.patientId = patientId.value
      getDetailFees(row).then((res) => {
        detail.list = res.list
        detail.wxQrcode = res.wxQrcode
        detail.sum = 0
        res.list.forEach((item) => {
          detail.sum += Number(item.fixedAmt)
        })
        detail.sum = detail.sum.toFixed(2)
        const wxcanvas = qrcanvas({
          data: decodeURIComponent(detail.wxQrcode),
          size: 100,
        })
        document.getElementById('wxqrcode').appendChild(wxcanvas)
      })
    }

    const printObj = () => {
      // A5 = 559.37px * 793.70px
      const topHeight = 250 + detail.list.length * 30
      const LODOP = getLodop()
      LODOP.PRINT_INIT('')
      LODOP.SET_PRINT_PAGESIZE(3, 0, 20, 'A5')
      const strFormHtml = document.getElementById('printArea').innerHTML
      LODOP.ADD_PRINT_HTM(0, 0, 520, 750, strFormHtml)
      LODOP.ADD_PRINT_BARCODE(topHeight, 25, 100, 100, 'QRCode', decodeURIComponent(detail.wxQrcode))
      LODOP.PREVIEW()
    }

    const reset = () => {
      document.getElementById('wxqrcode').innerHTML = ''
      patientId.value = ''
      roughList.value = []
      detail.sum = 0
      detail.list = []
      detail.wxQrcode = ''
    }

    onMounted(() => {
      initLodop()
    })

    return {
      listTable,
      tableHeight,
      patientId,
      fetchList,
      roughList,
      fetchDetail,
      detail,
      currentRow,
      printObj,
      logo,
      fixTime,
      reset,
    }
  },
}

function fixTime(val) {
  if (val) {
    return val.substring(0, 10)
  }
  return ''
}
</script>