表格actionType:add,支持addApi;时间组件默认值显示优化
This commit is contained in:
parent
9768473bc2
commit
b836720428
|
@ -133,6 +133,8 @@ order: 54
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
当表格上配置了`addApi`时,会请求该 `api`,并将返回数据添加到目标表格。
|
||||||
|
|
||||||
### 编辑行配置
|
### 编辑行配置
|
||||||
|
|
||||||
还可以在列上配置`quickEdit`实现编辑配置,更多配置参考 [快速编辑](../crud#%E5%BF%AB%E9%80%9F%E7%BC%96%E8%BE%91)
|
还可以在列上配置`quickEdit`实现编辑配置,更多配置参考 [快速编辑](../crud#%E5%BF%AB%E9%80%9F%E7%BC%96%E8%BE%91)
|
||||||
|
|
|
@ -261,6 +261,14 @@ export interface DatePickerState {
|
||||||
value: moment.Moment | undefined;
|
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> {
|
export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
viewMode: 'days' as 'years' | 'months' | 'days' | 'time',
|
viewMode: 'days' as 'years' | 'months' | 'days' | 'time',
|
||||||
|
@ -271,9 +279,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||||
state: DatePickerState = {
|
state: DatePickerState = {
|
||||||
isOpened: false,
|
isOpened: false,
|
||||||
isFocused: false,
|
isFocused: false,
|
||||||
value: this.props.value
|
value: normalizeValue(this.props.value, this.props.format)
|
||||||
? moment(this.props.value, this.props.format)
|
|
||||||
: undefined
|
|
||||||
};
|
};
|
||||||
constructor(props: DateProps) {
|
constructor(props: DateProps) {
|
||||||
super(props);
|
super(props);
|
||||||
|
@ -299,9 +305,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||||
componentWillReceiveProps(nextProps: DateProps) {
|
componentWillReceiveProps(nextProps: DateProps) {
|
||||||
if (this.props.value !== nextProps.value) {
|
if (this.props.value !== nextProps.value) {
|
||||||
this.setState({
|
this.setState({
|
||||||
value: nextProps.value
|
value: normalizeValue(nextProps.value, nextProps.format)
|
||||||
? moment(nextProps.value, nextProps.format)
|
|
||||||
: undefined
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -505,7 +509,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||||
shortcuts,
|
shortcuts,
|
||||||
utc,
|
utc,
|
||||||
overlayPlacement,
|
overlayPlacement,
|
||||||
locale
|
locale,
|
||||||
|
format
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const __ = this.props.translate;
|
const __ = this.props.translate;
|
||||||
|
@ -539,7 +544,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{clearable && !disabled && value ? (
|
{clearable && !disabled && normalizeValue(value, format) ? (
|
||||||
<a className={`${ns}DatePicker-clear`} onClick={this.clearValue}>
|
<a className={`${ns}DatePicker-clear`} onClick={this.clearValue}>
|
||||||
<Icon icon="close" className="icon" />
|
<Icon icon="close" className="icon" />
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -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 {
|
const {
|
||||||
onAction,
|
onAction,
|
||||||
value,
|
value,
|
||||||
|
@ -145,14 +145,27 @@ export default class FormTable extends React.Component<TableProps, TableState> {
|
||||||
env,
|
env,
|
||||||
onChange,
|
onChange,
|
||||||
editable,
|
editable,
|
||||||
|
addApi,
|
||||||
translate: __
|
translate: __
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
if (action.actionType === 'add') {
|
if (action.actionType === 'add') {
|
||||||
const rows = Array.isArray(value) ? value.concat() : [];
|
const rows = Array.isArray(value) ? value.concat() : [];
|
||||||
|
|
||||||
if (action.payload) {
|
if (addApi || action.payload) {
|
||||||
let toAdd = dataMapping(action.payload, ctx);
|
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];
|
toAdd = Array.isArray(toAdd) ? toAdd : [toAdd];
|
||||||
|
|
||||||
|
@ -161,7 +174,8 @@ export default class FormTable extends React.Component<TableProps, TableState> {
|
||||||
rows,
|
rows,
|
||||||
item => item[valueField as string] == toAdd[valueField as string]
|
item => item[valueField as string] == toAdd[valueField as string]
|
||||||
);
|
);
|
||||||
if (~idx) {
|
// 应该只有配置了 valueField 的时候,才去删重复项
|
||||||
|
if (~idx && valueField) {
|
||||||
rows.splice(idx, 1);
|
rows.splice(idx, 1);
|
||||||
}
|
}
|
||||||
rows.push(toAdd);
|
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);
|
this.startEdit(rows.length - 1, rows[rows.length - 1], true);
|
||||||
}
|
}
|
||||||
|
|
||||||
// todo 如果配置新增 Api 怎么办?
|
|
||||||
return;
|
return;
|
||||||
} else {
|
} else {
|
||||||
return this.addItem(rows.length - 1);
|
return this.addItem(rows.length - 1);
|
||||||
|
|
Loading…
Reference in New Issue