vue2-client 1.18.7 → 1.18.9

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

@@ -15,6 +15,7 @@
       <!-- 当有 layout 配置时使用 a-descriptions -->
       <template v-if="config && config.layout && !wrapperClassObject['xhdesc-medical-history']">
         <a-descriptions
+          :colon="getGlobalColon()"
           :column="config.layout"
           :size="(config && config.style && config.style.size)"
           :bordered="(config && config.style && config.style.bordered)"
@@ -24,14 +25,14 @@
             <a-descriptions-item
               v-for="(item) in visibleItemsFiltered"
               :key="item.field"
-              :colon="item.colon !== false"
+              :colon="getItemColon(item)"
               :class="{ 'with-divider': item.isLine }">
               <template #label>
                 <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
                   <div v-if="item.showAvatar" class="gender-icon">
                     <img :src="maleIcon" alt="male" class="gender-img" />
                   </div>
-                  <span class="label-text">{{ item.label }}<template v-if="!wrapperClassObject['xhdesc-report-mode']">：</template></span>
+                  <span class="label-text">{{ item.label }}</span>
                 </div>
               </template>
               <a-tooltip
@@ -45,7 +46,6 @@
                   :data-full-text="data[item.field]"
                 >
                   <template v-if="wrapperClassObject['xhdesc-report-mode']">
-
                     <div class="report-value">
                       {{ data[item.field] }}
                     </div>
@@ -64,7 +64,6 @@
                 :data-full-text="data[item.field]"
               >
                 <template v-if="wrapperClassObject['xhdesc-report-mode']">
-
                   <div class="report-value">
                     {{ data[item.field] }}
                   </div>
@@ -83,13 +82,14 @@
               <a-descriptions-item
                 v-for="item in hiddenItemsFiltered"
                 :key="item.field"
-                :colon="item.colon !== false">
+                :colon="getItemColon(item)"
+                :class="{ 'with-divider': item.isLine }">
                 <template #label>
                   <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
                     <div v-if="item.showAvatar" class="gender-icon">
                       <img :src="maleIcon" alt="male" class="gender-img" />
                     </div>
-                    <span class="label-text">{{ item.label }}<template v-if="!wrapperClassObject['xhdesc-report-mode']">：</template></span>
+                    <span class="label-text">{{ item.label }}</span>
                   </div>
                 </template>
                 <div
@@ -98,7 +98,6 @@
                   :data-full-text="data[item.field]"
                 >
                   <template v-if="wrapperClassObject['xhdesc-report-mode']">
-
                     <div class="report-value">
                       {{ data[item.field] }}
                     </div>
@@ -191,7 +190,7 @@
                 <div v-if="item.showAvatar" class="gender-icon">
                   <img :src="maleIcon" alt="male" class="gender-img" />
                 </div>
-                <span class="label-text">{{ item.label }}<template v-if="!wrapperClassObject['xhdesc-report-mode']">：</template></span>
+                <span class="label-text">{{ item.label }}</span>
               </div>
               <a-tooltip
                 v-if="isContentOverflow(data[item.field])"
@@ -204,7 +203,6 @@
                   :data-full-text="data[item.field]"
                 >
                   <template v-if="wrapperClassObject['xhdesc-report-mode']">
-
                     <div class="report-value">
                       {{ data[item.field] }}
                     </div>
@@ -223,7 +221,6 @@
                 :data-full-text="data[item.field]"
               >
                 <template v-if="wrapperClassObject['xhdesc-report-mode']">
-
                   <div class="report-value">
                     {{ data[item.field] }}
                   </div>
@@ -248,7 +245,7 @@
                   <div v-if="item.showAvatar" class="gender-icon">
                     <img :src="maleIcon" alt="male" class="gender-img" />
                   </div>
-                  <span class="label-text">{{ item.label }}<template v-if="!wrapperClassObject['xhdesc-report-mode']">：</template></span>
+                  <span class="label-text">{{ item.label }}</span>
                 </div>
                 <div
                   class="content-wrapper"
@@ -256,7 +253,6 @@
                   :data-full-text="data[item.field]"
                 >
                   <template v-if="wrapperClassObject['xhdesc-report-mode']">
-
                     <div class="report-value">
                       {{ data[item.field] }}
                     </div>
@@ -310,7 +306,7 @@
               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="label-wrapper"><span class="label-text">{{ item.label }}</span></div>
               <div
                 class="content-wrapper"
                 :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
@@ -326,7 +322,7 @@
             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="label-wrapper"><span class="label-text">{{ item.label }}</span></div>
             <div
               class="content-wrapper"
               :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
@@ -343,7 +339,7 @@
             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="label-wrapper"><span class="label-text">{{ item.label }}</span></div>
             <div
               class="content-wrapper"
               :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
@@ -364,11 +360,10 @@ export default {
   name: 'XHDescriptions',
   data () {
     return {
-      // 隐藏配置 当数据结果 = -1^ 该数据字段会被delete
       hiddenConfig: '-1^',
       data: null,
       config: null,
-      showAllItems: false, // 控制是否显示所有标签
+      showAllItems: false,
       maleIcon: require('@vue2-client/assets/svg/male.svg')
     }
   },
@@ -385,7 +380,6 @@ export default {
     }
   },
   computed: {
-    // 动态样式开关（与 HForm 思路一致）：布尔开关 + size 派生类
     wrapperClassObject () {
       const attrs = this.$attrs || {}
       const classes = {}
@@ -408,15 +402,12 @@ export default {
       })
       const size = attrs.size
       if (size && typeof size === 'string') classes[`xhdesc-size-${size}`] = true
-      // 展开态样式开关（用于 patient-style 动态高度）
       if (this.showAllItems && this.config && this.config.detailsConfig) classes['xhdesc-open'] = true
       return classes
     },
-    // 获取详情按钮应该显示在第几个标签后
     detailsAfterIndex () {
       return (this.config && this.config.detailsConfig && this.config.detailsConfig.showAfterIndex) || 999
     },
-    // 判断是否有更多标签需要显示
     hasMoreItems () {
       if (!(this.config && this.config.detailsConfig)) return false
       if (!this.data || !(this.config && this.config.items) || !Array.isArray(this.config.items)) return false
@@ -430,20 +421,17 @@ export default {
       }
       return false
     },
-    // 获取应该显示的标签
     visibleItems () {
       if (!(this.config && this.config.items)) return []
       if (!(this.config && this.config.detailsConfig)) return this.config.items
       if (this.showAllItems) return this.config.items.slice(0, this.detailsAfterIndex)
       return this.config.items.slice(0, this.detailsAfterIndex)
     },
-    // 获取隐藏的标签（保持原有逻辑）
     hiddenItems () {
       if (!(this.config && this.config.items)) return []
       if (!(this.config && this.config.detailsConfig)) return []
       return this.config.items.slice(this.detailsAfterIndex)
     },
-    // 过滤后可直接渲染的可见项
     visibleItemsFiltered () {
       const list = this.visibleItems || []
       if (!this.data) return []
@@ -452,7 +440,6 @@ export default {
       const hiddenFields = new Set((this.hiddenItems || []).map(i => i.field))
       return res.filter(item => !hiddenFields.has(item.field))
     },
-    // 过滤后可直接渲染的隐藏项（仅展开时使用）
     hiddenItemsFiltered () {
       const list = this.hiddenItems || []
       if (!this.data) return []
@@ -485,10 +472,24 @@ export default {
     toggleDetails () {
       this.showAllItems = !this.showAllItems
     },
-    // 判断内容是否超过三行
     isContentOverflow (content) {
       if (!content || typeof content !== 'string') return false
       return content.length > 150
+    },
+    // 获取全局 colon 配置
+    getGlobalColon () {
+      if (this.config && this.config.style && this.config.style.colon !== undefined) {
+        return this.config.style.colon
+      }
+      return true // 默认显示冒号
+    },
+    // 获取单个 item 的 colon 配置
+    getItemColon (item) {
+      // 优先级：item配置 > 全局配置 > 默认true
+      if (item && item.colon !== undefined) {
+        return item.colon
+      }
+      return this.getGlobalColon()
     }
   },
   watch: {
@@ -502,10 +503,9 @@ export default {
     parameter: {
       handler (newValue, oldValue) {
         console.log('监听事件触发:', { old: oldValue, new: newValue })
-        // 当 parameter 变化时重新获取数据
         this.getData(this.queryParamsName, {})
       },
-      deep: true // 深度监听对象内部变化
+      deep: true
     }
   }
 }
@@ -558,8 +558,8 @@ export default {
 
 .label-text {
   white-space: nowrap;
-  color: #313131; // 统一深灰
-  text-decoration: none !important; // 移除下划线
+  color: #313131;
+  text-decoration: none !important;
 }
 
 .content-wrapper {
@@ -568,14 +568,14 @@ export default {
   margin-left: 4px;
   font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"');
   color: rgba(0, 0, 0, 0.85);
-  text-decoration: none !important; // 移除可能的下划线
+  text-decoration: none !important;
   max-width: 300px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* 强制移除任何链接样式（如接口返回含 <a>） */
+/* 强制移除任何链接样式 */
 ::v-deep a {
   color: #313131 !important;
   text-decoration: none !important;
@@ -597,13 +597,14 @@ export default {
 }
 
 .xhdesc-divider {
-  width: calc(100% + 24px); /* 扩展到左右内边距之外 */
+  width: calc(100% + 24px);
   height: 0;
   border-bottom: 1px solid #E5E9F0;
-  margin: 10px -12px 14px; /* 抵消左右 12px 内边距 */
+  margin: 10px -12px 14px;
   overflow: hidden;
 }
-/* medical-history 模式：左 padding 11px，右 12px（由外层设置），做精确抵消 */
+
+/* medical-history 模式：左 padding 11px，右 12px */
 .patient-info-descriptions.xhdesc-medical-history .xhdesc-divider {
   width: calc(100% + 23px);
   margin-left: -11px;
@@ -617,8 +618,6 @@ export default {
   align-items: start; // 左上对齐
 }
 
-/* footer 区域的每项直接沿用通用 .description-item/.label-wrapper/.content-wrapper 样式 */
-
 .footer-right {
   margin-top: 8px;
   display: flex;
@@ -757,19 +756,16 @@ export default {
 .xhdesc-description {
   padding: 4px 4px 4px 4px;
 
-  /* 作用域内 *patient-info-descriptions */
   &.patient-info-descriptions,
   .patient-info-descriptions {
     border: 1px solid #E5E9F0;
     border-radius: 6px;
     padding: 6.5px 12px;
 
-    /* *ant-btn-link */
     ::v-deep .ant-btn-link {
       border: none;
     }
 
-    /* *ant-descriptions-item-content */
     ::v-deep .ant-descriptions-item-content {
       font-weight: bold;
     }
@@ -777,7 +773,6 @@ export default {
 }
 /* 病患信息样式开关：patient-style */
 .xhdesc-patient-style {
-  /* 移除固定高度，改用最小高度 */
   min-height: 41px;
   border-radius: 6px;
   opacity: 1;
@@ -786,8 +781,6 @@ export default {
   border: 0px solid #E5E9F0;
   padding-bottom: 0px !important;
   width: 100%;
-
-  /* 添加响应式保障 */
   overflow: hidden;
 
   &.patient-info-descriptions,
@@ -795,34 +788,27 @@ export default {
     border: 0px solid #E5E9F0;
     border-radius: 6px;
     background: #FFFFFF;
-    /* 移除固定高度 */
     min-height: 41px;
     display: flex;
     align-items: center;
-    /* 允许flex换行 */
     flex-wrap: wrap;
-    /* 添加内边距确保内容不贴边 */
     padding: 8px 12px;
 
-    /* 标签字体（label）：统一 16px，与值一致 */
     ::v-deep .label-wrapper .label-text {
       font-family: "Source Han Sans";
       font-size: 16px !important;
-      font-weight: 400 !important; /* 确保不加粗 */
+      font-weight: 400 !important;
       line-height: 23px !important;
       letter-spacing: 0em;
       font-feature-settings: "kern" on;
       color: #5D5C5C;
-      /* 确保标签不换行 */
       white-space: nowrap;
     }
 
-    /* 头像与标签的间距 9px */
     ::v-deep .label-wrapper.with-avatar {
       gap: 9px;
     }
 
-    /* 性别图标样式 */
     .gender-icon {
       margin-top: 2px;
     }
@@ -833,24 +819,20 @@ export default {
       display: inline-block;
     }
 
-    /* 详情箭头在文字右侧：颜色、间距、方向（不旋转） */
     ::v-deep .detail-button-wrapper .ant-btn .anticon {
       margin-left: 4px;
       color: #94979E;
       opacity: 1;
     }
 
-    /* 详情按钮文字字体规范 */
     ::v-deep .detail-button-wrapper .ant-btn,
     ::v-deep .detail-button-wrapper .ant-btn span {
       font-family: "Source Han Sans";
       font-size: 16px;
       color: #5D5C5C;
-      /* 按钮不换行 */
       white-space: nowrap;
     }
 
-    /* 值字体（content） */
     ::v-deep .ant-descriptions-item-content,
     ::v-deep .content-wrapper,
     .medical-history-text {
@@ -861,20 +843,16 @@ export default {
       letter-spacing: 0em;
       font-feature-settings: "kern" on;
       color: #5D5C5C;
-      /* 允许内容换行 */
       word-break: break-word;
     }
 
-    /* 描述项样式调整 */
     ::v-deep .ant-descriptions-item {
       padding-bottom: 4px;
-      /* 确保项在换行时对齐 */
       display: flex;
       align-items: center;
       min-height: 32px;
     }
 
-    /* 添加媒体查询应对更小屏幕 */
     @media (max-width: 768px) {
       padding: 6px 8px;
 
@@ -890,7 +868,7 @@ export default {
   }
 }
 
-/* 展开态：patient-style 自适应高度与顶部对齐，防止布局错乱 */
+/* 展开态：patient-style 自适应高度 */
 .xhdesc-patient-style.xhdesc-open,
 .xhdesc-open .patient-info-descriptions.xhdesc-patient-style,
 .xhdesc-open .xhdesc-patient-style .patient-info-descriptions {
@@ -909,7 +887,6 @@ export default {
   padding: 0px;
   &.patient-info-descriptions,
   .patient-info-descriptions {
-    /* *ant-descriptions-item-content */
     ::v-deep .descriptions-container {
       padding: 0px;
     }
@@ -953,15 +930,15 @@ export default {
 
 .medical-history-item.with-divider {
   position: relative;
-  padding-bottom: 4px; /* 分割线与上方间距 4px */
-  margin-bottom: 4px;  /* 分割线与下方间距 4px */
+  padding-bottom: 4px;
+  margin-bottom: 4px;
 }
 
 .medical-history-item.with-divider::after {
   content: '';
   position: absolute;
   left: 0;
-  bottom: 0; /* 贴合容器底部 */
+  bottom: 0;
   width: 100%;
   height: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
@@ -978,9 +955,7 @@ export default {
   text-indent: 0;
   padding-left: 0;
   margin-left: 0;
-  /* 使用float实现真正的文本环绕 */
   overflow: hidden;
-  /* 确保容器能够正确清除浮动 */
   position: relative;
 }
 
@@ -992,7 +967,6 @@ export default {
   white-space: nowrap;
   float: left;
   margin-right: 0px;
-  /* 确保标签不会影响文本流 */
   position: relative;
   z-index: 1;
 }
@@ -1011,7 +985,6 @@ export default {
   white-space: normal;
   text-align: left;
   line-height: 24px;
-  /* 确保文本能够正确环绕浮动元素 */
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -1035,21 +1008,18 @@ export default {
   -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行高 */
+    max-height: 72px;
     overflow: hidden;
     position: relative;
   }
@@ -1065,15 +1035,13 @@ export default {
   }
 }
 
-/* 医疗病史样式开关：通过 wrapperClassObject 添加类 xhdesc-medical-history */
+/* 医疗病史样式开关 */
 .patient-info-descriptions.xhdesc-medical-history {
   padding: 9px 12px 10px 11px !important;
-  /* 移除右侧空白（本模式不需要详情按钮预留空间） */
   .descriptions-container {
     padding-right: 0;
     padding-left: 0px;
   }
-  /* 医疗病史模式下：footer 区域使用与上方相同的医疗病史样式 */
   .medical-history-footer {
     width: 100%;
   }
@@ -1085,7 +1053,6 @@ export default {
     gap: 16px;
     width: 100%;
   }
-  /* 右侧（医生/医嘱日期）标签与值的字体要求 */
   .medical-history-footer .footer-right .label-wrapper .label-text {
     font-family: "Source Han Sans";
     font-size: 16px;
@@ -1126,6 +1093,7 @@ export default {
     text-align: right;
   }
 }
+
 /* 加边框 */
 .xhdesc-border1 {
   &.patient-info-descriptions,
@@ -1138,7 +1106,6 @@ export default {
 .xhdesc-report-mode {
   &.patient-info-descriptions,
   .patient-info-descriptions {
-    /* *ant-descriptions-item-content */
     ::v-deep .flex-descriptions{
       gap: 2px;
       .description-item {
@@ -1164,6 +1131,5 @@ export default {
       text-align: end;
     }
   }
-
 }
 </style>