iov-pro-components 0.0.3

package/src/packages/form/src/main.vue

@@ -0,0 +1,1190 @@
+<script>
+import { getComponentNames, isElementUI, getFilteredDataType } from '@/utils/config-center'
+import { toUpperCamelCase, splitColsToRow } from '@/utils'
+import functionEval, { isEvalFunction } from '@/utils/function-eval'
+import cloneDeep from 'lodash/cloneDeep'
+import isEqual from 'lodash/isEqual'
+import lodashGet from 'lodash/get'
+import isObject from 'lodash/isObject'
+import ProRequest from '@/packages/request'
+import Space from '@/packages/space'
+
+const isNil = val => [null, undefined].includes(val)
+const isEmpty = val => [null, undefined, ''].includes(val)
+
+// 当前允许的钩子函数
+const HOOKS = {
+  INIT: 'init',
+  DO_LAYOUT: 'doLayout',
+  VALUE_CHANGE: 'valueChange',
+  OPTION_CHANGE: 'optionChange',
+  PROPS_CHANGE: 'propsChange'
+}
+
+const DEFAULT_SPAN = 6
+const DEFAULT_SPACE = 18
+
+export default {
+  name: 'IovProForm',
+  inject: {
+    pageThis: { value: 'pageThis', default: null }
+  },
+  props: {
+    // 当前双向绑定的数据
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    // 外部数据源
+    dataSource: {
+      type: Object,
+      default: () => ({})
+    },
+    // 当前form-item配置
+    items: {
+      type: Array,
+      default: () => []
+    },
+    // 当前表单配置
+    config: {
+      type: Object,
+      default: () => ({
+        grid: false
+      })
+    }
+  },
+  data() {
+    return {
+      DEFAULT_SPAN,
+      // 当前表单数据
+      modelValue: {},
+      // 当前options请求的参数
+      optionParams: {},
+      // 被外部过滤后的数据
+      filteredData: {},
+      // 可以渲染的表单项配置
+      formItemsForRender: [],
+      // 上一次的缓存数据
+      prevState: {
+        value: cloneDeep(this.value || {}),
+        dataSource: cloneDeep(this.dataSource || {}),
+        optionParams: {},
+        modelValue: {}
+      },
+      // 需要触发的钩子函数
+      hooks: {
+        [HOOKS.INIT]: [],
+        [HOOKS.DO_LAYOUT]: [],
+        [HOOKS.VALUE_CHANGE]: [],
+        [HOOKS.OPTION_CHANGE]: [],
+        [HOOKS.PROPS_CHANGE]: []
+      }
+    }
+  },
+  computed: {
+    /**
+     * 表单的属性
+     * @time 2024-10-31 16:44:24
+     */
+    formProps() {
+      return this.normalizeFormProps()
+    },
+
+    /**
+     * 当前所有的form-item集合
+     * @time 2024-11-04 17:23:02
+     */
+    formItems() {
+      return this.normalizeFormItems(this.items)
+    }
+  },
+  watch: {
+    /**
+     * 如果表单数据的变化，则v-model双向绑定外部数据
+     * @time 2024-11-01 15:17:51
+     */
+    modelValue: {
+      handler() {
+        // 当前值
+        const value = cloneDeep(this.value)
+        // 开始遍历数据
+        Object.keys(this.modelValue).forEach(key => {
+          // 获取字段名称
+          const fieldName = this.formItems.find(item => item.key === key)?.name
+          // 如果当前是数组
+          if (Array.isArray(fieldName)) {
+            // 当前数组的值
+            const modelValue = this.modelValue[key] || []
+            // 开始取值
+            fieldName.forEach((k, i) => {
+              // 直接赋值
+              value[k] = modelValue[i]
+            })
+          } else {
+            // 直接赋值
+            if (fieldName) {
+              value[fieldName] = this.modelValue[key]
+            } else {
+              value[key] = this.modelValue[key]
+            }
+          }
+        })
+        // 如果2个对象相等，则不处理
+        if (isEqual(this.prevState.value, value)) {
+          return
+        }
+        // 触发值改变钩子函数
+        this.triggerHooks(HOOKS.VALUE_CHANGE, value)
+        // 上一次value的值
+        const prevStateValue = this.prevState.value
+        // 记录当前双向绑定的数据（当前组件内部均使用此数据，减少render数量）
+        this.prevState.value = cloneDeep(value)
+        // 触发watch对应的方法，并且深拷贝一份数据
+        // 表单值改变后，触发对应的影响
+        this.triggerEffect()
+        // 开始双向绑定
+        this.$emit('input', value)
+        // 触发change，返回新老数据
+        this.$emit('change', value, prevStateValue)
+      },
+      deep: true
+    },
+
+    /**
+     * 监听传入数据的变化
+     * @time 2024-11-13 16:23:35
+     */
+    value: {
+      handler() {
+        // 当前值的key集合
+        const valueKeys = Object.keys(this.value)
+        const modelValueKeys = Object.keys(this.modelValue)
+        // 遍历当前传入的数据
+        valueKeys.forEach(key => {
+          // 取出当前表单项配置
+          const formItem = this.formItems.find(item => (Array.isArray(item.name) ? item.name.includes(key) : item.name === key))
+          // 如果当前是表单的字段
+          if (formItem) {
+            // 如果当前名称需要解构
+            if (Array.isArray(formItem.name)) {
+              // 当前key在数组中索引
+              const nameIndex = formItem.name.indexOf(key)
+              // 值发生改变
+              if (!isEqual(this.value[key], this.modelValue[formItem.key]?.[nameIndex])) {
+                // 如果字段值不存在
+                if (isEmpty(this.modelValue[formItem.key])) {
+                  this.$set(this.modelValue, formItem.key, [])
+                }
+                // 设置值
+                this.$set(this.modelValue[formItem.key], nameIndex, this.value[key])
+              }
+            } else {
+              // 值发生改变
+              if (!isEqual(this.value[key], this.modelValue[formItem.key])) {
+                this.$set(this.modelValue, formItem.key, this.value[key])
+              }
+            }
+          } else {
+            // 值发生改变
+            if (!isEqual(this.value[key], this.modelValue[key])) {
+              this.$set(this.modelValue, key, this.value[key])
+            }
+          }
+        })
+        // 取出当前清空的数据
+        modelValueKeys.forEach(key => {
+          // 取出当前表单项配置
+          const formItem = this.formItems.find(item => item.key === key)
+          // 如果有配置项
+          if (formItem) {
+            // 如果表单项数据是数组
+            if (Array.isArray(formItem.name)) {
+              // 按照name获取字段值
+              let nextValue = formItem.name.map(name => this.value[name])
+              // 如果每个值都是空
+              if (nextValue.every(val => isEmpty(val))) {
+                nextValue = []
+              }
+              // 如果当前表单字段值和绑定的字段值不一致
+              if (!isEqual(this.modelValue[key], nextValue)) {
+                this.$set(this.modelValue, key, nextValue)
+              }
+            } else {
+              // 值被清空了
+              if (isNil(this.value[key])) {
+                this.clearFieldValue(formItem)
+              }
+            }
+          } else {
+            // 如果当前表单字段值和绑定的字段值不一致
+            if (!isEqual(this.modelValue[key], this.value[key])) {
+              this.$set(this.modelValue, key, this.value[key])
+            }
+          }
+        })
+        // 深拷贝一份数据
+        this.prevState.modelValue = cloneDeep(this.modelValue)
+      },
+      deep: true
+    },
+
+    /**
+     * 监听数据源，如果数据源有变化，则需要出发options重新加载
+     * @time 2024-11-13 13:51:36
+     */
+    dataSource: {
+      handler() {
+        // 数据源改变后，触发影响
+        this.triggerEffect()
+        // 深拷贝一份外部数据源数据
+        this.prevState.dataSource = cloneDeep(this.dataSource)
+      },
+      deep: true
+    }
+  },
+  created() {
+    // 当前转换函数
+    this.functionEval = functionEval(() => ({
+      model: this.modelValue,
+      dataSource: this.dataSource,
+      config: this.config,
+      $route: this.$route,
+      $router: this.$router,
+      formThis: this,
+      pageThis: this.pageThis || this.$parent
+    }))
+  },
+  mounted() {
+    // 触发首次加载的影响
+    this.triggerEffect()
+    // 触发loader
+    this.triggerHooks(HOOKS.INIT, this)
+  },
+  methods: {
+    /**
+     * 将表单项配置进行规范化
+     * @param  {Array} items 当前所有表单项配置
+     * @time 2024-11-13 14:23:18
+     */
+    normalizeFormItems(items) {
+      // 生成标准化的数据
+      const nomalizedItems = items.map(item => {
+        // 先深拷贝一份数据
+        const itemClone = cloneDeep(item)
+        // 如果有options方法
+        const { options } = itemClone
+        // 增加key字段
+        itemClone.key = Array.isArray(item.name) ? item.name.join(',') : item.name
+        // 将类型转换成大小写
+        itemClone.type = toUpperCamelCase(item.type)
+        // 新增的optionsCallback方法
+        if (!isEmpty(options)) {
+          // 如果当前options是函数
+          if (isEvalFunction(options)) {
+            itemClone.optionsCallback = () => this.functionEval(options)(this.prevState.value)
+          } else {
+            itemClone.optionsCallback = () => options
+          }
+        }
+        // 如果需要开启栅格系统
+        if (this.config.grid) {
+          itemClone.span = itemClone.span || this.config.span || DEFAULT_SPAN
+        }
+        // 如果当前有名称
+        if (Array.isArray(itemClone.name)) {
+          // 开始赋值
+          const nextValue = itemClone.name.map(name => this.prevState.value[name])
+          // 如果每个值都是空，则清空数据
+          if (nextValue.some(val => !isEmpty(val))) {
+            itemClone.value = nextValue
+          }
+        } else {
+          // 如果传入值非空
+          if (!isNil(this.prevState.value[itemClone.name])) {
+            itemClone.value = this.prevState.value[itemClone.name]
+          }
+        }
+        // 如果有默认值
+        if (!isNil(itemClone.value)) {
+          if (isEvalFunction(itemClone.value)) {
+            itemClone.value = this.functionEval(itemClone.value)
+          }
+        }
+        // 返回数据
+        return itemClone
+      })
+      // 返回数据
+      return nomalizedItems
+    },
+
+    /**
+     * 标准化表单props属性
+     * @time 2024-11-13 14:26:03
+     */
+    normalizeFormProps() {
+      // 需要过滤的属性key
+      const filterKeys = [
+        'grid',
+        'span',
+        'gutter'
+      ]
+      // 默认配置
+      let defaultProps = {
+        size: 'small'
+      }
+      // 如果当前开启了栅格系统
+      if (this.config.grid) {
+        // 栅格系统系统，标题默认左对齐
+        defaultProps = {
+          ...defaultProps,
+          labelPosition: 'left',
+          labelWidth: '80px'
+        }
+      } else {
+        // 未开启栅格系统，则标题默认上对齐
+        defaultProps = {
+          ...defaultProps,
+          labelPosition: 'top'
+        }
+      }
+      return Object.keys(this.config)
+        .reduce(
+          (memo, key) => {
+            // 如果不在过滤名单内
+            if (!filterKeys.includes(key)) {
+              memo[key] = this.config[key]
+            }
+            return memo
+          }, defaultProps
+        )
+    },
+
+    /**
+     * 当表单值发生改变，触发对应的影响
+     * @time 2024-11-13 14:27:36
+     */
+    triggerEffect() {
+      // 获取当前的form-items
+      const prevFormItems = this.formItemsForRender
+      // 重新生成表单items
+      this.doLayout()
+      // 初始化vif动态生成的默认值
+      this.initValue(prevFormItems)
+      // 重新加载options方法
+      this.triggerReloadOptions()
+    },
+
+    /**
+     * 初始化默认值
+     * @time 2024-11-13 14:45:52
+     */
+    triggerInitDefaultValue(itemConfig) {
+      this.$set(
+        this.modelValue,
+        itemConfig.key,
+        itemConfig.value instanceof Function
+          ? itemConfig.value(this.getOptions(itemConfig.key) || [])
+          : itemConfig.value
+      )
+    },
+
+    /**
+     * 触发一次钩子函数的执行
+     * @param  {String} hookName 钩子函数名称
+     * @time 2024-11-14 11:01:58
+     */
+    triggerHooks(hookName, ...props) {
+      // 获取hook名称集合
+      const hookNames = Object.values(HOOKS)
+      // 如果当前hook是合法的，则需要循环执行
+      if (hookNames.includes(hookName)) {
+        this.hooks[hookName].forEach(hook => hook(...props))
+      }
+    },
+
+    /**
+     * 添加一个钩子函数，用于在不同的时机对数据做处理
+     * @param  {Array｜Object} hooks 当前等待添加的钩子函数
+     * @time 2024-11-14 10:54:33
+     */
+    addHooks(pendingHook) {
+      // 将当前hook转换成数组
+      const hooks = Array.isArray(pendingHook) ? pendingHook : [pendingHook]
+      // 获取hook名称集合
+      const hookNames = Object.values(HOOKS)
+      // 将hook循环放进待执行的hook列表中
+      hooks.forEach(hook => {
+        // 如果当前名称是合法的，则正常添加
+        if (hookNames.includes(hook.module)) {
+          this.hooks[hook.module].push(this.functionEval(hook.callback))
+        }
+      })
+    },
+
+    /**
+     * 获取当前已经改变的字段
+     * @time 2024-11-13 11:10:05
+     */
+    getChangedFieldKeys() {
+      // 当前已经改变的字段keys
+      const formKeys = Object.keys({
+        ...this.modelValue,
+        ...this.prevState.modelValue
+      }).filter(key => !isEqual(this.modelValue[key], this.prevState.modelValue[key]))
+      // 当前已经改变的数据源
+      const dataSourceKeys = Object.keys({
+        ...this.dataSource,
+        ...this.prevState.dataSource
+      }).filter(key => !isEqual(this.dataSource[key], this.prevState.dataSource[key])).map(key => `dataSource.${key}`)
+      // 合并数据
+      return [...formKeys, ...dataSourceKeys]
+    },
+
+    /**
+     * 当依赖项发生变化时，重置字段的值
+     * 例如：某 item 从隐藏到显示，则需要初始化默认值；某 item 从隐藏到显示，则移除字段值；字段 watch 的值发生了改变，移除字段值；
+     * @time 2024-11-11 18:50:59
+     */
+    initValue(prevFormItems = []) {
+      // 上一次的form-items的所有keys
+      const prevFormItemsKeys = prevFormItems.map(item => item.key)
+      // 当前的form-items的所有keys
+      const formItemsKeys = this.formItemsForRender.map(item => item.key)
+      // 当前已经改变的字段keys
+      const changedFieldKeys = this.getChangedFieldKeys()
+
+      // 循环数据
+      this.formItemsForRender.forEach(item => {
+        // 如果上一次无该字段，这次展示了
+        if (!prevFormItemsKeys.includes(item.key)) {
+          // 如果当前没有默认值，则初始化
+          if (isNil(item.value)) {
+            this.clearFieldValue(item)
+          } else {
+            // 初始化默认值
+            this.triggerInitDefaultValue(item)
+          }
+        } else {
+          // 如果当前watch的字段值发生了变化，则需要清空当前字段的值
+          if (item.watch && changedFieldKeys.some(key => item.watch.includes(key))) {
+            this.clearFieldValue(item)
+          }
+        }
+      })
+
+      // 取出当前被隐藏的字段，并清空隐藏字段的值
+      prevFormItems
+        .filter(item => !formItemsKeys.includes(item.key))
+        .forEach(item => {
+          // 清空隐藏字段的值
+          this.clearFieldValue(item)
+          // 清空上一次的请求参数（再次被显示时，可正常设置默认值）
+          this.prevState.optionParams[item.key] = null
+        })
+    },
+
+    /**
+     * 重新加载options方法
+     * @time 2024-11-12 14:53:54
+     */
+    triggerReloadOptions() {
+      // 取到所有有options的数据
+      this.formItemsForRender
+        // 过滤掉没有options的配置
+        .filter(item => !!item.optionsCallback)
+        // 当前数据
+        .forEach(item => {
+          // 当前请求参数
+          const optionParams = this.getWatchValue(item)
+          // 如果当前请求参数发生了变化
+          if (!isEqual(optionParams, this.optionParams[item.key])) {
+            this.$set(this.optionParams, item.key, optionParams)
+          }
+        })
+    },
+
+    /**
+     * 获取watch字段对应的值
+     * @param  {Object} item 参数说明
+     * @time 2024-11-13 15:13:15
+     */
+    getWatchValue(item) {
+      // 如果没有需要监听的字段
+      if (!item.watch || item.watch.length === 0) {
+        return {}
+      }
+      // 生成监听字段对应的值
+      return item.watch.reduce((memo, key) => {
+        // 如果需要从其他字段中取值
+        memo[key] = key.indexOf('.') > 0
+          ? lodashGet(this, key)
+          : this.prevState.value[key]
+        return memo
+      }, {})
+    },
+
+    /**
+     * 当前options的数据加载完成，设置初始化值
+     * @param  {Object} itemConfig 当前表单项的配置信息
+     * @param  {Array}  options    当前加载的下拉数据
+     * @time 2024-11-12 15:50:17
+     */
+    onOptionsLoaded(itemConfig, options) {
+      // 如果当前请求完接口了，且有options配置，且value是函数
+      if (
+        isEmpty(this.prevState.optionParams[itemConfig.key]) &&
+        itemConfig.value &&
+        itemConfig.optionsCallback
+      ) {
+        this.triggerInitDefaultValue(itemConfig)
+      }
+      // 触发options加载完成
+      this.triggerHooks(HOOKS.OPTION_CHANGE, cloneDeep(itemConfig), options)
+      // 上一次的options的请求参数
+      this.prevState.optionParams[itemConfig.key] = cloneDeep(this.optionParams[itemConfig.key])
+    },
+
+    /**
+     * 清空字段的值
+     * @param  {Object} field 当前所有字段
+     * @time 2024-11-05 15:45:21
+     */
+    clearFieldValue(field) {
+      // 当前值
+      let value
+      // 根据类型判断
+      switch (field.type) {
+        case 'Select': // 如果当前是下拉
+          // 如果当前是多选
+          if (field.props?.multiple) {
+            value = []
+          }
+          break
+        case 'Checkbox': // 如果当前是多选
+          value = []
+          break
+        case 'Cascader': // 如果当前是级联
+          value = []
+          break
+        case 'TimePicker': // 如果当前是时间选择
+          // 如果当前是范围选择
+          if (field.props?.isRange) {
+            value = []
+          }
+          break
+        case 'DatePicker': // 如果当前是日期选择
+          // 如果是范围选择器
+          if (['daterange', 'monthrange', 'datetimerange'].includes(field.props?.type)) {
+            value = []
+          }
+          break
+        case 'Upload': // 如果当前是上传组件
+          // 如果是多选
+          if (field.props?.multiple) {
+            value = []
+          }
+          break
+      }
+      // 开始设置数据
+      this.$set(this.modelValue, field.key, value)
+    },
+
+    /**
+     * 重新生成可渲染的表单项配置数据
+     * @time 2024-11-05 16:43:54
+     */
+    doLayout() {
+      // 生成当前需要展示的表单项
+      const formItemsForRender = this.formItems
+        .filter(this.vif.bind(this))
+        .filter(item => {
+          // 如果没有名称，则给出提示
+          if (!item.name) {
+            console.warn(`表单项${item.label}中的name属性必填,请检查`)
+          }
+          return !!item.name
+        })
+      // 当前表单项的key集合
+      const formItemsKeys = this.formItemsForRender.map(item => item.key)
+      // 下一次渲染的表单项key集合
+      const nextFormItemsKeys = formItemsForRender.map(item => item.key)
+      // 如果重新生成的formItems和之前一样，则不赋值，防止频繁render
+      if (isEqual(formItemsKeys, nextFormItemsKeys)) {
+        return
+      }
+      // 触发钩子函数
+      this.triggerHooks(HOOKS.DO_LAYOUT, formItemsForRender)
+      // 开始触发render渲染
+      this.formItemsForRender = formItemsForRender
+    },
+
+    /**
+     * 判断当前表单项是否需要渲染
+     * @param  {Object} itemConfig 表单项配置
+     * @time 2024-10-31 16:56:03
+     */
+    vif(itemConfig) {
+      // 取出当前this
+      const formThis = this
+      // 是否展示
+      let display = true
+      // 如果当前是boolean类型
+      if (typeof itemConfig.vif === 'boolean') {
+        display = itemConfig.vif
+      }
+      // 如果当前是函数
+      if (isEvalFunction(itemConfig.vif)) {
+        // 执行函数，获取展示状态
+        display = formThis.functionEval(itemConfig.vif)(formThis.prevState.value)
+      }
+      // 返回状态
+      return display
+    },
+
+    /**
+     * 返回form-item的props属性
+     * @param  {Object} props 当前所有属性值
+     * @time 2024-10-31 17:10:44
+     */
+    formItemProps(props) {
+      // TODO:按照element和antdesign的不同进行配置
+      if (isElementUI()) {
+        // 表单items的属性
+        const FORM_ITEM_PROP_KEYS = [
+          'props',
+          'label',
+          'labelWidth',
+          'required',
+          'rules',
+          'error',
+          'showMessage',
+          'inlineMessage',
+          'size'
+        ]
+        return Object.keys(props).reduce(
+          (memo, propKey) => {
+            // 如果当前有在item的属性内
+            if (FORM_ITEM_PROP_KEYS.includes(propKey)) {
+              // 如果当前属性是函数
+              if (isEvalFunction(props[propKey])) {
+                // 当前4个属性可以通过函数的方式获取值
+                if (['props', 'rules', 'label', 'labelWidth'].includes(propKey)) {
+                  memo[propKey] = this.functionEval(props[propKey])(this.prevState.value)
+                }
+              } else {
+                memo[propKey] = props[propKey]
+              }
+            }
+            return memo
+          }, {}
+        )
+      }
+    },
+
+    /**
+     * 通过指令转换
+     * @param  {String} value 当前值
+     * @param  {Array｜String} directive 当前指令
+     * @time 2025-05-08 09:32:40
+     */
+    transformValueByDirective(value, directive) {
+      // 如果当前未输入指令
+      if ([undefined, null, ''].includes(directive)) {
+        return value
+      }
+      // 将指令转换成数组
+      const normalizedDirective = Array.isArray(directive)
+        ? directive
+        : [directive]
+      // 转换后的值
+      let formattedValue = value
+      // 遍历指令
+      normalizedDirective.forEach(d => {
+        switch (d) {
+          case 'model.trim':
+            formattedValue = formattedValue.trim()
+            break
+          case 'model.number':
+            formattedValue = Number(formattedValue)
+            break
+        }
+      })
+      // 返回转换后的数据
+      return formattedValue
+    },
+
+    /**
+     * 绑定事件
+     * @param  {Object} event 当前事件
+     * @time 2024-10-31 18:34:58
+     */
+    bindEvent(itemConfig) {
+      // 取出事件key
+      const key = itemConfig.key
+      // 当前监听的事件
+      const events = itemConfig.on
+      // 当前表单的this
+      const formThis = this
+      // 输入事件
+      const inputEvent = {
+        /**
+         * 设置input方法，便于双向绑定实现
+         * @time 2024-11-01 16:01:43
+         */
+        input(value) {
+          // 开始双向绑定
+          formThis.$set(formThis.modelValue, key, formThis.transformValueByDirective(value, itemConfig.directive))
+          // 清空所有的过滤后的数据
+          Object.keys(formThis.filteredData).forEach(type => {
+            // 如果当前是过滤后的数据
+            if (formThis.filteredData[type]) {
+              formThis.$set(formThis.filteredData[type], key, null)
+            }
+          })
+        }
+      }
+      // 如果当前是空，则设置input方法
+      if ([null, undefined].includes(events)) {
+        return inputEvent
+      }
+      return Object.keys(events).reduce(
+        (memo, eventKey) => {
+          // 将函数使用functionEval包裹
+          memo[eventKey] = (...args) => {
+            // 如果当前抛出了input事件，则需要双向绑定
+            if (eventKey === 'input') {
+              // 开始双向绑定
+              inputEvent.input(args[0])
+            }
+            // 执行函数
+            this.$nextTick(() => formThis.functionEval(events[eventKey])(...args))
+          }
+          // 返回当前对象
+          return memo
+        }, { input: inputEvent.input }
+      )
+    },
+
+    /**
+     * 获取options的值
+     * @param  {Array | String} keys 当前所有字段的keys
+     * @time 2024-11-13 09:46:01
+     */
+    getOptions(keys) {
+      // 当前字段的keys
+      const fieldKeys = keys
+        ? Array.isArray(keys) ? keys : [keys]
+        : this.formItemsForRender.map(item => item.key)
+      // 当前options的数据
+      const options = {}
+      // 取出需要的数据
+      fieldKeys.forEach(key => {
+        // 如果api组件存在，则获取接口响应的数据
+        if (this.$refs[`${key}Api`]) {
+          options[key] = cloneDeep(this.$refs[`${key}Api`].respData)
+        }
+      })
+      // 获取options的所有数据
+      return fieldKeys.length === 1 ? options[fieldKeys[0]] : options
+    },
+
+    /**
+     * 触发表单校验，并返回校验结果
+     * @time 2024-11-12 19:25:15
+     */
+    async validate() {
+      await this.$refs.form.validate()
+    },
+
+    /**
+     * 清空表单的校验
+     * @time 2024-11-12 19:30:27
+     */
+    clearValidate(props) {
+      this.$refs.form.clearValidate(props)
+    },
+
+    /**
+     * 对部分表单字段进行校验
+     * @param  {Array|String} props 需要校验的字段
+     * @time 2025-05-06 14:06:10
+     */
+    validateField(props) {
+      this.$refs.form.validateField(props)
+    },
+
+    /**
+     * 重置表单
+     * @time 2024-11-12 19:41:58
+     */
+    resetFields() {
+      // 清空上一次的options的请求参数
+      this.prevState.optionParams = {}
+      // 初始化默认值
+      this.initValue()
+      // 清空校验
+      this.$nextTick(this.clearValidate.bind(this))
+    },
+
+    /**
+     * 获取表单组件的props
+     * @param  {Object} props 当前参数
+     * @time 2024-12-09 19:23:56
+     */
+    evalComponentProps(itemConfig, props) {
+      // 如果没有属性
+      if (!props) {
+        return {}
+      }
+      // 返回属性
+      return Object.keys(props).reduce((memo, propKey) => {
+        // 如果当前是需要执行的数据
+        if (isEvalFunction(props[propKey])) {
+          memo[propKey] = async query => {
+            // 得到结果
+            const evalResult = await functionEval(() => ({
+              model: this.modelValue,
+              dataSource: this.dataSource,
+              config: this.config,
+              formThis: this,
+              pageThis: this.pageThis || this.$parent,
+              options: this.getOptions(itemConfig.key)
+            }))(props[propKey])(query)
+            // 过滤的key
+            const filteredDataKey = getFilteredDataType(itemConfig.type, propKey)
+            // 如果当前是remoteMethod属性，则需要覆盖
+            if (!isEmpty(filteredDataKey)) {
+              // 如果属性不存在
+              if (!this.filteredData[filteredDataKey]) {
+                this.$set(this.filteredData, filteredDataKey, {})
+              }
+              // 设置值
+              this.$set(this.filteredData[filteredDataKey], itemConfig.key, evalResult)
+            }
+          }
+        } else {
+          memo[propKey] = props[propKey]
+        }
+        return memo
+      }, {})
+    },
+
+    /**
+     * 获取组件的指令
+     * @param  {Array|String|Object} directive 指令集合
+     * @time 2025-05-08 14:55:33
+     */
+    getComponentDirective(directive) {
+      // 如果没有指令
+      if ([null, undefined, ''].includes(directive)) {
+        return []
+      }
+      // 将指令转换成数组
+      const normalizedDirective = Array.isArray(directive)
+        ? directive
+        : [directive]
+      // 转换成指令标准写法
+      return normalizedDirective
+        .filter(d => isObject(d))
+        .map(d => ({ name: d.name, value: d.value, modifiers: {}}))
+    }
+  },
+  render(h) {
+    // 获取表单组件
+    const [
+      Form,
+      FormItem,
+      Row,
+      Col
+    ] = getComponentNames(['form', 'form-item', 'row', 'col'])
+
+    // 绑定事件方法
+    const bindEvent = this.bindEvent.bind(this)
+
+    /**
+     * 从props中提取dom的属性
+     * @param  {Object} props 当前传递的props
+     * @time 2025-04-01 09:54:39
+     */
+    const getFormAttrs = (props) => {
+      // 如果没有配置props
+      if (!props) {
+        return {}
+      }
+      // 获取dom真实属性
+      const DOM_ATTR_KEYS = [
+        'id',
+        'name',
+        'placeholder',
+        'autocomplete',
+        'maxlength',
+        'minlength',
+        'max',
+        'min',
+        'step',
+        'autofocus',
+        'form'
+      ]
+      return Object.keys(props)
+        .filter(propKey => DOM_ATTR_KEYS.includes(propKey))
+        .reduce((memo, propKey) => {
+          memo[propKey] = props[propKey]
+          return memo
+        }, {})
+    }
+
+    /**
+     * 获取表单输入组件
+     * @param  {Object} itemConfig 表单项配置
+     * @time 2024-10-31 17:41:10
+     */
+    const formInputComp = (itemConfig, formItemsProps, options) => {
+      // 下拉组件,单选组件，多选组件
+      const [
+        Option,
+        RadioGroup,
+        CheckboxGroup,
+        ComponentType
+      ] = getComponentNames(['option', 'radio-group', 'checkbox-group', itemConfig.type])
+      // 当前所需的组件
+      let comp = null
+      // 表单输入类型组件的属性
+      const componentProps = {
+        // 默认展示清空操作
+        clearable: true,
+        ...(
+          ['DatePicker'].includes(itemConfig.type)
+            ? {
+              valueFormat: 'yyyy-MM-dd HH:mm:ss',
+              defaultTime: ['00:00:00', '23:59:59'],
+              startPlaceholder: '开始日期',
+              endPlaceholder: '结束日期'
+            }
+            : {}
+        ),
+        ...this.evalComponentProps(itemConfig, formItemsProps.props)
+      }
+      // 当前组件的插槽
+      const componentSlots = itemConfig.slots?.component
+      // 等待渲染的插槽
+      const renderComponentSlots = componentSlots
+        ? Object.keys(componentSlots).reduce((memo, key) => {
+          // 如果当前有插槽
+          if (this.$scopedSlots[componentSlots[key]]) {
+            memo.push(<span slot={key}>{this.$scopedSlots[componentSlots[key]]()}</span>)
+          }
+          return memo
+        }, [])
+        : null
+      // 过滤的数据
+      const filterOptionsData = this.filteredData.options?.[itemConfig.key]
+      // 下拉数据
+      const optionsData = filterOptionsData || options.data
+      // 插槽名称
+      const slotName = itemConfig.slotName
+        ? itemConfig.slotName
+        : Array.isArray(itemConfig.name)
+          ? itemConfig.name.join(',')
+          : itemConfig.name
+      // 如果当前是下拉组件
+      switch (itemConfig.type) {
+        case 'Slot': // 如果是插槽组件
+          comp = this.$slots[slotName]
+          break
+        case 'Select': // 如果是下拉组件
+          comp = (
+            <ComponentType
+              value={this.modelValue[itemConfig.key]}
+              props={{
+                ...componentProps,
+                loading: options.loading
+              }}
+              attrs={{
+                ...getFormAttrs(componentProps),
+                placeholder: componentProps.placeholder || `请选择${formItemsProps.label}`
+              }}
+              class={componentProps.class}
+              style={componentProps.style}
+              on={bindEvent(itemConfig)}
+            >
+              {renderComponentSlots}
+              { // 循环options的数据
+                optionsData?.map(option => (
+                  <Option key={option.value} label={option.label} value={option.value} />
+                ))
+              }
+            </ComponentType>
+          )
+          break
+        case 'Radio': // 如果是单选
+        case 'RadioButton': // 如果是单选按钮
+          comp = (
+            <RadioGroup
+              value={this.modelValue[itemConfig.key]}
+              props={componentProps}
+              attrs={getFormAttrs(componentProps)}
+              class={componentProps.class}
+              style={componentProps.style}
+              on={bindEvent(itemConfig)}
+            >
+              { // 循环options的数据
+                options.data?.map(option => (
+                  <ComponentType key={option.value} label={option.value}>{option.label}</ComponentType>
+                ))
+              }
+            </RadioGroup>
+          )
+          break
+        case 'Checkbox': // 如果是多选
+        case 'CheckboxButton': // 如果是多选按钮
+          comp = (
+            <CheckboxGroup
+              value={this.modelValue[itemConfig.key]}
+              props={componentProps}
+              attrs={getFormAttrs(componentProps)}
+              class={componentProps.class}
+              style={componentProps.style}
+              on={bindEvent(itemConfig)}
+            >
+              { // 循环options的数据
+                options.data?.map(option => (
+                  <ComponentType key={option.value} label={option.value}>{option.label}</ComponentType>
+                ))
+              }
+            </CheckboxGroup>
+          )
+          break
+        default: // 其他组件
+          // 设置默认的placeholder
+          comp = h(
+            ComponentType,
+            {
+              props: {
+                ...componentProps,
+                options: options.data || [],
+                value: this.modelValue[itemConfig.key]
+              },
+              attrs: {
+                ...getFormAttrs(componentProps),
+                placeholder: componentProps.placeholder || `请${['Input', 'InputNumber'].includes(itemConfig.type) ? '输入' : '选择'}${formItemsProps.label}`
+              },
+              directives: this.getComponentDirective(itemConfig.directive),
+              class: componentProps.class,
+              style: componentProps.style,
+              on: bindEvent(itemConfig)
+            },
+            renderComponentSlots
+          )
+          break
+      }
+      return comp
+    }
+
+    // 等待渲染的组件
+    let FormItems = this.formItemsForRender
+      .map((item) => {
+        // 当前表单项的props
+        const formItemProps = this.formItemProps(item)
+        // 表单配置的slots
+        const formItemSlots = item.slots?.formItem
+        // 当前表单项配置
+        let ItemComp = (
+          <FormItem
+            key={item.key}
+            props={{
+              ...formItemProps,
+              prop: item.key
+            }}
+            scopedSlots={
+              formItemSlots
+                ? Object.keys(formItemSlots).reduce((memo, key) => {
+                  // 如果当前有插槽内容，则直接渲染
+                  if (this.$scopedSlots[formItemSlots[key]]) {
+                    memo[key] = this.$scopedSlots[formItemSlots[key]]
+                  }
+                  return memo
+                }, {})
+                : {}
+            }
+            class='iov-pro-form__form-item override important'
+          >
+
+            { // 如果需要加载options
+              item.optionsCallback
+                ? (
+                  <ProRequest
+                    ref={`${item.key}Api`}
+                    api={item.optionsCallback}
+                    params={this.optionParams[item.key]}
+                    scopedSlots={{
+                      default: options => formInputComp(item, formItemProps || {}, options)
+                    }}
+                    onLoaded={this.onOptionsLoaded.bind(this, item)}
+                  />
+                )
+                : formInputComp(item, formItemProps, { data: [], loading: false })
+            }
+            {}
+          </FormItem>
+        )
+        // 如果当前需要栅格系统
+        if (this.config.grid) {
+          ItemComp = (
+            <Col
+              key={item.key}
+              span={item.span}
+            >{ItemComp}</Col>
+          )
+        }
+        return ItemComp
+      })
+
+    // 如果有前追加的项目
+    if (this.$scopedSlots.prepend) {
+      FormItems = [
+        ...this.$scopedSlots.prepend(),
+        ...FormItems
+      ]
+    }
+
+    // 如果有后追加的项目
+    if (this.$scopedSlots.append) {
+      // 当前追加的表单项item
+      // 将其塞入最后
+      FormItems.push(...this.$scopedSlots.append())
+    }
+
+    // 如果需要栅格系统，则需要在外层包裹一层row
+    if (this.config.grid) {
+      // 将表单项拆分为行
+      const FormItemsInRows = splitColsToRow(FormItems, 'componentOptions.propsData.span')
+      FormItems = (
+        <Space space={this.config.space || DEFAULT_SPACE}>
+          { // 遍历出当前栅格的行
+            FormItemsInRows.map(row => <Row gutter={this.config.gutter}>{row}</Row>)
+          }
+        </Space>
+      )
+    } else {
+      FormItems = (
+        <Space space={this.config.space || DEFAULT_SPACE}>
+          {FormItems}
+        </Space>
+      )
+    }
+    return (
+      <Form
+        ref='form'
+        class='iov-pro-form'
+        props={{
+          ...this.formProps,
+          model: this.modelValue
+        }}
+        onSubmit_native_prevent
+      >
+        { FormItems }
+      </Form>
+    )
+  }
+}
+</script>