af-mobile-client-vue3 1.1.6 → 1.1.7

package/src/components/data/XReportForm/index.vue

@@ -1,1079 +1,1079 @@
-<script setup lang="ts">
-import Uploader from '@af-mobile-client-vue3/components/core/Uploader/index.vue'
-import XReportFormJsonRender from '@af-mobile-client-vue3/components/data/XReportForm/XReportFormJsonRender.vue'
-import XSignature from '@af-mobile-client-vue3/components/data/XSignature/index.vue'
-import { getConfigByNameWithoutIndexedDB } from '@af-mobile-client-vue3/services/api/common'
-import {
-  Button as vanButton,
-  Cell as vanCell,
-  CellGroup as vanCellGroup,
-  Collapse as vanCollapse,
-  CollapseItem as vanCollapseItem,
-  Field as vanField,
-  Form as vanForm,
-  NavBar as vanNavBar,
-  Skeleton as vanSkeleton,
-} from 'vant'
-import { defineEmits, nextTick, reactive, ref, watch } from 'vue'
-
-// -------------------------  类型定义  -------------------------
-interface configDefine {
-  data?: any
-  designMode?: string
-  title?: string | undefined
-  subTitle?: Array<cell> | undefined
-  columns?: Array<any>
-  slotsDeclare?: Array<string> | undefined
-  tempData?: any
-}
-
-interface getConfigLock {
-  status: boolean
-}
-
-interface cell {
-  type: string
-  dataIndex: string
-  format: string | undefined
-}
-
-// -------------------------  数据  -------------------------
-const props = defineProps({
-  // 配置名
-  configName: String,
-  // 是否将动态行的label显示在标题上
-  showInputColumnsLabelOnTitle: { default: false },
-  slotName: String,
-  showNav: { default: true },
-  localConfig: { default: undefined },
-  configData: { default: undefined },
-})
-const emit = defineEmits(['saveConfig'])
-// 原始配置
-const activatedConfig: configDefine = reactive({})
-// 激活的配置名
-const activatedConfigName = ref('')
-// 下载的配置
-const configFromWeb = reactive({})
-// 定时器
-let timer: NodeJS.Timeout
-// 控制组件渲染
-const scanFinish = ref(false)
-// 折叠面板当前激活的值
-const activeCollapseName = ref('副标题')
-
-watch(() => props.configName, () => {
-  // 这里是你的处理逻辑
-  initComponent()
-})
-
-// -------------------------  方法  -------------------------
-// 为inputs类型的数据，整理格式，供form展示用
-function formatInputs(cell: cell): string[] {
-  const format = cell.format
-  const arr = format.split('{}')
-  const result = []
-  const reg = /[\u4E00-\u9FA5a-z]/gi
-  arr.forEach((str) => {
-    if (str.length >= 1 && str.match(reg)) {
-      const strs = str.match(reg)
-      result.push(strs.join(''))
-    }
-  })
-  if (!activatedConfig.data[cell.dataIndex][result.length - 1]) {
-    let dataKeySet = Object.keys(activatedConfig.data)
-    dataKeySet = dataKeySet.filter((key) => {
-      return key.startsWith(cell.dataIndex)
-    })
-    dataKeySet.sort()
-    const target = dataKeySet[0]
-    dataKeySet.shift()
-    dataKeySet.forEach((key) => {
-      activatedConfig.data[key].forEach((item) => {
-        activatedConfig.data[target].push(item)
-      })
-    })
-
-    for (let i = 0; i < result.length; i++) {
-      if (!activatedConfig.data[cell.dataIndex][i])
-        activatedConfig.data[cell.dataIndex][i] = undefined
-    }
-  }
-  return result
-}
-
-// 左上角返回按钮
-function onClickLeft(): void {
-  history.back()
-}
-
-// 提交按钮
-function onSubmit(): void {
-  if (activatedConfig.tempData) {
-    const keys = Object.keys(activatedConfig.tempData)
-    keys.forEach((key) => {
-      changeDeepObject(activatedConfig.data, key, activatedConfig.tempData[key])
-    })
-  }
-  console.warn('保存', activatedConfig)
-  emit('saveConfig', activatedConfig)
-}
-
-// // 动态行新增
-// function addInputColumns(dataIndex: string, define: Array<any>): void {
-//   const temp = {}
-//   define.forEach((def) => {
-//     let begin = def.initialValue
-//     if (def.type === 'increment') {
-//       if (activatedConfig.data[dataIndex].length > 0) {
-//         begin = activatedConfig.data[dataIndex][activatedConfig.data[dataIndex].length - 1][def.dataIndex]
-//         begin = Number.parseInt(begin)
-//       }
-//       temp[def.dataIndex] = begin + def.step
-//     }
-//     else {
-//       temp[def.dataIndex] = ''
-//     }
-//   })
-//   activatedConfig.data[dataIndex].push(temp)
-// }
-//
-// // 动态行删除
-// function removeInputColumns(dataIndex: string) {
-//   activatedConfig.data[dataIndex].pop()
-// }
-
-// 扫描所有插槽名
-function scanConfigName(config: configDefine, resut: Array<string>): void {
-  if (config.slotsDeclare) {
-    config.slotsDeclare.forEach((name) => {
-      resut.push(name)
-    })
-  }
-}
-
-// 检查slot是否在配置文件中包含，如果没有包含，则视为非法获取
-function checkSlotDefine(config: configDefine): boolean {
-  const slotsDeclare = config.slotsDeclare
-  const total = slotsDeclare.length
-  let count = 0
-  slotsDeclare.forEach((declare) => {
-    config.columns.forEach((row: Array<any>) => {
-      row.forEach((cell) => {
-        if (cell.slotConfig === declare)
-          count++
-      })
-    })
-  })
-
-  return count === total
-}
-
-// 扫描配置，如果有插槽则拼接插槽
-function scanConfigSlot(config: configDefine): void {
-  const columnsArr: Array<any> = 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 (!configFromWeb[targetName] || !configFromWeb[targetName].columns)
-          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 = []
-
-        if (configFromWeb[targetName].cardMode === true) {
-          const temp = [{
-            type: 'card',
-            content: [],
-            label: configFromWeb[targetName].title,
-          }]
-          for (let k = 0; k < configFromWeb[targetName].columns.length; k++) {
-            configFromWeb[targetName].columns[k].forEach((cell) => {
-              temp[0].content.push(cell)
-            })
-          }
-          addArr.push(temp)
-        }
-        else {
-          for (let k = 0; k < configFromWeb[targetName].columns.length; k++) {
-            const temp = []
-            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 (configFromWeb[targetName].slotsDeclare)
-          config.slotsDeclare = configFromWeb[targetName].slotsDeclare
-
-        else
-          config.slotsDeclare = []
-
-        if (config.data.images && configFromWeb[targetName].data.images) {
-          config.data.images = { ...config.data.images, ...configFromWeb[targetName].data.images }
-          delete configFromWeb[targetName].data.images
-        }
-        config.data = { ...config.data, ...configFromWeb[targetName].data }
-      }
-    }
-  }
-  Object.assign(activatedConfig, config)
-}
-
-// 获取并拼装插槽
-function getConfigAndJoin(config: configDefine, outerLock: getConfigLock): void {
-  // 检查主配置插槽声明是否合法
-  const check = checkSlotDefine(config)
-  const waitForDownloadSlotName = []
-  if (check) {
-    // 扫描主配置中声明的插槽名
-    scanConfigName(config, waitForDownloadSlotName)
-
-    const total = waitForDownloadSlotName.length
-    let count = 0
-
-    // 挨个获取插槽
-    waitForDownloadSlotName.forEach((configName) => {
-      getConfigByNameWithoutIndexedDB(configName).then((res) => {
-        configFromWeb[configName] = res
-        count++
-      })
-    })
-
-    const timer = setInterval(() => {
-      if (count >= total) {
-        clearInterval(timer)
-        scanConfigSlot(config)
-        if (config.slotsDeclare.length > 0) {
-          const lock: getConfigLock = { status: true }
-          getConfigAndJoin(config, lock)
-          const innerTimer = setInterval(() => {
-            if (!lock.status) {
-              clearInterval(innerTimer)
-              outerLock.status = false
-            }
-          }, 100)
-        }
-        else {
-          outerLock.status = false
-        }
-      }
-    }, 100)
-  }
-  else {
-    outerLock.status = false
-  }
-}
-
-function deserializeFunctionAndRun(functionStr, value) {
-  // eslint-disable-next-line no-eval
-  const fun = eval(`(${functionStr})`)
-  return fun(value, activatedConfig)
-}
-
-function deserializeFunctionAndRunWithConfig(functionStr) {
-  // eslint-disable-next-line no-eval
-  const fun = eval(`(${functionStr})`)
-  return fun(activatedConfig)
-}
-
-// 将table配置的表格转换为适合Form展示的格式
-function formatConfigToForm(config: configDefine): void {
-  const formColumns: Array<object> = []
-  const labels: Array<string> = []
-  for (let i = 0; i < config.columns.length; i++) {
-    let tempObj: {
-      customFunction?: any
-      inputColumns?: boolean
-      dataIndex: string
-      label: string
-      listType?: string
-      listLength?: number
-      valueText?: string
-      type: string | undefined
-      format?: string
-      definition?: Array<any>
-      editable?: boolean
-      inputReadOnly?: boolean
-      content?: Array<any>
-      text?: string
-    } = {
-      label: '',
-      type: undefined,
-      dataIndex: '',
-    }
-
-    const row: Array<any> = config.columns[i]
-    let listArr = []
-    for (let j = 0; j < row.length; j++) {
-      switch (row[j].type) {
-        case 'column' :
-          if (row[j].customFunctionForDynamicDataIndex)
-            row[j].dataIndex = deserializeFunctionAndRunWithConfig(row[j].customFunctionForDynamicDataIndex)
-          if (j === row.length - 1) {
-            if (row[j].customFunction) {
-              tempObj.customFunction = row[j].customFunction
-              tempObj.label = deserializeFunctionAndRun(row[j].customFunction, row[j].dataIndex)
-            }
-            else {
-              labels.push(tempObj.label)
-              labels.push(row[j].text)
-              tempObj = {
-                label: '',
-                type: undefined,
-                dataIndex: '',
-              }
-            }
-          }
-          else if (tempObj.label && tempObj.dataIndex) {
-            formColumns.push(tempObj)
-            tempObj = {
-              label: '',
-              type: undefined,
-              dataIndex: '',
-            }
-          }
-          else if (tempObj.customFunction) {
-            formColumns.push(tempObj)
-            tempObj = {
-              label: '',
-              type: undefined,
-              dataIndex: '',
-            }
-          }
-          else if (tempObj.label && !tempObj.dataIndex) {
-            labels.push(tempObj.label)
-            tempObj = {
-              label: '',
-              type: undefined,
-              dataIndex: '',
-            }
-          }
-          if (row[j].customFunction) {
-            tempObj.customFunction = row[j].customFunction
-            tempObj.label = deserializeFunctionAndRun(row[j].customFunction, row[j].dataIndex)
-          }
-          else {
-            tempObj.label = row[j].text
-          }
-          break
-        case 'value' :
-          tempObj.valueText = row[j].value
-          tempObj.editable = false
-          tempObj.type = 'showValue'
-          break
-        case 'input' :
-          if (row[j].customFunctionForDynamicDataIndex)
-            row[j].dataIndex = deserializeFunctionAndRunWithConfig(row[j].customFunctionForDynamicDataIndex)
-          tempObj.dataIndex = row[j].dataIndex
-          tempObj.type = 'input'
-          if (row[j].inputReadOnly)
-            tempObj.inputReadOnly = true
-          break
-        case 'curDateInput' :
-          tempObj.dataIndex = row[j].dataIndex
-          tempObj.text = row[j].text
-          tempObj.type = 'curDateInput'
-          break
-        case 'signature' :
-          tempObj.dataIndex = row[j].dataIndex
-          tempObj.text = row[j].text
-          tempObj.type = 'signature'
-          break
-        case 'inputs' :
-          if (!tempObj.format)
-            tempObj.format = ''
-          if (!tempObj.dataIndex)
-            tempObj.dataIndex = row[j].dataIndex
-          tempObj.format += row[j].format
-          tempObj.type = 'inputs'
-          if (row[j].inputReadOnly)
-            tempObj.inputReadOnly = true
-          break
-        case 'images' :
-          tempObj.dataIndex = row[j].dataIndex
-          tempObj.type = 'images'
-          break
-        case 'inputColumns' :
-          tempObj.label = ''
-          tempObj.dataIndex = row[j].dataIndex
-          tempObj.definition = row[j].definition
-          if (labels.length > 0) {
-            for (let k = 0; k < tempObj.definition.length; k++) {
-              if (labels[k].length > 1) {
-                tempObj.definition[k].label = labels[k]
-                if (props.showInputColumnsLabelOnTitle) { // 动态行label展示在标题
-                  if (k === tempObj.definition.length - 1)
-                    tempObj.label = `${tempObj.label} ${labels[k].replace(/\s*/g, '')}`
-                  else
-                    tempObj.label = `${tempObj.label} ${labels[k].replace(/\s*/g, '')} :`
-                }
-                else { // 动态行仅展示为’动态行‘
-                  tempObj.label = '动态行'
-                }
-              }
-              else {
-                tempObj.definition[k].label = ''
-              }
-            }
-          }
-          tempObj.type = 'inputColumns'
-          break
-        case 'list' :
-          tempObj.valueText = row[j].listHead
-          tempObj.type = 'list'
-          tempObj.listType = row[j].listType
-          tempObj.dataIndex = row[j].dataIndex
-          if (row[j].content)
-            tempObj.content = row[j].content
-          tempObj.listLength = row[j].listLength
-          listArr.push(tempObj)
-          tempObj = {
-            label: '',
-            type: undefined,
-            dataIndex: '',
-          }
-      }
-    }
-    if (listArr.length > 0)
-      formColumns.push({ type: 'list', content: listArr })
-    else if (tempObj.type || tempObj.label)
-      formColumns.push(tempObj)
-    listArr = []
-    tempObj = {
-      label: '',
-      type: undefined,
-      dataIndex: '',
-    }
-  }
-  activatedConfig.columns = formColumns
-}
-
-// 获取子组件更新的file列表
-function updateFile(files, index) {
-  files.forEach((file) => {
-    if (file.content)
-      delete file.content
-    if (file.file)
-      delete file.file
-    if (file.objectUrl)
-      delete file.objectUrl
-  })
-  if (index.includes('@@@'))
-    changeDeepObjectDeepCopy(activatedConfig.data.images, index, files)
-  else
-    activatedConfig.data.images[index] = files
-}
-
-// function handleInputDeepChange(event, dataIndex) {
-//   this.$forceUpdate()
-// }
-function 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 {
-    result = undefined
-  }
-  return result
-}
-
-function changeDeepObject(obj, strPath, newVal) {
-  const arr = strPath.split('@@@')
-  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()
-    }
-    result[arr[0]] = newVal
-  }
-}
-
-function changeDeepObjectDeepCopy(obj, strPath, newVal) {
-  const arr = strPath.split('@@@')
-  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()
-    }
-    Object.assign(result[arr[0]], newVal)
-  }
-}
-
-// -------------------------  初始化  -------------------------
-initComponent()
-
-function initComponent() {
-  if (props.localConfig !== undefined && Object.keys(props.localConfig).length > 0) {
-    Object.assign(activatedConfig, props.localConfig)
-
-    if (activatedConfig.designMode === 'json') {
-      activatedConfig.data = {}
-      Object.assign(activatedConfig.data, props.configData)
-      nextTick(() => {
-        scanFinish.value = true
-      })
-      return
-    }
-    else {
-      const lock = { status: true }
-      if (activatedConfig.slotsDeclare) {
-        getConfigAndJoin(activatedConfig, lock)
-        timer = setInterval(() => {
-          if (!lock.status) {
-            clearInterval(timer)
-            // 将配置文件格式更改为更利于Form的组织形式
-            formatConfigToForm(activatedConfig)
-            nextTick(() => {
-              scanFinish.value = true
-            })
-          }
-        }, 100)
-      }
-      else {
-        formatConfigToForm(activatedConfig)
-        nextTick(() => {
-          scanFinish.value = true
-        })
-      }
-      if (props.configData !== undefined)
-        Object.assign(activatedConfig.data, props.configData)
-
-      activatedConfig.columns.forEach((row) => {
-        row.forEach((item) => {
-          if (item.dataIndex && item.dataIndex.includes('@@@')) {
-            if (!activatedConfig.tempData) {
-              activatedConfig.tempData = {}
-              activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data, item.dataIndex)
-              if (item.type === 'images')
-                activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data.images, item.dataIndex)
-            }
-            else {
-              activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data, item.dataIndex)
-              if (item.type === 'images')
-                activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data.images, item.dataIndex)
-            }
-          }
-        })
-      })
-      console.warn('初始化完成，配置：', activatedConfig)
-    }
-  }
-
-  if (props.slotName)
-    activatedConfigName.value = props.slotName
-
-  else
-    activatedConfigName.value = props.configName
-
-  getConfigByNameWithoutIndexedDB(activatedConfigName.value).then((result) => {
-    Object.assign(activatedConfig, result)
-    if (activatedConfig.designMode === 'json') {
-      if (props.configData === undefined) {
-        console.error('无法找到json配置的数据')
-      }
-      else {
-        activatedConfig.data = {}
-        Object.assign(activatedConfig.data, props.configData)
-        nextTick(() => {
-          scanFinish.value = true
-        })
-      }
-    }
-    else {
-      const lock = { status: true }
-      if (activatedConfig.slotsDeclare) {
-        getConfigAndJoin(activatedConfig, lock)
-        timer = setInterval(() => {
-          if (!lock.status) {
-            clearInterval(timer)
-            // 将配置文件格式更改为更利于Form的组织形式
-            formatConfigToForm(activatedConfig)
-            nextTick(() => {
-              scanFinish.value = true
-            })
-          }
-        }, 100)
-      }
-      else {
-        formatConfigToForm(activatedConfig)
-        nextTick(() => {
-          scanFinish.value = true
-        })
-      }
-      if (props.configData !== undefined)
-        Object.assign(activatedConfig.data, props.configData)
-    }
-
-    activatedConfig.columns.forEach((row) => {
-      row.forEach((item) => {
-        if (item.dataIndex && item.dataIndex.includes('@@@')) {
-          if (!activatedConfig.tempData) {
-            activatedConfig.tempData = {}
-            activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data, item.dataIndex)
-            if (item.type === 'images')
-              activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data.images, item.dataIndex)
-          }
-          else {
-            activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data, item.dataIndex)
-            if (item.type === 'images')
-              activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data.images, item.dataIndex)
-          }
-        }
-      })
-    })
-  }).catch((e) => {
-    console.error(e)
-  })
-}
-function getNow() {
-  const date = new Date()
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  const hours = String(date.getHours()).padStart(2, '0')
-  const minutes = String(date.getMinutes()).padStart(2, '0')
-  const seconds = String(date.getSeconds()).padStart(2, '0')
-  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
-}
-</script>
-
-<template>
-  <!-- 标题栏 -->
-  <van-nav-bar
-    v-if="showNav"
-    title="动态报表表单"
-    left-text="返回"
-    left-arrow
-    @click-left="onClickLeft"
-  />
-  <div v-if="scanFinish" class="main">
-    <template v-if="activatedConfig.designMode === 'json'">
-      <XReportFormJsonRender :json-config="activatedConfig" />
-    </template>
-    <template v-else>
-      <!--  标题  -->
-      <h2 v-if="activatedConfig.title" class="title" v-html="activatedConfig.title" />
-      <!--  副标题  -->
-      <div v-if="activatedConfig.subTitle && activatedConfig.subTitle.length > 0" class="form_item">
-        <van-collapse v-model="activeCollapseName" accordion>
-          <van-collapse-item title="副标题" name="副标题">
-            <van-form>
-              <van-cell-group inset>
-                <template v-for="(subCell, cellIndex) in activatedConfig.subTitle" :key="cellIndex">
-                  <template v-if="subCell.type === 'inputs'">
-                    <template v-for="(item, itemIndex) in formatInputs(subCell)" :key="itemIndex">
-                      <van-field
-                        v-model="activatedConfig.data[subCell.dataIndex][itemIndex]"
-                        :label="`${item}:`"
-                        clearable
-                        type="textarea"
-                        rows="1"
-                        autosize
-                        :placeholder="`请输入${item}`"
-                      />
-                    </template>
-                  </template>
-                  <template v-else>
-                    <van-field
-                      v-model="activatedConfig.data[subCell.dataIndex]"
-                      :label="`${subCell.format}:`"
-                      clearable
-                      type="textarea"
-                      rows="1"
-                      autosize
-                      :placeholder="`请输入${subCell.format}`"
-                    />
-                  </template>
-                </template>
-              </van-cell-group>
-            </van-form>
-          </van-collapse-item>
-        </van-collapse>
-      </div>
-      <!--  表单项  -->
-      <div class="form_item">
-        <van-collapse v-model="activeCollapseName" accordion>
-          <van-collapse-item title="表单项" name="表单项">
-            <van-form>
-              <template v-for="(row, index) in activatedConfig.columns" :key="index">
-                <!--     value属性      -->
-                <van-cell-group v-if="row.type === 'showValue'" inset class="cell_group">
-                  <van-cell center :title="row.label" :value="row.valueText" />
-                </van-cell-group>
-                <!--     input      -->
-                <van-cell-group v-else-if="row.type === 'input'" inset class="cell_group" :title="row.label">
-                  <template v-if="row.inputReadOnly === true">
-                    <template v-if="row.dataIndex.includes('@@@')">
-                      <van-field
-                        v-model="activatedConfig.tempData[row.dataIndex]"
-                        :label="`${row.label}:`"
-                        :placeholder="`请输入${row.label}`"
-                        clearable
-                        type="textarea"
-                        rows="1"
-                        :disabled="true"
-                        autosize
-                      />
-                    </template>
-                    <template v-else>
-                      <van-field
-                        v-model="activatedConfig.data[row.dataIndex]"
-                        :label="`${row.label}:`"
-                        :placeholder="`请输入${row.label}`"
-                        clearable
-                        type="textarea"
-                        rows="1"
-                        :disabled="true"
-                        autosize
-                      />
-                    </template>
-                  </template>
-                  <template v-else>
-                    <template v-if="row.dataIndex.includes('@@@')">
-                      <van-field
-                        v-model="activatedConfig.tempData[row.dataIndex]"
-                        :label="`${row.label}:`"
-                        :placeholder="`请输入${row.label}`"
-                        clearable
-                        type="textarea"
-                        rows="1"
-                        autosize
-                      />
-                    </template>
-                    <template v-else>
-                      <van-field
-                        v-model="activatedConfig.data[row.dataIndex]"
-                        :label="`${row.label}:`"
-                        :placeholder="`请输入${row.label}`"
-                        clearable
-                        type="textarea"
-                        rows="1"
-                        autosize
-                      />
-                    </template>
-                  </template>
-                </van-cell-group>
-                <!--     curDateInput      -->
-                <van-cell-group v-else-if="row.type === 'curDateInput'" inset style="margin-top: 4vh">
-                  <van-field
-                    v-model="activatedConfig.data[row.dataIndex]"
-                    :label="row.valueText ? `${row.valueText}:` : ''"
-                    :placeholder="row.valueText ? `请点击右侧按钮设置${row.valueText}` : '请点击右侧按钮设置数据'"
-                    readonly
-                    type="textarea"
-                    rows="1"
-                    autosize
-                  >
-                    <template #button>
-                      <van-button v-if="!activatedConfig.data[row.dataIndex]" size="small" type="primary" @click="activatedConfig.data[row.dataIndex] = getNow()">
-                        {{ row.text }}
-                      </van-button>
-                    </template>
-                  </van-field>
-                </van-cell-group>
-                <!--     signature      -->
-                <van-cell-group v-else-if="row.type === 'signature'" inset style="margin-top: 4vh">
-                  <van-field
-                    :label="row.valueText ? `${row.valueText}:` : ''"
-                    readonly
-                    rows="1"
-                    autosize
-                  >
-                    <template #button>
-                      <XSignature v-model="activatedConfig.data[row.dataIndex]" />
-                    </template>
-                  </van-field>
-                </van-cell-group>
-                <!--     inputs      -->
-                <van-cell-group v-else-if="row.type === 'inputs'" inset :title="row.label">
-                  <template v-if="row.inputReadOnly === true">
-                    <template v-for="(item, _index) in formatInputs(row)" :key="_index">
-                      <van-field
-                        v-model="activatedConfig.data[row.dataIndex][_index]"
-                        :label="`${item}:`"
-                        :placeholder="`请输入${item}`"
-                        clearable
-                        type="textarea"
-                        rows="1"
-                        :disabled="true"
-                        autosize
-                      />
-                    </template>
-                  </template>
-                  <template v-else>
-                    <template v-for="(item, _index) in formatInputs(row)" :key="_index">
-                      <van-field
-                        v-model="activatedConfig.data[row.dataIndex][_index]"
-                        :label="`${item}:`"
-                        :placeholder="`请输入${item}`"
-                        clearable
-                        type="textarea"
-                        rows="1"
-                        autosize
-                      />
-                    </template>
-                  </template>
-                </van-cell-group>
-                <!--     images      -->
-                <van-cell-group v-else-if="row.type === 'images'" inset :title="row.label">
-                  <template v-if="row.dataIndex.includes('@@@')">
-                    <Uploader
-                      upload-mode="oss"
-                      :image-list="activatedConfig.tempData[row.dataIndex]"
-                      :outer-index="row.dataIndex"
-                      authority="admin"
-                      @update-file-list="updateFile"
-                    />
-                  </template>
-                  <template v-else>
-                    <Uploader
-                      upload-mode="oss"
-                      :image-list="activatedConfig.data.images[row.dataIndex]"
-                      :outer-index="row.dataIndex"
-                      authority="admin"
-                      @update-file-list="updateFile"
-                    />
-                  </template>
-                </van-cell-group>
-                <!--     动态行      -->
-                <template v-else-if="row.type === 'inputColumns'">
-                  <!--                <van-divider class="divider"> -->
-                  <!--                  {{ row.label }} -->
-                  <!--                </van-divider> -->
-                  <van-cell-group inset :title="row.label" style="background-color: #eff2f5">
-                    <van-cell-group v-for="(_item, _index) in activatedConfig.data[row.dataIndex]" :key="_index" inset class="my-cell-group" style="margin: 0 0 10px 0">
-                      <div v-for="(def, defIndex) in row.definition" :key="defIndex">
-                        <van-field
-                          v-if="def.type === 'curDateInput'"
-                          v-model="activatedConfig.data[row.dataIndex][_index][def.dataIndex]"
-                          :label="`${def.label}:`"
-                          type="textarea"
-                          rows="1"
-                          autosize
-                          :placeholder="`请点击右侧按钮设置${def.label}`"
-                          readonly
-                        >
-                          <template #button>
-                            <van-button v-show="activatedConfig.data[row.dataIndex][_index][def.dataIndex] === ''" size="small" type="primary" @click="activatedConfig.data[row.dataIndex][_index][def.dataIndex] = getNow()">
-                              {{ def.text }}
-                            </van-button>
-                          </template>
-                        </van-field>
-                        <van-field
-                          v-else
-                          v-model="activatedConfig.data[row.dataIndex][_index][def.dataIndex]"
-                          :label="`${def.label}:`"
-                          type="textarea"
-                          rows="1"
-                          autosize
-                          :placeholder="`请输入${def.label}`"
-                          clearable
-                        />
-                      </div>
-                    </van-cell-group>
-                  </van-cell-group>
-
-                  <!--                <div class="button_group"> -->
-                  <!--                  <van-button class="input_columns_button" plain type="primary" @click="addInputColumns(row.dataIndex, row.definition)"> -->
-                  <!--                    <van-icon name="plus" /> -->
-                  <!--                  </van-button> -->
-                  <!--                  <van-button class="input_columns_button" plain type="primary" @click="removeInputColumns(row.dataIndex)"> -->
-                  <!--                    <van-icon name="minus" /> -->
-                  <!--                  </van-button> -->
-                  <!--                </div> -->
-                </template>
-                <!--        list        -->
-                <template v-else-if="row.type === 'list'">
-                  <template v-for="(listIndex) in row.content[0].listLength" :key="listIndex">
-                    <div style="margin-top: 3vh; margin-bottom: 3vh">
-                      <van-cell-group inset :title="row.label" style="background-color: #eff2f5">
-                        <template v-for="(_cell, cellIndex) in row.content" :key="listIndex + cellIndex">
-                          <template v-if="_cell.listType === 'input'">
-                            <van-field
-                              v-model="activatedConfig.data[_cell.dataIndex][listIndex]"
-                              :label="_cell.valueText"
-                              type="textarea"
-                              autosize
-                            />
-                          </template>
-                          <template v-else-if="_cell.listType === 'value'">
-                            <van-field
-                              :disabled="true"
-                              :label="_cell.valueText"
-                              type="textarea"
-                              :placeholder="_cell.content[listIndex - 1]"
-                              autosize
-                            />
-                          </template>
-                        </template>
-                      </van-cell-group>
-                    </div>
-                  </template>
-                </template>
-              </template>
-            </van-form>
-          </van-collapse-item>
-        </van-collapse>
-      </div>
-      <!--  提交按钮  -->
-      <div class="submit_button">
-        <van-button round block type="primary" native-type="submit" @click="onSubmit">
-          提交
-        </van-button>
-      </div>
-    </template>
-  </div>
-  <!-- 骨架屏 -->
-  <div v-else class="skeleton">
-    <van-skeleton title :row="5" />
-  </div>
-</template>
-
-<style scoped lang="less">
-.main{
-  padding-top: 4vh;
-  width: 100vw;
-  height: 100vh;
-  background-color: #eff2f5;
-
-  .title{
-    padding-bottom: 2vh;
-    color: rgb(50, 50, 51);
-    text-align: center;
-    margin: 0 0 3vh;
-  }
-
-  .text_box{
-    margin-top: 2vh;
-    margin-bottom: 2vh;
-  }
-
-  .main_text{
-    padding-left: 16px;
-    font-weight: 400;
-    line-height: 1.6;
-    margin: 0 0 40px;
-    color: #969799;
-    font-size: 14px;
-  }
-
-  .show_value_item{
-    text-align: center;
-    font-size: 1.2em;
-  }
-
-  .cell_group{
-    //margin-top: 2vh;
-    //margin-bottom: 2vh;
-  }
-
-  .form_item{
-    margin-top: 2vh;
-  }
-
-  .button_group{
-    text-align: center;
-    margin-top: 3vh;
-    margin-bottom: 3vh;
-  }
-
-  .button_group>:first-child {
-    margin-right: 3vw;
-  }
-
-  .divider{
-    color: #1989fa;
-    border-color: #1989fa;
-    padding: 0 16px
-  }
-
-  .submit_button{
-    background-color: #eff2f5;
-    padding: 5vh;
-  }
-}
-
-.skeleton{
-  margin-top: 5vh
-}
-.my-cell-group{
-  margin: 0 0 10px 0
-}
-:deep(.van-collapse-item__content) {
-  background-color: #eff2f5;
-  padding: 10px 0;
-}
-:deep(.van-cell-group__title){
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-:deep(.van-field__label) {
-  font-weight: 600;
-}
-:deep(.van-uploader__wrapper){
-  padding: 10px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between; /* 水平方向上左右分散对齐 */
-  align-items: center; /* 垂直方向上上下中心对齐 */
-}
-</style>
+<script setup lang="ts">
+import Uploader from '@af-mobile-client-vue3/components/core/Uploader/index.vue'
+import XReportFormJsonRender from '@af-mobile-client-vue3/components/data/XReportForm/XReportFormJsonRender.vue'
+import XSignature from '@af-mobile-client-vue3/components/data/XSignature/index.vue'
+import { getConfigByNameWithoutIndexedDB } from '@af-mobile-client-vue3/services/api/common'
+import {
+  Button as vanButton,
+  Cell as vanCell,
+  CellGroup as vanCellGroup,
+  Collapse as vanCollapse,
+  CollapseItem as vanCollapseItem,
+  Field as vanField,
+  Form as vanForm,
+  NavBar as vanNavBar,
+  Skeleton as vanSkeleton,
+} from 'vant'
+import { defineEmits, nextTick, reactive, ref, watch } from 'vue'
+
+// -------------------------  类型定义  -------------------------
+interface configDefine {
+  data?: any
+  designMode?: string
+  title?: string | undefined
+  subTitle?: Array<cell> | undefined
+  columns?: Array<any>
+  slotsDeclare?: Array<string> | undefined
+  tempData?: any
+}
+
+interface getConfigLock {
+  status: boolean
+}
+
+interface cell {
+  type: string
+  dataIndex: string
+  format: string | undefined
+}
+
+// -------------------------  数据  -------------------------
+const props = defineProps({
+  // 配置名
+  configName: String,
+  // 是否将动态行的label显示在标题上
+  showInputColumnsLabelOnTitle: { default: false },
+  slotName: String,
+  showNav: { default: true },
+  localConfig: { default: undefined },
+  configData: { default: undefined },
+})
+const emit = defineEmits(['saveConfig'])
+// 原始配置
+const activatedConfig: configDefine = reactive({})
+// 激活的配置名
+const activatedConfigName = ref('')
+// 下载的配置
+const configFromWeb = reactive({})
+// 定时器
+let timer: NodeJS.Timeout
+// 控制组件渲染
+const scanFinish = ref(false)
+// 折叠面板当前激活的值
+const activeCollapseName = ref('副标题')
+
+watch(() => props.configName, () => {
+  // 这里是你的处理逻辑
+  initComponent()
+})
+
+// -------------------------  方法  -------------------------
+// 为inputs类型的数据，整理格式，供form展示用
+function formatInputs(cell: cell): string[] {
+  const format = cell.format
+  const arr = format.split('{}')
+  const result = []
+  const reg = /[\u4E00-\u9FA5a-z]/gi
+  arr.forEach((str) => {
+    if (str.length >= 1 && str.match(reg)) {
+      const strs = str.match(reg)
+      result.push(strs.join(''))
+    }
+  })
+  if (!activatedConfig.data[cell.dataIndex][result.length - 1]) {
+    let dataKeySet = Object.keys(activatedConfig.data)
+    dataKeySet = dataKeySet.filter((key) => {
+      return key.startsWith(cell.dataIndex)
+    })
+    dataKeySet.sort()
+    const target = dataKeySet[0]
+    dataKeySet.shift()
+    dataKeySet.forEach((key) => {
+      activatedConfig.data[key].forEach((item) => {
+        activatedConfig.data[target].push(item)
+      })
+    })
+
+    for (let i = 0; i < result.length; i++) {
+      if (!activatedConfig.data[cell.dataIndex][i])
+        activatedConfig.data[cell.dataIndex][i] = undefined
+    }
+  }
+  return result
+}
+
+// 左上角返回按钮
+function onClickLeft(): void {
+  history.back()
+}
+
+// 提交按钮
+function onSubmit(): void {
+  if (activatedConfig.tempData) {
+    const keys = Object.keys(activatedConfig.tempData)
+    keys.forEach((key) => {
+      changeDeepObject(activatedConfig.data, key, activatedConfig.tempData[key])
+    })
+  }
+  console.warn('保存', activatedConfig)
+  emit('saveConfig', activatedConfig)
+}
+
+// // 动态行新增
+// function addInputColumns(dataIndex: string, define: Array<any>): void {
+//   const temp = {}
+//   define.forEach((def) => {
+//     let begin = def.initialValue
+//     if (def.type === 'increment') {
+//       if (activatedConfig.data[dataIndex].length > 0) {
+//         begin = activatedConfig.data[dataIndex][activatedConfig.data[dataIndex].length - 1][def.dataIndex]
+//         begin = Number.parseInt(begin)
+//       }
+//       temp[def.dataIndex] = begin + def.step
+//     }
+//     else {
+//       temp[def.dataIndex] = ''
+//     }
+//   })
+//   activatedConfig.data[dataIndex].push(temp)
+// }
+//
+// // 动态行删除
+// function removeInputColumns(dataIndex: string) {
+//   activatedConfig.data[dataIndex].pop()
+// }
+
+// 扫描所有插槽名
+function scanConfigName(config: configDefine, resut: Array<string>): void {
+  if (config.slotsDeclare) {
+    config.slotsDeclare.forEach((name) => {
+      resut.push(name)
+    })
+  }
+}
+
+// 检查slot是否在配置文件中包含，如果没有包含，则视为非法获取
+function checkSlotDefine(config: configDefine): boolean {
+  const slotsDeclare = config.slotsDeclare
+  const total = slotsDeclare.length
+  let count = 0
+  slotsDeclare.forEach((declare) => {
+    config.columns.forEach((row: Array<any>) => {
+      row.forEach((cell) => {
+        if (cell.slotConfig === declare)
+          count++
+      })
+    })
+  })
+
+  return count === total
+}
+
+// 扫描配置，如果有插槽则拼接插槽
+function scanConfigSlot(config: configDefine): void {
+  const columnsArr: Array<any> = 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 (!configFromWeb[targetName] || !configFromWeb[targetName].columns)
+          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 = []
+
+        if (configFromWeb[targetName].cardMode === true) {
+          const temp = [{
+            type: 'card',
+            content: [],
+            label: configFromWeb[targetName].title,
+          }]
+          for (let k = 0; k < configFromWeb[targetName].columns.length; k++) {
+            configFromWeb[targetName].columns[k].forEach((cell) => {
+              temp[0].content.push(cell)
+            })
+          }
+          addArr.push(temp)
+        }
+        else {
+          for (let k = 0; k < configFromWeb[targetName].columns.length; k++) {
+            const temp = []
+            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 (configFromWeb[targetName].slotsDeclare)
+          config.slotsDeclare = configFromWeb[targetName].slotsDeclare
+
+        else
+          config.slotsDeclare = []
+
+        if (config.data.images && configFromWeb[targetName].data.images) {
+          config.data.images = { ...config.data.images, ...configFromWeb[targetName].data.images }
+          delete configFromWeb[targetName].data.images
+        }
+        config.data = { ...config.data, ...configFromWeb[targetName].data }
+      }
+    }
+  }
+  Object.assign(activatedConfig, config)
+}
+
+// 获取并拼装插槽
+function getConfigAndJoin(config: configDefine, outerLock: getConfigLock): void {
+  // 检查主配置插槽声明是否合法
+  const check = checkSlotDefine(config)
+  const waitForDownloadSlotName = []
+  if (check) {
+    // 扫描主配置中声明的插槽名
+    scanConfigName(config, waitForDownloadSlotName)
+
+    const total = waitForDownloadSlotName.length
+    let count = 0
+
+    // 挨个获取插槽
+    waitForDownloadSlotName.forEach((configName) => {
+      getConfigByNameWithoutIndexedDB(configName).then((res) => {
+        configFromWeb[configName] = res
+        count++
+      })
+    })
+
+    const timer = setInterval(() => {
+      if (count >= total) {
+        clearInterval(timer)
+        scanConfigSlot(config)
+        if (config.slotsDeclare.length > 0) {
+          const lock: getConfigLock = { status: true }
+          getConfigAndJoin(config, lock)
+          const innerTimer = setInterval(() => {
+            if (!lock.status) {
+              clearInterval(innerTimer)
+              outerLock.status = false
+            }
+          }, 100)
+        }
+        else {
+          outerLock.status = false
+        }
+      }
+    }, 100)
+  }
+  else {
+    outerLock.status = false
+  }
+}
+
+function deserializeFunctionAndRun(functionStr, value) {
+  // eslint-disable-next-line no-eval
+  const fun = eval(`(${functionStr})`)
+  return fun(value, activatedConfig)
+}
+
+function deserializeFunctionAndRunWithConfig(functionStr) {
+  // eslint-disable-next-line no-eval
+  const fun = eval(`(${functionStr})`)
+  return fun(activatedConfig)
+}
+
+// 将table配置的表格转换为适合Form展示的格式
+function formatConfigToForm(config: configDefine): void {
+  const formColumns: Array<object> = []
+  const labels: Array<string> = []
+  for (let i = 0; i < config.columns.length; i++) {
+    let tempObj: {
+      customFunction?: any
+      inputColumns?: boolean
+      dataIndex: string
+      label: string
+      listType?: string
+      listLength?: number
+      valueText?: string
+      type: string | undefined
+      format?: string
+      definition?: Array<any>
+      editable?: boolean
+      inputReadOnly?: boolean
+      content?: Array<any>
+      text?: string
+    } = {
+      label: '',
+      type: undefined,
+      dataIndex: '',
+    }
+
+    const row: Array<any> = config.columns[i]
+    let listArr = []
+    for (let j = 0; j < row.length; j++) {
+      switch (row[j].type) {
+        case 'column' :
+          if (row[j].customFunctionForDynamicDataIndex)
+            row[j].dataIndex = deserializeFunctionAndRunWithConfig(row[j].customFunctionForDynamicDataIndex)
+          if (j === row.length - 1) {
+            if (row[j].customFunction) {
+              tempObj.customFunction = row[j].customFunction
+              tempObj.label = deserializeFunctionAndRun(row[j].customFunction, row[j].dataIndex)
+            }
+            else {
+              labels.push(tempObj.label)
+              labels.push(row[j].text)
+              tempObj = {
+                label: '',
+                type: undefined,
+                dataIndex: '',
+              }
+            }
+          }
+          else if (tempObj.label && tempObj.dataIndex) {
+            formColumns.push(tempObj)
+            tempObj = {
+              label: '',
+              type: undefined,
+              dataIndex: '',
+            }
+          }
+          else if (tempObj.customFunction) {
+            formColumns.push(tempObj)
+            tempObj = {
+              label: '',
+              type: undefined,
+              dataIndex: '',
+            }
+          }
+          else if (tempObj.label && !tempObj.dataIndex) {
+            labels.push(tempObj.label)
+            tempObj = {
+              label: '',
+              type: undefined,
+              dataIndex: '',
+            }
+          }
+          if (row[j].customFunction) {
+            tempObj.customFunction = row[j].customFunction
+            tempObj.label = deserializeFunctionAndRun(row[j].customFunction, row[j].dataIndex)
+          }
+          else {
+            tempObj.label = row[j].text
+          }
+          break
+        case 'value' :
+          tempObj.valueText = row[j].value
+          tempObj.editable = false
+          tempObj.type = 'showValue'
+          break
+        case 'input' :
+          if (row[j].customFunctionForDynamicDataIndex)
+            row[j].dataIndex = deserializeFunctionAndRunWithConfig(row[j].customFunctionForDynamicDataIndex)
+          tempObj.dataIndex = row[j].dataIndex
+          tempObj.type = 'input'
+          if (row[j].inputReadOnly)
+            tempObj.inputReadOnly = true
+          break
+        case 'curDateInput' :
+          tempObj.dataIndex = row[j].dataIndex
+          tempObj.text = row[j].text
+          tempObj.type = 'curDateInput'
+          break
+        case 'signature' :
+          tempObj.dataIndex = row[j].dataIndex
+          tempObj.text = row[j].text
+          tempObj.type = 'signature'
+          break
+        case 'inputs' :
+          if (!tempObj.format)
+            tempObj.format = ''
+          if (!tempObj.dataIndex)
+            tempObj.dataIndex = row[j].dataIndex
+          tempObj.format += row[j].format
+          tempObj.type = 'inputs'
+          if (row[j].inputReadOnly)
+            tempObj.inputReadOnly = true
+          break
+        case 'images' :
+          tempObj.dataIndex = row[j].dataIndex
+          tempObj.type = 'images'
+          break
+        case 'inputColumns' :
+          tempObj.label = ''
+          tempObj.dataIndex = row[j].dataIndex
+          tempObj.definition = row[j].definition
+          if (labels.length > 0) {
+            for (let k = 0; k < tempObj.definition.length; k++) {
+              if (labels[k].length > 1) {
+                tempObj.definition[k].label = labels[k]
+                if (props.showInputColumnsLabelOnTitle) { // 动态行label展示在标题
+                  if (k === tempObj.definition.length - 1)
+                    tempObj.label = `${tempObj.label} ${labels[k].replace(/\s*/g, '')}`
+                  else
+                    tempObj.label = `${tempObj.label} ${labels[k].replace(/\s*/g, '')} :`
+                }
+                else { // 动态行仅展示为’动态行‘
+                  tempObj.label = '动态行'
+                }
+              }
+              else {
+                tempObj.definition[k].label = ''
+              }
+            }
+          }
+          tempObj.type = 'inputColumns'
+          break
+        case 'list' :
+          tempObj.valueText = row[j].listHead
+          tempObj.type = 'list'
+          tempObj.listType = row[j].listType
+          tempObj.dataIndex = row[j].dataIndex
+          if (row[j].content)
+            tempObj.content = row[j].content
+          tempObj.listLength = row[j].listLength
+          listArr.push(tempObj)
+          tempObj = {
+            label: '',
+            type: undefined,
+            dataIndex: '',
+          }
+      }
+    }
+    if (listArr.length > 0)
+      formColumns.push({ type: 'list', content: listArr })
+    else if (tempObj.type || tempObj.label)
+      formColumns.push(tempObj)
+    listArr = []
+    tempObj = {
+      label: '',
+      type: undefined,
+      dataIndex: '',
+    }
+  }
+  activatedConfig.columns = formColumns
+}
+
+// 获取子组件更新的file列表
+function updateFile(files, index) {
+  files.forEach((file) => {
+    if (file.content)
+      delete file.content
+    if (file.file)
+      delete file.file
+    if (file.objectUrl)
+      delete file.objectUrl
+  })
+  if (index.includes('@@@'))
+    changeDeepObjectDeepCopy(activatedConfig.data.images, index, files)
+  else
+    activatedConfig.data.images[index] = files
+}
+
+// function handleInputDeepChange(event, dataIndex) {
+//   this.$forceUpdate()
+// }
+function 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 {
+    result = undefined
+  }
+  return result
+}
+
+function changeDeepObject(obj, strPath, newVal) {
+  const arr = strPath.split('@@@')
+  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()
+    }
+    result[arr[0]] = newVal
+  }
+}
+
+function changeDeepObjectDeepCopy(obj, strPath, newVal) {
+  const arr = strPath.split('@@@')
+  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()
+    }
+    Object.assign(result[arr[0]], newVal)
+  }
+}
+
+// -------------------------  初始化  -------------------------
+initComponent()
+
+function initComponent() {
+  if (props.localConfig !== undefined && Object.keys(props.localConfig).length > 0) {
+    Object.assign(activatedConfig, props.localConfig)
+
+    if (activatedConfig.designMode === 'json') {
+      activatedConfig.data = {}
+      Object.assign(activatedConfig.data, props.configData)
+      nextTick(() => {
+        scanFinish.value = true
+      })
+      return
+    }
+    else {
+      const lock = { status: true }
+      if (activatedConfig.slotsDeclare) {
+        getConfigAndJoin(activatedConfig, lock)
+        timer = setInterval(() => {
+          if (!lock.status) {
+            clearInterval(timer)
+            // 将配置文件格式更改为更利于Form的组织形式
+            formatConfigToForm(activatedConfig)
+            nextTick(() => {
+              scanFinish.value = true
+            })
+          }
+        }, 100)
+      }
+      else {
+        formatConfigToForm(activatedConfig)
+        nextTick(() => {
+          scanFinish.value = true
+        })
+      }
+      if (props.configData !== undefined)
+        Object.assign(activatedConfig.data, props.configData)
+
+      activatedConfig.columns.forEach((row) => {
+        row.forEach((item) => {
+          if (item.dataIndex && item.dataIndex.includes('@@@')) {
+            if (!activatedConfig.tempData) {
+              activatedConfig.tempData = {}
+              activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data, item.dataIndex)
+              if (item.type === 'images')
+                activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data.images, item.dataIndex)
+            }
+            else {
+              activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data, item.dataIndex)
+              if (item.type === 'images')
+                activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data.images, item.dataIndex)
+            }
+          }
+        })
+      })
+      console.warn('初始化完成，配置：', activatedConfig)
+    }
+  }
+
+  if (props.slotName)
+    activatedConfigName.value = props.slotName
+
+  else
+    activatedConfigName.value = props.configName
+
+  getConfigByNameWithoutIndexedDB(activatedConfigName.value).then((result) => {
+    Object.assign(activatedConfig, result)
+    if (activatedConfig.designMode === 'json') {
+      if (props.configData === undefined) {
+        console.error('无法找到json配置的数据')
+      }
+      else {
+        activatedConfig.data = {}
+        Object.assign(activatedConfig.data, props.configData)
+        nextTick(() => {
+          scanFinish.value = true
+        })
+      }
+    }
+    else {
+      const lock = { status: true }
+      if (activatedConfig.slotsDeclare) {
+        getConfigAndJoin(activatedConfig, lock)
+        timer = setInterval(() => {
+          if (!lock.status) {
+            clearInterval(timer)
+            // 将配置文件格式更改为更利于Form的组织形式
+            formatConfigToForm(activatedConfig)
+            nextTick(() => {
+              scanFinish.value = true
+            })
+          }
+        }, 100)
+      }
+      else {
+        formatConfigToForm(activatedConfig)
+        nextTick(() => {
+          scanFinish.value = true
+        })
+      }
+      if (props.configData !== undefined)
+        Object.assign(activatedConfig.data, props.configData)
+    }
+
+    activatedConfig.columns.forEach((row) => {
+      row.forEach((item) => {
+        if (item.dataIndex && item.dataIndex.includes('@@@')) {
+          if (!activatedConfig.tempData) {
+            activatedConfig.tempData = {}
+            activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data, item.dataIndex)
+            if (item.type === 'images')
+              activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data.images, item.dataIndex)
+          }
+          else {
+            activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data, item.dataIndex)
+            if (item.type === 'images')
+              activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data.images, item.dataIndex)
+          }
+        }
+      })
+    })
+  }).catch((e) => {
+    console.error(e)
+  })
+}
+function getNow() {
+  const date = new Date()
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  const seconds = String(date.getSeconds()).padStart(2, '0')
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}
+</script>
+
+<template>
+  <!-- 标题栏 -->
+  <van-nav-bar
+    v-if="showNav"
+    title="动态报表表单"
+    left-text="返回"
+    left-arrow
+    @click-left="onClickLeft"
+  />
+  <div v-if="scanFinish" class="main">
+    <template v-if="activatedConfig.designMode === 'json'">
+      <XReportFormJsonRender :json-config="activatedConfig" />
+    </template>
+    <template v-else>
+      <!--  标题  -->
+      <h2 v-if="activatedConfig.title" class="title" v-html="activatedConfig.title" />
+      <!--  副标题  -->
+      <div v-if="activatedConfig.subTitle && activatedConfig.subTitle.length > 0" class="form_item">
+        <van-collapse v-model="activeCollapseName" accordion>
+          <van-collapse-item title="副标题" name="副标题">
+            <van-form>
+              <van-cell-group inset>
+                <template v-for="(subCell, cellIndex) in activatedConfig.subTitle" :key="cellIndex">
+                  <template v-if="subCell.type === 'inputs'">
+                    <template v-for="(item, itemIndex) in formatInputs(subCell)" :key="itemIndex">
+                      <van-field
+                        v-model="activatedConfig.data[subCell.dataIndex][itemIndex]"
+                        :label="`${item}:`"
+                        clearable
+                        type="textarea"
+                        rows="1"
+                        autosize
+                        :placeholder="`请输入${item}`"
+                      />
+                    </template>
+                  </template>
+                  <template v-else>
+                    <van-field
+                      v-model="activatedConfig.data[subCell.dataIndex]"
+                      :label="`${subCell.format}:`"
+                      clearable
+                      type="textarea"
+                      rows="1"
+                      autosize
+                      :placeholder="`请输入${subCell.format}`"
+                    />
+                  </template>
+                </template>
+              </van-cell-group>
+            </van-form>
+          </van-collapse-item>
+        </van-collapse>
+      </div>
+      <!--  表单项  -->
+      <div class="form_item">
+        <van-collapse v-model="activeCollapseName" accordion>
+          <van-collapse-item title="表单项" name="表单项">
+            <van-form>
+              <template v-for="(row, index) in activatedConfig.columns" :key="index">
+                <!--     value属性      -->
+                <van-cell-group v-if="row.type === 'showValue'" inset class="cell_group">
+                  <van-cell center :title="row.label" :value="row.valueText" />
+                </van-cell-group>
+                <!--     input      -->
+                <van-cell-group v-else-if="row.type === 'input'" inset class="cell_group" :title="row.label">
+                  <template v-if="row.inputReadOnly === true">
+                    <template v-if="row.dataIndex.includes('@@@')">
+                      <van-field
+                        v-model="activatedConfig.tempData[row.dataIndex]"
+                        :label="`${row.label}:`"
+                        :placeholder="`请输入${row.label}`"
+                        clearable
+                        type="textarea"
+                        rows="1"
+                        :disabled="true"
+                        autosize
+                      />
+                    </template>
+                    <template v-else>
+                      <van-field
+                        v-model="activatedConfig.data[row.dataIndex]"
+                        :label="`${row.label}:`"
+                        :placeholder="`请输入${row.label}`"
+                        clearable
+                        type="textarea"
+                        rows="1"
+                        :disabled="true"
+                        autosize
+                      />
+                    </template>
+                  </template>
+                  <template v-else>
+                    <template v-if="row.dataIndex.includes('@@@')">
+                      <van-field
+                        v-model="activatedConfig.tempData[row.dataIndex]"
+                        :label="`${row.label}:`"
+                        :placeholder="`请输入${row.label}`"
+                        clearable
+                        type="textarea"
+                        rows="1"
+                        autosize
+                      />
+                    </template>
+                    <template v-else>
+                      <van-field
+                        v-model="activatedConfig.data[row.dataIndex]"
+                        :label="`${row.label}:`"
+                        :placeholder="`请输入${row.label}`"
+                        clearable
+                        type="textarea"
+                        rows="1"
+                        autosize
+                      />
+                    </template>
+                  </template>
+                </van-cell-group>
+                <!--     curDateInput      -->
+                <van-cell-group v-else-if="row.type === 'curDateInput'" inset style="margin-top: 4vh">
+                  <van-field
+                    v-model="activatedConfig.data[row.dataIndex]"
+                    :label="row.valueText ? `${row.valueText}:` : ''"
+                    :placeholder="row.valueText ? `请点击右侧按钮设置${row.valueText}` : '请点击右侧按钮设置数据'"
+                    readonly
+                    type="textarea"
+                    rows="1"
+                    autosize
+                  >
+                    <template #button>
+                      <van-button v-if="!activatedConfig.data[row.dataIndex]" size="small" type="primary" @click="activatedConfig.data[row.dataIndex] = getNow()">
+                        {{ row.text }}
+                      </van-button>
+                    </template>
+                  </van-field>
+                </van-cell-group>
+                <!--     signature      -->
+                <van-cell-group v-else-if="row.type === 'signature'" inset style="margin-top: 4vh">
+                  <van-field
+                    :label="row.valueText ? `${row.valueText}:` : ''"
+                    readonly
+                    rows="1"
+                    autosize
+                  >
+                    <template #button>
+                      <XSignature v-model="activatedConfig.data[row.dataIndex]" />
+                    </template>
+                  </van-field>
+                </van-cell-group>
+                <!--     inputs      -->
+                <van-cell-group v-else-if="row.type === 'inputs'" inset :title="row.label">
+                  <template v-if="row.inputReadOnly === true">
+                    <template v-for="(item, _index) in formatInputs(row)" :key="_index">
+                      <van-field
+                        v-model="activatedConfig.data[row.dataIndex][_index]"
+                        :label="`${item}:`"
+                        :placeholder="`请输入${item}`"
+                        clearable
+                        type="textarea"
+                        rows="1"
+                        :disabled="true"
+                        autosize
+                      />
+                    </template>
+                  </template>
+                  <template v-else>
+                    <template v-for="(item, _index) in formatInputs(row)" :key="_index">
+                      <van-field
+                        v-model="activatedConfig.data[row.dataIndex][_index]"
+                        :label="`${item}:`"
+                        :placeholder="`请输入${item}`"
+                        clearable
+                        type="textarea"
+                        rows="1"
+                        autosize
+                      />
+                    </template>
+                  </template>
+                </van-cell-group>
+                <!--     images      -->
+                <van-cell-group v-else-if="row.type === 'images'" inset :title="row.label">
+                  <template v-if="row.dataIndex.includes('@@@')">
+                    <Uploader
+                      upload-mode="oss"
+                      :image-list="activatedConfig.tempData[row.dataIndex]"
+                      :outer-index="row.dataIndex"
+                      authority="admin"
+                      @update-file-list="updateFile"
+                    />
+                  </template>
+                  <template v-else>
+                    <Uploader
+                      upload-mode="oss"
+                      :image-list="activatedConfig.data.images[row.dataIndex]"
+                      :outer-index="row.dataIndex"
+                      authority="admin"
+                      @update-file-list="updateFile"
+                    />
+                  </template>
+                </van-cell-group>
+                <!--     动态行      -->
+                <template v-else-if="row.type === 'inputColumns'">
+                  <!--                <van-divider class="divider"> -->
+                  <!--                  {{ row.label }} -->
+                  <!--                </van-divider> -->
+                  <van-cell-group inset :title="row.label" style="background-color: #eff2f5">
+                    <van-cell-group v-for="(_item, _index) in activatedConfig.data[row.dataIndex]" :key="_index" inset class="my-cell-group" style="margin: 0 0 10px 0">
+                      <div v-for="(def, defIndex) in row.definition" :key="defIndex">
+                        <van-field
+                          v-if="def.type === 'curDateInput'"
+                          v-model="activatedConfig.data[row.dataIndex][_index][def.dataIndex]"
+                          :label="`${def.label}:`"
+                          type="textarea"
+                          rows="1"
+                          autosize
+                          :placeholder="`请点击右侧按钮设置${def.label}`"
+                          readonly
+                        >
+                          <template #button>
+                            <van-button v-show="activatedConfig.data[row.dataIndex][_index][def.dataIndex] === ''" size="small" type="primary" @click="activatedConfig.data[row.dataIndex][_index][def.dataIndex] = getNow()">
+                              {{ def.text }}
+                            </van-button>
+                          </template>
+                        </van-field>
+                        <van-field
+                          v-else
+                          v-model="activatedConfig.data[row.dataIndex][_index][def.dataIndex]"
+                          :label="`${def.label}:`"
+                          type="textarea"
+                          rows="1"
+                          autosize
+                          :placeholder="`请输入${def.label}`"
+                          clearable
+                        />
+                      </div>
+                    </van-cell-group>
+                  </van-cell-group>
+
+                  <!--                <div class="button_group"> -->
+                  <!--                  <van-button class="input_columns_button" plain type="primary" @click="addInputColumns(row.dataIndex, row.definition)"> -->
+                  <!--                    <van-icon name="plus" /> -->
+                  <!--                  </van-button> -->
+                  <!--                  <van-button class="input_columns_button" plain type="primary" @click="removeInputColumns(row.dataIndex)"> -->
+                  <!--                    <van-icon name="minus" /> -->
+                  <!--                  </van-button> -->
+                  <!--                </div> -->
+                </template>
+                <!--        list        -->
+                <template v-else-if="row.type === 'list'">
+                  <template v-for="(listIndex) in row.content[0].listLength" :key="listIndex">
+                    <div style="margin-top: 3vh; margin-bottom: 3vh">
+                      <van-cell-group inset :title="row.label" style="background-color: #eff2f5">
+                        <template v-for="(_cell, cellIndex) in row.content" :key="listIndex + cellIndex">
+                          <template v-if="_cell.listType === 'input'">
+                            <van-field
+                              v-model="activatedConfig.data[_cell.dataIndex][listIndex]"
+                              :label="_cell.valueText"
+                              type="textarea"
+                              autosize
+                            />
+                          </template>
+                          <template v-else-if="_cell.listType === 'value'">
+                            <van-field
+                              :disabled="true"
+                              :label="_cell.valueText"
+                              type="textarea"
+                              :placeholder="_cell.content[listIndex - 1]"
+                              autosize
+                            />
+                          </template>
+                        </template>
+                      </van-cell-group>
+                    </div>
+                  </template>
+                </template>
+              </template>
+            </van-form>
+          </van-collapse-item>
+        </van-collapse>
+      </div>
+      <!--  提交按钮  -->
+      <div class="submit_button">
+        <van-button round block type="primary" native-type="submit" @click="onSubmit">
+          提交
+        </van-button>
+      </div>
+    </template>
+  </div>
+  <!-- 骨架屏 -->
+  <div v-else class="skeleton">
+    <van-skeleton title :row="5" />
+  </div>
+</template>
+
+<style scoped lang="less">
+.main{
+  padding-top: 4vh;
+  width: 100vw;
+  height: 100vh;
+  background-color: #eff2f5;
+
+  .title{
+    padding-bottom: 2vh;
+    color: rgb(50, 50, 51);
+    text-align: center;
+    margin: 0 0 3vh;
+  }
+
+  .text_box{
+    margin-top: 2vh;
+    margin-bottom: 2vh;
+  }
+
+  .main_text{
+    padding-left: 16px;
+    font-weight: 400;
+    line-height: 1.6;
+    margin: 0 0 40px;
+    color: #969799;
+    font-size: 14px;
+  }
+
+  .show_value_item{
+    text-align: center;
+    font-size: 1.2em;
+  }
+
+  .cell_group{
+    //margin-top: 2vh;
+    //margin-bottom: 2vh;
+  }
+
+  .form_item{
+    margin-top: 2vh;
+  }
+
+  .button_group{
+    text-align: center;
+    margin-top: 3vh;
+    margin-bottom: 3vh;
+  }
+
+  .button_group>:first-child {
+    margin-right: 3vw;
+  }
+
+  .divider{
+    color: #1989fa;
+    border-color: #1989fa;
+    padding: 0 16px
+  }
+
+  .submit_button{
+    background-color: #eff2f5;
+    padding: 5vh;
+  }
+}
+
+.skeleton{
+  margin-top: 5vh
+}
+.my-cell-group{
+  margin: 0 0 10px 0
+}
+:deep(.van-collapse-item__content) {
+  background-color: #eff2f5;
+  padding: 10px 0;
+}
+:deep(.van-cell-group__title){
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+:deep(.van-field__label) {
+  font-weight: 600;
+}
+:deep(.van-uploader__wrapper){
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between; /* 水平方向上左右分散对齐 */
+  align-items: center; /* 垂直方向上上下中心对齐 */
+}
+</style>