feat: Form useForm 完成

kailong321200875 · Jun 21, 2023 · 3e4e27c · 3e4e27c
1 parent 097b32e
commit 3e4e27c
Show file tree

Hide file tree

Showing 9 changed files with 173 additions and 26 deletions.
diff --git a/src/components/Editor/src/Editor.vue b/src/components/Editor/src/Editor.vue
@@ -115,7 +115,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="border-1 border-solid border-[var(--tags-view-border-color)] z-99">
+  <div class="border-1 border-solid border-[var(--tags-view-border-color)] z-10">
     <!-- 工具栏 -->
     <Toolbar
       :editor="editorRef"

diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
@@ -41,6 +41,8 @@ export interface FormExpose {
   setSchema: (schemaProps: FormSetProps[]) => void
   formModel: Recordable
   getElFormRef: () => ComponentRef<typeof ElForm>
+  getComponentExpose: (field: string) => any
+  getFormItemExpose: (field: string) => any
 }
 
 export { Form }
diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue
@@ -73,6 +73,12 @@ export default defineComponent({
       return propsObj
     })
 
+    // 存储表单实例
+    const formComponents = ref({})
+
+    // 存储form-item实例
+    const formItemComponents = ref({})
+
     // 表单数据
     const formModel = ref<Recordable>({})
 
@@ -125,7 +131,37 @@ export default defineComponent({
 
     const getOptions = async (fn: Function, field: string) => {
       const options = await fn()
-      console.log(field, options)
+      setSchema([
+        {
+          field,
+          path: 'componentProps.options',
+          value: options
+        }
+      ])
+    }
+
+    /**
+     * @description: 获取表单组件实例
+     * @param filed 表单字段
+     */
+    const getComponentExpose = (filed: string) => {
+      return unref(formComponents)[filed]
+    }
+
+    /**
+     * @description: 获取formItem实例
+     * @param filed 表单字段
+     */
+    const getFormItemExpose = (filed: string) => {
+      return unref(formItemComponents)[filed]
+    }
+
+    const setComponentRefMap = (ref: any, filed: string) => {
+      formComponents.value[filed] = ref
+    }
+
+    const setFormItemRefMap = (ref: any, filed: string) => {
+      formItemComponents.value[filed] = ref
     }
 
     expose({
@@ -135,14 +171,15 @@ export default defineComponent({
       delSchema,
       addSchema,
       setSchema,
-      getElFormRef
+      getElFormRef,
+      getComponentExpose,
+      getFormItemExpose
     })
 
     // 监听表单结构化数组，重新生成formModel
     watch(
       () => unref(getProps).schema,
       (schema = []) => {
-        console.log('@@####')
         formModel.value = initModel(schema, unref(formModel))
       },
       {
@@ -193,8 +230,8 @@ export default defineComponent({
       }
       const formItemSlots: Recordable = {
         default: () => {
-          if (slots[item.field]) {
-            return getSlot(slots, item.field, formModel.value)
+          if (item?.formItemProps?.slots?.default) {
+            return item?.formItemProps?.slots?.default(formModel.value)
           } else {
             const Com = componentMap[item.component as string] as ReturnType<typeof defineComponent>
 
@@ -254,6 +291,7 @@ export default defineComponent({
               return (
                 <Com
                   vModel={formModel.value[item.field]}
+                  ref={(el: any) => setComponentRefMap(el, item.field)}
                   {...(autoSetPlaceholder && setTextPlaceholder(item))}
                   {...setComponentProps(item)}
                   style={item.componentProps?.style || {}}
@@ -278,7 +316,12 @@ export default defineComponent({
         }
       }
       return (
-        <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label || ''}>
+        <ElFormItem
+          ref={(el: any) => setFormItemRefMap(el, item.field)}
+          {...(item.formItemProps || {})}
+          prop={item.field}
+          label={item.label || ''}
+        >
           {formItemSlots}
         </ElFormItem>
       )

diff --git a/src/components/Form/src/types/index.ts b/src/components/Form/src/types/index.ts
@@ -756,6 +756,7 @@ export interface FormSetProps {
 }
 
 export interface FormItemProps {
+  ref?: any
   labelWidth?: string | number
   required?: boolean
   rules?: FormItemRule | FormItemRule[]

diff --git a/src/hooks/web/useForm.ts b/src/hooks/web/useForm.ts
@@ -1,5 +1,5 @@
 import type { Form, FormExpose } from '@/components/Form'
-import type { ElForm } from 'element-plus'
+import type { ElForm, ElFormItem } from 'element-plus'
 import { ref, unref, nextTick } from 'vue'
 import { FormSchema, FormSetProps, FormProps } from '@/components/Form'
 
@@ -74,12 +74,26 @@ export const useForm = () => {
     getFormData: async <T = Recordable>(): Promise<T> => {
       const form = await getForm()
       return form?.formModel as T
+    },
+
+    getComponentExpose: async (field: string) => {
+      const form = await getForm()
+      return form?.getComponentExpose(field)
+    },
+
+    getFormItemExpose: async (field: string) => {
+      const form = await getForm()
+      return form?.getFormItemExpose(field) as ComponentRef<typeof ElFormItem>
+    },
+
+    getElFormExpose: async () => {
+      await getForm()
+      return unref(elFormRef)
     }
   }
 
   return {
     register,
-    formRef: elFormRef,
     methods
   }
 }
diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -285,7 +285,9 @@ export default {
     richText: 'Rich text',
     form: 'Form',
     // 远程加载
-    remoteLoading: 'Remote loading'
+    remoteLoading: 'Remote loading',
+    // 聚焦
+    focus: 'Focus'
   },
   guideDemo: {
     guide: 'Guide',

diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
@@ -284,7 +284,9 @@ export default {
     richText: '富文本编辑器',
     form: '表单',
     // 远程加载
-    remoteLoading: '远程加载'
+    remoteLoading: '远程加载',
+    // 聚焦
+    focus: '聚焦'
   },
   guideDemo: {
     guide: '引导页',

diff --git a/src/views/Components/Form/DefaultForm.vue b/src/views/Components/Form/DefaultForm.vue
@@ -14,7 +14,8 @@ import {
   ElRadio,
   ElRadioButton,
   ElCheckbox,
-  ElCheckboxButton
+  ElCheckboxButton,
+  ElInput
 } from 'element-plus'
 import { getDictOneApi } from '@/api/common'
 
@@ -1384,6 +1385,18 @@ const schema = reactive<FormSchema[]>([
       }
     }
   },
+  {
+    field: 'field69-1',
+    component: 'Input',
+    label: `custom formItem`,
+    formItemProps: {
+      slots: {
+        default: (formModel: any) => {
+          return <ElInput v-model={formModel['field69-1']} />
+        }
+      }
+    }
+  },
   {
     field: 'field70',
     component: 'Divider',
@@ -1401,6 +1414,45 @@ const schema = reactive<FormSchema[]>([
       const res = await getDictOneApi()
       return res.data
     }
+  },
+  {
+    field: 'field72',
+    label: `${t('formDemo.selectV2')}`,
+    component: 'SelectV2',
+    componentProps: {
+      options: []
+    },
+    // 远程加载option
+    optionApi: async () => {
+      const res = await getDictOneApi()
+      return res.data
+    }
+  },
+  {
+    field: 'field73',
+    label: `${t('formDemo.checkboxGroup')}`,
+    component: 'CheckboxGroup',
+    componentProps: {
+      options: []
+    },
+    // 远程加载option
+    optionApi: async () => {
+      const res = await getDictOneApi()
+      return res.data
+    }
+  },
+  {
+    field: 'field74',
+    label: `${t('formDemo.radioGroup')}`,
+    component: 'RadioGroup',
+    componentProps: {
+      options: []
+    },
+    // 远程加载option
+    optionApi: async () => {
+      const res = await getDictOneApi()
+      return res.data
+    }
   }
 ])