177 lines
9.0 KiB
TypeScript
177 lines
9.0 KiB
TypeScript
import { TableHead, TableRow } from "@common/components/ui";
|
|
|
|
interface TableUpperProps {
|
|
id: string;
|
|
title: string;
|
|
upName?: string;
|
|
upSequnce?: number;
|
|
}
|
|
|
|
const HeadMakeColSpan = ({ upHeadList, layoutNum }: { upHeadList: TableUpperProps[], layoutNum: number }) => {
|
|
return (
|
|
layoutNum === 0 ? (
|
|
<>
|
|
<TableRow className="bg-gray-50">
|
|
{upHeadList.map((head: TableUpperProps) => {
|
|
if(!head.upName) {
|
|
return <TableHead className="bg-gray-50" rowSpan={2} style={{ whiteSpace: 'pre-line' }} key={head.id}>{head.title}</TableHead>
|
|
}else if(head.upName==="upChangeRe1"&&head.upSequnce===1) {
|
|
return <TableHead className="bg-gray-50" colSpan={2} style={{ whiteSpace: 'pre-line' }} key={head.id}>행정구역</TableHead>
|
|
}else if(head.upName==="upChangeRe3"&&head.upSequnce===1) {
|
|
return <TableHead className="bg-gray-50" colSpan={5} style={{ whiteSpace: 'pre-line' }} key={head.id}>유입</TableHead>
|
|
}else if(head.upName==="upChangeRe4"&&head.upSequnce===1) {
|
|
return <TableHead className="bg-gray-50" colSpan={5} style={{ whiteSpace: 'pre-line' }} key={head.id}>유출</TableHead>
|
|
}
|
|
})}
|
|
</TableRow>
|
|
<TableRow className="bg-gray-50">
|
|
{upHeadList.map((head: TableUpperProps, idx: number) => {
|
|
if (head.upName === 'upChangeRe1' || head.upName === 'upChangeRe3' || head.upName === 'upChangeRe4') {
|
|
if (idx == 1 || idx == 2 || idx == 3) {
|
|
return <TableHead key={head.id} style={{ whiteSpace: 'pre-line' }} className="w-1/8 bg-gray-50">{head.title}</TableHead>;
|
|
}
|
|
else {
|
|
return <TableHead key={head.id} style={{ whiteSpace: 'pre-line' }} className="w-1/8 bg-gray-50">{head.title}</TableHead>;
|
|
}
|
|
}
|
|
})}
|
|
</TableRow>
|
|
</>
|
|
) : layoutNum === 1 ? (
|
|
<>
|
|
<TableRow className="bg-gray-50">
|
|
{upHeadList.map((head: TableUpperProps) => {
|
|
if(!head.upName) {
|
|
return <TableHead className="bg-gray-50" rowSpan={2} style={{ whiteSpace: 'pre-line' }} key={head.id}>{head.title}</TableHead>
|
|
}else if(head.upName==="upChangeRe1"&&head.upSequnce===1) {
|
|
return <TableHead className="bg-gray-50" colSpan={3} style={{ whiteSpace: 'pre-line' }} key={head.id}>권역</TableHead>
|
|
}else if(head.upName==="upChangeRe3"&&head.upSequnce===1) {
|
|
return <TableHead className="bg-gray-50" colSpan={5} style={{ whiteSpace: 'pre-line' }} key={head.id}>유입</TableHead>
|
|
}else if(head.upName==="upChangeRe4"&&head.upSequnce===1) {
|
|
return <TableHead className="bg-gray-50" colSpan={5} style={{ whiteSpace: 'pre-line' }} key={head.id}>유출</TableHead>
|
|
}
|
|
})}
|
|
</TableRow>
|
|
<TableRow className="bg-gray-50">
|
|
{upHeadList.map((head: TableUpperProps, idx: number) => {
|
|
if (head.upName === 'upChangeRe1' || head.upName === 'upChangeRe3' || head.upName === 'upChangeRe4') {
|
|
if (idx == 1 || idx == 2 || idx == 3) {
|
|
return <TableHead key={head.id} style={{ whiteSpace: 'pre-line' }} className="w-1/8 bg-gray-50">{head.title}</TableHead>;
|
|
}
|
|
else {
|
|
return <TableHead key={head.id} style={{ whiteSpace: 'pre-line' }} className="w-1/8 bg-gray-50">{head.title}</TableHead>;
|
|
}
|
|
}
|
|
})}
|
|
</TableRow>
|
|
</>
|
|
) : layoutNum === 2 ? (
|
|
<>
|
|
<TableRow className="bg-gray-50">
|
|
{upHeadList.map((head: TableUpperProps) => {
|
|
if(!head.upName) {
|
|
return <TableHead className="bg-gray-50" rowSpan={2} style={{ whiteSpace: 'pre-line' }} key={head.id}>{head.title}</TableHead>
|
|
}else if(head.upName==="upChangeRe1"&&head.upSequnce===1) {
|
|
return <TableHead className="bg-gray-50" colSpan={3} style={{ whiteSpace: 'pre-line' }} key={head.id}>권역</TableHead>
|
|
}else if(head.upName==="upChangeRe2"&&head.upSequnce===1) {
|
|
return <TableHead className="bg-gray-50" colSpan={2} style={{ whiteSpace: 'pre-line' }} key={head.id}>행정구역</TableHead>
|
|
}else if(head.upName==="upChangeRe3"&&head.upSequnce===1) {
|
|
return <TableHead className="bg-gray-50" colSpan={5} style={{ whiteSpace: 'pre-line' }} key={head.id}>유입</TableHead>
|
|
}else if(head.upName==="upChangeRe4"&&head.upSequnce===1) {
|
|
return <TableHead className="bg-gray-50" colSpan={5} style={{ whiteSpace: 'pre-line' }} key={head.id}>유출</TableHead>
|
|
}
|
|
})}
|
|
</TableRow>
|
|
<TableRow className="bg-gray-50">
|
|
{upHeadList.map((head: TableUpperProps, idx: number) => {
|
|
if (head.upName === 'upChangeRe1' || head.upName === 'upChangeRe2' || head.upName === 'upChangeRe3' || head.upName === 'upChangeRe4') {
|
|
if (idx == 1 || idx == 2 || idx == 3) {
|
|
return <TableHead key={head.id} style={{ whiteSpace: 'pre-line' }} className="w-1/8 bg-gray-50">{head.title}</TableHead>;
|
|
}
|
|
else {
|
|
return <TableHead key={head.id} style={{ whiteSpace: 'pre-line' }} className="w-1/8 bg-gray-50">{head.title}</TableHead>;
|
|
}
|
|
}
|
|
})}
|
|
</TableRow>
|
|
</>
|
|
) : layoutNum === 3 ? (
|
|
<>
|
|
<TableRow className="bg-gray-50">
|
|
{upHeadList.map((head: TableUpperProps) => {
|
|
if(!head.upName) {
|
|
return <TableHead className="bg-gray-50" rowSpan={2} style={{ whiteSpace: 'pre-line' }} key={head.id}>{head.title}</TableHead>
|
|
}else if(head.upName==="upChangeRe1"&&head.upSequnce===1) {
|
|
return <TableHead className="bg-gray-50" colSpan={5} style={{ whiteSpace: 'pre-line' }} key={head.id}>유입</TableHead>
|
|
}else if(head.upName==="upChangeRe2"&&head.upSequnce===1) {
|
|
return <TableHead className="bg-gray-50" colSpan={5} style={{ whiteSpace: 'pre-line' }} key={head.id}>방류</TableHead>
|
|
}
|
|
})}
|
|
</TableRow>
|
|
<TableRow className="bg-gray-50">
|
|
{upHeadList.map((head: TableUpperProps, idx: number) => {
|
|
if (head.upName === 'upChangeRe1' || head.upName === 'upChangeRe2') {
|
|
if (idx == 1 || idx == 2 || idx == 3) {
|
|
return <TableHead key={head.id} style={{ whiteSpace: 'pre-line' }} className="w-1/8 bg-gray-50">{head.title}</TableHead>;
|
|
}
|
|
else {
|
|
return <TableHead key={head.id} style={{ whiteSpace: 'pre-line' }} className="w-1/8 bg-gray-50">{head.title}</TableHead>;
|
|
}
|
|
}
|
|
})}
|
|
</TableRow>
|
|
</>
|
|
) : layoutNum === 4 ? (
|
|
<>
|
|
<TableRow className="bg-gray-50">
|
|
{upHeadList.map((head: TableUpperProps) => {
|
|
if(!head.upName) {
|
|
return <TableHead className="bg-gray-50" rowSpan={2} style={{ whiteSpace: 'pre-line' }} key={head.id}>{head.title}</TableHead>
|
|
}else if(head.upName==="upChangeRe"&&head.upSequnce===1) {
|
|
return <TableHead className="bg-gray-50" colSpan={4} style={{ whiteSpace: 'pre-line' }} key={head.id}>방류</TableHead>
|
|
}
|
|
})}
|
|
</TableRow>
|
|
<TableRow className="bg-gray-50">
|
|
{upHeadList.map((head: TableUpperProps, idx: number) => {
|
|
if (head.upName === 'upChangeRe') {
|
|
if (idx == 1 || idx == 2 || idx == 3) {
|
|
return <TableHead key={head.id} style={{ whiteSpace: 'pre-line' }} className="w-1/8 bg-gray-50">{head.title}</TableHead>;
|
|
}
|
|
else {
|
|
return <TableHead key={head.id} style={{ whiteSpace: 'pre-line' }} className="w-1/8 bg-gray-50">{head.title}</TableHead>;
|
|
}
|
|
}
|
|
})}
|
|
</TableRow>
|
|
</>
|
|
) : layoutNum === 5 ? ( // 총인설비 수질현황 헤더
|
|
<>
|
|
<TableRow className="bg-gray-50">
|
|
{upHeadList.map((head: TableUpperProps) => {
|
|
if(!head.upName) {
|
|
return <TableHead className="w-[180px] bg-gray-50" rowSpan={2} style={{ whiteSpace: 'pre-line' }} key={head.id}>{head.title}</TableHead>
|
|
}else if(head.upName==="upChangeRe1" && head.upSequnce===1) {
|
|
return <TableHead className="bg-gray-50" colSpan={2} style={{ whiteSpace: 'pre-line' }} key={head.id}>유입</TableHead>
|
|
}else if(head.upName==="upChangeRe2" && head.upSequnce===1) {
|
|
return <TableHead className="bg-gray-50" colSpan={2} style={{ whiteSpace: 'pre-line' }} key={head.id}>방류</TableHead>
|
|
}
|
|
})}
|
|
</TableRow>
|
|
<TableRow className="bg-gray-50">
|
|
{upHeadList.map((head: TableUpperProps) => {
|
|
if (head.upName === 'upChangeRe1' || head.upName === 'upChangeRe2') {
|
|
return <TableHead key={head.id} style={{ whiteSpace: 'pre-line' }} className="w-1/8 bg-gray-50">{head.title}</TableHead>;
|
|
}
|
|
})}
|
|
</TableRow>
|
|
</>
|
|
): (
|
|
<>
|
|
</>
|
|
)
|
|
)
|
|
}
|
|
|
|
export { HeadMakeColSpan };
|