vue2-client 1.12.78 → 1.12.80

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

@@ -1,1014 +1,1014 @@
-<template>
-  <div>
-    <!--  骨架屏  -->
-    <a-card v-if="showSkeleton">
-      <a-skeleton active />
-    </a-card>
-    <!--   主体表格   -->
-    <XReportDesign
-      @selectRow="selectRow"
-      @slotRendered="slotRendered"
-      v-if="scanFinish"
-      :display-only="displayOnly"
-      :config="originalConfig"
-      :slot-config-name="undefined"
-      :for-display="true"
-      ref="XReportDesign"
-      :server-name="serverName"
-      :env="env"
-      :show-title="showTitle"
-    >
-    </XReportDesign>
-    <a-row
-      type="flex"
-      justify="end"
-      v-if="showSaveButton"
-    >
-      <a-space>
-        <a-button @click="saveConfig">
-          提交
-        </a-button>
-        <a-button @click="cancelConfig">
-          取消
-        </a-button>
-      </a-space>
-    </a-row>
-    <!-- 弹出框 -->
-    <x-add-report
-      :env="env"
-      ref="xAddReport"
-    />
-    <!-- 弹出框 -->
-    <x-report-drawer
-      :env="env"
-      ref="xReportDrawer"
-    />
-  </div>
-</template>
-
-<script>
-// 转PDF用
-import { mapState } from 'vuex'
-import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
-import XReportDesign from './XReportDesign.vue'
-import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
-
-// import XAddReport from '@vue2-client/base-client/components/common/XAddReport'
-
-export default {
-  name: 'XReport',
-  props: {
-    files: {
-      type: Array,
-      default: () => {
-        return []
-      },
-    },
-    // 控制用户权限，user和admin
-    authority: {
-      type: String,
-      default: 'user',
-    },
-    // 是否为编辑模式
-    editMode: {
-      type: Boolean,
-      default: true,
-    },
-    // 配置名
-    configName: {
-      type: String,
-      required: true,
-    },
-    // 插槽名
-    activatedSlotName: {
-      type: String,
-      default: undefined,
-    },
-    // 本地配��，调试用
-    localConfig: {
-      type: Object,
-      default: undefined,
-    },
-    // 兼容老版本配置
-    dontFormat: {
-      type: Boolean,
-      default: true,
-    },
-    showImgInCell: {
-      type: Boolean,
-      default: false,
-    },
-    // 数据
-    configData: {
-      type: Object,
-      default: undefined,
-    },
-    // 命名空间
-    serverName: {
-      type: String,
-      default: process.env.VUE_APP_SYSTEM_NAME,
-    },
-    // 环境
-    env: {
-      type: String,
-      default: 'prod',
-    },
-    // 只做展示
-    displayOnly: {
-      type: Boolean,
-      default: true,
-    },
-    // 表格没有边距
-    noPadding: {
-      type: Boolean,
-      default: true,
-    },
-    // 表格没有上边框，与noPadding搭配可以实现连续表格
-    noTopBorder: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否展示标题
-    showTitle: {
-      type: Boolean,
-      default: true,
-    },
-    // 是否展示保存按钮
-    showSaveButton: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否将组件注册到外层提供的容器中，方便外侧统一保存
-    registerMap: {
-      type: Array,
-      default: undefined,
-    },
-    // 是否小插件模式，小插件模式不会有各种边境
-    isWidget: {
-      type: Boolean,
-      default: false,
-    },
-    // 图片是否使用OSS来保存
-    useOssForImg: {
-      type: Boolean,
-      default: true,
-    },
-    // 图片上传后添加前缀
-    imgPrefix: {
-      type: String,
-      default: undefined,
-    },
-  },
-  components: {
-    XAddReport: () =>
-      import('@vue2-client/base-client/components/common/XAddReport'),
-    XReportDrawer: () =>
-      import('@vue2-client/base-client/components/common/XReportDrawer'),
-    XReportDesign,
-  },
-  data () {
-    return {
-      // 控制骨架屏显隐
-      showSkeleton: true,
-      // 配置
-      config: undefined,
-      // 当前显示模式，编辑模式，预览模式
-      type: 'design',
-      // 仅供展示，不可编辑
-      onlyDisplay: false,
-      // 每行最大列数，非必要请勿更改，现在的设计器完全是基于每行12列来设计的
-      maxColSpan: 12,
-      // 定义是否完成配置的扫描，未完成不要渲染子组件
-      scanFinish: false,
-      // 当前激活的配置文件
-      activeConfig: null,
-      // 原始配置文件
-      // 用于展示。某些情况下“设计页”中的内容仅为“预览页”表格其中的一部分
-      originalConfig: null,
-      // 扫描到的配置
-      configFromWeb: {},
-      // 用于获取配置的锁
-      timer: undefined,
-      // 是否包含图片
-      hasImages: false,
-      // 图片列表
-      imageList: [],
-      // 保存最原始的数据，用于判断哪些数据被更改了
-      dataCache: undefined,
-      // 判断哪些数据被更改了，存储对应的key
-      diff: [],
-      globalData: {},
-    }
-  },
-  beforeDestroy () {
-    clearInterval(this.timer)
-  },
-  watch: {
-    // 如果配置名更改了，重新获取配置
-    configName (val) {
-      if (val) {
-        getConfigByName(
-          this.configName,
-          undefined,
-          (res) => {
-            this.config = res
-            this.configInit()
-          },
-          this.env === 'dev'
-        )
-      }
-    },
-    // 如果本地配置更改了，重新初始化
-    localConfig: {
-      deep: true,
-      immediate: true,
-      handler (val) {
-        if (val) {
-          this.config = val
-          this.configInit()
-        }
-      },
-    },
-  },
-  provide () {
-    return {
-      runLogic: runLogic,
-      openDialog: this.openDialog,
-      openDrawer: this.openDrawer,
-      registerComponent: this.registerComponent,
-      getComponentByName: this.getComponentByName,
-      getParentComponentByName: this.getComponentByName,
-      getConfigByName: getConfigByName,
-      isWidget: this.widget,
-      currUser: this.currUser,
-      getGlobalData: this.getGlobalData,
-      setGlobalData: this.setGlobalData
-    }
-  },
-  methods: {
-    slotRendered () {
-      if (this.config?.mountedFunction) {
-        let func = this.config.mountedFunction
-        if (func && func.startsWith('function')) {
-          func = func.replace('function', 'async function')
-          executeStrFunctionByContext(this, func, [])
-        }
-      }
-    },
-    // 把组件注册到refs中，方便调用
-    registerComponent (componentName, component) {
-      console.log('内部注册', this.$options.name, componentName)
-      this.$refs[componentName] = component
-      console.log('内部注册完成', this.$refs)
-    },
-
-    // 把设计的table布局转换成可显示的珊格布局
-    transformArray (inputList) {
-      let operationIndex = 0
-      let operationList = []
-      const outputList = []
-      for (const lst of inputList) {
-        // 如果列表为空或只有一个元素，则所有元素相等。比较列表中每个元素是否与第一个元素相等
-        if (
-          lst.length >= 1 &&
-          !lst.every(
-            (x) =>
-              Array.isArray(x) ||
-              Array.isArray(lst[0]) ||
-              x.rowSpan === lst[0].rowSpan
-          )
-        ) {
-          operationList = lst
-          break // 使用 break 退出整个循环
-        } else {
-          // 被操作的行
-          operationIndex += 1
-        }
-      }
-
-      let maxMergeRow = 0
-
-      // 没有需要合并的行,直接返回
-      if (operationList.length === 0) {
-        return inputList
-      } else {
-        // 当前行的最大值
-        const maxRow = Math.max(...operationList.map((item) => item.rowSpan))
-        let mergeIndexCol = 0
-        for (let index = 0; index < operationList.length; index++) {
-          const row = operationList[index]
-          let rowSpan = row.rowSpan
-          // 需要合并的行
-          let mergeIndexRow = operationIndex + 1
-          // 存放合并后的行
-          const rows = []
-          // 添加当前行
-          if (rowSpan < maxRow && mergeIndexRow < inputList.length) {
-            rows.push([row])
-          }
-          // 当前需要被操作并且操作行没有超出列表的高度
-          while (rowSpan < maxRow && mergeIndexRow < inputList.length) {
-            rowSpan += inputList[mergeIndexRow][mergeIndexCol].rowSpan
-            // 放一行到合并结果
-            rows.push([inputList[mergeIndexRow][mergeIndexCol]])
-            if (mergeIndexRow > maxMergeRow) {
-              // 记录最多操作到了哪行
-              maxMergeRow = mergeIndexRow
-            }
-            mergeIndexRow++
-          }
-          // operation_list赋值, 没有变化的，不处理
-          if (rows.length !== 0) {
-            operationList[index] = rows
-          }
-          if (row.rowSpan !== maxRow) {
-            mergeIndexCol++ // 操作列转为下一列
-          }
-        }
-      }
-
-      // 组成outputlist, operation_list前部填入
-      let putindex = 0
-      while (operationIndex > 0) {
-        outputList.push(inputList[putindex])
-        putindex++
-        operationIndex -= 1
-      }
-
-      outputList.push(operationList)
-
-      // 组成outputlist, operation_list后部填入
-      while (maxMergeRow < inputList.length - 1) {
-        outputList.push(inputList[maxMergeRow + 1])
-        maxMergeRow += 1
-      }
-
-      return this.transformArray(outputList)
-    },
-    // 根据名字从注册到组件中获取组件
-    getComponentByName (componentName) {
-      console.log('内部取组件', this.$options.name, componentName)
-      console.log('内部组件内容', this.$refs)
-      return this.$refs[componentName]
-    },
-    getGlobalData () {
-      return this.globalData
-    },
-    setGlobalData (obj) {
-      this.globalData = obj
-    },
-    /**
-     * @param configName 栅格配置名称
-     * @param selectedId 选中得id
-     * @param mixinData  需要混入得数据
-     * @param outEnv 其他传递给打开窗口的数据
-     * @param attr 传递给Modal弹框用的信息
-     */
-    openDialog (configName, selectedId, mixinData, outEnv = {}, attr = {}) {
-      console.log('openDialog', configName, selectedId)
-      this.$refs.xAddReport.init({
-        configName: configName,
-        selectedId: selectedId,
-        mixinData: mixinData,
-        outEnv: outEnv,
-        attr,
-      })
-    },
-    openDrawer (configName, selectedId, mixinData, outEnv = {}, attr = {}) {
-      console.log('openDialog', configName, selectedId)
-      this.$refs.xReportDrawer.init({
-        configName,
-        selectedId,
-        mixinData,
-        outEnv,
-        attr,
-      })
-    },
-    // 向外暴露图片修改后的数据，某些外部需要自己管理图片的保存与修改
-    updateImg (data) {
-      this.$emit('updateImg', data)
-    },
-    // 导出数据，某些外部需要统一控制数据的变动
-    exportData () {
-      // 获取当前修改后的数据
-      let tempData
-      if (this.activeConfig === undefined || this.activeConfig === null) {
-        tempData = this.originalConfig.data
-      } else {
-        const tempDataKeys = Object.keys(this.activeConfig.tempData)
-        tempDataKeys.forEach((key) => {
-          this.changeDeepObject(
-            this.activeConfig.data,
-            key,
-            this.activeConfig.tempData[key]
-          )
-        })
-        tempData = this.activeConfig.data
-      }
-      // 对比数据的差异
-      this.diff = []
-      this.compareProps(tempData, this.dataCache)
-      this.diff.forEach((eachDiff) => {
-        const arr = eachDiff.split('.')
-        let targetData = tempData[arr[0]]
-        if (arr.length !== 1) {
-          for (let i = 1; i < arr.length - 1; i++) {
-            const path = arr[i]
-            targetData = targetData[path]
-          }
-        }
-        // 将修改的数���，添加update = true属性
-        targetData.update = true
-      })
-      return tempData
-    },
-    // 对比两个obj有哪里不同
-    compareProps (obj1, obj2, path = '') {
-      for (const key in obj1) {
-        // 如果一个是undefined
-        if (typeof obj2[key] === 'undefined') {
-          this.diff.push(path + key)
-          // 如果是数组长度不一样
-        } else if (Array.isArray(obj1) && Array.isArray(obj2)) {
-          if (obj1[key].length !== obj2[key].length) {
-            this.diff.push(path + key)
-          }
-          // 如果都是对象，并且存在同样的key，递归子key
-        } else if (
-          typeof obj1[key] === 'object' &&
-          typeof obj2[key] === 'object'
-        ) {
-          this.compareProps(obj1[key], obj2[key], path + key + '.')
-          // 如果不是obj，对比其数据
-        } else if (obj1[key] !== obj2[key]) {
-          this.diff.push(path + key)
-        }
-      }
-    },
-    selectRow (selectedRowKeys, selectedRows) {
-      this.table_selectedRowKeys = selectedRowKeys
-      this.table_selectedRows = selectedRows
-      console.log('')
-      this.$emit('selectRow', selectedRowKeys, selectedRows)
-    },
-    // 注册组件到$refs中
-    registerComponentToRefs (componentName, component) {
-      this.$refs[componentName] = component
-    },
-
-    // 提交处理，调用配置中的函数
-    saveConfig () {
-      const funcStr = this.config.confirmFunction
-      executeStrFunctionByContext(this, funcStr, [this])
-    },
-
-    // 取消处理
-    cancelConfig () {
-      this.$emit('cancel')
-    },
-
-    // 通过@@@分割临时变量，找到对应的key，并修改它的值
-    changeDeepObject (obj, strPath, newVal) {
-      const arr = strPath.split('@@@')
-      if (obj[arr[0]] === undefined) {
-        obj = obj.images
-      }
-      if (arr.length === 1) {
-        obj[arr[0]] = newVal
-      } else {
-        let result = obj[arr[0]]
-        arr.shift()
-        while (arr.length > 1) {
-          result = result[arr[0]]
-          arr.shift()
-        }
-        if (result) {
-          result[arr[0]] = newVal
-        }
-      }
-    },
-    // 检查slot是否在配置文件中包含，如果没有包含，则视为非法获取
-    checkSlotDefine (config) {
-      const slotsDeclare = config.slotsDeclare
-      const total = slotsDeclare.length
-      let count = 0
-      slotsDeclare.forEach((declare) => {
-        config.columns.forEach((row) => {
-          row.forEach((cell) => {
-            if (cell.slotConfig === declare) {
-              count++
-            }
-          })
-        })
-      })
-
-      return count === total
-    },
-    // 用于分割配置中的colums，将需要处理的数组提取出来
-    formatConfigRow () {
-      for (let i = 0; i < this.config.columns.length; i++) {
-        // 对原始数组进行递归，依次将该位置拆分为三个部分，当前处理位置之前的，当前处理位置，当前处理位置之后的
-        const before = this.config.columns.slice(0, i)
-        const after = this.config.columns.slice(
-          i + 1,
-          this.config.columns.length
-        )
-
-        // 将当前处理的数组交给处理的方法
-        const x = this.checkRow(this.config.columns[i])
-
-        const newArr = []
-
-        // 拼接之前的数组
-        if (before.length > 0) {
-          if (before.length >= 1) {
-            before.forEach((item) => {
-              newArr.push(item)
-            })
-          } else {
-            newArr.push(before)
-          }
-        }
-
-        // 拼接不需要更改当前节点处理完成的数组
-        newArr.push(x.old)
-
-        // 如果处理了新加的数据，拼接
-        if (x.add.length > 0) {
-          for (let j = 0; j < x.add.length; j++) {
-            if (x.add[j]) {
-              newArr.push(x.add[j])
-              i++
-            }
-          }
-        }
-
-        // 拼接之后的数组
-        if (after.length > 0) {
-          if (after.length >= 1) {
-            after.forEach((item) => {
-              newArr.push(item)
-            })
-          } else {
-            newArr.push(after)
-          }
-        }
-
-        this.config.columns = newArr
-      }
-    },
-    // 路径中含有@@@的key，将其解析，并返回其数据
-    getDeepObject (obj, strPath) {
-      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
-    },
-    // 处理colums数组，为声明了rowspan的单元格，自动匹配格式
-    checkRow (rowArr) {
-      // 不需要更改的数据
-      const original = []
-      // 需要更改新加的数据
-      const addArr = []
-      // 统计rowspan出现的总和
-      let count = 0
-      // 统计声明列需要的rowspan总数
-      let total = 0
-      // 是否为声明行
-      let titleCellFlag = false
-      // 是否为声明行后第一行
-      let firstSubLine = false
-      // 需要处理的行，新的index值
-      let subRowIndex = 0
-      // 新生成的行，临时存储
-      const waitForAddArr = []
-      // 用于记录声明行的colspan避免格式错误
-      let preColSpan = 0
-      // 用于统计循环次数，判断是否是最后一次
-      let forEachCount = 0
-
-      // 标记所有数据
-      rowArr.forEach((cell) => {
-        forEachCount++
-        // 如果该行没有rowspan则默认其为1，不要影响统计结果
-        if (!cell.rowSpan) {
-          cell.rowSpan = 0
-        }
-
-        if (cell.text && total !== 0) {
-          // 如果遇到了下一个声明行，证明rowspan少了一行，需要补充一个占位格
-          const nullObj = {
-            type: 'placeHolderColumn',
-            order: subRowIndex,
-            noBoarder: true,
-            needSplit: true,
-            colSpan: preColSpan,
-            dontShowRow: true,
-          }
-          subRowIndex++
-          waitForAddArr.push(nullObj)
-          total = 0
-          count = 0
-          titleCellFlag = false
-          firstSubLine = false
-        } else if (
-          total !== count + cell.rowSpan &&
-          forEachCount === rowArr.length
-        ) {
-          // 如果没有遇到了下一个声明行，但已经是当前行最后一个数据，也证明rowspan少了一行，需要补充一个占位格
-          const nullObj = {
-            type: 'placeHolderColumn',
-            order: subRowIndex,
-            noBoarder: true,
-            needSplit: true,
-            colSpan: preColSpan,
-            dontShowRow: true,
-          }
-          subRowIndex++
-          waitForAddArr.push(nullObj)
-          total = 0
-          count = 0
-          titleCellFlag = false
-          firstSubLine = false
-        }
-
-        // 判断是否为声明行
-        if (cell.text && total === 0) {
-          // 将声明行声明的rowspan作为总数，判断下方rowspan相加是否等于声明行声明的数量
-          total = cell.rowSpan
-          titleCellFlag = false
-          firstSubLine = true
-          subRowIndex = 1
-          cell.show = true
-          cell.showRowSpan = total
-        } else if (cell.rowSpan > 0 && !titleCellFlag && firstSubLine) {
-          // 判断是否为声明行后首行，因为首行不需要移动
-          count += cell.rowSpan
-          firstSubLine = false
-          cell.noBoarder = true
-          cell.show = true
-          cell.showRowSpan = total
-        } else if (cell.rowSpan > 0 && !titleCellFlag && !firstSubLine) {
-          // 既非声明行，也非首行，需要移动
-          count += cell.rowSpan
-          // cell.type = 'notShow'
-          cell.needSplit = true
-          cell.order = subRowIndex
-          cell.dontShowRow = true
-          subRowIndex++
-
-          // 如果之前添加过空行补充位置，刚好最后一位还有内容，将其互换
-          if (
-            forEachCount === rowArr.length &&
-            !waitForAddArr[waitForAddArr.length - 1].dataIndex
-          ) {
-            waitForAddArr[waitForAddArr.length - 1].order += 1
-            cell.order -= 1
-            waitForAddArr.push(cell)
-          } else {
-            waitForAddArr.push(cell)
-          }
-        }
-
-        // 如果count和total相等了，证明已经处理完成。将计数器还原
-        if (count === total) {
-          total = 0
-          count = 0
-          titleCellFlag = false
-          firstSubLine = false
-        }
-        // 保存上一个的colspan���保持生成的格子与原格式一致
-        preColSpan = cell.colSpan
-      })
-
-      // 将所有不需要移动的放入original
-      rowArr.forEach((cell) => {
-        if (cell.needSplit !== true) {
-          original.push(cell)
-        }
-      })
-
-      // 增加新的数组
-      waitForAddArr.forEach((cell) => {
-        const target = cell.order
-        // if (cell.type === 'notShow') {
-        //   cell.type = 'inputs'
-        // }
-        cell.noBoarder = true
-        if (addArr[target] === undefined) {
-          const temp = []
-          temp.push(cell)
-          addArr[target] = temp
-        } else if (addArr[target].length > 0) {
-          addArr[target].push(cell)
-        }
-      })
-
-      // 如果没有新增，将单元格边框设置为显示
-      if (addArr.length < 1) {
-        original.forEach((cell) => {
-          if (cell.type === 'input' || cell.type === 'inputs') {
-            cell.noBoarder = false
-          }
-        })
-      }
-
-      return {
-        old: original,
-        add: addArr,
-      }
-    },
-    // 扫描配置，如果有插槽则拼接插槽
-    scanConfigSlot (config) {
-      const columnsArr = config.columns
-      for (let i = 0; i < columnsArr.length; i++) {
-        for (let j = 0; j < columnsArr[i].length; j++) {
-          // 如果发现type为slot，开始匹配对应的slot配置文件
-          if (columnsArr[i][j].type === 'slot') {
-            const targetName = columnsArr[i][j].slotConfig
-            // 找不到目标插槽配置
-            if (
-              !this.configFromWeb[targetName] ||
-              !this.configFromWeb[targetName].columns
-            ) {
-              console.error('无法找到目标插槽的配置！')
-              return
-            }
-
-            // 替换columns，合并data
-            config.columns[i] = []
-            const before = config.columns.slice(0, i)
-            let after = config.columns.slice(i + 1, config.columns.length)
-
-            const addArr = []
-            for (
-              let k = 0;
-              k < this.configFromWeb[targetName].columns.length;
-              k++
-            ) {
-              const temp = []
-              this.configFromWeb[targetName].columns[k].forEach((cell) => {
-                temp.push(cell)
-              })
-              addArr.push(temp)
-            }
-
-            const newArr = []
-            // 拼接之前的数组
-            if (before.length > 0) {
-              if (before.length >= 1) {
-                before.forEach((item) => {
-                  newArr.push(item)
-                })
-              } else {
-                newArr.push(before)
-              }
-            }
-
-            addArr.forEach((arr) => {
-              newArr.push(arr)
-            })
-
-            // 拼接之后的数组
-            if (after.length === 1) {
-              if (after[0].type === 'slot' || after[0][0].type === 'slot') {
-                after = []
-              }
-            }
-            if (after.length > 0) {
-              if (after.length >= 1) {
-                after.forEach((item) => {
-                  newArr.push(item)
-                })
-              } else {
-                newArr.push(after)
-              }
-            }
-
-            config.columns = newArr
-            if (this.configFromWeb[targetName].slotsDeclare) {
-              config.slotsDeclare = this.configFromWeb[targetName].slotsDeclare
-            } else {
-              config.slotsDeclare = []
-            }
-
-            if (
-              config.data.images &&
-              this.configFromWeb[targetName].data.images
-            ) {
-              config.data.images = {
-                ...config.data.images,
-                ...this.configFromWeb[targetName].data.images,
-              }
-              delete this.configFromWeb[targetName].data.images
-            }
-            config.data = {
-              ...config.data,
-              ...this.configFromWeb[targetName].data,
-            }
-          }
-        }
-      }
-      this.config = config
-    },
-    // 扫描所有插槽名
-    scanConfigName (config, resut) {
-      if (config.slotsDeclare) {
-        config.slotsDeclare.forEach((name) => {
-          resut.push(name)
-        })
-      }
-    },
-    // 获取插槽
-    getConfigAndJoin (config, outerLock) {
-      // 检查主配置插槽声明是否合法
-      const check = this.checkSlotDefine(config)
-      const waitForDownloadSlotName = []
-      if (check) {
-        // 扫描主配置中声明的插槽名
-        this.scanConfigName(config, waitForDownloadSlotName)
-
-        const total = waitForDownloadSlotName.length
-        let count = 0
-
-        // 挨个获取插槽
-        waitForDownloadSlotName.forEach((configName) => {
-          getConfigByName(
-            configName,
-            this.serverName,
-            (res) => {
-              this.configFromWeb[configName] = res
-              count++
-            },
-            this.env === 'dev'
-          )
-        })
-
-        // 使用定时器循环判断锁状态，用于多个插槽，要等待统一获取完成之后，再进行下一步初始化
-        const timer = setInterval(() => {
-          console.log('插槽下载进度，当前：' + count + '/' + total)
-          if (count >= total) {
-            clearInterval(timer)
-            this.scanConfigSlot(config)
-            if (config.slotsDeclare.length > 0) {
-              const lock = { status: true }
-              this.getConfigAndJoin(config, lock)
-              const innerTimer = setInterval(() => {
-                if (!lock.status) {
-                  clearInterval(innerTimer)
-                  outerLock.status = false
-                }
-              }, 100)
-            } else {
-              outerLock.status = false
-            }
-          }
-        }, 100)
-      } else {
-        console.error('插槽配置有误！')
-        outerLock.status = false
-      }
-    },
-    // 获取配置之后的初始化
-    configInit () {
-      console.log('拼接完成', this.config)
-      // 将初始化好的配置拷贝一份留存
-      this.originalConfig = Object.assign({}, this.config)
-      if (!this.dontFormat) {
-        // 扫描配置文件中有没有rowSpan，进行格式化调整
-        this.formatConfigRow(this.config)
-      }
-      this.activeConfig = this.config
-      this.showSkeleton = false
-      // 判断是否有动态Index
-      this.activeConfig.columns.forEach((row) => {
-        row.forEach((cell) => {
-          if (cell.dynamicDataIndex === true) {
-            // 如果有动态index，取其函数，运行函数得到真实index保存
-            // eslint-disable-next-line no-eval
-            const func = eval(
-              '(' + cell.customFunctionForDynamicDataIndex + ')'
-            )
-            cell.dataIndex = func(this.config)
-          }
-          // 处理 自定义函数的旧逻辑
-          if (
-            ['action', 'click'].includes(cell.eventType) &&
-            cell.customFunction &&
-            !cell.events
-          ) {
-            cell.events = []
-            cell.events.push({
-              type: cell.eventType,
-              customFunction: cell.customFunction,
-            })
-          }
-        })
-      })
-      // 将数据复制到临时数据中，带有@@@的数据，我们将其整体作为一个key保存，当编辑完成后，再将其解析，回填到需要的数据中
-      this.activeConfig.tempData = {}
-      // 是否有@@@深层引用
-      this.activeConfig.columns.forEach((row) => {
-        row.forEach((cell) => {
-          // 将@@@解析
-          if (
-            cell.dataIndex !== undefined &&
-            cell.dataIndex.indexOf('@@@') !== -1
-          ) {
-            this.activeConfig.tempData[cell.dataIndex] = this.getDeepObject(
-              this.activeConfig.data,
-              cell.dataIndex
-            )
-          }
-        })
-      })
-
-      // 对配置进行转换
-      console.log('转换前配置', this.config)
-      this.originalConfig.columns = this.transformArray(
-        JSON.parse(JSON.stringify(this.config.columns))
-      )
-      console.log('转换后的列描述', this.originalConfig.columns)
-
-      this.$nextTick(() => {
-        this.scanFinish = true
-      })
-    },
-  },
-  beforeMount () {
-    // 如果只是展示
-    if (this.displayOnly) {
-      this.onlyDisplay = true
-      this.type = 'display'
-    }
-    // 如果有本地配置，优先使用本地配置
-    if (this.localConfig) {
-      // 如果配置是普通渲染器
-      this.config = this.localConfig
-      if (this.configData !== undefined) {
-        this.config.data = this.configData
-      }
-      if (this.config.data.images === undefined) {
-        this.config.data.images = {}
-      }
-      this.configInit()
-    } else {
-      // 如果本地配置没有值，则从琉璃中获取
-      getConfigByName(
-        this.configName,
-        this.serverName,
-        (res) => {
-          this.config = JSON.parse(JSON.stringify(res))
-          if (this.configData !== undefined) {
-            this.config.data = this.configData
-          }
-          if (this.config.data.images === undefined) {
-            this.config.data.images = {}
-          }
-          this.configInit()
-        },
-        this.env === 'dev'
-      )
-    }
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
-    widget () {
-      return this.isWidget // 返回isWidget的值
-    },
-  },
-  mounted () {
-    // 如果外界传来了registerMap，我们将本VM对象注册到map中
-    if (this.registerMap !== undefined) {
-      this.registerMap.push(this)
-    }
-    // 将原始数据备份保存
-    if (this.configData) {
-      this.dataCache = JSON.parse(JSON.stringify(this.configData))
-    } else {
-      if (this.config?.data) {
-        this.dataCache = JSON.parse(JSON.stringify(this.config.data))
-      }
-    }
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.tools {
-  text-align: center;
-  cursor: pointer;
-
-  .toolsItem {
-    display: inline-block;
-  }
-}
-</style>
+<template>
+  <div>
+    <!--  骨架屏  -->
+    <a-card v-if="showSkeleton">
+      <a-skeleton active />
+    </a-card>
+    <!--   主体表格   -->
+    <XReportDesign
+      @selectRow="selectRow"
+      @slotRendered="slotRendered"
+      v-if="scanFinish"
+      :display-only="displayOnly"
+      :config="originalConfig"
+      :slot-config-name="undefined"
+      :for-display="true"
+      ref="XReportDesign"
+      :server-name="serverName"
+      :env="env"
+      :show-title="showTitle"
+    >
+    </XReportDesign>
+    <a-row
+      type="flex"
+      justify="end"
+      v-if="showSaveButton"
+    >
+      <a-space>
+        <a-button @click="saveConfig">
+          提交
+        </a-button>
+        <a-button @click="cancelConfig">
+          取消
+        </a-button>
+      </a-space>
+    </a-row>
+    <!-- 弹出框 -->
+    <x-add-report
+      :env="env"
+      ref="xAddReport"
+    />
+    <!-- 弹出框 -->
+    <x-report-drawer
+      :env="env"
+      ref="xReportDrawer"
+    />
+  </div>
+</template>
+
+<script>
+// 转PDF用
+import { mapState } from 'vuex'
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+import XReportDesign from './XReportDesign.vue'
+import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
+
+// import XAddReport from '@vue2-client/base-client/components/common/XAddReport'
+
+export default {
+  name: 'XReport',
+  props: {
+    files: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    // 控制用户权限，user和admin
+    authority: {
+      type: String,
+      default: 'user',
+    },
+    // 是否为编辑模式
+    editMode: {
+      type: Boolean,
+      default: true,
+    },
+    // 配置名
+    configName: {
+      type: String,
+      required: true,
+    },
+    // 插槽名
+    activatedSlotName: {
+      type: String,
+      default: undefined,
+    },
+    // 本地配��，调试用
+    localConfig: {
+      type: Object,
+      default: undefined,
+    },
+    // 兼容老版本配置
+    dontFormat: {
+      type: Boolean,
+      default: true,
+    },
+    showImgInCell: {
+      type: Boolean,
+      default: false,
+    },
+    // 数据
+    configData: {
+      type: Object,
+      default: undefined,
+    },
+    // 命名空间
+    serverName: {
+      type: String,
+      default: process.env.VUE_APP_SYSTEM_NAME,
+    },
+    // 环境
+    env: {
+      type: String,
+      default: 'prod',
+    },
+    // 只做展示
+    displayOnly: {
+      type: Boolean,
+      default: true,
+    },
+    // 表格没有边距
+    noPadding: {
+      type: Boolean,
+      default: true,
+    },
+    // 表格没有上边框，与noPadding搭配可以实现连续表格
+    noTopBorder: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否展示标题
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否展示保存按钮
+    showSaveButton: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否将组件注册到外层提供的容器中，方便外侧统一保存
+    registerMap: {
+      type: Array,
+      default: undefined,
+    },
+    // 是否小插件模式，小插件模式不会有各种边境
+    isWidget: {
+      type: Boolean,
+      default: false,
+    },
+    // 图片是否使用OSS来保存
+    useOssForImg: {
+      type: Boolean,
+      default: true,
+    },
+    // 图片上传后添加前缀
+    imgPrefix: {
+      type: String,
+      default: undefined,
+    },
+  },
+  components: {
+    XAddReport: () =>
+      import('@vue2-client/base-client/components/common/XAddReport'),
+    XReportDrawer: () =>
+      import('@vue2-client/base-client/components/common/XReportDrawer'),
+    XReportDesign,
+  },
+  data () {
+    return {
+      // 控制骨架屏显隐
+      showSkeleton: true,
+      // 配置
+      config: undefined,
+      // 当前显示模式，编辑模式，预览模式
+      type: 'design',
+      // 仅供展示，不可编辑
+      onlyDisplay: false,
+      // 每行最大列数，非必要请勿更改，现在的设计器完全是基于每行12列来设计的
+      maxColSpan: 12,
+      // 定义是否完成配置的扫描，未完成不要渲染子组件
+      scanFinish: false,
+      // 当前激活的配置文件
+      activeConfig: null,
+      // 原始配置文件
+      // 用于展示。某些情况下“设计页”中的内容仅为“预览页”表格其中的一部分
+      originalConfig: null,
+      // 扫描到的配置
+      configFromWeb: {},
+      // 用于获取配置的锁
+      timer: undefined,
+      // 是否包含图片
+      hasImages: false,
+      // 图片列表
+      imageList: [],
+      // 保存最原始的数据，用于判断哪些数据被更改了
+      dataCache: undefined,
+      // 判断哪些数据被更改了，存储对应的key
+      diff: [],
+      globalData: {},
+    }
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+  },
+  watch: {
+    // 如果配置名更改了，重新获取配置
+    configName (val) {
+      if (val) {
+        getConfigByName(
+          this.configName,
+          undefined,
+          (res) => {
+            this.config = res
+            this.configInit()
+          },
+          this.env === 'dev'
+        )
+      }
+    },
+    // 如果本地配置更改了，重新初始化
+    localConfig: {
+      deep: true,
+      immediate: true,
+      handler (val) {
+        if (val) {
+          this.config = val
+          this.configInit()
+        }
+      },
+    },
+  },
+  provide () {
+    return {
+      runLogic: runLogic,
+      openDialog: this.openDialog,
+      openDrawer: this.openDrawer,
+      registerComponent: this.registerComponent,
+      getComponentByName: this.getComponentByName,
+      getParentComponentByName: this.getComponentByName,
+      getConfigByName: getConfigByName,
+      isWidget: this.widget,
+      currUser: this.currUser,
+      getGlobalData: this.getGlobalData,
+      setGlobalData: this.setGlobalData
+    }
+  },
+  methods: {
+    slotRendered () {
+      if (this.config?.mountedFunction) {
+        let func = this.config.mountedFunction
+        if (func && func.startsWith('function')) {
+          func = func.replace('function', 'async function')
+          executeStrFunctionByContext(this, func, [])
+        }
+      }
+    },
+    // 把组件注册到refs中，方便调用
+    registerComponent (componentName, component) {
+      console.log('内部注册', this.$options.name, componentName)
+      this.$refs[componentName] = component
+      console.log('内部注册完成', this.$refs)
+    },
+
+    // 把设计的table布局转换成可显示的珊格布局
+    transformArray (inputList) {
+      let operationIndex = 0
+      let operationList = []
+      const outputList = []
+      for (const lst of inputList) {
+        // 如果列表为空或只有一个元素，则所有元素相等。比较列表中每个元素是否与第一个元素相等
+        if (
+          lst.length >= 1 &&
+          !lst.every(
+            (x) =>
+              Array.isArray(x) ||
+              Array.isArray(lst[0]) ||
+              x.rowSpan === lst[0].rowSpan
+          )
+        ) {
+          operationList = lst
+          break // 使用 break 退出整个循环
+        } else {
+          // 被操作的行
+          operationIndex += 1
+        }
+      }
+
+      let maxMergeRow = 0
+
+      // 没有需要合并的行,直接返回
+      if (operationList.length === 0) {
+        return inputList
+      } else {
+        // 当前行的最大值
+        const maxRow = Math.max(...operationList.map((item) => item.rowSpan))
+        let mergeIndexCol = 0
+        for (let index = 0; index < operationList.length; index++) {
+          const row = operationList[index]
+          let rowSpan = row.rowSpan
+          // 需要合并的行
+          let mergeIndexRow = operationIndex + 1
+          // 存放合并后的行
+          const rows = []
+          // 添加当前行
+          if (rowSpan < maxRow && mergeIndexRow < inputList.length) {
+            rows.push([row])
+          }
+          // 当前需要被操作并且操作行没有超出列表的高度
+          while (rowSpan < maxRow && mergeIndexRow < inputList.length) {
+            rowSpan += inputList[mergeIndexRow][mergeIndexCol].rowSpan
+            // 放一行到合并结果
+            rows.push([inputList[mergeIndexRow][mergeIndexCol]])
+            if (mergeIndexRow > maxMergeRow) {
+              // 记录最多操作到了哪行
+              maxMergeRow = mergeIndexRow
+            }
+            mergeIndexRow++
+          }
+          // operation_list赋值, 没有变化的，不处理
+          if (rows.length !== 0) {
+            operationList[index] = rows
+          }
+          if (row.rowSpan !== maxRow) {
+            mergeIndexCol++ // 操作列转为下一列
+          }
+        }
+      }
+
+      // 组成outputlist, operation_list前部填入
+      let putindex = 0
+      while (operationIndex > 0) {
+        outputList.push(inputList[putindex])
+        putindex++
+        operationIndex -= 1
+      }
+
+      outputList.push(operationList)
+
+      // 组成outputlist, operation_list后部填入
+      while (maxMergeRow < inputList.length - 1) {
+        outputList.push(inputList[maxMergeRow + 1])
+        maxMergeRow += 1
+      }
+
+      return this.transformArray(outputList)
+    },
+    // 根据名字从注册到组件中获取组件
+    getComponentByName (componentName) {
+      console.log('内部取组件', this.$options.name, componentName)
+      console.log('内部组件内容', this.$refs)
+      return this.$refs[componentName]
+    },
+    getGlobalData () {
+      return this.globalData
+    },
+    setGlobalData (obj) {
+      this.globalData = obj
+    },
+    /**
+     * @param configName 栅格配置名称
+     * @param selectedId 选中得id
+     * @param mixinData  需要混入得数据
+     * @param outEnv 其他传递给打开窗口的数据
+     * @param attr 传递给Modal弹框用的信息
+     */
+    openDialog (configName, selectedId, mixinData, outEnv = {}, attr = {}) {
+      console.log('openDialog', configName, selectedId)
+      this.$refs.xAddReport.init({
+        configName: configName,
+        selectedId: selectedId,
+        mixinData: mixinData,
+        outEnv: outEnv,
+        attr,
+      })
+    },
+    openDrawer (configName, selectedId, mixinData, outEnv = {}, attr = {}) {
+      console.log('openDialog', configName, selectedId)
+      this.$refs.xReportDrawer.init({
+        configName,
+        selectedId,
+        mixinData,
+        outEnv,
+        attr,
+      })
+    },
+    // 向外暴露图片修改后的数据，某些外部需要自己管理图片的保存与修改
+    updateImg (data) {
+      this.$emit('updateImg', data)
+    },
+    // 导出数据，某些外部需要统一控制数据的变动
+    exportData () {
+      // 获取当前修改后的数据
+      let tempData
+      if (this.activeConfig === undefined || this.activeConfig === null) {
+        tempData = this.originalConfig.data
+      } else {
+        const tempDataKeys = Object.keys(this.activeConfig.tempData)
+        tempDataKeys.forEach((key) => {
+          this.changeDeepObject(
+            this.activeConfig.data,
+            key,
+            this.activeConfig.tempData[key]
+          )
+        })
+        tempData = this.activeConfig.data
+      }
+      // 对比数据的差异
+      this.diff = []
+      this.compareProps(tempData, this.dataCache)
+      this.diff.forEach((eachDiff) => {
+        const arr = eachDiff.split('.')
+        let targetData = tempData[arr[0]]
+        if (arr.length !== 1) {
+          for (let i = 1; i < arr.length - 1; i++) {
+            const path = arr[i]
+            targetData = targetData[path]
+          }
+        }
+        // 将修改的数���，添加update = true属性
+        targetData.update = true
+      })
+      return tempData
+    },
+    // 对比两个obj有哪里不同
+    compareProps (obj1, obj2, path = '') {
+      for (const key in obj1) {
+        // 如果一个是undefined
+        if (typeof obj2[key] === 'undefined') {
+          this.diff.push(path + key)
+          // 如果是数组长度不一样
+        } else if (Array.isArray(obj1) && Array.isArray(obj2)) {
+          if (obj1[key].length !== obj2[key].length) {
+            this.diff.push(path + key)
+          }
+          // 如果都是对象，并且存在同样的key，递归子key
+        } else if (
+          typeof obj1[key] === 'object' &&
+          typeof obj2[key] === 'object'
+        ) {
+          this.compareProps(obj1[key], obj2[key], path + key + '.')
+          // 如果不是obj，对比其数据
+        } else if (obj1[key] !== obj2[key]) {
+          this.diff.push(path + key)
+        }
+      }
+    },
+    selectRow (selectedRowKeys, selectedRows) {
+      this.table_selectedRowKeys = selectedRowKeys
+      this.table_selectedRows = selectedRows
+      console.log('')
+      this.$emit('selectRow', selectedRowKeys, selectedRows)
+    },
+    // 注册组件到$refs中
+    registerComponentToRefs (componentName, component) {
+      this.$refs[componentName] = component
+    },
+
+    // 提交处理，调用配置中的函数
+    saveConfig () {
+      const funcStr = this.config.confirmFunction
+      executeStrFunctionByContext(this, funcStr, [this])
+    },
+
+    // 取消处理
+    cancelConfig () {
+      this.$emit('cancel')
+    },
+
+    // 通过@@@分割临时变量，找到对应的key，并修改它的值
+    changeDeepObject (obj, strPath, newVal) {
+      const arr = strPath.split('@@@')
+      if (obj[arr[0]] === undefined) {
+        obj = obj.images
+      }
+      if (arr.length === 1) {
+        obj[arr[0]] = newVal
+      } else {
+        let result = obj[arr[0]]
+        arr.shift()
+        while (arr.length > 1) {
+          result = result[arr[0]]
+          arr.shift()
+        }
+        if (result) {
+          result[arr[0]] = newVal
+        }
+      }
+    },
+    // 检查slot是否在配置文件中包含，如果没有包含，则视为非法获取
+    checkSlotDefine (config) {
+      const slotsDeclare = config.slotsDeclare
+      const total = slotsDeclare.length
+      let count = 0
+      slotsDeclare.forEach((declare) => {
+        config.columns.forEach((row) => {
+          row.forEach((cell) => {
+            if (cell.slotConfig === declare) {
+              count++
+            }
+          })
+        })
+      })
+
+      return count === total
+    },
+    // 用于分割配置中的colums，将需要处理的数组提取出来
+    formatConfigRow () {
+      for (let i = 0; i < this.config.columns.length; i++) {
+        // 对原始数组进行递归，依次将该位置拆分为三个部分，当前处理位置之前的，当前处理位置，当前处理位置之后的
+        const before = this.config.columns.slice(0, i)
+        const after = this.config.columns.slice(
+          i + 1,
+          this.config.columns.length
+        )
+
+        // 将当前处理的数组交给处理的方法
+        const x = this.checkRow(this.config.columns[i])
+
+        const newArr = []
+
+        // 拼接之前的数组
+        if (before.length > 0) {
+          if (before.length >= 1) {
+            before.forEach((item) => {
+              newArr.push(item)
+            })
+          } else {
+            newArr.push(before)
+          }
+        }
+
+        // 拼接不需要更改当前节点处理完成的数组
+        newArr.push(x.old)
+
+        // 如果处理了新加的数据，拼接
+        if (x.add.length > 0) {
+          for (let j = 0; j < x.add.length; j++) {
+            if (x.add[j]) {
+              newArr.push(x.add[j])
+              i++
+            }
+          }
+        }
+
+        // 拼接之后的数组
+        if (after.length > 0) {
+          if (after.length >= 1) {
+            after.forEach((item) => {
+              newArr.push(item)
+            })
+          } else {
+            newArr.push(after)
+          }
+        }
+
+        this.config.columns = newArr
+      }
+    },
+    // 路径中含有@@@的key，将其解析，并返回其数据
+    getDeepObject (obj, strPath) {
+      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
+    },
+    // 处理colums数组，为声明了rowspan的单元格，自动匹配格式
+    checkRow (rowArr) {
+      // 不需要更改的数据
+      const original = []
+      // 需要更改新加的数据
+      const addArr = []
+      // 统计rowspan出现的总和
+      let count = 0
+      // 统计声明列需要的rowspan总数
+      let total = 0
+      // 是否为声明行
+      let titleCellFlag = false
+      // 是否为声明行后第一行
+      let firstSubLine = false
+      // 需要处理的行，新的index值
+      let subRowIndex = 0
+      // 新生成的行，临时存储
+      const waitForAddArr = []
+      // 用于记录声明行的colspan避免格式错误
+      let preColSpan = 0
+      // 用于统计循环次数，判断是否是最后一次
+      let forEachCount = 0
+
+      // 标记所有数据
+      rowArr.forEach((cell) => {
+        forEachCount++
+        // 如果该行没有rowspan则默认其为1，不要影响统计结果
+        if (!cell.rowSpan) {
+          cell.rowSpan = 0
+        }
+
+        if (cell.text && total !== 0) {
+          // 如果遇到了下一个声明行，证明rowspan少了一行，需要补充一个占位格
+          const nullObj = {
+            type: 'placeHolderColumn',
+            order: subRowIndex,
+            noBoarder: true,
+            needSplit: true,
+            colSpan: preColSpan,
+            dontShowRow: true,
+          }
+          subRowIndex++
+          waitForAddArr.push(nullObj)
+          total = 0
+          count = 0
+          titleCellFlag = false
+          firstSubLine = false
+        } else if (
+          total !== count + cell.rowSpan &&
+          forEachCount === rowArr.length
+        ) {
+          // 如果没有遇到了下一个声明行，但已经是当前行最后一个数据，也证明rowspan少了一行，需要补充一个占位格
+          const nullObj = {
+            type: 'placeHolderColumn',
+            order: subRowIndex,
+            noBoarder: true,
+            needSplit: true,
+            colSpan: preColSpan,
+            dontShowRow: true,
+          }
+          subRowIndex++
+          waitForAddArr.push(nullObj)
+          total = 0
+          count = 0
+          titleCellFlag = false
+          firstSubLine = false
+        }
+
+        // 判断是否为声明行
+        if (cell.text && total === 0) {
+          // 将声明行声明的rowspan作为总数，判断下方rowspan相加是否等于声明行声明的数量
+          total = cell.rowSpan
+          titleCellFlag = false
+          firstSubLine = true
+          subRowIndex = 1
+          cell.show = true
+          cell.showRowSpan = total
+        } else if (cell.rowSpan > 0 && !titleCellFlag && firstSubLine) {
+          // 判断是否为声明行后首行，因为首行不需要移动
+          count += cell.rowSpan
+          firstSubLine = false
+          cell.noBoarder = true
+          cell.show = true
+          cell.showRowSpan = total
+        } else if (cell.rowSpan > 0 && !titleCellFlag && !firstSubLine) {
+          // 既非声明行，也非首行，需要移动
+          count += cell.rowSpan
+          // cell.type = 'notShow'
+          cell.needSplit = true
+          cell.order = subRowIndex
+          cell.dontShowRow = true
+          subRowIndex++
+
+          // 如果之前添加过空行补充位置，刚好最后一位还有内容，将其互换
+          if (
+            forEachCount === rowArr.length &&
+            !waitForAddArr[waitForAddArr.length - 1].dataIndex
+          ) {
+            waitForAddArr[waitForAddArr.length - 1].order += 1
+            cell.order -= 1
+            waitForAddArr.push(cell)
+          } else {
+            waitForAddArr.push(cell)
+          }
+        }
+
+        // 如果count和total相等了，证明已经处理完成。将计数器还原
+        if (count === total) {
+          total = 0
+          count = 0
+          titleCellFlag = false
+          firstSubLine = false
+        }
+        // 保存上一个的colspan���保持生成的格子与原格式一致
+        preColSpan = cell.colSpan
+      })
+
+      // 将所有不需要移动的放入original
+      rowArr.forEach((cell) => {
+        if (cell.needSplit !== true) {
+          original.push(cell)
+        }
+      })
+
+      // 增加新的数组
+      waitForAddArr.forEach((cell) => {
+        const target = cell.order
+        // if (cell.type === 'notShow') {
+        //   cell.type = 'inputs'
+        // }
+        cell.noBoarder = true
+        if (addArr[target] === undefined) {
+          const temp = []
+          temp.push(cell)
+          addArr[target] = temp
+        } else if (addArr[target].length > 0) {
+          addArr[target].push(cell)
+        }
+      })
+
+      // 如果没有新增，将单元格边框设置为显示
+      if (addArr.length < 1) {
+        original.forEach((cell) => {
+          if (cell.type === 'input' || cell.type === 'inputs') {
+            cell.noBoarder = false
+          }
+        })
+      }
+
+      return {
+        old: original,
+        add: addArr,
+      }
+    },
+    // 扫描配置，如果有插槽则拼接插槽
+    scanConfigSlot (config) {
+      const columnsArr = config.columns
+      for (let i = 0; i < columnsArr.length; i++) {
+        for (let j = 0; j < columnsArr[i].length; j++) {
+          // 如果发现type为slot，开始匹配对应的slot配置文件
+          if (columnsArr[i][j].type === 'slot') {
+            const targetName = columnsArr[i][j].slotConfig
+            // 找不到目标插槽配置
+            if (
+              !this.configFromWeb[targetName] ||
+              !this.configFromWeb[targetName].columns
+            ) {
+              console.error('无法找到目标插槽的配置！')
+              return
+            }
+
+            // 替换columns，合并data
+            config.columns[i] = []
+            const before = config.columns.slice(0, i)
+            let after = config.columns.slice(i + 1, config.columns.length)
+
+            const addArr = []
+            for (
+              let k = 0;
+              k < this.configFromWeb[targetName].columns.length;
+              k++
+            ) {
+              const temp = []
+              this.configFromWeb[targetName].columns[k].forEach((cell) => {
+                temp.push(cell)
+              })
+              addArr.push(temp)
+            }
+
+            const newArr = []
+            // 拼接之前的数组
+            if (before.length > 0) {
+              if (before.length >= 1) {
+                before.forEach((item) => {
+                  newArr.push(item)
+                })
+              } else {
+                newArr.push(before)
+              }
+            }
+
+            addArr.forEach((arr) => {
+              newArr.push(arr)
+            })
+
+            // 拼接之后的数组
+            if (after.length === 1) {
+              if (after[0].type === 'slot' || after[0][0].type === 'slot') {
+                after = []
+              }
+            }
+            if (after.length > 0) {
+              if (after.length >= 1) {
+                after.forEach((item) => {
+                  newArr.push(item)
+                })
+              } else {
+                newArr.push(after)
+              }
+            }
+
+            config.columns = newArr
+            if (this.configFromWeb[targetName].slotsDeclare) {
+              config.slotsDeclare = this.configFromWeb[targetName].slotsDeclare
+            } else {
+              config.slotsDeclare = []
+            }
+
+            if (
+              config.data.images &&
+              this.configFromWeb[targetName].data.images
+            ) {
+              config.data.images = {
+                ...config.data.images,
+                ...this.configFromWeb[targetName].data.images,
+              }
+              delete this.configFromWeb[targetName].data.images
+            }
+            config.data = {
+              ...config.data,
+              ...this.configFromWeb[targetName].data,
+            }
+          }
+        }
+      }
+      this.config = config
+    },
+    // 扫描所有插槽名
+    scanConfigName (config, resut) {
+      if (config.slotsDeclare) {
+        config.slotsDeclare.forEach((name) => {
+          resut.push(name)
+        })
+      }
+    },
+    // 获取插槽
+    getConfigAndJoin (config, outerLock) {
+      // 检查主配置插槽声明是否合法
+      const check = this.checkSlotDefine(config)
+      const waitForDownloadSlotName = []
+      if (check) {
+        // 扫描主配置中声明的插槽名
+        this.scanConfigName(config, waitForDownloadSlotName)
+
+        const total = waitForDownloadSlotName.length
+        let count = 0
+
+        // 挨个获取插槽
+        waitForDownloadSlotName.forEach((configName) => {
+          getConfigByName(
+            configName,
+            this.serverName,
+            (res) => {
+              this.configFromWeb[configName] = res
+              count++
+            },
+            this.env === 'dev'
+          )
+        })
+
+        // 使用定时器循环判断锁状态，用于多个插槽，要等待统一获取完成之后，再进行下一步初始化
+        const timer = setInterval(() => {
+          console.log('插槽下载进度，当前：' + count + '/' + total)
+          if (count >= total) {
+            clearInterval(timer)
+            this.scanConfigSlot(config)
+            if (config.slotsDeclare.length > 0) {
+              const lock = { status: true }
+              this.getConfigAndJoin(config, lock)
+              const innerTimer = setInterval(() => {
+                if (!lock.status) {
+                  clearInterval(innerTimer)
+                  outerLock.status = false
+                }
+              }, 100)
+            } else {
+              outerLock.status = false
+            }
+          }
+        }, 100)
+      } else {
+        console.error('插槽配置有误！')
+        outerLock.status = false
+      }
+    },
+    // 获取配置之后的初始化
+    configInit () {
+      console.log('拼接完成', this.config)
+      // 将初始化好的配置拷贝一份留存
+      this.originalConfig = Object.assign({}, this.config)
+      if (!this.dontFormat) {
+        // 扫描配置文件中有没有rowSpan，进行格式化调整
+        this.formatConfigRow(this.config)
+      }
+      this.activeConfig = this.config
+      this.showSkeleton = false
+      // 判断是否有动态Index
+      this.activeConfig.columns.forEach((row) => {
+        row.forEach((cell) => {
+          if (cell.dynamicDataIndex === true) {
+            // 如果有动态index，取其函数，运行函数得到真实index保存
+            // eslint-disable-next-line no-eval
+            const func = eval(
+              '(' + cell.customFunctionForDynamicDataIndex + ')'
+            )
+            cell.dataIndex = func(this.config)
+          }
+          // 处理 自定义函数的旧逻辑
+          if (
+            ['action', 'click'].includes(cell.eventType) &&
+            cell.customFunction &&
+            !cell.events
+          ) {
+            cell.events = []
+            cell.events.push({
+              type: cell.eventType,
+              customFunction: cell.customFunction,
+            })
+          }
+        })
+      })
+      // 将数据复制到临时数据中，带有@@@的数据，我们将其整体作为一个key保存，当编辑完成后，再将其解析，回填到需要的数据中
+      this.activeConfig.tempData = {}
+      // 是否有@@@深层引用
+      this.activeConfig.columns.forEach((row) => {
+        row.forEach((cell) => {
+          // 将@@@解析
+          if (
+            cell.dataIndex !== undefined &&
+            cell.dataIndex.indexOf('@@@') !== -1
+          ) {
+            this.activeConfig.tempData[cell.dataIndex] = this.getDeepObject(
+              this.activeConfig.data,
+              cell.dataIndex
+            )
+          }
+        })
+      })
+
+      // 对配置进行转换
+      console.log('转换前配置', this.config)
+      this.originalConfig.columns = this.transformArray(
+        JSON.parse(JSON.stringify(this.config.columns))
+      )
+      console.log('转换后的列描述', this.originalConfig.columns)
+
+      this.$nextTick(() => {
+        this.scanFinish = true
+      })
+    },
+  },
+  beforeMount () {
+    // 如果只是展示
+    if (this.displayOnly) {
+      this.onlyDisplay = true
+      this.type = 'display'
+    }
+    // 如果有本地配置，优先使用本地配置
+    if (this.localConfig) {
+      // 如果配置是普通渲染器
+      this.config = this.localConfig
+      if (this.configData !== undefined) {
+        this.config.data = this.configData
+      }
+      if (this.config.data.images === undefined) {
+        this.config.data.images = {}
+      }
+      this.configInit()
+    } else {
+      // 如果本地配置没有值，则从琉璃中获取
+      getConfigByName(
+        this.configName,
+        this.serverName,
+        (res) => {
+          this.config = JSON.parse(JSON.stringify(res))
+          if (this.configData !== undefined) {
+            this.config.data = this.configData
+          }
+          if (this.config.data.images === undefined) {
+            this.config.data.images = {}
+          }
+          this.configInit()
+        },
+        this.env === 'dev'
+      )
+    }
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    widget () {
+      return this.isWidget // 返回isWidget的值
+    },
+  },
+  mounted () {
+    // 如果外界传来了registerMap，我们将本VM对象注册到map中
+    if (this.registerMap !== undefined) {
+      this.registerMap.push(this)
+    }
+    // 将原始数据备份保存
+    if (this.configData) {
+      this.dataCache = JSON.parse(JSON.stringify(this.configData))
+    } else {
+      if (this.config?.data) {
+        this.dataCache = JSON.parse(JSON.stringify(this.config.data))
+      }
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.tools {
+  text-align: center;
+  cursor: pointer;
+
+  .toolsItem {
+    display: inline-block;
+  }
+}
+</style>