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 && (