完成住院费用清单。

src/api/inpatient/charge-list.js

@@ -1,9 +1,25 @@
 import request from '../../utils/request'
 
-export function selectBriefPatInfo(patNo) {
+export function selectPatOverviews(patNo) {
     return request({
-        url: '/chargeList/selectBriefPatInfo',
+        url: '/chargeList/selectPatOverviews',
         method: 'get',
-        params: { patNo },
+        params: {patNo},
     })
 }
+
+export function selectBriefPatInfo(data) {
+    return request({
+        url: '/chargeList/selectBriefPatInfo',
+        method: 'post',
+        data,
+    })
+}
+
+export function selectChargeList(data) {
+    return request({
+        url: '/chargeList/selectChargeList',
+        method: 'post',
+        data,
+    })
+}

src/components/medical-insurance/charge-list/Index.vue

@@ -4,12 +4,14 @@
       <div style="width: 330px;height: 100%; padding: 0 12px; border-right: 1px solid lightgray">
         <div class="flex-header">
           <el-input v-model="patNo" placeholder="住院号" clearable style="width: 160px"></el-input>
-          <el-button type="primary" icon="Search" style="margin-left: 20px">查询</el-button>
+          <el-button type="primary" icon="Search" style="margin-left: 20px" @click="fetchOverview">查询</el-button>
         </div>
-        <div style="width: 306px">
-          <el-table ref="briefPatInfoRef" :height="tableHeight" :data="patList" stripe highlight-current-row style="width: 306px">
-            <el-table-column prop="times" label="次数" width="40"></el-table-column>
-            <el-table-column prop="name" label="姓名" width="100"></el-table-column>
+        <div style="width: 336px">
+          <el-table :height="tableHeight" :data="patList" stripe highlight-current-row style="width: 336px"
+                    @row-click="fetchBriefPatInfo">
+            <el-table-column prop="times" label="次数" width="35"></el-table-column>
+            <el-table-column prop="name" label="姓名" width="70"></el-table-column>
+            <el-table-column prop="totalCharge" label="总费用" width="75"></el-table-column>
             <el-table-column prop="admdate" label="入院"></el-table-column>
             <el-table-column prop="disdate" label="出院">
               <template #default="scope">
@@ -19,12 +21,77 @@
           </el-table>
         </div>
       </div>
-      <div style="width: calc(100% - 330px);height: 100%;">
-        <div class="flex-header">
-          <div style="position: absolute; right: 16px">
-            <el-button type="danger" plain circle icon="Close" @click="closeTablet"></el-button>
-          </div>
-        </div>
+      <div style="position: fixed; right: 16px; top: 16px">
+        <el-button type="primary" plain circle icon="Printer" title="打印" @click="execPrint"></el-button>
+        <el-button type="danger" plain circle icon="Close" @click="closeTablet" title="关闭"></el-button>
+      </div>
+      <div id="printArea" style="width: calc(100% - 350px);height: 100%;margin: 0 10px">
+        <table style="width: 100%">
+          <thead>
+          <tr>
+            <td colspan="8"
+                style="width: 96%;height: 40px;text-align: center;vertical-align:center;font-size: 20px;font-weight: bold;">
+              住院病人费用明细清单
+            </td>
+          </tr>
+          <tr>
+            <td colspan="8" style="font-size: 16px; font-weight: bold">
+              床号：{{ briefPatInfo.bedNo }}
+            </td>
+          </tr>
+          <tr>
+            <td style="height: 22px">住院号：{{ briefPatInfo.patNo }}</td>
+            <td colspan="2">姓名：{{ briefPatInfo.name }}</td>
+            <td colspan="3">性别：{{ briefPatInfo.gender }}</td>
+            <td colspan="2">科室：{{ briefPatInfo.dept }}</td>
+          </tr>
+          <tr>
+            <td style=";height: 22px">入院日期：{{ briefPatInfo.admdate }}</td>
+            <td colspan="2">医疗类别：{{ briefPatInfo.medtype }}</td>
+            <td colspan="3">可用余额：{{ briefPatInfo.balance }}</td>
+            <td colspan="2">总费用：{{ briefPatInfo.totalCost }}</td>
+          </tr>
+          <tr>
+            <td style="border-bottom: 2px solid black;height: 22px">开始日期：{{ briefPatInfo.begndate }}</td>
+            <td colspan="2" style="border-bottom: 2px solid black">结束日期：{{ briefPatInfo.enddate }}</td>
+            <td colspan="3" style="border-bottom: 2px solid black">天数：{{ briefPatInfo.days }}</td>
+            <td colspan="2" style="border-bottom: 2px solid black">账页号：{{ briefPatInfo.ledger }}</td>
+          </tr>
+          <tr>
+            <td style="height:28px;width: 20%;border-bottom: 1px solid lightgray">医保编码</td>
+            <td style="width: 20%;border-bottom: 1px solid lightgray">项目名称</td>
+            <td style="width: 8%;border-bottom: 1px solid lightgray">规格</td>
+            <td style="width: 8%;border-bottom: 1px solid lightgray">单位</td>
+            <td style="width: 8%;border-bottom: 1px solid lightgray">单价</td>
+            <td style="width: 8%;border-bottom: 1px solid lightgray">数量</td>
+            <td style="width: 8%;border-bottom: 1px solid lightgray">金额</td>
+            <td style="width: 20%;border-bottom: 1px solid lightgray">执行科室</td>
+          </tr>
+          </thead>
+           <tbody v-for="(val, key) in chargeListMap" :id="key">
+           <tr><td style="height: 28px;font-weight: bold;font-size: 14px; border-bottom: 1px solid #333">{{ key }}</td></tr>
+           <tr v-for="(item, index) in val" :key="index">
+             <td style="width: 20%;height: 28px;padding: 4px 12px 4px 0">{{ item.code }}</td>
+             <td style="width: 20%;height: 28px;padding: 4px 12px 4px 0">{{ item.name }}</td>
+             <td style="width: 8%;height: 28px;padding: 4px 12px 4px 0">{{ item.specification }}</td>
+             <td style="width: 8%;height: 28px;padding: 4px 12px 4px 0">{{ item.unit }}</td>
+             <td style="width: 8%;height: 28px;padding: 4px 12px 4px 0">{{ item.priceString }}</td>
+             <td style="width: 8%;height: 28px;padding: 4px 12px 4px 0">{{ item.quantityString }}</td>
+             <td style="width: 8%;height: 28px;padding: 4px 12px 4px 0">{{ item.costString }}</td>
+             <td style="width: 20%;height: 28px;padding: 4px 12px 4px 0">{{ item.execDept }}</td>
+           </tr>
+           <tr>
+             <td colspan="7" style="border-bottom: 1px solid lightgray"></td>
+             <td style="text-align: left; font-size: 15px;font-weight: bold;border-bottom: 1px solid lightgray">小计：{{sumsMap[key]}}</td>
+           </tr>
+           </tbody>
+           <tbody>
+           <tr>
+             <td colspan="7" style="height:36px;border-bottom: 2px solid black"></td>
+             <td style="text-align: left; font-size: 15px;font-weight: bold;border-bottom: 2px solid black">总计：{{ sumsMap['总计'] }}</td>
+           </tr>
+           </tbody>
+        </table>
       </div>
     </div>
   </window-size>
@@ -32,11 +99,12 @@
 
 <script>
 import WindowSize from "@/components/window-size/Index.vue";
-import {selectBriefPatInfo} from "@/api/inpatient/charge-list";
-import {smoothScrollTableColumn} from '@/utils/el-table-scroll'
+import {selectPatOverviews, selectBriefPatInfo, selectChargeList} from "@/api/inpatient/charge-list";
+import {ElMessage} from "element-plus";
+import {getLodop, initLodop} from '@/utils/c-lodop'
 
 export default {
-  components: { WindowSize },
+  components: {WindowSize},
   props: {
     patNo: {
       type: String,
@@ -51,24 +119,66 @@ export default {
   },
   emits: ['close'],
   setup(props, ctx) {
-
     const tableHeight = window.innerHeight - 72
-    const briefPatInfoRef = ref(null)
     const patList = ref([])
+    const briefPatInfo = ref({})
+    const chargeListMap = ref({})
+    const sumsMap = ref({})
+
+    const chargeListBoxStyle = {
+      height: window.innerHeight - 180 + 'px',
+      width: '100%',
+      overflowY: 'scroll'
+    }
+
+    const fetchOverview = () => {
+      if (!props.patNo) {
+        ElMessage({
+          message: '住院号不能为空！',
+          type: 'warning',
+          duration: 2500,
+          showClose: true
+        })
+        return
+      }
+      selectPatOverviews(props.patNo).then(res => {
+        patList.value = res
+      })
+    }
+
     const ajustDisdate = (disdate) => {
       return disdate ? disdate : '<span style="color: green">● 在院</span>'
     }
 
+    const fetchBriefPatInfo = (row) => {
+      selectBriefPatInfo(row).then(res => {
+        briefPatInfo.value = res
+        selectChargeList(row).then(rslt => {
+          chargeListMap.value = rslt.chargeList
+          sumsMap.value = rslt.sumsMap
+        })
+      })
+    }
+
+    const execPrint = () => {
+      let LODOP = getLodop();
+
+      const prntStyle = `<style>table, table * {margin: 0;padding: 0;border-collapse: collapse;font-size: 12px}</style>`
+      const prntContent = document.getElementById('printArea').innerHTML
+      let pagePrint = prntStyle + '<body>' + prntContent + '</body>'
+      LODOP.PRINT_INIT('chargelist')
+      LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')
+      LODOP.ADD_PRINT_TABLE('0mm', '0mm', '210mm', '230mm', pagePrint)
+      LODOP.SET_PRINT_STYLE('ItemType', 3)
+      LODOP.ADD_PRINT_TEXT('275mm', '177mm', '20mm', '10mm', '第#页/共&页')
+      LODOP.PRINT()
+    }
+
     onMounted(() => {
+      initLodop()
       if (props.patNo && props.times) {
-        selectBriefPatInfo(props.patNo).then(res => {
+        selectPatOverviews(props.patNo).then(res => {
           patList.value = res
-          const propsIndex = res.findIndex((item) => {
-            return item.times === props.times
-          })
-          nextTick(() => {
-            smoothScrollTableColumn(briefPatInfoRef.value, propsIndex, res[propsIndex])
-          })
         })
       }
     })
@@ -78,10 +188,16 @@ export default {
     }
     return {
       tableHeight,
-      briefPatInfoRef,
       patList,
+      briefPatInfo,
+      chargeListMap,
+      sumsMap,
+      chargeListBoxStyle,
+      fetchOverview,
       ajustDisdate,
-      closeTablet
+      fetchBriefPatInfo,
+      closeTablet,
+      execPrint,
     }
   },
 }
@@ -92,6 +208,14 @@ export default {
   display: flex;
   width: 100%;
   height: 60px;
-  align-items: center
+  align-items: center;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+table, table * {
+  margin: 0;
+  padding: 0;
+  border-collapse: collapse;
 }
 </style>