diff --git a/components/apolloTable/component/Cell.less b/components/apolloTable/component/Cell.less index 6fe11dd3d740f11431265d7f126f76c9c70be8da..83aead2eeec4ffc38f6abbb718b79908ab4938b6 100644 --- a/components/apolloTable/component/Cell.less +++ b/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; } } diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx index 9e26664fb1b7f8a7c930233d54bc3b23d818897c..0e9188bf34b29c4a98954b9a59285f535eb5ab86 100644 --- a/components/apolloTable/component/Cell.tsx +++ b/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 &&
{getCheckbox()}
} - {showIndex && columnIndex === 0 &&
{getIndex()}
} + {rowSelection && columnIndex === 0 && ( +
-1 && s.checked)}> + {getCheckbox()} +
+ )} + {showIndex && columnIndex === 0 && ( +
-1 && s.checked, + )} + > + {getIndex()} +
+ )} {showExpand && columnIndex === 0 && (
{ columnData={columnData} record={record} emitChangeCell={emitChangeCell} - cellClassName={classNames(`row_${rowIndex}`, rowClassNameStr, cellClassNameStr)} + cellClassName={classNames(rowClassNameStr, cellClassNameStr)} cellStyle={{ ...rowStyleObj, ...cellStyleObj }} columns={columns} paginationConfig={paginationConfig} diff --git a/components/apolloTable/component/base/detail/tag/index.less b/components/apolloTable/component/base/detail/tag/index.less index 4c6ec16e2daab324d8de21b220c80572538ec5c7..870e143dbc8eeab6b46e8a4256ad6d7224e2d926 100644 --- a/components/apolloTable/component/base/detail/tag/index.less +++ b/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; diff --git a/components/apolloTable/component/base/detail/tag/index.tsx b/components/apolloTable/component/base/detail/tag/index.tsx index 72575826a53abb44d1753c305f14a56a125d3f1e..ca660b24e6c48b21e7a4db5f1d34914162fde8f8 100644 --- a/components/apolloTable/component/base/detail/tag/index.tsx +++ b/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 (
-
-
- {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 ( - -
{item.text}
-
- ); - })} -
-
{dotVisible && ( { e.stopPropagation(); }} @@ -83,11 +62,50 @@ export const Tags = (props: any) => {
} > -
- +
+
+ {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 ( + +
{item.text}
+
+ ); + })} +
)} + {!dotVisible && ( +
+
+ {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 ( + +
{item.text}
+
+ ); + })} +
+
+ )}
); }; diff --git a/components/apolloTable/component/index.tsx b/components/apolloTable/component/index.tsx index 5ee03419d4c10869a4e8b8e7ba95cdfdd948b4cc..dcfe3bcc15e91a90376a2ba18d100d836fa49bc2 100644 --- a/components/apolloTable/component/index.tsx +++ b/components/apolloTable/component/index.tsx @@ -81,6 +81,7 @@ class AirTable extends React.Component { contentMenu, onScroll, loadComp, + showCondition, } = this.props; const sortConfig = operateConfig && @@ -97,7 +98,9 @@ class AirTable extends React.Component { : classNames(styles.container, className) } > - {operateConfig && } + {operateConfig && ( + + )}
diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx index 29362bc40ba8be9f723f3968f0335eb5deded4fb..7a21526472ec5217e270cbf750de8796adab433f 100644 --- a/components/apolloTable/component/interface.tsx +++ b/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 {} diff --git a/components/apolloTable/component/operate/index.tsx b/components/apolloTable/component/operate/index.tsx index 81608c837d6913aff3a76c000ef2d0d82ad93fdc..03c30248f4611b5a304f8121353f8280f3f843f1 100644 --- a/components/apolloTable/component/operate/index.tsx +++ b/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 { }; 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 {
)}
- {filter && filter.value && filter.value.length > 0 && ( + {showCondition && (