diff --git a/src/components/Search/index.ts b/src/components/Search/index.ts index 6346ffa45..68e74b4bd 100644 --- a/src/components/Search/index.ts +++ b/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> + 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 } diff --git a/src/components/Search/src/Search.vue b/src/components/Search/src/Search.vue index c05eab520..c2056ef99 100644 --- a/src/components/Search/src/Search.vue +++ b/src/components/Search/src/Search.vue @@ -1,15 +1,13 @@ diff --git a/src/components/Search/src/components/ActiconButton.vue b/src/components/Search/src/components/ActionButton.vue similarity index 97% rename from src/components/Search/src/components/ActiconButton.vue rename to src/components/Search/src/components/ActionButton.vue index d03bfadc5..f99e0d39e 100644 --- a/src/components/Search/src/components/ActiconButton.vue +++ b/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) }) diff --git a/src/components/Search/src/types/index.ts b/src/components/Search/src/types/index.ts new file mode 100644 index 000000000..7a1901da7 --- /dev/null +++ b/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 +} diff --git a/src/hooks/web/useForm.ts b/src/hooks/web/useForm.ts index 8e3d94b8c..3d06bd3ac 100644 --- a/src/hooks/web/useForm.ts +++ b/src/hooks/web/useForm.ts @@ -119,7 +119,7 @@ export const useForm = () => { } return { - register, - methods + formRegister: register, + formMethods: methods } } diff --git a/src/hooks/web/useSearch.ts b/src/hooks/web/useSearch.ts index d714407f8..c3503eef3 100644 --- a/src/hooks/web/useSearch.ts +++ b/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() - - // ElForm实例 - const elFormRef = ref>() + const searchRef = ref() /** - * @param ref Form实例 + * @param ref Search实例 * @param elRef ElForm实例 */ - const register = (ref: typeof Form & FormExpose, elRef: ComponentRef) => { - formRef.value = ref - elFormRef.value = elRef + const register = (ref: SearchExpose) => { + searchRef.value = ref } - const getForm = async () => { + const getSearch = async () => { await nextTick() - const form = unref(formRef) - if (!form) { + const search = unref(searchRef) + 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 = {}) => { - const form = await getForm() - form?.setProps(props) + setProps: async (props: SearchProps = {}) => { + const search = await getSearch() + 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() - form?.setValues(data) + const search = await getSearch() + search?.setValues(data) }, /** @@ -56,8 +51,8 @@ export const useSearch = () => { * @param schemaProps 需要设置的schemaProps */ setSchema: async (schemaProps: FormSetProps[]) => { - const form = await getForm() - form?.setSchema(schemaProps) + const search = await getSearch() + search?.setSchema(schemaProps) }, /** @@ -66,8 +61,8 @@ export const useSearch = () => { * @param index 在哪里新增 */ addSchema: async (formSchema: FormSchema, index?: number) => { - const form = await getForm() - form?.addSchema(formSchema, index) + const search = await getSearch() + search?.addSchema(formSchema, index) }, /** @@ -75,8 +70,8 @@ export const useSearch = () => { * @param field 删除哪个数据 */ delSchema: async (field: string) => { - const form = await getForm() - form?.delSchema(field) + const search = await getSearch() + search?.delSchema(field) }, /** @@ -84,42 +79,13 @@ export const useSearch = () => { * @returns form data */ getFormData: async (): Promise => { - const form = await getForm() - return form?.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 - }, - - /** - * @description 获取ElForm组件的实例 - * @returns ElForm instance - */ - getElFormExpose: async () => { - await getForm() - return unref(elFormRef) + const search = await getSearch() + return search?.formModel as T } } return { - register, - methods + searchRegister: register, + searchMethods: methods } } diff --git a/src/views/Components/Form/DefaultForm.vue b/src/views/Components/Form/DefaultForm.vue index e3a2d049b..d40044027 100644 --- a/src/views/Components/Form/DefaultForm.vue +++ b/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([ } } ]) - -const { register, formRef, methods } = useForm() diff --git a/src/views/Components/Form/UseFormDemo.vue b/src/views/Components/Form/UseFormDemo.vue index a4a000a4e..1f8cceb38 100644 --- a/src/views/Components/Form/UseFormDemo.vue +++ b/src/views/Components/Form/UseFormDemo.vue @@ -95,7 +95,7 @@ const schema = reactive([ } ]) -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 () => { -
+ diff --git a/src/views/Components/Search.vue b/src/views/Components/Search.vue index 4f1f40d16..2c3db313e 100644 --- a/src/views/Components/Search.vue +++ b/src/views/Components/Search.vue @@ -10,8 +10,8 @@ import { useSearch } from '@/hooks/web/useSearch' const { t } = useI18n() -const { register, methods } = useSearch() -const { setSchema } = methods +const { searchRegister, searchMethods } = useSearch() +const { setSchema, setProps } = searchMethods const schema = reactive([ { @@ -131,7 +131,10 @@ const schema = reactive([ 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" />