From 49179a1acb814c5815ae4e2597bf59cb8441fdab Mon Sep 17 00:00:00 2001 From: zhangwenshuai Date: Thu, 23 Jul 2020 21:02:10 +0800 Subject: [PATCH] =?UTF-8?q?cell=20=E5=A2=9E=E5=8A=A0tableId=EF=BC=8C?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=BC=B9=E6=A1=86=E7=B1=BB=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=9C=80=E5=A4=A7=E9=AB=98=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/apolloTable/component/Cell.tsx | 16 +++++++++++----- components/apolloTable/component/Table.tsx | 15 ++++++++++++--- .../component/base/edit/editInterface.tsx | 2 ++ .../component/base/edit/select/index.tsx | 19 ++++++++++++++----- .../base/extra/associationSearch/index.tsx | 5 ++++- .../base/extra/dataEntry/textSelect/index.tsx | 5 ++++- components/apolloTable/component/index.tsx | 2 ++ .../apolloTable/component/interface.tsx | 4 ++++ 8 files changed, 53 insertions(+), 15 deletions(-) diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx index 7b61b70..3889e68 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 e4a548e..6699083 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 beb1064..5680dfc 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 d32d190..aec8317 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 d7bbb79..160abf6 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 e67ebd8..a9e3236 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 { -- 2.21.0