费用清单问题

package-lock.json

@@ -36,6 +36,7 @@
         "qrcanvas": "3.1.2",
         "sortablejs": "1.15.2",
         "vue": "3.4.27",
+        "vue-cropper": "^1.1.2",
         "vue-router": "4.0.16",
         "vue3-json-viewer": "2.2.2",
         "vue3-print-nb": "0.1.4",
@@ -12032,6 +12033,11 @@
         }
       }
     },
+    "node_modules/vue-cropper": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/vue-cropper/-/vue-cropper-1.1.2.tgz",
+      "integrity": "sha512-S4cmvQzdNiVpNGigFwgULSwxWp55bdD1xf+RIEH+4mLDpD9/MUjNoHf970V3nFX7SerUrPZbOXG/ZBaD6pxfWQ=="
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

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

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import ChargeTable from "@/components/medical-insurance/charge-list/ChargeTable.vue";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {
+  executeSelfpayUpload,
+  selectBriefPatInfo,
+  selectChargeList,
+  selectPatOverviews
+} from "@/api/inpatient/charge-list";
+
+const props = defineProps({
+  patNo: {
+    type: String,
+    require: false,
+    default: null
+  },
+  times: {
+    type: Number,
+    require: false,
+    default: null
+  },
+  showButton: {
+    type: Boolean,
+    default: true
+  }
+})
+const emits = defineEmits(["close"])
+
+const patList = ref([])
+const briefPatInfo = ref({})
+const chargeListMap = ref({})
+const sumsMap = ref({})
+
+const currentPatNo = ref('')
+const fetchOverview = () => {
+  if (!currentPatNo.value) {
+    ElMessage({
+      message: '住院号不能为空！',
+      type: 'warning',
+      duration: 2500,
+      showClose: true
+    })
+    return
+  }
+  selectPatOverviews(currentPatNo.value).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 selfpayUpload = () => {
+  if (!briefPatInfo.value.patNo) {
+    ElMessage({
+      message: '请先选择住院历史记录。',
+      type: 'warning',
+      duration: 2500,
+      showClose: true
+    })
+    return
+  }
+  executeSelfpayUpload(briefPatInfo.value).then(res => {
+    ElMessageBox.alert(res, '上传完成', {
+      type: 'info',
+      showCancelButton: false,
+    })
+  })
+}
+
+
+onMounted(() => {
+  if (props.patNo && props.times) {
+    currentPatNo.value = props.patNo
+    selectPatOverviews(props.patNo).then(res => {
+      patList.value = res
+    })
+  }
+})
+</script>
+
+<template>
+  <div class="layout_container layout-horizontal">
+    <aside class="layout_container layout_el-table" style="width: max-content">
+      <header>
+        <el-input v-model="currentPatNo" placeholder="住院号" clearable style="width: 120px"></el-input>
+        <el-button type="primary" icon="Search" style="margin-left: 20px" @click="fetchOverview">查询</el-button>
+        <el-button type="primary" icon="Upload" style="margin-left: 20px" @click="selfpayUpload">自费上传</el-button>
+      </header>
+      <el-table :data="patList" stripe highlight-current-row
+                style="width:  calc(100% - 10px)"
+                @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">
+            <span v-html="ajustDisdate(scope.row.disdate)"></span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </aside>
+
+    <div class="layout_main">
+      <ChargeTable :brief-pat-info="briefPatInfo"
+                   :sumsMap="sumsMap"
+                   :charge-list-map="chargeListMap"/>
+    </div>
+  </div>
+</template>

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

@@ -5,42 +5,11 @@
             cancel-text="关闭"
             :confirm-click="execPrint"
   >
-    <div class="layout_display_flex">
-      <div>
-        <div class="flex-header">
-          <el-input v-model="currentPatNo" placeholder="住院号" clearable style="width: 120px"></el-input>
-          <el-button type="primary" icon="Search" style="margin-left: 20px" @click="fetchOverview">查询</el-button>
-          <el-button type="primary" icon="Upload" style="margin-left: 20px" @click="selfpayUpload">自费上传</el-button>
-        </div>
-
-        <div style="width: 336px">
-          <el-table :data="patList" stripe highlight-current-row
-                    style="width:  calc(100% - 10px)"
-                    @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">
-                <span v-html="ajustDisdate(scope.row.disdate)"></span>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-
-      </div>
-
-      <div class="layout_flex_1-x">
-        <ChargeTable :brief-pat-info="briefPatInfo"
-                     :sumsMap="sumsMap"
-                     :charge-list-map="chargeListMap"/>
-      </div>
-    </div>
+    <Charge :patNo :times :showButton/>
   </CyDialog>
 </template>
 
-<script>
+<script setup>
 import {
   selectPatOverviews,
   selectBriefPatInfo,
@@ -49,143 +18,118 @@ import {
 } from "@/api/inpatient/charge-list";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {getLodop, initLodop} from '@/utils/c-lodop'
-import ChargeTable from "@/components/medical-insurance/charge-list/ChargeTable.vue";
+import Charge from "./Charge.vue";
 import CyDialog from "@/components/cy/dialog/src/CyDialog.vue";
 
-export default {
-  components: {CyDialog, ChargeTable},
-  props: {
-    patNo: {
-      type: String,
-      require: false,
-      default: null
-    },
-    times: {
-      type: Number,
-      require: false,
-      default: null
-    },
-    showButton: {
-      type: Boolean,
-      default: true
-    }
+const props = defineProps({
+  patNo: {
+    type: String,
+    require: false,
+    default: null
   },
-  emits: ['close'],
-  setup(props, ctx) {
-    const patList = ref([])
-    const briefPatInfo = ref({})
-    const chargeListMap = ref({})
-    const sumsMap = ref({})
-
-    const currentPatNo = ref('')
-
-    const chargeListBoxStyle = {
-      height: window.innerHeight - 180 + 'px',
-      width: '100%',
-      overflowY: 'scroll'
-    }
-
-    const fetchOverview = () => {
-      if (!currentPatNo.value) {
-        ElMessage({
-          message: '住院号不能为空！',
-          type: 'warning',
-          duration: 2500,
-          showClose: true
-        })
-        return
-      }
-      selectPatOverviews(currentPatNo.value).then(res => {
-        patList.value = res
-      })
-    }
+  times: {
+    type: Number,
+    require: false,
+    default: null
+  },
+  showButton: {
+    type: Boolean,
+    default: true
+  }
+})
+const emits = defineEmits(["close"])
+
+const patList = ref([])
+const briefPatInfo = ref({})
+const chargeListMap = ref({})
+const sumsMap = ref({})
+
+const currentPatNo = ref('')
+const fetchOverview = () => {
+  if (!currentPatNo.value) {
+    ElMessage({
+      message: '住院号不能为空！',
+      type: 'warning',
+      duration: 2500,
+      showClose: true
+    })
+    return
+  }
+  selectPatOverviews(currentPatNo.value).then(res => {
+    patList.value = res
+  })
+}
 
-    const ajustDisdate = (disdate) => {
-      return disdate ? disdate : '<span style="color: green">● 在院</span>'
-    }
+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 fetchBriefPatInfo = (row) => {
+  selectBriefPatInfo(row).then(res => {
+    briefPatInfo.value = res
+    selectChargeList(row).then(rslt => {
+      chargeListMap.value = rslt.chargeList
+      sumsMap.value = rslt.sumsMap
+    })
+  })
+}
 
-    const selfpayUpload = () => {
-      if (!briefPatInfo.value.patNo) {
-        ElMessage({
-          message: '请先选择住院历史记录。',
-          type: 'warning',
-          duration: 2500,
-          showClose: true
-        })
-        return
-      }
-      executeSelfpayUpload(briefPatInfo.value).then(res => {
-        ElMessageBox.alert(res, '上传完成', {
-          type: 'info',
-          showCancelButton: false,
-        })
-      })
-    }
+const selfpayUpload = () => {
+  if (!briefPatInfo.value.patNo) {
+    ElMessage({
+      message: '请先选择住院历史记录。',
+      type: 'warning',
+      duration: 2500,
+      showClose: true
+    })
+    return
+  }
+  executeSelfpayUpload(briefPatInfo.value).then(res => {
+    ElMessageBox.alert(res, '上传完成', {
+      type: 'info',
+      showCancelButton: false,
+    })
+  })
+}
 
 
-    const execPrint = () => {
-      if (!briefPatInfo.value.patNo) {
-        ElMessage({
-          message: '请先选择住院历史记录。',
-          type: 'warning',
-          duration: 2500,
-          showClose: true
-        })
-        return
-      }
-      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', '3mm', '210mm', '230mm', pagePrint)
-      LODOP.SET_PRINT_STYLE('ItemType', 3)
-      LODOP.ADD_PRINT_TEXT('280mm', '180mm', '25mm', '10mm', '第#页/共&页')
-      LODOP.PRINT();
-      // LODOP.PRINT_DESIGN()
-    }
+const execPrint = () => {
+  if (!briefPatInfo.value.patNo) {
+    ElMessage({
+      message: '请先选择住院历史记录。',
+      type: 'warning',
+      duration: 2500,
+      showClose: true
+    })
+    return
+  }
+  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', '3mm', '210mm', '230mm', pagePrint)
+  LODOP.SET_PRINT_STYLE('ItemType', 3)
+  LODOP.ADD_PRINT_TEXT('280mm', '180mm', '25mm', '10mm', '第#页/共&页')
+  LODOP.PRINT();
+  // LODOP.PRINT_DESIGN()
+}
 
-    onMounted(() => {
-      initLodop()
-      if (props.patNo && props.times) {
-        currentPatNo.value = props.patNo
-        selectPatOverviews(props.patNo).then(res => {
-          patList.value = res
-        })
-      }
+onMounted(() => {
+  initLodop()
+  if (props.patNo && props.times) {
+    currentPatNo.value = props.patNo
+    selectPatOverviews(props.patNo).then(res => {
+      patList.value = res
     })
+  }
+})
 
-    const closeTablet = () => {
-      ctx.emit('close')
-    }
-    return {
-      currentPatNo,
-      patList,
-      briefPatInfo,
-      chargeListMap,
-      sumsMap,
-      chargeListBoxStyle,
-      fetchOverview,
-      ajustDisdate,
-      fetchBriefPatInfo,
-      closeTablet,
-      selfpayUpload,
-      execPrint,
-      props,
-    }
-  },
+const closeTablet = () => {
+  emits('close')
 }
+
 </script>
 
 <style scoped>

src/components/pat-info-list/PatInfomationDialog.vue

@@ -18,9 +18,9 @@
                         :in-the-hospital="props.leaveHospital === 1"/>
       </el-tab-pane>
       <el-tab-pane label="清单">
-        <charge-list :pat-no="props.patNo"
-                     :show-button="false"
-                     :times="props.times"/>
+        <Charge :pat-no="props.patNo"
+                :show-button="false"
+                :times="props.times"/>
       </el-tab-pane>
       <el-tab-pane label="护理">
         <emr-yz-temperature :pat-no="props.patNo"
@@ -58,12 +58,13 @@ import GroupConsultation from "@/components/pat-info-list/GroupConsultation.vue"
 import ElectronicMedicalRecord from "@/components/pat-info-list/ElectronicMedicalRecord.vue";
 import {getSheetInfo} from "@/api/case-front-sheet";
 import {formatDate} from "@/utils/date";
-import ChargeList from '@/components/medical-insurance/charge-list/Index.vue'
 import {getDisPatient, getPatientInfo} from "@/api/inpatient/patient";
 import HuanZheXinXi from "@/components/zhu-yuan-yi-sheng/HuanZheXinXi.vue";
 import EmrYzTemperature from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/EmrYzTemperature.vue";
 import EmrOperation from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/EmrOperation.vue";
 import EmrTestV2 from "@/components/zhu-yuan-yi-sheng/emr/auxiliary-tools/EmrTestV2/EmrTestV2.vue";
+import Charge from '@/components/medical-insurance/charge-list/Charge.vue'
+
 
 const props = defineProps({
   patNo: String,

src/layout/HeaderV2/RouteNavigation.vue

@@ -25,6 +25,7 @@ import RightClickMenu from "@/components/menu-item/RightClickMenu";
 import router from '@/router'
 import XEUtils from "xe-utils";
 import {stringIsBlank} from "@/utils/blank-utils";
+import {Close} from "@element-plus/icons-vue";
 
 const tagRef = ref<HTMLElement | null>(null)