446 lines
13 KiB
TypeScript
446 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useWrStore } from "@/app/store";
|
|
import {
|
|
rainPageSize,
|
|
type rainChkZodType,
|
|
} from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn";
|
|
import {
|
|
rswtPageSize,
|
|
type rswtrChkDetailsZodType,
|
|
} from "@/app/store/prfmncReg/chkgdnReg/rswrtChkgdn";
|
|
import {
|
|
confirmToast,
|
|
excelArrayDownload,
|
|
excelDownload,
|
|
yearOptions,
|
|
} from "@/components/lib/func/commom";
|
|
import ChkgdExcel from "@/components/ui/modal/chkgd/chkgdExcel/chkgdExcel";
|
|
import ChkgdModal from "@/components/ui/modal/chkgd/chkgdModal/chkgdModal";
|
|
import RainChkgdTable from "@/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable";
|
|
import RswtChkgdTable from "@/components/ui/table/chkgdTable/rswtChkgd/rswtChkgdTable";
|
|
import { SearchInput } from "@common/business_components";
|
|
import {
|
|
ContentsDiv,
|
|
SearchDiv,
|
|
SearchFormLeft,
|
|
SearchFormRight,
|
|
SelectBox,
|
|
Title,
|
|
UiModal,
|
|
} from "@common/business_components/ui";
|
|
import ListDiv from "@common/business_components/ui/list_div";
|
|
import { Button, Label } from "@common/components/ui";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@common/components/ui/tooltip";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import toast, { Toaster } from "react-hot-toast";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export default function Page() {
|
|
const {
|
|
auth,
|
|
code,
|
|
rainChkgdn,
|
|
rswtChkgdn,
|
|
rainChkInit,
|
|
rainChkDetilUpdate,
|
|
rainChkDelete,
|
|
rainChkExcelDownload,
|
|
rainChkHeadChange,
|
|
rainChkNmSearch,
|
|
isRainSttn,
|
|
rswtChkgdnInit,
|
|
rswtChkNmSearch,
|
|
rswtChkPolInit,
|
|
rswtChkDetilsUpdate,
|
|
rswtChkDelete,
|
|
rswtrChkExcelDownload,
|
|
rswtChkHeadChange,
|
|
getLaeSeCdCheck
|
|
} = useWrStore((state) => {
|
|
return state;
|
|
});
|
|
const { regAuthrtYn, mdfcnAuthrtYn, delAuthrtYn,laeSeCd } = auth;
|
|
const [isRegExcel, setIsRegExcel] = useState(false);
|
|
const [updateRainDetail, setUpdateRainDetail] = useState<rainChkZodType[]>(
|
|
[]
|
|
);
|
|
const [updateRswtDetail, setUpdateRSwtDetail] = useState<
|
|
rswtrChkDetailsZodType[]
|
|
>([]);
|
|
const [deleteIdx, setDeleteIdx] = useState<number[]>([]);
|
|
const [rainPageNation, setRainPageNation] = useState(1);
|
|
const [rswtPageNation, setRswtPageNation] = useState(1);
|
|
const [fcltNm, setFcltNm] = useState<string>("");
|
|
const [selFcltDiv, setSelFcltDiv] = useState("RNB");
|
|
const [isModal, setIsModal] = useState({
|
|
open: false,
|
|
data: {},
|
|
});
|
|
const [searchYear, setSearchYear] = useState<string>(
|
|
String(new Date().getFullYear())
|
|
);
|
|
|
|
const useInitRef = useRef(false);
|
|
|
|
|
|
useEffect(() => {
|
|
getLaeSeCdCheck();
|
|
useInitRef.current = true;
|
|
}, []);
|
|
|
|
|
|
|
|
const cellClick = () => {
|
|
if (searchYear)
|
|
if (selFcltDiv === "RNB") {
|
|
if (fcltNm) {
|
|
rainChkNmSearch(
|
|
rainPageNation,
|
|
rainPageSize,
|
|
searchYear,
|
|
laeSeCd,
|
|
fcltNm
|
|
);
|
|
setRainPageNation(1);
|
|
} else {
|
|
rainChkInit(rainPageNation, rainPageSize, searchYear, laeSeCd);
|
|
}
|
|
} else {
|
|
if (fcltNm) {
|
|
rswtChkNmSearch(
|
|
rainPageNation,
|
|
rainPageSize,
|
|
searchYear,
|
|
laeSeCd,
|
|
fcltNm
|
|
);
|
|
setRswtPageNation(1);
|
|
} else {
|
|
rswtChkgdnInit(rswtPageNation, rswtPageSize, searchYear, laeSeCd);
|
|
}
|
|
}
|
|
};
|
|
const rainPageChange = (pageNo: number) => {
|
|
if (pageNo > 0) {
|
|
setRainPageNation(pageNo);
|
|
if (fcltNm) {
|
|
rainChkNmSearch(
|
|
pageNo,
|
|
rainPageSize,
|
|
searchYear,
|
|
laeSeCd,
|
|
fcltNm
|
|
);
|
|
} else {
|
|
rainChkInit(pageNo, rainPageSize, searchYear, laeSeCd);
|
|
}
|
|
}
|
|
};
|
|
const rswtPageChange = (pageNo: number) => {
|
|
if (pageNo > 0) {
|
|
setRswtPageNation(pageNo);
|
|
if (fcltNm) {
|
|
rswtChkNmSearch(
|
|
pageNo,
|
|
rainPageSize,
|
|
searchYear,
|
|
laeSeCd,
|
|
fcltNm
|
|
);
|
|
} else {
|
|
rswtChkgdnInit(pageNo, rswtPageSize, searchYear, laeSeCd);
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
if (useInitRef.current == true && laeSeCd !== undefined&& !rainChkgdn.isInit) {
|
|
rainChkInit(
|
|
1,
|
|
rainPageSize,
|
|
new Date().getFullYear().toString(),
|
|
laeSeCd
|
|
);
|
|
isRainSttn(false);
|
|
setIsModal({ data: {}, open: false });
|
|
setIsRegExcel(false);
|
|
}
|
|
}, [rainChkgdn.isInit, rainChkInit, rainPageSize,laeSeCd]);
|
|
|
|
useEffect(() => {
|
|
if (useInitRef.current == true && laeSeCd !== undefined&&!rswtChkgdn.isInit) {
|
|
rswtChkgdnInit(
|
|
1,
|
|
rswtPageSize,
|
|
new Date().getFullYear().toString(),
|
|
laeSeCd
|
|
);
|
|
setIsModal({ data: {}, open: false });
|
|
setIsRegExcel(false);
|
|
}
|
|
}, [rswtChkgdn.isInit, rswtChkgdnInit, rswtPageSize,laeSeCd]);
|
|
|
|
useEffect(() => {
|
|
if (rswtChkgdn.excelList[0] && rswtChkgdn.excelList[0]?.data.length > 1) {
|
|
excelArrayDownload(
|
|
"중수도시설 지도점검",
|
|
"sample_rs_chk.xlsx",
|
|
rswtChkgdn.excelList
|
|
);
|
|
}
|
|
}, [rswtChkgdn.excelList]);
|
|
|
|
useEffect(() => {
|
|
excelDownload(
|
|
rainChkgdn.excelList,
|
|
"빗물이용시설 지도점검",
|
|
"sample_rainy.xlsx",
|
|
"A1:AN1",
|
|
2
|
|
);
|
|
}, [rainChkgdn.excelList]);
|
|
|
|
const excelClick = useCallback(() => {
|
|
if (selFcltDiv === "RNB") {
|
|
rainChkExcelDownload(code.cityCd, code.sggCd,laeSeCd);
|
|
} else {
|
|
rswtrChkExcelDownload(code.cityCd, code.sggCd,laeSeCd);
|
|
}
|
|
}, [
|
|
rainChkExcelDownload,
|
|
rswtrChkExcelDownload,
|
|
code.cityCd,
|
|
code.sggCd,
|
|
selFcltDiv,
|
|
laeSeCd
|
|
]);
|
|
|
|
const handleClick = useCallback(
|
|
(data: any) => {
|
|
if (data) setIsModal({ open: !isModal.open, data: data });
|
|
},
|
|
[isModal]
|
|
);
|
|
|
|
useEffect(() => {
|
|
rainChkgdn.isSttn = false;
|
|
rswtChkgdn.isSttn = false;
|
|
if (!rainChkgdn.isSttn && !rswtChkgdn.isSttn) {
|
|
rainChkHeadChange({ rainChkgdn }, true);
|
|
rswtChkHeadChange({ rswtChkgdn }, true);
|
|
}
|
|
}, [rainChkgdn.isSttn, rswtChkgdn.isSttn]);
|
|
|
|
const { t } = useTranslation('base');
|
|
const clickDelete = (data: number[], selFcltDiv: string) => {
|
|
if (data.length > 0) {
|
|
if (selFcltDiv === "RNB") {
|
|
const handleConfirm = async () => {
|
|
rainChkDelete(data, searchYear);
|
|
};
|
|
confirmToast(t('isDeleteMsg'), handleConfirm);
|
|
} else {
|
|
const handleConfirm = async () => {
|
|
rswtChkDelete(data, searchYear);
|
|
};
|
|
confirmToast(t('isDeleteMsg'), handleConfirm);
|
|
}
|
|
}
|
|
};
|
|
const chkUpdateTable = (selFcltDiv: string) => {
|
|
if (selFcltDiv === "RNB") {
|
|
if (updateRainDetail && updateRainDetail.length > 0) {
|
|
rainChkDetilUpdate(updateRainDetail, searchYear);
|
|
} else {
|
|
toast.error("수정을 원하는 행을 선택하고 저장버튼을 눌러주세요 ");
|
|
}
|
|
} else {
|
|
if (updateRswtDetail && updateRswtDetail.length > 0) {
|
|
rswtChkDetilsUpdate(updateRswtDetail, searchYear);
|
|
} else {
|
|
toast.error("수정을 원하는 행을 선택하고 저장버튼을 눌러주세요 ");
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ContentsDiv>
|
|
<div className="grid grid-cols-4 gap-4 ">
|
|
<div className="col-span-4">
|
|
<Title title={"지도점검 결과 등록"} />
|
|
<SearchDiv>
|
|
<SearchFormLeft>
|
|
<div className="col-span-2 flex flex-row space-x-2">
|
|
<Label className="w-48 mt-2 text-xl text-gray-600">
|
|
{"지도점검년도"}
|
|
</Label>
|
|
<SelectBox
|
|
className="w-full h-full text-2xl"
|
|
label=""
|
|
selectClass={""}
|
|
selectArray={yearOptions}
|
|
value={searchYear}
|
|
onSelectValue={(val: string | number) => {
|
|
setSearchYear(String(val));
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="col-span-2 flex flex-row space-x-2">
|
|
<Label className="w-28 mt-2 text-xl text-gray-600">
|
|
{"시설구분"}
|
|
</Label>
|
|
<SelectBox
|
|
className={"w-full h-full text-2xl"}
|
|
label={""}
|
|
selectClass={""}
|
|
selectArray={rainChkgdn.fcltDiv}
|
|
onSelectValue={(val: string | number) => {
|
|
if (val === "RST") rswtChkPolInit();
|
|
setSelFcltDiv(String(val));
|
|
}}
|
|
value={selFcltDiv ?? rainChkgdn.fcltDiv[0]?.val}
|
|
/>
|
|
</div>
|
|
<div className="col-span-2 flex flex-row space-x-2">
|
|
<Label className="w-28 mt-2 text-xl text-gray-600">
|
|
{"시설명"}
|
|
</Label>
|
|
<SearchInput
|
|
className={"w-full h-full text-2xl"}
|
|
label={""}
|
|
textValue={fcltNm || ""}
|
|
setText={setFcltNm}
|
|
/>
|
|
</div>
|
|
</SearchFormLeft>
|
|
<SearchFormRight className="w-2/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
|
|
<div className="space-y">
|
|
<div className="flex flex-row space-x-2">
|
|
<Button
|
|
size={"sm"}
|
|
onClick={() => {
|
|
cellClick();
|
|
}}
|
|
>
|
|
조회
|
|
</Button>
|
|
<Button
|
|
size={"sm"}
|
|
onClick={() => {
|
|
clickDelete(deleteIdx, selFcltDiv);
|
|
}}
|
|
disabled={delAuthrtYn === 'N'}
|
|
>
|
|
삭제
|
|
</Button>
|
|
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
size={"sm"}
|
|
onClick={() => {
|
|
chkUpdateTable(selFcltDiv);
|
|
}}
|
|
disabled={mdfcnAuthrtYn === 'N'}
|
|
>
|
|
저장
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom" sideOffset={5}>
|
|
<h2 className="text-xl">
|
|
아래 테이블에 선택을 체크하면 입력셀이 활성화 됩니다.
|
|
</h2>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
|
|
<Button
|
|
size={"sm"}
|
|
onClick={() => {
|
|
setIsRegExcel(!isRegExcel);
|
|
}}
|
|
disabled={regAuthrtYn === 'N'}
|
|
>
|
|
결과등록
|
|
</Button>
|
|
<Button color="green" size={"sm"} onClick={excelClick}>
|
|
양식받기
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</SearchFormRight>
|
|
</SearchDiv>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-6 gap-4 ">
|
|
<div className="col-span-6">
|
|
<ListDiv>
|
|
{selFcltDiv === "RNB" ? (
|
|
<RainChkgdTable
|
|
deleteData={setDeleteIdx}
|
|
detailUp={setUpdateRainDetail}
|
|
handleClick={handleClick}
|
|
rainChkData={rainChkgdn.rainChk}
|
|
pageNation={rainPageNation}
|
|
onPageChange={rainPageChange}
|
|
pageCount={rainChkgdn.rainChkCount}
|
|
readonly={mdfcnAuthrtYn === 'N'}
|
|
/>
|
|
) : (
|
|
<RswtChkgdTable
|
|
detaiRswtlUpdate={setUpdateRSwtDetail}
|
|
deleteRswtData={setDeleteIdx}
|
|
handleRswtClick={handleClick}
|
|
rswtChkData={rswtChkgdn.rswtChkRes}
|
|
pageNation={rswtPageNation}
|
|
onPageChange={rswtPageChange}
|
|
pageCount={rswtChkgdn.rswtChkCount}
|
|
readonly={mdfcnAuthrtYn === 'N'}
|
|
/>
|
|
)}
|
|
</ListDiv>
|
|
</div>
|
|
</div>
|
|
<UiModal
|
|
open={isModal.open}
|
|
onOpenChange={(open: boolean) => {
|
|
setIsModal((prev) => ({ ...prev, open }));
|
|
}}
|
|
bodyClass={"w-[80vw] max-w-none"}
|
|
body={
|
|
<ChkgdModal
|
|
type={selFcltDiv}
|
|
obj={isModal.data}
|
|
setIsModal={(open) => setIsModal((prev) => ({ ...prev, open }))}
|
|
readonly={mdfcnAuthrtYn === 'N' ? false : true}
|
|
/>
|
|
}
|
|
></UiModal>
|
|
<UiModal
|
|
open={isRegExcel}
|
|
onOpenChange={setIsRegExcel}
|
|
bodyClass={"w-[30vw] max-w-none"}
|
|
body={
|
|
<ChkgdExcel
|
|
type={selFcltDiv}
|
|
setIsRegExcel={setIsRegExcel}
|
|
setYearChange={(year) => {
|
|
setSearchYear(year);
|
|
}}
|
|
></ChkgdExcel>
|
|
}
|
|
/>
|
|
<Toaster position="top-center" />
|
|
</ContentsDiv>
|
|
);
|
|
}
|