Skip to content

S
submodule
Commit 6b02a9e0 authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

修改第一单元格样式

parent 0834fefc
Show whitespace changes
Inline Side-by-side
Showing with 153 additions and 142 deletions
components/apolloTable/component/Cell.less
View file @ 6b02a9e0
@import '../common'; @import '../common';
.detailCell { .cellContainer {
display: flex;
.firstArea {
display: flex; display: flex;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; max-width: 66px;
width: 100%; margin-left: @marginLg;
height: 100%;
font-size: @textFontGen;
padding: 0 @paddingLg;
//&.hover {
// background: @tableHoverBgColor;
// .checkbox {
// display: block;
// &.hasNum {
// display: block;
// }
// }
// .num {
// display: block;
// &.hasCheckbox {
// display: none;
// }
// }
// .expand {
// visibility: visible;
// }
//}
.num { .num {
min-width: 30px; min-width: 30px;
max-width: 100px; max-width: 100px;
margin-right: 10px; margin-right: 10px;
font-size: @textFontGen;
.icon { .icon {
width: 22px; width: 22px;
} }
...@@ -69,6 +50,63 @@ ...@@ -69,6 +50,63 @@
width: 16px; 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;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
height: 100%;
font-size: @textFontGen;
padding: 0 @paddingLg;
//&.hover {
// background: @tableHoverBgColor;
// .checkbox {
// display: block;
// &.hasNum {
// display: block;
// }
// }
// .num {
// display: block;
// &.hasCheckbox {
// display: none;
// }
// }
// .expand {
// visibility: visible;
// }
//}
.content { .content {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
...@@ -95,23 +133,4 @@ ...@@ -95,23 +133,4 @@
&.selected { &.selected {
box-shadow: inset 0 0 0 1px @primaryColor; 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;
}
}
}
components/apolloTable/component/Cell.tsx
View file @ 6b02a9e0
...@@ -115,46 +115,10 @@ const Cell = (props: CellProps) => { ...@@ -115,46 +115,10 @@ const Cell = (props: CellProps) => {
}); });
}; };
const selfRenderDetailCell = () => { const renderFirst = () => {
// 数据为空
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 { current = 1, pageSize = 20 } = paginationConfig || {}; const { current = 1, pageSize = 20 } = paginationConfig || {};
// 构造序号 // 构造序号
const getIndex = () => { 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; return (current - 1) * pageSize + rowIndex + 1;
}; };
// 获取当前行在所选列表中的index // 获取当前行在所选列表中的index
...@@ -188,6 +152,61 @@ const Cell = (props: CellProps) => { ...@@ -188,6 +152,61 @@ const Cell = (props: CellProps) => {
}; };
return <Checkbox checked={checked} onClick={onToggle} />; 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 { dynamicCellConfigDTO } = columnData;
const detail = ( const detail = (
...@@ -231,42 +250,10 @@ const Cell = (props: CellProps) => { ...@@ -231,42 +250,10 @@ const Cell = (props: CellProps) => {
}} }}
style={style} style={style}
> >
{rowSelection && columnIndex === 0 && ( <div className={s.content}>
<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 ? ( {empty ? (
emptyPlaceholder || '-' emptyPlaceholder || '-'
) : ( ) : (
<div className={s.content}>
<DetailComp <DetailComp
value={cellData} value={cellData}
columns={columns} columns={columns}
...@@ -279,9 +266,9 @@ const Cell = (props: CellProps) => { ...@@ -279,9 +266,9 @@ const Cell = (props: CellProps) => {
setStatus('edit'); setStatus('edit');
}} }}
/> />
</div>
)} )}
</div> </div>
</div>
); );
return contentMenu ? ( return contentMenu ? (
...@@ -352,18 +339,23 @@ const Cell = (props: CellProps) => { ...@@ -352,18 +339,23 @@ const Cell = (props: CellProps) => {
return ( return (
<div <div
className={classNames('cellUnit', `row_${rowIndex}`, `col_${columnIndex}`, cellClassName)} className={classNames(s.cellContainer, `row_${rowIndex}`, `col_${columnIndex}`, cellClassName)}
style={cellStyle} style={cellStyle}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
{columnIndex === 0 && (rowSelection || showExpand || showIndex) && renderFirst()}
<div
className={classNames(s.cellData, 'cellUnit', `row_${rowIndex}`, `col_${columnIndex}`)}
id={`cellUnit_${rowIndex}_${columnIndex}`} id={`cellUnit_${rowIndex}_${columnIndex}`}
data-selected-cell="0" data-selected-cell="0"
data-editing-cell="0" data-editing-cell="0"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
ref={cellUnit} ref={cellUnit}
> >
{status === 'detail' && selfRenderDetailCell()} {status === 'detail' && selfRenderDetailCell()}
{status === 'edit' && selfRenderEditCell()} {status === 'edit' && selfRenderEditCell()}
</div> </div>
</div>
); );
}; };
......
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