{
- 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={() => {
diff --git a/components/apolloTable/component/Table.less b/components/apolloTable/component/Table.less
index 7014c76efd80751ad9a516c14ee04fd3c0af4182..369234710ad00dcbdcc1bf2b8f6eaa108ca33b89 100644
--- a/components/apolloTable/component/Table.less
+++ b/components/apolloTable/component/Table.less
@@ -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;
}
diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx
index 7489cd4e9291af1de94b3c2c7f4c8620458e1812..51cbd62611bae348befd07dba609adf36680d64c 100644
--- a/components/apolloTable/component/Table.tsx
+++ b/components/apolloTable/component/Table.tsx
@@ -209,11 +209,11 @@ export default class AirTable extends Component
{
}
};
- changeSelectedCell=(key)=>{
+ changeSelectedCell = (key) => {
this.setState({
- selectedCell:key
- })
- }
+ selectedCell: key,
+ });
+ };
// 渲染表头
renderHeaderCell = (
@@ -253,66 +253,14 @@ export default class AirTable extends Component {
);
};
- 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 {
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 {
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 (
{
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 {
selectedCell={selectedCell}
changeSelectedCell={this.changeSelectedCell}
cellKey={key}
+ position={position}
/>
);
};
@@ -451,9 +435,10 @@ export default class AirTable extends Component {
}}
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 {
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 {
}}
className={styles.sideGrid}
overscanRowCount={overscanRowCount}
- cellRenderer={this.renderBodyRow.bind(this, {
+ cellRenderer={this.renderBodyCell.bind(this, {
showColumns: rightColumns,
showData: rightData,
position: 'right',
diff --git a/components/apolloTable/component/base/_utils/getFormatter.tsx b/components/apolloTable/component/base/_utils/getFormatter.tsx
index f34dd2c7a21d5075bfa83ef38ac497f2f6ea0273..930b71dcd47dc355e9fc7d6cef91f37a55ab6820 100644
--- a/components/apolloTable/component/base/_utils/getFormatter.tsx
+++ b/components/apolloTable/component/base/_utils/getFormatter.tsx
@@ -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 : [];
diff --git a/components/apolloTable/component/base/_utils/setFormatter.tsx b/components/apolloTable/component/base/_utils/setFormatter.tsx
index 30f5638152b908b838d0cda8ef05e97a78004754..c30752f1c8276e3eb72fc1001906f85aea8e48a3 100644
--- a/components/apolloTable/component/base/_utils/setFormatter.tsx
+++ b/components/apolloTable/component/base/_utils/setFormatter.tsx
@@ -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;
diff --git a/components/apolloTable/component/base/detail/dateRange/index.tsx b/components/apolloTable/component/base/detail/dateRange/index.tsx
index 94f013e9b4e29833ca446afce8f7bdf59c79ad30..3404b17810fc2c50b5a77b655c6711187c8e3499 100644
--- a/components/apolloTable/component/base/detail/dateRange/index.tsx
+++ b/components/apolloTable/component/base/detail/dateRange/index.tsx
@@ -1,20 +1,50 @@
-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 {valueStr} ;
+ const arr: any[] = [];
+ formatValue.map((item) => {
+ arr.push(item.format ? item.format(format) : item);
+ });
+ const dateStr = arr.join('~');
+
+ return (
+
+ {dotVisible ? (
+
+ {dateStr}
+
+ ) : (
+ {dateStr}
+ )}
+
+ {dateStr}
+
+ |