Merge pull request #870 from RickCole21/master

表格actionType:add,支持addApi;时间组件默认值显示优化
This commit is contained in:
liaoxuezhi 2020-08-21 11:16:38 +08:00 committed by GitHub
commit 926e5a9f23
3 changed files with 35 additions and 14 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) 还可以在列上配置`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; 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>

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 { 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);
@ -231,7 +244,8 @@ export default class FormTable extends React.Component<TableProps, TableState> {
const scaffold = this.props.scaffold; const scaffold = this.props.scaffold;
this.setState({ this.setState({
editIndex: index, editIndex: index,
editting: editting || (value && value[index]) || scaffold || {}, editting: this.editting =
editting || (value && value[index]) || scaffold || {},
isCreateMode: isCreate, isCreateMode: isCreate,
columns: columns:
this.state.isCreateMode === isCreate this.state.isCreateMode === isCreate