vue2-client 1.22.2 → 1.22.3

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

@@ -0,0 +1,1469 @@
+<template>
+  <div class="patient-info-descriptions" :class="wrapperClassObject">
+    <div class="descriptions-container">
+      <!-- 详情/收起按钮 -->
+      <div v-if="hasMoreItems" class="detail-button-wrapper">
+        <a-button
+          :type="(config && config.detailsConfig && config.detailsConfig.buttonType) || 'link'"
+          @click="toggleDetails"
+        >
+          {{ showAllItems ? '收起' : ((config && config.detailsConfig && config.detailsConfig.buttonText) || '详情') }}
+          <a-icon :type="showAllItems ? 'up' : 'down'" />
+        </a-button>
+      </div>
+
+      <!-- 当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
+          :column="config.layout"
+          :size="(config && config.style && config.style.size)"
+          :bordered="(config && config.style && config.style.bordered)"
+          layout="horizontal">
+          <template v-if="data">
+            <!-- 显示前N个标签 -->
+            <a-descriptions-item
+              v-for="(item) in visibleItemsFiltered"
+              :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">
+                    <template v-if="item.type === 'list'">
+                      <span class="list-label-text">{{ item.label }}</span>
+                    </template>
+                    <template v-else>
+                      {{ item.label }}
+                    </template>
+                  </span>
+                </div>
+              </template>
+              <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>
+            </a-descriptions-item>
+
+            <!-- 占位符项目 -->
+            <div
+              v-for="(item, index) in visibleItems"
+              v-if="!item.field || item.field === ''"
+              :key="'placeholder-' + index"
+              class="placeholder-item"
+            ></div>
+          </template>
+
+          <!-- 展开后显示剩余标签 -->
+          <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">
+                    <template v-if="item.type === 'list'">
+                      <span class="list-label-text">{{ item.label }}</span>
+                    </template>
+                    <template v-else>
+                      {{ item.label }}
+                    </template>
+                  </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>
+
+            <!-- 展开部分的占位符项目 -->
+            <div
+              v-for="(item, index) in hiddenItems"
+              v-if="!item.field || item.field === ''"
+              :key="'hidden-placeholder-' + index"
+              class="placeholder-item"
+            ></div>
+          </template>
+        </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">
+          <template v-if="data">
+            <!-- 显示可见的标签 -->
+            <div
+              v-for="(item) in visibleItemsFiltered"
+              :key="item.field"
+              :class="['description-item', { 'with-divider': item.isLine }]"
+            >
+              <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>
+            </div>
+
+            <!-- 展开后显示的内容 -->
+            <template v-if="showAllItems">
+              <div
+                v-for="item in hiddenItemsFiltered"
+                :key="item.field"
+                class="description-item"
+              >
+                <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>
+                <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>
+              </div>
+            </template>
+          </template>
+        </div>
+      </template>
+
+      <!-- 可选：底部区域（分割线 + 三列内容） -->
+      <div v-if="config && config.footer && Array.isArray(config.footer.items) && data" class="xhdesc-footer">
+        <div class="xhdesc-divider" />
+        <!-- 医疗病史模式下的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 v-if="getItemColon(item)" class="colon">:</span></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 v-if="getItemColon(item)" class="colon">:</span></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
+          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 v-if="getItemColon(item)" class="colon">:</span></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>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XHDescriptions',
+  data () {
+    return {
+      hiddenConfig: '-1^',
+      data: null,
+      rawData: null,
+      config: null,
+      showAllItems: false,
+      maleIcon: require('@vue2-client/assets/svg/male.svg')
+    }
+  },
+  props: {
+    queryParamsName: {
+      type: String,
+      default: ''
+    },
+    parameter: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  computed: {
+    wrapperClassObject () {
+      const attrs = this.$attrs || {}
+      const classes = {}
+
+      const booleanStyleKeys = [
+        'description',
+        'no-padding',
+        'medical-history',
+        'patient-style',
+        'margin-top-12',
+        'padding-left15',
+        'line-height30',
+        'report-mode',
+        'border1',
+        'grid-formatted'
+      ]
+      booleanStyleKeys.forEach(key => {
+        const val = attrs[key]
+        const truthy = val === true || val === '' || val === 'true'
+        if (truthy) classes[`xhdesc-${key}`] = true
+      })
+      const size = attrs.size
+      if (size && typeof size === 'string') classes[`xhdesc-size-${size}`] = true
+      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
+      const hiddenStartIndex = this.detailsAfterIndex || 0
+      if (hiddenStartIndex >= this.config.items.length) return false
+      for (let i = hiddenStartIndex; i < this.config.items.length; i++) {
+        const item = this.config.items[i]
+        if (item && item.field && this.data[item.field] !== null && this.data[item.field] !== undefined) {
+          return true
+        }
+      }
+      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 []
+      // 过滤掉占位符项目，占位符在模板中单独处理
+      const res = list.filter(item => {
+        // 跳过空字段（占位符）
+        if (!item.field || item.field === '') return false
+        // 其他字段只有在有数据时才显示
+        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))
+    },
+    hiddenItemsFiltered () {
+      const list = this.hiddenItems || []
+      if (!this.data) return []
+      // 过滤掉占位符项目，占位符在模板中单独处理
+      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 (!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 < layout.length; i++) {
+        const columnsInRow = layout[i]
+        const rowItems = items.slice(currentIndex, currentIndex + columnsInRow)
+        rows.push(rowItems)
+        currentIndex += columnsInRow
+        if (currentIndex >= items.length) break
+      }
+
+      return rows
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName, {})
+  },
+  methods: {
+    async getData (data, parameterData) {
+      this.data = null
+      this.config = null
+      this.showAllItems = false
+      getConfigByName(data, 'af-his', res => {
+        this.config = res
+        const hiddenConfig = (this.config && this.config.hiddenConfig) || (0 === 1)
+        const parameter = { ...res.parameter, ...this.parameter, ...parameterData }
+        runLogic(res.logicName, parameter, 'af-his').then(result => {
+          // 如果配置启用 parseList（或 expandList），将 type=list 的父项展开为父项 + 子项（子项来自 result 中对应的数组）
+          const expandFlag = Boolean(res.expandList || res.parseList)
+          // 不用展开则直接将结果赋值给augmented
+          if(!expandFlag){
+            if (hiddenConfig) {
+              for (const key in result) {
+                if (Object.prototype.hasOwnProperty.call(result, key) && result[key] === this.hiddenConfig) {
+                  delete result[key]
+                }
+              }
+            }
+            this.data = result
+          }
+          const augmented = {}
+          if (expandFlag && Array.isArray(res.items)) {
+            // 在 expandFlag && Array.isArray(res.items) 的分支内
+            const expandedItems = []
+            // 用快照遍历，避免遍历被修改过的 res.items
+            const originalItems = Array.isArray(res.items) ? res.items.slice() : []
+            originalItems.forEach(parentItem => {
+              if (!parentItem) return
+              if (parentItem.type === 'list') {
+                expandedItems.push(parentItem)
+                const arr = result ? result[parentItem.field] : null
+                if (Array.isArray(arr)) {
+                  augmented[parentItem.field] = ''
+                  arr.forEach((sub, idx) => {
+                    const childItem = {
+                      field: sub.field || `${parentItem.field}_${idx + 1}`,
+                      label: sub.label ?? '',
+                      colon: sub.colon ? sub.colon : parentItem.colon,
+                      style: parentItem.style ? { ...parentItem.style } : undefined,
+                      showAvatar: parentItem.showAvatar,
+                      unit: parentItem.unit,
+                    }
+                    if (sub && sub.value !== undefined) augmented[childItem.field] = sub.value
+                    expandedItems.push(childItem)
+                  })
+                }
+              } else {
+                // 普通项直接加入
+                expandedItems.push(parentItem)
+              }
+            })
+            // 不要改原 res，创建新 config
+            this.rawData = result
+            this.config = { ...res, items: expandedItems }
+            this.data = augmented
+          }
+        })
+      })
+    },
+    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()
+    },
+    // 获取当前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: {
+    queryParamsName: {
+      handler (newValue) {
+        console.log(newValue)
+        this.getData(newValue, {})
+      },
+      deep: true
+    },
+    parameter: {
+      handler (newValue, oldValue) {
+        console.log('监听事件触发:', { old: oldValue, new: newValue })
+        this.getData(this.queryParamsName, {})
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.patient-info-descriptions {
+  background: #fff;
+  border-radius: 4px;
+  width: 100%;
+}
+
+.descriptions-container {
+  position: relative;
+  width: 100%;
+  padding-right: 80px; /* 为按钮预留空间 */
+}
+
+/* 自适应布局样式 */
+.flex-descriptions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 24px;
+  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;
+}
+
+.placeholder-item {
+  /* 占位符项目保持布局空间 */
+  min-height: 32px;
+  width: fit-content;
+  margin-right: 24px;
+  margin-bottom: 16px;
+}
+
+.placeholder-content {
+  /* 占位符内容为空，不显示任何内容 */
+  min-height: 20px; /* 较小的高度，避免视觉突兀 */
+  visibility: hidden; /* 完全隐藏内容 */
+}
+
+/* Grid布局冒号样式 */
+.colon {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+}
+
+.description-item {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+  white-space: nowrap;
+  flex: 0 1 auto;
+}
+
+.description-item:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+/* 共用样式 */
+.label-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"');
+  white-space: nowrap;
+}
+
+.label-text {
+  white-space: nowrap;
+  color: #313131;
+  text-decoration: none !important;
+}
+
+.list-label-text{
+  font-weight: bold;
+}
+
+.content-wrapper {
+  display: inline-flex;
+  align-items: center;
+  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;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 强制移除任何链接样式 */
+::v-deep a {
+  color: #313131 !important;
+  text-decoration: none !important;
+}
+
+.detail-button-wrapper {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+  padding: 4px 8px;
+  white-space: nowrap;
+  background-color: #fff;
+}
+
+/* 底部区域：分割线 + 三列内容 */
+.xhdesc-footer {
+  margin-top: 12px;
+}
+
+.xhdesc-divider {
+  width: calc(100% + 24px);
+  height: 0;
+  border-bottom: 1px solid #E5E9F0;
+  margin: 10px -12px 14px;
+  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 {
+  display: grid;
+  grid-template-columns: 1fr; // 单列
+  gap: 8px 24px; // 与上方描述项间距保持一致
+  align-items: start; // 左上对齐
+}
+
+.footer-right {
+  margin-top: 8px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 16px;
+}
+
+.footer-right-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Ant Design 描述列表样式覆盖 */
+::v-deep(.ant-descriptions-row) {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+::v-deep(.ant-descriptions-item) {
+  padding: 0 !important;
+  display: flex !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) {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: flex-start !important;
+  position: relative;
+  gap: 0 !important;
+  width: 100% !important;
+}
+
+::v-deep(.ant-descriptions-item-label) {
+  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"') !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"') !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"') !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;
+}
+
+/* 移除冒号的默认间距 */
+::v-deep(.ant-descriptions-item-colon) {
+  margin: 0 !important;
+  padding: 0 4px 0 0 !important;
+}
+
+
+::v-deep(.ant-descriptions-item-container:hover) {
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
+}
+
+::v-deep(.ant-btn-link) {
+  padding: 0;
+  height: auto;
+  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;
+}
+
+/* 响应式调整 */
+@media screen and (max-width: 768px) {
+  .content-wrapper {
+    max-width: 200px;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .content-wrapper {
+    max-width: 150px;
+  }
+  .flex-descriptions {
+    gap: 4px 12px;
+  }
+}
+
+/* 添加虚线样式 */
+.with-divider {
+  position: relative;
+  margin-bottom: 16px !important;
+}
+
+.with-divider::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -8px;
+  width: 100%;
+  height: 0;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
+}
+
+/* 对于 Ant Design 描述列表的特殊处理 */
+::v-deep(.ant-descriptions-item.with-divider) {
+  position: relative;
+  margin-bottom: 16px !important;
+}
+
+::v-deep(.ant-descriptions-item.with-divider::after) {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -8px;
+  width: 100%;
+  height: 0;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
+}
+
+/* 加边框 */
+.xhdesc-description {
+  padding: 4px 4px 4px 4px;
+
+  &.patient-info-descriptions,
+  .patient-info-descriptions {
+    border: 1px solid #E5E9F0;
+    border-radius: 6px;
+    padding: 6.5px 12px;
+
+    ::v-deep .ant-btn-link {
+      border: none;
+    }
+
+    ::v-deep .ant-descriptions-item-content {
+      font-weight: bold;
+    }
+  }
+}
+/* 病患信息样式开关：patient-style */
+.xhdesc-patient-style {
+  min-height: 41px;
+  border-radius: 6px;
+  opacity: 1;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  border: 0px solid #E5E9F0;
+  padding-bottom: 0px !important;
+  width: 100%;
+  overflow: hidden;
+
+  &.patient-info-descriptions,
+  .patient-info-descriptions {
+    border: 0px solid #E5E9F0;
+    border-radius: 6px;
+    background: #FFFFFF;
+    min-height: 41px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 8px 12px;
+
+    ::v-deep .label-wrapper .label-text {
+      font-family: "Source Han Sans";
+      font-size: 16px !important;
+      font-weight: 400 !important;
+      line-height: 23px !important;
+      letter-spacing: 0em;
+      font-feature-settings: "kern" on;
+      color: #5D5C5C;
+      white-space: nowrap;
+    }
+
+    ::v-deep .label-wrapper.with-avatar {
+      gap: 9px;
+    }
+
+    .gender-icon {
+      margin-top: 2px;
+    }
+    .gender-img {
+      width: 20px;
+      height: 20px;
+      opacity: 1;
+      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;
+    }
+
+    ::v-deep .ant-descriptions-item-content,
+    ::v-deep .content-wrapper,
+    .medical-history-text {
+      font-family: "Source Han Sans";
+      font-size: 16px !important;
+      font-weight: 700;
+      line-height: 23px !important;
+      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;
+
+      ::v-deep .ant-descriptions-item {
+        flex-basis: 50%; /* 在小屏幕上每行显示两项 */
+      }
+
+      ::v-deep .label-wrapper .label-text,
+      ::v-deep .ant-descriptions-item-content {
+        font-size: 14px !important;
+      }
+    }
+  }
+}
+
+/* 展开态：patient-style 自适应高度 */
+.xhdesc-patient-style.xhdesc-open,
+.xhdesc-open .patient-info-descriptions.xhdesc-patient-style,
+.xhdesc-open .xhdesc-patient-style .patient-info-descriptions {
+  height: auto;
+}
+.xhdesc-patient-style.xhdesc-open .patient-info-descriptions,
+.xhdesc-open .patient-info-descriptions.xhdesc-patient-style,
+.xhdesc-open .xhdesc-patient-style .patient-info-descriptions {
+  align-items: flex-start;
+}
+// 去除住院收费页面两个描述列表之间的间距
+.xhdesc-margin-top-12 {
+  margin-top: -12px;
+}
+.xhdesc-no-padding {
+  padding: 0px;
+  &.patient-info-descriptions,
+  .patient-info-descriptions {
+    ::v-deep .descriptions-container {
+      padding: 0px;
+    }
+    ::v-deep .content-wrapper {
+      margin: 0px;
+    }
+  }
+}
+// 库存管理左侧边距
+.xhdesc-padding-left15{
+  padding-left: 15px;
+}
+// 库存管理左侧字体样式
+.xhdesc-line-height30{
+  &.patient-info-descriptions,
+  .patient-info-descriptions{
+    ::v-deep .ant-descriptions-item{
+      margin-bottom: 0px
+    }
+    ::v-deep .content-wrapper{
+      line-height: 30px;
+    }
+    ::v-deep .ant-descriptions-item-label{
+      line-height: 30px;
+    }
+    ::v-deep .content-wrapper{
+      color: #0057FE;
+      font-weight: 700
+    }
+  }
+}
+/* 医疗病史模式：自定义HTML结构样式 */
+.medical-history-descriptions {
+  width: 100%;
+}
+
+.medical-history-item {
+  margin: 0;
+  width: 100%;
+}
+
+.medical-history-item.with-divider {
+  position: relative;
+  padding-bottom: 4px;
+  margin-bottom: 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;
+  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;
+}
+
+.medical-history-text.ellipsis::after {
+  display: none;
+}
+
+.medical-history-text.ellipsis::first-line {
+  text-indent: 0;
+}
+
+@supports not (-webkit-line-clamp: 3) {
+  .medical-history-text.ellipsis {
+    display: block;
+    max-height: 72px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .medical-history-text.ellipsis::after {
+    content: '...';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    padding-left: 4px;
+    display: block;
+  }
+}
+
+/* 医疗病史样式开关 */
+.patient-info-descriptions.xhdesc-medical-history {
+  padding: 9px 12px 10px 11px !important;
+  .descriptions-container {
+    padding-right: 0;
+    padding-left: 0px;
+  }
+  .medical-history-footer {
+    width: 100%;
+  }
+  .medical-history-footer .footer-right {
+    margin-top: 8px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    gap: 16px;
+    width: 100%;
+  }
+  .medical-history-footer .footer-right .label-wrapper .label-text {
+    font-family: "Source Han Sans";
+    font-size: 16px;
+    font-weight: 700;
+    color: #313131;
+    line-height: 22px;
+  }
+  .medical-history-footer .footer-right .content-wrapper {
+    font-family: "Source Han Sans";
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 22px;
+    color: #313131;
+  }
+
+  .medical-history-footer .footer-right .medical-history-item {
+    display: inline-block;
+    text-align: right;
+  }
+
+  .medical-history-footer .footer-right .medical-history-content {
+    text-align: right;
+  }
+
+  .medical-history-footer .footer-right .medical-history-label {
+    float: none;
+    display: inline;
+    margin-right: 0px;
+  }
+
+  .medical-history-footer .footer-right .medical-history-text {
+    display: inline;
+    text-align: right;
+  }
+
+  .medical-history-footer .footer-right .medical-history-text.ellipsis {
+    display: inline;
+    text-align: right;
+  }
+}
+
+/* 加边框 */
+.xhdesc-border1 {
+  &.patient-info-descriptions,
+  .patient-info-descriptions {
+    border: 1px solid #E5E9F0;
+    border-radius: 6px;
+  }
+}
+
+.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 {
+    ::v-deep .flex-descriptions{
+      gap: 2px;
+      .description-item {
+        min-width: 175px;
+        border-radius: 0px;
+        display: inline-block;
+        padding: 10px;
+        border: 1px solid #E5E9F0;
+        .content-wrapper {
+          margin-left: 0px;
+          width: 100%;
+          margin-top: 14px;
+          display: flex; justify-content: space-between;
+        }
+      }
+    }
+    ::v-deep .report-value {
+      font-weight: bold;
+      color: #0057FE;
+    }
+    ::v-deep .report-unit {
+      font-weight: bold;
+      text-align: end;
+    }
+  }
+}
+</style>