diff --git a/src/renderers/Card.tsx b/src/renderers/Card.tsx index 0e648bfdc..49b19ddaa 100644 --- a/src/renderers/Card.tsx +++ b/src/renderers/Card.tsx @@ -15,6 +15,7 @@ import Copyable from './Copyable'; export interface CardProps extends RendererProps { onCheck: (item: IItem) => void; + itemIndex?: number; multiple?: boolean; highlightClassName?: string; hideCheckToggler?: boolean; @@ -191,7 +192,7 @@ export class Card extends React.Component { } renderFeild(region: string, field: any, key: any, props: any) { - const {render, classnames: cx} = props; + const {render, classnames: cx, itemIndex} = props; const data = this.props.data; const $$id = field.$$id ? `${field.$$id}-field` : ''; @@ -213,6 +214,8 @@ export class Card extends React.Component { }, { className: cx('Card-fieldValue', field.className), + rowIndex: itemIndex, + colIndex: key, value: field.name ? resolveVariable(field.name, data) : undefined, popOverContainer: this.getPopOverContainer, onAction: this.handleAction, diff --git a/src/renderers/Cards.tsx b/src/renderers/Cards.tsx index 9b758edcc..a01a72a45 100644 --- a/src/renderers/Cards.tsx +++ b/src/renderers/Cards.tsx @@ -693,6 +693,7 @@ export default class Cards extends React.Component { 'is-moved': item.moved, }), item, + intemIndex: item.index, multiple, hideCheckToggler, selectable: store.selectable, diff --git a/src/renderers/Form/Table.tsx b/src/renderers/Form/Table.tsx index d42c5ecd4..0a52650d4 100644 --- a/src/renderers/Form/Table.tsx +++ b/src/renderers/Form/Table.tsx @@ -71,7 +71,9 @@ export default class FormTable extends React.Component { "deleteApi" ]; - entries:Array = []; + entries:Map; + entityId: number = 0; + subForms:any = {} constructor(props:TableProps) { super(props); @@ -80,12 +82,51 @@ export default class FormTable extends React.Component { editIndex: -1 }; + this.entries = new Map(); this.buildItemProps = this.buildItemProps.bind(this); this.confirmEdit = this.confirmEdit.bind(this); this.cancelEdit = this.cancelEdit.bind(this); this.handleSaveTableOrder = this.handleSaveTableOrder.bind(this); this.handleTableSave = this.handleTableSave.bind(this); this.getEntryId = this.getEntryId.bind(this); + this.subFormRef = this.subFormRef.bind(this); + } + + componentWillUnmount() { + this.entries.clear(); + } + + subFormRef(form:any, x:number, y:number) { + console.log(form, x, y); + this.subForms[`${x}-${y}`] = form; + } + + validate():any { + const { + value, + minLength, + maxLength + } = this.props; + + if (minLength && (!Array.isArray(value) || value.length < minLength)) { + return `组合表单成员数量不够,低于最小的设定${minLength}个,请添加更多的成员。`; + } else if (maxLength && Array.isArray(value) && value.length > maxLength) { + return `组合表单成员数量超出,超出最大的设定${maxLength}个,请删除多余的成员。`; + } else { + const subForms:Array = []; + Object.keys(this.subForms).forEach(key => this.subForms[key] && subForms.push(this.subForms[key])); + if (subForms.length) { + return Promise + .all(subForms.map(item => item.validate())) + .then((values) => { + if (~values.indexOf(false)) { + return '内部表单验证失败'; + } + + return; + }) + } + } } doAction(action:Action, ctx:RendererData, ...rest:Array) { @@ -487,19 +528,17 @@ export default class FormTable extends React.Component { } removeEntry(entry:any) { - const idx = this.entries.indexOf(entry); - ~idx && this.entries.splice(idx, 1); + if (this.entries.has(entry)) { + this.entries.delete(entry); + } } getEntryId(entry:any) { - let idx = this.entries.indexOf(entry); - - if (!~idx) { - idx = this.entries.length; - this.entries.push(entry); + if (!this.entries.has(entry)) { + this.entries.set(entry, this.entityId++); } - return String(idx); + return String(this.entries.get(entry)); } render() { @@ -530,7 +569,8 @@ export default class FormTable extends React.Component { getEntryId: this.getEntryId, onSave: this.handleTableSave, onSaveOrder: this.handleSaveTableOrder, - buildItemProps: this.buildItemProps + buildItemProps: this.buildItemProps, + quickEditFormRef: this.subFormRef })} );; diff --git a/src/renderers/List.tsx b/src/renderers/List.tsx index 61f588fcf..1cadef87c 100644 --- a/src/renderers/List.tsx +++ b/src/renderers/List.tsx @@ -650,6 +650,7 @@ export default class List extends React.Component { checkable: item.checkable, multiple, item, + itemIndex: item.index, hideCheckToggler, checkOnItemClick, selected: item.checked, @@ -695,6 +696,7 @@ export class ListRenderer extends List { export interface ListItemProps extends RendererProps { hideCheckToggler?: boolean; item: IItem; + itemIndex?: number; checkable?: boolean; checkOnItemClick?: boolean; } @@ -854,6 +856,7 @@ export class ListItem extends React.Component { const render = props.render || this.props.render; const data = this.props.data; const cx = this.props.classnames; + const itemIndex = this.props.itemIndex; const $$id = field.$$id ? `${field.$$id}-field` : ''; @@ -877,6 +880,8 @@ export class ListItem extends React.Component { type: 'list-item-field', }, { + rowIndex: itemIndex, + colIndex: key, className: cx('ListItem-fieldValue', field.className), value: field.name ? resolveVariable(field.name, data) : `-`, onAction: this.handleAction, diff --git a/src/renderers/QuickEdit.tsx b/src/renderers/QuickEdit.tsx index 0db704d7b..c012c55a9 100644 --- a/src/renderers/QuickEdit.tsx +++ b/src/renderers/QuickEdit.tsx @@ -62,6 +62,7 @@ export const HocQuickEdit = (config: Partial = {}) => (Componen this.overlayRef = this.overlayRef.bind(this); this.handleWindowKeyPress = this.handleWindowKeyPress.bind(this); this.handleWindowKeyDown = this.handleWindowKeyDown.bind(this); + this.formRef = this.formRef.bind(this); this.state = { isOpened: false, @@ -80,6 +81,22 @@ export const HocQuickEdit = (config: Partial = {}) => (Componen document.body.addEventListener('keydown', this.handleWindowKeyDown); } + formRef(ref:any) { + const { + quickEditFormRef, + rowIndex, + colIndex + } = this.props; + + if (quickEditFormRef) { + while (ref && ref.getWrappedInstance) { + ref = ref.getWrappedInstance(); + } + + quickEditFormRef(ref, colIndex, rowIndex); + } + } + handleWindowKeyPress(e: Event) { const ns = this.props.classPrefix; let el: HTMLElement = (e.target as HTMLElement).closest(`.${ns}Field--quickEditable`) as HTMLElement; @@ -347,6 +364,7 @@ export const HocQuickEdit = (config: Partial = {}) => (Componen onSubmit: this.handleSubmit, onAction: this.handleAction, onChange: null, + ref: this.formRef, popOverContainer: popOverContainer ? () => this.overlay : null, })} @@ -388,6 +406,7 @@ export const HocQuickEdit = (config: Partial = {}) => (Componen {render('inline-form', this.buildSchema(), { wrapperComponent: 'div', className: cx('Form--quickEdit'), + ref: this.formRef, onChange: (values: object) => onQuickChange(values, (quickEdit as QuickEditConfig).saveImmediately), })} diff --git a/src/renderers/Table.tsx b/src/renderers/Table.tsx index 3dd7840ef..11fefd6d0 100644 --- a/src/renderers/Table.tsx +++ b/src/renderers/Table.tsx @@ -1223,12 +1223,13 @@ export default class Table extends React.Component { return flatMap(rows, (item: IRow, rowIndex: number) => { const itemProps = buildItemProps ? buildItemProps(item, rowIndex) : null; + const doms = [ 1 ? item.id : item.key} + key={item.id} itemIndex={rowIndex} item={item} itemClassName={rowClassName} @@ -1249,7 +1250,7 @@ export default class Table extends React.Component { {...itemProps} classPrefix={ns} checkOnItemClick={checkOnItemClick} - key={`foot-${item.index}`} + key={`foot-${item.id}`} itemIndex={rowIndex} item={item} itemClassName={rowClassName} @@ -1492,6 +1493,7 @@ class TableRow extends React.Component { ...rest, width: null, rowIndex: itemIndex, + colIndex: column.index, key: column.index, onAction: this.handleAction, onQuickChange: this.handleQuickChange, @@ -1526,6 +1528,7 @@ class TableRow extends React.Component { renderCell(`${itemIndex}/${column.index}`, column, item, { ...rest, rowIndex: itemIndex, + colIndex: column.index, key: column.index, onAction: this.handleAction, onQuickChange: this.handleQuickChange, diff --git a/src/store/form.ts b/src/store/form.ts index 6037e6412..99843fa56 100644 --- a/src/store/form.ts +++ b/src/store/form.ts @@ -340,10 +340,11 @@ export const FormStore = ServiceStore item = self.items[self.items.length - 1] as IFormItemStore; - options && item.config(options); - // 默认值可能在原型上,把他挪到当前对象上。 setValueByName(item.name, item.value); + + options && item.config(options); + return item; }