vue2-client 1.18.66 → 1.18.67

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

@@ -12,8 +12,8 @@
         </a-button>
       </div>
 
-      <!-- 当有 layout 配置时使用 a-descriptions -->
-      <template v-if="config && config.layout && !wrapperClassObject['xhdesc-medical-history']">
+      <!-- 当 layout 为数字时使用 a-descriptions -->
+      <template v-if="config && config.layout && typeof config.layout === 'number' && !wrapperClassObject['xhdesc-medical-history']">
         <a-descriptions
           :colon="getGlobalColon()"
           :column="config.layout"
@@ -115,6 +115,85 @@
         </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]) }"
+            >
+              <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 === '') }
+                ]"
+              >
+                <!-- 占位符项目：只显示空的容器 -->
+                <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>
+                  </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>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </template>
+
       <!-- 医疗病史模式：使用自定义HTML结构实现文本环绕 -->
       <template v-else-if="config && config.layout && wrapperClassObject['xhdesc-medical-history']">
         <div class="medical-history-descriptions">
@@ -393,7 +472,8 @@ export default {
         'padding-left15',
         'line-height30',
         'report-mode',
-        'border1'
+        'border1',
+        'grid-formatted'
       ]
       booleanStyleKeys.forEach(key => {
         const val = attrs[key]
@@ -435,7 +515,13 @@ export default {
     visibleItemsFiltered () {
       const list = this.visibleItems || []
       if (!this.data) return []
-      const res = list.filter(item => this.data[item.field] !== null && this.data[item.field] !== undefined)
+      // 保留所有配置的字段，包括空字段（用作占位符）
+      const res = list.filter(item => {
+        // 空字段（占位符）始终显示
+        if (!item.field || item.field === '') return true
+        // 其他字段只有在有数据时才显示
+        return this.data[item.field] !== null && this.data[item.field] !== undefined
+      })
       if (!this.showAllItems) return res
       const hiddenFields = new Set((this.hiddenItems || []).map(i => i.field))
       return res.filter(item => !hiddenFields.has(item.field))
@@ -444,6 +530,24 @@ export default {
       const list = this.hiddenItems || []
       if (!this.data) return []
       return list.filter(item => this.data[item.field] !== null && this.data[item.field] !== undefined)
+    },
+    // Grid布局的行分组数据
+    gridRows () {
+      if (!Array.isArray(this.config?.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]
+        const rowItems = items.slice(currentIndex, currentIndex + columnsInRow)
+        rows.push(rowItems) // 总是创建行，即使没有项目
+        currentIndex += columnsInRow
+        if (currentIndex >= items.length) break
+      }
+
+      return rows
     }
   },
   created () {
@@ -490,6 +594,11 @@ export default {
         return item.colon
       }
       return this.getGlobalColon()
+    },
+    // 生成CSS Grid模板列样式
+    getGridTemplateColumns (columns) {
+      if (typeof columns !== 'number' || columns <= 0) return 'repeat(auto-fit, minmax(200px, 1fr))'
+      return `repeat(${columns}, 1fr)`
     }
   },
   watch: {
@@ -532,6 +641,110 @@ export default {
   width: 100%;
 }
 
+/* Grid布局样式 */
+.grid-descriptions {
+  width: 100%;
+}
+
+.grid-row {
+  display: grid;
+  gap: 16px 24px;
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.grid-row:last-child {
+  margin-bottom: 0;
+}
+
+.grid-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+  min-width: 0; /* 允许内容收缩 */
+  min-height: 40px; /* 确保行高一致 */
+}
+
+.grid-item:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+/* 占位符项目样式 */
+.placeholder-item {
+  background-color: transparent !important;
+}
+
+.placeholder-item:hover {
+  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;
+}
+
+.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;
+}
+
+/* Grid布局冒号样式 */
+.grid-item .colon {
+  margin: 0 2px;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+}
+
 .description-item {
   display: inline-flex;
   align-items: center;