diff --git a/src/views/demo/form/UseForm.vue b/src/views/demo/form/UseForm.vue index f03eac032c99cc6672ce124a6654aa33ee12cfe2..a2607f689baab70c66e9983de1fc7476dbf28b47 100644 --- a/src/views/demo/form/UseForm.vue +++ b/src/views/demo/form/UseForm.vue @@ -49,6 +49,17 @@ { value: 'default', label: 'defualt' }, ]; + const layoutList = [ + { value: 'vertical', label: 'vertical' }, + { value: 'inline', label: 'inline' }, + { value: 'horizontal', label: 'horizontal' }, + ]; + + const labelAlignList = [ + { value: 'left', label: 'left' }, + { value: 'right', label: 'right' }, + ]; + const schemas: FormSchema[] = [ { field: 'field1', @@ -157,10 +168,9 @@ }, }, ]; - const formSchemas: FormSchema[] = [ { - field: '', + field: 'd1', component: 'Divider', label: '基础属性', colProps: { span: 24 }, @@ -168,15 +178,39 @@ orientation: 'center', }, }, + { + field: 'name', + defaultValue: 'useForm', + component: 'Input', + label: 'name', + colProps: { span: 24 }, + }, + { + field: 'layout', + defaultValue: 'horizontal', + component: 'RadioButtonGroup', + label: 'layout', + colProps: { span: 24 }, + componentProps: { + options: layoutList, + }, + }, + { + field: 'labelAlign', + defaultValue: 'right', + component: 'RadioButtonGroup', + label: 'labelAlign', + colProps: { span: 24 }, + componentProps: { + options: labelAlignList, + }, + }, { field: 'labelWidth', defaultValue: 120, component: 'InputNumber', label: 'labelWidth', colProps: { span: 24 }, - componentProps: { - size: 'small', - }, }, { field: 'size', @@ -186,18 +220,21 @@ colProps: { span: 24 }, componentProps: { options: sizeList, - size: 'small', }, }, + { + field: 'colon', + defaultValue: false, + component: 'Switch', + label: 'colon', + colProps: { span: 24 }, + }, { field: 'disabled', defaultValue: false, component: 'Switch', label: 'disabled', colProps: { span: 24 }, - componentProps: { - size: 'small', - }, }, { field: 'compact', @@ -205,32 +242,99 @@ component: 'Switch', label: 'compact', colProps: { span: 24 }, - componentProps: { - size: 'small', - }, }, { - field: '', + field: 'autoSetPlaceHolder', + defaultValue: true, + component: 'Switch', + label: 'autoSetPlaceHolder', + colProps: { span: 24 }, + }, + { + field: 'autoSubmitOnEnter', + defaultValue: false, + component: 'Switch', + label: 'autoSubmitOnEnter', + colProps: { span: 24 }, + }, + { + field: 'showAdvancedButton', + defaultValue: false, + component: 'Switch', + label: 'showAdvancedButton', + colProps: { span: 24 }, + }, + + { + field: 'd2', component: 'Divider', - label: '网格布局', + label: '网格布局(rowProps)', colProps: { span: 24 }, componentProps: { orientation: 'center', }, }, { - field: 'actionColOptions.span', - component: 'Slider', - defaultValue: 24, - label: 'span', + field: 'rowProps.gutter.0', + component: 'InputNumber', + defaultValue: 0, + label: 'Horizontal Gutter', colProps: { span: 24 }, componentProps: { - min: 1, - max: 24, + addonAfter: 'px', }, }, { - field: '', + field: 'rowProps.gutter.1', + component: 'InputNumber', + defaultValue: 0, + label: 'Vertical Gutter', + colProps: { span: 24 }, + componentProps: { + addonAfter: 'px', + }, + }, + { + field: 'rowProps.align', + defaultValue: 'top', + component: 'Select', + label: 'align', + colProps: { span: 24 }, + componentProps: { + options: [ + { value: 'stretch', label: 'stretch' }, + { value: 'bottom', label: 'bottom' }, + { value: 'top', label: 'top' }, + { value: 'middle', label: 'middle' }, + ], + }, + }, + { + field: 'rowProps.justify', + defaultValue: 'start', + component: 'Select', + label: 'justify', + colProps: { span: 24 }, + componentProps: { + options: [ + { value: 'space-around', label: 'space-around' }, + { value: 'space-between', label: 'space-between' }, + { value: 'center', label: 'center' }, + { value: 'end', label: 'end' }, + { value: 'start', label: 'start' }, + ], + }, + }, + { + field: 'wrap', + defaultValue: true, + component: 'Switch', + label: 'wrap', + colProps: { span: 24 }, + }, + + { + field: 'd3', component: 'Divider', label: '操作按钮', colProps: { span: 24 }, @@ -242,11 +346,10 @@ field: 'showActionButtonGroup', defaultValue: true, component: 'Switch', - label: '操作按钮', + label: 'showActionButtonGroup', colProps: { span: 24 }, componentProps: ({ formActionType }) => { return { - size: 'small', onChange: async (val: boolean) => { formActionType.updateSchema([ { field: 'showResetButton', componentProps: { disabled: !val } }, @@ -254,6 +357,10 @@ field: 'showSubmitButton', componentProps: { disabled: !val }, }, + { + field: 'actionColOptions.span', + componentProps: { disabled: !val }, + }, ]); }, }; @@ -263,24 +370,36 @@ field: 'showResetButton', defaultValue: true, component: 'Switch', - label: '重置按钮', + label: 'showResetButton', colProps: { span: 24 }, - componentProps: { - size: 'small', - }, }, { field: 'showSubmitButton', defaultValue: true, component: 'Switch', - label: '提交按钮', + label: 'showSubmitButton', + colProps: { span: 24 }, + }, + + { + field: 'd4', + component: 'Divider', + label: '操作按钮网格布局(actionColOptions)', colProps: { span: 24 }, componentProps: { - size: 'small', + orientation: 'center', }, }, { - field: '', + field: 'actionColOptions.span', + component: 'Slider', + defaultValue: 24, + label: 'span', + colProps: { span: 24 }, + componentProps: { min: 0, max: 24 }, + }, + { + field: 'd5', component: 'Divider', label: '其他事件', colProps: { span: 24 }, @@ -309,32 +428,29 @@ const visible = ref(false); const settingFormRef = ref(); const [registerSetting] = useForm({ - labelWidth: 80, + size: 'small', schemas: formSchemas, compact: true, actionColOptions: { span: 24 }, showActionButtonGroup: false, }); - const resetSettings = async () => { setProps({ resetButtonOptions: { disabled: false, text: '重置' } }); setProps({ submitButtonOptions: { disabled: false, loading: false } }); await setFieldsValue({ field9: [] }); await settingFormRef.value?.resetFields(); }; - const handleSubmitSetting = async (values: Recordable) => { + console.log(values); await setProps(values); visible.value = false; }; - const [register, { setProps, setFieldsValue, updateSchema }] = useForm({ labelWidth: 120, schemas, actionColOptions: { span: 24 }, fieldMapToTime: [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM']], }); - async function handleLoad() { const promiseFn = function () { return new Promise((resolve) => { @@ -348,9 +464,7 @@ }, 1000); }); }; - const item = await promiseFn(); - const { field9, province, city, district } = item as any; await updateSchema({ field: 'field9', @@ -359,16 +473,14 @@ }, }); await setFieldsValue({ field9 }); + visible.value = false; } - const showDrawer = () => { visible.value = true; }; - const onSettings = () => { settingFormRef.value?.submit(); }; - const withClose = (formProps: Partial) => { setProps(formProps); visible.value = false;