237 lines
8.1 KiB
TypeScript
237 lines
8.1 KiB
TypeScript
// 우수토실
|
|
import { UiModal, UiTable } from '@common/business_components/ui';
|
|
import { Button, TableHead, TableRow } from '@common/components/ui';
|
|
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { untrtSwgRainCol3, untrtSwgRainCol4, untrtSwgRainCol5 } from '../common/table';
|
|
import { VerticalTable } from '@/components/ui/verticalTable';
|
|
import { getData } from "@/components/lib/api";
|
|
import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
|
|
|
|
const inputColumn = [
|
|
{ id: "prrtymngYn", title: "중점여부", type: "select", options: ["중점우수토실", "우수토실"] },
|
|
{ id: "swtrmtZoneCd", title: "처리구역", type: "input" },
|
|
];
|
|
|
|
const Ssc = ({ featureData, isMainSsc, rainMeasureData, onSaveClick }: {
|
|
featureData: any,
|
|
isMainSsc?: boolean,
|
|
rainMeasureData?: any,
|
|
onSaveClick?: () => void
|
|
}) => {
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [isDataLoaded, setIsDataLoaded] = useState(false);
|
|
const [formData, setFormData] = useState<any>({});
|
|
const [mntrngsData, setMntrngsData] = useState<any[]>([]); // 수량/수질 측정 정보
|
|
const [selectedRowIndex, setSelectedRowIndex] = useState<number>(-1);
|
|
|
|
// console.log('featureData data received:', featureData); // 추가 데이터 확인용
|
|
// console.log('rainMeasureData received:', rainMeasureData); // 추가 데이터 확인용
|
|
|
|
const openModal = () => {
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const closeModal = () => {
|
|
setIsModalOpen(false);
|
|
if (!isDataLoaded) {
|
|
setTimeout(() => setIsDataLoaded(true), 100);
|
|
}
|
|
};
|
|
|
|
// featureData가 변경될 때 formData 초기화
|
|
useEffect(() => {
|
|
if (featureData) {
|
|
setFormData(featureData);
|
|
setMntrngsData([]);
|
|
}
|
|
}, [featureData]);
|
|
|
|
// 폼 데이터가 변경될 때 호출될 핸들러
|
|
const handleFormDataChange = (newFormData: any) => {
|
|
setFormData(newFormData);
|
|
};
|
|
|
|
// 저장 버튼 클릭 시 최신 formData를 부모에게 전달
|
|
const handleSaveClick = () => {
|
|
if (onSaveClick) {
|
|
// 저장 전에 formData를 부모 컴포넌트의 handleSaveClick에 전달
|
|
onSaveClick();
|
|
}
|
|
};
|
|
|
|
// 테이블 셀 클릭 핸들러 추가
|
|
const handleCellClick = async (index: number | undefined, headId: string) => {
|
|
if (index !== undefined && rainMeasureData) {
|
|
const data = await fetchMntrngsData(rainMeasureData[index].adstDstrCd, rainMeasureData[index].manageNo);
|
|
|
|
setMntrngsData(data);
|
|
setSelectedRowIndex(index);
|
|
}
|
|
};
|
|
|
|
// 🎯 추가 데이터 API 호출 함수 (독립적으로 실행)
|
|
const fetchMntrngsData = useCallback(async (adstDstrCd: string, manageNo: string) => {
|
|
if (!adstDstrCd || !manageNo) {
|
|
console.warn('추가 데이터 호출 실패: 필수 매개변수 누락', { adstDstrCd, manageNo });
|
|
return [];
|
|
}
|
|
|
|
try {
|
|
const queryParams = new URLSearchParams({
|
|
pageable: `{}`,
|
|
});
|
|
|
|
console.log(`SSC 추가 데이터 API 호출 시작: v1/onsemiro/swgRain?${queryParams.toString()}`);
|
|
|
|
const result = await getData(`v1/onsemiro/swgRain/${adstDstrCd}/${manageNo}/mntrngs?${queryParams.toString()}`);
|
|
|
|
console.log('SSC 추가 데이터 API 호출 성공:', result);
|
|
|
|
// 🎯 result가 페이지네이션 객체인 경우 content 배열 추출
|
|
let dataArray: any[] = [];
|
|
if (result && typeof result === 'object' && 'content' in result && Array.isArray(result.content)) {
|
|
dataArray = result.content;
|
|
} else if (Array.isArray(result)) {
|
|
dataArray = result;
|
|
} else {
|
|
console.warn('예상치 못한 API 응답 형식:', result);
|
|
return [];
|
|
}
|
|
|
|
// 🎯 각 아이템을 전처리하여 반환
|
|
const processedDataArray = dataArray.map((data: any) => {
|
|
// 🎯 formatDisplayData로 기본 포맷팅 적용
|
|
const formattedItem = formatDisplayData(data);
|
|
|
|
// 🎯 추가 데이터 조합
|
|
return {
|
|
...formattedItem,
|
|
};
|
|
});
|
|
|
|
console.log('processedDataArray', processedDataArray);
|
|
|
|
return processedDataArray;
|
|
} catch (error) {
|
|
console.error('추가 데이터 로딩 실패:', error);
|
|
return [];
|
|
}
|
|
}, []);
|
|
|
|
const renderModalBody = () => (
|
|
<div className='grid grid-cols-1 gap-4 p-4'>
|
|
{/* 강우정보 테이블 */}
|
|
<UiTable
|
|
headName='강우정보'
|
|
tableData={Array.isArray(rainMeasureData) ? rainMeasureData : []}
|
|
headlist={untrtSwgRainCol3}
|
|
pageSize={10}
|
|
total={Array.isArray(rainMeasureData) ? rainMeasureData.length : 0}
|
|
cellClick={handleCellClick}
|
|
onPageChange={function (page: number): void {
|
|
console.log('Rain data page change:', page);
|
|
}}
|
|
/>
|
|
|
|
{/* 측정정보 테이블 */}
|
|
<UiTable
|
|
headName='측정정보'
|
|
tableData={Array.isArray(rainMeasureData) ? rainMeasureData : []}
|
|
headlist={untrtSwgRainCol4}
|
|
pageSize={10}
|
|
total={Array.isArray(rainMeasureData) ? rainMeasureData.length : 0}
|
|
cellClick={handleCellClick}
|
|
// onPageChange={setCurPage}
|
|
onPageChange={function (page: number): void {
|
|
console.log('Rain data page change:', page);
|
|
}}
|
|
resetPageNo={false}
|
|
// index={curPage}
|
|
>
|
|
{/* 커스텀 헤더 */}
|
|
<TableRow>
|
|
<TableHead colSpan={5} className="text-center bg-blue-100 font-bold">수량</TableHead>
|
|
<TableHead colSpan={3} className="text-center bg-blue-100 font-bold">수질</TableHead>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableHead className="text-center">측정시작일시</TableHead>
|
|
<TableHead className="text-center">측정종료일시</TableHead>
|
|
<TableHead className="text-center">측정간격(분)</TableHead>
|
|
<TableHead className="text-center">측정기기설치위치</TableHead>
|
|
<TableHead className="text-center">유량계 종류 및 모델명</TableHead>
|
|
<TableHead className="text-center">채수시작일시</TableHead>
|
|
<TableHead className="text-center">채수종료일시</TableHead>
|
|
<TableHead className="text-center">채수횟수</TableHead>
|
|
</TableRow>
|
|
</UiTable>
|
|
|
|
{/* 수량/수질측정 정보 테이블 */}
|
|
<UiTable
|
|
headName='수량/수질측정 정보'
|
|
tableData={Array.isArray(mntrngsData) ? mntrngsData : []}
|
|
headlist={untrtSwgRainCol5}
|
|
pageSize={10}
|
|
total={Array.isArray(mntrngsData) ? mntrngsData.length : 0}
|
|
cellClick={undefined}
|
|
onPageChange={function (page: number): void {
|
|
console.log('Quality data page change:', page);
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<div>
|
|
{!isMainSsc && (
|
|
<VerticalTable
|
|
headName='자체 입력정보'
|
|
tableData={featureData ? [formData] : []}
|
|
headlist={inputColumn}
|
|
pageSize={0}
|
|
total={0}
|
|
cellClick={undefined}
|
|
isEditable={true}
|
|
onPageChange={function (): void {
|
|
throw new Error('Function not implemented.');
|
|
}}
|
|
showSaveButton={true}
|
|
onSaveClick={handleSaveClick}
|
|
onFormDataChange={handleFormDataChange} // 폼 데이터 변경 콜백 추가
|
|
/>
|
|
)}
|
|
|
|
{isMainSsc && (
|
|
<div>
|
|
<div className="card-header">
|
|
<h3 className="text-2xl mx-3 font-medium text-label">중점우수토실 운영정보</h3>
|
|
</div>
|
|
<Button
|
|
className='mx-auto block w-64 mt-3 py-2 text-white rounded-sm text-sm font-medium hover:bg-blue-700 bg-blue-600'
|
|
onClick={openModal}
|
|
>
|
|
상세보기
|
|
</Button>
|
|
|
|
<UiModal
|
|
open={isModalOpen}
|
|
onOpenChange={setIsModalOpen}
|
|
bodyClass={`
|
|
h-[100vh]
|
|
w-[60vw]
|
|
max-w-none
|
|
max-h-none
|
|
overflow-visible
|
|
z-[101]
|
|
`}
|
|
body={renderModalBody()}
|
|
noHeaderYn='Y'
|
|
noFooterYn='N'
|
|
// footerContent={renderFooterContent()}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Ssc |