vue2-client 1.16.45 → 1.16.47

package/src/base-client/components/common/XCollapse/XCollapse.vue

@@ -1,460 +1,461 @@
-<template>
-  <div class="x-collapse-wrapper" :class="wrapperClassObject">
-    <a-collapse
-      :activeKey="activeKey"
-      @change="handleChange"
-      :bordered="config.bordered || true"
-      :expand-icon-position="config.expandIconPosition || 'right'"
-      :style="config.style || ''"
-    >
-      <a-collapse-panel
-        v-for="(panel, panelIndex) in config.showData"
-        :key="panelIndex.toString()"
-        :show-arrow="config.showArrow || false"
-        :disabled="config.collapsible">
-        <template #header>
-          <div class="header-content">
-            <!-- 新增蓝色圆点图标，根据配置显示 -->
-            <div
-              v-if="config.showCircleIcon"
-              class="blue-circle-icon"
-              :style="config.circleIconStyle || {}"></div>
-            <span
-              class="header-text"
-              :style="config.titleStyle">
-              {{ panel.title }}
-            </span>
-            <!-- 当有 title2 数据时显示信息项 -->
-            <template v-if="panel.title2 && panel.title2.length">
-              <span
-                v-for="(item, headerIndex) in panel.title2"
-                :key="headerIndex"
-                class="info-item"
-                :style="config.title2Style">
-                <!-- 根据showTitle是否显示键名 -->
-                <span v-if="item.showTitle">{{ item.key }}:</span>
-                <span>{{ item.value }}</span>
-              </span>
-            </template>
-            <!-- 当有 title3 数据时显示时间项（与 title2 一致：支持数组/单项） -->
-            <template v-if="panel.title3 && Array.isArray(panel.title3) && panel.title3.length">
-              <span
-                v-for="(item, t3Index) in panel.title3"
-                :key="t3Index"
-                :class="['time-item', { 'time-first': t3Index === 0 }]"
-                :style="config.title3Style">
-                <span v-if="item.showTitle">{{ item.key }}:</span>
-                <span>{{ item.value }}</span>
-              </span>
-            </template>
-            <span
-              v-else-if="panel.title3"
-              class="time-item time-first"
-              :style="config.title3Style">
-              {{ panel.title3 }}
-            </span>
-            <!-- 修改搜索框的显示条件 -->
-            <a-input-search
-              v-if="panel.search"
-              v-model="searchText[panelIndex]"
-              :placeholder="panel.searchPlace"
-              class="search-input"
-              @search="(value) => onSearch(value, panelIndex)"
-              @click.stop/>
-          </div>
-        </template>
-
-        <!-- 新增设置图标，根据配置显示 -->
-        <template #extra v-if="config.showSettingIcon">
-          <a-icon
-            v-if="activeKey.includes(panelIndex.toString())"
-            :type="config.settingIconType || 'setting'"
-            class="setting-icon"
-            @click.stop="handleSettingClick(panel, panelIndex)"/>
-        </template>
-
-        <!-- 根据类型显示不同内容 -->
-        <template v-if="panel.type === 'picture'">
-          <img :src="panel.configName" alt="图片" style="width: 100%; max-width: 500px;"/>
-        </template>
-        <template v-else-if="['x-image-report','x-form-table','x-simple-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio', 'x-text-card','x-tree-rows'].includes(panel.type)">
-          <component
-            :is="getComponentName(panel.type)"
-            :ref="`dynamicComponent_${ panel.type }_${ panelIndex }`"
-            :serverName="panel.serverName || 'af-his'"
-            :queryParamsName="panel.configName"
-            :parameter="panel.parameter"
-            :countVisible="false"
-            :env="env"
-            :style="config.componentStyle || ''"
-            v-bind="panel.attrs || {}"
-            :class="panel.className"
-            :ipanelIndex="panelIndex"
-            @deleteData="deleteData"
-            @add="add"
-            @listClick="listClick"
-            @click="click"
-            @component-mounted="handleMounted"
-            @search-complete="handleSearchComplete" />
-        </template>
-      </a-collapse-panel>
-    </a-collapse>
-  </div>
-</template>
-
-<script>
-import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XCollapse',
-  components: {
-    XFormTable: () => import('@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'),
-    XAddNativeForm: () => import('@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'),
-    XFormGroup: () => import('@vue2-client/base-client/components/common/XFormGroup/XFormGroup.vue'),
-    XTreePro: () => import('@vue2-client/base-client/components/common/XTree/XTreePro.vue'),
-    XHisEditor: () => import('@vue2-client/base-client/components/his/XHisEditor/XHisEditor.vue'),
-    XTab: () => import('@vue2-client/base-client/components/common/XTab/XTab.vue'),
-    XReport: () => import('@vue2-client/base-client/components/common/XReport/XReport.vue'),
-    XButtons: () => import('@vue2-client/base-client/components/common/XButtons/XButtons.vue'),
-    XLabelSelect: () => import('@vue2-client/base-client/components/common/XLabelSelect/XLabelSelect.vue'),
-    XConversation: () => import('@vue2-client/base-client/components/common/XConversation/XConversation.vue'),
-    XCheckList: () => import('@vue2-client/base-client/components/common/XCheckList/XCheckList.vue'),
-    XCardSet: () => import('@vue2-client/base-client/components/common/XCardSet/XCardSet.vue'),
-    XCollapse: () => import('@vue2-client/base-client/components/common/XCollapse/XCollapse.vue'),
-    XHDescriptions: () => import('@vue2-client/base-client/components/his/XHDescriptions/XHDescriptions.vue'),
-    XImageReport: () => import('@vue2-client/base-client/components/his/XImageReport/XImageReport.vue'),
-    XSidebar: () => import('@vue2-client/base-client/components/his/XSidebar/XSidebar.vue'),
-    XList: () => import('@vue2-client/base-client/components/his/XList/XList.vue'),
-    XInput: () => import('@vue2-client/base-client/components/common/XInput/XInput.vue'),
-    XTimeLine: () => import('@vue2-client/base-client/components/common/XTimeline/XTimeline.vue'),
-    XRadio: () => import('@vue2-client/base-client/components/his/XRadio/XRadio.vue'),
-    XTextCard: () => import('@vue2-client/base-client/components/his/XTextCard/XTextCard.vue'),
-    XTreeRows: () => import('@vue2-client/base-client/components/his/XTreeRows/XTreeRows.vue'),
-    XSimpleTable: () => import('@vue2-client/base-client/components/his/XSimpleTable/XSimpleTable.vue')
-  },
-  data () {
-    return {
-      activeKey: [],
-      config: {},
-      configName: '',
-      searchText: {},
-      sonInstances: [] // 存储子组件实例
-    }
-  },
-  props: {
-    // 环境
-    env: {
-      type: String,
-      default: 'prod'
-    },
-    // json名
-    queryParamsName: {
-      type: Object,
-      default: null
-    },
-    parameter: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
-  },
-  created () {
-    this.getData(this.queryParamsName, this.parameter)
-  },
-  beforeDestroy () {},
-  computed: {
-    // 基于 $attrs 的样式类开关（与 XHDescriptions.vue 思路一致）
-    wrapperClassObject () {
-      const attrs = this.$attrs || {}
-      const classes = {}
-      const booleanStyleKeys = [
-        'style1'
-      ]
-      booleanStyleKeys.forEach(key => {
-        const val = attrs[key]
-        const truthy = val === true || val === '' || val === 'true'
-        if (truthy) classes[`xcollapse-${key}`] = true
-      })
-      const size = attrs.size
-      if (size && typeof size === 'string') classes[`xcollapse-size-${size}`] = true
-      return classes
-    }
-  },
-  methods: {
-    handleMounted (instance) {
-      this.sonInstances.push(instance)
-    },
-    handleSearchComplete ({ hasMatch, panelIndex }) {
-      if (hasMatch && !this.activeKey.includes(panelIndex.toString())) {
-        // 只展开包含搜索结果的面板
-        this.activeKey = [panelIndex.toString()]
-      }
-    },
-    getComponentName (componentName) {
-      return componentName
-    },
-    add (data) {
-      this.$emit('add', data)
-    },
-    deleteData (data) {
-      this.$emit('deleteData', data)
-    },
-    listClick (data) {
-      this.$emit('listClick', data)
-    },
-    click (data) {
-      this.$emit('click', data)
-    },
-    getConfigByName (componentName) {
-      const refKey = `dynamicComponent_${componentName}`
-      return this.$refs[refKey]
-    },
-    // xTreeRow 组件搜素功能
-    searchTreeRows (title) {
-      this.$nextTick(() => {
-        const instances = this.sonInstances
-        instances.forEach(comp => {
-          try {
-            comp.searchTitleToggle?.(title)
-          } catch (e) {
-            console.error('调用失败:', e)
-          }
-        })
-      })
-    },
-    async getData (config, parameter) {
-      this.configName = config
-      getConfigByName(config, 'af-his', res => {
-        this.config = res
-        console.warn(this.config)
-        runLogic(res.mainLogic, parameter, 'af-his').then(result => {
-          this.config.showData = result
-          console.log('result', result)
-          // 更具timeType更改时间类型
-          if (this.config.timeType && this.config.timeType === '.') {
-            this.config.showData.forEach(panel => {
-              // if (panel.title3) {
-              //   panel.title3 = this.convertToCustomFormat(panel.title3)
-              // }
-            })
-            this.$forceUpdate()
-          }
-          const shouldCollapseAll = this.config.collapseAllByDefault || false
-          // 初始化展开状态
-          this.activeKey = this.config.showData.map((_, i) => i.toString())
-          // 初始化关闭所有折叠面板
-          if (shouldCollapseAll) {
-            setTimeout(() => {
-              this.activeKey = [] // 关闭所有面板
-            }, 0.00001)
-          }
-        })
-      })
-    },
-    refreshXCollapse () {
-      this.getData(this.queryParamsName, this.parameter)
-    },
-    convertToCustomFormat (dateString) {
-      // 创建一个新的 Date 对象
-      const date = new Date(dateString)
-      // 获取年、月、日
-      const year = date.getFullYear()
-      const month = date.getMonth() + 1 // 月份从0开始，所以需要加1
-      const day = date.getDate()
-      // 返回格式化后的字符串
-      return `${year}.${month}.${day}`
-    },
-    handleChange (keys) {
-      this.activeKey = keys
-      // console.log(this.activeKey)
-    },
-    onSearch (value, panelIndex) {
-      this.$emit('searchChange', { value: value, panelIndex: panelIndex })
-    },
-    handleSettingClick (panel, panelIndex) {
-      this.$emit('settingClick', { panel, panelIndex })
-    }
-  },
-  watch: {
-    queryParamsName: {
-      handler (newValue) {
-        this.getData(newValue, this.parameter)
-      },
-      deep: true
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.header-content {
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.header-text {
-  margin-right: 16px;
-  font-size: 16px;
-  font-weight: 800;
-  flex-shrink: 0;
-}
-
-.info-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: #888888;
-  flex-shrink: 0;
-}
-
-.time-item {
-  margin-left: auto;
-  text-align: right;
-  flex-shrink: 0;
-}
-
-:deep(.ant-collapse-header) {
-  position: relative;
-  border-bottom: v-bind('config.showLine ? "1px solid #000000" : "none"');
-  align-items: center !important;
-  background-color: #ffffff;
-}
-
-:deep(.ant-collapse-header-text) {
-  flex: 1;
-}
-
-:deep(.ant-collapse-content > .ant-collapse-content-box) {
-  padding: 0;
-}
-
-:deep(.ant-card-body) {
-  padding: 8px;
-}
-.search-input {
-  margin-left: auto;
-  width: 100%;
-}
-:deep(.ant-collapse-item-disabled > .ant-collapse-header) {
-  cursor: default !important;
-}
-
-/* 新增样式 */
-.blue-circle-icon {
-  width: 12px;
-  height: 12px;
-  border-radius: 6px;
-  background: #3362da;
-  margin-right: 8px;
-  flex-shrink: 0;
-}
-
-.setting-icon {
-  font-size: 16px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  line-height: 1;
-  vertical-align: middle;
-  margin-top: -20px; /* 微调偏移量（根据实际情况调整） */
-}
-
-:deep(.ant-collapse-extra) {
-  display: flex !important;
-  align-items: center;
-}
-
-.configurable-area {
-  padding: 16px;
-  min-height: 100px;
-  border: 1px dashed #d9d9d9;
-  border-radius: 4px;
-  background-color: #fafafa;
-}
-
-.empty-hint {
-  color: #999;
-  text-align: center;
-  margin: 20px 0;
-}
-
-// 基于根容器类进行样式整合：x-collapse-wrapper.xcollapse-style1
-.x-collapse-wrapper {
-  &.xcollapse-style1 {
-    .header-content {
-      gap: 6px; // 圆点与title1更紧凑的基础间距
-    }
-    .blue-circle-icon {
-      margin-right: 0px !important; // 图标与标题更紧凑
-    }
-    .header-text {
-      font-family: "Source Han Sans";
-      font-size: 18px;
-      font-weight: 700;
-      line-height: normal;
-      letter-spacing: 0em;
-      color: #313131;
-      // 额外拉开与 title2 的距离（在小gap基础上单独增大）
-      margin-right: 25px !important;
-    }
-
-    .info-item {
-      font-family: "Source Han Sans";
-      font-size: 18px;
-      font-weight: 700;
-      line-height: normal;
-      text-align: right;
-      color: #313131;
-      letter-spacing: 0em
-    }
-
-    .time-item {
-      font-family: "Source Han Sans";
-      font-size: 18px;
-      font-weight: 400;
-      line-height: normal;
-      text-align: right;
-      color: #313131;
-      letter-spacing: 0em;
-    }
-
-    // 让每个面板成为独立卡片：去掉 antd 默认的分隔线，增加间距与圆角
-    :deep(.ant-collapse) {
-      background: transparent;
-      border: 0;
-    }
-
-    :deep(.ant-collapse > .ant-collapse-item) {
-      width: 550px;
-      height: 410px;
-      margin: 16px 0;              // 面板之间留白
-      border-radius: 6px;          // 分离的圆角
-      overflow: hidden;            // 保持圆角
-      background: #FFFFFF;         // 独立白底
-      box-sizing: border-box;
-      border: 1px solid #E5E9F0;   // 每个面板自身边框
-    }
-
-    :deep(.ant-collapse > .ant-collapse-item:first-child) { margin-top: 0; }
-    :deep(.ant-collapse > .ant-collapse-item:last-child) { margin-bottom: 0; }
-
-    :deep(.ant-collapse-content > .ant-collapse-content-box) { background: #FFFFFF; }
-
-    // 表头：恢复合适的上下内边距，去掉顶部额外空白
-    :deep(.ant-collapse-header) {
-      background: #FFFFFF;
-      padding: 12px 16px; // 恢复上下内边距
-      align-items: center;
-      color: #262626;
-      border-bottom: none !important; // 移除标题处下边线，避免与外边框连为一体
-    }
-  }
-}
-</style>
+<template>
+  <div class="x-collapse-wrapper" :class="wrapperClassObject">
+    <a-collapse
+      :activeKey="activeKey"
+      @change="handleChange"
+      :bordered="config.bordered || true"
+      :expand-icon-position="config.expandIconPosition || 'right'"
+      :style="config.style || ''"
+    >
+      <a-collapse-panel
+        v-for="(panel, panelIndex) in config.showData"
+        :key="panelIndex.toString()"
+        :show-arrow="config.showArrow || false"
+        :disabled="config.collapsible">
+        <template #header>
+          <div class="header-content">
+            <!-- 新增蓝色圆点图标，根据配置显示 -->
+            <div
+              v-if="config.showCircleIcon"
+              class="blue-circle-icon"
+              :style="config.circleIconStyle || {}"></div>
+            <span
+              class="header-text"
+              :style="config.titleStyle">
+              {{ panel.title }}
+            </span>
+            <!-- 当有 title2 数据时显示信息项 -->
+            <template v-if="panel.title2 && panel.title2.length">
+              <span
+                v-for="(item, headerIndex) in panel.title2"
+                :key="headerIndex"
+                class="info-item"
+                :style="config.title2Style">
+                <!-- 根据showTitle是否显示键名 -->
+                <span v-if="item.showTitle">{{ item.key }}:</span>
+                <span>{{ item.value }}</span>
+              </span>
+            </template>
+            <!-- 当有 title3 数据时显示时间项（与 title2 一致：支持数组/单项） -->
+            <template v-if="panel.title3 && Array.isArray(panel.title3) && panel.title3.length">
+              <span
+                v-for="(item, t3Index) in panel.title3"
+                :key="t3Index"
+                :class="['time-item', { 'time-first': t3Index === 0 }]"
+                :style="config.title3Style">
+                <span v-if="item.showTitle">{{ item.key }}:</span>
+                <span>{{ item.value }}</span>
+              </span>
+            </template>
+            <span
+              v-else-if="panel.title3"
+              class="time-item time-first"
+              :style="config.title3Style">
+              {{ panel.title3 }}
+            </span>
+            <!-- 修改搜索框的显示条件 -->
+            <a-input-search
+              v-if="panel.search"
+              v-model="searchText[panelIndex]"
+              :placeholder="panel.searchPlace"
+              class="search-input"
+              @search="(value) => onSearch(value, panelIndex)"
+              @click.stop/>
+          </div>
+        </template>
+
+        <!-- 新增设置图标，根据配置显示 -->
+        <template #extra v-if="config.showSettingIcon">
+          <a-icon
+            v-if="activeKey.includes(panelIndex.toString())"
+            :type="config.settingIconType || 'setting'"
+            class="setting-icon"
+            @click.stop="handleSettingClick(panel, panelIndex)"/>
+        </template>
+
+        <!-- 根据类型显示不同内容 -->
+        <template v-if="panel.type === 'picture'">
+          <img :src="panel.configName" alt="图片" style="width: 100%; max-width: 500px;"/>
+        </template>
+        <template v-else-if="['x-image-report','x-form-table','x-simple-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio', 'x-text-card','x-tree-rows'].includes(panel.type)">
+          <component
+            :is="getComponentName(panel.type)"
+            :ref="`dynamicComponent_${ panel.type }_${ panelIndex }`"
+            :serverName="panel.serverName || 'af-his'"
+            :queryParamsName="panel.configName"
+            :parameter="panel.parameter"
+            :countVisible="false"
+            :env="env"
+            :style="config.componentStyle || ''"
+            v-bind="panel.attrs || {}"
+            :class="panel.className"
+            :ipanelIndex="panelIndex"
+            @deleteData="deleteData"
+            @add="add"
+            @listClick="listClick"
+            @click="click"
+            @component-mounted="handleMounted"
+            @search-complete="handleSearchComplete" />
+        </template>
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+
+<script>
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XCollapse',
+  components: {
+    XFormTable: () => import('@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'),
+    XAddNativeForm: () => import('@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'),
+    XFormGroup: () => import('@vue2-client/base-client/components/common/XFormGroup/XFormGroup.vue'),
+    XTreePro: () => import('@vue2-client/base-client/components/common/XTree/XTreePro.vue'),
+    XHisEditor: () => import('@vue2-client/base-client/components/his/XHisEditor/XHisEditor.vue'),
+    XTab: () => import('@vue2-client/base-client/components/common/XTab/XTab.vue'),
+    XReport: () => import('@vue2-client/base-client/components/common/XReport/XReport.vue'),
+    XButtons: () => import('@vue2-client/base-client/components/common/XButtons/XButtons.vue'),
+    XLabelSelect: () => import('@vue2-client/base-client/components/common/XLabelSelect/XLabelSelect.vue'),
+    XConversation: () => import('@vue2-client/base-client/components/common/XConversation/XConversation.vue'),
+    XCheckList: () => import('@vue2-client/base-client/components/common/XCheckList/XCheckList.vue'),
+    XCardSet: () => import('@vue2-client/base-client/components/common/XCardSet/XCardSet.vue'),
+    XCollapse: () => import('@vue2-client/base-client/components/common/XCollapse/XCollapse.vue'),
+    XHDescriptions: () => import('@vue2-client/base-client/components/his/XHDescriptions/XHDescriptions.vue'),
+    XImageReport: () => import('@vue2-client/base-client/components/his/XImageReport/XImageReport.vue'),
+    XSidebar: () => import('@vue2-client/base-client/components/his/XSidebar/XSidebar.vue'),
+    XList: () => import('@vue2-client/base-client/components/his/XList/XList.vue'),
+    XInput: () => import('@vue2-client/base-client/components/common/XInput/XInput.vue'),
+    XTimeLine: () => import('@vue2-client/base-client/components/common/XTimeline/XTimeline.vue'),
+    XRadio: () => import('@vue2-client/base-client/components/his/XRadio/XRadio.vue'),
+    XTextCard: () => import('@vue2-client/base-client/components/his/XTextCard/XTextCard.vue'),
+    XTreeRows: () => import('@vue2-client/base-client/components/his/XTreeRows/XTreeRows.vue'),
+    XSimpleTable: () => import('@vue2-client/base-client/components/his/XSimpleTable/XSimpleTable.vue')
+  },
+  data () {
+    return {
+      activeKey: [],
+      config: {},
+      configName: '',
+      searchText: {},
+      sonInstances: [] // 存储子组件实例
+    }
+  },
+  props: {
+    // 环境
+    env: {
+      type: String,
+      default: 'prod'
+    },
+    // json名
+    queryParamsName: {
+      type: Object,
+      default: null
+    },
+    parameter: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName, this.parameter)
+  },
+  beforeDestroy () {},
+  computed: {
+    // 基于 $attrs 的样式类开关（与 XHDescriptions.vue 思路一致）
+    wrapperClassObject () {
+      const attrs = this.$attrs || {}
+      const classes = {}
+      const booleanStyleKeys = [
+        'style1'
+      ]
+      booleanStyleKeys.forEach(key => {
+        const val = attrs[key]
+        const truthy = val === true || val === '' || val === 'true'
+        if (truthy) classes[`xcollapse-${key}`] = true
+      })
+      const size = attrs.size
+      if (size && typeof size === 'string') classes[`xcollapse-size-${size}`] = true
+      return classes
+    }
+  },
+  methods: {
+    handleMounted (instance) {
+      this.sonInstances.push(instance)
+    },
+    handleSearchComplete ({ hasMatch, panelIndex }) {
+      if (hasMatch && !this.activeKey.includes(panelIndex.toString())) {
+        // 只展开包含搜索结果的面板
+        this.activeKey = [panelIndex.toString()]
+      }
+    },
+    getComponentName (componentName) {
+      return componentName
+    },
+    add (data) {
+      this.$emit('add', data)
+    },
+    deleteData (data) {
+      this.$emit('deleteData', data)
+    },
+    listClick (data) {
+      this.$emit('listClick', data)
+    },
+    click (data) {
+      this.$emit('click', data)
+    },
+    getConfigByName (componentName) {
+      const refKey = `dynamicComponent_${componentName}`
+      return this.$refs[refKey]
+    },
+    // xTreeRow 组件搜素功能
+    searchTreeRows (title) {
+      this.$nextTick(() => {
+        const instances = this.sonInstances
+        instances.forEach(comp => {
+          try {
+            comp.searchTitleToggle?.(title)
+          } catch (e) {
+            console.error('调用失败:', e)
+          }
+        })
+      })
+    },
+    async getData (config, parameter) {
+      this.configName = config
+      getConfigByName(config, 'af-his', res => {
+        this.config = res
+        console.warn(this.config)
+        runLogic(res.mainLogic, parameter, 'af-his').then(result => {
+          this.config.showData = result
+          console.log('result', result)
+          // 更具timeType更改时间类型
+          if (this.config.timeType && this.config.timeType === '.') {
+            this.config.showData.forEach(panel => {
+              // if (panel.title3) {
+              //   panel.title3 = this.convertToCustomFormat(panel.title3)
+              // }
+            })
+            this.$forceUpdate()
+          }
+          const shouldCollapseAll = this.config.collapseAllByDefault || false
+          // 初始化展开状态
+          this.activeKey = this.config.showData.map((_, i) => i.toString())
+          // 初始化关闭所有折叠面板
+          if (shouldCollapseAll) {
+            setTimeout(() => {
+              this.activeKey = [] // 关闭所有面板
+            }, 0.00001)
+          }
+        })
+      })
+    },
+    refreshXCollapse () {
+      this.getData(this.queryParamsName, this.parameter)
+    },
+    convertToCustomFormat (dateString) {
+      // 创建一个新的 Date 对象
+      const date = new Date(dateString)
+      // 获取年、月、日
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1 // 月份从0开始，所以需要加1
+      const day = date.getDate()
+      // 返回格式化后的字符串
+      return `${year}.${month}.${day}`
+    },
+    handleChange (keys) {
+      this.activeKey = keys
+      // console.log(this.activeKey)
+    },
+    onSearch (value, panelIndex) {
+      this.$emit('searchChange', { value: value, panelIndex: panelIndex })
+    },
+    handleSettingClick (panel, panelIndex) {
+      this.$emit('settingClick', { panel, panelIndex })
+    }
+  },
+  watch: {
+    queryParamsName: {
+      handler (newValue) {
+        this.getData(newValue, this.parameter)
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.header-text {
+  margin-right: 16px;
+  font-size: 16px;
+  font-weight: 800;
+  flex-shrink: 0;
+}
+
+.info-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #888888;
+  flex-shrink: 0;
+}
+
+.time-item {
+  margin-left: auto;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+:deep(.ant-collapse-header) {
+  position: relative;
+  border-bottom: v-bind('config.showLine ? "1px solid #000000" : "none"');
+  align-items: center !important;
+  background-color: #ffffff;
+}
+
+:deep(.ant-collapse-header-text) {
+  flex: 1;
+}
+
+:deep(.ant-collapse-content > .ant-collapse-content-box) {
+  padding: 0;
+}
+
+:deep(.ant-card-body) {
+  padding: 8px;
+}
+.search-input {
+  margin-left: auto;
+  width: 100%;
+}
+:deep(.ant-collapse-item-disabled > .ant-collapse-header) {
+  cursor: default !important;
+}
+
+/* 新增样式 */
+.blue-circle-icon {
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background: #3362da;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.setting-icon {
+  font-size: 16px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  line-height: 1;
+  vertical-align: middle;
+  margin-top: -20px; /* 微调偏移量（根据实际情况调整） */
+}
+
+:deep(.ant-collapse-extra) {
+  display: flex !important;
+  align-items: center;
+}
+
+.configurable-area {
+  padding: 16px;
+  min-height: 100px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 4px;
+  background-color: #fafafa;
+}
+
+.empty-hint {
+  color: #999;
+  text-align: center;
+  margin: 20px 0;
+}
+
+// 基于根容器类进行样式整合：x-collapse-wrapper.xcollapse-style1
+.x-collapse-wrapper {
+  &.xcollapse-style1 {
+    height: 1185px;
+    .header-content {
+      gap: 6px; // 圆点与title1更紧凑的基础间距
+    }
+    .blue-circle-icon {
+      margin-right: 0px !important; // 图标与标题更紧凑
+    }
+    .header-text {
+      font-family: "Source Han Sans";
+      font-size: 18px;
+      font-weight: 700;
+      line-height: normal;
+      letter-spacing: 0em;
+      color: #313131;
+      // 额外拉开与 title2 的距离（在小gap基础上单独增大）
+      margin-right: 25px !important;
+    }
+
+    .info-item {
+      font-family: "Source Han Sans";
+      font-size: 18px;
+      font-weight: 700;
+      line-height: normal;
+      text-align: right;
+      color: #313131;
+      letter-spacing: 0em
+    }
+
+    .time-item {
+      font-family: "Source Han Sans";
+      font-size: 18px;
+      font-weight: 400;
+      line-height: normal;
+      text-align: right;
+      color: #313131;
+      letter-spacing: 0em;
+    }
+
+    // 让每个面板成为独立卡片：去掉 antd 默认的分隔线，增加间距与圆角
+    :deep(.ant-collapse) {
+      background: transparent;
+      border: 0;
+    }
+
+    :deep(.ant-collapse > .ant-collapse-item) {
+      width: 100%;
+      height: 410px;
+      margin: 16px 0;              // 面板之间留白
+      border-radius: 6px;          // 分离的圆角
+      overflow: hidden;            // 保持圆角
+      background: #FFFFFF;         // 独立白底
+      box-sizing: border-box;
+      border: 1px solid #E5E9F0;   // 每个面板自身边框
+    }
+
+    :deep(.ant-collapse > .ant-collapse-item:first-child) { margin-top: 0; }
+    :deep(.ant-collapse > .ant-collapse-item:last-child) { margin-bottom: 0; }
+
+    :deep(.ant-collapse-content > .ant-collapse-content-box) { background: #FFFFFF; }
+
+    // 表头：恢复合适的上下内边距，去掉顶部额外空白
+    :deep(.ant-collapse-header) {
+      background: #FFFFFF;
+      padding: 12px 16px; // 恢复上下内边距
+      align-items: center;
+      color: #262626;
+      border-bottom: none !important; // 移除标题处下边线，避免与外边框连为一体
+    }
+  }
+}
+</style>