feat(form): add 'layout', 'labelAlign', 'rowProps' option (#651)

* feat(form): add 'layout', 'labelAlign', 'rowProps' option 1.添加Form布局方式,当layout: 'vertical',labelWidth可以控制col间距 2.添加Form的全局label对齐方式, labelAlign: left | right 3.添加Form的Row组件所支持属性,控制Col间的间距,对齐方式,布局方式 * feat(Rate): add 'Rate' module *添加评分组件,并添加了dome例子

feat(form): add 'layout', 'labelAlign', 'rowProps' option (#651)
* feat(form): add 'layout', 'labelAlign', 'rowProps' option 1.添加Form布局方式,当layout: 'vertical',labelWidth可以控制col间距 2.添加Form的全局label对齐方式, labelAlign: left | right 3.添加Form的Row组件所支持属性,控制Col间的间距,对齐方式,布局方式 * feat(Rate): add 'Rate' module *添加评分组件,并添加了dome例子
liuzhidong · GitHub
1 parent 94a826d0
Showing 6 changed files with 39 additions and 11 deletions
src/components/Form/src/BasicForm.vue
src/components/Form/src/componentMap.ts
src/components/Form/src/props.ts
src/components/Form/src/types/form.ts
src/components/Form/src/types/index.ts
src/views/demo/form/index.vue
 <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,
@@ -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(&#39;Checkbox&#39;, 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);
@@ -3,7 +3,7 @@ import type { CSSProperties, PropType } from &#39;vue&#39;;
 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>,
 };
@@ -6,6 +6,7 @@ import type { FormItem } from &#39;./formItem&#39;;
 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) =&gt; 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
@@ -109,4 +109,5 @@ export type ComponentType =
   | 'Upload'
   | 'IconPicker'
   | 'Render'
-  | 'Slider';
+  | 'Slider'
+  | 'Rate';
@@ -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({