ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

지도점검등록 페이지네이션 추가

Browse Source
This commit is contained in:
jyha00
2025-07-02 16:14:18 +09:00
parent c50c2685c1
commit e36bfe7267
7 changed files with 115 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx
+12 -8
View File
@@ -31,7 +31,6 @@ import { useCallback, useEffect, useState } from "react";
import { Toaster } from "react-hot-toast";
import { shallow } from "zustand/shallow";
//-----------------------
export default function Page() {
const {
code,
@@ -43,7 +42,6 @@ export default function Page() {
rainChkExcelDownload,
rainChkHeadChange,
isRainSttn,
rswtChkgdnInit,
rswtChkPolInit,
rswtChkDetilsUpdate,
@@ -61,7 +59,7 @@ export default function Page() {
rswtrChkDetailsZodType[]
>([]);
const [deleteIdx, setDeleteIdx] = useState<number[]>([]);
const [pageNation, setPageNation] = useState(1);
const [selFcltDiv, setSelFcltDiv] = useState("RNB");
const [isModal, setIsModal] = useState({
open: false,
@@ -70,9 +68,9 @@ export default function Page() {
const cellClick = () => {
if (searchYear)
if (selFcltDiv === "RNB") {
rainChkInit(searchYear, "0");
rainChkInit("1", "20", searchYear, "0");
} else {
rswtChkgdnInit(searchYear, "0");
rswtChkgdnInit("1", "20", searchYear, "0");
}
};
@@ -82,14 +80,14 @@ export default function Page() {
useEffect(() => {
if (!rainChkgdn.isInit) {
rainChkInit(new Date().getFullYear().toString(), "0");
rainChkInit("1", "20", new Date().getFullYear().toString(), "0");
isRainSttn(false);
setIsModal({ data: {}, open: false });
setIsRegExcel(false);
}
if (!rswtChkgdn.isInit) {
rswtChkgdnInit(new Date().getFullYear().toString(), "0");
rswtChkgdnInit("1", "20", new Date().getFullYear().toString(), "0");
setIsModal({ data: {}, open: false });
setIsRegExcel(false);
}
@@ -179,9 +177,11 @@ export default function Page() {
selectClass={""}
selectArray={yearOptions}
value={searchYear}
onSelectValue={(val: string | number) =>
onSelectValue={(val: string | number) => {
setSearchYear(String(val))
}
}
/>
</div>
<div className="col-span-2 flex flex-row space-x-2">
@@ -255,6 +255,8 @@ export default function Page() {
detailUp={setUpdateRainDetail}
handleClick={handleClick}
rainChkData={rainChkgdn.rainChk}
pageNation={pageNation}
onPageChange={setPageNation}
/>
) : (
<RswtChkgdTable
@@ -262,6 +264,8 @@ export default function Page() {
deleteRswtData={setDeleteIdx}
handleRswtClick={handleClick}
rswtChkData={rswtChkgdn.rswtChkRes}
pageNation={pageNation}
onPageChange={setPageNation}
/>
)}
</ListDiv>
apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList.tsx
+1 -1
View File
@@ -134,7 +134,7 @@ export const rainChkgdnHeadListExport: TableUpperProps[] = [
{ id: "dtfcltCpct", title: "빗물저류조용량(m³)", mergeCell: true },
{ id: "chckYmd", title: "점검일", mergeCell: true },
{ id: "utztnUsgCd", title: "이용용도" },
{ id: "totalSplyUswtrUtztnQnt", title: "연간보급수이용량(m³)" },
{ id: "totalSplyUswtrUtztnQnt", title: "연간대체수이용량(m³)" },
{ id: "totalRuseFcltUtztnQnt", title: "연간빗물이용량(m³)" },
{
id: "ph",
apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/index.tsx
+6 -6
View File
@@ -52,7 +52,7 @@ export type rainChkgdnState = {
};
type rainChkgdnActions = {
rainChkInit: (sggCd: string, searchTxt: string) => void;
rainChkInit: (pageNo: string, cnt: string, sggCd: string, searchTxt: string) => void;
rainChkDetilUpdate(rainChk: rainChkZodType[]): Promise<void>;
rainChkGuidUpdate(rainChk: rainChkZodType): Promise<void>;
rainChkExcelDownload(
@@ -98,11 +98,11 @@ const makeMdfrChk = (data: rainChkZodType[], type: string, toDo: string) => {
return chData;
};
const initFetch = async (txt: string | undefined, sgg: string | undefined) => {
const initFetch = async (pageNo: string, cnt: string, txt: string | undefined, sgg: string | undefined) => {
const currentYear = new Date().getFullYear().toString();
const rainRes = await getFetch(
"wr",
`/reuseChk/rainy` + (txt ? `/${txt}` : currentYear) + (sgg ? `/${sgg}` : "/0")
`/reuseChk/rainy` + (pageNo ? `/${pageNo}` : "/1") + (cnt ? `/${cnt}` : "/20") + (txt ? `/${txt}` : `/${currentYear}`) + (sgg ? `/${sgg}` : "/0")
);
return rainRes;
};
@@ -140,7 +140,7 @@ export const rainChkgdnActionsExport: (set: any) => rainChkgdnActions = (
});
}
const currentYear = new Date().getFullYear().toString();
const rainChkRes = await initFetch(currentYear, "0");
const rainChkRes = await initFetch("1", "20", currentYear, "0");
return set((state: rainChkgdnState) => ({
...state,
rainChkgdn: {
@@ -156,9 +156,9 @@ export const rainChkgdnActionsExport: (set: any) => rainChkgdnActions = (
});
}
},
rainChkInit: async (searchTxt: string, sggCd: string) => {
rainChkInit: async (pageNo: string, cnt: string, searchTxt: string, sggCd: string) => {
try {
const rainChkRes = await initFetch(searchTxt, sggCd);
const rainChkRes = await initFetch(pageNo, cnt, searchTxt, sggCd);
return set((state: rainChkgdnState) => ({
...state,
apps/wr/app/store/prfmncReg/chkgdnReg/rswrtChkgdn/index.tsx
+20 -18
View File
@@ -3,7 +3,7 @@ import {
} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import type {
SelectDataType,
SheetParameter,
SheetParameter,
} from "@common/business_components";
import {
deleteFectch,
@@ -41,12 +41,12 @@ export type rswtChkgdnState = {
rswtChkRes: rswtChkZodType[];
rswtChkPolGuide: rswtChkZodType[];
isInit: boolean;
isSttn:boolean
isSttn: boolean
};
};
type rswtChkgdnActions = {
rswtChkgdnInit: (year: string, sggCd: string) => void;
rswtChkgdnInit: (pageNo: string, cnt: string, year: string, sggCd: string) => void;
rswtrChkExcelDownload(
sidoCode: SelectDataType[],
sggCode: SelectDataType[]
@@ -57,7 +57,7 @@ type rswtChkgdnActions = {
rswtChkPolAndGuide: (chkGdnPk: number) => void;
rswtChkPolInit: () => void;
rwstPolAndGuideUpdate: (rswtChk: rswtChkZodType[]) => void;
rswtChkHeadChange: (rswtChkgdn: rswtChkgdnState, isEdit: boolean) => void;
rswtChkHeadChange: (rswtChkgdn: rswtChkgdnState, isEdit: boolean) => void;
};
export type rswtChkgdnType = rswtChkgdnState & rswtChkgdnActions;
@@ -75,17 +75,19 @@ export const rswtChkgdnStateExport: rswtChkgdnState = {
rswtChkRes: [],
rswtChkPolGuide: [],
isInit: false,
isSttn:false,
isSttn: false,
},
};
const initFetch = async (year: string | undefined, sgg: string | undefined) => {
const initFetch = async (pageNo: string, cnt: string, year: string | undefined, sgg: string | undefined) => {
const currentYear = new Date().getFullYear().toString();
const rswtChkRes = await getFetch(
"wr",
`/reuseChk/reuseWater/` +
(year ? `${year}` : currentYear) +
(sgg ? `/${sgg}` : "/0")
`/reuseChk/reuseWater` +
(pageNo ? `/${pageNo}` : "/1") +
(cnt ? `/${cnt}` : "/20") +
(year ? `/${year}` : `/${currentYear}`) +
(sgg ? `/${sgg}` : "/0")
);
return rswtChkRes;
};
@@ -137,9 +139,9 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
},
}));
},
rswtChkgdnInit: async (year: string, sggCd: string) => {
rswtChkgdnInit: async (pageNo: string, cnt: string, year: string, sggCd: string) => {
try {
const rswtChkRes = await initFetch(year, sggCd);
const rswtChkRes = await initFetch(pageNo, cnt, year, sggCd);
return set((state: rswtChkgdnState) => ({
...state,
@@ -163,7 +165,7 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
});
}
const currentYear = new Date().getFullYear().toString();
const rswtChkRes = await initFetch(currentYear, "0");
const rswtChkRes = await initFetch("1", "20", currentYear, "0");
return set((state: rswtChkgdnState) => ({
...state,
rswtChkgdn: {
@@ -188,7 +190,7 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
});
}
const currentYear = new Date().getFullYear().toString();
const rswtChkRes = await initFetch(currentYear, "0");
const rswtChkRes = await initFetch("1", "20", currentYear, "0");
return set((state: rswtChkgdnState) => ({
...state,
rswtChkgdn: {
@@ -212,7 +214,7 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
});
}
const currentYear = new Date().getFullYear().toString();
const rswtChkRes = await initFetch(currentYear, "0");
const rswtChkRes = await initFetch("1", "20", currentYear, "0");
return set((state: rswtChkgdnState) => ({
...state,
rswtChkgdn: {
@@ -238,7 +240,7 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
rswtChkPolGuide: rswtChkPolGuide,
},
}));
} catch (error) {}
} catch (error) { }
},
rswtChkPolInit: () => {
try {
@@ -249,7 +251,7 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
rswtChkPolGuide: undefined,
},
}));
} catch (error) {}
} catch (error) { }
},
rwstPolAndGuideUpdate: async (rswtChk: rswtChkZodType[]) => {
try {
@@ -265,7 +267,7 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
});
}
const currentYear = new Date().getFullYear().toString();
const rswtChkRes = await initFetch(currentYear, "0");
const rswtChkRes = await initFetch("1", "20", currentYear, "0");
return set((state: rswtChkgdnState) => ({
...state,
rswtChkgdn: {
@@ -299,7 +301,7 @@ export const rswtChkgdnActionsExport: (set: any) => rswtChkgdnActions = (
rswtDetailHeadList: rswtDetailHeadList,
},
}));
} catch (e) {}
} catch (e) { }
},
};
};
apps/wr/components/lib/func/TableData.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ export const rainChkTableData = (chkData: rainChkZodType[]) => {
export const rswtChkTableData = (chkData: rswtChkZodType[]) => {
// 1. chkgdnFk + utztnUsgCd 기준 누계 정보 만들기
const makeRswtData: any[] = [];
chkData.forEach((root) => {
chkData?.forEach((root) => {
root.rswtrDetails.forEach((detail) => {
let flatRswtChk = {};
const findGuide = root.guideDetails.find(
apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable.tsx
+57 -44
View File
@@ -16,22 +16,27 @@ import {
TableHeader,
} from "@common/components/ui";
import { useCallback, useEffect, useState } from "react";
import UiPageNations from "@common/business_components/ui/table/uiPageNations";
export default function RainChkgdTable({
detailUp,
handleClick=() => {},
detailUp,
handleClick = () => { },
deleteData,
rainChkData,
pageNation,
onPageChange,
}: {
detailUp: (data: rainChkZodType[]) => void;
handleClick?: (data:any) => void;
deleteData:(selectedIds:number[])=>void
handleClick?: (data: any) => void;
deleteData: (selectedIds: number[]) => void
rainChkData?: rainChkZodType[];
pageNation: number;
onPageChange: (page: number) => void;
}) {
const { code, rainChkgdn ,rainChkSttn,getRainSttnExcel } = useWrStore((state) => state);
const { code, rainChkgdn, rainChkSttn, getRainSttnExcel } = useWrStore((state) => state);
const [makeTableData, setMakeTableData] = useState<any[]>([]);
const [selectedIds, setSelectedIds] = useState<number[]>([]);
const [upRaintDetail, setUpRaintDetail] = useState<rainChkZodType[]>([]);
const [headList, setHeadList] = useState< {headList:TableUpperProps[],upHeadList:chHeadType[]}>({headList:[], upHeadList:[]});
const [headList, setHeadList] = useState<{ headList: TableUpperProps[], upHeadList: chHeadType[] }>({ headList: [], upHeadList: [] });
const toggleSelection = (pk: number, checked: boolean) => {
@@ -46,29 +51,29 @@ export default function RainChkgdTable({
) => {
setMakeTableData((prev) =>
prev.map((row, idx) => {
return idx === rowIndex ? { ...row, [field]: value } : row
prev.map((row, idx) => {
return idx === rowIndex ? { ...row, [field]: value } : row
}
)
);
};
const handleCellClick= useCallback((index: number, headId: string) => {
const handleCellClick = useCallback((index: number, headId: string) => {
if (
headId === "totalSplyUswtrUtztnQnt" ||
headId === "totalRuseFcltUtztnQnt"
) {
handleClick(makeTableData[index])
}
},[makeTableData, handleClick]);
}, [makeTableData, handleClick]);
useEffect(() => {
setSelectedIds([])// 셀렉트 초기화를 위한 작업
if(rainChkData){
if (rainChkData) {
const rainChg = rainChkData.map((item: any) => {
const bud = tableData([item.building], { code });
return {
@@ -83,10 +88,10 @@ export default function RainChkgdTable({
useEffect(() => {
//데이터를 평탄화 한것중에 체크박스 선택한 테이블만 선택
//현황 페이지에서 필요한 엑셀 데이터를 바뀔때마다 넣기 위해서
getRainSttnExcel(makeTableData);
const selectedData = makeTableData.filter((item) =>selectedIds.includes(item.chkgdnPk));
const selectedData = makeTableData.filter((item) => selectedIds.includes(item.chkgdnPk));
if (selectedData.length > 0) {
const updateTableData = rainChkgdn.rainChk
@@ -101,7 +106,7 @@ export default function RainChkgdTable({
);
if (findRain != undefined) {
console.log(findRain)
console.log(findRain)
return {
...rd,
ph: Number(findRain.ph),
@@ -127,34 +132,34 @@ export default function RainChkgdTable({
}
})
.filter(Boolean);
setUpRaintDetail(updateTableData as rainChkZodType[]);
}
}, [makeTableData,selectedIds]);
}, [makeTableData, selectedIds]);
useEffect(() => {
detailUp(upRaintDetail);
}, [upRaintDetail]);
useEffect(() =>{
if(selectedIds.length >0){
useEffect(() => {
if (selectedIds.length > 0) {
// 삭제를 위한 데이터 삽입
deleteData(selectedIds )
deleteData(selectedIds)
}
},[selectedIds])
}, [selectedIds])
///현황일 경우 input 비활성화 한다.
useEffect(() => {
if(rainChkSttn.isSttn){
useEffect(() => {
if (rainChkSttn.isSttn) {
setHeadList({
headList: rainChkSttn.rainChkgdnHeadList,
upHeadList: rainChkSttn.rainHeadNm
})
}else{
} else {
setHeadList({
headList: rainChkgdn.rainChkgdnHeadList,
upHeadList: rainChkgdn.rainHeadNm
@@ -162,28 +167,36 @@ export default function RainChkgdTable({
}
}, [rainChkSttn.isSttn, rainChkgdn.rainChkgdnHeadList , rainChkSttn.rainChkgdnHeadList]);
}, [rainChkSttn.isSttn, rainChkgdn.rainChkgdnHeadList, rainChkSttn.rainChkgdnHeadList]);
return (
<Table variant="secondary">
<TableHeader className="font-bold">
{headMakeprfmnc(
headList?.headList,
headList?.upHeadList
)}
</TableHeader>
<>
<Table variant="secondary">
<TableHeader className="font-bold">
{headMakeprfmnc(
headList?.headList,
headList?.upHeadList
)}
</TableHeader>
<TableBody>
{chRowspanTable(
makeTableData,
headList.headList,
handleChange,
toggleSelection,
selectedIds,
handleCellClick
)}
</TableBody>
</Table>
<TableBody>
{chRowspanTable(
makeTableData,
headList.headList,
handleChange,
toggleSelection,
selectedIds,
handleCellClick
)}
</TableBody>
</Table>
<UiPageNations
total={rainChkData?.length ?? 0}
cur={pageNation}
pageSize={20}
onPageChange={onPageChange}
/>
</>
);
}
apps/wr/components/ui/table/chkgdTable/rswtChkgd/rswtChkgdTable.tsx
+18 -9
View File
@@ -14,22 +14,27 @@ import {
} from "@/components/lib/func/TableData";
import { Table, TableBody, TableHeader } from "@common/components/ui";
import { useCallback, useEffect, useState } from "react";
import UiPageNations from "@common/business_components/ui/table/uiPageNations";
export default function RswtChkgdTable({
detaiRswtlUpdate,
handleRswtClick = () => {},
handleRswtClick = () => { },
deleteRswtData,
rswtChkData,
pageNation,
onPageChange,
}: {
detaiRswtlUpdate: (data: rswtrChkDetailsZodType[]) => void;
handleRswtClick?: (data: any) => void;
deleteRswtData: (selectedIds: number[]) => void;
rswtChkData: rswtChkZodType[];
pageNation: number;
onPageChange: (page: number) => void;
}) {
const { code, rswtChkgdn,rswtChkSttn , rswtChkgdnInit, rswtChkPolAndGuide,getRswtSttnExcel } = useWrStore(
const { code, rswtChkgdn, rswtChkSttn, rswtChkgdnInit, rswtChkPolAndGuide, getRswtSttnExcel } = useWrStore(
(state) => state
);
const [headList, setHeadList] = useState< {headList:TableUpperProps[],upHeadList:chHeadType[]}>({headList:[], upHeadList:[]});
const [headList, setHeadList] = useState<{ headList: TableUpperProps[], upHeadList: chHeadType[] }>({ headList: [], upHeadList: [] });
const [makeTableData, setMakeTableData] = useState<any[]>([]);
const [selectedIds, setSelectedIds] = useState<number[]>([]);
@@ -111,22 +116,20 @@ export default function RswtChkgdTable({
}, [selectedIds]);
///현황일 경우 input 비활성화 한다.
useEffect(() => {
if(rswtChkSttn.isSttn){
useEffect(() => {
if (rswtChkSttn.isSttn) {
setHeadList({
headList: rswtChkSttn.rswtChkSttnHeadList,
upHeadList: rswtChkSttn.rswtSttnHeadNm
})
}else{
} else {
setHeadList({
headList: rswtChkgdn.rswtChkHeadList,
upHeadList: rswtChkgdn.rswtHeadNm
})
}
}, [rswtChkSttn.isSttn, rswtChkgdn.rswtChkHeadList , rswtChkSttn.rswtChkSttnHeadList]);
}, [rswtChkSttn.isSttn, rswtChkgdn.rswtChkHeadList, rswtChkSttn.rswtChkSttnHeadList]);
return (
<>
@@ -146,6 +149,12 @@ export default function RswtChkgdTable({
)}
</TableBody>
</Table>
<UiPageNations
total={rswtChkData?.length ?? 0}
cur={pageNation}
pageSize={20}
onPageChange={onPageChange}
/>
</>
);
}