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/examples/components/Page/Form.jsx b/examples/components/Page/Form.jsx index fd322c55..50e5c849 100644 --- a/examples/components/Page/Form.jsx +++ b/examples/components/Page/Form.jsx @@ -4,8 +4,6 @@ export default { body: { type: 'form', mode: 'horizontal', - title: '', - debug: true, api: '/api/mock2/form/saveForm', controls: [ { diff --git a/scss/components/_table.scss b/scss/components/_table.scss index 0f2c6c07..50ae801e 100644 --- a/scss/components/_table.scss +++ b/scss/components/_table.scss @@ -795,6 +795,9 @@ > .#{$ns}Button, > .#{$ns}Button--disabled-wrap > .#{$ns}Button { margin: px2rem(3px); + } + + > .#{$ns}Button--disabled-wrap > .#{$ns}Button { padding: 0; } 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..7603e6a2 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); @@ -231,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