小输液卡和腕带

src/components/inpatient/WristStrap.vue

@@ -0,0 +1,63 @@
+<template>
+  <page-layer>
+    <template #header>
+      <el-button @click="horizontalPrint" type="primary">打印</el-button>
+    </template>
+    <template #main>
+      <div style="width: 800px; height: 50px; padding: 10px 0 10px 20px; background: silver;display: flex">
+        <div id="qrcode"></div>
+        <div style="width: 20px"></div>
+        <div>
+          <div id="person" style="font-size: 12px;font-weight: bold">姓名：一二三四五六七八九  /  性别：男  /  年龄：37</div>
+          <div id="department" style="font-size: 12px; margin-top: 5px;font-weight: bold">入院科室：呼吸内科</div>
+          <div id="contact" style="font-size: 12px; margin-top: 5px;font-weight: bold">紧急联系人：13698072587</div>
+        </div>
+      </div>
+    </template>
+  </page-layer>
+</template>
+
+<script setup>
+
+// 280mm * 30mm
+
+import { initLodop, getLodop } from '@/utils/c-lodop'
+import {onMounted} from "vue";
+import {qrcanvas} from "qrcanvas";
+import PageLayer from "@/layout/PageLayer.vue";
+
+const PRINTER_NAME = 'DASCOM DL-520Z'
+const inpatientNo = ref('0374562')
+
+const drawQrcoce = (inpatientNo) => {
+  const labelCanvas = qrcanvas({
+    data: inpatientNo,
+    size: '50',
+  })
+  document.getElementById('qrcode').appendChild(labelCanvas)
+}
+
+const horizontalPrint = () => {
+  let LODOP = getLodop()
+  LODOP.PRINT_INIT('inpatient_info2')
+  LODOP.SET_PRINTER_INDEX(PRINTER_NAME)
+  LODOP.SET_PRINT_PAGESIZE(2, 0, 0, '')
+  LODOP.SET_PRINT_STYLE('FontSize', 9)
+  LODOP.SET_PRINT_STYLE('Bold', 1)
+
+  LODOP.ADD_PRINT_BARCODE('7mm', '30mm', '18.5mm', '18.5mm', 'QRCode', inpatientNo.value)
+
+  // ADD_PRINT_HTM(Top,Left,Width,Height,strHtmlContent)
+  LODOP.ADD_PRINT_TEXT('8mm', '50mm', '220mm', '7mm', document.getElementById('person').innerHTML)
+  LODOP.ADD_PRINT_TEXT('14mm', '50mm', '220mm', '7mm', document.getElementById('department').innerHTML)
+  LODOP.ADD_PRINT_TEXT('20mm', '50mm', '220mm', '7mm', document.getElementById('contact').innerHTML)
+
+  LODOP.PREVIEW()
+}
+
+onMounted(() => {
+  initLodop()
+  drawQrcoce(inpatientNo.value)
+})
+
+</script>

src/components/inpatient/nurse-module/InfusionCard.vue

@@ -0,0 +1,19 @@
+<template>
+  <div style="width: 500px">
+    <div style="width: 300px; margin-left: 100px; text-align: center; border-bottom: 1px solid black">输液执行卡</div>
+
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  patInfo: {
+    type: Object,
+    required: true,
+  },
+  drugGroups: {
+    type: Object,
+    required: true,
+  },
+})
+</script>

src/views/hospitalization/nurse-module/PrintInfusionCard.vue

@@ -57,7 +57,13 @@
       <el-divider direction="vertical"></el-divider>
       <el-button type="primary" icon="Search" @click="executeQuery">检索</el-button>
     </template>
-    <template #main>main</template>
+    <template #main>
+      <div style="display: flex; flex-wrap: wrap">
+        <div v-for="item in patientInfusionInfos" style="width: 500px; height: max-content; margin: 4px 4px 12px 4px">
+          <infusion-card :drug-groups="item.drugGroups" :pat-info="item.patInfo"></infusion-card>
+        </div>
+      </div>
+    </template>
   </page-layer>
 </template>
 
@@ -66,6 +72,7 @@ import PageLayer from "@/layout/PageLayer.vue";
 import {formatDate, getDate} from "@/utils/date";
 import store from "@/store";
 import {getPatientBeds, queryInfusionCard} from '@/api/inpatient/nurse-module/print-infusion-card'
+import InfusionCard from "@/components/inpatient/nurse-module/InfusionCard.vue";
 
 const userWards = computed(() => {
   return store.getters['user/wards']
@@ -103,7 +110,7 @@ const queryParams = reactive({
   bedNos: []
 })
 
-
+const patientInfusionInfos = ref([])
 
 const handleStartBedChange = (bed) => {
   queryParams.bedNoStart = bed.bedNoLabel
@@ -123,7 +130,10 @@ const executeQuery = () => {
       queryParams.bedNos.push(bed.bedNo)
     }
   })
-  queryInfusionCard(queryParams).then(res => {})
+  queryInfusionCard(queryParams).then(res => {
+    console.log(res)
+    patientInfusionInfos.value = res
+  })
 }
 
 onMounted(() => {