vue2-client 1.18.68 → 1.19.0

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

@@ -12,8 +12,82 @@
         </a-button>
       </div>
 
-      <!-- 当 layout 为数字时使用 a-descriptions -->
-      <template v-if="config && config.layout && typeof config.layout === 'number' && !wrapperClassObject['xhdesc-medical-history']">
+      <!-- 当layout是对象格式且为5列时，使用自定义grid布局 -->
+      <template v-if="config && config.layout && typeof config.layout === 'object' && !Array.isArray(config.layout) && Object.values(config.layout).every(val => val === 5) && !wrapperClassObject['xhdesc-medical-history']">
+        <div class="grid-descriptions">
+          <template v-if="data">
+            <div
+              v-for="(row, rowIndex) in gridRows"
+              :key="'row-' + rowIndex"
+              class="grid-row"
+              :style="{ gridTemplateColumns: getGridTemplateColumns(getGridColumns()) }"
+            >
+              <div
+                v-for="(item, itemIndex) in row"
+                :key="'item-' + rowIndex + '-' + itemIndex"
+                class="grid-item"
+              >
+                <!-- 占位符项目 -->
+                <template v-if="!item.field || item.field === ''">
+                  <div class="placeholder-content"></div>
+                </template>
+                <!-- 正常项目 -->
+                <template v-else-if="data[item.field] !== null && data[item.field] !== undefined">
+                  <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 }}<span v-if="getItemColon(item)" class="colon">:</span></span>
+                  </div>
+                  <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]"
+                    >
+                      <template v-if="wrapperClassObject['xhdesc-report-mode']">
+                        <div class="report-value">
+                          {{ data[item.field] }}
+                        </div>
+                        <div class="report-unit">
+                          {{ item.unit }}
+                        </div>
+                      </template>
+                      <template v-else>
+                        {{ data[item.field] }}
+                      </template>
+                    </div>
+                  </a-tooltip>
+                  <div
+                    v-else
+                    class="content-wrapper"
+                    :data-full-text="data[item.field]"
+                  >
+                    <template v-if="wrapperClassObject['xhdesc-report-mode']">
+                      <div class="report-value">
+                        {{ data[item.field] }}
+                      </div>
+                      <div class="report-unit">
+                        {{ item.unit }}
+                      </div>
+                    </template>
+                    <template v-else>
+                      {{ data[item.field] }}
+                    </template>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </template>
+        </div>
+      </template>
+
+      <!-- 当有 layout 配置时使用 a-descriptions -->
+      <template v-else-if="config && config.layout && !wrapperClassObject['xhdesc-medical-history']">
         <a-descriptions
           :colon="getGlobalColon()"
           :column="config.layout"
@@ -32,7 +106,7 @@
                   <div v-if="item.showAvatar" class="gender-icon">
                     <img :src="maleIcon" alt="male" class="gender-img" />
                   </div>
-                  <span class="label-text">{{ item.label }}</span>
+                  <span class="label-text">{{ item.label }}<span v-if="getItemColon(item)" class="colon">:</span></span>
                 </div>
               </template>
               <a-tooltip
@@ -77,121 +151,58 @@
               </div>
             </a-descriptions-item>
 
-            <!-- 展开后显示剩余标签 -->
-            <template v-if="showAllItems">
-              <a-descriptions-item
-                v-for="item in hiddenItemsFiltered"
-                :key="item.field"
-                :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 }}</span>
-                  </div>
-                </template>
-                <div
-                  class="content-wrapper"
-                  :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
-                  :data-full-text="data[item.field]"
-                >
-                  <template v-if="wrapperClassObject['xhdesc-report-mode']">
-                    <div class="report-value">
-                      {{ data[item.field] }}
-                    </div>
-                    <div class="report-unit">
-                      {{ item.unit }}
-                    </div>
-                  </template>
-                  <template v-else>
-                    {{ data[item.field] }}
-                  </template>
-                </div>
-              </a-descriptions-item>
-            </template>
+            <!-- 占位符项目 -->
+            <div
+              v-for="(item, index) in visibleItems"
+              v-if="!item.field || item.field === ''"
+              :key="'placeholder-' + index"
+              class="placeholder-item"
+            ></div>
           </template>
-        </a-descriptions>
-      </template>
 
-      <!-- 当 layout 为数组时使用自定义 Grid 布局 -->
-      <template v-else-if="config && config.layout && Array.isArray(config.layout) && !wrapperClassObject['xhdesc-medical-history']">
-        <div class="grid-descriptions">
-          <template v-if="data">
-            <!-- 按行分组显示项目 -->
-            <div
-              v-for="(rowItems, rowIndex) in gridRows"
-              :key="rowIndex"
-              class="grid-row"
-              :style="{ gridTemplateColumns: getGridTemplateColumns(config.layout[rowIndex]) }"
-            >
+          <!-- 展开后显示剩余标签 -->
+          <template v-if="showAllItems">
+            <a-descriptions-item
+              v-for="item in hiddenItemsFiltered"
+              :key="item.field"
+              :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 }}</span>
+                </div>
+              </template>
               <div
-                v-for="(item, itemIndex) in rowItems"
-                :key="item.field || `item-${itemIndex}`"
-                :class="[
-                  'grid-item',
-                  wrapperClassObject['xhdesc-grid-formatted'] && 'grid-formatted',
-                  { 'with-divider': item.isLine, 'placeholder-item': (!item.field || item.field === '') }
-                ]"
+                class="content-wrapper"
+                :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
+                :data-full-text="data[item.field]"
               >
-                <!-- 占位符项目：只显示空的容器 -->
-                <div v-if="!item.field || item.field === ''" class="grid-item-content placeholder-content"></div>
-
-                <!-- 普通项目 -->
-                <div v-else class="grid-item-content">
-                  <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 }}</span>
-                    <span v-if="getItemColon(item)" class="colon">:</span>
+                <template v-if="wrapperClassObject['xhdesc-report-mode']">
+                  <div class="report-value">
+                    {{ data[item.field] }}
                   </div>
-                  <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]"
-                    >
-                      <template v-if="wrapperClassObject['xhdesc-report-mode']">
-                        <div class="report-value">
-                          {{ data[item.field] }}
-                        </div>
-                        <div class="report-unit">
-                          {{ item.unit }}
-                        </div>
-                      </template>
-                      <template v-else>
-                        {{ data[item.field] }}
-                      </template>
-                    </div>
-                  </a-tooltip>
-                  <div
-                    v-else
-                    class="content-wrapper"
-                    :data-full-text="data[item.field]"
-                  >
-                    <template v-if="wrapperClassObject['xhdesc-report-mode']">
-                      <div class="report-value">
-                        {{ data[item.field] }}
-                      </div>
-                      <div class="report-unit">
-                        {{ item.unit }}
-                      </div>
-                    </template>
-                    <template v-else>
-                      {{ data[item.field] }}
-                    </template>
+                  <div class="report-unit">
+                    {{ item.unit }}
                   </div>
-                </div>
+                </template>
+                <template v-else>
+                  {{ data[item.field] }}
+                </template>
               </div>
-            </div>
+            </a-descriptions-item>
+
+            <!-- 展开部分的占位符项目 -->
+            <div
+              v-for="(item, index) in hiddenItems"
+              v-if="!item.field || item.field === ''"
+              :key="'hidden-placeholder-' + index"
+              class="placeholder-item"
+            ></div>
           </template>
-        </div>
+        </a-descriptions>
       </template>
 
       <!-- 医疗病史模式：使用自定义HTML结构实现文本环绕 -->
@@ -269,7 +280,7 @@
                 <div v-if="item.showAvatar" class="gender-icon">
                   <img :src="maleIcon" alt="male" class="gender-img" />
                 </div>
-                <span class="label-text">{{ item.label }}</span>
+                <span class="label-text">{{ item.label }}<span v-if="getItemColon(item)" class="colon">:</span></span>
               </div>
               <a-tooltip
                 v-if="isContentOverflow(data[item.field])"
@@ -324,7 +335,7 @@
                   <div v-if="item.showAvatar" class="gender-icon">
                     <img :src="maleIcon" alt="male" class="gender-img" />
                   </div>
-                  <span class="label-text">{{ item.label }}</span>
+                  <span class="label-text">{{ item.label }}<span v-if="getItemColon(item)" class="colon">:</span></span>
                 </div>
                 <div
                   class="content-wrapper"
@@ -385,7 +396,9 @@
               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 v-if="getItemColon(item)" class="colon">:</span></span>
+              </div>
               <div
                 class="content-wrapper"
                 :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
@@ -401,7 +414,9 @@
             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 v-if="getItemColon(item)" class="colon">:</span></span>
+            </div>
             <div
               class="content-wrapper"
               :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
@@ -418,7 +433,9 @@
             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 v-if="getItemColon(item)" class="colon">:</span></span>
+            </div>
             <div
               class="content-wrapper"
               :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
@@ -515,10 +532,10 @@ export default {
     visibleItemsFiltered () {
       const list = this.visibleItems || []
       if (!this.data) return []
-      // 保留所有配置的字段，包括空字段（用作占位符）
+      // 过滤掉占位符项目，占位符在模板中单独处理
       const res = list.filter(item => {
-        // 空字段（占位符）始终显示
-        if (!item.field || item.field === '') return true
+        // 跳过空字段（占位符）
+        if (!item.field || item.field === '') return false
         // 其他字段只有在有数据时才显示
         return this.data[item.field] !== null && this.data[item.field] !== undefined
       })
@@ -529,20 +546,53 @@ export default {
     hiddenItemsFiltered () {
       const list = this.hiddenItems || []
       if (!this.data) return []
-      return list.filter(item => this.data[item.field] !== null && this.data[item.field] !== undefined)
+      // 过滤掉占位符项目，占位符在模板中单独处理
+      const res = list.filter(item => {
+        // 跳过空字段（占位符）
+        if (!item.field || item.field === '') return false
+        // 其他字段只有在有数据时才显示
+        return this.data[item.field] !== null && this.data[item.field] !== undefined
+      })
+      return res
     },
     // Grid布局的行分组数据
     gridRows () {
-      if (!Array.isArray(this.config?.layout) || !this.visibleItemsFiltered) return []
+      if (!this.config?.items || !Array.isArray(this.config.items)) return []
+
+      const config = this.config || {}
+      const layout = config.layout
+
+      // 处理对象格式的layout配置（如 {"xl":5,"md":5,...}）
+      if (layout && typeof layout === 'object' && !Array.isArray(layout)) {
+        // 检查是否所有断点都是相同的列数
+        const columnCounts = Object.values(layout)
+        const isUniform = columnCounts.every(count => count === columnCounts[0])
+        if (isUniform && columnCounts[0] > 0) {
+          const itemsPerRow = columnCounts[0]
+          // 根据项目数量创建相应行数，每行按配置列数显示
+          const rows = []
+          const items = this.config.items
+
+          for (let i = 0; i < items.length; i += itemsPerRow) {
+            const rowItems = items.slice(i, i + itemsPerRow)
+            rows.push(rowItems)
+          }
+
+          return rows
+        }
+      }
+
+      // 回退到原来的数组格式处理
+      if (!Array.isArray(layout) || !this.visibleItemsFiltered) return []
 
       const items = [...this.visibleItemsFiltered]
       const rows = []
       let currentIndex = 0
 
-      for (let i = 0; i < this.config.layout.length; i++) {
-        const columnsInRow = this.config.layout[i]
+      for (let i = 0; i < layout.length; i++) {
+        const columnsInRow = layout[i]
         const rowItems = items.slice(currentIndex, currentIndex + columnsInRow)
-        rows.push(rowItems) // 总是创建行，即使没有项目
+        rows.push(rowItems)
         currentIndex += columnsInRow
         if (currentIndex >= items.length) break
       }
@@ -595,10 +645,26 @@ export default {
       }
       return this.getGlobalColon()
     },
+    // 获取当前grid布局的列数
+    getGridColumns () {
+      const layout = this.config?.layout
+      if (layout && typeof layout === 'object' && !Array.isArray(layout)) {
+        const columnCounts = Object.values(layout)
+        if (columnCounts.length > 0 && columnCounts.every(count => count === columnCounts[0])) {
+          return columnCounts[0]
+        }
+      }
+      return 5 // 默认5列
+    },
     // 生成CSS Grid模板列样式
     getGridTemplateColumns (columns) {
       if (typeof columns !== 'number' || columns <= 0) return 'repeat(auto-fit, minmax(200px, 1fr))'
       return `repeat(${columns}, 1fr)`
+    },
+    // 判断项目是否应该显示（有数据）
+    shouldShowItem (item) {
+      if (!item.field || item.field === '') return false
+      return this.data[item.field] !== null && this.data[item.field] !== undefined
     }
   },
   watch: {
@@ -680,67 +746,23 @@ export default {
   background-color: transparent !important;
 }
 
-/* Grid布局格式化样式：对齐 + 字体 */
-.grid-item.grid-formatted .grid-item-content {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  width: 100%;
-  height: 100%;
-}
-
-.grid-item.grid-formatted .label-wrapper {
-  flex: 0 0 auto;
-  min-width: 80px;
-  max-width: 120px;
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.grid-item.grid-formatted .label-text {
-  flex: 1;
-  text-align: justify;    /* 两端对齐 */
-  padding-right: 12px;   /* 为冒号留空间 */
-  text-justify: inter-word; /* 优化两端对齐 */
-  word-break: break-all;    /* 允许在任意字符间断行 */
-  letter-spacing: 0.5em;   /* 适中的字符间距 */
-}
-
-.grid-item.grid-formatted .colon {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.grid-item.grid-formatted .content-wrapper {
-  flex: 1;
-  text-align: left;
-  min-width: 0; /* 允许收缩 */
-}
-
-.grid-item.grid-formatted .label-wrapper .label-text {
-  font-family: "Source Han Sans";
-  font-size: 16px;
-  font-weight: normal;
-  line-height: 23px;
-  letter-spacing: 0em;
-  color: #313131;
+.placeholder-item {
+  /* 占位符项目保持布局空间 */
+  min-height: 32px;
+  width: fit-content;
+  margin-right: 24px;
+  margin-bottom: 16px;
 }
 
-.grid-item.grid-formatted .content-wrapper {
-  font-family: "Source Han Sans";
-  font-size: 16px;
-  font-weight: bold;
-  line-height: 23px;
-  letter-spacing: 0em;
-  color: #313131;
+.placeholder-content {
+  /* 占位符内容为空，不显示任何内容 */
+  min-height: 20px; /* 较小的高度，避免视觉突兀 */
+  visibility: hidden; /* 完全隐藏内容 */
 }
 
 /* Grid布局冒号样式 */
-.grid-item .colon {
-  margin: 0 2px;
+.colon {
+  margin: 0;
   color: rgba(0, 0, 0, 0.65);
   font-size: 14px;
 }
@@ -854,11 +876,12 @@ export default {
 ::v-deep(.ant-descriptions-item) {
   padding: 0 !important;
   display: flex !important;
-  align-items: flex-start !important;
+  align-items: stretch !important; /* 拉伸对齐，确保子项高度一致 */
   flex-direction: row !important;
   margin-right: 24px;
   width: fit-content !important;
   margin-bottom: 16px;
+  height: 32px !important; /* 固定高度 */
 }
 
 ::v-deep(.ant-descriptions-item-container) {
@@ -871,22 +894,27 @@ export default {
 }
 
 ::v-deep(.ant-descriptions-item-label) {
-  color: rgba(0, 0, 0, 0.65);
+  color: rgba(0, 0, 0, 0.65) !important;
   padding: 0 !important;
   margin: 0 !important;
-  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"');
-  display: inline-flex !important;
+  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"') !important;
+  display: flex !important;
   align-items: center !important;
+  justify-content: flex-start !important;
   white-space: nowrap !important;
-  min-width: v-bind('(config && config.style && config.style.labelWidth) || "80px"');
-  justify-content: flex-start;
+  min-width: v-bind('(config && config.style && config.style.labelWidth) || "80px"') !important;
+  min-height: 32px !important;
+  height: 32px !important;
+  line-height: 32px !important;
   padding-right: 2px !important;
 }
 
 ::v-deep(.ant-descriptions-item-content) {
-  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"');
-  display: inline-flex !important;
+  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"') !important;
+  display: flex !important;
   align-items: center !important;
+  justify-content: flex-start !important;
+  height: 100% !important; /* 占满父容器高度 */
   padding: 0 !important;
   margin: 0 !important;
   margin-left: 0px !important;
@@ -901,6 +929,7 @@ export default {
   margin-right: 2px !important;
 }
 
+
 ::v-deep(.ant-descriptions-item-container:hover) {
   background-color: rgba(0, 0, 0, 0.02);
   border-radius: 4px;
@@ -912,6 +941,13 @@ export default {
   line-height: 1;
 }
 
+/* 隐藏占位符项目的冒号 */
+::v-deep(.ant-descriptions-item.placeholder-item .ant-descriptions-item-colon) {
+  display: none !important;
+}
+
+
+
 ::v-deep(.ant-btn-link:hover) {
   color: #1890ff;
   background: transparent;
@@ -1316,6 +1352,34 @@ export default {
   }
 }
 
+.xhdesc-grid-formatted {
+  &.patient-info-descriptions,
+  .patient-info-descriptions {
+    ::v-deep .label-wrapper .label-text {
+      height: 23px;
+      opacity: 1;
+      font-family: "Source Han Sans";
+      font-size: 16px;
+      font-weight: normal;
+      line-height: normal;
+      letter-spacing: 0em;
+      color: #313131;
+    }
+
+    ::v-deep .content-wrapper,
+    ::v-deep .ant-descriptions-item-content {
+      height: 23px;
+      opacity: 1;
+      font-family: "Source Han Sans";
+      font-size: 16px;
+      font-weight: bold;
+      line-height: normal;
+      letter-spacing: 0em;
+      color: #313131;
+    }
+  }
+}
+
 .xhdesc-report-mode {
   &.patient-info-descriptions,
   .patient-info-descriptions {