手术安排打印

src/views/surgical-management/SurgeryArrangement.vue

@@ -25,12 +25,13 @@
       <el-checkbox v-model="queryParam.jzFlag">急诊</el-checkbox>
       <el-divider direction="vertical" />
       <el-button icon="Search" type="primary" @click="clickQuery">查询</el-button>
+      <el-button icon="Printer" type="danger" @click="clickPrint">打印</el-button>
     </template>
     <template #main>
       <el-tag effect="dark" size="small" type="danger">急诊:{{ emergencyCount }}条</el-tag>
       <el-tag effect="dark" size="small">普通:{{ surgeryList.length - emergencyCount }}条</el-tag>
       <el-table :data="surgeryList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
-                :height="window.h - 60" border :row-class-name="differChargedRows"
+                :height="windowSize.h - 60" border :row-class-name="differChargedRows"
                 header-cell-class-name="cell-border" cell-class-name="cell-border">
         <el-table-column label="手术编号" prop="recordId" width="55">
           <template #default="scope">
@@ -144,6 +145,39 @@
     </template>
   </page-layer>
   <search v-if="showSearch" :title="titleOfSearch" target="physician" show-emp-dept @close="showSearch = false" @click-item="handleClickSearchResult"></search>
+  <div id="printArea" style="position: fixed; background: white; color: black; opacity: 0">
+    <div style="width: 100%; margin-top: 12px; text-align: center; height: 36px; line-height: 36px; font-size: 22px; font-weight: bold">手 术 安 排 表（{{ nowdate }}）</div>
+    <div style="width: 100%; padding-left: 30px; height: 32px">打印时间：{{ nowdatetime }}</div>
+    <div style="padding-left: 30px">
+      <div style="display: flex;align-items: center;justify-content: center;font-weight: bold;font-size:12px;height: 30px;border-bottom: 1px solid black">
+        <div style="width: 170px;">手术日期</div>
+        <div style="width: 90px;">手术间</div>
+        <div style="width: 160px;">病房 - 床号</div>
+        <div style="width: 80px;">住院号</div>
+        <div style="width: 160px;">年龄 - 性别 - 姓名</div>
+        <div style="width: 260px;">手术名称</div>
+        <div style="width: 170px; margin-left: 16px">麻醉方式</div>
+        <div style="width: 80px;">麻醉医生</div>
+        <div style="width: 80px;">手术医生</div>
+        <div style="width: 80px;">器械护士</div>
+        <div style="width: 80px;">巡回护士</div>
+      </div>
+      <div style="height: 8px"></div>
+      <div v-for="item in surgeryList" style="display: flex;align-items: center;justify-content: center;font-size: 12px; height: 36px; border-bottom: 1px solid black">
+        <div style="width: 170px">{{ item.opDatetime }}</div>
+        <div style="width: 90px;">{{ item.roomName }}</div>
+        <div style="width: 160px;">{{ item.wardName }} - {{ item.bedNo }}床</div>
+        <div style="width: 80px;">{{ item.inpatientNo }}</div>
+        <div style="width: 160px;">{{ item.age }} - {{ item.sex }} - {{ item.patientName }}</div>
+        <div style="width: 260px;">{{ item.opName }}</div>
+        <div style="width: 170px; margin-left: 16px">{{ item.hocusName }}</div>
+        <div style="width: 80px;">{{ item.doctorMzYsName }}</div>
+        <div style="width: 80px;">{{ item.doctorZdName }}</div>
+        <div style="width: 80px;">{{ item.nurseQxName }}</div>
+        <div style="width: 80px;">{{ item.nurseXhName }}</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script name="SurgeryArrangement" setup>
@@ -154,15 +188,16 @@ import {
   updateArrangement
 } from '@/api/surgical-management/surgery-arrangement'
 import { shortcuts } from '@/data/shortcuts.js'
-import { getDateRangeFormatDate, getDateRangeFormatDateTime } from '@/utils/date'
+import {formatDate, formatDatetime, getDateRangeFormatDate, getDateRangeFormatDateTime} from '@/utils/date'
 import { listIsBlank, stringIsBlank, stringNotBlank } from '@/utils/blank-utils'
 import store from '@/store'
 import {ElMessage, ElMessageBox} from 'element-plus'
 import PageLayer from '@/layout/PageLayer.vue'
 import Search from '@/components/search/Index.vue'
 import router from '@/router'
+import { initLodop, getLodop } from '@/utils/c-lodop'
 
-const window = computed(() => {
+const windowSize = computed(() => {
   return store.state.app.windowSize
 })
 
@@ -302,7 +337,25 @@ const doctorAdvise = (row) => {
   })
 }
 
+const nowdate = ref('')
+const nowdatetime = ref('')
+const clickPrint = () => {
+  nowdate.value = formatDate(new Date())
+  nowdatetime.value = formatDatetime(new Date())
+  LODOP = getLodop()
+  let pagePrint = '<body>' + document.getElementById('printArea').innerHTML + '</body>'
+  LODOP.PRINT_INIT('surgeryArrangement')
+  LODOP.SET_PRINT_PAGESIZE(2, '210mm', '297mm', '')
+  LODOP.SET_PRINT_MODE('RESELECT_PRINTER', true)
+  LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Full-Width')
+  LODOP.ADD_PRINT_HTM('2mm', '2mm', '100%', '100%', pagePrint)
+  LODOP.PREVIEW()
+}
+
 onMounted(() => {
+  initLodop()
+  nowdate.value = formatDate(new Date())
+  nowdatetime.value = formatDatetime(new Date())
   getDicList().then((res) => {
     wardList = res.allWards
     allRooms = res.allRooms