From 655806dc824666a4cb62400f3d012a2c3d11d6e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= Date: Tue, 5 Nov 2024 17:56:30 +0800 Subject: [PATCH] feat(form:select,cascader,tree-select): default value when cleared (#1844) --- packages/form/src/widgets/select/index.en-US.md | 1 + packages/form/src/widgets/select/index.zh-CN.md | 1 + packages/form/src/widgets/select/schema.ts | 5 +++++ packages/form/src/widgets/select/select.widget.spec.ts | 7 ++++--- packages/form/src/widgets/select/select.widget.ts | 2 +- packages/form/widgets/cascader/index.en-US.md | 1 + packages/form/widgets/cascader/index.zh-CN.md | 1 + packages/form/widgets/cascader/schema.ts | 5 +++++ packages/form/widgets/cascader/widget.ts | 2 +- packages/form/widgets/tree-select/index.en-US.md | 1 + packages/form/widgets/tree-select/index.zh-CN.md | 1 + packages/form/widgets/tree-select/schema.ts | 5 +++++ packages/form/widgets/tree-select/widget.ts | 3 +-- 13 files changed, 28 insertions(+), 7 deletions(-) diff --git a/packages/form/src/widgets/select/index.en-US.md b/packages/form/src/widgets/select/index.en-US.md index 1e4767660..a9073670b 100644 --- a/packages/form/src/widgets/select/index.en-US.md +++ b/packages/form/src/widgets/select/index.en-US.md @@ -26,6 +26,7 @@ Select. | `[placeholder]` | Placeholder | `string` | - | | `[autoClearSearchValue]` | Whether clear search box when an option is selected, only valid when `mode` is `multiple` or `tags`. | `boolean` | `true` | | `[allowClear]` | Allow clear | `boolean` | `false` | +| `[clearValue]` | Default value when cleared | `any` | `undefined` | | `[borderless]` | Whether has border | `boolean` | `false` | | `[autoFocus]` | Focused by default | `boolean` | `false` | | `[dropdownClassName]` | className property of dropdown list | `string` | - | diff --git a/packages/form/src/widgets/select/index.zh-CN.md b/packages/form/src/widgets/select/index.zh-CN.md index 79b45db6f..b6924f0ff 100644 --- a/packages/form/src/widgets/select/index.zh-CN.md +++ b/packages/form/src/widgets/select/index.zh-CN.md @@ -26,6 +26,7 @@ order: 6 | `[placeholder]` | 在文字框中显示提示讯息 | `string` | - | | `[autoClearSearchValue]` | 是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效。 | `boolean` | `true` | | `[allowClear]` | 支持清除 | `boolean` | `false` | +| `[clearValue]` | 清空时默认值 | `any` | `undefined` | | `[borderless]` | 是否无边框 | `boolean` | `false` | | `[autoFocus]` | 默认获取焦点 | `boolean` | `false` | | `[dropdownClassName]` | 下拉菜单的 className 属性 | `string` | - | diff --git a/packages/form/src/widgets/select/schema.ts b/packages/form/src/widgets/select/schema.ts index 5165ac84c..e1cb06029 100644 --- a/packages/form/src/widgets/select/schema.ts +++ b/packages/form/src/widgets/select/schema.ts @@ -132,6 +132,11 @@ export interface SFSelectWidgetSchema extends SFUISchemaItem { */ clearIcon?: TemplateRef; + /** + * 清空时默认值，默认：`undefined` + */ + clearValue?: NzSafeAny; + /** * 自定义当前选中的条目图标 */ diff --git a/packages/form/src/widgets/select/select.widget.spec.ts b/packages/form/src/widgets/select/select.widget.spec.ts index 267cff118..36ca89cf9 100644 --- a/packages/form/src/widgets/select/select.widget.spec.ts +++ b/packages/form/src/widgets/select/select.widget.spec.ts @@ -140,8 +140,9 @@ describe('form: widget: select', () => { default: 1, ui: { widget, - allowClear: true - } + allowClear: true, + clearValue: 2 + } as SFSelectWidgetSchema } } }; @@ -151,7 +152,7 @@ describe('form: widget: select', () => { .time() .typeEvent('click', '.ant-select-close-icon') .time() - .checkValue('/a', undefined) + .checkValue('/a', 2) .asyncEnd(); })); diff --git a/packages/form/src/widgets/select/select.widget.ts b/packages/form/src/widgets/select/select.widget.ts index 400f25827..4a1378694 100644 --- a/packages/form/src/widgets/select/select.widget.ts +++ b/packages/form/src/widgets/select/select.widget.ts @@ -161,7 +161,7 @@ export class SelectWidget extends ControlUIWidget implemen if (this.ui.change) { this.ui.change(values, this.getOrgData(values)); } - this.setValue(values == null ? undefined : values); + this.setValue(values == null ? this.ui.clearValue : values); } private getOrgData(values: SFValue): SFSchemaEnum | SFSchemaEnum[] { diff --git a/packages/form/widgets/cascader/index.en-US.md b/packages/form/widgets/cascader/index.en-US.md index c17eb39f8..d29336365 100644 --- a/packages/form/widgets/cascader/index.en-US.md +++ b/packages/form/widgets/cascader/index.en-US.md @@ -42,6 +42,7 @@ Every select triggers a HTTP request, data source is from `asyncData`; includes | `[placeholder]` | Placeholder | `string` | - | | `[showSearch]` | Whether support search | `bool` | `false` | | `[allowClear]` | Whether show clear button | `bool` | `true` | +| `[clearValue]` | Default value when cleared | `any` | `undefined` | | `[clearText]` | Title of clear button | `string` | `清除` | | `[showArrow]` | Whether show arrow | `bool` | `true` | | `[showInput]` | Whether show input | `bool` | `true` | diff --git a/packages/form/widgets/cascader/index.zh-CN.md b/packages/form/widgets/cascader/index.zh-CN.md index f690e2761..fbb7b11ae 100644 --- a/packages/form/widgets/cascader/index.zh-CN.md +++ b/packages/form/widgets/cascader/index.zh-CN.md @@ -42,6 +42,7 @@ type: Non-built-in widgets | `[placeholder]` | 在文字框中显示提示讯息 | `string` | - | | `[showSearch]` | 是否支持搜索 | `bool` | `false` | | `[allowClear]` | 是否显示清除按钮 | `bool` | `true` | +| `[clearValue]` | 清空时默认值 | `any` | `undefined` | | `[clearText]` | 清除按钮的标题 | `string` | `清除` | | `[showArrow]` | 是否显示箭头 | `bool` | `true` | | `[showInput]` | 是否显示输入框 | `bool` | `true` | diff --git a/packages/form/widgets/cascader/schema.ts b/packages/form/widgets/cascader/schema.ts index b3bcc9d09..f3e46d8e7 100644 --- a/packages/form/widgets/cascader/schema.ts +++ b/packages/form/widgets/cascader/schema.ts @@ -24,6 +24,11 @@ export interface SFCascaderWidgetSchema extends SFUISchemaItem { */ allowClear?: boolean; + /** + * 清空时默认值，默认：`undefined` + */ + clearValue?: NzSafeAny; + /** * 清除按钮的标题，默认：`清除` */ diff --git a/packages/form/widgets/cascader/widget.ts b/packages/form/widgets/cascader/widget.ts index 3debdd80c..1e6d7aaa8 100644 --- a/packages/form/widgets/cascader/widget.ts +++ b/packages/form/widgets/cascader/widget.ts @@ -83,7 +83,7 @@ export class CascaderWidget extends ControlUIWidget impl } _change(value: NzSafeAny[] | null): void { - this.setValue(value); + this.setValue(value == null ? this.ui.clearValue : value); if (this.ui.change) { this.ui.change(value); } diff --git a/packages/form/widgets/tree-select/index.en-US.md b/packages/form/widgets/tree-select/index.en-US.md index fa31ddf72..ce99a4418 100644 --- a/packages/form/widgets/tree-select/index.en-US.md +++ b/packages/form/widgets/tree-select/index.en-US.md @@ -32,6 +32,7 @@ Non-built-in modules need to additionally register `withTreeSelectWidget` in [js | `[placeholder]` | Placeholder | `string` | - | | `[notFoundContent]` | Text to display when a column is empty | `string` | - | | `[allowClear]` | Whether show clear button | `boolean` | `false` | +| `[clearValue]` | Default value when cleared | `any` | `undefined` | | `[dropdownMatchSelectWidth]` | Determine whether the dropdown menu and the select input are the same width | `boolean` | `true` | | `[dropdownStyle]` | Set the style of the dropdown menu | `object` | - | | `[dropdownClassName]` | Set className of the dropdown menu | `string` | - | diff --git a/packages/form/widgets/tree-select/index.zh-CN.md b/packages/form/widgets/tree-select/index.zh-CN.md index c476c4277..729c5bdd8 100644 --- a/packages/form/widgets/tree-select/index.zh-CN.md +++ b/packages/form/widgets/tree-select/index.zh-CN.md @@ -32,6 +32,7 @@ type: Non-built-in widgets | `[placeholder]` | 在文字框中显示提示讯息 | `string` | - | | `[notFoundContent]` | 当下拉列表为空时显示的内容 | `string` | - | | `[allowClear]` | 支持清除 | `boolean` | `false` | +| `[clearValue]` | 清空时默认值 | `any` | `undefined` | | `[dropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | `boolean` | `true` | | `[dropdownStyle]` | 下拉菜单的 style 属性 | `object` | - | | `[dropdownClassName]` | 下拉菜单的 className 属性 | `string` | - | diff --git a/packages/form/widgets/tree-select/schema.ts b/packages/form/widgets/tree-select/schema.ts index 8cff7e628..21f56dde7 100644 --- a/packages/form/widgets/tree-select/schema.ts +++ b/packages/form/widgets/tree-select/schema.ts @@ -20,6 +20,11 @@ export interface SFTreeSelectWidgetSchema extends SFUISchemaItem { */ allowClear?: boolean; + /** + * 清空时默认值，默认：`undefined` + */ + clearValue?: NzSafeAny; + /** * 下拉菜单和选择器同宽，默认：`true` */ diff --git a/packages/form/widgets/tree-select/widget.ts b/packages/form/widgets/tree-select/widget.ts index 10e6215f1..4cb7449a5 100644 --- a/packages/form/widgets/tree-select/widget.ts +++ b/packages/form/widgets/tree-select/widget.ts @@ -92,9 +92,8 @@ export class TreeSelectWidget extends ControlUIWidget } change(value: NzSafeAny[] | NzSafeAny): void { - console.log(value); if (this.ui.change) this.ui.change(value); - this.setValue(value); + this.setValue(value == null ? this.ui.clearValue : value); } expandChange(e: NzFormatEmitEvent): void {