diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 62ae81911..9ce213c3b 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -1,3 +1,11 @@ +### ✨ Features + +- **BasicForm** 表单组件新增`Divider`，用于较长表单的区域分割 + +### 🐛 Bug Fixes + +- **其它** 修复部分封装组件在使用插槽时报错的问题 + ## 2.7.1(2021-08-16) - 升级 vue 3.2,如果运行失败，删除 node_modules 后重装即可 diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue index 7e900de6e..552fd6358 100644 --- a/src/components/Form/src/BasicForm.vue +++ b/src/components/Form/src/BasicForm.vue @@ -29,7 +29,7 @@ #[item]="data" v-for="item in ['resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']" > - + @@ -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({ diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts index 5b5124182..4bfbdf11d 100644 --- a/src/components/Form/src/componentMap.ts +++ b/src/components/Form/src/componentMap.ts @@ -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('IconPicker', IconPicker); componentMap.set('InputCountDown', CountdownInput); componentMap.set('Upload', BasicUpload); +componentMap.set('Divider', Divider); export function add(compName: ComponentType, component: Component) { componentMap.set(compName, component); diff --git a/src/components/Form/src/components/FormItem.vue b/src/components/Form/src/components/FormItem.vue index 923595425..67832ac4f 100644 --- a/src/components/Form/src/components/FormItem.vue +++ b/src/components/Form/src/components/FormItem.vue @@ -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(); - }; + if (component === 'Divider') { + return ( + + {label} + + ); + } 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; + const showSuffix = !!suffix; + const getSuffix = isFunction(suffix) ? suffix(unref(getValues)) : suffix; - return ( - -
-
{getContent()}
- {showSuffix && {getSuffix}} -
- - ); + return ( + +
+
{getContent()}
+ {showSuffix && {getSuffix}} +
+ + ); + } } return () => { diff --git a/src/components/Form/src/hooks/useFormEvents.ts b/src/components/Form/src/hooks/useFormEvents.ts index cb09833e7..92a089894 100644 --- a/src/components/Form/src/hooks/useFormEvents.ts +++ b/src/components/Form/src/hooks/useFormEvents.ts @@ -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( diff --git a/src/components/Form/src/types/index.ts b/src/components/Form/src/types/index.ts index 1d73d72f6..1cd6a02c5 100644 --- a/src/components/Form/src/types/index.ts +++ b/src/components/Form/src/types/index.ts @@ -109,4 +109,5 @@ export type ComponentType = | 'IconPicker' | 'Render' | 'Slider' - | 'Rate'; + | 'Rate' + | 'Divider'; diff --git a/src/views/demo/form/AdvancedForm.vue b/src/views/demo/form/AdvancedForm.vue index 03bb16572..487269890 100644 --- a/src/views/demo/form/AdvancedForm.vue +++ b/src/views/demo/form/AdvancedForm.vue @@ -12,7 +12,7 @@