diff --git a/apps/wr/app/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx b/apps/wr/app/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx index cd915e33b..2e93680a1 100644 --- a/apps/wr/app/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx +++ b/apps/wr/app/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx @@ -3,18 +3,15 @@ import { useWrStore } from "@/app/store"; import { fcltDiv, - type chHeadType, - type rainChkZodType, + type rainChkZodType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn"; -import type { TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; import { excelDownload } from "@/components/lib/func/commom"; import ChkgdExcel from "@/components/ui/modal/chkgdExcel/chkgdExcel"; -import ChkgdModal from "@/components/ui/modal/chkgdModal/chkgdModal"; import RainChkgdTable from "@/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable"; +import RainChkgdTableModal from "@/components/ui/table/chkgdTable/rainChkgd/rainChkgdTableModal"; import RswtChkgdTable from "@/components/ui/table/chkgdTable/rswtChkgd/rswtChkgdTable"; import { ContentsDiv, - filePickedBlob, SearchDiv, SearchFormLeft, SearchFormRight, @@ -37,7 +34,10 @@ export default function Page() { const [searchTxt, setSearchTxt] = useState(); const [updateRainDetail, setUpdateRainDetail] = useState([]); const [selFcltDiv, setSelFcltDiv] = useState("RNB"); - + const [isModal, setIsModal] = useState({ + open: false, + data: {}, + }); const cellClick = () => { if(searchTxt) rainChkInit(searchTxt,'41') @@ -54,13 +54,15 @@ export default function Page() { useEffect(() => { - excelDownload(rainChkgdn.excelList ,'빗물이용시설 지도점검','sample_rainy.xlsx'); + excelDownload(rainChkgdn.excelList ,'빗물이용시설 지도점검','sample_rainy.xlsx', 'A1:AN1'); }, [rainChkgdn.excelList]); const excelClick= useCallback(()=>{ rainChkExcelDownload(code.cityCd, code.sggCd); - }, [excelDownload, code.cityCd, code.sggCd]); - + }, [rainChkExcelDownload, code.cityCd, code.sggCd]); + const handleClick = useCallback((data:any) => { + if(data) setIsModal({ open: true, data: data }); + }, [isModal]); return ( @@ -122,12 +124,12 @@ export default function Page() {
- {selFcltDiv === "RNB" ? : } + {selFcltDiv === "RNB" ? : }
- + { // 1. chkgdnFk + utztnUsgCd 기준 누계 정보 만들기 - const maketotal = rainChk.map((item: any) => { + const maketotal = rainChk.map((item: rainChkZodType) => { const selectTotal = item.guideDetails.reduce((acc: any, cur: any) => { const code = cur.utztnUsgCd; const fk = cur.chkgdnFk; @@ -23,6 +23,8 @@ export const rightTableData = (rainChk: rainChkZodType[]) => { return selectTotal; // 모든 키: `${chkgdnFk}_${utztnUsgCd}` 형태 }); + console.log("maketotal", maketotal); + // 2. 누계 정보들을 하나의 객체로 합치기 (평탄화) const flatTotalMap = Object.assign({}, ...maketotal); @@ -30,8 +32,8 @@ export const rightTableData = (rainChk: rainChkZodType[]) => { // 3. rainyDetails에 누계 정보 주입 const updatedRainyDetails: any[] = []; - rainChk.forEach((rd: any) => { - const details = rd.rainyDetails.forEach((rainyItem: any) => { + rainChk.forEach((rd: rainChkZodType) => { + rd.rainyDetails.forEach((rainyItem: any) => { const key = `${rainyItem.chkgdnFk}_${rainyItem.utztnUsgCd}`; const totals = flatTotalMap[key] || { totalSplyUswtrUtztnQnt: 0, @@ -51,10 +53,6 @@ export const rightTableData = (rainChk: rainChkZodType[]) => { return updatedRainyDetails; }; - - - - export const chRowspanTable = ( makeTableData: any[], headList: TableUpperProps[], @@ -67,10 +65,7 @@ export const chRowspanTable = ( selectedIds: number[], handleCellClick: (index: number, headId: string) => void ) => { - - - - + console.log('chRowspanTable', makeTableData); // rowspan된 셀 렌더링 여부 추적용 const renderedMap = new Map>(); return ( diff --git a/apps/wr/components/lib/func/commom.tsx b/apps/wr/components/lib/func/commom.tsx index a25ea0278..b5f5b3b38 100644 --- a/apps/wr/components/lib/func/commom.tsx +++ b/apps/wr/components/lib/func/commom.tsx @@ -41,7 +41,6 @@ export const getCity = (val: string, sggCd: SelectDataType[]) => { returnData= { ...item, sggText: sggText, cityText: cityText}; } - // console.log(" returnData ", returnData) return returnData; }); @@ -49,7 +48,7 @@ export const getCity = (val: string, sggCd: SelectDataType[]) => { - export const excelDownload =(excelList: [][], fileNm:string ,sampleFile:string ) =>{ + export const excelDownload =(excelList: [][], fileNm:string ,sampleFile:string, headerRange='A1:V3') =>{ if (excelList.length === 0) return; fetch(`/${sampleFile}`, {}) .then(async (response) => { @@ -59,7 +58,7 @@ export const getCity = (val: string, sggCd: SelectDataType[]) => { // 받은 파일 바인너리 처리 const blobRet = await response.arrayBuffer() // 버퍼에 있는 엑셀데이터 전달 후 json으로 변환 - await filePickedBlob(blobRet, excelList,fileNm, 4) + await filePickedBlob(blobRet, excelList,fileNm, 4,headerRange) }) } diff --git a/apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable.tsx b/apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable.tsx index 19a1164bd..e9bc79108 100644 --- a/apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable.tsx +++ b/apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable.tsx @@ -1,41 +1,29 @@ "use client"; +import { headMakeprfmnc } from "@/app/ruseFcltMng/prfmncReg/chkgdnReg/TableHead"; import { useWrStore } from "@/app/store"; import type { rainChkZodType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn"; import { tableData } from "@/components/lib/func/commom"; -import { UiModal } from "@common/business_components/ui"; +import { + chRowspanTable, + rightTableData +} from "@/components/lib/func/TableData"; import { Table, TableBody, TableHeader, } from "@common/components/ui"; -import { useEffect, useState } from "react"; -import ChkgdModal from "../../../modal/chkgdModal/chkgdModal"; -import { headMakeprfmnc } from "@/app/ruseFcltMng/prfmncReg/chkgdnReg/TableHead"; -import { - chRowspanTable, - rightTableData, -} from "@/components/lib/func/TableData"; +import { useCallback, useEffect, useState } from "react"; export default function RainChkgdTable({ - detailUp, + detailUp, handleClick=() => {} }: { detailUp: (data: rainChkZodType[]) => void; + handleClick?: (data:any) => void; }) { const { code, rainChkgdn } = useWrStore((state) => state); const [makeTableData, setMakeTableData] = useState([]); const { rainChk } = rainChkgdn; const [selectedIds, setSelectedIds] = useState([]); const [upRaintDetail, setUpRaintDetail] = useState([]); - const [isModal, setIsModal] = useState({ open: false, data: {} }); - - const handleCellClick = (index: number, headId: string) => { - if ( - headId === "totalSplyUswtrUtztnQnt" || - headId === "totalRuseFcltUtztnQnt" - ) { - setIsModal({ open: true, data: makeTableData[index] }); - } - }; - const toggleSelection = (pk: number, checked: boolean) => { setSelectedIds((prev) => checked ? [...prev, pk] : prev.filter((item) => item !== pk) @@ -53,6 +41,15 @@ export default function RainChkgdTable({ ); }; + const handleCellClick= useCallback((index: number, headId: string) => { + if ( + headId === "totalSplyUswtrUtztnQnt" || + headId === "totalRuseFcltUtztnQnt" + ) { + handleClick(makeTableData[index]) + } + },[makeTableData, handleClick]); + useEffect(() => { @@ -65,8 +62,8 @@ export default function RainChkgdTable({ rowspan: item.rainyDetails?.length, }; }); - - setMakeTableData(rightTableData(rainChg)); + const tableTotalData = rightTableData(rainChg) + setMakeTableData(tableTotalData); }, [rainChk, code]); useEffect(() => { @@ -117,35 +114,24 @@ export default function RainChkgdTable({ detailUp(upRaintDetail); }, [upRaintDetail]); return ( - <> - - - {headMakeprfmnc( - rainChkgdn?.rainChkgdnHeadList, - rainChkgdn?.rainHeadNm - )} - +
+ + {headMakeprfmnc( + rainChkgdn?.rainChkgdnHeadList, + rainChkgdn?.rainHeadNm + )} + - - {chRowspanTable( - makeTableData, - rainChkgdn.rainChkgdnHeadList, - handleChange, - toggleSelection, - selectedIds, - handleCellClick - )} - -
- - { - setIsModal({ open: !open, data: {} }); - }} - bodyClass={"w-[80vw] max-w-none"} - body={} - > - + + {chRowspanTable( + makeTableData, + rainChkgdn.rainChkgdnHeadList, + handleChange, + toggleSelection, + selectedIds, + handleCellClick + )} + + ); } diff --git a/apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTableModal.tsx b/apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTableModal.tsx new file mode 100644 index 000000000..3cc5bdbbb --- /dev/null +++ b/apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTableModal.tsx @@ -0,0 +1,13 @@ +import ChkgdModal from "@/components/ui/modal/chkgdModal/chkgdModal"; +import { UiModal } from "@common/business_components"; + +export default function RainChkgdTableModal({ isModal, setIsModal }: { isModal: { open: boolean; data: any }; setIsModal: (value: { open: boolean; data: any }) => void }) { + return ( { + setIsModal({ open: !open, data: {} }); + }} + bodyClass={"w-[80vw] max-w-none"} + body={} + >) +} \ No newline at end of file