From 785732f438916d7767ad44789c16216a6f6505a8 Mon Sep 17 00:00:00 2001
From: liuzhidong <51448229+liuzhidong0918@users.noreply.github.com>
Date: Tue, 25 May 2021 22:25:13 +0800
Subject: [PATCH] feat(form):  add 'layout', 'labelAlign', 'rowProps' option
 (#651)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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例子
---
 src/components/Form/src/BasicForm.vue   | 19 ++++++++++++-------
 src/components/Form/src/componentMap.ts |  4 +++-
 src/components/Form/src/props.ts        |  4 +++-
 src/components/Form/src/types/form.ts   |  7 ++++++-
 src/components/Form/src/types/index.ts  |  3 ++-
 src/views/demo/form/index.vue           | 13 +++++++++++++
 6 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue
index b6f324f2f..6e467f962 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 9fab16d7e..2e3d5b6e5 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 2a79a84e0..a165673c2 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 d5159aac9..ebf1fdc19 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 c637bb7c3..89174a182 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 8fb0249d7..49dfd44aa 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({