73 lines
1.4 KiB
JavaScript
73 lines
1.4 KiB
JavaScript
import {
|
|
observer
|
|
} from 'mobx-react';
|
|
|
|
@observer
|
|
export default class Detail extends React.Component {
|
|
getDetailItemProps = (rowIndex, colIndex) => {
|
|
const {
|
|
store
|
|
} = this.props, {
|
|
displayType,
|
|
longTxtColIndexs,
|
|
cols,
|
|
} = store;
|
|
|
|
let str = "";
|
|
|
|
if (
|
|
(displayType === '1' && colIndex === 0) ||
|
|
(displayType === '0' && rowIndex === 0)
|
|
) {
|
|
str = "greyBg";
|
|
}
|
|
|
|
if (cols > 2 && longTxtColIndexs.includes(colIndex)) {
|
|
str = str ? `${str} large-width` : "large-width";
|
|
}
|
|
|
|
return {
|
|
className: str
|
|
}
|
|
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
store
|
|
} = this.props, {
|
|
data,
|
|
rowDatas,
|
|
colDatas,
|
|
displayType,
|
|
} = store;
|
|
|
|
const sliceDatas = (displayType === "0") ? colDatas : rowDatas;
|
|
|
|
return (
|
|
<div className="detail">
|
|
{
|
|
data.map( (item,rowIndex) => {
|
|
if ( (displayType === "1") && sliceDatas[rowIndex].every(data => !data)) {//纵向
|
|
return null;
|
|
}
|
|
return (
|
|
<div className="detail-item">
|
|
{
|
|
item.map((val, colIndex) => {
|
|
if ((displayType === "0") && sliceDatas[colIndex].every(data => !data)) {//横向
|
|
return null;
|
|
}
|
|
const className = this.getDetailItemProps(rowIndex, colIndex).className;
|
|
|
|
return <div className={className}>{className.includes("greyBg") ? val : <p>{val}</p>}</div>
|
|
})
|
|
}
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
} |