Skip to content

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

修改第一单元格样式

parent 0834fefc
Hide whitespace changes
Inline Side-by-side
Showing with 153 additions and 142 deletions
components/apolloTable/component/Cell.less
View file @ 6b02a9e0
@import '../common';
.cellContainer {
display: flex;
.firstArea {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
max-width: 66px;
margin-left: @marginLg;
.num {
min-width: 30px;
max-width: 100px;
margin-right: 10px;
font-size: @textFontGen;
.icon {
width: 22px;
}
&.checked {
display: none;
}
}
.checkbox {
min-width: 30px;
max-width: 100px;
margin-right: 10px;
&.hasNum {
display: none;
}
&.checked {
display: block;
}
}
.expand {
text-align: center;
width: 20px;
border-radius: 50%;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-right: @marginSm;
cursor: pointer;
visibility: hidden;
&:hover {
background: #d0f0fd;
}
.expandIcon {
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;
......@@ -29,46 +106,7 @@
// }
//}
.num {
min-width: 30px;
max-width: 100px;
margin-right: 10px;
.icon {
width: 22px;
}
&.checked {
display: none;
}
}
.checkbox {
min-width: 30px;
max-width: 100px;
margin-right: 10px;
&.hasNum {
display: none;
}
&.checked {
display: block;
}
}
.expand {
text-align: center;
width: 20px;
border-radius: 50%;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-right: @marginSm;
cursor: pointer;
visibility: hidden;
&:hover {
background: #d0f0fd;
}
.expandIcon {
width: 16px;
}
}
.content {
flex: 1;
overflow: hidden;
......@@ -95,23 +133,4 @@
&.selected {
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) => {
});
};
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 = {};
const renderFirst = () => {
const { current = 1, pageSize = 20 } = paginationConfig || {};
// 构造序号
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;
};
// 获取当前行在所选列表中的index
......@@ -188,6 +152,61 @@ const Cell = (props: CellProps) => {
};
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 detail = (
......@@ -231,42 +250,10 @@ const Cell = (props: CellProps) => {
}}
style={style}
>
{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}
onClick={(e:any) => {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
}}
>
<img
onClick={showExpand.bind(null, { rowId: record.id })}
className={s.expandIcon}
alt=""
src={expandIcon}
/>
</div>
)}
{empty ? (
emptyPlaceholder || '-'
) : (
<div className={s.content}>
<div className={s.content}>
{empty ? (
emptyPlaceholder || '-'
) : (
<DetailComp
value={cellData}
columns={columns}
......@@ -279,8 +266,8 @@ const Cell = (props: CellProps) => {
setStatus('edit');
}}
/>
</div>
)}
)}
</div>
</div>
);
......@@ -352,17 +339,22 @@ const Cell = (props: CellProps) => {
return (
<div
className={classNames('cellUnit', `row_${rowIndex}`, `col_${columnIndex}`, cellClassName)}
className={classNames(s.cellContainer, `row_${rowIndex}`, `col_${columnIndex}`, cellClassName)}
style={cellStyle}
id={`cellUnit_${rowIndex}_${columnIndex}`}
data-selected-cell="0"
data-editing-cell="0"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
ref={cellUnit}
>
{status === 'detail' && selfRenderDetailCell()}
{status === 'edit' && selfRenderEditCell()}
{columnIndex === 0 && (rowSelection || showExpand || showIndex) && renderFirst()}
<div
className={classNames(s.cellData, 'cellUnit', `row_${rowIndex}`, `col_${columnIndex}`)}
id={`cellUnit_${rowIndex}_${columnIndex}`}
data-selected-cell="0"
data-editing-cell="0"
ref={cellUnit}
>
{status === 'detail' && selfRenderDetailCell()}
{status === 'edit' && selfRenderEditCell()}
</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