Skip to content

S
submodule
Commit 881774e7 authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

update apolloTable daterange

parent 26e5e06e
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 106 deletions
components/apolloTable/component/Cell.tsx
View file @ 881774e7
......@@ -19,6 +19,7 @@ const Cell = (props: CellProps) => {
cellClassName,
cellStyle,
record,
columnData,
value: cellData,
emitChangeCell,
columnIndex,
......@@ -33,6 +34,7 @@ const Cell = (props: CellProps) => {
selectedCell,
cellKey,
changeSelectedCell,
position = 'center',
} = props;
const {
columnType,
......@@ -158,14 +160,22 @@ const Cell = (props: CellProps) => {
return <Checkbox checked={checked} onClick={onToggle} />;
};
const { dynamicCellConfigDTO } = columnData;
const detail = (
<div
className={selectedCell === cellKey ? classNames(s.detailCell, s.selected) : s.detailCell}
className={
selectedCell === `${position}_${cellKey}` ? classNames(s.detailCell, s.selected) : s.detailCell
}
onClick={() => {
if (selectedCell === cellKey) {
cellEditable && !readOnlyFlag && setStatus('edit');
// 不可编辑状态
if (!cellEditable || readOnlyFlag || (dynamicCellConfigDTO && dynamicCellConfigDTO.readonlyFlag)) {
return false;
}
if (selectedCell === `${position}_${cellKey}`) {
setStatus('edit');
} else {
changeSelectedCell && changeSelectedCell(cellKey);
changeSelectedCell && changeSelectedCell(`${position}_${cellKey}`);
}
}}
// onDoubleClick={() => {
......
components/apolloTable/component/Table.less
View file @ 881774e7
......@@ -7,11 +7,11 @@
border: 1px solid @borderColor;
&.scroll {
height: 100%;
.loading{
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
}
}
.leftSideContainer {
......@@ -32,7 +32,7 @@
right: 0;
z-index: 1;
}
:global(.ReactVirtualized__Grid__innerScrollContainer){
:global(.ReactVirtualized__Grid__innerScrollContainer) {
overflow: unset !important;
}
}
......@@ -59,6 +59,9 @@
}
.centerGrid {
outline: none;
}
.bodyRow {
}
.bodyCell {
font-size: 20px;
......@@ -100,6 +103,6 @@
right: 0;
pointer-events: none;
}
.defaultEmpty{
.defaultEmpty {
padding-top: 100px;
}
components/apolloTable/component/Table.tsx
View file @ 881774e7
......@@ -209,11 +209,11 @@ export default class AirTable extends Component<TableProps, TableState> {
}
};
changeSelectedCell=(key)=>{
changeSelectedCell = (key) => {
this.setState({
selectedCell:key
})
}
selectedCell: key,
});
};
// 渲染表头
renderHeaderCell = (
......@@ -253,66 +253,14 @@ export default class AirTable extends Component<TableProps, TableState> {
);
};
renderBodyRow = (
{ showColumns, showData, position }: { showColumns: ColumnProps[]; showData: RowProps; position?: string },
{ columnIndex, key, rowIndex, style }: any,
) => {
const { rowClassName, rowStyle, bordered = false } = this.props;
// 默认边框覆盖掉传过来的样式
const rowBorderStyle: any = {
borderLeft: 'none',
borderRight: 'none',
borderTop: 'none',
borderBottom: borderStyle,
};
if (bordered) {
rowBorderStyle.borderRight = borderStyle;
if (columnIndex === 0) {
rowBorderStyle.borderLeft = borderStyle;
}
}
const className = getMergeClassName(styles.bodyCell, rowClassName, { rowIndex });
const rowStyleObject = getMergeStyle(style, rowStyle, { rowIndex });
const mergedRowStyle = {
...rowStyleObject,
...rowBorderStyle,
};
return this.renderBodyCellContainer(
{ showColumns, showData, position },
{
columnIndex,
key,
rowIndex,
rowClassName: className,
rowStyle: mergedRowStyle,
},
);
};
renderBodyCellContainer = (
{ showColumns, showData, position }: { showColumns: ColumnProps[]; showData: RowProps; position?: string },
{ columnIndex, key, rowIndex, rowClassName, rowStyle }: any,
) => {
const columnConfig = showColumns[columnIndex];
const { cellClassName, cellStyle } = columnConfig;
const className = getMergeClassName(rowClassName, cellClassName, { columnIndex, columnConfig });
const mergedCellStyle = getMergeStyle(rowStyle, cellStyle, { columnIndex, columnConfig });
return this.renderBodyCell(
{ showColumns, showData, position },
{
columnIndex,
key,
rowIndex,
cellClassName: className,
cellStyle: mergedCellStyle,
},
);
};
// 渲染数据
renderBodyCell = (
{ showColumns, showData, position }: { showColumns: ColumnProps[]; showData: RowProps; position?: string },
{ columnIndex, key, rowIndex, cellClassName, cellStyle }: any,
{
showColumns,
showData,
position = 'center',
}: { showColumns: ColumnProps[]; showData: RowProps; position?: string },
{ columnIndex, key, rowIndex, style }: any,
) => {
const { columns, dataSource, selectedCell } = this.state;
const {
......@@ -323,6 +271,8 @@ export default class AirTable extends Component<TableProps, TableState> {
cellEditable,
rowSelection,
contentMenu,
rowClassName,
rowStyle,
} = this.props;
if (showColumns.length === 0 || showData.length === 0) {
return;
......@@ -332,6 +282,38 @@ export default class AirTable extends Component<TableProps, TableState> {
const columnConfig: any = showColumns[columnIndex]; // 列属性
const columnData: any = rowData.rowData[columnIndex]; // 列数据
const cellData: any = columnData && columnData.cellValueList; // 列数据
const { cellClassName, cellStyle, bordered = false } = columnConfig;
const rowClassNameStr = getMergeClassName(styles.bodyRow, rowClassName, { rowIndex });
const rowStyleObj = getMergeStyle({}, rowStyle, { rowIndex });
// 默认边框覆盖掉传过来的样式
const cellBorderStyle: any = {
borderLeft: 'none',
borderRight: 'none',
borderTop: 'none',
borderBottom: borderStyle,
};
if (bordered) {
cellBorderStyle.borderRight = borderStyle;
if (columnIndex === 0) {
cellBorderStyle.borderLeft = borderStyle;
}
}
const cellClassNameStr = getMergeClassName(styles.bodyCell, cellClassName, {
columnIndex,
columnConfig,
columnData,
cellData,
});
const cellStyleObj = getMergeStyle({ ...style, ...cellBorderStyle }, cellStyle, {
columnIndex,
columnConfig,
columnData,
cellData,
});
return (
<Cell
key={key}
......@@ -339,10 +321,11 @@ export default class AirTable extends Component<TableProps, TableState> {
columnIndex={columnIndex}
columnConfig={columnConfig}
value={cellData}
columnData={columnData}
record={record}
emitChangeCell={emitChangeCell}
cellClassName={cellClassName}
cellStyle={cellStyle}
cellClassName={classNames(rowClassNameStr, cellClassNameStr)}
cellStyle={{ ...rowStyleObj, ...cellStyleObj }}
columns={columns}
paginationConfig={paginationConfig}
showIndex={position === 'right' ? false : showIndex}
......@@ -353,6 +336,7 @@ export default class AirTable extends Component<TableProps, TableState> {
selectedCell={selectedCell}
changeSelectedCell={this.changeSelectedCell}
cellKey={key}
position={position}
/>
);
};
......@@ -451,9 +435,10 @@ export default class AirTable extends Component<TableProps, TableState> {
}}
className={styles.sideGrid}
overscanRowCount={overscanRowCount}
cellRenderer={this.renderBodyRow.bind(this, {
cellRenderer={this.renderBodyCell.bind(this, {
showColumns: leftColumns,
showData: leftData,
position: 'left',
})}
columnWidth={this.getColumnWidth.bind(this, {
columns: showColumns,
......@@ -540,9 +525,10 @@ export default class AirTable extends Component<TableProps, TableState> {
this.onScroll(arg[0]);
}}
height={totalHeight}
cellRenderer={this.renderBodyRow.bind(this, {
cellRenderer={this.renderBodyCell.bind(this, {
showColumns,
showData,
position: 'center',
})}
/>
) : (
......@@ -616,7 +602,7 @@ export default class AirTable extends Component<TableProps, TableState> {
}}
className={styles.sideGrid}
overscanRowCount={overscanRowCount}
cellRenderer={this.renderBodyRow.bind(this, {
cellRenderer={this.renderBodyCell.bind(this, {
showColumns: rightColumns,
showData: rightData,
position: 'right',
......
components/apolloTable/component/base/_utils/getFormatter.tsx
View file @ 881774e7
......@@ -77,12 +77,10 @@ export const GetFormatter = {
return obj.value ? moment(obj.value) : undefined;
},
DATERANGE: (val) => {
if (Array.isArray(val)) {
return val.map((item) => {
return moment(item.value);
});
}
return undefined;
const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
const newVal = obj.value ? obj.value.split('~') : [];
const [startTime, endTime] = newVal;
return [startTime && moment(startTime), endTime && moment(endTime)];
},
LINK: (val) => {
return Array.isArray(val) && val.length > 0 ? val : [];
......
components/apolloTable/component/base/_utils/setFormatter.tsx
View file @ 881774e7
......@@ -103,15 +103,49 @@ export const SetFormatter = {
val = val.format ? val.format(setFormat) : val;
return [{ value: val, text: val }];
},
DATERANGE: (val, config) => {
if (Array.isArray(val)) {
let res: any[] = [];
val.map((item) => {
res = res.concat(SetFormatter.DATE(item, config));
});
return res;
DATERANGE: (val, config = {}) => {
const arr = Array.isArray(val) ? val : [];
const { format, showTime } = config;
let setStartFormat = format || formatStr;
let setEndFormat = format || formatStr;
// 如果没有传showTime,则默认按照0点到23点处理
if (showTime) {
// airTable中需对日期类数据处理，没有时分秒时补全为0
if (setStartFormat.indexOf('H') === -1) {
setStartFormat += ' 00';
}
if (setStartFormat.indexOf('m') === -1) {
setStartFormat += ':00';
}
if (setStartFormat.indexOf('s') === -1) {
setStartFormat += ':00';
}
// 结束日期
// airTable中需对日期类数据处理，没有时分秒时补全为0
if (setEndFormat.indexOf('H') === -1) {
setEndFormat += ' 23';
}
if (setEndFormat.indexOf('m') === -1) {
setEndFormat += ':59';
}
if (setEndFormat.indexOf('s') === -1) {
setEndFormat += ':59';
}
} else {
setStartFormat = 'YYYY-MM-DD 00:00:00';
setEndFormat = 'YYYY-MM-DD 23:59:59';
}
return emptyModel;
const formateArr = arr
.map((ls, index) => {
return ls.format ? ls.format(index === 0 ? setStartFormat : setEndFormat) : ls;
})
.join('~');
return [
{
value: formateArr,
text: formateArr,
},
];
},
LINK: (val) => {
return Array.isArray(val) && val.length > 0 ? val : emptyModel;
......
components/apolloTable/component/base/detail/dateRange/index.tsx
View file @ 881774e7
import React from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { Tooltip } from 'antd';
import classNames from 'classnames';
import { formatStr } from '../../_utils/setFormatter';
import s from '../input/index.less';
import { DateProps } from '../detailInterface';
import styles from '../input/index.less';
export const ApolloDateRangeDetail = (props: DateProps) => {
const { value, formatter, componentAttr } = props;
const { value, formatter, componentAttr, className } = props;
const formatValue = formatter ? formatter(value) : value;
if (!formatValue) return null;
if (!formatValue || !Array.isArray(formatValue)) return null;
const [dotVisible, setDotVisible] = useState(false);
const container = useRef(null);
const dom = useRef(null);
useEffect(() => {
const containerTarget: any = container.current;
const target: any = dom.current;
if (containerTarget && target) {
if (target.clientWidth > containerTarget.clientWidth) {
setDotVisible(true);
} else {
setDotVisible(false);
}
}
}, [value]);
const { format = formatStr } = componentAttr || {};
let valueStr = '';
if (typeof formatValue === 'string') {
valueStr = formatValue;
} else {
valueStr = formatValue.format ? formatValue.format(format) : formatValue;
}
return <div className={s.text}>{valueStr}</div>;
const arr: any[] = [];
formatValue.map((item) => {
arr.push(item.format ? item.format(format) : item);
});
const dateStr = arr.join('~');
return (
<div className={styles.container} ref={container}>
{dotVisible ? (
<Tooltip title={dateStr}>
<div className={classNames(styles.text, className)}>{dateStr}</div>
</Tooltip>
) : (
<div className={classNames(styles.text, className)}>{dateStr}</div>
)}
<div className={styles.itemBgTxt} ref={dom}>
{dateStr}
</div>
</div>
);
};
components/apolloTable/component/base/detail/link/index.tsx
View file @ 881774e7
......@@ -6,7 +6,6 @@ import extendIcon from '../../../../assets/extend.png';
export const ApolloLinkDetail = (props: any) => {
const { value, origin } = props;
debugger
if (!Array.isArray(value) || value.length === 0) return null;
const [dotVisible, setDotVisible] = useState(false);
const outer = useRef(null);
......
components/apolloTable/component/base/edit/dateRange/index.tsx
View file @ 881774e7
......@@ -16,7 +16,7 @@ export const ApolloDateRange = (props: any) => {
<RangePicker
className={styles.date}
dropdownClassName={styles.dropdownClassName}
popupStyle={{ width: '350px' }}
// popupStyle={{ width: '350px' }}
{...selfProps}
onChange={changeValue}
/>
......
components/apolloTable/component/interface.tsx
View file @ 881774e7
......@@ -78,7 +78,7 @@ export interface TableState {
dataSource: RowProps[];
tableHeight?: number;
tableWidth?: number;
selectedCell?:any;
selectedCell?: any;
}
export interface CommonProps extends TableProps {
operateConfig?: OperateConfigProps;
......@@ -100,11 +100,12 @@ export interface BaseComponentState {
columnConfig: ColumnProps;
}
export interface CellProps {
cellKey:string;
cellKey: string;
rowIndex: number;
columnIndex: number;
columnConfig: ColumnProps;
value: CellDataProps[];
columnData: any;
record: RowProps;
columns: ColumnProps[];
emitChangeCell?: Function;
......@@ -117,8 +118,9 @@ export interface CellProps {
cellEditable?: boolean;
rowSelection?: any;
contentMenu?: any;
selectedCell?:any;
changeSelectedCell?:Function;
selectedCell?: any;
changeSelectedCell?: Function;
position:string;
}
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