헤헤더분리
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
import type { TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import { TableRow, TableHead } from "@common/components/ui";
|
||||
|
||||
export const headMakeColSpan = (upHeadList: TableUpperProps[]) => {
|
||||
return (
|
||||
<>
|
||||
<TableRow>
|
||||
{upHeadList.map((head: TableUpperProps) =>
|
||||
!head.upSequnce ? (
|
||||
<TableHead rowSpan={2} key={head.id}>
|
||||
{head.title}
|
||||
</TableHead>
|
||||
) : head.upName === "upChangeRe" && head.upSequnce === 1 ? (
|
||||
<TableHead key={head.id} rowSpan={1} colSpan={3}>
|
||||
{"중축 개축 재축 "}
|
||||
</TableHead>
|
||||
) : null
|
||||
)}
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
{upHeadList.map((head: TableUpperProps) =>
|
||||
head.upName === "upChangeRe" ? (
|
||||
<TableHead key={head.id}>{head.title}</TableHead>
|
||||
) : null
|
||||
)}
|
||||
</TableRow>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -23,35 +23,8 @@ import {
|
||||
import ListDiv from "@common/business_components/ui/list_div";
|
||||
import { Button, TableHead, TableRow } from "@common/components";
|
||||
import { useEffect, useState } from "react";
|
||||
import { headMakeColSpan } from "./TableHead";
|
||||
|
||||
export const headMakeColSpan = (upHeadList: TableUpperProps[]) => {
|
||||
return (
|
||||
<>
|
||||
<TableRow>
|
||||
{upHeadList.map((head: TableUpperProps) =>
|
||||
!head.upSequnce ? (
|
||||
<TableHead rowSpan={2} key={head.id}>
|
||||
{head.title}
|
||||
</TableHead>
|
||||
) : head.upName === "upChangeRe" && head.upSequnce === 1 ? (
|
||||
<TableHead key={head.id} rowSpan={1} colSpan={3}>
|
||||
{"중축 개축 재축 "}
|
||||
</TableHead>
|
||||
) : null
|
||||
)}
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
{upHeadList.map((head: TableUpperProps) =>
|
||||
head.upName === "upChangeRe" ? (
|
||||
<TableHead key={head.id}>{head.title}</TableHead>
|
||||
) : null
|
||||
)}
|
||||
</TableRow>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
//-------------------------------------------------------------------------------------------------------
|
||||
|
||||
export default function Home() {
|
||||
const { rain, code, init } = useWrStore((state) => {
|
||||
|
||||
@@ -14,13 +14,13 @@ import {
|
||||
} from "@common/business_components";
|
||||
import ListDiv from "@common/business_components/ui/list_div";
|
||||
import { Button } from "@common/components";
|
||||
import { headMakeColSpan } from "../rainReg/page";
|
||||
import { useEffect, useState } from "react";
|
||||
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
|
||||
import { tableData } from "@/components/lib/func/commom";
|
||||
import RswtrRegForm from "@/components/ui/form/fcltReg/rswtrReg/rswtrRegForm";
|
||||
import BdstChgModal from "@/components/ui/modal/bdstChgModal/bdstChgModal";
|
||||
import type { chgBuilding } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import { headMakeColSpan } from "../rainReg/TableHead";
|
||||
|
||||
export default function Home() {
|
||||
const { code, rswt, initRswt } = useWrStore((state) => state);
|
||||
|
||||
@@ -7,6 +7,7 @@ import { tableData } from "@/components/lib/func/commom";
|
||||
import HeadChModal from "@/components/ui/modal/headChModal/headChModal";
|
||||
import {
|
||||
ContentsDiv,
|
||||
filePickedBlob,
|
||||
SearchBaseForm,
|
||||
Title,
|
||||
UiModal,
|
||||
@@ -19,7 +20,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { headMakeTriple } from "./TableHead";
|
||||
|
||||
export default function RainSttn() {
|
||||
const { code, sttnCommon, excelRainSttn,excelExportAction, rainSttnInit } =
|
||||
const { code, sttnCommon, excelRainSttn,excelExportAction, rainSttnSearch } =
|
||||
useWrStore((state) => state);
|
||||
const { rainRes } = sttnCommon;
|
||||
|
||||
@@ -39,19 +40,18 @@ export default function RainSttn() {
|
||||
}else{
|
||||
con = ref.current.sidoValue
|
||||
}
|
||||
rainSttnInit('1', '20' ,con);
|
||||
rainSttnSearch('1', '20' ,con);
|
||||
}
|
||||
}, [sttnCommon.isInit, rainSttnInit]);
|
||||
}, [sttnCommon.isInit, rainSttnSearch]);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (rainRes.length > 0) {
|
||||
const data = tableData(rainRes, { code });
|
||||
// data 는 위 JSON 객체라고 가정
|
||||
// TODO: 이게 뭐하는 작업이지?
|
||||
|
||||
const unVisibleHead = sttnCommon.rainSttHeadList.filter(
|
||||
(item: TableTripleProps) => item.visible === false
|
||||
);
|
||||
|
||||
const chData = data
|
||||
.map((item: any) => ({
|
||||
...item,
|
||||
@@ -65,13 +65,30 @@ export default function RainSttn() {
|
||||
}, [code, rainRes, sttnCommon.rainSttHeadList]);
|
||||
useEffect(() => {
|
||||
if(sttnCommon.excelList.length>0){
|
||||
// TODO: API 호출후 받은 데이터로 엑셀 변환.
|
||||
if (sttnCommon.excelList.length === 0) return;
|
||||
fetch('/sample_rainy.xlsx', {})
|
||||
.then(async (response) => {
|
||||
if (!response.ok) {
|
||||
throw Error(response.statusText)
|
||||
}
|
||||
// 받은 파일 바인너리 처리
|
||||
const blobRet = await response.arrayBuffer()
|
||||
// 버퍼에 있는 엑셀데이터 전달 후 json으로 변환
|
||||
const ret =await filePickedBlob(blobRet, sttnCommon.excelList )
|
||||
console.log('ret', ret);
|
||||
})
|
||||
}
|
||||
}, [sttnCommon.excelList]);
|
||||
const excelClick = useCallback(() => {
|
||||
//TODO: 엑셀 버튼 클릭시 API 호출 후 데이터를 excelRainSttn호출하여 변환된 데이터 effect 이벤트 동작.excelRainSttn(code.cityCd, code.sggCd);
|
||||
//FIXME: 현재 API 호출하는 함수 액션이 존재하지 않음.
|
||||
},[code.cityCd, code.sggCd, excelRainSttn]);
|
||||
|
||||
const excelClick = useCallback((returnType:ReturnType) => {
|
||||
let con
|
||||
if (returnType.sigunValue != '0') {
|
||||
con = returnType.sigunValue
|
||||
}else{
|
||||
con = returnType.sidoValue
|
||||
}
|
||||
rainSttnSearch('1', '10000' ,con);
|
||||
},[rainSttnSearch]);
|
||||
return (
|
||||
<>
|
||||
<ContentsDiv>
|
||||
@@ -105,7 +122,7 @@ export default function RainSttn() {
|
||||
}else{
|
||||
con = returnType.sidoValue
|
||||
}
|
||||
rainSttnInit('1', '20' ,con);
|
||||
rainSttnSearch('1', '20' ,con);
|
||||
}}
|
||||
excelClick={excelClick}
|
||||
initClick={function (): void {}}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
import type { chHeadType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn";
|
||||
import type { TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import { TableHead, TableRow } from "@common/components/ui";
|
||||
|
||||
export const headMakeprfmnc = (
|
||||
upHeadList: TableUpperProps[],
|
||||
makeHeadNm: chHeadType[]
|
||||
) => {
|
||||
return (
|
||||
<>
|
||||
<TableRow>
|
||||
{upHeadList
|
||||
.map((head: TableUpperProps) =>
|
||||
!head.upSequnce ? (
|
||||
<TableHead
|
||||
className={`border border-gray-600 px-2 py-1 `}
|
||||
rowSpan={2}
|
||||
key={head.id}
|
||||
>
|
||||
{head.title}
|
||||
</TableHead>
|
||||
) : head.upSequnce === 1 ? (
|
||||
<TableHead
|
||||
className={`border border-gray-600 px-2 py-1 `}
|
||||
key={head.id}
|
||||
rowSpan={1}
|
||||
colSpan={
|
||||
makeHeadNm.find((ch) => ch.headNm === head.upName)?.length
|
||||
}
|
||||
>
|
||||
{makeHeadNm.find((ch) => ch.headNm === head.upName)?.text}
|
||||
</TableHead>
|
||||
) : null
|
||||
)}
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
{upHeadList
|
||||
.filter((data) => data.visible != false)
|
||||
.map((head: TableUpperProps) =>
|
||||
makeHeadNm.find((ch) => ch.headNm === head.upName) ? (
|
||||
<TableHead
|
||||
className={`border border-gray-600 px-2 py-1 `}
|
||||
key={head.id}
|
||||
>
|
||||
{head.title}
|
||||
</TableHead>
|
||||
) : null
|
||||
)}
|
||||
</TableRow>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -23,66 +23,15 @@ import {
|
||||
UiModal
|
||||
} from "@common/business_components/ui";
|
||||
import ListDiv from "@common/business_components/ui/list_div";
|
||||
import { TableHead, TableRow } from "@common/components";
|
||||
import { Button } from "@common/components/ui";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
export const headMakeprfmnc = (
|
||||
upHeadList: TableUpperProps[],
|
||||
makeHeadNm: chHeadType[]
|
||||
) => {
|
||||
return (
|
||||
<>
|
||||
<TableRow>
|
||||
{upHeadList
|
||||
.map((head: TableUpperProps) =>
|
||||
!head.upSequnce ? (
|
||||
<TableHead
|
||||
className={`border border-gray-600 px-2 py-1 `}
|
||||
rowSpan={2}
|
||||
key={head.id}
|
||||
>
|
||||
{head.title}
|
||||
</TableHead>
|
||||
) : head.upSequnce === 1 ? (
|
||||
<TableHead
|
||||
className={`border border-gray-600 px-2 py-1 `}
|
||||
key={head.id}
|
||||
rowSpan={1}
|
||||
colSpan={
|
||||
makeHeadNm.find((ch) => ch.headNm === head.upName)?.length
|
||||
}
|
||||
>
|
||||
{makeHeadNm.find((ch) => ch.headNm === head.upName)?.text}
|
||||
</TableHead>
|
||||
) : null
|
||||
)}
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
{upHeadList
|
||||
.filter((data) => data.visible != false)
|
||||
.map((head: TableUpperProps) =>
|
||||
makeHeadNm.find((ch) => ch.headNm === head.upName) ? (
|
||||
<TableHead
|
||||
className={`border border-gray-600 px-2 py-1 `}
|
||||
key={head.id}
|
||||
>
|
||||
{head.title}
|
||||
</TableHead>
|
||||
) : null
|
||||
)}
|
||||
</TableRow>
|
||||
</>
|
||||
);
|
||||
};
|
||||
//-----------------------
|
||||
export default function Page() {
|
||||
|
||||
const { code, rainChkgdn, rainChkInit,rainChkDetilUpdate, excelExportAction } = useWrStore((state) => {
|
||||
return state;
|
||||
});
|
||||
|
||||
const [isDetail, setIsDetail] = useState(false);
|
||||
const [isExcel, setIsExcel] = useState(false);
|
||||
const [searchTxt, setSearchTxt] = useState<string>();
|
||||
@@ -101,6 +50,8 @@ export default function Page() {
|
||||
rainChkInit('2024','0');
|
||||
}
|
||||
}, [rainChkgdn.isInit, rainChkInit]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
console.log("rainChkgdn.excelList", rainChkgdn.excelList);
|
||||
if (rainChkgdn.excelList.length === 0) return;
|
||||
@@ -112,13 +63,16 @@ export default function Page() {
|
||||
// 받은 파일 바인너리 처리
|
||||
const blobRet = await response.arrayBuffer()
|
||||
// 버퍼에 있는 엑셀데이터 전달 후 json으로 변환
|
||||
const ret =await filePickedBlob(blobRet, rainChkgdn.excelList)
|
||||
const ret =await filePickedBlob(blobRet, rainChkgdn.excelList )
|
||||
console.log('ret', ret);
|
||||
})
|
||||
}, [rainChkgdn.excelList]);
|
||||
|
||||
const excelClick= useCallback(()=>{
|
||||
excelExportAction(code.cityCd, code.sggCd);
|
||||
}, [excelExportAction, code.cityCd, code.sggCd]);
|
||||
|
||||
|
||||
return (
|
||||
<ContentsDiv>
|
||||
<div className="grid grid-cols-4 gap-4 ">
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
"use client";
|
||||
import { headMakeColSpan } from "@/app/ruseFcltMng/fcltReg/rainReg/page";
|
||||
import { useWrStore } from "@/app/store";
|
||||
import {
|
||||
selectClass,
|
||||
type customRainBdst,
|
||||
} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import { ScrollArea, SelectBox, UiTable } from "@common/business_components";
|
||||
import { ScrollArea, SelectBox, UiTable, type SelectDataType } from "@common/business_components";
|
||||
import { Button, Input, Label } from "@common/components";
|
||||
import { useEffect, useState } from "react";
|
||||
import RainRegForm from "../../form/fcltReg/rainReg/rainRegForm";
|
||||
import { type selectArray } from "@/app/store/common/code";
|
||||
import { getCity, tableData } from "@/components/lib/func/commom";
|
||||
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
|
||||
import HtdflRegForm from "../../form/fcltReg/htdflReg/htdflRegForm";
|
||||
import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
|
||||
import RswtrRegForm from "../../form/fcltReg/rswtrReg/rswtrRegForm";
|
||||
import { headMakeColSpan } from "@/app/ruseFcltMng/fcltReg/rainReg/TableHead";
|
||||
|
||||
export type objSearchType = {
|
||||
sgg: string|number;
|
||||
@@ -40,7 +39,7 @@ export function BdstReg<T extends MoType>({ moType }: BdstRegProps<T>) {
|
||||
const [bdstTable, setbdstTable] = useState<BdstTypeMap[T][]>();
|
||||
const [rainBdstForm, setRainBdstForm] = useState<BdstTypeMap[T]>({} as BdstTypeMap[T]);
|
||||
const [searchTxt, setSearchTxt] = useState<string>()
|
||||
const [selectSgg, setSelectSgg] = useState<selectArray[] | []>()
|
||||
const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>()
|
||||
const [objSearch, setObjSearch] = useState<objSearchType>({sgg:"",city:""});
|
||||
|
||||
const getSelCity = (val: string | number) => {
|
||||
|
||||
Reference in New Issue
Block a user