修改apolloTable样式

components/apolloTable/component/Cell.less

@@ -10,7 +10,25 @@
     height: 100%;
     font-size: @textFontGen;
     padding: 0 @paddingLg;
-    &.selected{
+    &.hover {
+        background: @tableHoverBgColor;
+        .checkbox {
+            display: block;
+            &.hasNum {
+                display: block;
+            }
+        }
+        .num {
+            display: block;
+            &.hasCheckbox {
+                display: none;
+            }
+        }
+        .expand {
+            visibility: visible;
+        }
+    }
+    &.selected {
         box-shadow: inset 0 0 0 1px @primaryColor;
     }
     .num {
@@ -20,11 +38,22 @@
         .icon {
             width: 22px;
         }
+        &.checked{
+            display: none;
+        }
     }
     .checkbox {
+        min-width: 30px;
+        max-width: 100px;
         margin-right: 10px;
+        &.hasNum {
+            display: none;
+        }
+        &.checked{
+            display: block;
+        }
     }
-    .expand{
+    .expand {
         text-align: center;
         width: 20px;
         border-radius: 50%;
@@ -34,10 +63,11 @@
         justify-content: center;
         margin-right: @marginSm;
         cursor: pointer;
-        &:hover{
+        visibility: hidden;
+        &:hover {
             background: #d0f0fd;
         }
-        .expandIcon{
+        .expandIcon {
             width: 16px;
         }
     }

components/apolloTable/component/Cell.tsx

@@ -5,7 +5,6 @@ import _ from 'lodash';
 import { config } from './base/config';
 import { getEditComponent, getFormat, setFormat } from './base';
 import s from './Cell.less';
-import tableStyle from './Table.less';
 import { CellProps, CellDataProps } from './interface';
 import FormHelper from '../utils/formHelper';
 import firstIcon from '../assets/first.png';
@@ -108,14 +107,14 @@ const Cell = (props: CellProps) => {
     const onMouseEnter = () => {
         const doms = document.querySelectorAll(`.row_${rowIndex}`);
         doms.forEach((dom) => {
-            dom.classList.add(tableStyle.hover);
+            dom.classList.add(s.hover);
         });
     };
     // 去除行hover样式
     const onMouseLeave = () => {
         const doms = document.querySelectorAll(`.row_${rowIndex}`);
         doms.forEach((dom) => {
-            dom.classList.remove(tableStyle.hover);
+            dom.classList.remove(s.hover);
         });
     };
 
@@ -160,11 +159,16 @@ const Cell = (props: CellProps) => {
             // }
             return (current - 1) * pageSize + rowIndex + 1;
         };
-        const getCheckbox = () => {
-            const { selectedRows, onChange } = rowSelection;
+        const getCheckedIndex = () => {
+            const { selectedRows } = rowSelection;
             const index = selectedRows.findIndex((item: any) => {
                 return item.id === record.id;
             });
+            return index;
+        };
+        const getCheckbox = () => {
+            const { selectedRows, onChange } = rowSelection;
+            const index = getCheckedIndex();
             const checked = index > -1;
             const onToggle = () => {
                 if (typeof onChange === 'function') {
@@ -187,7 +191,9 @@ const Cell = (props: CellProps) => {
                 onMouseEnter={onMouseEnter}
                 onMouseLeave={onMouseLeave}
                 className={
-                    selectedCell === `${position}_${cellKey}` ? classNames(s.detailCell, s.selected) : s.detailCell
+                    selectedCell === `${position}_${cellKey}`
+                        ? classNames(`row_${rowIndex}`, `col_${columnIndex}`, s.detailCell, s.selected)
+                        : classNames(`row_${rowIndex}`, `col_${columnIndex}`, s.detailCell)
                 }
                 onClick={() => {
                     // 不可编辑状态
@@ -202,8 +208,22 @@ const Cell = (props: CellProps) => {
                 }}
                 style={style}
             >
-                {rowSelection && columnIndex === 0 && <div className={s.checkbox}>{getCheckbox()}</div>}
-                {showIndex && columnIndex === 0 && <div className={s.num}>{getIndex()}</div>}
+                {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

components/apolloTable/component/Table.less

@@ -69,9 +69,6 @@
     color: @textGeneralColor;
     font-weight: @weightRegular;
 }
-.hover {
-    background: @tableHoverBgColor;
-}
 .headerGrid {
     width: 100%;
     overflow: hidden !important;

components/apolloTable/component/Table.tsx

@@ -393,7 +393,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                 columnData={columnData}
                 record={record}
                 emitChangeCell={emitChangeCell}
-                cellClassName={classNames(`row_${rowIndex}`, rowClassNameStr, cellClassNameStr)}
+                cellClassName={classNames(rowClassNameStr, cellClassNameStr)}
                 cellStyle={{ ...rowStyleObj, ...cellStyleObj }}
                 columns={columns}
                 paginationConfig={paginationConfig}

components/apolloTable/component/base/detail/tag/index.less

@@ -7,7 +7,7 @@
     align-items: center;
     .outContainer {
         display: flex;
-        width: calc(100% - 30px);
+        width: 100%;
         overflow: hidden;
         .innerContainer {
             display: flex;

components/apolloTable/component/base/detail/tag/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, useRef, useEffect } from 'react';
 import { Popover } from 'antd';
 import classNames from 'classnames';
 import s from './index.less';
-import extendIcon from '../../../../assets/extend.png';
 
 export const Tags = (props: any) => {
     const { value, origin, componentAttr } = props;
@@ -33,29 +32,9 @@ export const Tags = (props: any) => {
     }
     return (
         <div className={s.container}>
-            <div className={s.outContainer} ref={outer} style={outStyle}>
-                <div className={s.innerContainer} ref={inner} style={innerStyle}>
-                    {value.map((item, index) => {
-                        let color = '';
-                        if (options && Array.isArray(options) && options.length > 0) {
-                            const obj = options.find((ls) => ls.id === item.value) || {};
-                            color = obj.color || 'e9eef9';
-                        }
-                        return (
-                            <span
-                                key={index}
-                                className={mode === 'multiple' ? classNames(s.item, s.multi) : s.item}
-                                style={{ ...itemStyle, background: `#${color}` }}
-                            >
-                                <div className={s.itemBgTxt}>{item.text}</div>
-                            </span>
-                        );
-                    })}
-                </div>
-            </div>
             {dotVisible && (
                 <Popover
-                    trigger="click"
+                    // trigger="click"
                     onClick={(e) => {
                         e.stopPropagation();
                     }}
@@ -83,11 +62,50 @@ export const Tags = (props: any) => {
                         </div>
                     }
                 >
-                    <div className={s.moreBtn}>
-                        <img alt="" className={s.extend} src={extendIcon} />
+                    <div className={s.outContainer} ref={outer} style={outStyle}>
+                        <div className={s.innerContainer} ref={inner} style={innerStyle}>
+                            {value.map((item, index) => {
+                                let color = '';
+                                if (options && Array.isArray(options) && options.length > 0) {
+                                    const obj = options.find((ls) => ls.id === item.value) || {};
+                                    color = obj.color || 'e9eef9';
+                                }
+                                return (
+                                    <span
+                                        key={index}
+                                        className={classNames(s.item, mode === 'multiple' && s.multi)}
+                                        style={{ ...itemStyle, background: `#${color}` }}
+                                    >
+                                        <div className={s.itemBgTxt}>{item.text}</div>
+                                    </span>
+                                );
+                            })}
+                        </div>
                     </div>
                 </Popover>
             )}
+            {!dotVisible && (
+                <div className={s.outContainer} ref={outer} style={outStyle}>
+                    <div className={s.innerContainer} ref={inner} style={innerStyle}>
+                        {value.map((item, index) => {
+                            let color = '';
+                            if (options && Array.isArray(options) && options.length > 0) {
+                                const obj = options.find((ls) => ls.id === item.value) || {};
+                                color = obj.color || 'e9eef9';
+                            }
+                            return (
+                                <span
+                                    key={index}
+                                    className={classNames(s.item, mode === 'multiple' && s.multi)}
+                                    style={{ ...itemStyle, background: `#${color}` }}
+                                >
+                                    <div className={s.itemBgTxt}>{item.text}</div>
+                                </span>
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
         </div>
     );
 };

components/apolloTable/component/index.tsx

@@ -81,6 +81,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
             contentMenu,
             onScroll,
             loadComp,
+            showCondition,
         } = this.props;
         const sortConfig =
             operateConfig &&
@@ -97,7 +98,9 @@ class AirTable extends React.Component<CommonProps, CommonState> {
                             : classNames(styles.container, className)
                     }
                 >
-                    {operateConfig && <OperateConfig columns={columns} operateConfig={operateConfig} />}
+                    {operateConfig && (
+                        <OperateConfig columns={columns} operateConfig={operateConfig} showCondition={showCondition} />
+                    )}
                     <div
                         className={onScroll ? classNames(styles.tableContainer, styles.scroll) : styles.tableContainer}
                     >

components/apolloTable/component/interface.tsx

@@ -87,6 +87,7 @@ export interface CommonProps extends TableProps {
     paginationConfig?: any;
     locale?: any;
     className?: string;
+    showCondition?: boolean;
 }
 
 export interface CommonState extends TableState {}

components/apolloTable/component/operate/index.tsx

@@ -12,6 +12,7 @@ import { OperateConfigProps, ColumnProps } from '../interface';
 interface Props {
     operateConfig?: OperateConfigProps;
     columns: ColumnProps[];
+    showCondition?: boolean;
 }
 /**
  * 操作栏
@@ -47,7 +48,7 @@ export default class Operate extends Component<Props> {
     };
 
     render() {
-        const { operateConfig, columns } = this.props;
+        const { operateConfig, columns, showCondition } = this.props;
         const { menusGroup, buttonsGroup, renderCustomNode }: any = operateConfig || {};
 
         const filter: any =
@@ -84,7 +85,7 @@ export default class Operate extends Component<Props> {
                         </div>
                     )}
                 </div>
-                {filter && filter.value && filter.value.length > 0 && (
+                {showCondition && (
                     <FilterCondition
                         columns={columns}
                         value={filter.value}