表格actionType:add,支持addApi;时间组件默认值显示优化

This commit is contained in:
rickcole 2020-08-20 20:04:33 +08:00
parent 22b6730d94
commit fdba902574
3 changed files with 33 additions and 13 deletions

View File

@ -133,6 +133,8 @@ order: 54
}
```
当表格上配置了`addApi`时,会请求该 `api`,并将返回数据添加到目标表格。
### 编辑行配置
还可以在列上配置`quickEdit`实现编辑配置,更多配置参考 [快速编辑](../crud#%E5%BF%AB%E9%80%9F%E7%BC%96%E8%BE%91)

View File

@ -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<DateProps, DatePickerState> {
static defaultProps = {
viewMode: 'days' as 'years' | 'months' | 'days' | 'time',
@ -271,9 +279,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
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<DateProps, DatePickerState> {
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<DateProps, DatePickerState> {
shortcuts,
utc,
overlayPlacement,
locale
locale,
format
} = this.props;
const __ = this.props.translate;
@ -539,7 +544,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
</span>
)}
{clearable && !disabled && value ? (
{clearable && !disabled && normalizeValue(value, format) ? (
<a className={`${ns}DatePicker-clear`} onClick={this.clearValue}>
<Icon icon="close" className="icon" />
</a>

View File

@ -137,7 +137,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
}
}
doAction(action: Action, ctx: RendererData, ...rest: Array<any>) {
async doAction(action: Action, ctx: RendererData, ...rest: Array<any>) {
const {
onAction,
value,
@ -145,14 +145,27 @@ export default class FormTable extends React.Component<TableProps, TableState> {
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<TableProps, TableState> {
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<TableProps, TableState> {
this.startEdit(rows.length - 1, rows[rows.length - 1], true);
}
// todo 如果配置新增 Api 怎么办?
return;
} else {
return this.addItem(rows.length - 1);