输液卡打印

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

@@ -8,26 +8,25 @@
         执行日期：<el-date-picker v-model="queryParams.executeDate" :clearable="false" style="width: 102px"></el-date-picker>
       </span>
       <span class="ml12">床位范围：
-        <el-select v-model="queryParams.bedNoStart" style="width: 70px"
-                   value-key="bedNo" @change="handleStartBedChange">
+        <el-select v-model="queryParams.bedNoStart" style="width: 70px" value-key="bedNo"
+          @change="handleStartBedChange">
           <el-option v-for="item in patientBedList" :key="item.bedNo" :value="item">
-            {{item.bedNoLabel}}
+            {{ item.bedNoLabel }}
             <el-divider direction="vertical"></el-divider>
-            <span class="green-text">{{item.patNo}}</span>
+            <span class="green-text">{{ item.patNo }}</span>
             <el-divider direction="vertical"></el-divider>
-            <span class="blue-text">{{item.patName}}</span>
+            <span class="blue-text">{{ item.patName }}</span>
           </el-option>
         </el-select>
         <span style="margin: 0 4px; font-size: 11px">至</span>
-        <el-select v-model="queryParams.bedNoEnd" style="width: 70px"
-                   value-key="bedNo" @change="handleEndBedChange">
+        <el-select v-model="queryParams.bedNoEnd" style="width: 70px" value-key="bedNo" @change="handleEndBedChange">
           <el-option v-for="item in patientBedList" :key="item.bedNo" :value="item"
-                      :disabled="item.sortNo < queryParams.sortNoStart">
-            {{item.bedNoLabel}}
+            :disabled="item.sortNo < queryParams.sortNoStart">
+            {{ item.bedNoLabel }}
             <el-divider direction="vertical"></el-divider>
-            <span :class="item.sortNo < queryParams.sortNoStart ? 'is-disabled': 'green-text'">{{item.patNo}}</span>
+            <span :class="item.sortNo < queryParams.sortNoStart ? 'is-disabled' : 'green-text'">{{ item.patNo }}</span>
             <el-divider direction="vertical"></el-divider>
-            <span :class="item.sortNo < queryParams.sortNoStart ? 'is-disabled': 'blue-text'">{{item.patName}}</span>
+            <span :class="item.sortNo < queryParams.sortNoStart ? 'is-disabled' : 'blue-text'">{{ item.patName }}</span>
           </el-option>
         </el-select>
       </span>
@@ -61,69 +60,37 @@
     <template #main>
       <div style="display: flex; flex-wrap: wrap" id="infusion_list">
         <div v-if="queryParams.cardType === 'INFUSION_CARD'">
-          
-            <div
-              v-for="(item,index) in patientInfusionInfos"
-              :id="item.patInfo.patNo"
-            >
-            <div 
-              class="crad-area"
-              style="width: 90%; margin: 8px 12px; padding: 4px; border: 1px solid red ;display: flex;justify-content: center; align-items: center;"
-            >
-              <infusion-card
-                :drug-groups="item.drugGroups"
-                :pat-info="item.patInfo"
-                :yz-date="queryParams.executeDate"
-                :print-date="printDate"
-              >
+
+          <div v-for="(item, index) in patientInfusionInfos" :id="item.patInfo.patNo">
+            <div class="crad-area"
+              style="width: 90%; margin: 8px 12px; padding: 4px; border: 1px solid red ;display: flex;justify-content: center; align-items: center;">
+              <infusion-card :drug-groups="item.drugGroups" :pat-info="item.patInfo" :yz-date="queryParams.executeDate"
+                :print-date="printDate">
               </infusion-card>
             </div>
           </div>
         </div>
         <div v-else id="print-test">
-          <div
-              class="crad-area"
-              v-for="(item,index) in patientInfusionInfos"
-              :id="item.patInfo.patNo+'-'+index"
-              style="width: 230px;float: left;margin-right: 20px"
-          >
-              <bottle-card
-                :drugs="item.bottleCardDrugs"
-                :pat-info="item.patInfo"
-                :yz-date="queryParams.executeDate"
-                :bottle-group="item.bottleGroup"
-                style="margin-bottom: 10px;"
-              >
-              </bottle-card>
+          <div class="crad-area" v-for="(item, index) in patientInfusionInfos" :id="item.patInfo.patNo + '-' + index"
+            style="width: 230px;float: left;margin-right: 20px">
+            <bottle-card :drugs="item.bottleCardDrugs" :pat-info="item.patInfo" :yz-date="queryParams.executeDate"
+              :bottle-group="item.bottleGroup" style="margin-bottom: 10px;">
+            </bottle-card>
           </div>
         </div>
         <div class="print-hiden-area" style="margin: 0px 12px">
-          <div
-              class="print-bottle-card-area"
-              style="margin: 0px;"
-          >
-          <!-- printPatientBottleInfos -->
-              <div 
-                v-for="(item,index) in printPatientBottleInfos"
-                :id="item.patInfo.patNo+'-'+index"
-                style="width: 240px;
+          <div class="print-bottle-card-area" style="margin: 0px;">
+            <!-- printPatientBottleInfos -->
+            <div v-for="(item, index) in printPatientBottleInfos" :id="item.patInfo.patNo + '-' + index" style="width: 240px;
                     float: left;
-                    margin-right: 10px;" 
-              >
-                  <bottle-card
-                  :drugs="item.bottleCardDrugs"
-                  :pat-info="item.patInfo"
-                  :yz-date="queryParams.executeDate"
-                  :bottle-group="item.bottleGroup"
-                  style="margin-bottom: 10px;"
-              >
-                  </bottle-card>
-              </div>
-              <div 
-                v-if="printPatientBottleInfos.length!= 0 && printPatientBottleInfos.length % 2 !=0"
-                style="width: 230px;"
-              >
-              </div>
+                    margin-right: 10px;">
+              <bottle-card :drugs="item.bottleCardDrugs" :pat-info="item.patInfo" :yz-date="queryParams.executeDate"
+                :bottle-group="item.bottleGroup" style="margin-bottom: 10px;">
+              </bottle-card>
+            </div>
+            <div v-if="printPatientBottleInfos.length != 0 && printPatientBottleInfos.length % 2 != 0"
+              style="width: 230px;">
+            </div>
           </div>
         </div>
       </div>
@@ -133,17 +100,17 @@
 
 <script setup>
 import PageLayer from "@/layout/PageLayer.vue";
-import {formatDate, getDatetime, getDate} from "@/utils/date";
+import { formatDate, getDatetime, getDate } from "@/utils/date";
 import {
   getPatientBeds,
   queryInfusionCardOrBottleCard,
   updatePrintStatus
 } from '@/api/inpatient/nurse-module/print-infusion-card'
 import InfusionCard from "@/components/inpatient/nurse-module/InfusionCard.vue";
-import {ElMessage} from "element-plus";
-import {getLodop, initLodop} from "@/utils/c-lodop";
+import { ElMessage } from "element-plus";
+import { getLodop, initLodop } from "@/utils/c-lodop";
 import BottleCard from "@/components/inpatient/nurse-module/BottleCard.vue";
-import {getWardsApi} from "@/api/login";
+import { getWardsApi } from "@/api/login";
 
 const userWards = ref([])
 
@@ -156,8 +123,8 @@ const handleWardChange = (wardCode) => {
     if (res.length > 0) {
       queryParams.bedNoStart = res[0].bedNoLabel
       queryParams.sortNoStart = res[0].sortNo
-      queryParams.bedNoEnd = res[res.length-1].bedNoLabel
-      queryParams.sortNoEnd = res[res.length-1].sortNo
+      queryParams.bedNoEnd = res[res.length - 1].bedNoLabel
+      queryParams.sortNoEnd = res[res.length - 1].sortNo
     } else {
       queryParams.bedNoStart = null
       queryParams.sortNoStart = null
@@ -199,7 +166,7 @@ const handleTypeChange = () => {
 
 const executeQuery = () => {
   queryParams.executeDate = formatDate(queryParams.executeDate)
-     queryParams.bedNos = []
+  queryParams.bedNos = []
   patientBedList.value.forEach(bed => {
     if (bed.sortNo >= queryParams.sortNoStart && bed.sortNo <= queryParams.sortNoEnd) {
       queryParams.bedNos.push(bed.bedNo)
@@ -207,11 +174,11 @@ const executeQuery = () => {
   })
   queryInfusionCardOrBottleCard(queryParams).then(res => {
     patientInfusionInfos.value = res
-    if(queryParams.cardType !== 'INFUSION_CARD' && patientInfusionInfos.value.length > 0) {
+    if (queryParams.cardType !== 'INFUSION_CARD' && patientInfusionInfos.value.length > 0) {
       //瓶贴分配药品组号
       patientInfusionInfos.value.forEach(item => {
         let group = patientInfusionInfos.value.filter(citem => citem.patInfo.patNo === item.patInfo.patNo)
-        group.forEach((v,vindex) => {
+        group.forEach((v, vindex) => {
           let target = patientInfusionInfos.value.find(citem => citem.bottleCardDrugs[0].actOrderNo === v.bottleCardDrugs[0].actOrderNo)
           target.bottleGroup = vindex + 1 + "/" + group.length
           // console.log("target",target)
@@ -242,71 +209,71 @@ const execPrint = () => {
     })
     return
   }
-    let LODOP = getLodop();
-    if(queryParams.cardType=='INFUSION_CARD'){
-          let prntContent = document.getElementById("infusion_list").innerHTML
+  let LODOP = getLodop();
+  if (queryParams.cardType == 'INFUSION_CARD') {
+    let prntContent = document.getElementById("infusion_list").innerHTML
     // console.log("prntContent",prntContent)
     let printHTML = ""
     const prntStyle = `<style>td{border: 1px solid black;
     font-size: 12px;padding: 2px;}</style>`
-    if(patientInfusionInfos.value.length == 1){
+    if (patientInfusionInfos.value.length == 1) {
       let id = queryParams.cardType === 'INFUSION_CARD'
-          ? patientInfusionInfos.value[0].patInfo.patNo : patientInfusionInfos.value[0].patInfo.patNo + '-' + i
+        ? patientInfusionInfos.value[0].patInfo.patNo : patientInfusionInfos.value[0].patInfo.patNo + '-' + i
       printHTML = document.getElementById(id).innerHTML
       LODOP.PRINT_INIT('infusionCard')
       LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')
-      LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm',prntStyle + '<body style:"display: flex;justify-content: center;align-items: center;">' + printHTML + '</body>' )
+      LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', prntStyle + '<body style:"display: flex;justify-content: center;align-items: center;">' + printHTML + '</body>')
       LODOP.SET_PRINT_STYLE('ItemType', 3)
       LODOP.PREVIEW();
     } else {
-        for(let i = 0; i < patientInfusionInfos.value.length; i++){
-            let info = patientInfusionInfos.value[i]
-            let id = queryParams.cardType === 'INFUSION_CARD'
-              ? info.patInfo.patNo : info.patInfo.patNo + '-' + i
-            let printCount = queryParams.cardType === 'INFUSION_CARD'
-              ? 3 : 6
-            // console.log("printCount",printCount)
-            if(i !== 0 && ((i + 1) % printCount == 0 || i == patientInfusionInfos.value.length - 1)) {
-            // console.log("printIndex",i)
-            printHTML = document.getElementById(id).innerHTML + printHTML
-            let printFinal = prntStyle + '<body><div style:"width:600px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">' + printHTML + '</div></body>' ;
-            console.log("printFinal",printFinal)
-            LODOP.PRINT_INIT('infusionCard')
-            LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')
-            // LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm',prntStyle + '<body style:"width:800px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">' + printHTML + '</body>' )
-            LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm',printFinal )
-            LODOP.SET_PRINT_STYLE('ItemType', 3)
-            // LODOP.PREVIEW();  
-            LODOP.PRINT()
-            printHTML = ""
-            } else {
-              printHTML += document.getElementById(id).innerHTML
-            }
+      for (let i = 0; i < patientInfusionInfos.value.length; i++) {
+        let info = patientInfusionInfos.value[i]
+        let id = queryParams.cardType === 'INFUSION_CARD'
+          ? info.patInfo.patNo : info.patInfo.patNo + '-' + i
+        let printCount = queryParams.cardType === 'INFUSION_CARD'
+          ? 3 : 6
+        // console.log("printCount",printCount)
+        if (i !== 0 && ((i + 1) % printCount == 0 || i == patientInfusionInfos.value.length - 1)) {
+          // console.log("printIndex",i)
+          printHTML = document.getElementById(id).innerHTML + printHTML
+          let printFinal = prntStyle + '<body><div style:"width:600px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">' + printHTML + '</div></body>';
+          console.log("printFinal", printFinal)
+          LODOP.PRINT_INIT('infusionCard')
+          LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')
+          // LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm',prntStyle + '<body style:"width:800px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">' + printHTML + '</body>' )
+          LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', printFinal)
+          LODOP.SET_PRINT_STYLE('ItemType', 3)
+          // LODOP.PREVIEW();  
+          LODOP.PRINT()
+          printHTML = ""
+        } else {
+          printHTML += document.getElementById(id).innerHTML
         }
       }
-      updatePrintState()
-    } else {
-      printPatientBottleInfos.value = [...patientInfusionInfos.value ]
-      // console.log("patientInfusionInfos",patientInfusionInfos.value)
-      // console.log("printPatientBottleInfos",printPatientBottleInfos.value)
-      nextTick(() => {
-        let prntContent1 = document.getElementById("print-test").innerHTML
-        let flexStyles = getStyleText('.print-bottle-card-area');
-        // const prntStyle = `<style>${flexStyles}td{border: 1px solid black;
-        // font-size: 12px;padding: 2px;}</style>`
-        const prntStyle = `<style>td{border: 1px solid black;
-        font-size: 12px;padding: 2px;}</style>`
-        let printFinal = prntStyle + prntContent1
-        console.log("prntContent1",prntContent1)
-        LODOP.PRINT_INIT('infusionCard')
-        LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')
-        LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm',printFinal)
-        LODOP.SET_PRINT_STYLE('ItemType', 3)
-        LODOP.PREVIEW();
-        printPatientBottleInfos.value = []
-        updatePrintState()
-      });
     }
+    updatePrintState()
+  } else {
+    printPatientBottleInfos.value = [...patientInfusionInfos.value]
+    // console.log("patientInfusionInfos",patientInfusionInfos.value)
+    // console.log("printPatientBottleInfos",printPatientBottleInfos.value)
+    nextTick(() => {
+      let prntContent1 = document.getElementById("print-test").innerHTML
+      let flexStyles = getStyleText('.print-bottle-card-area');
+      // const prntStyle = `<style>${flexStyles}td{border: 1px solid black;
+      // font-size: 12px;padding: 2px;}</style>`
+      const prntStyle = `<style>td{border: 1px solid black;
+        font-size: 12px;padding: 2px;}</style>`
+      let printFinal = prntStyle + prntContent1
+      console.log("prntContent1", prntContent1)
+      LODOP.PRINT_INIT('infusionCard')
+      LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')
+      LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', printFinal)
+      LODOP.SET_PRINT_STYLE('ItemType', 3)
+      LODOP.PREVIEW();
+      printPatientBottleInfos.value = []
+      updatePrintState()
+    });
+  }
 }
 
 function updatePrintState() {
@@ -336,21 +303,21 @@ function updatePrintState() {
 }
 
 function getStyleText(selector) {
-    var sheets = document.styleSheets;
-    var styleText = '';
-    for (var i = 0; i < sheets.length; i++) {
-        try {
-            var rules = sheets[i].cssRules || sheets[i].rules;
-            if (rules) {
-                for (var j = 0; j < rules.length; j++) {
-                    if (rules[j].selectorText && rules[j].selectorText.includes(selector)) {
-                        styleText += rules[j].cssText + '\n';
-                    }
-                }
-            }
-        } catch(e) { /* 可能跨域安全错误 */ }
-    }
-    return styleText;
+  var sheets = document.styleSheets;
+  var styleText = '';
+  for (var i = 0; i < sheets.length; i++) {
+    try {
+      var rules = sheets[i].cssRules || sheets[i].rules;
+      if (rules) {
+        for (var j = 0; j < rules.length; j++) {
+          if (rules[j].selectorText && rules[j].selectorText.includes(selector)) {
+            styleText += rules[j].cssText + '\n';
+          }
+        }
+      }
+    } catch (e) { /* 可能跨域安全错误 */ }
+  }
+  return styleText;
 }
 
 // J,S,JS,SJ
@@ -376,22 +343,27 @@ onMounted(() => {
 .ml12 {
   margin-left: 12px;
 }
+
 .green-text {
   color: green;
 }
+
 .blue-text {
   color: #1146f3
 }
+
 .is-disabled {
   color: #a8abb2;
 }
-.crad-area{
+
+.crad-area {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.print-bottle-card-area{
+
+.print-bottle-card-area {
   width: 730px;
   /* display: flex;
   justify-content: space-between;
@@ -400,25 +372,28 @@ onMounted(() => {
   /* float: left; */
   padding: 15px 5px;
 }
-.print-hiden-area{
+
+.print-hiden-area {
   /* display: none; */
 }
+
 @media print {
-    .your-flex-container {
-        display: flex !important;
-        flex-direction: row !important;
-        /* 其他必要flex属性 */
-    }
-    
-    .flex-item {
-        flex: 1 !important;
-    }
-    .print-bottle-card-area{
-      width: 700px;
-      display: flex;
-      justify-content: center;
-      /* align-items: center; */
-      flex-wrap: wrap;
-    }
+  .your-flex-container {
+    display: flex !important;
+    flex-direction: row !important;
+    /* 其他必要flex属性 */
+  }
+
+  .flex-item {
+    flex: 1 !important;
+  }
+
+  .print-bottle-card-area {
+    width: 700px;
+    display: flex;
+    justify-content: center;
+    /* align-items: center; */
+    flex-wrap: wrap;
+  }
 }
 </style>