From b8367204287c781e1dbda1d149736654e117f4ef Mon Sep 17 00:00:00 2001 From: rickcole Date: Thu, 20 Aug 2020 20:04:33 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E8=A1=A8=E6=A0=BCactionType:add=EF=BC=8C?= =?UTF-8?q?=E6=94=AF=E6=8C=81addApi=EF=BC=9B=E6=97=B6=E9=97=B4=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E9=BB=98=E8=AE=A4=E5=80=BC=E6=98=BE=E7=A4=BA=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/form/table.md | 2 ++ src/components/DatePicker.tsx | 21 +++++++++++++-------- src/renderers/Form/Table.tsx | 23 ++++++++++++++++++----- 3 files changed, 33 insertions(+), 13 deletions(-) diff --git a/docs/components/form/table.md b/docs/components/form/table.md index b437d72c..1657a315 100755 --- a/docs/components/form/table.md +++ b/docs/components/form/table.md @@ -133,6 +133,8 @@ order: 54 } ``` +当表格上配置了`addApi`时，会请求该 `api`，并将返回数据添加到目标表格。 + ### 编辑行配置 还可以在列上配置`quickEdit`实现编辑配置，更多配置参考 [快速编辑](../crud#%E5%BF%AB%E9%80%9F%E7%BC%96%E8%BE%91) diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx index 80fea7c2..69747dfe 100644 --- a/src/components/DatePicker.tsx +++ b/src/components/DatePicker.tsx @@ -261,6 +261,14 @@ export interface DatePickerState { value: moment.Moment | undefined; } +function normalizeValue(value: any, format?: string) { + if (!value || value === '0') { + return undefined; + } + const v = moment(value, format, true); + return v.isValid() ? v : undefined; +} + export class DatePicker extends React.Component { static defaultProps = { viewMode: 'days' as 'years' | 'months' | 'days' | 'time', @@ -271,9 +279,7 @@ export class DatePicker extends React.Component { state: DatePickerState = { isOpened: false, isFocused: false, - value: this.props.value - ? moment(this.props.value, this.props.format) - : undefined + value: normalizeValue(this.props.value, this.props.format) }; constructor(props: DateProps) { super(props); @@ -299,9 +305,7 @@ export class DatePicker extends React.Component { componentWillReceiveProps(nextProps: DateProps) { if (this.props.value !== nextProps.value) { this.setState({ - value: nextProps.value - ? moment(nextProps.value, nextProps.format) - : undefined + value: normalizeValue(nextProps.value, nextProps.format) }); } } @@ -505,7 +509,8 @@ export class DatePicker extends React.Component { shortcuts, utc, overlayPlacement, - locale + locale, + format } = this.props; const __ = this.props.translate; @@ -539,7 +544,7 @@ export class DatePicker extends React.Component { )} - {clearable && !disabled && value ? ( + {clearable && !disabled && normalizeValue(value, format) ? ( diff --git a/src/renderers/Form/Table.tsx b/src/renderers/Form/Table.tsx index 87c21f96..29efae25 100644 --- a/src/renderers/Form/Table.tsx +++ b/src/renderers/Form/Table.tsx @@ -137,7 +137,7 @@ export default class FormTable extends React.Component { } } - doAction(action: Action, ctx: RendererData, ...rest: Array) { + async doAction(action: Action, ctx: RendererData, ...rest: Array) { const { onAction, value, @@ -145,14 +145,27 @@ export default class FormTable extends React.Component { env, onChange, editable, + addApi, translate: __ } = this.props; if (action.actionType === 'add') { const rows = Array.isArray(value) ? value.concat() : []; - if (action.payload) { - let toAdd = dataMapping(action.payload, ctx); + if (addApi || action.payload) { + let toAdd = null; + + if (isEffectiveApi(addApi, ctx)) { + const payload = await env.fetcher(addApi, ctx); + if (payload && !payload.ok) { + env.notify('error', payload.msg || __('请求失败')); + return; + } else if (payload && payload.ok) { + toAdd = payload.data; + } + } else { + toAdd = dataMapping(action.payload, ctx); + } toAdd = Array.isArray(toAdd) ? toAdd : [toAdd]; @@ -161,7 +174,8 @@ export default class FormTable extends React.Component { rows, item => item[valueField as string] == toAdd[valueField as string] ); - if (~idx) { + // 应该只有配置了 valueField 的时候，才去删重复项 + if (~idx && valueField) { rows.splice(idx, 1); } rows.push(toAdd); @@ -173,7 +187,6 @@ export default class FormTable extends React.Component { this.startEdit(rows.length - 1, rows[rows.length - 1], true); } - // todo 如果配置新增 Api 怎么办？ return; } else { return this.addItem(rows.length - 1); From 03b7e4396dea62b162df67df75d064e6cd8ea497 Mon Sep 17 00:00:00 2001 From: rickcole Date: Fri, 21 Aug 2020 11:14:28 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dtable=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=90=8E=E7=A1=AE=E8=AE=A4=E6=95=B0=E6=8D=AE=E4=B8=A2=E5=A4=B1?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderers/Form/Table.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/renderers/Form/Table.tsx b/src/renderers/Form/Table.tsx index 29efae25..7603e6a2 100644 --- a/src/renderers/Form/Table.tsx +++ b/src/renderers/Form/Table.tsx @@ -244,7 +244,8 @@ export default class FormTable extends React.Component { const scaffold = this.props.scaffold; this.setState({ editIndex: index, - editting: editting || (value && value[index]) || scaffold || {}, + editting: this.editting = + editting || (value && value[index]) || scaffold || {}, isCreateMode: isCreate, columns: this.state.isCreateMode === isCreate