add expand

components/apolloTable/component/Cell.less

@@ -21,6 +21,23 @@
     .checkbox {
         margin-right: 10px;
     }
+    .expand{
+        text-align: center;
+        width: 20px;
+        border-radius: 50%;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: @marginSm;
+        cursor: pointer;
+        &:hover{
+            background: #d0f0fd;
+        }
+        .expandIcon{
+            width: 16px;
+        }
+    }
     .content {
         flex: 1;
         overflow: hidden;

components/apolloTable/component/Cell.tsx

@@ -9,6 +9,7 @@ import FormHelper from '../utils/formHelper';
 import firstIcon from '../assets/first.png';
 import secondIcon from '../assets/second.png';
 import thirdIcon from '../assets/third.png';
+import expandIcon from '../assets/extend.png';
 import { transferAttr } from './base/_utils/transferAttr';
 
 const Cell = (props: CellProps) => {
@@ -36,6 +37,7 @@ const Cell = (props: CellProps) => {
         renderEditCell,
         cellRenderProps,
         readOnlyFlag,
+        showExpand,
     } = columnConfig;
     const [status, setStatus] = useState('detail');
 
@@ -111,23 +113,23 @@ const Cell = (props: CellProps) => {
         const { current = 1, pageSize = 20 } = paginationConfig || {};
 
         const getIndex = () => {
-            if (current === 1) {
-                let src = '';
-                switch (rowIndex) {
-                    case 0:
-                        src = firstIcon;
-                        break;
-                    case 1:
-                        src = secondIcon;
-                        break;
-                    case 2:
-                        src = thirdIcon;
-                        break;
-                    default:
-                        return rowIndex + 1;
-                }
-                return <img className={s.icon} alt="" src={src} />;
-            }
+            // if (current === 1) {
+            //     let src = '';
+            //     switch (rowIndex) {
+            //         case 0:
+            //             src = firstIcon;
+            //             break;
+            //         case 1:
+            //             src = secondIcon;
+            //             break;
+            //         case 2:
+            //             src = thirdIcon;
+            //             break;
+            //         default:
+            //             return rowIndex + 1;
+            //     }
+            //     return <img className={s.icon} alt="" src={src} />;
+            // }
             return (current - 1) * pageSize + rowIndex + 1;
         };
         const getCheckbox = () => {
@@ -160,6 +162,7 @@ const Cell = (props: CellProps) => {
             >
                 {rowSelection && columnIndex === 0 && <div className={s.checkbox}>{getCheckbox()}</div>}
                 {showIndex && columnIndex === 0 && <div className={s.num}>{getIndex()}</div>}
+                {showExpand && columnIndex === 0 && <div className={s.expand}><img onClick={showExpand.bind(null,{rowId:record.id})} className={s.expandIcon} alt="" src={expandIcon}/></div>}
                 {empty ? (
                     emptyPlaceholder || '-'
                 ) : (

components/apolloTable/component/Table.less

@@ -44,15 +44,15 @@
 .sideGrid {
     overflow: hidden !important;
     outline: none;
-    .bodyCell {
-        font-size: 20px;
-        color: @textGeneralColor;
-        font-weight: @weightRegular;
-    }
 }
 .centerGrid {
     outline: none;
 }
+.bodyCell {
+    font-size: 20px;
+    color: @textGeneralColor;
+    font-weight: @weightRegular;
+}
 
 .headerGrid {
     width: 100%;

components/apolloTable/component/Table.tsx

@@ -278,8 +278,8 @@ export default class AirTable extends Component<TableProps, TableState> {
     ) => {
         const columnConfig = showColumns[columnIndex];
         const { cellClassName, cellStyle } = columnConfig;
-        const className = getMergeClassName(rowClassName, cellClassName, { columnIndex });
-        const mergedCellStyle = getMergeStyle(rowStyle, cellStyle, { columnIndex });
+        const className = getMergeClassName(rowClassName, cellClassName, { columnIndex, columnConfig });
+        const mergedCellStyle = getMergeStyle(rowStyle, cellStyle, { columnIndex, columnConfig });
         return this.renderBodyCell(
             { showColumns, showData, position },
             {

components/apolloTable/utils/utils.tsx

@@ -93,7 +93,10 @@ export function getMergeClassName(
         mergeClassName = '';
     }
     if (typeof mergeClassName === 'function') {
-        className = `${className} ${mergeClassName(mergeData)}`;
+        const mergeClass = mergeClassName(mergeData);
+        if (mergeClass) {
+            className = `${className} ${mergeClass}`;
+        }
     } else {
         className = `${className} ${mergeClassName}`;
     }