focusin-mini-ui 1.0.0

package/packages/CommonForm/index.vue

@@ -0,0 +1,752 @@
+<template>
+  <view class="z-form">
+    <wd-form ref="formRef" errorType="toast" :model="model" :rules="mode === 'detail' ? {} : rules"
+      :custom-class="'form-model'">
+      <template v-for="(itemConfig, i) in visibleFormConfig" :key="i">
+        <template v-if="itemConfig.config">
+          <view class="common-collapse-body">
+            <view v-if="itemConfig.config && itemConfig.config.length">
+              <wd-cell-group border>
+                <template v-for="item in itemConfig.config" :key="item.prop">
+                  <!-- 选择器 -->
+                  <template v-if="item.temp === 'wd-select-picker' && isItemVisible(item)">
+                    <wd-select-picker filterable v-if="mode !== 'detail'" :custom-class="'form-model'"
+                      :label="item.label" :show-confirm="item.showConfirm" :label-width="item.labelWidth || '100px'"
+                      :prop="item.prop" :disabled="item.readonly || mode === 'detail'"
+                      :label-key="item.labelKey || 'label'" :value-key="item.valueKey || 'value'"
+                      :type="item.type || 'radio'" v-model="model[item.prop]" :columns="item.columns"
+                      :placeholder="'请选择' + item.label" :rules="mode === 'detail' ? [] : item.rules"
+                      @change="item.change" @confirm="item.confirm" />
+                    <wd-cell v-else :title="item.label" :title-width="item.labelWidth || '100px'">
+                      <view class="text-right text-[#5c6278] text_32">
+                        {{ getSelectDisplay(item) }}
+                      </view>
+                    </wd-cell>
+                  </template>
+
+                  <template v-if="item.temp === 'wd-col-picker' && isItemVisible(item)">
+                    <CommonColPicker v-if="mode !== 'detail'" :custom-class="'form-model'" :label="item.label"
+                      :label-width="item.labelWidth || '100px'" :prop="item.prop"
+                      :disabled="item.readonly || mode === 'detail'" :label-key="item.labelKey || 'label'"
+                      :value-key="item.valueKey || 'value'" v-model="model[item.prop]"
+                      :column-change="item.columnChange" :before-confirm="item.beforeConfirm" @confirm="item.confirm"
+                      :columns="item.columns" :display-format="item.displayFormat" :placeholder="'请选择' + item.label"
+                      :rules="mode === 'detail' ? [] : item.rules" />
+                    <wd-cell v-else :title="item.label" :title-width="item.labelWidth || '100px'">
+                      <view class="text-right text-[#5c6278] text_32" :style="{
+                        'font-size': item.valueFontSize ? item.valueFontSize : '32rpx',
+                      }">
+                        {{ getColDisplay(item) }}
+                      </view>
+                    </wd-cell>
+                  </template>
+                  <template v-if="item.temp === 'wd-datetime' && isItemVisible(item)">
+                    <wd-datetime-picker v-if="mode !== 'detail'" :type="item.type || 'date'"
+                      :displayFormat="item.displayFormat" :custom-class="'form-model'" :label="item.label"
+                      :label-width="item.labelWidth || '100px'" :prop="item.prop"
+                      :readonly="item.readonly || mode === 'detail'" :label-key="item.labelKey || 'label'"
+                      :value-key="item.valueKey || 'value'" :minDate="item.minDate || new Date(`${new Date().getFullYear() - 1}-01-01`).getTime()
+                        " :maxDate="item.maxDate || new Date(`${new Date().getFullYear() + 1}-12-31`).getTime()
+                          " v-model="model[item.prop]" :column-change="item.columnChange"
+                      :before-confirm="item.beforeConfirm" @confirm="item.confirm" :placeholder="'请选择' + item.label"
+                      :rules="mode === 'detail' ? [] : item.rules" />
+                    <wd-cell v-else :title="item.label" :title-width="item.labelWidth || '100px'">
+                      <view class="text-right text-[#5c6278] text_32" :style="{
+                        'font-size': item.valueFontSize ? item.valueFontSize : '32rpx',
+                      }">
+                        {{ getTimeDisplay(item) || '-' }}
+                      </view>
+                    </wd-cell>
+                  </template>
+
+                  <template v-if="item.temp === 'wd-calendar' && isItemVisible(item)">
+                    <wd-calendar v-if="mode !== 'detail'" :type="item.type || 'date'"
+                      :displayFormat="item.displayFormat" :custom-class="'form-model'" :label="item.label"
+                      :label-width="item.labelWidth || '100px'" :prop="item.prop"
+                      :readonly="item.readonly || mode === 'detail'" :label-key="item.labelKey || 'label'"
+                      :value-key="item.valueKey || 'value'" :minDate="item.minDate || new Date(`${new Date().getFullYear() - 1}-01-01`).getTime()
+                        " :maxDate="item.maxDate || new Date(`${new Date().getFullYear() + 1}-12-31`).getTime()
+                          " v-model="model[item.prop]" :before-confirm="item.beforeConfirm" @confirm="item.confirm"
+                      :placeholder="'请选择' + item.label" :rules="mode === 'detail' ? [] : item.rules" />
+                    <wd-cell v-else :title="item.label" :title-width="item.labelWidth || '100px'">
+                      <view class="text-right text-[#5c6278] text_32" :style="{
+                        'font-size': item.valueFontSize ? item.valueFontSize : '32rpx',
+                      }">
+                        {{ getTimeDisplay(item) || '-' }}
+                      </view>
+                    </wd-cell>
+                  </template>
+
+                  <!-- 输入框 -->
+                  <template v-if="item.temp === 'wd-input' && isItemVisible(item)">
+                    <wd-input v-if="mode !== 'detail' && !item.readonly" :custom-class="'form-model'"
+                      :label="item.label" :type="item.type" :maxlength="item.maxlength"
+                      :label-width="item.labelWidth || '100px'" :prop="item.prop"
+                      :rules="mode === 'detail' ? [] : item.rules" clearable
+                      :readonly="item.readonly || mode === 'detail'" v-model="model[item.prop]" @blur="item.blur"
+                      @input="item.input" :placeholder="'请输入' + item.label" />
+                    <wd-cell v-else :title="item.label" :title-width="item.labelWidth || '100px'">
+                      <view class="text-right text-[#5c6278] text_32" :style="{
+                        'font-size': item.valueFontSize ? item.valueFontSize : '32rpx',
+                      }">
+                        {{
+                          model[item.prop] !== null && model[item.prop] !== undefined
+                            ? model[item.prop]
+                            : '-'
+                        }}
+                      </view>
+                    </wd-cell>
+                  </template>
+                  <template v-if="item.temp === 'wd-span' && isItemVisible(item)">
+                    <wd-cell :title="item.label" :title-width="item.labelWidth || '100px'">
+                      <view class="text-right text-[#5c6278] text_32" :style="{
+                        'font-size': item.valueFontSize ? item.valueFontSize : '32rpx',
+                      }">
+                        {{ model[item.prop] || '-' }}
+                      </view>
+                    </wd-cell>
+                  </template>
+
+                  <!-- 单选框 -->
+                  <template v-if="item.temp === 'wd-radio' && isItemVisible(item)">
+                    <wd-cell :prop="item.prop" :title="item.label" :title-width="item.labelWidth || '100px'"
+                      :rules="mode === 'detail' ? [] : item.rules || []">
+                      <view class="text-right">
+                        <CommonRadio :label-key="item.labelKey || 'label'" :value-key="item.valueKey || 'value'"
+                          v-if="mode !== 'detail' && !item.readonly" :value="model[item.prop]" :options="item.columns"
+                          @onchange="item.onchange" @change="(e) => radioChange(e, item.prop, item.valueKey)" />
+                        <span v-else class="text-[#5c6278] text_32" :style="{
+                          'font-size': item.valueFontSize ? item.valueFontSize : '32rpx',
+                        }">
+                          {{ getRadioDisplay(item) || '-' }}
+                        </span>
+                      </view>
+                    </wd-cell>
+                  </template>
+
+                  <!-- 文本域 -->
+                  <template v-if="item.temp === 'wd-textarea' && isItemVisible(item)">
+                    <wd-cell vertical :prop="item.prop" :title="item.label" :title-width="item.labelWidth || '100px'"
+                      :rules="mode === 'detail' ? [] : item.rules || []">
+                      <wd-textarea v-if="mode !== 'detail' && !item.readonly" :custom-class="'form-model-left'"
+                        :maxlength="item.maxlength" clearable show-word-limit
+                        :readonly="item.readonly || mode === 'detail'" v-model="model[item.prop]"
+                        :placeholder="'请输入' + item.label" />
+                      <view v-else class="text-[#5c6278] text_32" :style="{
+                        'font-size': item.valueFontSize ? item.valueFontSize : '32rpx',
+                      }">
+                        {{
+                          model[item.prop] !== null && model[item.prop] !== undefined
+                            ? model[item.prop]
+                            : '-'
+                        }}
+                      </view>
+                    </wd-cell>
+                  </template>
+
+                  <!-- 上传组件 -->
+                  <template v-if="item.temp === 'wd-upload' && isItemVisible(item)">
+                    <wd-cell vertical :prop="item.prop" :title="item.label" :title-width="item.labelWidth || '100px'"
+                      :rules="mode === 'detail' ? [] : item.rules || []">
+                      <view v-if="!model[item.prop]?.length && (mode == 'detail' || item.readonly)"
+                        class="text-[#5c6278]">
+                        -
+                      </view>
+                      <wd-upload v-else :disabled="mode === 'detail' || item.readonly"
+                        :limit="mode === 'detail' ? model[item.prop]?.length : item.limit || 1"
+                        v-model:file-list="model[item.prop]" :upload-method="customUpload" :multiple="true" />
+                    </wd-cell>
+                  </template>
+
+                  <!-- 选择地点 -->
+                  <template v-if="item.temp === 'wd-location-picker' && isItemVisible(item)">
+                    <wd-cell :title="item.label" :title-width="item.labelWidth || '100px'" :prop="item.prop"
+                      :rules="mode === 'detail' ? [] : item.rules">
+                      <view class="flex justify-end text-[#5c6278] text_32" @click="handleSelectLocation(item)">
+                        <span class="number">
+                          {{ model[item.prop] || item.placeholder || '请选择地点' }}
+                        </span>
+                        <wd-icon v-if="item.rightIcon" name="arrow-right" size="18px"
+                          :color="!model[item.prop] ? '#9198aa' : '#5c6278'" />
+                      </view>
+                    </wd-cell>
+                  </template>
+
+                  <!-- 插槽 -->
+                  <template v-if="item.temp === 'slot' && isItemVisible(item)">
+                    <wd-cell :vertical="item.vertical" :prop="item.prop" :title="item.label"
+                      :title-width="item.labelWidth || '100px'" :rules="mode === 'detail' ? [] : item.rules || []">
+                      <!--  :class="isEmpty(model[item.prop]) ? 'text-[#9198aa]' : 'text-[#5c6278]'" -->
+                      <view class="flex justify-end text_32"
+                        :style="{ color: isEmpty(model[item.prop]) ? '#9198aa' : '#5c6278' }">
+                        <!-- <div class="text-[#9198aa]" v-if="!model[item.prop]">请选择</div> -->
+                        <slot :name="item.prop"></slot>
+                        <div class="w-[20rpx]" v-if="item.rightIcon"></div>
+                        <wd-icon v-if="item.rightIcon" name="arrow-right" size="18px"
+                          :color="isEmpty(model[item.prop]) ? '#9198aa' : '#5c6278'"></wd-icon>
+                      </view>
+                    </wd-cell>
+                  </template>
+                </template>
+              </wd-cell-group>
+            </view>
+          </view>
+        </template>
+      </template>
+    </wd-form>
+  </view>
+</template>
+<script lang="ts" setup>
+import { ref, PropType, unref } from 'vue'
+
+import { chooseLocation, formatTimestamp } from '@/utils'
+import { isString } from 'xe-utils'
+import { reverseGeocoding, geoconv } from '@/libs/baiduMap'
+// 工具函数：将文件路径转换为Blob对象（H5需要）
+const dataURLtoBlob = (dataurl: string): Blob => {
+  const arr = dataurl.split(',')
+  const mime = arr[0].match(/:(.*?);/)![1]
+  const bstr = atob(arr[1])
+  let n = bstr.length
+  const u8arr = new Uint8Array(n)
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n)
+  }
+  return new Blob([u8arr], { type: mime })
+}
+
+
+
+const formatTimestamp = (timestamp, format) => {
+  if (timestamp === '-' || !timestamp) {
+    return '-'
+  }
+  const date = new Date(Number(timestamp))
+  // 定义格式化规则
+  const formatMap = {
+    YYYY: date.getFullYear(), // 年份
+    MM: String(date.getMonth() + 1).padStart(2, '0'), // 月份（补零）
+    DD: String(date.getDate()).padStart(2, '0'), // 日期（补零）
+    HH: String(date.getHours()).padStart(2, '0'), // 小时（补零）
+    mm: String(date.getMinutes()).padStart(2, '0'), // 分钟（补零）
+    ss: String(date.getSeconds()).padStart(2, '0'), // 秒（补零）
+  }
+
+  // 替换格式字符串中的占位符
+  return format.replace(/YYYY|MM|DD|HH|mm|ss/g, (match) => formatMap[match])
+}
+const customUpload: any = async (file, formData, options) => {
+  // 更可靠的H5环境判断
+  const isH5 =
+    process.env.UNI_PLATFORM === 'h5' || (typeof window !== 'undefined' && 'document' in window)
+
+  if (isH5) {
+    try {
+      const fd = new FormData()
+      console.log(options)
+      // options.fileName += '.png'
+      options.name += '.png'
+      // 合并额外表单数据
+      for (const key in formData) {
+        console.log(key)
+        console.log(formData[key])
+        fd.append(key, formData[key])
+      }
+
+      // 处理文件对象
+      let fileObj: File | Blob
+      if (file.file instanceof File) {
+        fileObj = file.file
+      } else {
+        console.log(file.url)
+        // H5端需要将文件路径转换为Blob
+        fileObj = await new Promise<Blob>((resolve) => {
+          const xhr = new XMLHttpRequest()
+          xhr.open('GET', file.url, true)
+          xhr.responseType = 'blob'
+          xhr.onload = () => {
+            resolve(xhr.response)
+          }
+          xhr.send()
+        })
+      }
+      console.log(fileObj)
+      console.log(options.name || file.name)
+      fd.append('file', fileObj, options.name || file.name)
+      // fd.append('fileType', '.png')
+
+      return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest()
+
+        xhr.open(
+          'POST',
+          import.meta.env.VITE_APP_BASE_API + '/api/tenant/rdsys/rd_sys_attachment/upload',
+        )
+
+        // 设置请求头
+        xhr.setRequestHeader('CenterToken', uni.getStorageSync('token'))
+        xhr.setRequestHeader('userCode', uni.getStorageSync('userCode'))
+
+        // 进度处理
+        xhr.upload.onprogress = (e) => {
+          if (e.lengthComputable) {
+            options.onProgress(
+              {
+                progress: Math.round((e.loaded / e.total) * 100),
+                totalBytesSent: e.loaded,
+                totalBytesExpectedToSend: e.total,
+              },
+              file,
+            )
+          }
+        }
+
+        xhr.onload = () => {
+          if (xhr.status === options.statusCode) {
+            try {
+              const res = JSON.parse(xhr.responseText)
+              console.log(res)
+              console.log(formData)
+              options.onSuccess(res, file, formData)
+              resolve(res)
+            } catch (e) {
+              const err = { errMsg: '解析响应失败', statusCode: xhr.status }
+              options.onError(err, file, formData)
+              reject(err)
+            }
+          } else {
+            const err = {
+              errMsg: xhr.statusText || '上传失败',
+              statusCode: xhr.status,
+            }
+            options.onError(err, file, formData)
+            reject(err)
+          }
+        }
+
+        xhr.onerror = () => {
+          const err = { errMsg: '网络错误' }
+          options.onError(err, file, formData)
+          reject(err)
+        }
+
+        xhr.send(fd)
+      })
+    } catch (error) {
+      options.onError({ errMsg: '上传处理失败' }, file, formData)
+      throw error
+    }
+  } else {
+    // 小程序端实现
+    const uploadTask = uni.uploadFile({
+      url: import.meta.env.VITE_APP_BASE_API + '/api/tenant/rdsys/rd_sys_attachment/upload',
+      header: {
+        CenterToken: uni.getStorageSync('token'),
+        'Content-Type': 'multipart/form-data',
+        userCode: uni.getStorageSync('userCode'),
+      },
+      name: 'file',
+      fileName: options.name,
+      fileType: options.fileType,
+      formData,
+      filePath: file.url,
+      success(res) {
+        if (res.statusCode === options.statusCode) {
+          try {
+            // const data = typeof res.data === 'string' ? JSON.parse(res.data) : res.data
+            options.onSuccess(res, file, formData)
+          } catch (e) {
+            options.onError({ ...res, errMsg: '解析响应失败' }, file, formData)
+          }
+        } else {
+          options.onError({ ...res, errMsg: res.errMsg || '上传失败' }, file, formData)
+        }
+      },
+      fail(err) {
+        options.onError(err, file, formData)
+      },
+    })
+
+    uploadTask.onProgressUpdate((res) => {
+      options.onProgress(res, file)
+    })
+
+    return {
+      abort: () => uploadTask.abort(),
+    }
+  }
+}
+
+function isEmpty(value) {
+  // 判断是否为 null 或 undefined
+  if (value === null || value === undefined) {
+    return true
+  }
+
+  // 判断是否为空字符串
+  if (typeof value === 'string' && value.trim() === '') {
+    return true
+  }
+
+  // 判断是否为空数组
+  if (Array.isArray(value) && value.length === 0) {
+    return true
+  }
+
+  // 判断是否为空对象
+  if (typeof value === 'object' && !Array.isArray(value) && Object.keys(value).length === 0) {
+    return true
+  }
+
+  // 其他情况返回 false
+  return false
+}
+
+const visibleFormConfig = computed(() => {
+  return props.formConfig.map((group) => ({
+    ...group,
+    config: group.config?.filter((item) => isItemVisible(item)),
+  }))
+})
+const isItemVisible = (item: any) => {
+  if (typeof item.visible === 'function') {
+    return item.visible()
+  }
+  if (typeof item.visible === 'object') {
+    return item.visible.value
+  }
+  if (typeof item.visible === 'boolean') {
+    return item.visible
+  }
+  return item.visible !== false // 默认显示
+}
+const props = defineProps({
+  model: { type: Object, required: true }, // 表单数据
+  formConfig: { type: Array, required: true }, // 表单配置
+  mode: { type: String, default: 'add' }, // 模式：add/edit/detail
+  labelWidth: String,
+})
+const getSelectDisplay = (item: any) => {
+  const value = props.model[item.prop]
+  if (!value && value !== 0) return '-'
+  const columns = unref(item.columns)
+  const option = Array.isArray(columns)
+    ? columns.find((opt: any) => opt[item.valueKey || 'value'] == value)
+    : {}
+  return option ? option[item.labelKey || 'label'] : '-'
+}
+
+const getColDisplay = (item) => {
+  const columns = unref(item.columns)
+  const flatArray = columns.flat()
+  return props.model[item.prop]
+    ?.reduce((result, id) => {
+      const foundItem = flatArray.find((otem) => otem[item.valueKey || 'value'] === id)
+      if (foundItem) {
+        result.push(foundItem[item.labelKey || 'label'])
+      }
+      return result
+    }, [])
+    .join('-')
+}
+const handleSelectLocation = (item: any) => {
+  if (props.mode === 'detail') return
+
+  chooseLocation().then(async (res) => {
+    console.log(res)
+    const bd = (await geoconv(res.longitude, res.latitude)) as any
+    // const r = (await reverseGeocoding(bd.x, bd.y)) as any
+    // 更新表单模型
+    Object.assign(props.model, {
+      [item.prop]: res.address, // 病害点位地址
+      [item.longitudeKey || 'longitude']: bd.x, // 经度
+      [item.latitudeKey || 'latitude']: bd.y, // 纬度
+    })
+    console.log(props.model)
+  })
+}
+
+const getRadioDisplay = (item: any) => {
+  const value = props.model[item.prop]
+  const columns = unref(item.columns)
+  const option = Array.isArray(columns)
+    ? columns.find((opt: any) => opt[item.valueKey || 'value'] == value)
+    : {}
+  return option ? option[item.labelKey || 'label'] : '-'
+}
+const getTimeDisplay = (item: any) => {
+  const value = props.model[item.prop]
+  const format = item.format || 'YYYY-MM-DD HH:mm:ss'
+  if (value && isString(value) && value.indexOf('-') === 4) {
+    return value
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) return '-'
+
+    const startDate = formatTimestamp(value[0], format)
+    const endDate = value[1] ? formatTimestamp(value[1], format) : '-'
+
+    return `${startDate} 至 ${endDate}`
+  } else {
+    return value ? formatTimestamp(value, format) : '-'
+  }
+}
+function validateArrayEmpty(value, rule, callback) {
+  if (!Array.isArray(value) || value.length === 0) {
+    // eslint-disable-next-line prefer-promise-reject-errors
+    // || '请上传图片'
+    return Promise.reject(rule.message)
+  } else {
+    return Promise.resolve()
+  }
+}
+const rules = computed(() => {
+  if (props.mode === 'detail') return {}
+  const rules: Record<string, any> = {}
+  props.formConfig.forEach((group: any) => {
+    group.config?.forEach((item: any) => {
+      if (item.rules) {
+        rules[item.prop] = item.rules
+      }
+      // 自动为 upload 类型字段添加非空数组验证
+      if (item.temp === 'wd-upload' || item.temp === 'wd-col-picker') {
+        // 合并用户自定义规则和自动生成的规则
+        rules[item.prop] = rules[item.prop]
+          ? [{ validator: validateArrayEmpty, message: `${rules[item.prop][0].message}` }]
+          : []
+      }
+    })
+  })
+  return rules
+})
+
+const radioChange = (e, e2, e3) => {
+  if (props.mode === 'detail') return
+  Object.assign(props.model, {
+    [e2]: e[e3 || 'value'],
+  })
+}
+
+// // 处理数字输入
+// const handleNumberInput = ({ value }, item) => {
+//   if (item.type !== 'number' && item.type !== 'digit') return
+//   // 限制只能输入数字和小数点
+//   const filteredValue = value.replace(/[^0-9.]/g, '')
+//   // 处理多个小数点的情况
+//   const parts = filteredValue.split('.')
+//   if (parts.length > 2) {
+//     // 如果输入了多个小数点，只保留第一个
+//     Object.assign(props.model, {
+//       [item.prop]: `${parts[0]}.${parts.slice(1).join('')}`,
+//     })
+//     console.log(1111111, props.model)
+//     return
+//   }
+
+//   // 限制小数位数
+//   if (parts[1] && parts[1].length > item.precision) {
+//     if (item.precision === 0) {
+//       Object.assign(props.model, {
+//         [item.prop]: `${parts[0]}`,
+//       })
+//     } else {
+//       Object.assign(props.model, {
+//         [item.prop]: `${parts[0]}.${parts[1].slice(0, item.precision)}`,
+//       })
+//     }
+
+//     console.log(22222222, props.model)
+//     return
+//   }
+
+//   Object.assign(props.model, {
+//     [item.prop]: filteredValue,
+//   })
+//   console.log(3333333, props.model)
+// }
+
+// // 处理数字失焦
+// const handleNumberBlur = (value, item) => {
+//   if (item.type !== 'number' || !item.precision) return
+
+//   let num = parseFloat(value)
+//   if (isNaN(num)) {
+//     Object.assign(props.model, {
+//       [item.prop]: '',
+//     })
+//     return
+//   }
+
+//   // 四舍五入到指定精度
+//   const factor = Math.pow(10, item.precision)
+//   num = Math.round(num * factor) / factor
+
+//   Object.assign(props.model, {
+//     [item.prop]: num.toString(),
+//   })
+// }
+
+// // 格式化数字显示
+// const formatNumberDisplay = (value, item) => {
+//   if (!value && value !== 0) return '-'
+//   if ((item.type !== 'number' && item.type !== 'digit') || !item.precision) return value
+// }
+
+const formRef = ref()
+const formSubmit = () => {
+  // 优化
+  return new Promise((resolve) => {
+    // 1. 过滤掉 `temp === 'wd-span'` 的配置项
+    const filteredConfig = props.formConfig
+      .map((group: any) => ({
+        ...group,
+        config: group.config?.filter((item: any) => item.temp !== 'wd-span'),
+      }))
+      .filter((group: any) => group.config?.length > 0) // 移除空配置组
+    console.log(filteredConfig[0].config.map((item) => item.prop))
+    formRef.value.validate(filteredConfig[0].config.map((item) => item.prop)).then(({ valid }) => {
+      console.log(valid)
+
+      if (valid) {
+        const processedModel = { ...props.model }
+        props.formConfig.forEach((group: any) => {
+          group.config?.forEach((item: any) => {
+            if (item.temp === 'wd-upload') {
+              const prop = item.prop
+              const fileList = processedModel[prop]
+
+              const isH5 =
+                process.env.UNI_PLATFORM === 'h5' ||
+                (typeof window !== 'undefined' && 'document' in window)
+
+              console.log(isH5)
+              if (Array.isArray(fileList)) {
+                const ids = fileList
+                  .map((file) => {
+                    if (isH5) {
+                      try {
+                        if (file.response) {
+                          const resData =
+                            typeof file.response === 'string'
+                              ? JSON.parse(file.response).data
+                              : file.response
+                          console.log(resData)
+                          return resData.id // 根据实际结构调整路径
+                        }
+                      } catch (e) {
+                        console.error('解析response失败', e)
+                      }
+                    } else {
+                      console.log(file)
+                      try {
+                        if (file.response) {
+                          const resData = JSON.parse(file.response).data
+                          console.log(resData)
+                          return resData.id // 根据实际结构调整路径
+                        }
+                      } catch (e) {
+                        console.error('解析response失败', e)
+                      }
+                    }
+
+                    return null
+                  })
+                  .filter((id) => id !== null)
+                // 根据需求决定拼接方式，默认为逗号分隔
+                console.log(ids)
+                processedModel[prop] = item.join !== false ? ids.join(',') : ids
+              }
+            }
+
+            if (item.temp === 'wd-calendar') {
+              processedModel[item.prop] = formatTimestamp(
+                processedModel[item.prop],
+                item.format || 'YYYY-MM-DD HH:mm:ss',
+              )
+              console.log(processedModel[item.prop])
+            }
+          })
+        })
+        console.log({ valid: true, model: processedModel })
+        resolve({ valid: true, model: processedModel })
+      } else {
+        resolve({ valid: false })
+      }
+    })
+  })
+}
+
+defineExpose({
+  formSubmit,
+  formRef,
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.wd-form) {
+  --wot-cell-title-fs: 32rpx;
+
+  .wd-input__body,
+  .wd-picker__body,
+  .wd-select-picker__body,
+  .wd-calendar__body {
+    text-align: right !important;
+  }
+
+  .wd-switch {
+    font-size: 20px !important;
+  }
+
+  .common-collapse {
+    margin-bottom: 24rpx;
+  }
+
+  .common-collapse-body {
+    // padding: 0 32rpx;
+    background: #fff;
+
+    &:not(:last-child) {
+      margin-bottom: 24rpx;
+    }
+
+    &>uni-view {
+      border-bottom: 2rpx solid #f2f4f7;
+    }
+  }
+
+  &:not(:has(.wd-action-sheet)) {
+    .wd-radio-group {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+
+.footer {
+  padding: 12px;
+}
+
+/* 添加详情模式样式 */
+:deep(.wd-form) {
+  --wot-input-disabled-color: #5c6278 !important;
+
+  .wd-input--readonly,
+  .wd-textarea--readonly,
+  .wd-picker--disabled,
+  .wd-select-picker--disabled {
+
+    .wd-input__value,
+    .wd-textarea__value,
+    .wd-picker__value,
+    .wd-select-picker__value {
+      color: #5c6278 !important;
+    }
+  }
+
+  .wd-upload__disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+</style>