feat: Search组件重构

src/components/Search/index.ts

@@ -1,8 +1,15 @@
+import { FormSchema, FormSetProps } from '../Form'
 import Search from './src/Search.vue'
-import { ElForm } from 'element-plus'
+
+export type { SearchProps } from './src/types'
 
 export interface SearchExpose {
-  getElFormExpose: () => Promise<ComponentRef<typeof ElForm>>
+  setValues: (data: Recordable) => void
+  setProps: (props: Recordable) => void
+  delSchema: (field: string) => void
+  addSchema: (formSchema: FormSchema, index?: number) => void
+  setSchema: (schemaProps: FormSetProps[]) => void
+  formModel: Recordable
 }
 
 export { Search }

src/components/Search/src/Search.vue

@@ -1,15 +1,13 @@
 <script setup lang="tsx">
-import { Form, FormSchema } from '@/components/Form'
+import { Form, FormSchema, FormSetProps } from '@/components/Form'
 import { PropType, computed, unref, ref, watch, onMounted } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { useForm } from '@/hooks/web/useForm'
 import { findIndex } from '@/utils'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep, set } from 'lodash-es'
 import { initModel } from '@/components/Form/src/helper'
-import ActionButton from './components/ActiconButton.vue'
+import ActionButton from './components/ActionButton.vue'
-
+import { SearchProps } from './types'
-const formExpose = ref<ComponentRef<typeof Form>>()
-const searchRef = ref()
 
 const props = defineProps({
   // 生成Form的布局结构数组
@@ -50,9 +48,9 @@ const visible = ref(true)
 const formModel = ref<Recordable>({})
 
 const newSchema = computed(() => {
-  let schema: FormSchema[] = cloneDeep(props.schema)
+  let schema: FormSchema[] = cloneDeep(unref(getProps).schema)
-  if (props.showExpand && props.expandField && !unref(visible)) {
+  if (unref(getProps).showExpand && unref(getProps).expandField && !unref(visible)) {
-    const index = findIndex(schema, (v: FormSchema) => v.field === props.expandField)
+    const index = findIndex(schema, (v: FormSchema) => v.field === unref(getProps).expandField)
     schema.map((v, i) => {
       if (i >= index) {
         v.hidden = true
@@ -62,7 +60,7 @@ const newSchema = computed(() => {
       return v
     })
   }
-  if (props.layout === 'inline') {
+  if (unref(getProps).layout === 'inline') {
     schema = schema.concat([
       {
         field: 'action',
@@ -73,9 +71,9 @@ const newSchema = computed(() => {
               return (
                 <div>
                   <ActionButton
-                    showSearch={props.showSearch}
+                    showSearch={unref(getProps).showSearch}
-                    showReset={props.showReset}
+                    showReset={unref(getProps).showReset}
-                    showExpand={props.showExpand}
+                    showExpand={unref(getProps).showExpand}
                     visible={visible.value}
                     onExpand={setVisible}
                     onReset={reset}
@@ -92,8 +90,24 @@ const newSchema = computed(() => {
   return schema
 })
 
-const { register, methods } = useForm()
+const { formRegister, formMethods } = useForm()
-const { getElFormExpose, getFormData } = methods
+const { getElFormExpose, getFormData } = formMethods
+
+// useSearch传入的props
+const outsideProps = ref<SearchProps>({})
+
+const mergeProps = ref<SearchProps>({})
+
+const getProps = computed(() => {
+  const propsObj = { ...props }
+  Object.assign(propsObj, unref(mergeProps))
+  return propsObj
+})
+
+const setProps = (props: SearchProps = {}) => {
+  mergeProps.value = Object.assign(unref(mergeProps), props)
+  outsideProps.value = props
+}
 
 // 监听表单结构化数组，重新生成formModel
 watch(
@@ -109,7 +123,7 @@ watch(
 
 const filterModel = async () => {
   const model = await getFormData()
-  props.removeNoValueItem &&
+  unref(getProps).removeNoValueItem &&
     Object.keys(model).forEach((key) => {
       if (model[key] === void 0 || model[key] === '') {
         delete model[key]
@@ -137,7 +151,7 @@ const reset = async () => {
 
 const bottomButtonStyle = computed(() => {
   return {
-    textAlign: props.buttonPosition as unknown as 'left' | 'center' | 'right'
+    textAlign: unref(getProps).buttonPosition as unknown as 'left' | 'center' | 'right'
   }
 })
 
@@ -145,41 +159,78 @@ const setVisible = async () => {
   visible.value = !unref(visible)
 }
 
-onMounted(async () => {
+const setSchema = (schemaProps: FormSetProps[]) => {
-  const elFormExpose = await getElFormExpose()
+  const { schema } = unref(getProps)
-  emit('register', formExpose, elFormExpose)
+  for (const v of schema) {
+    for (const item of schemaProps) {
+      if (v.field === item.field) {
+        set(v, item.path, item.value)
+      }
+    }
+  }
+}
+
+// 对表单赋值
+const setValues = (data: Recordable = {}) => {
+  formModel.value = Object.assign(unref(formModel), data)
+}
+
+const delSchema = (field: string) => {
+  const { schema } = unref(getProps)
+
+  const index = findIndex(schema, (v: FormSchema) => v.field === field)
+  if (index > -1) {
+    schema.splice(index, 1)
+  }
+}
+
+const addSchema = (formSchema: FormSchema, index?: number) => {
+  const { schema } = unref(getProps)
+  if (index !== void 0) {
+    schema.splice(index, 0, formSchema)
+    return
+  }
+  schema.push(formSchema)
+}
+
+const defaultExpose = {
+  getElFormExpose,
+  setProps,
+  setSchema,
+  setValues,
+  delSchema,
+  addSchema
+}
+
+onMounted(() => {
+  emit('register', defaultExpose)
 })
 
-defineExpose({
+defineExpose(defaultExpose)
-  getElFormExpose
-})
 </script>
 
 <template>
-  <div ref="searchRef">
+  <Form
-    <Form
+    :model="formModel"
-      ref="formExpose"
+    :is-custom="false"
-      :model="formModel"
+    :label-width="getProps.labelWidth"
-      :is-custom="false"
+    hide-required-asterisk
-      :label-width="labelWidth"
+    :inline="getProps.inline"
-      hide-required-asterisk
+    :is-col="getProps.isCol"
-      :inline="inline"
+    :schema="newSchema"
-      :is-col="isCol"
+    @register="formRegister"
-      :schema="newSchema"
+  />
-      @register="register"
-    />
 
-    <template v-if="layout === 'bottom'">
+  <template v-if="layout === 'bottom'">
-      <div :style="bottomButtonStyle">
+    <div :style="bottomButtonStyle">
-        <ActionButton
+      <ActionButton
-          :show-reset="showReset"
+        :show-reset="getProps.showReset"
-          :show-search="showSearch"
+        :show-search="getProps.showSearch"
-          :show-expand="showExpand"
+        :show-expand="getProps.showExpand"
-          @expand="setVisible"
+        @expand="setVisible"
-          @reset="reset"
+        @reset="reset"
-          @search="search"
+        @search="search"
-        />
+      />
-      </div>
+    </div>
-    </template>
+  </template>
-  </div>
 </template>

src/components/Search/src/components/ActionButton.vue

@@ -11,7 +11,6 @@ const { t } = useI18n()
 defineProps({
   showSearch: propTypes.bool.def(true),
   showReset: propTypes.bool.def(true),
-  // 是否显示伸缩
   showExpand: propTypes.bool.def(false),
   visible: propTypes.bool.def(true)
 })

src/components/Search/src/types/index.ts

@@ -0,0 +1,16 @@
+import { FormSchema } from '@/components/Form'
+
+export interface SearchProps {
+  schema?: FormSchema[]
+  isCol?: boolean
+  labelWidth?: string | number
+  layout?: 'inline' | 'bottom'
+  buttonPosition?: 'left' | 'right' | 'center'
+  showSearch?: boolean
+  showReset?: boolean
+  showExpand?: boolean
+  expandField?: string
+  inline?: boolean
+  removeNoValueItem?: boolean
+  model?: Recordable
+}

src/hooks/web/useForm.ts

@@ -119,7 +119,7 @@ export const useForm = () => {
   }
 
   return {
-    register,
+    formRegister: register,
-    methods
+    formMethods: methods
   }
 }

src/hooks/web/useSearch.ts

@@ -1,44 +1,39 @@
-import type { Form, FormExpose } from '@/components/Form'
-import type { ElForm, ElFormItem } from 'element-plus'
 import { ref, unref, nextTick } from 'vue'
-import { FormSchema, FormSetProps, FormProps } from '@/components/Form'
+import { FormSchema, FormSetProps } from '@/components/Form'
+import { SearchExpose, SearchProps } from '@/components/Search'
 
 export const useSearch = () => {
   // Search实例
-  const formRef = ref<typeof Form & FormExpose>()
+  const searchRef = ref<SearchExpose>()
-
-  // ElForm实例
-  const elFormRef = ref<ComponentRef<typeof ElForm>>()
 
   /**
-   * @param ref Form实例
+   * @param ref Search实例
    * @param elRef ElForm实例
    */
-  const register = (ref: typeof Form & FormExpose, elRef: ComponentRef<typeof ElForm>) => {
+  const register = (ref: SearchExpose) => {
-    formRef.value = ref
+    searchRef.value = ref
-    elFormRef.value = elRef
   }
 
-  const getForm = async () => {
+  const getSearch = async () => {
     await nextTick()
-    const form = unref(formRef)
+    const search = unref(searchRef)
-    if (!form) {
+    if (!search) {
       console.error('The Search is not registered. Please use the register method to register')
     }
-    return form
+    return search
   }
 
   // 一些内置的方法
   const methods = {
     /**
-     * @description 设置form组件的props
+     * @description 设置search组件的props
      * @param field FormItem的field
      */
-    setProps: async (props: FormProps = {}) => {
+    setProps: async (props: SearchProps = {}) => {
-      const form = await getForm()
+      const search = await getSearch()
-      form?.setProps(props)
+      search?.setProps(props)
       if (props.model) {
-        form?.setValues(props.model)
+        search?.setValues(props.model)
       }
     },
 
@@ -47,8 +42,8 @@ export const useSearch = () => {
      * @param data 需要设置的数据
      */
     setValues: async (data: Recordable) => {
-      const form = await getForm()
+      const search = await getSearch()
-      form?.setValues(data)
+      search?.setValues(data)
     },
 
     /**
@@ -56,8 +51,8 @@ export const useSearch = () => {
      * @param schemaProps 需要设置的schemaProps
      */
     setSchema: async (schemaProps: FormSetProps[]) => {
-      const form = await getForm()
+      const search = await getSearch()
-      form?.setSchema(schemaProps)
+      search?.setSchema(schemaProps)
     },
 
     /**
@@ -66,8 +61,8 @@ export const useSearch = () => {
      * @param index 在哪里新增
      */
     addSchema: async (formSchema: FormSchema, index?: number) => {
-      const form = await getForm()
+      const search = await getSearch()
-      form?.addSchema(formSchema, index)
+      search?.addSchema(formSchema, index)
     },
 
     /**
@@ -75,8 +70,8 @@ export const useSearch = () => {
      * @param field 删除哪个数据
      */
     delSchema: async (field: string) => {
-      const form = await getForm()
+      const search = await getSearch()
-      form?.delSchema(field)
+      search?.delSchema(field)
     },
 
     /**
@@ -84,42 +79,13 @@ export const useSearch = () => {
      * @returns form data
      */
     getFormData: async <T = Recordable>(): Promise<T> => {
-      const form = await getForm()
+      const search = await getSearch()
-      return form?.formModel as T
+      return search?.formModel as T
-    },
-
-    /**
-     * @description 获取表单组件的实例
-     * @param field 表单项唯一标识
-     * @returns component instance
-     */
-    getComponentExpose: async (field: string) => {
-      const form = await getForm()
-      return form?.getComponentExpose(field)
-    },
-
-    /**
-     * @description 获取formItem组件的实例
-     * @param field 表单项唯一标识
-     * @returns formItem instance
-     */
-    getFormItemExpose: async (field: string) => {
-      const form = await getForm()
-      return form?.getFormItemExpose(field) as ComponentRef<typeof ElFormItem>
-    },
-
-    /**
-     * @description 获取ElForm组件的实例
-     * @returns ElForm instance
-     */
-    getElFormExpose: async () => {
-      await getForm()
-      return unref(elFormRef)
     }
   }
 
   return {
-    register,
+    searchRegister: register,
-    methods
+    searchMethods: methods
   }
 }

src/views/Components/Form/DefaultForm.vue

@@ -6,7 +6,6 @@ import { useIcon } from '@/hooks/web/useIcon'
 import { ContentWrap } from '@/components/ContentWrap'
 import { useAppStore } from '@/store/modules/app'
 import { SelectOption, RadioOption, CheckboxOption, FormSchema } from '@/components/Form'
-import { useForm } from '@/hooks/web/useForm'
 import {
   ElOption,
   ElOptionGroup,
@@ -1455,18 +1454,11 @@ const schema = reactive<FormSchema[]>([
     }
   }
 ])
-
-const { register, formRef, methods } = useForm()
 </script>
 
 <template>
   <ContentWrap :title="t('formDemo.defaultForm')" :message="t('formDemo.formDes')">
-    <Form
+    <Form :schema="schema" label-width="auto" :label-position="isMobile ? 'top' : 'right'" />
-      @register="register"
-      :schema="schema"
-      label-width="auto"
-      :label-position="isMobile ? 'top' : 'right'"
-    />
   </ContentWrap>
 </template>
 

src/views/Components/Form/UseFormDemo.vue

@@ -95,7 +95,7 @@ const schema = reactive<FormSchema[]>([
   }
 ])
 
-const { register, methods } = useForm()
+const { formRegister, formMethods } = useForm()
 const {
   setProps,
   delSchema,
@@ -105,7 +105,7 @@ const {
   getComponentExpose,
   getFormItemExpose,
   getElFormExpose
-} = methods
+} = formMethods
 
 const changeLabelWidth = (width: number | string) => {
   setProps({
@@ -200,7 +200,6 @@ const setLabel = () => {
 }
 
 const addItem = () => {
-  const { addSchema } = methods
   if (unref(index) % 2 === 0) {
     addSchema({
       field: `field${unref(index)}`,
@@ -235,7 +234,6 @@ const verifyReset = async () => {
 const getDictOne = async () => {
   const res = await getDictOneApi()
   if (res) {
-    const { setSchema } = methods
     setSchema([
       {
         field: 'field2',
@@ -303,7 +301,7 @@ const inoutValidation = async () => {
     </ElButton>
   </ContentWrap>
   <ContentWrap :title="`UseForm ${t('formDemo.example')}`">
-    <Form :schema="schema" @register="register" />
+    <Form :schema="schema" @register="formRegister" />
   </ContentWrap>
 </template>
 

src/views/Components/Search.vue

@@ -10,8 +10,8 @@ import { useSearch } from '@/hooks/web/useSearch'
 
 const { t } = useI18n()
 
-const { register, methods } = useSearch()
+const { searchRegister, searchMethods } = useSearch()
-const { setSchema } = methods
+const { setSchema, setProps } = searchMethods
 
 const schema = reactive<FormSchema[]>([
   {
@@ -131,7 +131,10 @@ const schema = reactive<FormSchema[]>([
 const isGrid = ref(false)
 
 const changeGrid = (grid: boolean) => {
-  isGrid.value = grid
+  setProps({
+    isCol: grid
+  })
+  // isGrid.value = grid
 }
 
 const layout = ref('inline')
@@ -153,7 +156,7 @@ const getDictOne = async () => {
     setSchema([
       {
         field: 'field2',
-        path: 'componentPorps.options',
+        path: 'componentProps.options',
         value: res.data
       }
     ])
@@ -203,7 +206,7 @@ const handleSearch = (data: any) => {
       expand-field="field6"
       @search="handleSearch"
       @reset="handleSearch"
-      @register="register"
+      @register="searchRegister"
     />
   </ContentWrap>
 </template>