wip: 表单BUG修复中

2023-06-08 09:47:18 +08:00
parent 9c724dc9aa
commit 289c1c2cf5
18 changed files with 1145 additions and 1102 deletions
--- a/src/components/Form/src/Form.vue
+++ b/src/components/Form/src/Form.vue
@@ -1,6 +1,15 @@
 <script lang="tsx">
-import { PropType, defineComponent, ref, computed, unref, watch, onMounted } from 'vue'
-import { ElForm, ElFormItem, ElRow, ElCol, ElTooltip } from 'element-plus'
+import {
+  PropType,
+  defineComponent,
+  ref,
+  computed,
+  unref,
+  watch,
+  onMounted,
+  defineAsyncComponent
+} from 'vue'
+import { ElForm, ElFormItem, ElRow, ElCol } from 'element-plus'
 import { componentMap } from './helper/componentMap'
 import { propTypes } from '@/utils/propTypes'
 import { getSlot } from '@/utils/tsxHelper'
@@ -9,8 +18,7 @@ import {
  setGridProp,
  setComponentProps,
  setItemComponentSlots,
-  initModel,
-  setFormItemSlots
+  initModel
 } from './helper'
 import { useRenderSelect } from './components/useRenderSelect'
 import { useRenderRadio } from './components/useRenderRadio'
@@ -19,7 +27,6 @@ import { useDesign } from '@/hooks/web/useDesign'
 import { findIndex } from '@/utils'
 import { set } from 'lodash-es'
 import { FormProps } from './types'
-import { Icon } from '@/components/Icon'
 import {
  FormSchema,
  FormSetProps,
@@ -125,6 +132,11 @@ export default defineComponent({
      return unref(elFormRef) as ComponentRef<typeof ElForm>
    }

+    const getOptions = async (fn: Function) => {
+      const options = await fn()
+      console.log('=====：', options)
+    }
+
    expose({
      setValues,
      formModel,
@@ -139,6 +151,7 @@ export default defineComponent({
    watch(
      () => unref(getProps).schema,
      (schema = []) => {
+        console.log('@@####')
        formModel.value = initModel(schema, unref(formModel))
      },
      {
@@ -182,95 +195,108 @@ export default defineComponent({

    // 渲染formItem
    const renderFormItem = (item: FormSchema) => {
-      const formItemSlots = {
+      const formItemSlots: Recordable = {
        default: () => {
-              if (slots[item.field]) {
-                return getSlot(slots, item.field, formModel.value)
-              } else {
-                const Com = componentMap[item.component as string] as ReturnType<
-                  typeof defineComponent
-                >
+          if (slots[item.field]) {
+            return getSlot(slots, item.field, formModel.value)
+          } else {
+            console.log(item.field)
+            const Com = componentMap[item.component as string] as ReturnType<typeof defineComponent>

-                const { autoSetPlaceholder } = unref(getProps)
+            const { autoSetPlaceholder } = unref(getProps)

-                const componentSlots = (item?.componentProps as any)?.slots || {}
-                const slotsMap: Recordable = {
-                  ...setItemComponentSlots(componentSlots)
-                }
-                // 如果是select组件，并且没有自定义模板，自动渲染options
-                if (item.component === ComponentNameEnum.SELECT) {
-                  slotsMap.default = !componentSlots.default
-                    ? () => renderSelectOptions(item)
-                    : () => {
-                        return componentSlots.default(
-                          unref((item?.componentProps as SelectComponentProps)?.options)
-                        )
-                      }
-                }
-
-                // 虚拟列表
-                if (item.component === ComponentNameEnum.SELECT_V2 && componentSlots.default) {
-                  slotsMap.default = ({ item }) => {
-                    return componentSlots.default(item)
+            const componentSlots = (item?.componentProps as any)?.slots || {}
+            const slotsMap: Recordable = {
+              ...setItemComponentSlots(componentSlots)
+            }
+            // // 如果是select组件，并且没有自定义模板，自动渲染options
+            if (item.component === ComponentNameEnum.SELECT) {
+              // 如果有optionApi，优先使用optionApi
+              if (item.optionApi) {
+                // 内部自动调用接口，不影响其他渲染
+                getOptions(item.optionApi)
+              }
+              slotsMap.default = !componentSlots.default
+                ? () => renderSelectOptions(item)
+                : () => {
+                    return componentSlots.default(
+                      unref((item?.componentProps as SelectComponentProps)?.options)
+                    )
                  }
-                }
+            }

-                // 单选框组和按钮样式
-                if (
-                  item.component === ComponentNameEnum.RADIO_GROUP ||
-                  item.component === ComponentNameEnum.RADIO_BUTTON
-                ) {
-                  slotsMap.default = !componentSlots.default
-                    ? () => renderRadioOptions(item)
-                    : () => {
-                        return componentSlots.default(
-                          unref((item?.componentProps as CheckboxGroupComponentProps)?.options)
-                        )
-                      }
-                }
-
-                // 多选框组和按钮样式
-                if (
-                  item.component === ComponentNameEnum.CHECKBOX_GROUP ||
-                  item.component === ComponentNameEnum.CHECKBOX_BUTTON
-                ) {
-                  slotsMap.default = !componentSlots.default
-                    ? () => renderCheckboxOptions(item)
-                    : () => {
-                        return componentSlots.default(
-                          unref((item?.componentProps as RadioGroupComponentProps)?.options)
-                        )
-                      }
-                }
-
-                return (
-                  <Com
-                    vModel={formModel.value[item.field]}
-                    {...(autoSetPlaceholder && setTextPlaceholder(item))}
-                    {...setComponentProps(item)}
-                    style={item.componentProps?.style || {}}
-                  >
-                    {{ ...slotsMap }}
-                  </Com>
-                )
+            // 虚拟列表
+            if (item.component === ComponentNameEnum.SELECT_V2 && componentSlots.default) {
+              slotsMap.default = ({ item }) => {
+                return componentSlots.default(item)
              }
            }
+
+            // 单选框组和按钮样式
+            if (
+              item.component === ComponentNameEnum.RADIO_GROUP ||
+              item.component === ComponentNameEnum.RADIO_BUTTON
+            ) {
+              slotsMap.default = !componentSlots.default
+                ? () => renderRadioOptions(item)
+                : () => {
+                    return componentSlots.default(
+                      unref((item?.componentProps as CheckboxGroupComponentProps)?.options)
+                    )
+                  }
+            }
+
+            // 多选框组和按钮样式
+            if (
+              item.component === ComponentNameEnum.CHECKBOX_GROUP ||
+              item.component === ComponentNameEnum.CHECKBOX_BUTTON
+            ) {
+              slotsMap.default = !componentSlots.default
+                ? () => renderCheckboxOptions(item)
+                : () => {
+                    return componentSlots.default(
+                      unref((item?.componentProps as RadioGroupComponentProps)?.options)
+                    )
+                  }
+            }
+
+            const Comp = () => {
+              return (
+                <Com
+                  vModel={formModel.value[item.field]}
+                  {...(autoSetPlaceholder && setTextPlaceholder(item))}
+                  {...setComponentProps(item)}
+                  style={item.componentProps?.style || {}}
+                >
+                  {{ ...slotsMap }}
+                </Com>
+              )
+            }
+
+            return <>{Comp()}</>
+          }
+        }
      }
      if (item?.formItemProps?.slots?.label) {
        formItemSlots.label = (...args: any[]) => {
-          return item.formItemProps.slots.label(...args)
+          return (item?.formItemProps?.slots as any)?.label(...args)
        }
      }
      if (item?.formItemProps?.slots?.error) {
        formItemSlots.error = (...args: any[]) => {
-          return item.formItemProps.slots.error(...args)
+          return (item?.formItemProps?.slots as any)?.error(...args)
        }
      }
      return (
        <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label || ''}>
-          {{
-            ...formItemSlots
-          }}
+          {formItemSlots}
+          {/* {{
+            default: () => {
+              console.log(item.field)
+
+              return '2222'
+            }
+          }} */}
        </ElFormItem>
      )
    }
--- a/src/components/Form/src/types/index.ts
+++ b/src/components/Form/src/types/index.ts
@@ -820,7 +820,7 @@ export interface FormSchema {
  /**
   * @returns 远程加载下拉项
   */
-  api?: <T = any>() => AxiosPromise<T>
+  optionApi?: any
 }

 export interface FormProps {
--- a/src/components/InputPassword/src/InputPassword.vue
+++ b/src/components/InputPassword/src/InputPassword.vue
@@ -32,10 +32,6 @@ const emit = defineEmits(['update:modelValue'])
 // 设置input的type属性
 const textType = ref<'password' | 'text'>('password')

-const changeTextType = () => {
-  textType.value = unref(textType) === 'text' ? 'password' : 'text'
-}
-
 // 输入框的值
 const valueRef = ref(props.modelValue)