vue2-client 1.12.26 → 1.12.28

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

@@ -1,1107 +1,502 @@
-<template>
-  <a-row id="has_row" type="flex" :gutter="gutter" :style="isWidget ? {margin: '0px'} : {'margin-bottom': '.5rem'}">
-    <!--  预览页展示  -->
-    <template v-if="display">
-      <template v-if="!inputColumns">
-        <a-col
-          name="trGroup"
-          v-for="(cell, cellIndex) in columns"
-          v-if="Array.isArray(cell) || !cell.dontShowRow"
-          :key="cellIndex"
-          :style="isWidget ? {padding: '0px 2px'} : (Array.isArray(cell) ? {} : determineCellStyle(cell))"
-          :span="Array.isArray(cell) ? cell[0][0].colSpan * 2 : (cell.colSpan ? cell.colSpan * 2 : undefined)">
-          <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
-                  @updateImg="updateImg"
-                  :show-img-in-cell="showImgInCell"
-                  :img-prefix="imgPrefix"
-                  :server-name="serverName"
-                  :env="env"
-                  :use-oss-for-img="useOssForImg"
-                  :key="index"
-                  :columns="recalculateItem(item)"
-                  :no-top-border="noTopBorder"
-                  :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'].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" :body-style="flexItemBodyState">
-            <!-- 插槽渲染 -->
-            <template v-if="Array.isArray(cell)">
-              <!-- 处理 cell 是数组的情况 -->
-              <div v-for="(item, index) in cell" :key="index">
-                <x-report-tr-group
-                  @updateImg="updateImg"
-                  :show-img-in-cell="showImgInCell"
-                  :img-prefix="imgPrefix"
-                  :server-name="serverName"
-                  :env="env"
-                  :use-oss-for-img="useOssForImg"
-                  :key="index"
-                  :columns="recalculateItem(item)"
-                  :no-top-border="noTopBorder"
-                  :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'].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>
-            <!-- button 按钮渲染 -->
-            <template v-else-if="cell.type === 'button'">
-              <a-button v-on="getEventHandlers(cell)">
-                {{ cell.buttonName }}
-              </a-button>
-            </template>
-            <template v-else-if="cell.type === 'column'">
-              <template v-if="cell.customFunction">
-                {{ deserializeFunctionAndRun(cell.customFunction, configData[cell.dataIndex], config) }}
-              </template>
-              <template v-else>
-                {{ cell.text }}
-              </template>
-            </template>
-            <!--       占位             -->
-            <template v-else-if="cell.type === 'placeHolderColumn'">
-            </template>
-            <template v-else-if="cell.type === 'value'">
-              <template v-if="cell.customFunction === undefined">
-                {{ cell.value }}
-              </template>
-              <template v-else>
-                {{ deserializeFunctionAndRun(cell.customFunction, cell.value, config) }}
-              </template>
-            </template>
-            <template v-else-if="cell.type === 'input'">
-              <template v-if="cell.customFunction === undefined">
-                {{ getDeepObject(configData, cell.dataIndex) }}
-              </template>
-              <template v-else>
-                {{ deserializeFunctionAndRun(cell.customFunction, configData[cell.dataIndex], config) }}
-              </template>
-            </template>
-            <template v-else-if="cell.type === 'inputs'">
-              <template v-if="cell.customFunction === undefined">
-                {{ showSubRowValue(cell) }}
-              </template>
-              <template v-else>
-                {{ deserializeFunctionAndRun(cell.customFunction, showSubRowValue(cell), config) }}
-              </template>
-            </template>
-            <template v-else-if="cell.type === 'list'">
-              <template v-if="listIndex === 0">
-                <span style="font-weight: bold">{{ cell.listHead }}</span>
-              </template>
-              <template v-else-if="cell.listType === 'input'">
-                {{ getDeepObject(configData, cell.dataIndex)[listIndex] }}
-              </template>
-              <template v-else-if="cell.listType === 'value'">
-                {{ cell.content[listIndex] }}
-              </template>
-              <template v-else-if="cell.listType === 'variable'">
-                {{ configData[cell.dataIndex][listIndex - 1][cell.listDataIndex] }}
-              </template>
-            </template>
-            <template v-else-if="cell.type === 'images'">
-              <template
-                v-if="getDeepObject(configData.images, cell.dataIndex) === undefined || getDeepObject(configData.images, cell.dataIndex).length === 0">
-                <template
-                  v-if="getDeepObject(configData, cell.dataIndex) === undefined || getDeepObject(configData, cell.dataIndex).length === 0">
-                  <span>无</span>
-                </template>
-                <template v-else>
-                  <template v-if="typeof getDeepObject(configData, cell.dataIndex) === 'object'">
-                    <div style="display: flex; align-items: end; justify-content: space-evenly; flex-wrap: wrap">
-                      <template v-for="(img,imgIndex) in getDeepObject(configData, cell.dataIndex)">
-                        <template v-if="showImgInCell">
-                          <div :key="imgIndex">
-                            <img :src="img.url" alt="图片"/>
-                            <p>{{ img.name }}</p>
-                          </div>
-                        </template>
-                        <template v-else>
-                          <span :key="imgIndex" style="margin-right: 5%">{{ img.name }}</span>
-                        </template>
-                      </template>
-                    </div>
-                  </template>
-                  <template v-else>
-                    <img :src="getDeepObject(configData, cell.dataIndex)" alt="图片"/>
-                    <p style="margin-right: 5%">{{ formatImgStr(getDeepObject(configData, cell.dataIndex))[0].name }}</p>
-                  </template>
-                </template>
-              </template>
-              <span v-else v-for="(img,imgIndex) in getDeepObject(configData.images, cell.dataIndex)" :key="imgIndex" style="margin-right: 5%">{{ img.name }}</span>
-            </template>
-          </a-card>
-        </a-col>
-      </template>
-      <template v-else>
-        <a-col
-          v-for="(cell, cellIndex) in columns"
-          :key="cellIndex"
-          :class=" calcTDBorder(cell.noBoarder) "
-          :span="cell.colSpan ? cell.colSpan * 2 : undefined"
-          :style="determineCellStyle(cell)"
-          :rowspan="cell.rowSpan ? cell.rowSpan : undefined">
-          <a-card class="flexItem" :bordered="false" :body-style="flexItemBodyState">
-            <template v-if="cell.type === 'column'">
-              {{ cell.text }}
-            </template>
-            <template v-else-if="cell.type === 'value'">
-              <template v-if="cell.customFunction === undefined">
-                {{ cell.value }}
-              </template>
-              <template v-else>
-                {{ deserializeFunctionAndRun(cell.customFunction, cell.value, config) }}
-              </template>
-            </template>
-            <template v-else-if="cell.type === 'increment'">
-              <template v-if="cell.customFunction === undefined">
-                {{ getDeepObject(configData.arr[inputColumnsDefinitionIndex], cell.dataIndex) }}
-              </template>
-              <template v-else>
-                {{
-                  deserializeFunctionAndRun(cell.customFunction, configData.arr[inputColumnsDefinitionIndex][cell.dataIndex], config)
-                }}
-              </template>
-            </template>
-            <template v-else-if="cell.type === 'input'">
-              <template v-if="cell.customFunction === undefined">
-                {{ getDeepObject(configData.arr[inputColumnsDefinitionIndex], cell.dataIndex) }}
-              </template>
-              <template v-else>
-                {{
-                  deserializeFunctionAndRun(cell.customFunction, configData.arr[inputColumnsDefinitionIndex][cell.dataIndex], config)
-                }}
-              </template>
-            </template>
-            <template v-else-if="cell.type === 'inputs'">
-              <template v-if="cell.customFunction === undefined">
-                {{ getDeepObject(configData.arr[inputColumnsDefinitionIndex], cell.dataIndex) }}
-              </template>
-              <template v-else>
-                {{
-                  deserializeFunctionAndRun(cell.customFunction, configData.arr[inputColumnsDefinitionIndex][cell.dataIndex], config)
-                }}
-              </template>
-            </template>
-          </a-card>
-        </a-col>
-      </template>
-    </template>
-    <!--  不是动态行  -->
-    <template v-else-if="!inputColumns">
-      <a-col
-        v-for="(cell, cellIndex) in columns"
-        :key="cellIndex"
-        :class=" calcTDBorder(cell.noBoarder) "
-        :span="cell.colSpan ? cell.colSpan * 2 : undefined"
-        :style="determineCellStyle(cell)"
-        :rowspan="cell.rowSpan ? cell.rowSpan : undefined">
-        <a-card class="flexItem" :bordered="false" :body-style="flexItemBodyState">
-          <template v-if="cell.type === 'column'">
-            <template v-if="cell.customFunction">
-              {{ deserializeFunctionAndRun(cell.customFunction, configData[cell.dataIndex], config) }}
-            </template>
-            <template v-else>
-              {{ cell.text }}
-            </template>
-          </template>
-          <template v-else-if="cell.type === 'placeHolderColumn'">
-            <!--       占位             -->
-          </template>
-          <template v-else-if="cell.type === 'value'">
-            {{ cell.value }}
-          </template>
-          <template v-else-if="cell.type === 'curDateInput'">
-            <a-button type="dashed" v-if="configData[cell.dataIndex]">
-              {{ configData[cell.dataIndex] }}
-            </a-button>
-            <a-button
-              v-if="!configData[cell.dataIndex]"
-              type="primary"
-              @click="getNowDate(cell.dataIndex)"
-            >{{ cell.text || '确认' }}
-            </a-button>
-          </template>
-          <template v-else-if="cell.type === 'input'">
-            <template v-if="cell.inputReadOnly === true">
-              <template v-if="cell.dataIndex.indexOf('@@@') !== -1">
-                <a-input
-                  @change="handleInputDeepChange($event, cell.dataIndex)"
-                  v-model="config.tempData[cell.dataIndex]"
-                  :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"
-                  :disabled="true"/>
-              </template>
-              <template v-else>
-                <a-input
-                  v-model="configData[cell.dataIndex]"
-                  :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"
-                  :disabled="true"/>
-              </template>
-            </template>
-            <template v-else>
-              <template v-if="cell.dataIndex.indexOf('@@@') !== -1">
-                <a-input
-                  @change="handleInputDeepChange($event, cell.dataIndex)"
-                  v-model="config.tempData[cell.dataIndex]"
-                  :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"/>
-              </template>
-              <template v-else>
-                <a-input
-                  v-model="configData[cell.dataIndex]"
-                  :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"/>
-              </template>
-            </template>
-          </template>
-          <template v-else-if="cell.type === 'inputs'">
-            <template v-if="cell.inputReadOnly === true">
-              <div class="inputsDiv">
-                <div class="inputsDivItem" v-for="(num, index) of calcFormatInputNum(cell.format)" :key="index">
-                  <span class="inputsDivItemLabel">{{ displayFormatStartText(cell.format) }}</span>
-                  <template v-if="cell.dataIndex.indexOf('@@@') !== -1">
-                    <a-input
-                      @change="handleInputDeepChange($event, cell.dataIndex)"
-                      v-model="config.tempData[cell.dataIndex][index]"
-                      :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"
-                      :disabled="true"/>
-                  </template>
-                  <template v-else>
-                    <a-input
-                      v-model="configData[cell.dataIndex][index]"
-                      :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"
-                      :disabled="true"/>
-                  </template>
-                  <span class="inputsDivItemLabel">{{ displayFormatText(cell.format, index) }}</span>
-                </div>
-              </div>
-            </template>
-            <template v-else>
-              <div class="inputsDiv">
-                <div class="inputsDivItem" v-for="(num, index) of calcFormatInputNum(cell.format)" :key="index">
-                  <span class="inputsDivItemLabel">{{ displayFormatStartText(cell.format) }}</span>
-                  <template v-if="cell.dataIndex.indexOf('@@@') !== -1">
-                    <a-input
-                      @change="handleInputDeepChange($event, cell.dataIndex)"
-                      v-model="config.tempData[cell.dataIndex][index]"
-                      :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"/>
-                  </template>
-                  <template v-else>
-                    <a-input
-                      v-model="configData[cell.dataIndex][index]"
-                      :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"/>
-                  </template>
-                  <span class="inputsDivItemLabel">{{ displayFormatText(cell.format, index) }}</span>
-                </div>
-              </div>
-            </template>
-          </template>
-          <template v-else-if="cell.type === 'list'">
-            <template v-if="cell.listType === 'input'">
-              <a-input
-                v-model="configData[cell.dataIndex][listIndex]"
-                :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"/>
-            </template>
-            <template v-else-if="cell.listType === 'value'">
-              {{ cell.content[listIndex] }}
-            </template>
-          </template>
-          <template v-else-if="cell.type === 'images'">
-            <div>
-              <template v-if="configData.images[cell.dataIndex]?.length > 0">
-                <upload
-                  :model="uploadParams"
-                  :img-prefix="imgPrefix"
-                  :service-name="serverName"
-                  :images="checkImg(cell.dataIndex, 'configData')"
-                  :outer-container-index="cell.dataIndex"
-                  @setFiles="(...args) => {setImages(args, 'configData')}"
-                  :upload-style="'simple'"
-                />
-              </template>
-              <template v-else>
-                <upload
-                  :model="uploadParams"
-                  :img-prefix="imgPrefix"
-                  :service-name="serverName"
-                  :images="checkImg(cell.dataIndex, 'config')"
-                  :outer-container-index="cell.dataIndex"
-                  @setFiles="(...args) => {setImages(args, 'config', cell.dataIndex)}"
-                  :upload-style="'simple'"
-                />
-              </template>
-            </div>
-          </template>
-        </a-card>
-      </a-col>
-    </template>
-    <!--  动态行插入按钮  -->
-    <template v-else-if="inputColumnsButton">
-      <a-col :span="maxColSpan" :class="calcTDBorder()">
-        <a-card class="flexItem" :bordered="false" :body-style="flexItemBodyState">
-          <a-button-group>
-            <a-button @click="addData(columns[0].dataIndex, columns)">
-              <a-icon type="plus"/>
-            </a-button>
-            <a-button @click="removeData(columns[0].dataIndex)">
-              <a-icon type="minus"/>
-            </a-button>
-          </a-button-group>
-        </a-card>
-      </a-col>
-    </template>
-    <!--  其他行  -->
-    <template v-else>
-      <a-col
-        v-for="(cell, cellIndex) in columns"
-        :key="cellIndex"
-        :class=" calcTDBorder(cell.noBoarder) "
-        :span="cell.colSpan ? cell.colSpan * 2 : undefined"
-        :style="determineCellStyle(cell)"
-        :rowspan="cell.rowSpan ? cell.rowSpan : undefined">
-        <a-card class="flexItem" :bordered="false" :body-style="flexItemBodyState">
-          <template v-if="cell.type === 'column'">
-            {{ cell.text }}
-          </template>
-          <template v-else-if="cell.type === 'value'">
-            {{ cell.value }}
-          </template>
-          <template v-else-if="cell.type === 'curDateInput'">
-            <a-button type="dashed" v-if="configData.arr[inputColumnsDefinitionIndex][cell.dataIndex]">
-              {{ configData.arr[inputColumnsDefinitionIndex][cell.dataIndex] }}
-            </a-button>
-            <a-button
-              v-if="!configData.arr[inputColumnsDefinitionIndex][cell.dataIndex]"
-              type="primary"
-              @click="getNowDate(inputColumnsDefinitionIndex,cell.dataIndex)"
-            >{{ cell.text || '确认' }}
-            </a-button>
-          </template>
-          <template v-else-if="cell.type === 'increment'">
-            {{ configData.arr[inputColumnsDefinitionIndex][cell.dataIndex] }}
-          </template>
-          <template v-else-if="cell.type === 'input'">
-            <template v-if="cell.inputReadOnly === true">
-              <a-input
-                v-model="configData.arr[inputColumnsDefinitionIndex][cell.dataIndex]"
-                :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"
-                :disabled="true"/>
-            </template>
-            <template v-else>
-              <a-input
-                v-model="configData.arr[inputColumnsDefinitionIndex][cell.dataIndex]"
-                :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"/>
-            </template>
-          </template>
-          <template v-else-if="cell.type === 'inputs'">
-            <template v-if="cell.inputReadOnly === true">
-              <a-input
-                v-model="configData.arr[inputColumnsDefinitionIndex][cell.dataIndex]"
-                :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"
-                :disabled="true"/>
-            </template>
-            <template v-else>
-              <a-input
-                v-model="configData.arr[inputColumnsDefinitionIndex][cell.dataIndex]"
-                :style="'width:' + (cell.inputWidth ? cell.inputWidth : '100') + '%'"/>
-            </template>
-          </template>
-        </a-card>
-      </a-col>
-    </template>
-  </a-row>
-</template>
-
-<script>
-import Upload from '@vue2-client/base-client/components/common/Upload'
-import { formatDate, getRealKeyData } from '@vue2-client/utils/util'
-import { nanoid } from 'nanoid'
-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'),
-  },
-  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
-    },
-    // 是否为动态行
-    inputColumns: {
-      type: Boolean,
-      default: false
-    },
-    // 是否为动态行按钮
-    inputColumnsButton: {
-      type: Boolean,
-      default: false
-    },
-    // 动态行的Index
-    inputColumnsDefinitionIndex: {
-      type: Number,
-      default: undefined
-    },
-    // 是否为展示行
-    display: {
-      type: Boolean,
-      default: false
-    },
-    // list类型的下标，用于遍历列表时，获取对应的数据
-    listIndex: {
-      type: Number,
-      default: undefined
-    },
-    // 表格没有上边框
-    noTopBorder: {
-      type: Boolean,
-      default: false
-    },
-    // 图片是否使用OSS来保存
-    useOssForImg: {
-      type: Boolean,
-      default: true
-    },
-    // 图片上传后添加前缀
-    imgPrefix: {
-      type: String,
-      default: undefined
-    }
-  },
-  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: {}
-    }
-  },
-  inject: ['openDialog', 'emitEvent', 'registerComponent', 'setGlobalData', 'getGlobalData', 'getComponentByName', 'runLogic', 'getMixinData', 'getSelectedId', 'isInAModal', 'getConfigByName', 'getSelectedData', 'getOutEnv', 'currUser', 'isWidget'],
-  methods: {
-    getWindow,
-    isMicroAppEnv,
-    microDispatch,
-    getMicroData,
-    getRealKeyData,
-    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')
-      }
-    },
-
-    // 对于嵌套情况，对colSpan重新分配
-    recalculateItem (item) {
-      const totalColSpan = item.reduce((sum, cell) => sum + (cell.colSpan || 1), 0) // 计算总的 colSpan
-      return item.map(cell => {
-        const newColSpan = Math.round((cell.colSpan || 1) / totalColSpan * 12) // 按比例重新分配 colSpan
-        return {
-          ...cell,
-          colSpan: newColSpan // 更新 colSpan
-        }
-      })
-    },
-
-    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) {
-      // const config = await getConfigByName(queryParamsName, serviceName)
-      // const componentName = config.$globalProp.type
-      return componentName
-    },
-    updateImg (data) {
-      this.$emit('updateImg', data)
-    },
-    formatImgStr (str) {
-      const result = []
-      if (str !== '') {
-        const arr = str.split('/')
-        result.push({
-          uid: nanoid(6),
-          url: str,
-          name: arr[arr.length - 1],
-          status: 'done'
-        })
-      }
-      this.uploadParams.acceptCount = 1
-      return result
-    },
-    checkImg (index, type) {
-      let target
-      if (type === 'configData') {
-        target = this.configData.images[index]
-      } else {
-        target = this.config.tempData[index]
-      }
-      if (typeof target !== 'object') {
-        return this.formatImgStr(target)
-      }
-      target.forEach(obj => {
-        if (obj.uid === undefined) {
-          obj.uid = obj.id.toString()
-        }
-        if (obj.url === undefined) {
-          if (obj.path) {
-            obj.url = obj.path
-          }
-        }
-        if (obj.name === undefined) {
-          const withOutEndFix = obj.url.split('.')[0]
-          const temp = withOutEndFix.split('/')
-          obj.name = temp[temp.length - 1]
-        }
-        if (obj.status === undefined) {
-          obj.status = 'done'
-        }
-      })
-      return target
-    },
-    // 判断单元格样式
-    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
-    },
-
-    // 表格中数据key含有@@@，需要手动触发更新
-    handleInputDeepChange () {
-      this.$forceUpdate()
-    },
-    // 路径中含有@@@的key，将其解析，并返回其数据
-    getDeepObject (obj, strPath) {
-      if (!strPath) {
-        return ''
-      }
-      const arr = strPath.split('@@@')
-      let result = obj[arr[0]]
-      arr.shift()
-      try {
-        while (arr.length > 0) {
-          result = result[arr[0]]
-          arr.shift()
-        }
-      } catch (e) {
-        result = undefined
-      }
-      return result
-    },
-    // 获取当前日期
-    getNowDate (index1, index2) {
-      if (index2) {
-        // @click="getNowDate(configData.arr[inputColumnsDefinitionIndex][cell.dataIndex])"
-        this.configData.arr[index1][index2] = formatDate('now')
-      } else {
-        this.configData[index1] = formatDate('now')
-      }
-      this.configData = Object.assign({}, this.configData)
-    },
-    // 反序列化函数并执行
-    deserializeFunctionAndRun (functionStr, value) {
-      // eslint-disable-next-line no-eval
-      const fun = eval('(' + functionStr + ')')
-      return fun(value, this.config)
-    },
-    // 基础上传组件，图片改动后触发
-    setImages (args, type, index = undefined) {
-      // 如果基础上传组件在初始化完成后，就调用emit了setImage，此时图片并没有变化，直接返回
-      if (args[2] === 'created') {
-        return
-      }
-      if (type === 'configData') {
-        this.configData.images[args[1]] = args[0]
-      } else {
-        this.config.tempData[args[1]] = args[0]
-        if (index) {
-          this.$emit('updateImg', this.config.tempData[index])
-        }
-      }
-    },
-    // 动态行删除
-    removeData (index) {
-      if (this.configData[index].length === 0) {
-        this.$message.warn('已经没有更多了')
-        return
-      }
-      this.configData[index].pop()
-    },
-    // 添加一行
-    addData (index, row) {
-      // 获取定义
-      const defs = row[0].definition
-
-      // 获取外层对象名
-      const dataName = row[0].dataIndex
-      const temp = {}
-
-      defs.forEach(def => {
-        // 找到数组中最后一个数据的值
-        let lastDataNo = 0
-        if (this.configData[dataName][this.configData[dataName].length - 1]) {
-          lastDataNo = this.configData[dataName][this.configData[dataName].length - 1][def.dataIndex]
-        }
-
-        // 如果没有值，检查是否声明了初始值
-        if (lastDataNo === 0 && def.initialValue) {
-          lastDataNo = def.initialValue
-        }
-
-        // 检查是否有步长
-        let step = 1
-        if (def.step) {
-          step = def.step
-        }
-
-        // 如果单元格类型为increment，则进行自增
-        if (def.type === 'increment') {
-          temp[def.dataIndex] = lastDataNo + step
-        }
-      })
-      this.configData[index].push(temp)
-    },
-    // 根据format计算需要多少个输入框
-    calcFormatInputNum (formatStr) {
-      let count = 0
-      for (let i = 0; i < formatStr.length; i++) {
-        if (formatStr[i] === '{') {
-          count++
-        }
-      }
-      return count
-    },
-    // 根据format计算输入框之后的文字显示
-    displayFormatText (formatStr, num) {
-      let start = 0
-      let count = 0
-      num++
-      for (let i = 0; i < formatStr.length; i++) {
-        if (formatStr[i] === '}') {
-          start = i
-          count++
-        }
-        if (count === num) {
-          for (let j = start + 1; j < formatStr.length; j++) {
-            if (formatStr[j] === '{') {
-              return formatStr.slice(start + 1, j)
-            }
-            if (j === formatStr.length - 1 && formatStr[j] !== '}') {
-              return formatStr[j]
-            }
-          }
-        }
-      }
-    },
-    calcTDBorder (cellNoBorder = false) {
-      if (cellNoBorder) {
-        return 'tdNoBorder'
-      } else {
-        if (this.noTopBorder) {
-          return 'tdWithNoTopBorder'
-        } else {
-          return 'tdWithBorder'
-        }
-      }
-    },
-    // 根据format计算输入框之前的文字显示
-    displayFormatStartText (formatStr) {
-      let count = 0
-      for (let i = 0; i < formatStr.length; i++) {
-        if (formatStr[i] === '{') {
-          break
-        } else {
-          count++
-        }
-      }
-      return formatStr.slice(0, count)
-    },
-    // 拼接被自动拆分的单元格内容
-    showSubRowValue (cell) {
-      const dataName = cell.dataIndex
-      const formatArr = []
-      const dataArr = []
-
-      // 从config中取出所有数据，根据dataIndex的开头内容进行拼接
-      this.config.columns.forEach(row => row.forEach(cell => {
-        if (cell.dataIndex && cell.dataIndex.startsWith(dataName)) {
-          formatArr.push(cell.format)
-          dataArr.push(this.configData[cell.dataIndex])
-        }
-      }))
-
-      const text = []
-      const data = []
-
-      formatArr.forEach(word => {
-        const temp = word.split('{}')
-        temp.forEach(char => {
-          if (char !== '') {
-            text.push(char)
-          }
-        })
-      })
-
-      dataArr.forEach(item => {
-        item.forEach(num => {
-          data.push(num)
-        })
-      })
-
-      let result = ''
-      for (let i = 0; i < data.length; i++) {
-        result += data[i]
-        result += text[i]
-      }
-
-      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)
-          }
-        }
-      })
-    }
-  },
-  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'}">
+    <!--  预览页展示  -->
+    <a-col
+      name="trGroup"
+      v-for="(cell, cellIndex) in columns"
+      v-if="Array.isArray(cell) || !cell.dontShowRow"
+      :key="cellIndex"
+      :style="isWidget ? {padding: '0px 2px'} : (Array.isArray(cell) ? {} : determineCellStyle(cell))"
+      :span="Array.isArray(cell) ? cell[0][0].colSpan * 2 : (cell.colSpan ? cell.colSpan * 2 : undefined)">
+      <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
+              :show-img-in-cell="showImgInCell"
+              :img-prefix="imgPrefix"
+              :server-name="serverName"
+              :env="env"
+              :use-oss-for-img="useOssForImg"
+              :key="index"
+              :columns="recalculateItem(item)"
+              :no-top-border="noTopBorder"
+              :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'].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" :body-style="flexItemBodyState">
+        <!-- 插槽渲染 -->
+        <template v-if="Array.isArray(cell)">
+          <!-- 处理 cell 是数组的情况 -->
+          <div v-for="(item, index) in cell" :key="index">
+            <x-report-tr-group
+              :show-img-in-cell="showImgInCell"
+              :img-prefix="imgPrefix"
+              :server-name="serverName"
+              :env="env"
+              :use-oss-for-img="useOssForImg"
+              :key="index"
+              :columns="recalculateItem(item)"
+              :no-top-border="noTopBorder"
+              :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'].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>
+      </a-card>
+    </a-col>
+  </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'),
+  },
+  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
+    },
+    // 是否为动态行
+    inputColumns: {
+      type: Boolean,
+      default: false
+    },
+    // 是否为动态行按钮
+    inputColumnsButton: {
+      type: Boolean,
+      default: false
+    },
+    // 动态行的Index
+    inputColumnsDefinitionIndex: {
+      type: Number,
+      default: undefined
+    },
+    // 是否为展示行
+    display: {
+      type: Boolean,
+      default: false
+    },
+    // list类型的下标，用于遍历列表时，获取对应的数据
+    listIndex: {
+      type: Number,
+      default: undefined
+    },
+    // 表格没有上边框
+    noTopBorder: {
+      type: Boolean,
+      default: false
+    },
+    // 图片是否使用OSS来保存
+    useOssForImg: {
+      type: Boolean,
+      default: true
+    },
+    // 图片上传后添加前缀
+    imgPrefix: {
+      type: String,
+      default: undefined
+    }
+  },
+  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: {}
+    }
+  },
+  inject: ['openDialog', 'emitEvent', 'registerComponent', 'setGlobalData', 'getGlobalData', 'getComponentByName', 'runLogic', 'getMixinData', 'getSelectedId', 'isInAModal', 'getConfigByName', 'getSelectedData', 'getOutEnv', 'currUser', 'isWidget'],
+  methods: {
+    getWindow,
+    isMicroAppEnv,
+    microDispatch,
+    getMicroData,
+    getRealKeyData,
+    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')
+      }
+    },
+
+    // 对于嵌套情况，对colSpan重新分配
+    recalculateItem (item) {
+      const totalColSpan = item.reduce((sum, cell) => sum + (cell.colSpan || 1), 0) // 计算总的 colSpan
+      return item.map(cell => {
+        const newColSpan = Math.round((cell.colSpan || 1) / totalColSpan * 12) // 按比例重新分配 colSpan
+        return {
+          ...cell,
+          colSpan: newColSpan // 更新 colSpan
+        }
+      })
+    },
+
+    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)
+          }
+        }
+      })
+    }
+  },
+  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>