229 lines
9.2 KiB
TypeScript
229 lines
9.2 KiB
TypeScript
'use client';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { Button, Label } from '@common/components';
|
|
import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
|
|
import { SelectBox, UiTable } from '@common/business_components/ui';
|
|
import LoadingOverlay from '@/components/ui/LoadingBar';
|
|
|
|
import { addFileName, flattenFolders, getFileDownload, useCityCd, useDcTree, useSggCd, reportGubuns } from './searchModalReportApi';
|
|
import { type SelectDataType } from '../commonStore';
|
|
|
|
|
|
// 하수도정비 기본계획 보고서
|
|
export const reportTableHeadlist = [
|
|
{ id: "no", title: "NO" },
|
|
{ id: "sido", title: "시도" },
|
|
{ id: "sigungu", title: "시군구" },
|
|
{ id: "approvalYear", title: "승인년도" },
|
|
{ id: "plantZoneGugun", title: "구분" },
|
|
{ id: "reportGubun", title: "보고서구분" },
|
|
{ id: "fileName", title: "파일명" },
|
|
{ id: "regDate", title: "등록일자" },
|
|
];
|
|
|
|
|
|
interface BasicTabProps {
|
|
open?: boolean;
|
|
}
|
|
|
|
const ReportTab: React.FC<BasicTabProps> = ({ open }) => {
|
|
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [isResetPage, setIsResetPage] = useState<boolean>(false);
|
|
const [isResetSelection, setIsResetSelection] = useState<boolean>(false);
|
|
const [showTable, setShowTable] = useState(false);
|
|
const [tableData, setTableData] = useState<any[]>([]);
|
|
const [tableCount, setTableCount] = useState(0);
|
|
const [curPage, setCurPage] = useState(1);
|
|
const [yearFilter, setYearFilter] = useState({ start: "", end: "" });
|
|
const [ctpvCd, setCtpvCd] = useState('0'); // 하수정비기본계획 report
|
|
const [sigungu, setSigungu] = useState('0'); // 하수정비기본계획 report
|
|
const [filteredSiguns, setFilteredSiguns] = useState<SelectDataType[]>([{ val: '0', text: '전체', sido: '0' }]);
|
|
const [gubun, setGubun] = useState(""); // 하수정비기본계획 report
|
|
const [reportGubun, setReportGubun] = useState("0"); // 하수정비기본계획 report
|
|
|
|
|
|
// 하수정비기본계획 report
|
|
const sidos = useCityCd();
|
|
const siguns = useSggCd();
|
|
const reportOriginData = useDcTree(""); //:Folder[]
|
|
|
|
const dynamicHeadlist: { id: string, title: string }[] = reportTableHeadlist;
|
|
|
|
useEffect(() => {
|
|
// filterParams 초기화
|
|
setCtpvCd('0');
|
|
setSigungu('0');
|
|
setReportGubun('0');
|
|
setYearFilter({ start: "", end: "" });
|
|
setShowTable(false);
|
|
setTableData([]);
|
|
setTableCount(0);
|
|
setCurPage(1); // 페이지를 1로 초기화
|
|
setIsResetPage(true); // 페이지를 초기화
|
|
setIsResetSelection(true); // 선택 초기화
|
|
}, [open]);
|
|
|
|
// 페이지 변경 시마다 데이터 fetch
|
|
useEffect(() => {
|
|
// showTable이 true일 때만 fetch (최초 렌더 방지)
|
|
setIsResetPage(false);
|
|
setIsResetSelection(true); // 선택 초기화
|
|
if (showTable) fetchFilteredData();
|
|
}, [curPage]);
|
|
|
|
const handleCtpvCdChange = (val: string | number) => { // 하수도정비기본계획.시도
|
|
const sidoOption = sidos.find((n) => n.val === val);
|
|
setCtpvCd(String(val));
|
|
if (val !== '0') {
|
|
const filterSiguns = siguns.filter(item => item.sido === sidoOption?.text);
|
|
filterSiguns.unshift({ val: '0', text: '전체', sido: '0' });
|
|
setFilteredSiguns(filterSiguns);
|
|
}
|
|
setSigungu("0");
|
|
setGubun("");
|
|
setYearFilter({ start: "", end: "", });
|
|
}
|
|
|
|
|
|
// 조회 버튼 클릭 시 1페이지로 이동 및 데이터 초기화
|
|
const handleSearch = () => {
|
|
setCurPage(1); // 페이지를 1로 초기화
|
|
fetchFilteredData();
|
|
setIsResetPage(true); // 페이지를 초기화
|
|
setIsResetSelection(false); // 선택 초기화
|
|
setShowTable(true);
|
|
};
|
|
|
|
// 하수도정비기본계획 테이블 cellClick 핸들러
|
|
const handleReportCellClick = (index: number | undefined ) => {
|
|
console.log(index);
|
|
if (typeof index === "number" && tableData[index]) {
|
|
const reportData = tableData[index];
|
|
const fileName = reportData.fileName;
|
|
const filePath = reportData.filePath;
|
|
if (reportData.fileSn !== "") {
|
|
getFileDownload(reportData.fileSn, fileName, filePath);
|
|
}
|
|
}
|
|
};
|
|
|
|
// 검색 API 호출 함수
|
|
const fetchFilteredData = async () => {
|
|
setIsLoading(true); // 로딩 시작
|
|
setIsResetSelection(true); // 선택 초기화
|
|
|
|
try {
|
|
//const reportOriginData = await getDcTree('경기도');
|
|
const reportData = flattenFolders(reportOriginData);
|
|
let filterReportData = reportData;
|
|
if (ctpvCd !== "0") { // 시도검색
|
|
const sidoOption = sidos.find((n) => n.val === ctpvCd);
|
|
filterReportData = filterReportData.filter(item => item.sido === sidoOption?.text);
|
|
}
|
|
if (sigungu !== "0") { // 시군구검색
|
|
const sigunguOption = filteredSiguns.find((n) => n.val === sigungu);
|
|
filterReportData = filterReportData.filter(item => item.sigungu === sigunguOption?.text);
|
|
}
|
|
if (reportGubun !== "0") { // 보고서구분검색
|
|
const reportGubunOption = reportGubuns.find((n) => n.val === reportGubun);
|
|
filterReportData = filterReportData.filter(item => item.reportGubun === reportGubunOption?.text);
|
|
}
|
|
|
|
if (yearFilter.start != "" && yearFilter.end == "") //승인년도검색
|
|
filterReportData = filterReportData.filter(item => (item.approvalYear) ? item.approvalYear >= yearFilter.start + "년" : null);
|
|
if (yearFilter.start == "" && yearFilter.end != "")
|
|
filterReportData = filterReportData.filter(item => (item.approvalYear) ? item.approvalYear <= yearFilter.end + "년" : null);
|
|
if (yearFilter.start != "" && yearFilter.end != "") {
|
|
filterReportData = filterReportData.filter(item => {
|
|
return (item.approvalYear) ? item.approvalYear >= yearFilter.start + "년" && item.approvalYear <= yearFilter.end + "년" : null;
|
|
});
|
|
}
|
|
if (gubun !== "") { // 구분검색
|
|
filterReportData = filterReportData.filter(item => (item.plantZoneGugun) ? String(item.plantZoneGugun).includes(String(gubun)) : null);
|
|
}
|
|
console.log('report count:', filterReportData.length);
|
|
setTableCount(filterReportData.length || 0);
|
|
filterReportData = filterReportData.slice((curPage - 1) * 10, curPage * 10); // paging
|
|
filterReportData = filterReportData?.map((item, index) => ({ ...item, no: (curPage - 1) * 10 + index + 1 }));
|
|
//const fileList = await getDcFile("CLS20250530000041");
|
|
addFileName(filterReportData).then(data => {
|
|
filterReportData = data;
|
|
setTableData(filterReportData || []);
|
|
});
|
|
setTableData(filterReportData || []);
|
|
|
|
setShowTable(true);
|
|
} catch (err) {
|
|
console.error('API ERROR:', err);
|
|
setTableData([]);
|
|
} finally {
|
|
setIsLoading(false); // 로딩 종료
|
|
}
|
|
};
|
|
|
|
|
|
return (
|
|
<>
|
|
<div className="relative flex flex-col border rounded-lg p-5 w-full h-[10vh]">
|
|
<div className="flex items-center mb-3">
|
|
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시도</Label>
|
|
<SelectBox className="w-60 mr-8"
|
|
selectClass="rounded-lg bg-white"
|
|
label="" selectArray={sidos}
|
|
value={ctpvCd} onSelectValue={handleCtpvCdChange}
|
|
selectContentClass="z-[101]"
|
|
/>
|
|
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시군구</Label>
|
|
<SelectBox className="w-48"
|
|
selectClass="w-48 rounded-lg bg-white truncate"
|
|
label="" selectArray={filteredSiguns}
|
|
value={sigungu} onSelectValue={val => setSigungu(String(val))}
|
|
selectContentClass="z-[101]"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center mb-6">
|
|
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">보고서 구분</Label>
|
|
<SelectBox className="w-44 mr-8"
|
|
selectClass="rounded-lg bg-white"
|
|
label="" selectArray={[...reportGubuns]}
|
|
value={reportGubun} onSelectValue={val => setReportGubun(String(val))}
|
|
selectContentClass="z-[101]" labelClass='whitespace-nowrap text-xl text-gray-600 pr-2'
|
|
/>
|
|
{/* 승인년도 필터 */}
|
|
<YearRangeSelectBox start={yearFilter.start} end={yearFilter.end}
|
|
onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
|
|
startLabel="승인년도" endLabel=""
|
|
/>
|
|
{/* 조회 버튼 */}
|
|
<div className="flex-1 flex justify-end">
|
|
<Button className="text-base py-2" onClick={handleSearch}>조회</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="h-[79vh] w-full overflow-hidden rounded-lg border">
|
|
{/* 테이블2 영역 (가로/세로 스크롤 가능) */}
|
|
<div className="flex-1 px-2 pb-2">
|
|
<LoadingOverlay isLoading={isLoading} />
|
|
<UiTable
|
|
headName={(() => {
|
|
return (<>조회 결과 ({tableCount.toLocaleString('ko-KR')})건</>);
|
|
})()
|
|
}
|
|
tableData={tableData}
|
|
headlist={dynamicHeadlist}
|
|
pageSize={10}
|
|
total={tableCount}
|
|
cellClick={handleReportCellClick}
|
|
onPageChange={setCurPage}
|
|
resetPageNo={isResetPage}
|
|
resetSelection={isResetSelection}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default React.memo(ReportTab); |