vue2-client 1.13.15 → 1.13.17

package/src/base-client/components/common/XReportGrid/XReportTrGroup.vue

@@ -1,712 +1,713 @@
-<template>
-  <a-row id="has_row" type="flex" :gutter="gutter" :style="isWidget ? {margin: '0px'} : {'margin-bottom': '.5rem'}">
-    <template v-for="(cell, cellIndex) in columns">
-      <a-col
-        name="trGroup"
-        v-if="Array.isArray(cell) || !cell.dontShowRow"
-        :key="cellIndex"
-        :ref="`trGroup_${ cell.slotRef || cellIndex}`"
-        @hook:mounted="(h)=>applyAllStyles(cell,cellIndex)"
-        :span="calculateColSpan(cell)">
-        <div id="report_widget" v-if="isWidget">
-          <!-- 插槽渲染 -->
-          <template v-if="Array.isArray(cell)">
-            <!-- 处理 cell 是数组的情况 -->
-            <div v-for="(item, index) in cell" :key="index">
-              <x-report-tr-group
-                :env="env"
-                :key="index"
-                :columns="recalculateItem(item)"
-                :config-data="configData"
-                :config="config"
-                :display="true">
-              </x-report-tr-group>
-            </div>
-          </template>
-          <template v-else-if="cell.type === 'slot'">
-            <template
-              v-if="['x-form-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-calendar', 'x-time-select' ,'x-checkbox', 'x-title', 'x-select'].includes(cell.slotType)">
-              <component
-                :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
-                :key="cellIndex"
-                :ref="`dynamicComponent_${ cell.slotRef || cellIndex}`"
-                :serviceName="cell.serviceName"
-                :serverName="cell.serviceName"
-                v-on="getEventHandlers(cell)"
-                @hook:mounted="(h)=>onComponentMounted(h,cell,cellIndex)"
-                :queryParamsName="cell.slotConfig"
-                :configName="cell.slotConfig"
-                :countVisible="false"
-                :env="env"
-              />
-            </template>
-          </template>
-        </div>
-        <a-card v-else class="flexItem" :bordered="false">
-          <!-- 插槽渲染 -->
-          <template v-if="Array.isArray(cell)">
-            <!-- 处理 cell 是数组的情况 -->
-            <div v-for="(item, index) in cell" :key="index">
-              <x-report-tr-group
-                :server-name="serverName"
-                :env="env"
-                :key="index"
-                :columns="recalculateItem(item)"
-                :config-data="configData"
-                :config="config"
-                :display="true">
-              </x-report-tr-group>
-            </div>
-          </template>
-          <template v-else-if="cell.type === 'slot'">
-            <template
-              v-if="['x-form-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-calendar', 'x-time-select','x-checkbox', 'x-title', 'x-select'].includes(cell.slotType)">
-              <component
-                :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
-                :key="cellIndex"
-                :ref="`dynamicComponent_${ cell.slotRef || cellIndex}`"
-                :serviceName="cell.serviceName"
-                :serverName="cell.serviceName"
-                v-on="getEventHandlers(cell)"
-                @hook:mounted="(h)=>onComponentMounted(h,cell,cellIndex)"
-                :queryParamsName="cell.slotConfig"
-                :configName="cell.slotConfig"
-                @listClick="listClick"
-                :countVisible="false"
-                :env="env"
-              />
-            </template>
-          </template>
-        </a-card>
-      </a-col>
-    </template>
-  </a-row>
-</template>
-
-<script>
-import Upload from '@vue2-client/base-client/components/common/Upload'
-import { getRealKeyData } from '@vue2-client/utils/util'
-import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
-import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
-import { getMicroData, getWindow, isMicroAppEnv, microDispatch } from '@vue2-client/utils/microAppUtils'
-
-export default {
-  name: 'XReportTrGroup',
-  components: {
-    Upload,
-    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'),
-    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'),
-    XCalendar: () => import('@vue2-client/base-client/components/common/XCalendar/XCalendar.vue'),
-    XTimeSelect: () => import('@vue2-client/base-client/components/his/XTimeSelect/XTimeSelect.vue'),
-    XCheckbox: () => import('@vue2-client/base-client/components/his/XCheckbox/XCheckbox.vue'),
-    XTitle: () => import('@vue2-client/base-client/components/his/XTitle/XTitle.vue'),
-    XSelect: () => import('@vue2-client/base-client/components/his/XSelect/XSelect.vue')
-  },
-  props: {
-    // 每一行的配置
-    columns: {
-      type: Array,
-      required: true
-    },
-    showImgInCell: {
-      type: Boolean,
-      default: false
-    },
-    config: {
-      type: Object,
-      default: function () {
-        return {}
-      }
-    },
-    // 命名空间
-    serverName: {
-      type: String,
-      default: 'af-system'
-    },
-    // 环境
-    env: {
-      type: String,
-      default: 'prod'
-    },
-    // 原始配置
-    configData: {
-      type: Object,
-      required: true
-    },
-    // 是否为展示行
-    display: {
-      type: Boolean,
-      default: false
-    },
-  },
-  computed: {
-    allSlotSum () {
-      // 计算总共有多少个Slot
-      let sum = 0
-      this.columns.forEach((item) => {
-        console.log('item', item)
-        if (Array.isArray(item)) {
-          item.forEach((cell) => {
-            if (cell.type === 'slot') {
-              sum++
-            }
-          })
-        } else if (item.type && item.type === 'slot') {
-          sum++
-        }
-      })
-      console.log(`=总共有 ${sum} 个插槽栅格`)
-      return sum
-    }
-  },
-  data () {
-    return {
-      gutter: [8, { xs: 8, sm: 16, md: 24, lg: 32 }], // 设置水槽大小
-      maxColSpan: 12,
-      uploadParams: {
-        type: 'image',
-        accept: ['*'],
-        resUploadStock: 1,
-        pathKey: 'cs'
-      },
-      mixinData: {},
-      flexItemBodyState: {},
-      // 已经渲染得插槽得数量
-      slotRendered: 0,
-      // tableConfig: {}
-    }
-  },
-  watch: {
-    columns: {
-      deep: true,
-      immediate: true,
-      handler (newVal) {
-        console.log('columns变化:', JSON.parse(JSON.stringify(newVal)))
-        // 使用nextTick确保DOM更新
-        this.$nextTick(() => {
-          this.$forceUpdate()
-        })
-      }
-    }
-  },
-  inject: ['openDialog', 'emitEvent', 'registerComponent', 'setColSpanByName', 'setGlobalData', 'getGlobalData', 'getComponentByName', 'runLogic', 'getMixinData', 'getSelectedId', 'isInAModal', 'getConfigByName', 'getSelectedData', 'getOutEnv', 'currUser', 'isWidget'],
-  methods: {
-    getWindow,
-    isMicroAppEnv,
-    microDispatch,
-    getMicroData,
-    getRealKeyData,
-    listClick (data) {
-      this.$emit('listClick', data)
-    },
-    calculateColSpan (cell) {
-      return Array.isArray(cell)
-        ? cell[0][0]?.colSpan * 2
-        : (cell?.colSpan ?? cell?.def?.colSpan ?? 1) * 2
-    },
-    applyAllStyles (cell, cellIndex) {
-      // 应用组件样式
-      const component = this.$refs[`trGroup_${ cell.slotRef || cellIndex}`][0]
-      // 确保组件已经完全挂载
-      this.$nextTick(() => {
-        this.applyComponentStyles(component, cell, cellIndex)
-      })
-    },
-    onComponentMounted (h, cell, cellIndex) {
-      this.slotRendered += 1
-      if (this.slotRendered >= this.allSlotSum) {
-        this.$emit('slotRendered')
-      }
-      if (this.getMixinData && this.getMixinData()) {
-        this.mixinData = this.getMixinData()
-      }
-      if (cell.slotRef) {
-        this.registerComponent(cell.slotRef, this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0])
-      }
-      // 传递给祖先组件
-      console.log(`插槽组件已经初始化 slotType ${cell.slotType}，ref= dynamicComponent_${cell.slotRef || cellIndex} ， serviceName = ${cell.serviceName}`)
-      const shouldInit = cell.shouldInit == null ? true : cell.shouldInit
-      if (shouldInit) {
-        if (cell.slotType === 'x-add-native-form') {
-          // 简易表单需要主动调用初始化方法
-          getConfigByName(cell.slotConfig, cell.serviceName, async (res) => {
-            // 如果配置了 表单初始化logic
-            // 调用 logic 获取参数
-            let param = { ...this.mixinData }
-            let selectedId
-            if (res.paramLogicName) {
-              if (!!this.getSelectedId) {
-                selectedId = this.getSelectedId()
-                if (typeof selectedId !== 'object') {
-                  selectedId = { selectedId: selectedId }
-                }
-              }
-              param = Object.assign(param, await runLogic(res.paramLogicName, selectedId, cell.serviceName))
-            }
-            console.info('给表单赋值', res)
-            this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
-              serviceName: cell.serviceName,
-              configName: cell.slotConfig,
-              formItems: res.formJson,
-              showSubmitBtn: !this.isInAModal,
-              businessType: param.businessType || '新增',
-              layout: res.xAddFormLayout,
-              primaryKey: res.primaryKey,
-              ...res,
-              fixedAddForm: param,
-              modifyModelData: {
-                files: param.files,
-                images: param.images
-              }
-            })
-          }, this.env === 'dev')
-        } else if (cell.slotType === 'x-form-group') {
-          // 简易表单需要主动调用初始化方法
-          getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
-            // 如果配置了 表单初始化logic
-            // 调用 logic 获取参数
-            const param = { ...this.mixinData }
-            this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
-              ...res,
-              serviceName: cell.serviceName,
-              showSubmitBtn: !this.isInAModal,
-              businessType: param.businessType || '新增',
-              modifyModelData: param,
-              showLeftTab: true,
-            })
-          }, this.env === 'dev')
-        } else if (cell.slotType === 'x-buttons') {
-          // 按钮组需要主动调用初始化方法
-          getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
-            this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
-              ...res,
-              serviceName: cell.serviceName,
-            })
-          }, this.env === 'dev')
-        } else if (cell.slotType === 'x-label-select') {
-          // 按钮组需要主动调用初始化方法
-          getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
-            this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
-              ...res,
-              serviceName: cell.serviceName,
-            })
-          }, this.env === 'dev')
-        }
-      }
-      if (cell.slotType === 'x-report') {
-        const param = { ...this.mixinData }
-        this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init(param)
-      }
-      if (cell.slotType === 'x-conversation') {
-        getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
-          this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
-            serviceName: cell.serviceName,
-            ...res,
-          })
-        }, this.env === 'dev')
-      }
-      if (cell.slotType === 'x-check-list') {
-        getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
-          this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
-            serviceName: cell.serviceName,
-            ...res,
-          })
-        }, this.env === 'dev')
-      }
-    },
-    recalculateItem (item) {
-      const totalColSpan = item.reduce((sum, cell) => {
-        // 保留手动设置的colSpan
-        return sum + (cell._isManualColSpan ? 0 : (cell.colSpan || 1))
-      }, 0)
-      return item.map(cell => {
-        // 跳过已手动设置的单元格
-        if (cell._isManualColSpan) return cell
-        const newColSpan = Math.round((cell.colSpan || 1) / totalColSpan * 12)
-        return {
-          ...cell,
-          colSpan: newColSpan,
-          // 标记自动计算的单元格
-          _isAutoCalculated: true
-        }
-      })
-    },
-
-    getEventHandlers (cell) {
-      const handlers = {}
-      if (!cell?.events || cell?.events?.length === 0) {
-        return handlers
-      }
-      cell.events.forEach(event => {
-        handlers[event.type] = async (...args) => {
-          console.info('Event handled:', event.type, args)
-          let func = event.customFunction
-          if (func && func.startsWith('function')) {
-            func = func.replace('function', 'async function')
-          }
-          const result = await executeStrFunctionByContext(this, func, args)
-          if (result instanceof Promise) {
-            result.then((res) => {
-              if (!res) return
-              let messageType = 'success'
-              // 如果传递了组件名字 自动调用刷新
-              if (res?.name) {
-                const waitRefreshRef = this.getComponentByName(res.name)
-                if (waitRefreshRef) {
-                  waitRefreshRef.refresh()
-                } else {
-                  console.warn(`未找到组件${res.name}无法刷新`)
-                }
-              }
-              // 如果传递消息类型 自动调用消息
-              if (res?.messageType) {
-                messageType = res.messageType
-              }
-              // 如果传递了提示信息自动调用提示
-              if (res?.message) {
-                this.$message[messageType](res?.message)
-              }
-            })
-          }
-        }
-      })
-      return handlers
-    },
-    getComponentName (queryParamsName, serviceName, componentName) {
-      return componentName
-    },
-    // 判断单元格样式
-    determineCellStyle (cell, color = '#000', borderWidth = '1px') {
-      // 如果声明了borderColor
-      if (this.config.style.borderColor) {
-        color = this.config.style.borderColor
-      }
-      let result = {}
-      // 如果表格也声明了样式，用表格样式将样式覆盖
-      if (cell.style) {
-        if (cell.noBorder) {
-          result = { ...cell.style }
-        } else {
-          if (this.noTopBorder) {
-            result = { ...cell.style }
-          } else {
-            result = { ...cell.style }
-          }
-        }
-        return result
-      }
-      return result
-    },
-    // 把用户定义的组件，传递到整个杉格中，方便调用
-    passComponentNamesToAncestor (refs) {
-      console.log('组件的keys', Object.entries(refs), refs)
-      // 遍历所有 refs
-      Object.entries(refs).forEach(([refKey, refValue]) => {
-        // 检查 ref 是否以 dynamicComponent_ 开头
-        if (refKey.startsWith('dynamicComponent_')) {
-          console.log('组件名存在')
-          const componentRef = refValue[0]
-          if (componentRef) {
-            // 去掉前缀并获取组件名字
-            const index = refKey.replace('dynamicComponent_', '') // 去掉前缀
-            console.log('注册组件', index)
-            // 传递给祖先组件
-            this.registerComponent(index, componentRef)
-          }
-        }
-      })
-    },
-    // 获取组件样式配置
-    async getComponentStyleConfig (componentType) {
-      try {
-        // 从配置中获取样式定义
-        const styleConfig = this.$appdata.getStylesByKey(componentType)
-        return styleConfig || {}
-      } catch (error) {
-        console.error('获取组件样式配置失败:', error)
-        return {}
-      }
-    },
-
-    // 解析组件样式配置
-    async parseComponentStyles (cell) {
-      if (!cell.class) return { rootStyles: {}, childStyles: {} }
-
-      const styleConfig = await this.getComponentStyleConfig(cell.slotType)
-      if (!styleConfig) return { rootStyles: {}, childStyles: {} }
-
-      const rootStyles = {}
-      const childStyles = new Map()
-
-      // 处理每个class配置
-      cell.class.split(' ').forEach(className => {
-        const classConfig = styleConfig[className]
-        if (!classConfig) return
-
-        // 处理根节点样式
-        Object.entries(classConfig).forEach(([key, value]) => {
-          if (!key.startsWith('*') && typeof key !== 'object') {
-            rootStyles[key] = value
-          }
-        })
-
-        // 处理子节点样式
-        this.parseNestedStyles(classConfig, childStyles)
-      })
-
-      console.warn('样式配置', rootStyles, childStyles)
-      return {
-        rootStyles,
-        childStyles
-      }
-    },
-
-    // 递归解析嵌套的样式配置
-    parseNestedStyles (config, styleMap, parentKey = '') {
-      Object.entries(config).forEach(([key, value]) => {
-        if (!key.startsWith('*')) return
-
-        const className = key.replace('*', '.')
-
-        // 如果值是对象，检查是否包含样式和子节点
-        if (typeof value === 'object') {
-          const { style = {}, children = {} } = this.separateStyleAndChildren(value)
-
-          // 创建或获取当前节点的样式配置
-          if (!styleMap.has(className)) {
-            styleMap.set(className, {
-              styles: {},
-              children: new Map()
-            })
-          }
-
-          const nodeData = styleMap.get(className)
-
-          // 合并样式
-          Object.assign(nodeData.styles, style)
-
-          // 递归处理子节点
-          this.parseNestedStyles(children, nodeData.children, className)
-        }
-      })
-    },
-
-    // 分离样式属性和子节点配置
-    separateStyleAndChildren (obj) {
-      const style = {}
-      const children = {}
-
-      Object.entries(obj).forEach(([key, value]) => {
-        if (key.startsWith('*')) {
-          // 子节点配置
-          children[key] = value
-        } else {
-          // 样式属性
-          style[key] = value
-        }
-      })
-
-      return { style, children }
-    },
-
-    // 应用组件样式
-    async applyComponentStyles (component, cell, cellIndex) {
-      if (!component || !component.$el) return
-
-      const { rootStyles, childStyles } = await this.parseComponentStyles(cell)
-
-      // 应用根节点样式
-      if (Object.keys(rootStyles).length > 0) {
-        Object.entries(rootStyles).forEach(([property, value]) => {
-          component.$el.style.setProperty(property, value, 'important')
-        })
-      }
-
-      // 如果没有子节点样式,直接返回
-      if (childStyles.size === 0) return
-
-      let retryCount = 0
-      const maxRetries = 5
-      const retryInterval = 100 // 100ms
-
-      const applyStyles = () => {
-        this.applyChildStylesOptimized(component.$el, childStyles)
-      }
-
-      // 首次应用样式
-      applyStyles()
-
-      // 创建重试机制
-      const retryApplyStyles = () => {
-        if (retryCount >= maxRetries) return
-
-        setTimeout(() => {
-          applyStyles()
-          retryCount++
-          retryApplyStyles()
-        }, retryInterval)
-      }
-
-      // 开始重试
-      retryApplyStyles()
-
-      // 创建 MutationObserver 用于动态内容
-      const observer = new MutationObserver((mutations) => {
-        // 检查是否有新增节点
-        const hasNewNodes = mutations.some(mutation =>
-          mutation.type === 'childList' && mutation.addedNodes.length > 0
-        )
-
-        if (hasNewNodes) {
-          applyStyles()
-        }
-      })
-
-      // 配置 observer
-      observer.observe(component.$el, {
-        childList: true,
-        subtree: true,
-        attributes: false
-      })
-
-      // 3秒后停止观察
-      // setTimeout(() => {
-      //   observer.disconnect()
-      // }, 3000)
-
-      // 组件销毁时清理
-      this.$once('hook:beforeDestroy', () => {
-        observer.disconnect()
-      })
-    },
-
-    // 优化后的子节点样式应用方法
-    applyChildStylesOptimized (rootElement, styleMap, parentSelector = '') {
-      if (!rootElement) return
-
-      // 处理样式映射
-      for (const [selector, data] of styleMap.entries()) {
-        const currentSelector = parentSelector ? `${parentSelector} ${selector}` : selector
-
-        try {
-          // 查找匹配的元素
-          const elements = Array.from(rootElement.querySelectorAll(currentSelector))
-
-          if (!elements.length) continue
-
-          // 应用当前层级样式
-          if (data.styles) {
-            elements.forEach(element => {
-              if (!element) return
-
-              // 应用每个样式属性
-              Object.entries(data.styles).forEach(([property, value]) => {
-                try {
-                  element.style.setProperty(property, value, 'important')
-                } catch (err) {
-                  console.warn(`设置样式失败: ${property}=${value}`, err)
-                }
-              })
-            })
-          }
-
-          // 处理子层级
-          if (data.children && data.children.size > 0) {
-            elements.forEach(element => {
-              if (element) {
-                this.applyChildStylesOptimized(element, data.children, currentSelector)
-              }
-            })
-          }
-        } catch (err) {
-          console.warn(`处理选择器失败: ${currentSelector}`, err)
-          continue
-        }
-      }
-    },
-  },
-  beforeMount () {
-    if (this.useOssForImg) {
-      this.uploadParams.resUploadMode = 'oss'
-    }
-  },
-  mounted () {
-  },
-}
-
-</script>
-
-<style scoped lang="less">
-.inputsDiv {
-  display: flex;
-  justify-content: space-between;
-
-  .inputsDivItem {
-    display: flex;
-    align-items: center;
-    padding: 0 4px;
-    white-space: nowrap;
-
-    .inputsDivItemLabel {
-      padding: 0 4px;
-    }
-  }
-}
-
-.tdNoBorder {
-  border-left: 1px solid #000;
-  border-right: 1px solid #000;
-  padding: 8px;
-}
-
-.tdWithBorder {
-  border: 1px solid #000;
-  padding: 8px;
-}
-
-.tdWithNoTopBorder {
-  border-top-style: none;
-  border-left: 1px solid #000;
-  border-right: 1px solid #000;
-  border-bottom: 1px solid #000;
-  padding: 8px;
-}
-
-.grid-content {
-  border-radius: 4px;
-  min-height: 36px;
-  text-align: center;
-  color: #fff;
-  background-color: #606266;
-}
-
-.bg-purple {
-  background: #9254de;
-}
-
-.bg-purple-light {
-  background: #b37feb;
-}
-
-.flexItem {
-  border-radius: 8px;
-  height: 100%;
-}
-</style>
+<template>
+  <a-row id="has_row" type="flex" :gutter="gutter" :style="isWidget ? {margin: '0px'} : {'margin-bottom': '.5rem'}">
+    <template v-for="(cell, cellIndex) in columns">
+      <a-col
+        name="trGroup"
+        v-if="Array.isArray(cell) || !cell.dontShowRow"
+        :key="cellIndex"
+        :ref="`trGroup_${ cell.slotRef || cellIndex}`"
+        @hook:mounted="(h)=>applyAllStyles(cell,cellIndex)"
+        :span="calculateColSpan(cell)">
+        <div id="report_widget" v-if="isWidget">
+          <!-- 插槽渲染 -->
+          <template v-if="Array.isArray(cell)">
+            <!-- 处理 cell 是数组的情况 -->
+            <div v-for="(item, index) in cell" :key="index">
+              <x-report-tr-group
+                :env="env"
+                :key="index"
+                :columns="recalculateItem(item)"
+                :config-data="configData"
+                :config="config"
+                :display="true">
+              </x-report-tr-group>
+            </div>
+          </template>
+          <template v-else-if="cell.type === 'slot'">
+            <template
+              v-if="['x-form-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-calendar', 'x-time-select' ,'x-checkbox', 'x-title', 'x-select', 'x-tree-rows'].includes(cell.slotType)">
+              <component
+                :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
+                :key="cellIndex"
+                :ref="`dynamicComponent_${ cell.slotRef || cellIndex}`"
+                :serviceName="cell.serviceName"
+                :serverName="cell.serviceName"
+                v-on="getEventHandlers(cell)"
+                @hook:mounted="(h)=>onComponentMounted(h,cell,cellIndex)"
+                :queryParamsName="cell.slotConfig"
+                :configName="cell.slotConfig"
+                :countVisible="false"
+                :env="env"
+              />
+            </template>
+          </template>
+        </div>
+        <a-card v-else class="flexItem" :bordered="false">
+          <!-- 插槽渲染 -->
+          <template v-if="Array.isArray(cell)">
+            <!-- 处理 cell 是数组的情况 -->
+            <div v-for="(item, index) in cell" :key="index">
+              <x-report-tr-group
+                :server-name="serverName"
+                :env="env"
+                :key="index"
+                :columns="recalculateItem(item)"
+                :config-data="configData"
+                :config="config"
+                :display="true">
+              </x-report-tr-group>
+            </div>
+          </template>
+          <template v-else-if="cell.type === 'slot'">
+            <template
+              v-if="['x-form-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-calendar', 'x-time-select','x-checkbox', 'x-title', 'x-select', 'x-tree-rows'].includes(cell.slotType)">
+              <component
+                :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
+                :key="cellIndex"
+                :ref="`dynamicComponent_${ cell.slotRef || cellIndex}`"
+                :serviceName="cell.serviceName"
+                :serverName="cell.serviceName"
+                v-on="getEventHandlers(cell)"
+                @hook:mounted="(h)=>onComponentMounted(h,cell,cellIndex)"
+                :queryParamsName="cell.slotConfig"
+                :configName="cell.slotConfig"
+                @listClick="listClick"
+                :countVisible="false"
+                :env="env"
+              />
+            </template>
+          </template>
+        </a-card>
+      </a-col>
+    </template>
+  </a-row>
+</template>
+
+<script>
+import Upload from '@vue2-client/base-client/components/common/Upload'
+import { getRealKeyData } from '@vue2-client/utils/util'
+import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+import { getMicroData, getWindow, isMicroAppEnv, microDispatch } from '@vue2-client/utils/microAppUtils'
+
+export default {
+  name: 'XReportTrGroup',
+  components: {
+    Upload,
+    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'),
+    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'),
+    XCalendar: () => import('@vue2-client/base-client/components/common/XCalendar/XCalendar.vue'),
+    XTimeSelect: () => import('@vue2-client/base-client/components/his/XTimeSelect/XTimeSelect.vue'),
+    XCheckbox: () => import('@vue2-client/base-client/components/his/XCheckbox/XCheckbox.vue'),
+    XTitle: () => import('@vue2-client/base-client/components/his/XTitle/XTitle.vue'),
+    XSelect: () => import('@vue2-client/base-client/components/his/XSelect/XSelect.vue'),
+    XTreeRows: () => import('@vue2-client/base-client/components/his/XTreeRows/XTreeRows.vue')
+  },
+  props: {
+    // 每一行的配置
+    columns: {
+      type: Array,
+      required: true
+    },
+    showImgInCell: {
+      type: Boolean,
+      default: false
+    },
+    config: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    // 命名空间
+    serverName: {
+      type: String,
+      default: 'af-system'
+    },
+    // 环境
+    env: {
+      type: String,
+      default: 'prod'
+    },
+    // 原始配置
+    configData: {
+      type: Object,
+      required: true
+    },
+    // 是否为展示行
+    display: {
+      type: Boolean,
+      default: false
+    },
+  },
+  computed: {
+    allSlotSum () {
+      // 计算总共有多少个Slot
+      let sum = 0
+      this.columns.forEach((item) => {
+        console.log('item', item)
+        if (Array.isArray(item)) {
+          item.forEach((cell) => {
+            if (cell.type === 'slot') {
+              sum++
+            }
+          })
+        } else if (item.type && item.type === 'slot') {
+          sum++
+        }
+      })
+      console.log(`=总共有 ${sum} 个插槽栅格`)
+      return sum
+    }
+  },
+  data () {
+    return {
+      gutter: [8, { xs: 8, sm: 16, md: 24, lg: 32 }], // 设置水槽大小
+      maxColSpan: 12,
+      uploadParams: {
+        type: 'image',
+        accept: ['*'],
+        resUploadStock: 1,
+        pathKey: 'cs'
+      },
+      mixinData: {},
+      flexItemBodyState: {},
+      // 已经渲染得插槽得数量
+      slotRendered: 0,
+      // tableConfig: {}
+    }
+  },
+  watch: {
+    columns: {
+      deep: true,
+      immediate: true,
+      handler (newVal) {
+        console.log('columns变化:', JSON.parse(JSON.stringify(newVal)))
+        // 使用nextTick确保DOM更新
+        this.$nextTick(() => {
+          this.$forceUpdate()
+        })
+      }
+    }
+  },
+  inject: ['openDialog', 'emitEvent', 'registerComponent', 'setColSpanByName', 'setGlobalData', 'getGlobalData', 'getComponentByName', 'runLogic', 'getMixinData', 'getSelectedId', 'isInAModal', 'getConfigByName', 'getSelectedData', 'getOutEnv', 'currUser', 'isWidget'],
+  methods: {
+    getWindow,
+    isMicroAppEnv,
+    microDispatch,
+    getMicroData,
+    getRealKeyData,
+    listClick (data) {
+      this.$emit('listClick', data)
+    },
+    calculateColSpan (cell) {
+      return Array.isArray(cell)
+        ? cell[0][0]?.colSpan * 2
+        : (cell?.colSpan ?? cell?.def?.colSpan ?? 1) * 2
+    },
+    applyAllStyles (cell, cellIndex) {
+      // 应用组件样式
+      const component = this.$refs[`trGroup_${ cell.slotRef || cellIndex}`][0]
+      // 确保组件已经完全挂载
+      this.$nextTick(() => {
+        this.applyComponentStyles(component, cell, cellIndex)
+      })
+    },
+    onComponentMounted (h, cell, cellIndex) {
+      this.slotRendered += 1
+      if (this.slotRendered >= this.allSlotSum) {
+        this.$emit('slotRendered')
+      }
+      if (this.getMixinData && this.getMixinData()) {
+        this.mixinData = this.getMixinData()
+      }
+      if (cell.slotRef) {
+        this.registerComponent(cell.slotRef, this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0])
+      }
+      // 传递给祖先组件
+      console.log(`插槽组件已经初始化 slotType ${cell.slotType}，ref= dynamicComponent_${cell.slotRef || cellIndex} ， serviceName = ${cell.serviceName}`)
+      const shouldInit = cell.shouldInit == null ? true : cell.shouldInit
+      if (shouldInit) {
+        if (cell.slotType === 'x-add-native-form') {
+          // 简易表单需要主动调用初始化方法
+          getConfigByName(cell.slotConfig, cell.serviceName, async (res) => {
+            // 如果配置了 表单初始化logic
+            // 调用 logic 获取参数
+            let param = { ...this.mixinData }
+            let selectedId
+            if (res.paramLogicName) {
+              if (!!this.getSelectedId) {
+                selectedId = this.getSelectedId()
+                if (typeof selectedId !== 'object') {
+                  selectedId = { selectedId: selectedId }
+                }
+              }
+              param = Object.assign(param, await runLogic(res.paramLogicName, selectedId, cell.serviceName))
+            }
+            console.info('给表单赋值', res)
+            this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
+              serviceName: cell.serviceName,
+              configName: cell.slotConfig,
+              formItems: res.formJson,
+              showSubmitBtn: !this.isInAModal,
+              businessType: param.businessType || '新增',
+              layout: res.xAddFormLayout,
+              primaryKey: res.primaryKey,
+              ...res,
+              fixedAddForm: param,
+              modifyModelData: {
+                files: param.files,
+                images: param.images
+              }
+            })
+          }, this.env === 'dev')
+        } else if (cell.slotType === 'x-form-group') {
+          // 简易表单需要主动调用初始化方法
+          getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
+            // 如果配置了 表单初始化logic
+            // 调用 logic 获取参数
+            const param = { ...this.mixinData }
+            this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
+              ...res,
+              serviceName: cell.serviceName,
+              showSubmitBtn: !this.isInAModal,
+              businessType: param.businessType || '新增',
+              modifyModelData: param,
+              showLeftTab: true,
+            })
+          }, this.env === 'dev')
+        } else if (cell.slotType === 'x-buttons') {
+          // 按钮组需要主动调用初始化方法
+          getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
+            this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
+              ...res,
+              serviceName: cell.serviceName,
+            })
+          }, this.env === 'dev')
+        } else if (cell.slotType === 'x-label-select') {
+          // 按钮组需要主动调用初始化方法
+          getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
+            this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
+              ...res,
+              serviceName: cell.serviceName,
+            })
+          }, this.env === 'dev')
+        }
+      }
+      if (cell.slotType === 'x-report') {
+        const param = { ...this.mixinData }
+        this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init(param)
+      }
+      if (cell.slotType === 'x-conversation') {
+        getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
+          this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
+            serviceName: cell.serviceName,
+            ...res,
+          })
+        }, this.env === 'dev')
+      }
+      if (cell.slotType === 'x-check-list') {
+        getConfigByName(cell.slotConfig, cell.serviceName, (res) => {
+          this.$refs[`dynamicComponent_${cell.slotRef || cellIndex}`][0].init({
+            serviceName: cell.serviceName,
+            ...res,
+          })
+        }, this.env === 'dev')
+      }
+    },
+    recalculateItem (item) {
+      const totalColSpan = item.reduce((sum, cell) => {
+        // 保留手动设置的colSpan
+        return sum + (cell._isManualColSpan ? 0 : (cell.colSpan || 1))
+      }, 0)
+      return item.map(cell => {
+        // 跳过已手动设置的单元格
+        if (cell._isManualColSpan) return cell
+        const newColSpan = Math.round((cell.colSpan || 1) / totalColSpan * 12)
+        return {
+          ...cell,
+          colSpan: newColSpan,
+          // 标记自动计算的单元格
+          _isAutoCalculated: true
+        }
+      })
+    },
+
+    getEventHandlers (cell) {
+      const handlers = {}
+      if (!cell?.events || cell?.events?.length === 0) {
+        return handlers
+      }
+      cell.events.forEach(event => {
+        handlers[event.type] = async (...args) => {
+          console.info('Event handled:', event.type, args)
+          let func = event.customFunction
+          if (func && func.startsWith('function')) {
+            func = func.replace('function', 'async function')
+          }
+          const result = await executeStrFunctionByContext(this, func, args)
+          if (result instanceof Promise) {
+            result.then((res) => {
+              if (!res) return
+              let messageType = 'success'
+              // 如果传递了组件名字 自动调用刷新
+              if (res?.name) {
+                const waitRefreshRef = this.getComponentByName(res.name)
+                if (waitRefreshRef) {
+                  waitRefreshRef.refresh()
+                } else {
+                  console.warn(`未找到组件${res.name}无法刷新`)
+                }
+              }
+              // 如果传递消息类型 自动调用消息
+              if (res?.messageType) {
+                messageType = res.messageType
+              }
+              // 如果传递了提示信息自动调用提示
+              if (res?.message) {
+                this.$message[messageType](res?.message)
+              }
+            })
+          }
+        }
+      })
+      return handlers
+    },
+    getComponentName (queryParamsName, serviceName, componentName) {
+      return componentName
+    },
+    // 判断单元格样式
+    determineCellStyle (cell, color = '#000', borderWidth = '1px') {
+      // 如果声明了borderColor
+      if (this.config.style.borderColor) {
+        color = this.config.style.borderColor
+      }
+      let result = {}
+      // 如果表格也声明了样式，用表格样式将样式覆盖
+      if (cell.style) {
+        if (cell.noBorder) {
+          result = { ...cell.style }
+        } else {
+          if (this.noTopBorder) {
+            result = { ...cell.style }
+          } else {
+            result = { ...cell.style }
+          }
+        }
+        return result
+      }
+      return result
+    },
+    // 把用户定义的组件，传递到整个杉格中，方便调用
+    passComponentNamesToAncestor (refs) {
+      console.log('组件的keys', Object.entries(refs), refs)
+      // 遍历所有 refs
+      Object.entries(refs).forEach(([refKey, refValue]) => {
+        // 检查 ref 是否以 dynamicComponent_ 开头
+        if (refKey.startsWith('dynamicComponent_')) {
+          console.log('组件名存在')
+          const componentRef = refValue[0]
+          if (componentRef) {
+            // 去掉前缀并获取组件名字
+            const index = refKey.replace('dynamicComponent_', '') // 去掉前缀
+            console.log('注册组件', index)
+            // 传递给祖先组件
+            this.registerComponent(index, componentRef)
+          }
+        }
+      })
+    },
+    // 获取组件样式配置
+    async getComponentStyleConfig (componentType) {
+      try {
+        // 从配置中获取样式定义
+        const styleConfig = this.$appdata.getStylesByKey(componentType)
+        return styleConfig || {}
+      } catch (error) {
+        console.error('获取组件样式配置失败:', error)
+        return {}
+      }
+    },
+
+    // 解析组件样式配置
+    async parseComponentStyles (cell) {
+      if (!cell.class) return { rootStyles: {}, childStyles: {} }
+
+      const styleConfig = await this.getComponentStyleConfig(cell.slotType)
+      if (!styleConfig) return { rootStyles: {}, childStyles: {} }
+
+      const rootStyles = {}
+      const childStyles = new Map()
+
+      // 处理每个class配置
+      cell.class.split(' ').forEach(className => {
+        const classConfig = styleConfig[className]
+        if (!classConfig) return
+
+        // 处理根节点样式
+        Object.entries(classConfig).forEach(([key, value]) => {
+          if (!key.startsWith('*') && typeof key !== 'object') {
+            rootStyles[key] = value
+          }
+        })
+
+        // 处理子节点样式
+        this.parseNestedStyles(classConfig, childStyles)
+      })
+
+      console.warn('样式配置', rootStyles, childStyles)
+      return {
+        rootStyles,
+        childStyles
+      }
+    },
+
+    // 递归解析嵌套的样式配置
+    parseNestedStyles (config, styleMap, parentKey = '') {
+      Object.entries(config).forEach(([key, value]) => {
+        if (!key.startsWith('*')) return
+
+        const className = key.replace('*', '.')
+
+        // 如果值是对象，检查是否包含样式和子节点
+        if (typeof value === 'object') {
+          const { style = {}, children = {} } = this.separateStyleAndChildren(value)
+
+          // 创建或获取当前节点的样式配置
+          if (!styleMap.has(className)) {
+            styleMap.set(className, {
+              styles: {},
+              children: new Map()
+            })
+          }
+
+          const nodeData = styleMap.get(className)
+
+          // 合并样式
+          Object.assign(nodeData.styles, style)
+
+          // 递归处理子节点
+          this.parseNestedStyles(children, nodeData.children, className)
+        }
+      })
+    },
+
+    // 分离样式属性和子节点配置
+    separateStyleAndChildren (obj) {
+      const style = {}
+      const children = {}
+
+      Object.entries(obj).forEach(([key, value]) => {
+        if (key.startsWith('*')) {
+          // 子节点配置
+          children[key] = value
+        } else {
+          // 样式属性
+          style[key] = value
+        }
+      })
+
+      return { style, children }
+    },
+
+    // 应用组件样式
+    async applyComponentStyles (component, cell, cellIndex) {
+      if (!component || !component.$el) return
+
+      const { rootStyles, childStyles } = await this.parseComponentStyles(cell)
+
+      // 应用根节点样式
+      if (Object.keys(rootStyles).length > 0) {
+        Object.entries(rootStyles).forEach(([property, value]) => {
+          component.$el.style.setProperty(property, value, 'important')
+        })
+      }
+
+      // 如果没有子节点样式,直接返回
+      if (childStyles.size === 0) return
+
+      let retryCount = 0
+      const maxRetries = 5
+      const retryInterval = 100 // 100ms
+
+      const applyStyles = () => {
+        this.applyChildStylesOptimized(component.$el, childStyles)
+      }
+
+      // 首次应用样式
+      applyStyles()
+
+      // 创建重试机制
+      const retryApplyStyles = () => {
+        if (retryCount >= maxRetries) return
+
+        setTimeout(() => {
+          applyStyles()
+          retryCount++
+          retryApplyStyles()
+        }, retryInterval)
+      }
+
+      // 开始重试
+      retryApplyStyles()
+
+      // 创建 MutationObserver 用于动态内容
+      const observer = new MutationObserver((mutations) => {
+        // 检查是否有新增节点
+        const hasNewNodes = mutations.some(mutation =>
+          mutation.type === 'childList' && mutation.addedNodes.length > 0
+        )
+
+        if (hasNewNodes) {
+          applyStyles()
+        }
+      })
+
+      // 配置 observer
+      observer.observe(component.$el, {
+        childList: true,
+        subtree: true,
+        attributes: false
+      })
+
+      // 3秒后停止观察
+      // setTimeout(() => {
+      //   observer.disconnect()
+      // }, 3000)
+
+      // 组件销毁时清理
+      this.$once('hook:beforeDestroy', () => {
+        observer.disconnect()
+      })
+    },
+
+    // 优化后的子节点样式应用方法
+    applyChildStylesOptimized (rootElement, styleMap, parentSelector = '') {
+      if (!rootElement) return
+
+      // 处理样式映射
+      for (const [selector, data] of styleMap.entries()) {
+        const currentSelector = parentSelector ? `${parentSelector} ${selector}` : selector
+
+        try {
+          // 查找匹配的元素
+          const elements = Array.from(rootElement.querySelectorAll(currentSelector))
+
+          if (!elements.length) continue
+
+          // 应用当前层级样式
+          if (data.styles) {
+            elements.forEach(element => {
+              if (!element) return
+
+              // 应用每个样式属性
+              Object.entries(data.styles).forEach(([property, value]) => {
+                try {
+                  element.style.setProperty(property, value, 'important')
+                } catch (err) {
+                  console.warn(`设置样式失败: ${property}=${value}`, err)
+                }
+              })
+            })
+          }
+
+          // 处理子层级
+          if (data.children && data.children.size > 0) {
+            elements.forEach(element => {
+              if (element) {
+                this.applyChildStylesOptimized(element, data.children, currentSelector)
+              }
+            })
+          }
+        } catch (err) {
+          console.warn(`处理选择器失败: ${currentSelector}`, err)
+          continue
+        }
+      }
+    },
+  },
+  beforeMount () {
+    if (this.useOssForImg) {
+      this.uploadParams.resUploadMode = 'oss'
+    }
+  },
+  mounted () {
+  },
+}
+
+</script>
+
+<style scoped lang="less">
+.inputsDiv {
+  display: flex;
+  justify-content: space-between;
+
+  .inputsDivItem {
+    display: flex;
+    align-items: center;
+    padding: 0 4px;
+    white-space: nowrap;
+
+    .inputsDivItemLabel {
+      padding: 0 4px;
+    }
+  }
+}
+
+.tdNoBorder {
+  border-left: 1px solid #000;
+  border-right: 1px solid #000;
+  padding: 8px;
+}
+
+.tdWithBorder {
+  border: 1px solid #000;
+  padding: 8px;
+}
+
+.tdWithNoTopBorder {
+  border-top-style: none;
+  border-left: 1px solid #000;
+  border-right: 1px solid #000;
+  border-bottom: 1px solid #000;
+  padding: 8px;
+}
+
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+  text-align: center;
+  color: #fff;
+  background-color: #606266;
+}
+
+.bg-purple {
+  background: #9254de;
+}
+
+.bg-purple-light {
+  background: #b37feb;
+}
+
+.flexItem {
+  border-radius: 8px;
+  height: 100%;
+}
+</style>