From 6b02a9e04c525625663080bf17381e051fcd5bce Mon Sep 17 00:00:00 2001
From: zhangwenshuai <zhangwenshuai@mttop.cn>
Date: Thu, 9 Jul 2020 18:55:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=AC=AC=E4=B8=80=E5=8D=95?=
 =?UTF-8?q?=E5=85=83=E6=A0=BC=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/apolloTable/component/Cell.less | 139 ++++++++++--------
 components/apolloTable/component/Cell.tsx  | 156 ++++++++++-----------
 2 files changed, 153 insertions(+), 142 deletions(-)

diff --git a/components/apolloTable/component/Cell.less b/components/apolloTable/component/Cell.less
index 201acac..2ca4524 100644
--- a/components/apolloTable/component/Cell.less
+++ b/components/apolloTable/component/Cell.less
@@ -1,5 +1,82 @@
 @import '../common';
 
+.cellContainer {
+    display: flex;
+    .firstArea {
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        overflow: hidden;
+        max-width: 66px;
+        margin-left: @marginLg;
+        .num {
+            min-width: 30px;
+            max-width: 100px;
+            margin-right: 10px;
+            font-size: @textFontGen;
+            .icon {
+                width: 22px;
+            }
+            &.checked {
+                display: none;
+            }
+        }
+        .checkbox {
+            min-width: 30px;
+            max-width: 100px;
+            margin-right: 10px;
+            &.hasNum {
+                display: none;
+            }
+            &.checked {
+                display: block;
+            }
+        }
+        .expand {
+            text-align: center;
+            width: 20px;
+            border-radius: 50%;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: @marginSm;
+            cursor: pointer;
+            visibility: hidden;
+            &:hover {
+                background: #d0f0fd;
+            }
+            .expandIcon {
+                width: 16px;
+            }
+        }
+    }
+    &.hover {
+        background: @tableHoverBgColor;
+        .firstArea {
+            .checkbox {
+                display: block;
+                &.hasNum {
+                    display: block;
+                }
+            }
+            .num {
+                display: block;
+                &.hasCheckbox {
+                    display: none;
+                }
+            }
+            .expand {
+                visibility: visible;
+            }
+        }
+    }
+    .cellData {
+        flex: 1;
+        overflow: hidden;
+    }
+}
+
 .detailCell {
     display: flex;
     align-items: center;
@@ -29,46 +106,7 @@
     //    }
     //}
 
-    .num {
-        min-width: 30px;
-        max-width: 100px;
-        margin-right: 10px;
-        .icon {
-            width: 22px;
-        }
-        &.checked {
-            display: none;
-        }
-    }
-    .checkbox {
-        min-width: 30px;
-        max-width: 100px;
-        margin-right: 10px;
-        &.hasNum {
-            display: none;
-        }
-        &.checked {
-            display: block;
-        }
-    }
-    .expand {
-        text-align: center;
-        width: 20px;
-        border-radius: 50%;
-        height: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-right: @marginSm;
-        cursor: pointer;
-        visibility: hidden;
-        &:hover {
-            background: #d0f0fd;
-        }
-        .expandIcon {
-            width: 16px;
-        }
-    }
+
     .content {
         flex: 1;
         overflow: hidden;
@@ -95,23 +133,4 @@
 &.selected {
     box-shadow: inset 0 0 0 1px @primaryColor;
 }
-&.hover {
-    background: @tableHoverBgColor;
-    .detailCell {
-        .checkbox {
-            display: block;
-            &.hasNum {
-                display: block;
-            }
-        }
-        .num {
-            display: block;
-            &.hasCheckbox {
-                display: none;
-            }
-        }
-        .expand {
-            visibility: visible;
-        }
-    }
-}
+
diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx
index 3fb6add..09b4fc7 100644
--- a/components/apolloTable/component/Cell.tsx
+++ b/components/apolloTable/component/Cell.tsx
@@ -115,46 +115,10 @@ const Cell = (props: CellProps) => {
         });
     };
 
-    const selfRenderDetailCell = () => {
-        // 数据为空
-        let empty =
-            !cellData || cellData.length === 0 || (cellData.length === 1 && !cellData[0].text && !cellData[0].value);
-        let detailConfig;
-        if (typeof renderDetailCell === 'function') {
-            detailConfig = renderDetailCell({ cellData, rowData: record, columnConfig });
-            empty = false;
-        } else {
-            detailConfig = config[String(columnType)] || config['1'];
-        }
-        const DetailComp: any = detailConfig.detailComp;
-
-        const newProps = {
-            ...(detailConfig.componentAttr || {}),
-            ...(columnConfig.columnAttrObj || {}),
-        };
-        const transferColumn = transferAttr(columnType, newProps);
-
-        const style: any = {};
+    const renderFirst = () => {
         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} />;
-            // }
             return (current - 1) * pageSize + rowIndex + 1;
         };
         // 获取当前行在所选列表中的index
@@ -188,6 +152,61 @@ const Cell = (props: CellProps) => {
             };
             return <Checkbox checked={checked} onClick={onToggle} />;
         };
+        return (
+            <div className={s.firstArea}>
+                {rowSelection && columnIndex === 0 && (
+                    <div className={classNames(s.checkbox, showIndex && s.hasNum, getCheckedIndex() > -1 && s.checked)}>
+                        {getCheckbox()}
+                    </div>
+                )}
+                {showIndex && columnIndex === 0 && (
+                    <div
+                        className={classNames(
+                            s.num,
+                            rowSelection && s.hasCheckbox,
+                            getCheckedIndex() > -1 && s.checked,
+                        )}
+                    >
+                        {getIndex()}
+                    </div>
+                )}
+                {showExpand && columnIndex === 0 && (
+                    <div className={s.expand}>
+                        <img
+                            onClick={showExpand.bind(null, { rowId: record.id })}
+                            className={s.expandIcon}
+                            alt=""
+                            src={expandIcon}
+                        />
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    const selfRenderDetailCell = () => {
+        // 数据为空
+        let empty =
+            !cellData || cellData.length === 0 || (cellData.length === 1 && !cellData[0].text && !cellData[0].value);
+        let detailConfig;
+        if (typeof renderDetailCell === 'function') {
+            detailConfig = renderDetailCell({ cellData, rowData: record, columnConfig });
+            empty = false;
+        } else {
+            detailConfig = config[String(columnType)] || config['1'];
+        }
+        const DetailComp: any = detailConfig.detailComp;
+
+        const newProps = {
+            ...(detailConfig.componentAttr || {}),
+            ...(columnConfig.columnAttrObj || {}),
+        };
+        const transferColumn = transferAttr(columnType, newProps);
+
+        const style: any = {};
+        if (columnIndex === 0 && (rowSelection || showExpand || showIndex)) {
+            style.paddingLeft = 0;
+        }
 
         const { dynamicCellConfigDTO } = columnData;
         const detail = (
@@ -231,42 +250,10 @@ const Cell = (props: CellProps) => {
                 }}
                 style={style}
             >
-                {rowSelection && columnIndex === 0 && (
-                    <div className={classNames(s.checkbox, showIndex && s.hasNum, getCheckedIndex() > -1 && s.checked)}>
-                        {getCheckbox()}
-                    </div>
-                )}
-                {showIndex && columnIndex === 0 && (
-                    <div
-                        className={classNames(
-                            s.num,
-                            rowSelection && s.hasCheckbox,
-                            getCheckedIndex() > -1 && s.checked,
-                        )}
-                    >
-                        {getIndex()}
-                    </div>
-                )}
-                {showExpand && columnIndex === 0 && (
-                    <div
-                        className={s.expand}
-                        onClick={(e:any) => {
-                            e.stopPropagation();
-                            e.nativeEvent.stopImmediatePropagation();
-                        }}
-                    >
-                        <img
-                            onClick={showExpand.bind(null, { rowId: record.id })}
-                            className={s.expandIcon}
-                            alt=""
-                            src={expandIcon}
-                        />
-                    </div>
-                )}
-                {empty ? (
-                    emptyPlaceholder || '-'
-                ) : (
-                    <div className={s.content}>
+                <div className={s.content}>
+                    {empty ? (
+                        emptyPlaceholder || '-'
+                    ) : (
                         <DetailComp
                             value={cellData}
                             columns={columns}
@@ -279,8 +266,8 @@ const Cell = (props: CellProps) => {
                                 setStatus('edit');
                             }}
                         />
-                    </div>
-                )}
+                    )}
+                </div>
             </div>
         );
 
@@ -352,17 +339,22 @@ const Cell = (props: CellProps) => {
 
     return (
         <div
-            className={classNames('cellUnit', `row_${rowIndex}`, `col_${columnIndex}`, cellClassName)}
+            className={classNames(s.cellContainer, `row_${rowIndex}`, `col_${columnIndex}`, cellClassName)}
             style={cellStyle}
-            id={`cellUnit_${rowIndex}_${columnIndex}`}
-            data-selected-cell="0"
-            data-editing-cell="0"
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
-            ref={cellUnit}
         >
-            {status === 'detail' && selfRenderDetailCell()}
-            {status === 'edit' && selfRenderEditCell()}
+            {columnIndex === 0 && (rowSelection || showExpand || showIndex) && renderFirst()}
+            <div
+                className={classNames(s.cellData, 'cellUnit', `row_${rowIndex}`, `col_${columnIndex}`)}
+                id={`cellUnit_${rowIndex}_${columnIndex}`}
+                data-selected-cell="0"
+                data-editing-cell="0"
+                ref={cellUnit}
+            >
+                {status === 'detail' && selfRenderDetailCell()}
+                {status === 'edit' && selfRenderEditCell()}
+            </div>
         </div>
     );
 };
-- 
2.21.0