diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue index c15c3a4..8867d6d 100644 --- a/src/components/Form/src/Form.vue +++ b/src/components/Form/src/Form.vue @@ -18,6 +18,7 @@ import { useRenderChcekbox } from './components/useRenderChcekbox' import { useDesign } from '@/hooks/web/useDesign' import { findIndex } from '@/utils' import { set } from 'lodash-es' +import { FormProps } from './types' const { getPrefixCls } = useDesign() @@ -51,11 +52,11 @@ export default defineComponent({ const elFormRef = ref>() // useForm传入的props - const outsideProps = ref({}) + const outsideProps = ref({ ...props }) - const getProps = computed(() => Object.assign({ ...props }, unref(outsideProps))) - - const { schema, isCol, isCustom, autoSetPlaceholder } = unref(getProps) + const getProps = computed(() => { + return { ...props, ...unref(outsideProps) } + }) // 表单数据 const formModel = ref({}) @@ -69,11 +70,13 @@ export default defineComponent({ formModel.value = Object.assign(unref(formModel), data) } - const setProps = (props: Recordable) => { - outsideProps.value = props + const setProps = (props: FormProps = {}) => { + outsideProps.value = Object.assign(unref(formModel), props) } const delSchema = (field: string) => { + const { schema } = unref(getProps) + const index = findIndex(schema, (v: FormSchema) => v.field === field) if (index > -1) { schema.splice(index, 1) @@ -81,6 +84,7 @@ export default defineComponent({ } const addSchema = (formSchema: FormSchema, index?: number) => { + const { schema } = unref(getProps) if (index !== void 0) { schema.splice(index, 0, formSchema) return @@ -89,6 +93,7 @@ export default defineComponent({ } const setSchema = (schemaProps: FormSetPropsType[]) => { + const { schema } = unref(getProps) for (const v of schema) { for (const item of schemaProps) { if (v.field === item.field) { @@ -114,8 +119,8 @@ export default defineComponent({ // 监听表单结构化数组,重新生成formModel watch( - () => schema, - (schema) => { + () => unref(getProps).schema, + (schema = []) => { formModel.value = initModel(schema, unref(formModel)) }, { @@ -126,6 +131,7 @@ export default defineComponent({ // 渲染包裹标签,是否使用栅格布局 const renderWrap = () => { + const { isCol } = unref(getProps) const content = isCol ? ( {renderFormItemWrap()} ) : ( @@ -137,6 +143,8 @@ export default defineComponent({ // 是否要渲染el-col const renderFormItemWrap = () => { // hidden属性表示隐藏,不做渲染 + const { schema = [], isCol } = unref(getProps) + return schema .filter((v) => !v.hidden) .map((item) => { @@ -176,6 +184,9 @@ export default defineComponent({ const Com = componentMap[item.component as string] as ReturnType< typeof defineComponent > + + const { autoSetPlaceholder } = unref(getProps) + return slots[item.field] ? ( getSlot(slots, item.field, { item }) ) : ( @@ -233,7 +244,10 @@ export default defineComponent({ {{ // 如果需要自定义,就什么都不渲染,而是提供默认插槽 - default: () => (isCustom ? getSlot(slots, 'default') : renderWrap()) + default: () => { + const { isCustom } = unref(getProps) + return isCustom ? getSlot(slots, 'default') : renderWrap() + } }} ) diff --git a/src/components/Form/src/helper.ts b/src/components/Form/src/helper.ts index 88c085a..60b3a3b 100644 --- a/src/components/Form/src/helper.ts +++ b/src/components/Form/src/helper.ts @@ -1,16 +1,10 @@ import { useI18n } from '@/hooks/web/useI18n' import type { Slots } from 'vue' import { getSlot } from '@/utils/tsxHelper' +import { PlaceholderMoel } from './types' const { t } = useI18n() -interface PlaceholderMoel { - placeholder?: string - startPlaceholder?: string - endPlaceholder?: string - rangeSeparator?: string -} - /** * * @param schema 对应组件数据 diff --git a/src/components/Form/src/types.ts b/src/components/Form/src/types.ts new file mode 100644 index 0000000..fb650ba --- /dev/null +++ b/src/components/Form/src/types.ts @@ -0,0 +1,15 @@ +export interface PlaceholderMoel { + placeholder?: string + startPlaceholder?: string + endPlaceholder?: string + rangeSeparator?: string +} + +export type FormProps = { + schema?: FormSchema[] + isCol?: boolean + model?: Recordable + autoSetPlaceholder?: boolean + isCustom?: boolean + labelWidth?: string | number +} & Recordable diff --git a/src/hooks/web/useForm.ts b/src/hooks/web/useForm.ts index ec0e766..0745bba 100644 --- a/src/hooks/web/useForm.ts +++ b/src/hooks/web/useForm.ts @@ -1,8 +1,9 @@ import type { Form, FormExpose } from '@/components/Form' import type { ElForm } from 'element-plus' import { ref, unref, nextTick } from 'vue' +import type { FormProps } from '@/components/Form/src/types' -export const useForm = () => { +export const useForm = (props?: FormProps) => { // From实例 const formRef = ref() @@ -19,11 +20,11 @@ export const useForm = () => { } const getForm = async () => { + await nextTick() const form = unref(formRef) if (!form) { console.error('The form is not registered. Please use the register method to register') } - await nextTick() return form } @@ -36,8 +37,9 @@ export const useForm = () => { addSchema: (formSchema: FormSchema, index?: number) => void delSchema: (field: string) => void } = { - setProps: async (props: Recordable = {}) => { + setProps: async (props: FormProps = {}) => { const form = await getForm() + console.log(form) form?.setProps(props) }, @@ -80,6 +82,8 @@ export const useForm = () => { } } + props && methods.setProps(props) + return { register, elFormRef, diff --git a/src/views/Components/Form/UseFormDemo.vue b/src/views/Components/Form/UseFormDemo.vue index e8773a5..8a738a2 100644 --- a/src/views/Components/Form/UseFormDemo.vue +++ b/src/views/Components/Form/UseFormDemo.vue @@ -89,7 +89,9 @@ const schema = reactive([ } ]) -const { register, methods, elFormRef } = useForm() +const { register, methods, elFormRef } = useForm({ + schema +}) const changeLabelWidth = (width: number | string) => { const { setProps } = methods @@ -251,6 +253,6 @@ const verifyReset = () => { {{ t('formDemo.verifyReset') }} -
+