diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue index b6f324f..6e467f9 100644 --- a/src/components/Form/src/BasicForm.vue +++ b/src/components/Form/src/BasicForm.vue @@ -1,12 +1,12 @@ <template> <Form - v-bind="{ ...$attrs, ...$props }" + v-bind="{ ...$attrs, ...$props, ...getProps }" :class="getFormClass" ref="formElRef" :model="formModel" @keypress.enter="handleEnterPress" > - <Row :style="getRowWrapStyle"> + <Row v-bind="{ ...getRow }"> <slot name="formHeader"></slot> <template v-for="schema in getSchema" :key="schema.field"> <FormItem @@ -62,6 +62,8 @@ import { basicProps } from './props'; import { useDesign } from '/@/hooks/web/useDesign'; + import type { RowProps } from 'ant-design-vue/lib/grid/Row'; + export default defineComponent({ name: 'BasicForm', components: { FormItem, Form, Row, FormAction }, @@ -100,10 +102,13 @@ ]; }); - // Get uniform row style - const getRowWrapStyle = computed((): CSSProperties => { - const { baseRowStyle = {} } = unref(getProps); - return baseRowStyle; + // Get uniform row style and Row configuration for the entire form + const getRow = computed((): CSSProperties | RowProps => { + const { baseRowStyle = {}, rowProps } = unref(getProps); + return { + style: baseRowStyle, + ...rowProps, + }; }); const getSchema = computed((): FormSchema[] => { @@ -253,7 +258,7 @@ formModel, defaultValueRef, advanceState, - getRowWrapStyle, + getRow, getProps, formElRef, getSchema, diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts index 9fab16d..2e3d5b6 100644 --- a/src/components/Form/src/componentMap.ts +++ b/src/components/Form/src/componentMap.ts @@ -16,7 +16,8 @@ import { Switch, TimePicker, TreeSelect, - Slider + Slider, + Rate, } from 'ant-design-vue'; import RadioButtonGroup from './components/RadioButtonGroup.vue'; @@ -46,6 +47,7 @@ componentMap.set('Checkbox', Checkbox); componentMap.set('CheckboxGroup', Checkbox.Group); componentMap.set('Cascader', Cascader); componentMap.set('Slider', Slider); +componentMap.set('Rate', Rate); componentMap.set('DatePicker', DatePicker); componentMap.set('MonthPicker', DatePicker.MonthPicker); diff --git a/src/components/Form/src/props.ts b/src/components/Form/src/props.ts index 2a79a84..a165673 100644 --- a/src/components/Form/src/props.ts +++ b/src/components/Form/src/props.ts @@ -3,7 +3,7 @@ import type { CSSProperties, PropType } from 'vue'; import type { ColEx } from './types'; import type { TableActionType } from '/@/components/Table'; import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes'; - +import type { RowProps } from 'ant-design-vue/lib/grid/Row'; import { propTypes } from '/@/utils/propTypes'; export const basicProps = { @@ -95,4 +95,6 @@ export const basicProps = { colon: propTypes.bool, labelAlign: propTypes.string, + + rowProps: Object as PropType<RowProps>, }; diff --git a/src/components/Form/src/types/form.ts b/src/components/Form/src/types/form.ts index d5159aa..ebf1fdc 100644 --- a/src/components/Form/src/types/form.ts +++ b/src/components/Form/src/types/form.ts @@ -6,6 +6,7 @@ import type { FormItem } from './formItem'; import type { ColEx, ComponentType } from './index'; import type { TableActionType } from '/@/components/Table/src/types/table'; import type { CSSProperties } from 'vue'; +import type { RowProps } from 'ant-design-vue/lib/grid/Row'; export type FieldMapToTime = [string, [string, string], string?][]; @@ -49,11 +50,15 @@ export type RegisterFn = (formInstance: FormActionType) => void; export type UseFormReturnType = [RegisterFn, FormActionType]; export interface FormProps { - // layout?: 'vertical' | 'inline' | 'horizontal'; + layout?: 'vertical' | 'inline' | 'horizontal'; // Form value model?: Recordable; // The width of all items in the entire form labelWidth?: number | string; + //alignment + labelAlign?: 'left' | 'right'; + //Row configuration for the entire form + rowProps?: RowProps; // Submit form on reset submitOnReset?: boolean; // Col configuration for the entire form diff --git a/src/components/Form/src/types/index.ts b/src/components/Form/src/types/index.ts index c637bb7..89174a1 100644 --- a/src/components/Form/src/types/index.ts +++ b/src/components/Form/src/types/index.ts @@ -109,4 +109,5 @@ export type ComponentType = | 'Upload' | 'IconPicker' | 'Render' - | 'Slider'; + | 'Slider' + | 'Rate'; diff --git a/src/views/demo/form/index.vue b/src/views/demo/form/index.vue index 8fb0249..49dfd44 100644 --- a/src/views/demo/form/index.vue +++ b/src/views/demo/form/index.vue @@ -350,6 +350,19 @@ span: 8, }, }, + { + field: 'field22', + component: 'Rate', + label: '字段22', + defaultValue: 3, + colProps: { + span: 8, + }, + componentProps: { + disabled: false, + allowHalf: true, + }, + }, ]; export default defineComponent({