diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx index 7b61b702fcb3f0cc9169ebfcf637d01f8d206b74..3889e687bef83845762e8594358a3c42d2b8e2c0 100644 --- a/components/apolloTable/component/Cell.tsx +++ b/components/apolloTable/component/Cell.tsx @@ -33,6 +33,8 @@ const Cell = (props: CellProps) => { rowSelection, columns, contentMenu, + tableId, + maxPopHeight, } = props; const { columnType, @@ -72,12 +74,14 @@ const Cell = (props: CellProps) => { if (requiredFlag) { if (!changedValue || changedValue.length === 0) { message.error('该字段为必填项'); + setStatus('detail'); return; } if (changedValue.length === 1) { const data = changedValue[0]; if (!data.value && !data.text) { message.error('该字段为必填项'); + setStatus('detail'); return; } } @@ -102,14 +106,14 @@ const Cell = (props: CellProps) => { }; // 添加行hover样式 const onMouseEnter = () => { - const doms = document.querySelectorAll(`.row_${rowIndex}`); + const doms = document.querySelectorAll(`.table_${tableId}.row_${rowIndex}`); doms.forEach((dom) => { dom.classList.add(s.hover); }); }; // 去除行hover样式 const onMouseLeave = () => { - const doms = document.querySelectorAll(`.row_${rowIndex}`); + const doms = document.querySelectorAll(`.table_${tableId}.row_${rowIndex}`); doms.forEach((dom) => { dom.classList.remove(s.hover); }); @@ -240,7 +244,7 @@ const Cell = (props: CellProps) => { // 否则进入选中状态 if (dom) { // 先清除所有dom的选中状态及样式 - const doms = document.querySelectorAll('.cellUnit'); + const doms = document.querySelectorAll(`.cellUnit.table_${tableId}`); if (doms) { doms.forEach((item) => { item.setAttribute('data-selected-cell', '0'); @@ -334,11 +338,13 @@ const Cell = (props: CellProps) => { const value = setFormat(editConfig, columnConfig, changedValue, optionValue); emitChangeCellData(value, optionValue); }} + tableId={tableId} cellRenderProps={cellRenderProps} style={{ minHeight: cellStyle.height, borderRadius: 0, }} + maxPopHeight={maxPopHeight} /> ); @@ -346,14 +352,14 @@ const Cell = (props: CellProps) => { return (
{columnIndex === 0 && (rowSelection || showExpand || showIndex) && renderFirst()}
{ }: { showColumns: ColumnProps[]; showData: RowProps; position?: string }, { columnIndex, key, rowIndex, style }: any, ) => { - const { columns, dataSource } = this.state; + const { columns, dataSource, tableHeight = 0 } = this.state; + const { headerHeight } = this.config; const { emitChangeCell, paginationConfig, @@ -434,6 +435,7 @@ export default class AirTable extends Component { contentMenu, rowClassName, rowStyle, + tableId, } = this.props; if (showColumns.length === 0 || showData.length === 0) { return; @@ -479,6 +481,11 @@ export default class AirTable extends Component { cellData, }); + let maxPopHeight = (tableHeight - headerHeight) / 2; + if (maxPopHeight > 250) { + maxPopHeight = 250; + } + return ( { contentMenu={contentMenu} cellKey={key} position={position} + tableId={tableId} + maxPopHeight={maxPopHeight} /> ); }; render() { - const { loading, noDataPlaceholder, loadComp, canFixed } = this.props; + const { loading, noDataPlaceholder, loadComp, canFixed, tableId } = this.props; const { columns, dataSource, tableWidth = 0, tableHeight = 0 } = this.state; const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight, columnWidth } = this.config; const scrollbarWidth = scrollbarSize() || 0; @@ -548,7 +557,7 @@ export default class AirTable extends Component { style={{ paddingRight: this.props.onScroll ? paddingRight : 0, }} - id="tableContainer" + id={`apolloTable_${tableId}`} ref={(dom) => { this.tableContainer = dom; }} diff --git a/components/apolloTable/component/base/edit/editInterface.tsx b/components/apolloTable/component/base/edit/editInterface.tsx index e4a548e06e6bdced931b9af0f067346d0c8d6d36..669908305933bbde1a3a352ae7c8ad3b75fe3dfe 100644 --- a/components/apolloTable/component/base/edit/editInterface.tsx +++ b/components/apolloTable/component/base/edit/editInterface.tsx @@ -13,6 +13,8 @@ export interface LinkData { export interface CommonProps { onEmitChange?: Function; isMobile?: boolean; + origin?: string; + tableId?: string|number; } export interface ApolloInputProps extends InputProps, CommonProps { value: string | undefined; diff --git a/components/apolloTable/component/base/edit/select/index.tsx b/components/apolloTable/component/base/edit/select/index.tsx index beb1064c1fc2a8361b9b147e99c3d010c56d3985..5680dfccca7e291a4c3b627f6bd278dd9af9ab47 100644 --- a/components/apolloTable/component/base/edit/select/index.tsx +++ b/components/apolloTable/component/base/edit/select/index.tsx @@ -6,9 +6,9 @@ import { antiAssign } from '../../../../utils/utils'; import styles from './styles.less'; export const ApolloSelect = (props: ApolloSelectProps) => { - const { options = [], onChange, isMultiple, origin } = props; - const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'isMultiple', 'options']); - const isOpen = useRef(); + const { options = [], onChange, isMultiple, origin, maxPopHeight } = props; + const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'isMultiple', 'options', 'maxPopHeight']); + const isOpen: any = useRef(); if (isMultiple) { selfProps.mode = 'multiple'; @@ -30,12 +30,16 @@ export const ApolloSelect = (props: ApolloSelectProps) => { onBlurFn(props); } }; - return (origin === 'editForm' ? + + return origin === 'editForm' ? ( : {options.map((item) => { return ( diff --git a/components/apolloTable/component/base/extra/associationSearch/index.tsx b/components/apolloTable/component/base/extra/associationSearch/index.tsx index d32d190c01aa82e7b6437c6b5db9928014bfb1d8..aec8317c194d6fc913c229f8e61793b7d68c3c20 100644 --- a/components/apolloTable/component/base/extra/associationSearch/index.tsx +++ b/components/apolloTable/component/base/extra/associationSearch/index.tsx @@ -227,7 +227,7 @@ class AssociationSearch extends React.Component { render() { const { data, value } = this.state; - const { selfCom, autoFocus, onChange, ...rest } = this.props; + const { selfCom, autoFocus, onChange, maxPopHeight, ...rest } = this.props; return ( {({ locale }: any) => { @@ -243,6 +243,9 @@ class AssociationSearch extends React.Component { onChange={this.handleChange} onFocus={this.onFocus} onBlur={this.onBlur} + dropdownStyle={{ + maxHeight: maxPopHeight, + }} > {data.map((d: any) => { return ( diff --git a/components/apolloTable/component/base/extra/dataEntry/textSelect/index.tsx b/components/apolloTable/component/base/extra/dataEntry/textSelect/index.tsx index d7bbb798747c750af14fa63d67a1177a6b929687..160abf6402954dbc917900515f602ced3028c30f 100644 --- a/components/apolloTable/component/base/extra/dataEntry/textSelect/index.tsx +++ b/components/apolloTable/component/base/extra/dataEntry/textSelect/index.tsx @@ -198,13 +198,16 @@ class TextSelect extends React.Component { }; render() { - const { placeholder, disabled } = this.props; + const { placeholder, disabled, maxPopHeight } = this.props; const { searchStr } = this.state; return (
{ canFixed, id, onDragSorted, + tableId, } = this.props; const sortConfig = operateConfig && operateConfig.menusGroup @@ -145,6 +146,7 @@ class AirTable extends React.Component { loadComp={loadComp} canFixed={canFixed} onDragSorted={onDragSorted} + tableId={tableId} />
diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx index e67ebd864cdf4d18833aad9a47de17a99e821661..a9e323603f60a64c86662d2e4da2dc62f96565db 100644 --- a/components/apolloTable/component/interface.tsx +++ b/components/apolloTable/component/interface.tsx @@ -77,6 +77,7 @@ export interface TableProps extends LoadConfigProps { canSorted?: boolean;// 是否可以拖拽自定义列排序 canResized?: boolean;// 是否可以拖拽自定义列伸缩 onDragSorted?:Function;// 拖拽更改列排序回调 + tableId?:string|number;// tableId } export interface TableState { columns: ColumnProps[]; @@ -93,6 +94,7 @@ export interface CommonProps extends TableProps { tableClassName?: string; showCondition?: boolean; id?:string; + tableId?:string|number; } export interface CommonState extends TableState {} @@ -130,6 +132,8 @@ export interface CellProps { selectedCell?: any; changeSelectedCell?: Function; position: string; + tableId?:string|number; + maxPopHeight?:string|number; } export interface EditCellProps {