优化麻、精药品打印

src/views/med-tec-mod/MedicineManagement.vue

@@ -84,53 +84,65 @@
             <el-button type="danger" icon="Close" @click="showUsedPoisonousAnesthetics = false">关闭</el-button>
           </div>
           <div id="poisonousAnestheticsArea">
-            <div style="width: 100%; text-align: center; font-size: 18px; font-weight: bold">{{userInfo.deptName}}精、麻药品使用登记表</div>
-            <div style="display: flex; width: 90%; margin-left: 5%; color: black;">
-              <div style="width: 50%; text-align: left">统计基准：{{dateRange[0]}} 至 {{dateRange[1]}}</div>
-              <div style="width: 50%; text-align: right">打印日期：{{ today }}&nbsp;&nbsp;</div>
-            </div>
-            <div style="margin-top: 8px; width: 90%; margin-left: 5%; color: black; font-size: 12px">
-              <div style="display: flex; width: 100%; height: 20px; overflow-y: scroll">
-                <div style="height: 18px; line-height: 18px; width: 3%; text-align: center; border: 1px solid #333">时间</div>
-                <div style="height: 18px; line-height: 18px; width: 15%; text-align: center; border: 1px solid #333">药品名称</div>
-                <div style="height: 18px; line-height: 18px; width: 5%; text-align: center; border: 1px solid #333">患者姓名</div>
-                <div style="height: 18px; line-height: 18px; width: 3%; text-align: center; border: 1px solid #333">性别</div>
-                <div style="height: 18px; line-height: 18px; width: 12%; text-align: center; border: 1px solid #333">身份证号</div>
-                <div style="height: 18px; line-height: 18px; width: 5%; text-align: center; border: 1px solid #333">住院号</div>
-                <div style="height: 18px; line-height: 18px; width: 20%; text-align: center; border: 1px solid #333">住院诊断</div>
-                <div style="height: 18px; line-height: 18px; width: 9%; text-align: center; border: 1px solid #333">药品规格</div>
-                <div style="height: 18px; line-height: 18px; width: 5%; text-align: center; border: 1px solid #333">数量</div>
-                <div style="height: 18px; line-height: 18px; width: 5%; text-align: center; border: 1px solid #333">实际用量</div>
-                <div style="height: 18px; line-height: 18px; width: 5%; text-align: center; border: 1px solid #333">余量处理</div>
-                <div style="height: 18px; line-height: 18px; width: 4%; text-align: center; border: 1px solid #333">发药人</div>
-                <div style="height: 18px; line-height: 18px; width: 4%; text-align: center; border: 1px solid #333">复核人</div>
-                <div style="height: 18px; line-height: 18px; width: 5%; text-align: center; border: 1px solid #333">药品批号</div>
-              </div>
-              <div style="margin-top: 4px; min-height: 600px; overflow-y: scroll;">
-                <div v-for="(val, key) in usedPoisonousAnesthetics">
-                  <div v-for="(item, index) in val" style="display: flex; width: 100%; text-align: center" :key="'usedPoisonousAnesthetics-' + key + '-' + index">
-                    <div style="height: 18px; line-height: 18px; width: 3%; text-align: center; border: 1px solid #333">{{item.chargeDate}}</div>
-                    <div style="height: 18px; line-height: 18px; width: 15%; text-align: center; border: 1px solid #333">{{item.chargeName}}施</div>
-                    <div style="height: 18px; line-height: 18px; width: 5%; text-align: center; border: 1px solid #333">{{item.patName}}</div>
-                    <div style="height: 18px; line-height: 18px; width: 3%; text-align: center; border: 1px solid #333">{{item.patGender}}</div>
-                    <div style="height: 18px; line-height: 18px; width: 12%; text-align: center; border: 1px solid #333">{{item.socialNo}}</div>
-                    <div style="height: 18px; line-height: 18px; width: 5%; text-align: center; border: 1px solid #333">{{item.patNo}}</div>
-                    <div style="height: 18px; line-height: 18px; width: 20%; text-align: center; border: 1px solid #333">{{item.admdiag}}</div>
-                    <div style="height: 18px; line-height: 18px; width: 9%; text-align: center; border: 1px solid #333">{{item.spec}}</div>
-                    <div style="height: 18px; line-height: 18px; width: 5%; text-align: center; border: 1px solid #333">{{item.chargeAmount}}</div>
-                    <div style="height: 18px; line-height: 18px; width: 5%; text-align: center; border: 1px solid #333"></div>
-                    <div style="height: 18px; line-height: 18px; width: 5%; text-align: center; border: 1px solid #333"></div>
-                    <div style="height: 18px; line-height: 18px; width: 4%; text-align: center; border: 1px solid #333"></div>
-                    <div style="height: 18px; line-height: 18px; width: 4%; text-align: center; border: 1px solid #333"></div>
-                    <div style="height: 18px; line-height: 18px; width: 5%; text-align: center; border: 1px solid #333"></div>
-                  </div>
-                  <div style="display: flex; margin-bottom: 2px">
-                    <div style="width: 72%"></div>
-                    <div style="color: #0a84fd">总计：{{poisonousAnestheticsCounts[key]}}</div>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <table id="jmtable" style="width: 100%; color: black">
+              <thead>
+              <tr>
+                <td colspan="14" style="border: none;text-align: center; font-size: 18px; font-weight: bold">
+                  {{userInfo.deptName}}精、麻药品使用登记表
+                </td>
+              </tr>
+              <tr>
+                <td colspan="7" style="border: none;text-align: left">
+                  &nbsp;&nbsp;统计基准：{{dateRange[0]}} 至 {{dateRange[1]}}
+                </td>
+                <td colspan="7" style="border: none;text-align: right">
+                  打印日期：{{ today }}&nbsp;&nbsp;
+                </td>
+              </tr>
+              <tr>
+                <td>时间</td>
+                <td>药品名称</td>
+                <td>患者姓名</td>
+                <td>性别</td>
+                <td>身份证号</td>
+                <td>住院号</td>
+                <td>住院诊断</td>
+                <td>药品规格</td>
+                <td>数量</td>
+                <td>实际用量</td>
+                <td>余量处理</td>
+                <td>发药人</td>
+                <td>复核人</td>
+                <td>药品批号</td>
+              </tr>
+              <tr>
+                <td style="border: none"></td>
+              </tr>
+              </thead>
+              <tbody v-for="(val, key) in usedPoisonousAnesthetics">
+                <tr v-for="(item, index) in val" :key="'usedPoisonousAnesthetics-' + key + '-' + index">
+                  <td>{{item.chargeDate}}</td>
+                  <td>{{item.chargeName}}</td>
+                  <td>{{item.patName}}</td>
+                  <td>{{item.patGender}}</td>
+                  <td>{{item.socialNo}}</td>
+                  <td>{{item.patNo}}</td>
+                  <td>{{item.admdiag}}</td>
+                  <td>{{item.spec}}</td>
+                  <td>{{item.chargeAmount}}</td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                </tr>
+                <tr>
+                  <td style="border: none" colspan="8"></td>
+                  <td style="border: none;color: #0a84fd">总计：{{poisonousAnestheticsCounts[key]}}</td>
+                  <td style="border: none" colspan="5"></td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </el-dialog>
       </div>
@@ -249,7 +261,8 @@ const getPoisonousAnesthetics = () => {
   const params = {
     start: dateRange[0],
     end: dateRange[1],
-    dept: userInfo.value.deptCode
+    // dept: userInfo.value.deptCode
+    dept: '1120000'
   }
   fetchPoisonousAnesthetics(params).then(res => {
     usedPoisonousAnesthetics = res.medicines
@@ -259,14 +272,17 @@ const getPoisonousAnesthetics = () => {
 }
 
 const printUsedPoisonousAnesthetics = () => {
-  const strFormHtml = '<body>' + document.getElementById('poisonousAnestheticsArea').innerHTML + '</body>'
+  const styleContent = '<style>#jmtable tr td, #jmtable tr th {border: 1px solid black;text-align: center;font-size: 12px} #jmtable {border-collapse: collapse;}</style>'
+  const strFormHtml = styleContent + '<body>' + document.getElementById('poisonousAnestheticsArea').innerHTML + '</body>'
   let LODOP = getLodop()
   LODOP.PRINT_INIT('poisonousAnestheticsArea')
   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('1mm', '1mm', '100%', '100%', strFormHtml)
+  LODOP.ADD_PRINT_TABLE('2mm', '2mm', '292mm', '195mm', strFormHtml)
   LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", 1)
+  LODOP.SET_PRINT_STYLE('ItemType', 3)
+  LODOP.ADD_PRINT_TEXT('4mm', '267mm', '20mm', '7mm', '第#页/共&页')
   LODOP.PREVIEW()
 }
 
@@ -281,4 +297,13 @@ onMounted(() => {
 :deep(.dialog-no-header .el-dialog__header) {
   display: none;
 }
+
+#jmtable tr td, #jmtable tr th {
+  border: 1px solid black;
+  text-align: center;
+  font-size: 12px;
+}
+#jmtable {
+  border-collapse: collapse;
+}
 </style>