Skip to content

S
submodule
Commit 492e4bb1 authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

修改apolloTable样式

parent 94406b3f
Hide whitespace changes
Inline Side-by-side
Showing with 114 additions and 44 deletions
components/apolloTable/component/Cell.less
View file @ 492e4bb1
......@@ -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
View file @ 492e4bb1
......@@ -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
View file @ 492e4bb1
......@@ -69,9 +69,6 @@
color: @textGeneralColor;
font-weight: @weightRegular;
}
.hover {
background: @tableHoverBgColor;
}
.headerGrid {
width: 100%;
overflow: hidden !important;
......
components/apolloTable/component/Table.tsx
View file @ 492e4bb1
......@@ -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
View file @ 492e4bb1
......@@ -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
View file @ 492e4bb1
......@@ -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
View file @ 492e4bb1
......@@ -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
View file @ 492e4bb1
......@@ -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
View file @ 492e4bb1
......@@ -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}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment