feat(form-page): add form page demo

src/components/Form/src/BasicForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <Form v-bind="$attrs" ref="formElRef" :model="formModel">
+  <Form v-bind="{ ...$attrs, ...$props }" ref="formElRef" :model="formModel">
     <Row :class="getProps.compact ? 'compact-form-row' : ''">
       <slot name="formHeader" />
       <template v-for="schema in getSchema" :key="schema.field">
@@ -54,8 +54,8 @@
       const formModel = reactive({});
 
       const actionState = reactive({
-        resetAction: () => {},
-        submitAction: () => {},
+        resetAction: {},
+        submitAction: {},
       });
 
       const advanceState = reactive<AdvanceState>({
@@ -67,7 +67,7 @@
 
       const defaultValueRef = ref<any>({});
       const propsRef = ref<Partial<FormProps>>({});
-      const schemaRef = ref<FormSchema[] | null>(null);
+      const schemaRef = ref<Nullable<FormSchema[]>>(null);
       const formElRef = ref<Nullable<FormActionType>>(null);
 
       const getMergePropsRef = computed(
@@ -98,7 +98,15 @@
         for (const schema of schemas) {
           const { defaultValue, component } = schema;
           if (defaultValue && dateItemType.includes(component!)) {
-            schema.defaultValue = moment(defaultValue);
+            if (!Array.isArray(defaultValue)) {
+              schema.defaultValue = moment(defaultValue);
+            } else {
+              const def: moment.Moment[] = [];
+              defaultValue.forEach((item) => {
+                def.push(moment(item));
+              });
+              schema.defaultValue = def;
+            }
           }
         }
         return schemas as FormSchema[];
@@ -139,8 +147,8 @@
         formModel,
         getSchema,
         defaultValueRef,
-        formElRef: formElRef as any,
-        schemaRef: schemaRef as any,
+        formElRef: formElRef as Ref<FormActionType>,
+        schemaRef: schemaRef as Ref<FormSchema[]>,
         handleFormValues,
         actionState,
       });
@@ -156,6 +164,13 @@
         }
       );
 
+      watch(
+        () => getSchema.value,
+        () => {
+          initDefault();
+        }
+      );
+
       /**
        * @description:设置表单
        */

src/components/Form/src/FormItem.tsx

@@ -250,14 +250,21 @@ export default defineComponent({
     }
 
     function renderLabelHelpMessage() {
-      const { label, helpMessage, helpComponentProps } = props.schema;
+      const { label, helpMessage, helpComponentProps, subLabel } = props.schema;
+      const renderLabel = subLabel ? (
+        <span>
+          {label} <span style="color:#00000073">{subLabel}</span>
+        </span>
+      ) : (
+        label
+      );
       if (!helpMessage || (Array.isArray(helpMessage) && helpMessage.length === 0)) {
-        return label;
+        return renderLabel;
       }
       return (
         <span>
-          {label}
-          <BasicHelp class="mx-1" text={helpMessage} {...helpComponentProps} />
+          {renderLabel}
+          <BasicHelp placement="top" class="mx-1" text={helpMessage} {...helpComponentProps} />
         </span>
       );
     }
@@ -291,6 +298,7 @@ export default defineComponent({
       const { colProps = {}, colSlot, renderColContent, component } = props.schema;
       if (!componentMap.has(component)) return null;
       const { baseColProps = {} } = props.formProps;
+
       const realColProps = { ...baseColProps, ...colProps };
       const { isIfShow, isShow } = getShow();
       const getContent = () => {

src/components/Form/src/helper.ts

@@ -7,7 +7,7 @@ export function createPlaceholderMessage(component: ComponentType) {
   if (component.includes('Input') || component.includes('Complete')) {
     return '请输入';
   }
-  if (component.includes('Picker') && !component.includes('Range')) {
+  if (component.includes('Picker')) {
     return '请选择';
   }
   if (

src/components/Form/src/hooks/useLabelWidth.ts

@@ -25,19 +25,26 @@ export function useItemLabelWidth(schemaItemRef: Ref<FormSchema>, propsRef: Ref<
     const { labelCol = {}, wrapperCol = {} } = schemaItem.itemProps || {};
     const { labelWidth, disabledLabelWidth } = schemaItem;
 
-    const { labelWidth: globalLabelWidth } = unref(propsRef) as any;
+    const {
+      labelWidth: globalLabelWidth,
+      labelCol: globalLabelCol,
+      wrapperCol: globWrapperCol,
+    } = unref(propsRef) as any;
+
     // 如果全局有设置labelWidth, 则所有item使用
-    if ((!globalLabelWidth && !labelWidth) || disabledLabelWidth) {
+    if ((!globalLabelWidth && !labelWidth && !globalLabelCol) || disabledLabelWidth) {
       return { labelCol, wrapperCol };
     }
     let width = labelWidth || globalLabelWidth;
+    const col = { ...globalLabelCol, ...labelCol };
+    const wrapCol = { ...globWrapperCol, ...wrapperCol };
 
     if (width) {
       width = isNumber(width) ? `${width}px` : width;
     }
     return {
-      labelCol: { style: { width }, ...labelCol },
-      wrapperCol: { style: { width: `calc(100% - ${width})` }, ...wrapperCol },
+      labelCol: { style: { width }, ...col },
+      wrapperCol: { style: { width: `calc(100% - ${width})` }, ...wrapCol },
     };
   });
 }

src/components/Form/src/types/form.ts

@@ -41,6 +41,7 @@ export type RegisterFn = (formInstance: FormActionType) => void;
 export type UseFormReturnType = [RegisterFn, FormActionType];
 
 export interface FormProps {
+  // layout?: 'vertical' | 'inline' | 'horizontal';
   // 表单值
   model?: any;
   // 整个表单所有项宽度
@@ -108,6 +109,8 @@ export interface FormSchema {
   valueField?: string;
   // 标签名
   label: string;
+  // 辅助文本
+  subLabel?: string;
   // 文本右侧帮助文本
   helpMessage?: string | string[];
   // BaseHelp组件props