vue2-client 1.22.3 → 1.22.4

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

@@ -1,1469 +0,0 @@
-<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>