优化样式

src/components/inpatient/IdentifyImage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="component-box-wrapper__fullscreen">
+  <div class="component-box-wrapper__fullscreen" :style="{ zIndex }">
     <div style="font-size: 18px; margin-bottom: 20px">身份信息</div>
     <div style="position: fixed; top: 12px; right: 12px">
       <el-button type="primary" icon="Plus" @click="zoomInIdCard" circle title="放大"></el-button>
@@ -17,76 +17,69 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { ref, onMounted } from 'vue'
 import { getIdCardInfo } from '@/api/inpatient/patient'
-export default {
-  props: {
-    patNo: {
-      type: String,
-      required: true,
-    },
-    times: {
-      type: Number,
-      required: true,
-    },
-  },
-  emits: ['close'],
-  setup(props, ctx) {
-    const patient = ref({})
-    const identifyImageFile = ref('')
-    const idCardImgStyle = ref({
-      width: '684.8px',
-      height: '432px',
-      borderRadius: '4px',
-      w: 684.8,
-      h: 432,
-    })
-    const zoomInIdCard = () => {
-      idCardImgStyle.value.w = idCardImgStyle.value.w * 1.2
-      idCardImgStyle.value.h = idCardImgStyle.value.h * 1.2
-      idCardImgStyle.value.width = idCardImgStyle.value.w + 'px'
-      idCardImgStyle.value.height = idCardImgStyle.value.h + 'px'
-    }
-    const resetIdCard = () => {
-      idCardImgStyle.value.w = 684.8
-      idCardImgStyle.value.h = 432
-      idCardImgStyle.value.width = '684.8px'
-      idCardImgStyle.value.height = '432px'
-    }
-    const closeIdCard = () => {
-      identifyImageFile.value = null
-      resetIdCard()
-      ctx.emit('close')
-    }
-    const checkIdInfo = () => {
-      getIdCardInfo(props.patNo, props.times)
-        .then((res) => {
-          patient.value = res.patient
-          identifyImageFile.value = 'data:image/png;base64,' + res.idCard.fileSfz
-        })
-        .catch(() => {
-          ctx.emit('close')
-        })
-    }
-    onMounted(() => {
-      checkIdInfo()
-    })
-    return {
-      patient,
-      identifyImageFile,
-      idCardImgStyle,
-      zoomInIdCard,
-      resetIdCard,
-      closeIdCard,
-    }
+import {useZIndex} from "element-plus";
+
+const props = defineProps({
+  patNo: {
+    type: String,
+    required: true,
   },
+  times: {
+    type: Number,
+    required: true,
+  }
+})
+
+const emits = defineEmits(['close'])
+
+const patient = ref({})
+const identifyImageFile = ref('')
+const idCardImgStyle = ref({
+  width: '684.8px',
+  height: '432px',
+  borderRadius: '4px',
+  w: 684.8,
+  h: 432,
+})
+const zoomInIdCard = () => {
+  idCardImgStyle.value.w = idCardImgStyle.value.w * 1.2
+  idCardImgStyle.value.h = idCardImgStyle.value.h * 1.2
+  idCardImgStyle.value.width = idCardImgStyle.value.w + 'px'
+  idCardImgStyle.value.height = idCardImgStyle.value.h + 'px'
+}
+const resetIdCard = () => {
+  idCardImgStyle.value.w = 684.8
+  idCardImgStyle.value.h = 432
+  idCardImgStyle.value.width = '684.8px'
+  idCardImgStyle.value.height = '432px'
 }
+const closeIdCard = () => {
+  identifyImageFile.value = null
+  resetIdCard()
+  emits('close')
+}
+const checkIdInfo = () => {
+  getIdCardInfo(props.patNo, props.times)
+      .then((res) => {
+        patient.value = res.patient
+        identifyImageFile.value = 'data:image/png;base64,' + res.idCard.fileSfz
+      })
+      .catch(() => {
+        emits('close')
+      })
+}
+
+const zIndex = ref(0)
+onMounted(() => {
+  zIndex.value = useZIndex().nextZIndex()
+  checkIdInfo()
+})
 </script>
 
 <style scoped>
-.affix-container {
-}
 .his-info-box {
   font-size: 15px;
   margin-bottom: 20px;

src/components/medical-insurance/medfee-analyse/Index.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="component-box-wrapper__fullscreen">
+  <div class="component-box-wrapper__fullscreen layout_container" :style="{zIndex}">
     <div style="font-size: 18px !important; margin-bottom: 20px">医保费用明细</div>
     <div style="position: fixed; top: 12px; right: 20px; width: 100%; text-align: right">
       <el-button circle icon="Close" title="关闭" type="danger" @click="close"></el-button>
     </div>
-    <el-container>
-      <el-aside width="360px">
+    <div class="layout_main layout_container layout-horizontal">
+      <aside style="width: 360px">
         <div style="display: flex; height: 36px; align-items: center; font-weight: 600; padding: 0 12px">
           <div style="width: 20%">费用类别</div>
           <div style="width: 20%">总金额</div>
@@ -13,7 +13,8 @@
           <div style="width: 20%">乙类</div>
           <div style="width: 20%">丙类</div>
         </div>
-        <div v-for="(val, key) in analyse" :key="key" :style="currentStyle(key)" class="fee-type" @click="handleClickChrgtype(key)">
+        <div v-for="(val, key) in analyse" :key="key" :style="currentStyle(key)" class="fee-type"
+             @click="handleClickChrgtype(key)">
           <div>
             <div style="width: 20%">{{ val[0] }}</div>
             <div style="width: 20%" class="fee-by-lv" @click.stop="handleClickChrgLv(key, '00')">{{ val[1] }}</div>
@@ -22,27 +23,32 @@
             <div style="width: 20%" class="fee-by-lv" @click.stop="handleClickChrgLv(key, '03')">{{ val[4] }}</div>
           </div>
         </div>
-      </el-aside>
-      <el-main>
-        <el-descriptions :column="4" border>
-          <el-descriptions-item>
-            <template #label> 姓名</template>
-            {{ psninfo.psnName }}
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template #label> 住院号</template>
-            {{ psninfo.patNo }}
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template #label> 住院次数</template>
-            {{ psninfo.times }}
-          </el-descriptions-item>
-          <el-descriptions-item>
-            <template #label> 账页号</template>
-            {{ psninfo.ledgerSn }}
-          </el-descriptions-item>
-        </el-descriptions>
-        <el-table :data="cptFeedtle.slice(pageSize * (currentPage - 1), pageSize * currentPage)" :height="tableHeight" stripe>
+      </aside>
+      <div class="layout_main layout_el-table">
+        <div>
+          <el-descriptions :column="4" border>
+            <el-descriptions-item>
+              <template #label> 姓名</template>
+              {{ psninfo.psnName }}
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label> 住院号</template>
+              {{ psninfo.patNo }}
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label> 住院次数</template>
+              {{ psninfo.times }}
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label> 账页号</template>
+              {{ psninfo.ledgerSn }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+        <el-table
+            :data="cptFeedtle.slice(pageSize * (currentPage - 1), pageSize * currentPage)"
+            stripe
+        >
           <el-table-column label="流水号" prop="feedetlSn" width="60"></el-table-column>
           <el-table-column label="费用发生时间" prop="feeOcurTime"></el-table-column>
           <el-table-column label="院内码" prop="medinsListCodg"></el-table-column>
@@ -61,116 +67,98 @@
           <el-table-column label="医生" prop="bilgDrName"></el-table-column>
         </el-table>
         <el-pagination
-          :current-page="currentPage"
-          :page-size="pageSize"
-          :page-sizes="[10, 30, 50, 100]"
-          :total="cptFeedtle.length"
-          layout="total, sizes, prev, pager, next, jumper"
-          style="margin-top: 5px"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :page-sizes="[10, 30, 50, 100]"
+            :total="cptFeedtle.length"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
         ></el-pagination>
-      </el-main>
-    </el-container>
+      </div>
+    </div>
   </div>
 </template>
 
-<script>
-import { queryFeeDetails } from '@/api/medical-insurance/si-query'
-import { computed, onMounted, ref } from 'vue'
+<script setup>
+import {queryFeeDetails} from '@/api/medical-insurance/si-query'
+import {computed, onMounted, ref} from 'vue'
+import {useZIndex} from "element-plus";
 
-export default {
-  props: {
-    type: {
-      type: String,
-      default: 'settled',
-    },
-    mdtrtId: {
-      type: String,
-      required: true,
-    },
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'settled',
   },
-  emits: ['close'],
-  setup(props, ctx) {
-    const tableHeight = window.innerHeight - 70
-    const psninfo = ref({})
-    const feedtle = ref([])
-    const analyse = ref({})
-    const currentChargeType = ref('zhj')
-    const currentChargeLv = ref('00')
-    const pageSize = ref(30)
-    const currentPage = ref(1)
-    const handleSizeChange = (val) => {
-      pageSize.value = val
-    }
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
-    }
-    const cptFeedtle = computed(() => {
-      return feedtle.value.filter((itm) => {
-        if (currentChargeType.value === 'zhj') {
-          return currentChargeLv.value === '00' ? true : itm.chrgitmLv === currentChargeLv.value
-        }
-        return currentChargeLv.value === '00' ? itm.medChrgitmType === currentChargeType.value :
-            (itm.medChrgitmType === currentChargeType.value && itm.chrgitmLv === currentChargeLv.value)
-      })
-    })
+  mdtrtId: {
+    type: String,
+    required: true,
+  }
+})
 
-    const currentStyle = (chrgtype) => {
-      return {
-        background: currentChargeType.value === chrgtype ? '#409EFF' : '',
-        color: currentChargeType.value === chrgtype ? 'white' : '',
-      }
-    }
+const emits = defineEmits(['close'])
 
-    const handleClickChrgtype = (key) => {
-      currentChargeType.value = key
-      currentChargeLv.value = '00'
-      currentPage.value = 1
+const psninfo = ref({})
+const feedtle = ref([])
+const analyse = ref({})
+const currentChargeType = ref('zhj')
+const currentChargeLv = ref('00')
+const pageSize = ref(30)
+const currentPage = ref(1)
+const handleSizeChange = (val) => {
+  pageSize.value = val
+}
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+}
+const cptFeedtle = computed(() => {
+  return feedtle.value.filter((itm) => {
+    if (currentChargeType.value === 'zhj') {
+      return currentChargeLv.value === '00' ? true : itm.chrgitmLv === currentChargeLv.value
     }
+    return currentChargeLv.value === '00' ? itm.medChrgitmType === currentChargeType.value :
+        (itm.medChrgitmType === currentChargeType.value && itm.chrgitmLv === currentChargeLv.value)
+  })
+})
 
-    const handleClickChrgLv = (key, level) => {
-      currentChargeType.value = key
-      currentChargeLv.value = level
-    }
+const currentStyle = (chrgtype) => {
+  return {
+    background: currentChargeType.value === chrgtype ? '#409EFF' : '',
+    color: currentChargeType.value === chrgtype ? 'white' : '',
+  }
+}
 
-    const fetchFeedtle = () => {
-      const param = {
-        mdtrtId: props.mdtrtId,
-        type: props.type,
-      }
-      queryFeeDetails(param).then((res) => {
-        psninfo.value = res.psninfo
-        feedtle.value = res.feedtle
-        analyse.value = res.analyse
-      })
-    }
+const handleClickChrgtype = (key) => {
+  currentChargeType.value = key
+  currentChargeLv.value = '00'
+  currentPage.value = 1
+}
 
-    const close = () => {
-      ctx.emit('close')
-    }
+const handleClickChrgLv = (key, level) => {
+  currentChargeType.value = key
+  currentChargeLv.value = level
+}
 
-    onMounted(() => {
-      fetchFeedtle()
-    })
+const fetchFeedtle = () => {
+  const param = {
+    mdtrtId: props.mdtrtId,
+    type: props.type,
+  }
+  queryFeeDetails(param).then((res) => {
+    psninfo.value = res.psninfo
+    feedtle.value = res.feedtle
+    analyse.value = res.analyse
+  })
+}
 
-    return {
-      tableHeight,
-      psninfo,
-      feedtle,
-      analyse,
-      cptFeedtle,
-      pageSize,
-      currentPage,
-      handleSizeChange,
-      handleCurrentChange,
-      currentStyle,
-      handleClickChrgtype,
-      handleClickChrgLv,
-      close,
-    }
-  },
+const close = () => {
+  emits('close')
 }
+const zIndex = ref(0)
+onMounted(() => {
+  zIndex.value = useZIndex().nextZIndex()
+  fetchFeedtle()
+})
 </script>
 
 <style scoped>

src/css/app.scss

@@ -90,16 +90,14 @@ ul, li {
 }
 
 .component-box-wrapper__fullscreen {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background: white;
   padding: 20px;
-  z-index: 10000;
-  height: 100%;
-  overflow: auto;
+  //z-index: 10000;
 }
 
 .component-box-wrapper__half-transparent {

src/views/medical-insurance/inpatient/SettleVerification.vue

@@ -7,7 +7,8 @@
         <el-option :value="2" label="已结算"></el-option>
       </el-select>
       <span v-show="inOutFlag === 2">
-        <el-date-picker type="daterange" v-model="disdateRange" style="width: 180px" @change="handleDisdateRangeChange"></el-date-picker>
+        <el-date-picker type="daterange" v-model="disdateRange" style="width: 180px"
+                        @change="handleDisdateRangeChange"></el-date-picker>
       </span>
       <span v-show="inOutFlag === 1">
         <el-select v-model="medType" placeholder="医疗类别" style="width: 100px" clearable>
@@ -229,28 +230,25 @@
     </div>
   </div>
 
-  <Insuinfo v-if="showPsnInsuinfo" :params="checkTreatmentParams" @close="showPsnInsuinfo = false"
-            @row-click="checkTreatmentinfos"/>
+  <Insuinfo v-if="showPsnInsuinfo" :params="checkTreatmentParams" @close="showPsnInsuinfo = false" @row-click="checkTreatmentinfos"/>
   <Treatmentinfo v-if="showTreatmentinfos" :params="checkTreatmentParams" @close="showTreatmentinfos = false"/>
   <MedfeeAnalyse v-if="showFeeDetl" type="unsettled" :mdtrt-id="currentApply.mdtrtId" @close="showFeeDetl = false"/>
-  <IdentifyImage v-if="showIdCardImg" :pat-no="currentApply.patNo" :times="currentApply.times"
-                 @close="showIdCardImg = false"/>
-
-    <el-drawer
-        v-model="showHistories"
-        title="审核历史"
-        direction="ltr"
-        size="35%"
-    >
-      <el-timeline>
-        <el-timeline-item v-for="item in histories" :timestamp="item.handleDatetime" placement="top">
-          <el-card>
-            <h4>{{ item.handleComment || '无'}}</h4>
-            <p style="width: 100%; text-align: right">处理人：{{ item.handleStaffName || '未处理'}}</p>
-          </el-card>
-        </el-timeline-item>
-      </el-timeline>
-    </el-drawer>
+  <IdentifyImage v-if="showIdCardImg" :pat-no="currentApply.patNo" :times="currentApply.times" @close="showIdCardImg = false"/>
+  <el-drawer
+      v-model="showHistories"
+      title="审核历史"
+      direction="ltr"
+      size="35%"
+  >
+    <el-timeline>
+      <el-timeline-item v-for="item in histories" :timestamp="item.handleDatetime" placement="top">
+        <el-card>
+          <h4>{{ item.handleComment || '无' }}</h4>
+          <p style="width: 100%; text-align: right">处理人：{{ item.handleStaffName || '未处理' }}</p>
+        </el-card>
+      </el-timeline-item>
+    </el-timeline>
+  </el-drawer>
 </template>
 
 <script setup>
@@ -276,7 +274,6 @@ import {formatDate, getOneMonthOffset} from "@/utils/date";
 import {useMedinsStore} from "@/pinia/medins-store";
 
 const currentApply = ref({})
-const tableHeight = window.innerHeight - 20
 const showFeeDetl = ref(false)
 const inOutFlag = ref(1)
 const disdateRange = ref([])