99 lines
3.9 KiB
TypeScript
99 lines
3.9 KiB
TypeScript
"use client"
|
|
import { useFoStore } from "@/app/store";
|
|
import type { modalTableType } from "@/app/store/sewageOccur";
|
|
import { DateMonthPicker, UiTable } from "@common/business_components/ui";
|
|
import ListDiv from "@common/business_components/ui/list_div";
|
|
import { Table, TableCell, TableHead, TableRow } from "@common/components/ui";
|
|
import { useEffect, useState } from "react";
|
|
|
|
|
|
export default function SewageOccurModal(props: { fcltyName: string; facilityCd : string; searchYear : string}) {
|
|
// 그리드 관련
|
|
const {SewageOccurDetail, searchSewageOccurDetailList} = useFoStore((state) => state);
|
|
|
|
// searchYear 유효성 검사 및 기본값 설정
|
|
const validSearchYear = props.searchYear && /^\d{4}$/.test(props.searchYear) ? props.searchYear : new Date().getFullYear().toString();
|
|
|
|
const [startYearMonth, setStartYearMonth] = useState(validSearchYear+'01');
|
|
const [endYearMonth, setEndYearMonth] = useState(validSearchYear+'12');
|
|
const [detailList, setDetailList] = useState<modalTableType[]>([]);
|
|
const {
|
|
upHeadListSewageOccurDetail,
|
|
gridListSewageOccurDetail
|
|
} = SewageOccurDetail;
|
|
|
|
useEffect(() => {
|
|
searchSewageOccurDetailList(props.facilityCd, validSearchYear);
|
|
}, [searchSewageOccurDetailList, props.facilityCd, validSearchYear]);
|
|
|
|
useEffect(() => {
|
|
setDetailList(gridListSewageOccurDetail);
|
|
}, [gridListSewageOccurDetail]);
|
|
|
|
|
|
useEffect(() => {
|
|
searchSewageOccurDetailList(props.facilityCd, validSearchYear, startYearMonth, endYearMonth);
|
|
}, [startYearMonth, endYearMonth]);
|
|
|
|
return (
|
|
<>
|
|
<ListDiv className="!h-[80px] !mt-10">
|
|
<div className="card !m-[1.2rem] max-h-[40rem] overflow-auto !p-0r">
|
|
<Table>
|
|
<thead>
|
|
<TableRow className="">
|
|
<TableHead className="w-1/6">{'시설명'}</TableHead>
|
|
<TableCell className="w-1/3">{props.fcltyName}</TableCell>
|
|
<TableHead className="w-1/6">{'년월'}</TableHead>
|
|
<TableCell className="w-1/3">
|
|
<DateMonthPicker
|
|
field={{
|
|
value: startYearMonth || (() => {
|
|
const now = new Date();
|
|
const year = now.getFullYear();
|
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
return `${year}${month}`;
|
|
})(),
|
|
onChange: (value: string) => {
|
|
if (value && /^\d{6}$/.test(value)) {
|
|
setStartYearMonth(value);
|
|
}
|
|
}
|
|
}}
|
|
selectClass="ml-5 w-[100px]"
|
|
startYear={1900}
|
|
yearReadOnly={true}
|
|
/>~
|
|
<DateMonthPicker
|
|
field={{
|
|
value: endYearMonth || (() => {
|
|
const now = new Date();
|
|
const year = now.getFullYear();
|
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
return `${year}${month}`;
|
|
})(),
|
|
onChange: (value: string) => {
|
|
if (value && /^\d{6}$/.test(value)) {
|
|
setEndYearMonth(value);
|
|
}
|
|
}
|
|
}}
|
|
selectClass="ml-5 w-[100px]"
|
|
startYear={1900}
|
|
yearReadOnly={true}
|
|
/>
|
|
</TableCell>
|
|
</TableRow>
|
|
</thead>
|
|
</Table>
|
|
</div>
|
|
</ListDiv>
|
|
<ListDiv className="!h-[570px] overflow-y-auto">
|
|
<div className="h-[120%]">
|
|
<UiTable headName={"오수발생량 추정"} tableData={detailList} headlist={upHeadListSewageOccurDetail} pageSize={0} total={0} cellClick={undefined} onPageChange={() => {}} boldArray={[0, 1, 2]}>
|
|
</UiTable>
|
|
</div>
|
|
</ListDiv>
|
|
</>
|
|
);
|
|
} |