vue2-client 1.16.62 → 1.16.64

package/src/base-client/components/his/XHDescriptions/XHDescriptions.vue

@@ -13,7 +13,7 @@
       </div>
 
       <!-- 当有 layout 配置时使用 a-descriptions -->
-      <template v-if="config && config.layout">
+      <template v-if="config && config.layout && !wrapperClassObject['xhdesc-medical-history']">
         <a-descriptions
           :column="config.layout"
           :size="(config && config.style && config.style.size)"
@@ -37,7 +37,24 @@
                   <span class="label-text">{{ item.label }}</span>
                 </div>
               </template>
-              <div class="content-wrapper">
+              <a-tooltip
+                v-if="isContentOverflow(data[item.field])"
+                :title="data[item.field]"
+                placement="topLeft"
+                :overlay-style="{ maxWidth: '400px' }"
+              >
+                <div
+                  class="content-wrapper ellipsis"
+                  :data-full-text="data[item.field]"
+                >
+                  {{ data[item.field] }}
+                </div>
+              </a-tooltip>
+              <div
+                v-else
+                class="content-wrapper"
+                :data-full-text="data[item.field]"
+              >
                 {{ data[item.field] }}
               </div>
             </a-descriptions-item>
@@ -59,7 +76,11 @@
                     <span class="label-text">{{ item.label }}</span>
                   </div>
                 </template>
-                <div class="content-wrapper">
+                <div
+                  class="content-wrapper"
+                  :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
+                  :data-full-text="data[item.field]"
+                >
                   {{ data[item.field] }}
                 </div>
               </a-descriptions-item>
@@ -68,6 +89,67 @@
         </a-descriptions>
       </template>
 
+      <!-- 医疗病史模式：使用自定义HTML结构实现文本环绕 -->
+      <template v-else-if="config && config.layout && wrapperClassObject['xhdesc-medical-history']">
+        <div class="medical-history-descriptions">
+          <template v-if="data">
+            <!-- 显示前N个标签 -->
+            <div
+              v-for="(item) in visibleItemsFiltered"
+              :key="item.field"
+              :class="['medical-history-item', { 'with-divider': item.isLine }]"
+            >
+              <div class="medical-history-content">
+                <a-tooltip
+                  v-if="isContentOverflow(data[item.field])"
+                  :title="data[item.field]"
+                  placement="topLeft"
+                  :overlay-style="{ maxWidth: '400px' }"
+                >
+                  <div class="medical-history-text ellipsis">
+                    <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
+                  </div>
+                </a-tooltip>
+                <div
+                  v-else
+                  class="medical-history-text"
+                >
+                  <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 展开后显示剩余标签 -->
+            <template v-if="showAllItems">
+              <div
+                v-for="item in hiddenItemsFiltered"
+                :key="item.field"
+                class="medical-history-item"
+              >
+                <div class="medical-history-content">
+                  <a-tooltip
+                    v-if="isContentOverflow(data[item.field])"
+                    :title="data[item.field]"
+                    placement="topLeft"
+                    :overlay-style="{ maxWidth: '400px' }"
+                  >
+                    <div class="medical-history-text ellipsis">
+                      <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
+                    </div>
+                  </a-tooltip>
+                  <div
+                    v-else
+                    class="medical-history-text"
+                  >
+                    <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </template>
+        </div>
+      </template>
+
       <!-- 当没有 layout 配置时使用自适应布局 -->
       <template v-else>
         <div class="flex-descriptions">
@@ -87,7 +169,24 @@
                 />
                 <span class="label-text">{{ item.label }}：</span>
               </div>
-              <div class="content-wrapper">
+              <a-tooltip
+                v-if="isContentOverflow(data[item.field])"
+                :title="data[item.field]"
+                placement="topLeft"
+                :overlay-style="{ maxWidth: '400px' }"
+              >
+                <div
+                  class="content-wrapper ellipsis"
+                  :data-full-text="data[item.field]"
+                >
+                  {{ data[item.field] }}
+                </div>
+              </a-tooltip>
+              <div
+                v-else
+                class="content-wrapper"
+                :data-full-text="data[item.field]"
+              >
                 {{ data[item.field] }}
               </div>
             </div>
@@ -108,7 +207,11 @@
                   />
                   <span class="label-text">{{ item.label }}：</span>
                 </div>
-                <div class="content-wrapper">
+                <div
+                  class="content-wrapper"
+                  :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
+                  :data-full-text="data[item.field]"
+                >
                   {{ data[item.field] }}
                 </div>
               </div>
@@ -120,25 +223,79 @@
       <!-- 可选：底部区域（分割线 + 三列内容） -->
       <div v-if="config && config.footer && Array.isArray(config.footer.items) && data" class="xhdesc-footer">
         <div class="xhdesc-divider" />
-        <div class="footer-grid">
+        <!-- 医疗病史模式下的footer结构 -->
+        <div v-if="wrapperClassObject['xhdesc-medical-history']" class="medical-history-footer">
+          <div
+            v-for="(item, idx) in config.footer.items"
+            :key="item.field || idx"
+            class="medical-history-item">
+            <div class="medical-history-content">
+              <a-tooltip
+                v-if="isContentOverflow(data[item.field])"
+                :title="data[item.field]"
+                placement="topLeft"
+                :overlay-style="{ maxWidth: '400px' }"
+              >
+                <div class="medical-history-text ellipsis">
+                  <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
+                </div>
+              </a-tooltip>
+              <div
+                v-else
+                class="medical-history-text"
+              >
+                <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
+              </div>
+            </div>
+          </div>
+          <!-- 右侧信息：换到下一行并靠右对齐（如 医生 / 医嘱日期） -->
+          <div
+            v-if="Array.isArray(config.footer.rightItems) && config.footer.rightItems.length"
+            class="footer-right">
+            <div
+              v-for="(item, ridx) in config.footer.rightItems"
+              :key="item.field || ridx"
+              class="footer-right-item">
+              <div class="label-wrapper"><span class="label-text">{{ item.label }}：</span></div>
+              <div
+                class="content-wrapper"
+                :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
+                :data-full-text="data[item.field]"
+              >{{ data[item.field] }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 非医疗病史模式下的footer结构 -->
+        <div v-else class="footer-grid">
           <div
             v-for="(item, idx) in config.footer.items"
             :key="item.field || idx"
             class="description-item">
             <div class="label-wrapper"><span class="label-text">{{ item.label }}：</span></div>
-            <div class="content-wrapper">{{ data[item.field] }}</div>
+            <div
+              class="content-wrapper"
+              :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
+              :data-full-text="data[item.field]"
+            >{{ data[item.field] }}
+            </div>
           </div>
         </div>
         <!-- 右侧信息：换到下一行并靠右对齐（如 医生 / 医嘱日期） -->
         <div
-          v-if="Array.isArray(config.footer.rightItems) && config.footer.rightItems.length"
+          v-if="!wrapperClassObject['xhdesc-medical-history'] && Array.isArray(config.footer.rightItems) && config.footer.rightItems.length"
           class="footer-right">
           <div
             v-for="(item, ridx) in config.footer.rightItems"
             :key="item.field || ridx"
             class="footer-right-item">
             <div class="label-wrapper"><span class="label-text">{{ item.label }}：</span></div>
-            <div class="content-wrapper">{{ data[item.field] }}</div>
+            <div
+              class="content-wrapper"
+              :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
+              :data-full-text="data[item.field]"
+            >{{ data[item.field] }}
+            </div>
           </div>
         </div>
       </div>
@@ -265,6 +422,11 @@ export default {
     },
     toggleDetails () {
       this.showAllItems = !this.showAllItems
+    },
+    // 判断内容是否超过三行
+    isContentOverflow (content) {
+      if (!content || typeof content !== 'string') return false
+      return content.length > 150
     }
   },
   watch: {
@@ -333,10 +495,6 @@ export default {
   white-space: nowrap;
 }
 
-.label-wrapper.with-avatar {
-  gap: 8px;
-}
-
 .label-text {
   white-space: nowrap;
   color: #313131; // 统一深灰
@@ -357,8 +515,7 @@ export default {
 }
 
 /* 强制移除任何链接样式（如接口返回含 <a>） */
-::v-deep a,
-::deep a {
+::v-deep a {
   color: #313131 !important;
   text-decoration: none !important;
 }
@@ -379,10 +536,17 @@ export default {
 }
 
 .xhdesc-divider {
-  width: 100%;
+  width: calc(100% + 24px); /* 扩展到左右内边距之外 */
   height: 0;
-  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
-  margin: 8px 0 12px;
+  border-bottom: 1px solid #E5E9F0;
+  margin: 10px -12px 14px; /* 抵消左右 12px 内边距 */
+  overflow: hidden;
+}
+/* medical-history 模式：左 padding 11px，右 12px（由外层设置），做精确抵消 */
+.patient-info-descriptions.xhdesc-medical-history .xhdesc-divider {
+  width: calc(100% + 23px);
+  margin-left: -11px;
+  margin-right: -12px;
 }
 
 .footer-grid {
@@ -408,13 +572,13 @@ export default {
 }
 
 /* Ant Design 描述列表样式覆盖 */
-:deep(.ant-descriptions-row) {
+::v-deep(.ant-descriptions-row) {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
 }
 
-:deep(.ant-descriptions-item) {
+::v-deep(.ant-descriptions-item) {
   padding: 0 !important;
   display: flex !important;
   align-items: flex-start !important;
@@ -424,7 +588,7 @@ export default {
   margin-bottom: 16px;
 }
 
-:deep(.ant-descriptions-item-container) {
+::v-deep(.ant-descriptions-item-container) {
   display: flex !important;
   flex-direction: row !important;
   align-items: flex-start !important;
@@ -433,7 +597,7 @@ export default {
   width: 100% !important;
 }
 
-:deep(.ant-descriptions-item-label) {
+::v-deep(.ant-descriptions-item-label) {
   color: rgba(0, 0, 0, 0.65);
   padding: 0 !important;
   margin: 0 !important;
@@ -446,7 +610,7 @@ export default {
   padding-right: 2px !important;
 }
 
-:deep(.ant-descriptions-item-content) {
+::v-deep(.ant-descriptions-item-content) {
   font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"');
   display: inline-flex !important;
   align-items: center !important;
@@ -455,7 +619,7 @@ export default {
   margin-left: 0px !important;
 }
 
-:deep(.ant-descriptions-item-colon) {
+::v-deep(.ant-descriptions-item-colon) {
   position: static !important;
   display: inline-flex !important;
   align-items: center !important;
@@ -464,18 +628,18 @@ export default {
   margin-right: 2px !important;
 }
 
-:deep(.ant-descriptions-item-container:hover) {
+::v-deep(.ant-descriptions-item-container:hover) {
   background-color: rgba(0, 0, 0, 0.02);
   border-radius: 4px;
 }
 
-:deep(.ant-btn-link) {
+::v-deep(.ant-btn-link) {
   padding: 0;
   height: auto;
   line-height: 1;
 }
 
-:deep(.ant-btn-link:hover) {
+::v-deep(.ant-btn-link:hover) {
   color: #1890ff;
   background: transparent;
 }
@@ -513,12 +677,12 @@ export default {
 }
 
 /* 对于 Ant Design 描述列表的特殊处理 */
-:deep(.ant-descriptions-item.with-divider) {
+::v-deep(.ant-descriptions-item.with-divider) {
   position: relative;
   margin-bottom: 16px !important;
 }
 
-:deep(.ant-descriptions-item.with-divider::after) {
+::v-deep(.ant-descriptions-item.with-divider::after) {
   content: '';
   position: absolute;
   left: 0;
@@ -540,12 +704,12 @@ export default {
     padding: 6.5px 12px;
 
     /* *ant-btn-link */
-    :deep(.ant-btn-link) {
+    ::v-deep .ant-btn-link {
       border: none;
     }
 
     /* *ant-descriptions-item-content */
-    :deep(.ant-descriptions-item-content) {
+    ::v-deep .ant-descriptions-item-content {
       font-weight: bold;
     }
   }
@@ -554,179 +718,202 @@ export default {
 .xhdesc-margin-top-12 {
   margin-top: -12px;
 }
-.xhdesc-no-padding {
-  padding: 0px;
-}
 .xhdesc-no-padding {
   padding: 0px;
   &.patient-info-descriptions,
   .patient-info-descriptions {
     /* *ant-descriptions-item-content */
-    :deep(.descriptions-container) {
+    ::v-deep .descriptions-container {
       padding: 0px;
     }
-    :deep(.content-wrapper) {
+    ::v-deep .content-wrapper {
       margin: 0px;
     }
   }
 }
+/* 医疗病史模式：自定义HTML结构样式 */
+.medical-history-descriptions {
+  width: 100%;
+}
+
+.medical-history-item {
+  margin: 0;
+  width: 100%;
+}
+
+.medical-history-item.with-divider {
+  position: relative;
+  padding-bottom: 4px; /* 分割线与上方间距 4px */
+  margin-bottom: 4px;  /* 分割线与下方间距 4px */
+}
+
+.medical-history-item.with-divider::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0; /* 贴合容器底部 */
+  width: 100%;
+  height: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.medical-history-content {
+  font-family: "Source Han Sans";
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0em;
+  text-align: left;
+  word-break: break-word;
+  white-space: normal;
+  text-indent: 0;
+  padding-left: 0;
+  margin-left: 0;
+  /* 使用float实现真正的文本环绕 */
+  overflow: hidden;
+  /* 确保容器能够正确清除浮动 */
+  position: relative;
+}
+
+.medical-history-label {
+  font-family: "Source Han Sans";
+  font-size: 16px;
+  font-weight: 700;
+  color: #313131;
+  white-space: nowrap;
+  float: left;
+  margin-right: 0px;
+  /* 确保标签不会影响文本流 */
+  position: relative;
+  z-index: 1;
+}
+
+.medical-history-text {
+  font-family: "Source Han Sans";
+  font-size: 16px;
+  font-weight: 400;
+  color: #313131;
+  display: block;
+  overflow: hidden;
+  text-indent: 0;
+  padding-left: 0;
+  margin-left: 0;
+  word-break: break-word;
+  white-space: normal;
+  text-align: left;
+  line-height: 24px;
+  /* 确保文本能够正确环绕浮动元素 */
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.medical-history-text.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+  word-break: break-word;
+  white-space: normal;
+  line-height: 24px;
+  text-indent: 0;
+  padding-left: 0;
+  margin-left: 0;
+  text-align: left;
+  -webkit-box-pack: start;
+  -webkit-box-align: start;
+}
+
+/* 使用-webkit-line-clamp时不需要手动添加省略号 */
+.medical-history-text.ellipsis::after {
+  display: none;
+}
+
+/* 针对多行文本的特殊处理：确保换行文本与首行对齐 */
+.medical-history-text.ellipsis::first-line {
+  text-indent: 0;
+}
+
+/* 为不支持-webkit-line-clamp的浏览器提供后备方案 */
+@supports not (-webkit-line-clamp: 3) {
+  .medical-history-text.ellipsis {
+    display: block;
+    max-height: 72px; /* 3行 * 24px行高 */
+    overflow: hidden;
+    position: relative;
+  }
+
+  .medical-history-text.ellipsis::after {
+    content: '...';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    padding-left: 4px;
+    display: block;
+  }
+}
+
 /* 医疗病史样式开关：通过 wrapperClassObject 添加类 xhdesc-medical-history */
 .patient-info-descriptions.xhdesc-medical-history {
+  padding: 9px 12px 10px 11px !important;
   /* 移除右侧空白（本模式不需要详情按钮预留空间） */
   .descriptions-container {
     padding-right: 0;
-    padding-left: 12px;
+    padding-left: 0px;
   }
-
-  /* 保持原有的自适应布局样式 */
-  .flex-descriptions {
-    gap: 4px 16px;
-  }
-
-  .description-item {
-    padding: 2px 4px;
+  /* 医疗病史模式下：footer 区域使用与上方相同的医疗病史样式 */
+  .medical-history-footer {
     width: 100%;
-    align-items: flex-start;
+  }
+  .medical-history-footer .footer-right {
+    margin-top: 8px;
     display: flex;
-    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+    gap: 16px;
+    width: 100%;
   }
-
-  /* 只修改布局，保持原有字体样式 */
-  .label-wrapper {
+  /* 右侧（医生/医嘱日期）标签与值的字体要求 */
+  .medical-history-footer .footer-right .label-wrapper .label-text {
     font-family: "Source Han Sans";
-    font-size: 18px;
-    font-weight: 600;
-    line-height: 24px;
-    text-align: justify;
-    letter-spacing: 0em;
-    white-space: nowrap;
-    margin-right: 8px;
-    margin-bottom: 0;
-    display: inline;
+    font-size: 16px;
+    font-weight: 700;
+    color: #313131;
+    line-height: 22px;
   }
-
-  .content-wrapper {
+  .medical-history-footer .footer-right .content-wrapper {
     font-family: "Source Han Sans";
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 400;
-    line-height: 24px;
-    letter-spacing: 0em;
-    margin-left: 0;
-    max-width: none;
-    overflow: visible;
-    text-overflow: initial;
-    white-space: normal;
-    word-break: break-word;
-    display: inline;
-  }
-
-  /* 修复Ant Design描述列表的布局，保持字体样式 */
-  :deep(.ant-descriptions-item) {
-    display: block !important;
-    white-space: nowrap;
-    width: 100% !important;
-    margin-bottom: 8px;
-    margin-right: 0;
-  }
-
-  :deep(.ant-descriptions-item-container) {
-    display: inline !important;
-    white-space: nowrap;
-    width: auto !important;
-    align-items: start !important;
-  }
-
-  :deep(.ant-descriptions-item-label) {
-    display: inline !important;
-    white-space: nowrap !important;
-    min-width: auto !important;
-    padding-right: 1px !important;
-    /* 保持原有字体样式 */
-    font-family: "Source Han Sans" !important;
-    font-size: 18px !important;
-    font-weight: 600 !important;
-    line-height: 24px !important;
-    text-align: justify !important;
-    letter-spacing: 0em !important;
-  }
-
-  :deep(.ant-descriptions-item-content) {
-    display: inline !important;
-    white-space: normal !important;
-    word-break: break-word !important;
-    margin-left: 0 !important;
-    overflow: visible !important;
-    /* 保持原有字体样式 */
-    font-family: "Source Han Sans" !important;
-    font-size: 18px !important;
-    font-weight: 400 !important;
-    line-height: 24px !important;
-    letter-spacing: 0em !important;
-  }
-
-  :deep(.ant-descriptions-item-colon) {
-    margin-right: 2px !important;
-    display: inline !important;
-  }
-
-  /* 确保内部元素正确对齐 */
-  :deep(.ant-descriptions-item-label .label-wrapper) {
-    display: inline !important;
-    white-space: nowrap !important;
-    width: auto !important;
-    gap: 0 !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    line-height: 24px !important;
+    line-height: 22px;
+    color: #313131;
   }
 
-  :deep(.ant-descriptions-row) {
-    display: block !important;
-    white-space: nowrap;
-    width: 100%;
+  .medical-history-footer .footer-right .medical-history-item {
+    display: inline-block;
+    text-align: right;
   }
 
-  /* 移除所有可能冲突的布局属性 */
-  :deep(.ant-descriptions-item),
-  :deep(.ant-descriptions-item-container) {
-    float: none !important;
-    flex: none !important;
-    flex-direction: row !important;
-    align-items: flex-start !important;
+  .medical-history-footer .footer-right .medical-history-content {
+    text-align: right;
   }
 
-  /* 确保表格布局正确 */
-  :deep(.ant-descriptions-view) {
-    white-space: nowrap;
-    table-layout: auto !important;
+  .medical-history-footer .footer-right .medical-history-label {
+    float: none;
+    display: inline;
+    margin-right: 0px;
   }
 
-  :deep(.ant-descriptions-table) {
-    table-layout: auto !important;
+  .medical-history-footer .footer-right .medical-history-text {
+    display: inline;
+    text-align: right;
   }
 
-  /* 医疗病史模式下：footer 区域恢复与上方描述项一致的横向样式 */
-  .xhdesc-footer {
-    .description-item {
-      display: inline-flex;
-      flex-direction: row;
-      align-items: center;
-      width: 100%;
-    }
-    .label-wrapper {
-      display: inline-flex;
-      margin-right: 4px;
-      margin-bottom: 0;
-      font-weight: 600; // 与上方保持一致
-    }
-    .content-wrapper {
-      display: inline-flex;
-      margin-left: 0;
-      max-width: 300px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+  .medical-history-footer .footer-right .medical-history-text.ellipsis {
+    display: inline;
+    text-align: right;
   }
 }
 </style>