Skip to content

S
submodule
Commit 49179a1a authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

cell 增加tableId，修改弹框类组件最大高度

parent a312367f
Hide whitespace changes
Inline Side-by-side
Showing with 53 additions and 15 deletions
components/apolloTable/component/Cell.tsx
View file @ 49179a1a
......@@ -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}
/>
</div>
);
......@@ -346,14 +352,14 @@ const Cell = (props: CellProps) => {
return (
<div
className={classNames(s.cellContainer, `row_${rowIndex}`, `col_${columnIndex}`, cellClassName)}
className={classNames(s.cellContainer, `table_${tableId}`, `row_${rowIndex}`, `col_${columnIndex}`, cellClassName)}
style={cellStyle}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
{columnIndex === 0 && (rowSelection || showExpand || showIndex) && renderFirst()}
<div
className={classNames(s.cellData, 'cellUnit', `row_${rowIndex}`, `col_${columnIndex}`)}
className={classNames(s.cellData, 'cellUnit', `table_${tableId}`, `row_${rowIndex}`, `col_${columnIndex}`)}
id={`cellUnit_${rowIndex}_${columnIndex}`}
data-selected-cell="0"
data-editing-cell="0"
......
components/apolloTable/component/Table.tsx
View file @ 49179a1a
......@@ -422,7 +422,8 @@ export default class AirTable extends Component<TableProps, TableState> {
}: { 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<TableProps, TableState> {
contentMenu,
rowClassName,
rowStyle,
tableId,
} = this.props;
if (showColumns.length === 0 || showData.length === 0) {
return;
......@@ -479,6 +481,11 @@ export default class AirTable extends Component<TableProps, TableState> {
cellData,
});
let maxPopHeight = (tableHeight - headerHeight) / 2;
if (maxPopHeight > 250) {
maxPopHeight = 250;
}
return (
<Cell
key={key}
......@@ -501,12 +508,14 @@ export default class AirTable extends Component<TableProps, TableState> {
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<TableProps, TableState> {
style={{
paddingRight: this.props.onScroll ? paddingRight : 0,
}}
id="tableContainer"
id={`apolloTable_${tableId}`}
ref={(dom) => {
this.tableContainer = dom;
}}
......
components/apolloTable/component/base/edit/editInterface.tsx
View file @ 49179a1a
......@@ -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;
......
components/apolloTable/component/base/edit/select/index.tsx
View file @ 49179a1a
......@@ -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' ? (
<Select
className={styles.select}
{...selfProps}
onChange={changeValue}
onDropdownVisibleChange={selfProps.mode === 'multiple' ? multipleBlurFn : singleBlurFn}
dropdownStyle={{
maxHeight: maxPopHeight,
}}
>
{options.map((item) => {
return (
......@@ -44,10 +48,15 @@ export const ApolloSelect = (props: ApolloSelectProps) => {
</Select.Option>
);
})}
</Select> : <Select
</Select>
) : (
<Select
className={styles.select}
{...selfProps}
onChange={changeValue}
dropdownStyle={{
maxHeight: maxPopHeight,
}}
>
{options.map((item) => {
return (
......
components/apolloTable/component/base/extra/associationSearch/index.tsx
View file @ 49179a1a
......@@ -227,7 +227,7 @@ class AssociationSearch extends React.Component<Props, State> {
render() {
const { data, value } = this.state;
const { selfCom, autoFocus, onChange, ...rest } = this.props;
const { selfCom, autoFocus, onChange, maxPopHeight, ...rest } = this.props;
return (
<Consumer>
{({ locale }: any) => {
......@@ -243,6 +243,9 @@ class AssociationSearch extends React.Component<Props, State> {
onChange={this.handleChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
dropdownStyle={{
maxHeight: maxPopHeight,
}}
>
{data.map((d: any) => {
return (
......
components/apolloTable/component/base/extra/dataEntry/textSelect/index.tsx
View file @ 49179a1a
......@@ -198,13 +198,16 @@ class TextSelect extends React.Component<Props, State> {
};
render() {
const { placeholder, disabled } = this.props;
const { placeholder, disabled, maxPopHeight } = this.props;
const { searchStr } = this.state;
return (
<div className={styles.textSelectContainer} ref={this.container}>
<Dropdown
trigger={['click']}
overlayClassName={styles.overlayClassName}
overlayStyle={{
maxHeight: maxPopHeight,
}}
onVisibleChange={this.onVisibleChange}
placement="bottomLeft"
overlay={this.renderList()}
......
components/apolloTable/component/index.tsx
View file @ 49179a1a
......@@ -86,6 +86,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
canFixed,
id,
onDragSorted,
tableId,
} = this.props;
const sortConfig = operateConfig
&& operateConfig.menusGroup
......@@ -145,6 +146,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
loadComp={loadComp}
canFixed={canFixed}
onDragSorted={onDragSorted}
tableId={tableId}
/>
</div>
</div>
......
components/apolloTable/component/interface.tsx
View file @ 49179a1a
......@@ -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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment