fix: 修复Form已知问题

package.json

@@ -27,10 +27,10 @@
   },
   "dependencies": {
     "@iconify/iconify": "^3.1.0",
-    "@vueuse/core": "^10.1.2",
+    "@vueuse/core": "^10.2.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",
-    "@zxcvbn-ts/core": "^3.0.1",
+    "@zxcvbn-ts/core": "^3.0.2",
     "animate.css": "^4.1.1",
     "axios": "^1.4.0",
     "dayjs": "^1.11.8",
@@ -42,43 +42,43 @@
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
-    "pinia": "^2.1.3",
+    "pinia": "^2.1.4",
     "pinia-plugin-persist": "^1.0.0",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
-    "url": "^0.11.0",
+    "url": "^0.11.1",
     "vue": "3.3.4",
     "vue-i18n": "9.2.2",
     "vue-router": "^4.2.2",
-    "vue-types": "^5.0.3",
+    "vue-types": "^5.0.4",
     "web-storage-cache": "^1.1.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.6.5",
     "@commitlint/config-conventional": "^17.6.5",
-    "@iconify/json": "^2.2.74",
+    "@iconify/json": "^2.2.80",
     "@intlify/unplugin-vue-i18n": "^0.11.0",
     "@purge-icons/generated": "^0.9.0",
     "@types/intro.js": "^5.1.1",
     "@types/lodash-es": "^4.17.7",
-    "@types/node": "^20.2.5",
+    "@types/node": "^20.3.1",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.5.0",
     "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.11",
-    "@unocss/transformer-variant-group": "^0.53.0",
+    "@unocss/transformer-variant-group": "^0.53.1",
     "@vitejs/plugin-legacy": "^4.0.4",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "@vue-macros/volar": "^0.10.2",
+    "@vue-macros/volar": "^0.11.0",
     "autoprefixer": "^10.4.14",
     "consola": "^3.1.0",
-    "eslint": "^8.42.0",
+    "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-define-config": "^1.20.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.14.1",
+    "eslint-plugin-vue": "^9.15.0",
     "husky": "^8.0.3",
     "less": "^4.1.3",
     "lint-staged": "^13.2.2",
@@ -88,17 +88,17 @@
     "postcss-less": "^6.0.0",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.1",
-    "rollup": "^3.23.1",
+    "rollup": "^3.25.1",
-    "stylelint": "^15.7.0",
+    "stylelint": "^15.8.0",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recommended": "^12.0.0",
     "stylelint-config-standard": "^33.0.0",
     "stylelint-order": "^6.0.3",
-    "terser": "^5.17.7",
+    "terser": "^5.18.0",
     "typescript": "5.1.3",
-    "unocss": "^0.53.0",
+    "unocss": "^0.53.1",
-    "unplugin-vue-define-options": "^1.3.7",
+    "unplugin-vue-define-options": "^1.3.8",
     "vite": "4.3.9",
     "vite-plugin-ejs": "^1.6.4",
     "vite-plugin-eslint": "^1.8.1",
@@ -107,7 +107,7 @@
     "vite-plugin-purge-icons": "^0.9.2",
     "vite-plugin-style-import": "2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^1.6.5"
+    "vue-tsc": "^1.8.0"
   },
   "engines": {
     "node": ">= 14.18.0"

src/components/Form/src/Form.vue

@@ -1,14 +1,5 @@
 <script lang="tsx">
-import {
+import { PropType, defineComponent, ref, computed, unref, watch, onMounted } from 'vue'
-  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'
@@ -132,9 +123,9 @@ export default defineComponent({
       return unref(elFormRef) as ComponentRef<typeof ElForm>
     }
 
-    const getOptions = async (fn: Function) => {
+    const getOptions = async (fn: Function, field: string) => {
       const options = await fn()
-      console.log('=====：', options)
+      console.log(field, options)
     }
 
     expose({
@@ -195,12 +186,16 @@ export default defineComponent({
 
     // 渲染formItem
     const renderFormItem = (item: FormSchema) => {
+      // 如果有optionApi，优先使用optionApi
+      if (item.optionApi) {
+        // 内部自动调用接口，不影响其他渲染
+        getOptions(item.optionApi, item.field)
+      }
       const formItemSlots: Recordable = {
         default: () => {
           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)
@@ -211,11 +206,6 @@ export default defineComponent({
             }
             // // 如果是select组件，并且没有自定义模板，自动渲染options
             if (item.component === ComponentNameEnum.SELECT) {
-              // 如果有optionApi，优先使用optionApi
-              if (item.optionApi) {
-                // 内部自动调用接口，不影响其他渲染
-                getOptions(item.optionApi)
-              }
               slotsMap.default = !componentSlots.default
                 ? () => renderSelectOptions(item)
                 : () => {
@@ -290,13 +280,6 @@ export default defineComponent({
       return (
         <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label || ''}>
           {formItemSlots}
-          {/* {{
-            default: () => {
-              console.log(item.field)
-
-              return '2222'
-            }
-          }} */}
         </ElFormItem>
       )
     }

src/components/Form/src/types/index.ts

@@ -53,6 +53,7 @@ type CamelCaseComponentName = keyof typeof ComponentNameEnum extends infer K
 export type ComponentName = CamelCaseComponentName
 
 export interface InputComponentProps {
+  ref?: any
   maxlength?: number | string
   minlength?: number | string
   showWordLimit?: boolean
@@ -98,6 +99,7 @@ export interface InputComponentProps {
 }
 
 export interface AutocompleteComponentProps {
+  ref?: any
   placeholder?: string
   clearable?: boolean
   disabled?: boolean
@@ -130,6 +132,7 @@ export interface AutocompleteComponentProps {
 }
 
 export interface InputNumberComponentProps {
+  ref?: any
   min?: number
   max?: number
   step?: number
@@ -164,6 +167,7 @@ export interface SelectOption {
 }
 
 export interface SelectComponentProps {
+  ref?: any
   multiple?: boolean
   disabled?: boolean
   valueKey?: string
@@ -241,6 +245,7 @@ export interface SelectComponentProps {
 }
 
 export interface SelectV2ComponentProps {
+  ref?: any
   multiple?: boolean
   disabled?: boolean
   valueKey?: string
@@ -285,6 +290,7 @@ export interface SelectV2ComponentProps {
 }
 
 export interface CascaderComponentProps {
+  ref?: any
   options?: Record<string, unknown>[]
   props?: CascaderProps
   size?: ElementPlusSize
@@ -319,6 +325,7 @@ export interface CascaderComponentProps {
 }
 
 export interface SwitchComponentProps {
+  ref?: any
   disabled?: boolean
   loading?: boolean
   size?: ElementPlusSize
@@ -340,6 +347,7 @@ export interface SwitchComponentProps {
 }
 
 export interface RateComponentProps {
+  ref?: any
   max?: number
   size?: ElementPlusSize
   disabled?: boolean
@@ -367,6 +375,7 @@ export interface RateComponentProps {
 }
 
 export interface ColorPickerComponentProps {
+  ref?: any
   disabled?: boolean
   size?: ElementPlusSize
   showAlpha?: boolean
@@ -384,6 +393,7 @@ export interface ColorPickerComponentProps {
 }
 
 export interface TransferComponentProps {
+  ref?: any
   data?: any[]
   filterable?: boolean
   filterPlaceholder?: string
@@ -434,6 +444,7 @@ export interface RadioOption {
   [key: string]: any
 }
 export interface RadioGroupComponentProps {
+  ref?: any
   size?: ElementPlusSize
   disabled?: boolean
   textColor?: string
@@ -461,6 +472,7 @@ export interface RadioGroupComponentProps {
 }
 
 export interface RadioButtonComponentProps {
+  ref?: any
   size?: ElementPlusSize
   disabled?: boolean
   textColor?: string
@@ -506,6 +518,7 @@ export interface CheckboxOption {
 }
 
 export interface CheckboxGroupComponentProps {
+  ref?: any
   size?: ElementPlusSize
   disabled?: boolean
   min?: number
@@ -534,6 +547,7 @@ export interface CheckboxGroupComponentProps {
 }
 
 export interface DividerComponentProps {
+  ref?: any
   min?: number
   max?: number
   disabled?: boolean
@@ -565,6 +579,7 @@ export interface DividerComponentProps {
 }
 
 export interface DatePickerComponentProps {
+  ref?: any
   readonly?: boolean
   disabled?: boolean
   size?: ElementPlusSize
@@ -616,6 +631,7 @@ export interface DatePickerComponentProps {
 }
 
 export interface DateTimePickerComponentProps {
+  ref?: any
   readonly?: boolean
   disabled?: boolean
   editable?: boolean
@@ -656,6 +672,7 @@ export interface DateTimePickerComponentProps {
 }
 
 export interface TimePickerComponentProps {
+  ref?: any
   readonly?: boolean
   disabled?: boolean
   editable?: boolean
@@ -692,6 +709,7 @@ export interface TimePickerComponentProps {
 }
 
 export interface TimeSelectComponentProps {
+  ref?: any
   disabled?: boolean
   editable?: boolean
   clearable?: boolean
@@ -716,6 +734,7 @@ export interface TimeSelectComponentProps {
 }
 
 export interface EditorComponentProps {
+  ref?: any
   editorConfig?: IEditorConfig
   style?: CSSProperties
 }
@@ -796,6 +815,7 @@ export interface FormSchema {
     | DateTimePickerComponentProps
     | TimePickerComponentProps
     | EditorComponentProps
+    | any
 
   /**
    * formItem组件属性，具体可以查看element-plus文档

src/router/index.ts

@@ -148,16 +148,16 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
             meta: {
               title: t('router.defaultForm')
             }
+          },
+          {
+            path: 'use-form',
+            component: () => import('@/views/Components/Form/UseFormDemo.vue'),
+            name: 'UseForm',
+            meta: {
+              title: 'UseForm'
+            }
           }
           // {
-          //   path: 'use-form',
-          //   component: () => import('@/views/Components/Form/UseFormDemo.vue'),
-          //   name: 'UseForm',
-          //   meta: {
-          //     title: 'UseForm'
-          //   }
-          // }
-          // {
           //   path: 'ref-form',
           //   component: () => import('@/views/Components/Form/RefForm.vue'),
           //   name: 'RefForm',

src/views/Components/Form/RefForm.vue

@@ -1,270 +0,0 @@
-<script setup lang="ts">
-import { Form, FormExpose } from '@/components/Form'
-import { ContentWrap } from '@/components/ContentWrap'
-import { useI18n } from '@/hooks/web/useI18n'
-import { reactive, unref, ref } from 'vue'
-import { ElButton } from 'element-plus'
-import { useValidator } from '@/hooks/web/useValidator'
-import { getDictOneApi } from '@/api/common'
-import { FormSchema } from '@/types/form'
-
-const { required } = useValidator()
-
-const { t } = useI18n()
-
-const schema = reactive<FormSchema[]>([
-  {
-    field: 'field1',
-    label: t('formDemo.input'),
-    component: 'Input',
-    formItemProps: {
-      rules: [required()]
-    }
-  },
-  {
-    field: 'field2',
-    label: t('formDemo.select'),
-    component: 'Select',
-    componentProps: {
-      options: [
-        {
-          label: 'option1',
-          value: '1'
-        },
-        {
-          label: 'option2',
-          value: '2'
-        }
-      ]
-    }
-  },
-  {
-    field: 'field3',
-    label: t('formDemo.radio'),
-    component: 'Radio',
-    componentProps: {
-      options: [
-        {
-          label: 'option-1',
-          value: '1'
-        },
-        {
-          label: 'option-2',
-          value: '2'
-        }
-      ]
-    }
-  },
-  {
-    field: 'field4',
-    label: t('formDemo.checkbox'),
-    component: 'Checkbox',
-    value: [],
-    componentProps: {
-      options: [
-        {
-          label: 'option-1',
-          value: '1'
-        },
-        {
-          label: 'option-2',
-          value: '2'
-        },
-        {
-          label: 'option-3',
-          value: '3'
-        }
-      ]
-    }
-  },
-  {
-    field: 'field5',
-    component: 'DatePicker',
-    label: t('formDemo.datePicker'),
-    componentProps: {
-      type: 'date'
-    }
-  },
-  {
-    field: 'field6',
-    component: 'TimeSelect',
-    label: t('formDemo.timeSelect')
-  }
-])
-
-const formRef = ref<FormExpose>()
-
-const changeLabelWidth = (width: number | string) => {
-  unref(formRef)?.setProps({
-    labelWidth: width
-  })
-}
-
-const changeSize = (size: string) => {
-  unref(formRef)?.setProps({
-    size
-  })
-}
-
-const changeDisabled = (bool: boolean) => {
-  unref(formRef)?.setProps({
-    disabled: bool
-  })
-}
-
-const changeSchema = (del: boolean) => {
-  if (del) {
-    unref(formRef)?.delSchema('field2')
-  } else if (!del && schema[1].field !== 'field2') {
-    unref(formRef)?.addSchema(
-      {
-        field: 'field2',
-        label: t('formDemo.select'),
-        component: 'Select',
-        componentProps: {
-          options: [
-            {
-              label: 'option1',
-              value: '1'
-            },
-            {
-              label: 'option2',
-              value: '2'
-            }
-          ]
-        }
-      },
-      1
-    )
-  }
-}
-
-const setValue = (reset: boolean) => {
-  const elFormRef = unref(formRef)?.getElFormRef()
-  if (reset) {
-    elFormRef?.resetFields()
-  } else {
-    unref(formRef)?.setValues({
-      field1: 'field1',
-      field2: '2',
-      field3: '2',
-      field4: ['1', '3'],
-      field5: '2022-01-27',
-      field6: '17:00'
-    })
-  }
-}
-
-const index = ref(7)
-
-const setLabel = () => {
-  unref(formRef)?.setSchema([
-    {
-      field: 'field2',
-      path: 'label',
-      value: `${t('formDemo.select')} ${index.value}`
-    },
-    {
-      field: 'field2',
-      path: 'componentProps.options',
-      value: [
-        {
-          label: 'option-1',
-          value: '1'
-        },
-        {
-          label: 'option-2',
-          value: '2'
-        },
-        {
-          label: 'option-3',
-          value: '3'
-        }
-      ]
-    }
-  ])
-  index.value++
-}
-
-const addItem = () => {
-  if (unref(index) % 2 === 0) {
-    unref(formRef)?.addSchema({
-      field: `field${unref(index)}`,
-      label: `${t('formDemo.input')}${unref(index)}`,
-      component: 'Input'
-    })
-  } else {
-    unref(formRef)?.addSchema(
-      {
-        field: `field${unref(index)}`,
-        label: `${t('formDemo.input')}${unref(index)}`,
-        component: 'Input'
-      },
-      unref(index)
-    )
-  }
-  index.value++
-}
-
-const formValidation = () => {
-  const elFormRef = unref(formRef)?.getElFormRef()
-  elFormRef?.validate()?.catch(() => {})
-}
-
-const verifyReset = () => {
-  const elFormRef = unref(formRef)?.getElFormRef()
-  elFormRef?.resetFields()
-}
-
-const getDictOne = async () => {
-  const res = await getDictOneApi()
-  if (res) {
-    unref(formRef)?.setSchema([
-      {
-        field: 'field2',
-        path: 'componentProps.options',
-        value: res.data
-      }
-    ])
-  }
-}
-</script>
-
-<template>
-  <ContentWrap :title="`RefForm ${t('formDemo.operate')}`">
-    <ElButton @click="changeLabelWidth(150)">{{ t('formDemo.change') }} labelWidth</ElButton>
-    <ElButton @click="changeLabelWidth('auto')">{{ t('formDemo.restore') }} labelWidth</ElButton>
-
-    <ElButton @click="changeSize('large')">{{ t('formDemo.change') }} size</ElButton>
-    <ElButton @click="changeSize('default')">{{ t('formDemo.restore') }} size</ElButton>
-
-    <ElButton @click="changeDisabled(true)">{{ t('formDemo.disabled') }}</ElButton>
-    <ElButton @click="changeDisabled(false)">{{ t('formDemo.disablement') }}</ElButton>
-
-    <ElButton @click="changeSchema(true)">
-      {{ t('formDemo.delete') }} {{ t('formDemo.select') }}
-    </ElButton>
-    <ElButton @click="changeSchema(false)">
-      {{ t('formDemo.add') }} {{ t('formDemo.select') }}
-    </ElButton>
-
-    <ElButton @click="setValue(false)">{{ t('formDemo.setValue') }}</ElButton>
-    <ElButton @click="setValue(true)">{{ t('formDemo.resetValue') }}</ElButton>
-
-    <ElButton @click="setLabel">
-      {{ t('formDemo.set') }} {{ t('formDemo.select') }} label
-    </ElButton>
-
-    <ElButton @click="addItem"> {{ t('formDemo.add') }} {{ t('formDemo.subitem') }} </ElButton>
-
-    <ElButton @click="formValidation"> {{ t('formDemo.formValidation') }} </ElButton>
-    <ElButton @click="verifyReset"> {{ t('formDemo.verifyReset') }} </ElButton>
-
-    <ElButton @click="getDictOne">
-      {{ t('searchDemo.dynamicOptions') }}
-    </ElButton>
-  </ContentWrap>
-  <ContentWrap :title="`RefForm ${t('formDemo.example')}`">
-    <Form :schema="schema" ref="formRef" />
-  </ContentWrap>
-</template>

src/views/Components/Form/UseFormDemo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Form } from '@/components/Form'
+import { Form, FormSchema } from '@/components/Form'
 import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useForm } from '@/hooks/web/useForm'
@@ -7,7 +7,6 @@ import { reactive, unref, ref } from 'vue'
 import { ElButton } from 'element-plus'
 import { useValidator } from '@/hooks/web/useValidator'
 import { getDictOneApi } from '@/api/common'
-import { FormSchema } from '@/types/form'
 
 const { required } = useValidator()
 
@@ -42,7 +41,7 @@ const schema = reactive<FormSchema[]>([
   {
     field: 'field3',
     label: t('formDemo.radio'),
-    component: 'Radio',
+    component: 'RadioGroup',
     componentProps: {
       options: [
         {
@@ -59,7 +58,7 @@ const schema = reactive<FormSchema[]>([
   {
     field: 'field4',
     label: t('formDemo.checkbox'),
-    component: 'Checkbox',
+    component: 'CheckboxGroup',
     value: [],
     componentProps: {
       options: [
@@ -93,9 +92,7 @@ const schema = reactive<FormSchema[]>([
   }
 ])
 
-const { register, methods, elFormRef } = useForm({
+const { register, methods, elFormRef } = useForm()
-  schema
-})
 
 const changeLabelWidth = (width: number | string) => {
   const { setProps } = methods
@@ -241,7 +238,7 @@ const getDictOne = async () => {
 </script>
 
 <template>
-  <ContentWrap :title="`UseForm ${t('formDemo.operate')}`">
+  <ContentWrap :title="`UseForm ${t('formDemo.operate')}`" style="margin-bottom: 20px">
     <ElButton @click="changeLabelWidth(150)">{{ t('formDemo.change') }} labelWidth</ElButton>
     <ElButton @click="changeLabelWidth('auto')">{{ t('formDemo.restore') }} labelWidth</ElButton>
 
@@ -275,6 +272,12 @@ const getDictOne = async () => {
     </ElButton>
   </ContentWrap>
   <ContentWrap :title="`UseForm ${t('formDemo.example')}`">
-    <Form @register="register" />
+    <Form :schema="schema" @register="register" />
   </ContentWrap>
 </template>
+
+<style lang="less" scoped>
+.el-button + .el-button {
+  margin-top: 10px;
+}
+</style>