feat(form): add `Divider` for schema component type

新增Divider用于较长表单的区域分割

feat(form): add `Divider` for schema component type
新增Divider用于较长表单的区域分割
无木
1 parent 5138e447
Showing 8 changed files with 94 additions and 41 deletions
CHANGELOG.zh_CN.md
src/components/Form/src/BasicForm.vue
src/components/Form/src/componentMap.ts
src/components/Form/src/components/FormItem.vue
src/components/Form/src/hooks/useFormEvents.ts
src/components/Form/src/types/index.ts
src/views/demo/form/AdvancedForm.vue
src/views/demo/form/index.vue
+### ✨ Features
+
+- **BasicForm** 表单组件新增`Divider`，用于较长表单的区域分割
+
+### 🐛 Bug Fixes
+
+- **其它** 修复部分封装组件在使用插槽时报错的问题
+
 ## 2.7.1(2021-08-16)
  
 - 升级 vue 3.2,如果运行失败，删除 node_modules 后重装即可
@@ -29,7 +29,7 @@
           #[item]="data"
           v-for="item in ['resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']"
         >
-          <slot :name="item" v-bind="data"></slot>
+          <slot :name="item" v-bind="data || {}"></slot>
         </template>
       </FormAction>
       <slot name="formFooter"></slot>
@@ -132,7 +132,11 @@
             }
           }
         }
-        return schemas as FormSchema[];
+        if (unref(getProps).showAdvancedButton) {
+          return schemas.filter((schema) => schema.component !== 'Divider') as FormSchema[];
+        } else {
+          return schemas as FormSchema[];
+        }
       });
  
       const { handleToggleAdvanced } = useAdvanced({
@@ -18,6 +18,7 @@ import {
   TreeSelect,
   Slider,
   Rate,
+  Divider,
 } from 'ant-design-vue';
  
 import RadioButtonGroup from './components/RadioButtonGroup.vue';
@@ -61,6 +62,7 @@ componentMap.set(&#39;IconPicker&#39;, IconPicker);
 componentMap.set('InputCountDown', CountdownInput);
  
 componentMap.set('Upload', BasicUpload);
+componentMap.set('Divider', Divider);
  
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);
@@ -5,7 +5,7 @@
   import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
   import type { TableActionType } from '/@/components/Table';
   import { defineComponent, computed, unref, toRefs } from 'vue';
-  import { Form, Col } from 'ant-design-vue';
+  import { Form, Col, Divider } from 'ant-design-vue';
   import { componentMap } from '../componentMap';
   import { BasicHelp } from '/@/components/Basic';
   import { isBoolean, isFunction, isNull } from '/@/utils/is';
@@ -73,11 +73,17 @@
  
       const getComponentsProps = computed(() => {
         const { schema, tableAction, formModel, formActionType } = props;
-        const { componentProps = {} } = schema;
-        if (!isFunction(componentProps)) {
-          return componentProps;
+        let { componentProps = {} } = schema;
+        if (isFunction(componentProps)) {
+          componentProps = componentProps({ schema, tableAction, formModel, formActionType }) ?? {};
         }
-        return componentProps({ schema, tableAction, formModel, formActionType }) ?? {};
+        if (schema.component === 'Divider') {
+          componentProps = Object.assign({ type: 'horizontal' }, componentProps, {
+            orientation: 'left',
+            plain: true,
+          });
+        }
+        return componentProps;
       });
  
       const getDisable = computed(() => {
@@ -300,38 +306,46 @@
       }
  
       function renderItem() {
-        const { itemProps, slot, render, field, suffix } = props.schema;
+        const { itemProps, slot, render, field, suffix, component, label } = props.schema;
         const { labelCol, wrapperCol } = unref(itemLabelWidthProp);
         const { colon } = props.formProps;
  
-        const getContent = () => {
-          return slot
-            ? getSlot(slots, slot, unref(getValues))
-            : render
-            ? render(unref(getValues))
-            : renderComponent();
-        };
-
-        const showSuffix = !!suffix;
-        const getSuffix = isFunction(suffix) ? suffix(unref(getValues)) : suffix;
-
-        return (
-          <Form.Item
-            name={field}
-            colon={colon}
-            class={{ 'suffix-item': showSuffix }}
-            {...(itemProps as Recordable)}
-            label={renderLabelHelpMessage()}
-            rules={handleRules()}
-            labelCol={labelCol}
-            wrapperCol={wrapperCol}
-          >
-            <div style="display:flex">
-              <div style="flex:1">{getContent()}</div>
-              {showSuffix && <span class="suffix">{getSuffix}</span>}
-            </div>
-          </Form.Item>
-        );
+        if (component === 'Divider') {
+          return (
+            <Col span={24}>
+              <Divider {...unref(getComponentsProps)}>{label}</Divider>
+            </Col>
+          );
+        } else {
+          const getContent = () => {
+            return slot
+              ? getSlot(slots, slot, unref(getValues))
+              : render
+              ? render(unref(getValues))
+              : renderComponent();
+          };
+
+          const showSuffix = !!suffix;
+          const getSuffix = isFunction(suffix) ? suffix(unref(getValues)) : suffix;
+
+          return (
+            <Form.Item
+              name={field}
+              colon={colon}
+              class={{ 'suffix-item': showSuffix }}
+              {...(itemProps as Recordable)}
+              label={renderLabelHelpMessage()}
+              rules={handleRules()}
+              labelCol={labelCol}
+              wrapperCol={wrapperCol}
+            >
+              <div style="display:flex">
+                <div style="flex:1">{getContent()}</div>
+                {showSuffix && <span class="suffix">{getSuffix}</span>}
+              </div>
+            </Form.Item>
+          );
+        }
       }
  
       return () => {
@@ -149,7 +149,9 @@ export function useFormEvents({
       updateData = [...data];
     }
  
-    const hasField = updateData.every((item) => Reflect.has(item, 'field') && item.field);
+    const hasField = updateData.every(
+      (item) => item.component === 'Divider' || (Reflect.has(item, 'field') && item.field)
+    );
  
     if (!hasField) {
       error(
@@ -169,7 +171,9 @@ export function useFormEvents({
       updateData = [...data];
     }
  
-    const hasField = updateData.every((item) => Reflect.has(item, 'field') && item.field);
+    const hasField = updateData.every(
+      (item) => item.component === 'Divider' || (Reflect.has(item, 'field') && item.field)
+    );
  
     if (!hasField) {
       error(
@@ -109,4 +109,5 @@ export type ComponentType =
   | 'IconPicker'
   | 'Render'
   | 'Slider'
-  | 'Rate';
+  | 'Rate'
+  | 'Divider';
@@ -12,7 +12,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { CollapseContainer } from '/@/components/Container/index';
+  import { CollapseContainer } from '/@/components/Container';
   import { PageWrapper } from '/@/components/Page';
  
   const getSchamas = (): FormSchema[] => {
@@ -173,7 +173,12 @@
       }
       const [register1] = useForm({
         labelWidth: 120,
-        schemas: [...getSchamas(), ...getAppendSchemas(), ...extraSchemas],
+        schemas: [
+          ...getSchamas(),
+          ...getAppendSchemas(),
+          { field: '', component: 'Divider', label: '更多字段' },
+          ...extraSchemas,
+        ],
         actionColOptions: {
           span: 24,
         },
@@ -101,6 +101,11 @@
  
   const schemas: FormSchema[] = [
     {
+      field: '',
+      component: 'Divider',
+      label: '基础字段',
+    },
+    {
       field: 'field1',
       component: 'Input',
       label: '字段1',
@@ -294,6 +299,11 @@
       },
     },
     {
+      field: '',
+      component: 'Divider',
+      label: '远程下拉演示',
+    },
+    {
       field: 'field30',
       component: 'ApiSelect',
       label: '懒加载远程下拉',
@@ -363,6 +373,11 @@
       },
     },
     {
+      field: '',
+      component: 'Divider',
+      label: '其它',
+    },
+    {
       field: 'field20',
       component: 'InputNumber',
       label: '字段20',