af-mobile-client-vue3 1.0.54

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

@@ -0,0 +1,1058 @@
+<script setup lang="ts">
+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'
+import { getConfigByNameWithoutIndexedDB } from '@af-mobile-client-vue3/services/api/common'
+import Uploader from '@af-mobile-client-vue3/components/core/Uploader/index.vue'
+import XReportFormJsonRender from '@af-mobile-client-vue3/components/data/XReportForm/XReportFormJsonRender.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-zA-Z]/g
+  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 {
+  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 '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 (e) {
+    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.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="(cell, index) in activatedConfig.subTitle" :key="index">
+                  <template v-if="cell.type === 'inputs'">
+                    <template v-for="(item, index) in formatInputs(cell)" :key="index">
+                      <van-field
+                        v-model="activatedConfig.data[cell.dataIndex][index]"
+                        :label="`${item}:`"
+                        clearable
+                        type="textarea"
+                        rows="1"
+                        autosize
+                        :placeholder="`请输入${item}`"
+                      />
+                    </template>
+                  </template>
+                  <template v-else>
+                    <van-field
+                      v-model="activatedConfig.data[cell.dataIndex]"
+                      :label="`${cell.format}:`"
+                      clearable
+                      type="textarea"
+                      rows="1"
+                      autosize
+                      :placeholder="`请输入${cell.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>
+                <!--     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>