update apolloTable daterange

components/apolloTable/component/Cell.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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';
             }
-        return emptyModel;
+            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';
+        }
+        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

-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 { format = formatStr } = componentAttr || {};
-
-    let valueStr = '';
-    if (typeof formatValue === 'string') {
-        valueStr = formatValue;
+    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 {
-        valueStr = formatValue.format ? formatValue.format(format) : formatValue;
+                setDotVisible(false);
             }
-    return <div className={s.text}>{valueStr}</div>;
+        }
+    }, [value]);
+
+    const { format = formatStr } = componentAttr || {};
+
+    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

@@ -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

@@ -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

@@ -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 {