2025-12-24 发版,具体内容见发版日志

openhis-ui-vue3/src/components/patientBar/inPatientBarDoctorFold.vue

@@ -1,188 +1,125 @@
-<!--
- * @Author: sjjh
- * @Date: 2025-04-07 20:42:45
- * @Description:住院患者信息，给医生用，带折叠
--->
 <template>
   <div class="inPatientBarDoctorFold-container">
     <div class="basic_info">
       <div class="patient-header white-bg">
         <div class="select_wrapper_div">
-          <b class="bedNumber" style="margin-left: 12px">{{ patientInfo?.bedName }}</b>
-          <label class="content-text-color" style="margin-left: 12px; color: #a15209">
-            {{ patientInfo?.patientName }}
-            <span class="sex-age"> {{ patientInfo?.sexName }}/{{ patientInfo?.age }} </span>
+          <b class="bedNumber">{{ patientInfo?.bedName || '未分床' }}</b>
+          <label class="patient-name">
+            {{ patientInfo?.patientName || '-' }}
+            <span class="sex-age">
+              {{ formatSexAge(patientInfo?.sexName, patientInfo?.age) }}
+            </span>
           </label>
-
-          <div style="display: flex; margin-left: 8px">
-            <!-- 状态展示// TODO 后端给状态，前段 -->
+          <div class="tag-list" v-if="patientInfo?.list && patientInfo.list.length > 0">
             <ball-tag
-              style="margin-right: 4px"
-              v-for="item in patientInfo?.list"
+              v-for="item in patientInfo.list"
               :key="item"
               :tagId="item"
+              class="tag-item"
             ></ball-tag>
           </div>
-          <div
-            class="gray-border"
-            v-show="patientInfo?.feeTypeName && patientInfo?.feeTypeName !== ''"
-          >
-            {{ patientInfo?.feeTypeName }}
+          <div class="gray-border" v-if="patientInfo?.feeTypeName">
+            {{ patientInfo.feeTypeName }}
           </div>
-          <label style="margin-left: 24px">
+          <label class="info-label">
             <span class="label-text-color">住院：</span>
-            <span class="content-text-color">{{ patientInfo?.inHospitalDays + '天' }}</span>
+            <span class="content-text-color">{{ formatDays(patientInfo?.inHospitalDays) }}</span>
           </label>
-          <label style="margin-left: 24px">
+          <label class="info-label" v-if="patientInfo?.inOrgTime">
             <span class="label-text-color">入科：</span>
-            <span class="content-text-color">{{ patientInfo?.inDeptDate }}</span>
+            <span class="content-text-color">{{ patientInfo.inOrgTime }}</span>
           </label>
-          <label style="margin-left: 24px">
+          <label class="info-label" v-if="patientInfo?.inHospitalTime">
             <span class="label-text-color">入院时间：</span>
-            <span class="content-text-color">{{ patientInfo?.inHospitalTime }}</span>
+            <span class="content-text-color">{{ patientInfo.inHospitalTime }}</span>
           </label>
-          <label style="margin-left: 24px">
-            <span class="label-text-color">住院号:{{ patientInfo?.busNo }}</span>
+          <label class="info-label" v-if="patientInfo?.busNo">
+            <span class="label-text-color">住院号：</span>
+            <span class="content-text-color">{{ patientInfo.busNo }}</span>
           </label>
-          <svg-icon icon-class="hipCopy" height="20px" width="20px" class="copy-svg" />
-          <label style="margin-left: 30px">
+          <label class="info-label diagnosis-label" v-if="patientInfo?.regDiagnosisName">
             <span class="label-text-color">诊断：</span>
-            <span class="content-text-color">{{ patientInfo?.regDiagnosisName }}</span>
+            <span class="content-text-color">{{ patientInfo.regDiagnosisName }}</span>
+          </label>
+          <label class="info-label">
+            <span class="label-text-color">费用：</span>
+            <span class="content-text-color">{{ formatMoney(patientInfo?.totalAmount) }}</span>
+          </label>
+          <label class="info-label">
+            <span class="label-text-color">余额：</span>
+            <span class="content-text-color">{{ formatMoney(patientInfo?.balanceAmount) }}</span>
           </label>
-          <!-- <div style="margin-left: auto">
-            <el-icon v-if="expand" @click="toggleExpand"><ArrowUpBold /></el-icon>
-            <el-icon v-else @click="toggleExpand"><ArrowDownBold /></el-icon>
-          </div> -->
         </div>
       </div>
     </div>
     <div v-if="expand" class="expand_more">
-      <div style="background-color: #ffffff">
-        <div style="margin-top: -10px">
-          <label style="font-size: 14px">
+      <div class="expand-content">
+        <div class="expand-section">
+          <label class="expand-label">
             <span class="primary-text">过敏：</span>
             <span class="primary-text">{{ patientInfo?.allergies || '无过敏史' }}</span>
           </label>
-          <label style="font-size: 14px; margin-left: 32px" v-show="patientInfo?.insuplcAdmdvsName">
-            <span class="primary-text">医保统筹区:</span>
-            <span class="primary-text">{{ patientInfo?.insuplcAdmdvsName }}</span>
+          <label class="expand-label" v-if="patientInfo?.insuplcAdmdvsName">
+            <span class="primary-text">医保统筹区：</span>
+            <span class="primary-text">{{ patientInfo.insuplcAdmdvsName }}</span>
           </label>
-
-          <label style="font-size: 14px; margin-left: 32px" v-show="patientInfo?.ciType">
+          <label class="expand-label" v-if="patientInfo?.ciType">
             <span class="primary-text">商保信息：</span>
-            <span class="primary-text">{{ patientInfo?.ciType }}</span>
+            <span class="primary-text">{{ patientInfo.ciType }}</span>
           </label>
-          <div style="display: flex; flex-wrap: nowrap; margin-top: 8px; white-space: nowrap">
-            <div
-              class="blue-bg"
-              style="background-color: #f1faff; flex-shrink: 0; min-width: fit-content"
-            >
+          <div class="info-tags">
+            <div class="blue-bg">
               <span class="content-text-color">
-                {{
-                  patientInfo?.height && patientInfo?.weight
-                    ? `${patientInfo?.height}cm/${patientInfo?.weight}kg`
-                    : '身高/体重'
-                }}
+                {{ formatHeightWeight(patientInfo?.height, patientInfo?.weight) }}
               </span>
             </div>
-            <div
-              class="blue-bg"
-              style="
-                margin-left: 24px;
-                background-color: #f1faff;
-                flex-shrink: 0;
-                min-width: fit-content;
-              "
-              v-show="patientInfo?.postoperativeDays"
-            >
-              <span class="content-text-color">术后{{ patientInfo?.postoperativeDays }}天</span>
+            <div class="blue-bg" v-if="patientInfo?.postoperativeDays">
+              <span class="content-text-color">术后{{ patientInfo.postoperativeDays }}天</span>
             </div>
-            <div
-              class="blue-bg"
-              style="
-                margin-left: 16px;
-                background-color: #f1faff;
-                flex-shrink: 0;
-                min-width: fit-content;
-              "
-              v-show="patientInfo?.poorTypeName"
-            >
-              <span class="label-text-color">贫困类型:</span>
-              <span class="content-text-color" style="margin-left: 4px">{{
-                patientInfo?.poorTypeName
-              }}</span>
+            <div class="blue-bg" v-if="patientInfo?.poorTypeName">
+              <span class="label-text-color">贫困类型：</span>
+              <span class="content-text-color">{{ patientInfo.poorTypeName }}</span>
             </div>
-
-            <div
-              class="blue-bg"
-              style="
-                margin-left: 16px;
-                background-color: #f1faff;
-                flex-shrink: 0;
-                min-width: fit-content;
-              "
-              v-show="patientInfo?.pathwayName"
-            >
-              <span class="label-text-color">路径情况:</span>
-              <span class="content-text-color" style="margin-left: 4px">{{
-                patientInfo?.pathwayName
-              }}</span>
+            <div class="blue-bg" v-if="patientInfo?.pathwayName">
+              <span class="label-text-color">路径情况：</span>
+              <span class="content-text-color">{{ patientInfo.pathwayName }}</span>
             </div>
           </div>
         </div>
       </div>
-      <div style="background-color: #ffffff">
-        <div style="margin-top: -10px">
+      <div class="expand-content">
+        <div class="expand-section">
           <div class="patient-board">
             <div class="item-center">
               <div class="line-block">
                 <div class="line-block-top">
                   <span class="label-text-color">科室：</span>
-                  <span class="content-text-color">{{ patientInfo?.admissionDeptName }}</span>
+                  <span class="content-text-color">{{
+                    patientInfo?.admissionDeptName || '-'
+                  }}</span>
                 </div>
                 <div class="line-block-bottom">
                   <span class="label-text-color">病区：</span>
-                  <span class="content-text-color">{{ patientInfo?.deptNurseName }}</span>
+                  <span class="content-text-color">{{ patientInfo?.deptNurseName || '-' }}</span>
                 </div>
               </div>
               <div class="line-block">
                 <div class="line-block-top">
                   <span class="label-text-color">主治医生：</span>
-                  <span class="content-text-color">{{ patientInfo?.masterDoctorName }}</span>
+                  <span class="content-text-color">{{ patientInfo?.masterDoctorName || '-' }}</span>
                 </div>
                 <div class="line-block-bottom">
                   <span class="label-text-color">责任护士：</span>
-                  <span class="content-text-color">{{ patientInfo?.masterNurseName }}</span>
-                </div>
-              </div>
-              <div class="line-blockMoney">
-                <div class="line-blockMoney-top">
-                  <span class="label-text-color">费用</span>
-                </div>
-                <div class="line-blockMoney-bottom">
-                  <b class="money-content size-15">{{
-                    patientInfo?.totalAmount ? patientInfo?.totalAmount : 0
-                  }}</b>
+                  <span class="content-text-color">{{ patientInfo?.masterNurseName || '-' }}</span>
                 </div>
               </div>
+
               <div class="line-blockMoney">
                 <div class="line-blockMoney-top">
                   <span class="label-text-color">预交金</span>
                 </div>
                 <div class="line-blockMoney-bottom">
-                  <b class="money-content size-15">{{
-                    patientInfo?.prepayAmount ? patientInfo?.prepayAmount : 0
-                  }}</b>
-                </div>
-              </div>
-              <div class="line-blockMoney">
-                <div class="line-blockMoney-top">
-                  <span class="label-text-color">余额</span>
-                </div>
-                <div class="line-blockMoney-bottom">
-                  <b class="money-content size-15">{{
-                    patientInfo?.balance ? patientInfo?.balance : 0
-                  }}</b>
+                  <b class="money-content size-15">{{ formatMoney(patientInfo?.prepayAmount) }}</b>
                 </div>
               </div>
             </div>
@@ -192,45 +129,57 @@
     </div>
   </div>
 </template>
-<script  setup>
-import { computed, onMounted, ref, watch } from 'vue';
+<script setup lang="ts">
+import { ref, watch } from 'vue';
 import BallTag from './components/BallTag.vue';
 import { patientInfo } from '@/views/inpatientDoctor/home/store/patient.js';
-// import { ElMessage } from 'element-plus'
-
-const expand = ref(false);
-
-const showDividers = ref(true);
-
-// 示例方法：切换显示状态
-const toggleDividers = () => {
-  showDividers.value = !showDividers.value;
-};
-const iconClass = ref('hipBarDown');
-
-// 切换展开状态的方法
-function toggleExpand() {
-  expand.value = !expand.value;
-  iconClass.value = expand.value ? 'hipBarUp' : 'hipBarDown';
-  toggleDividers();
+interface Props {
+  visitCode?: string;
 }
 
-const fetchPatientInfoById = async (patientId) => {
-  // 查询患者信息
-  console.log(patientId);
-};
-
-const props = defineProps({
+const props = withDefaults(defineProps<Props>(), {
   visitCode: '',
 });
-watch(
-  () => props.visitCode,
-  (val) => {
-    if (val !== null && val !== '') {
-      fetchPatientInfoById(val);
-    }
+
+const expand = ref<boolean>(false);
+
+// 格式化性别和年龄
+const formatSexAge = (sexName?: string, age?: number | string): string => {
+  const sex = sexName || '';
+  const ageStr = age !== undefined && age !== null ? String(age) : '';
+  if (sex && ageStr) {
+    return `${sex}/${ageStr}`;
+  } else if (sex) {
+    return sex;
+  } else if (ageStr) {
+    return ageStr;
   }
-);
+  return '-';
+};
+
+// 格式化天数
+const formatDays = (days?: number | string): string => {
+  if (days === undefined || days === null || days === '') {
+    return '-';
+  }
+  return `${days}天`;
+};
+
+// 格式化身高体重
+const formatHeightWeight = (height?: number | string, weight?: number | string): string => {
+  if (height && weight) {
+    return `${height}cm/${weight}kg`;
+  }
+  return '身高/体重';
+};
+
+// 格式化金额
+const formatMoney = (amount?: number | string): number => {
+  if (amount === undefined || amount === null || amount === '') {
+    return 0;
+  }
+  return Number(amount) || 0;
+};
 
 defineOptions({
   name: 'NurserDoctorPatientBarminimal',
@@ -240,27 +189,77 @@ defineOptions({
 <style lang="scss" scoped>
 .inPatientBarDoctorFold-container {
   border-bottom: 1px solid #ebeef5;
+  background-color: #ffffff;
+  align-items: center;
   .basic_info {
-    height: 43px;
+    min-height: 44px;
     padding: 0 8px;
+    display: flex;
+    align-items: center;
   }
-  /* expand_more */
+
   .expand_more {
     width: 100%;
-    height: 56px;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
     padding: 0 8px;
   }
+
+  .expand-content {
+    background-color: #ffffff;
+  }
+
+  .expand-section {
+    margin-top: -10px;
+    padding: 8px 0;
+  }
+
   .patient-header {
     width: 100%;
     padding: 6px 0;
     font-size: 13px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    .select_wrapper_div {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px;
+      width: 100%;
+    }
+
+    .bedNumber {
+      font-weight: bold;
+      font-size: 18px;
+      margin-left: 12px;
+      color: #1f2933;
+    }
+
+    .patient-name {
+      margin-left: 12px;
+      color: #a15209;
+      font-weight: 500;
+    }
 
     .sex-age {
-      margin-left: 20px;
+      margin-left: 8px;
       color: var(--hip-color-text-description);
       font-size: 14px;
+      font-weight: normal;
+    }
+
+    .tag-list {
+      display: flex;
+      align-items: center;
+      margin-left: 8px;
+      gap: 4px;
+    }
+
+    .tag-item {
+      margin-right: 4px;
     }
 
     .gray-border {
@@ -270,43 +269,66 @@ defineOptions({
       align-items: center;
       border: 1px solid var(--hip-color-text-description);
       border-radius: 20px;
-      padding: 0px 8px;
+      padding: 0 8px;
+      font-size: 12px;
+    }
+
+    .info-label {
+      margin-left: 24px;
+      white-space: nowrap;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+    }
+
+    .diagnosis-label {
+      margin-left: 30px;
     }
 
     .copy-svg {
       fill: var(--hip-color-primary);
       cursor: pointer;
       margin-left: 4px;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 0.8;
+      }
     }
   }
 
+  .expand-label {
+    font-size: 14px;
+    margin-right: 32px;
+    white-space: nowrap;
+
+    &:first-child {
+      margin-right: 32px;
+    }
+  }
+
+  .info-tags {
+    display: flex;
+    flex-wrap: nowrap;
+    margin-top: 8px;
+    white-space: nowrap;
+    gap: 16px;
+  }
+
   .size-15 {
     font-size: 15px;
   }
 
-  .bedNumber {
-    font-weight: bold;
-    font-size: 18px;
-  }
-
   .primary-text {
     color: var(--hip-color-primary);
   }
 
-  .flex-between {
-    display: flex;
-    justify-content: space-between;
-  }
-
   .item-center {
     display: flex;
     align-items: center;
   }
 
-  .flex-row {
-    display: flex;
-  }
-
   .patient-board {
     margin-left: 20px;
 
@@ -330,10 +352,8 @@ defineOptions({
         margin-bottom: 8px;
       }
 
-      .money-content {
-        color: #ff8616;
-        font-size: 20px;
-        font-weight: 500;
+      &-bottom {
+        margin-top: 4px;
       }
     }
 
@@ -354,7 +374,7 @@ defineOptions({
       }
 
       &-top {
-        margin-bottom: 0px;
+        margin-bottom: 0;
       }
 
       .money-content {
@@ -378,13 +398,24 @@ defineOptions({
     justify-content: center;
     align-items: center;
     background-color: #f1faff;
-    padding-left: 8px;
-    padding-right: 8px;
-    border-radius: 4px; /*圆角*/
+    padding: 4px 8px;
+    border-radius: 4px;
+    flex-shrink: 0;
+    min-width: fit-content;
+    white-space: nowrap;
+
+    .content-text-color {
+      margin-left: 0;
+    }
+
+    .label-text-color {
+      margin-right: 4px;
+    }
   }
 
   .label-text-color {
     font-size: 14px;
+    color: #666666;
   }
 
   .content-text-color {