83 lines
3.6 KiB
TypeScript
83 lines
3.6 KiB
TypeScript
import { useWrStore } from '@/app/store';
|
|
import type { customHtdflBdst } from '@/app/store/ruseFcltMng/fcltReg/htdflReg';
|
|
import { tableData } from '@/components/lib/func/commom';
|
|
import SttnDetailModal from '@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal';
|
|
import { Title, UiTable } from '@common/business_components/ui';
|
|
import { HeadMakeColSpan } from '@common/business_components/ui/table/HeadMakeColSpan';
|
|
import React, { useEffect, useState } from 'react'
|
|
interface Props {
|
|
seletectedLayerNm: string;
|
|
viewMode: 'list' | 'detail' | 'nothing';
|
|
onFeatureSelect: (feature: any) => void;
|
|
onClose: () => void;
|
|
htdflDetailModal: { isOpen: boolean; data: customHtdflBdst | undefined };
|
|
}
|
|
const HtdflFacility = ({ seletectedLayerNm, viewMode, onFeatureSelect, onClose, htdflDetailModal }: Props) => {
|
|
const { code, htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state);
|
|
const { htdflSttnRes, htdflSttnResCount } = htdflSttn;
|
|
const [htdflTable, setHtdflTable] = useState<customHtdflBdst[]>();
|
|
const [htdflPage, setHtdflPage] = useState(1)
|
|
// 온배수시설 cellClick 이벤트 (상세정보)
|
|
const htdflCellClick = (index: number | undefined) => {
|
|
if (index !== undefined && htdflTable !== undefined) {
|
|
onFeatureSelect(htdflTable[index]);
|
|
onClose();
|
|
}
|
|
};
|
|
useEffect(() => {
|
|
if (seletectedLayerNm !== '온배수시설' || viewMode != 'list') return;
|
|
if (!htdflSttn.isInit) {
|
|
initHtdfl(false, 1, "20", "0", '', code.cityCd, code.sggCd);
|
|
}
|
|
}, [code.cityCd, code.sggCd, htdflSttn.isInit, initHtdfl]);
|
|
|
|
useEffect(() => {
|
|
if (seletectedLayerNm !== '온배수시설' || viewMode != 'list') return;
|
|
const data = tableData(htdflSttnRes, { code });
|
|
const chData = data
|
|
.map((item: any) => ({
|
|
...item,
|
|
...item.reuseBuilding[0],
|
|
...item.reuseBuilding[0].htdflObj,
|
|
chBuildingYn: item.chgBuilding[0]?.bdstChgNm !== null ? "Y" : "N",
|
|
}))
|
|
.filter((item: any) => item.htdflObj !== undefined);
|
|
setHtdflTable(chData);
|
|
}, [code, htdflSttnRes, htdflSttn.htdflSttHeadList]);
|
|
|
|
useEffect(() => {
|
|
if (seletectedLayerNm !== '온배수시설' || viewMode != 'list') return;
|
|
htdflSttnSearch(true, htdflPage, "20", '', '', code.cityCd, code.sggCd);
|
|
}, [code.cityCd, code.sggCd, htdflPage, htdflSttnSearch]);
|
|
return (
|
|
viewMode == 'detail' ? (
|
|
<SttnDetailModal type={"HTB"} formObj={htdflDetailModal.data as customHtdflBdst} />
|
|
) : (
|
|
<div style={{ overflowY: 'auto' }}>
|
|
<div className="flex justify-between items-center">
|
|
<Title title="온배수시설 현황" />
|
|
{/* <div className="flex gap-2 mt-8">
|
|
<Button className={btnClass} color="primary" onClick={excelClick}>
|
|
엑셀다운로드
|
|
</Button>
|
|
</div> */}
|
|
</div>
|
|
<UiTable
|
|
headName={[]}
|
|
tableData={htdflTable || []}
|
|
headlist={htdflSttn.htdflSttHeadList}
|
|
pageSize={20}
|
|
total={htdflSttnResCount || 0}
|
|
cellClick={(index: number | undefined) => {
|
|
htdflCellClick(index ?? undefined);
|
|
}}
|
|
onPageChange={setHtdflPage}
|
|
>
|
|
<HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />
|
|
</UiTable>
|
|
</div>
|
|
)
|
|
)
|
|
}
|
|
|
|
export default HtdflFacility |