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'
-
-const formExpose = ref<ComponentRef<typeof Form>>()
-const searchRef = ref()
+import ActionButton from './components/ActionButton.vue'
+import { SearchProps } from './types'
 
 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)
-  if (props.showExpand && props.expandField && !unref(visible)) {
-    const index = findIndex(schema, (v: FormSchema) => v.field === props.expandField)
+  let schema: FormSchema[] = cloneDeep(unref(getProps).schema)
+  if (unref(getProps).showExpand && unref(getProps).expandField && !unref(visible)) {
+    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}
-                    showReset={props.showReset}
-                    showExpand={props.showExpand}
+                    showSearch={unref(getProps).showSearch}
+                    showReset={unref(getProps).showReset}
+                    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 { getElFormExpose, getFormData } = methods
+const { formRegister, formMethods } = useForm()
+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,49 +151,86 @@ 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'
   }
 })
 
 const setVisible = async () => {
   visible.value = !unref(visible)
 }
 
-onMounted(async () => {
-  const elFormExpose = await getElFormExpose()
-  emit('register', formExpose, elFormExpose)
-})
+const setSchema = (schemaProps: FormSetProps[]) => {
+  const { schema } = unref(getProps)
+  for (const v of schema) {
+    for (const item of schemaProps) {
+      if (v.field === item.field) {
+        set(v, item.path, item.value)
+      }
+    }
+  }
+}
 
-defineExpose({
-  getElFormExpose
+// 对表单赋值
+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(defaultExpose)
 </script>
 
 <template>
-  <div ref="searchRef">
-    <Form
-      ref="formExpose"
-      :model="formModel"
-      :is-custom="false"
-      :label-width="labelWidth"
-      hide-required-asterisk
-      :inline="inline"
-      :is-col="isCol"
-      :schema="newSchema"
-      @register="register"
-    />
-
-    <template v-if="layout === 'bottom'">
-      <div :style="bottomButtonStyle">
-        <ActionButton
-          :show-reset="showReset"
-          :show-search="showSearch"
-          :show-expand="showExpand"
-          @expand="setVisible"
-          @reset="reset"
-          @search="search"
-        />
-      </div>
-    </template>
-  </div>
+  <Form
+    :model="formModel"
+    :is-custom="false"
+    :label-width="getProps.labelWidth"
+    hide-required-asterisk
+    :inline="getProps.inline"
+    :is-col="getProps.isCol"
+    :schema="newSchema"
+    @register="formRegister"
+  />
+
+  <template v-if="layout === 'bottom'">
+    <div :style="bottomButtonStyle">
+      <ActionButton
+        :show-reset="getProps.showReset"
+        :show-search="getProps.showSearch"
+        :show-expand="getProps.showExpand"
+        @expand="setVisible"
+        @reset="reset"
+        @search="search"
+      />
+    </div>
+  </template>
 </template>

src/components/Search/src/components/ActiconButton.vue → 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,
-    methods
+    formRegister: register,
+    formMethods: methods
   }
 }