457 lines
16 KiB
TypeScript
457 lines
16 KiB
TypeScript
import React from 'react';
|
|
import { MS_SWAGE_MHL_USE_CODES, MS_SWAGE_PPL_CODES, MS_SWAGE_PPL_USE_CODES } from '../components/common/table';
|
|
import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox';
|
|
import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
|
|
import { SelectBox } from '@common/business_components/ui';
|
|
import { Button, Input, Label } from '@common/components';
|
|
|
|
// 기본정보 '구분' 선택 목록
|
|
export const BASIC_TYPES = [
|
|
{ val: "tb_ms_swage_ppl", text: "하수관로" },
|
|
{ val: "tb_il_swage_prcs_fclt", text: "하수처리시설" },
|
|
{ val: "tb_ms_swage_prcs_zone", text: "하수처리구역" },
|
|
{ val: "tb_ms_swage_mhl", text: "하수맨홀" },
|
|
{ val: "tb_ms_swage_pmstn", text: "하수펌프장" },
|
|
{ val: "tb_ms_stofcbr", text: "우수토실" },
|
|
];
|
|
|
|
interface BasicTabProps {
|
|
open?: boolean;
|
|
basicType: string;
|
|
city: number;
|
|
sgg: number;
|
|
start1: string;
|
|
start2: string;
|
|
end1: string;
|
|
end2: string;
|
|
var1: string;
|
|
var2: string;
|
|
yearFilter: { start: string; end: string; };
|
|
handleSearch: () => void;
|
|
// onOpenChange?: (open: boolean) => void;
|
|
// onFeatureSelect?: (row: any) => void;
|
|
// setTableData?: (data: any[]) => void;
|
|
// setTableCount?: (count: number) => void;
|
|
setBasicType: (type: string) => void;
|
|
setCity: (city: number) => void;
|
|
setSgg: (sgg: number) => void;
|
|
setYearFilter: (filter: { start: string; end: string }) => void;
|
|
setStart1: (value: string) => void;
|
|
setStart2: (value: string) => void;
|
|
setEnd1: (value: string) => void;
|
|
setEnd2: (value: string) => void;
|
|
setVar1: (value: string) => void;
|
|
setVar2: (value: string) => void;
|
|
}
|
|
|
|
const BasicTab: React.FC<BasicTabProps> = ({
|
|
// open,
|
|
basicType,
|
|
city,
|
|
sgg,
|
|
start1,
|
|
start2,
|
|
end1,
|
|
end2,
|
|
var1,
|
|
var2,
|
|
yearFilter,
|
|
handleSearch,
|
|
// onOpenChange,
|
|
// onFeatureSelect,
|
|
// setTableData,
|
|
// setTableCount,
|
|
setBasicType,
|
|
setCity,
|
|
setSgg,
|
|
setYearFilter,
|
|
setStart1,
|
|
setStart2,
|
|
setEnd1,
|
|
setEnd2,
|
|
setVar1,
|
|
setVar2,
|
|
}) => {
|
|
return (
|
|
<div className="relative border rounded-lg p-6 mt-4 w-full h-[10vh]">
|
|
{/* 구분 */}
|
|
<div className="mb-3 flex items-center justify-between gap-4">
|
|
<div className="flex items-center">
|
|
<SelectBox
|
|
className="w-[150px] mr-3"
|
|
selectClass="rounded-lg bg-white"
|
|
label="구분"
|
|
selectArray={BASIC_TYPES}
|
|
onSelectValue={(value: string | number) =>
|
|
setBasicType(String(value))
|
|
}
|
|
value={basicType}
|
|
selectContentClass="z-[101]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/* 분기처리: 하수관로 */}
|
|
{basicType === "tb_ms_swage_ppl" && (
|
|
<div className="mb-6">
|
|
<div className="mb-2 flex items-center">
|
|
{/* 설치년도 */}
|
|
<YearRangeSelectBox
|
|
start={yearFilter.start}
|
|
end={yearFilter.end}
|
|
onChange={(range) =>
|
|
setYearFilter({
|
|
...yearFilter,
|
|
start: range.start,
|
|
end: range.end,
|
|
})
|
|
}
|
|
startLabel="설치년도"
|
|
endLabel=""
|
|
/>
|
|
{/* 용도 */}
|
|
<SelectBox
|
|
className="ml-8 w-60 mr-8 z-[102]"
|
|
selectClass="rounded-lg bg-white text-xl"
|
|
label="용도"
|
|
selectArray={MS_SWAGE_PPL_USE_CODES}
|
|
value={var1}
|
|
onSelectValue={(val) => {
|
|
setVar1(String(val));
|
|
}}
|
|
selectContentClass="z-[101]"
|
|
/>
|
|
{/* 재질 */}
|
|
<SelectBox
|
|
className="w-60 mr-8 z-[102]"
|
|
selectClass="rounded-lg bg-white text-xl"
|
|
label="재질"
|
|
selectArray={MS_SWAGE_PPL_CODES}
|
|
value={var2}
|
|
onSelectValue={(val) => {
|
|
setVar2(String(val));
|
|
}}
|
|
selectContentClass="z-[101]"
|
|
/>
|
|
{/* 관경 */}
|
|
<Label className="mr-2 w-auto text-xl text-gray-600">관경(mm)</Label>
|
|
<Input
|
|
className="w-[60px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={var1}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setVar1(val);
|
|
}}
|
|
/>
|
|
<span className="mx-2 text-xl font-semibold">~</span>
|
|
<Input
|
|
className="mr-8 w-[60px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={end1}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setEnd1(val);
|
|
}}
|
|
/>
|
|
{/* 연장 */}
|
|
<Label className="mr-2 w-auto text-xl text-gray-600">연장(m)</Label>
|
|
<Input
|
|
className="w-[60px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={start2}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setStart2(val);
|
|
}}
|
|
/>
|
|
<span className="mx-2 text-xl font-semibold">~</span>
|
|
<Input
|
|
className="mr-8 w-[60px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={end2}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setEnd2(val);
|
|
}}
|
|
/>
|
|
{/* 조회 버튼 */}
|
|
<div className="flex-1 flex justify-end">
|
|
<Button className="text-base py-2" onClick={handleSearch}>조회</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* 분기처리: 하수처리시설 */}
|
|
{basicType === "tb_il_swage_prcs_fclt" && (
|
|
<div className="mb-3">
|
|
{/* 가동개시일자 */}
|
|
<div className="mb-2 flex items-center">
|
|
<YearRangeSelectBox
|
|
start={yearFilter.start}
|
|
end={yearFilter.end}
|
|
onChange={(range) =>
|
|
setYearFilter({
|
|
...yearFilter,
|
|
start: range.start,
|
|
end: range.end,
|
|
})
|
|
}
|
|
startLabel="가동개시일자"
|
|
endLabel=""
|
|
/>
|
|
{/* 시설용량 */}
|
|
<Label className="ml-8 mr-2 w-auto text-xl text-gray-600">시설용량(㎥/d)</Label>
|
|
<Input
|
|
className="w-[60px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={start1}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setStart1(val);
|
|
}}
|
|
/>
|
|
<span className="mx-2 text-xl font-semibold">~</span>
|
|
<Input
|
|
className="mr-8 w-[60px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={end1}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setEnd1(val);
|
|
}}
|
|
/>
|
|
{/* 처리구역 면적 */}
|
|
<Label className="mr-2 w-auto text-xl text-gray-600">처리구역 면적(m²)</Label>
|
|
<Input
|
|
className="w-[60px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={start2}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setStart2(val);
|
|
}}
|
|
/>
|
|
<span className="mx-2 text-xl font-semibold">~</span>
|
|
<Input
|
|
className="mr-8 w-[60px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={end2}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setEnd2(val);
|
|
}}
|
|
/>
|
|
{/* 하수처리시설명 */}
|
|
<Label className="mr-2 w-auto text-xl text-gray-600">하수처리시설명</Label>
|
|
<Input
|
|
className="mr-8 w-[100px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={var1}
|
|
onChange={(e) => {
|
|
setVar1(e.target.value);
|
|
}}
|
|
/>
|
|
{/* 조회 버튼 */}
|
|
<div className="flex-1 flex justify-end">
|
|
<Button className="text-base py-2" onClick={handleSearch}>조회</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* 분기처리: 하수처리구역 */}
|
|
{basicType === "tb_ms_swage_prcs_zone" && (
|
|
<div className="mb-3">
|
|
<div className="mb-2 flex items-center">
|
|
<SidoSigunguSelectBox
|
|
sido={city}
|
|
sigungu={sgg}
|
|
onSidoChange={(sidoId) => {
|
|
setCity(sidoId);
|
|
setSgg(0);
|
|
}}
|
|
onSigunguChange={setSgg}
|
|
/>
|
|
<Label className="mr-2 w-auto text-xl text-gray-600">하수처리구역명</Label>
|
|
<Input
|
|
className="mr-8 w-[100px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={var1}
|
|
onChange={(e) => {
|
|
setVar1(e.target.value);
|
|
}}
|
|
/>
|
|
<Label className="mr-2 w-auto text-xl text-gray-600">하수처리시설명</Label>
|
|
<Input
|
|
className='!text-xl w-[120px] placeholder:text-center mr-8'
|
|
placeholder="입력"
|
|
value={var2}
|
|
onChange={(e) => {
|
|
setVar2(e.target.value);
|
|
}}
|
|
/>
|
|
{/* 조회 버튼 */}
|
|
<div className="flex-1 flex justify-end">
|
|
<Button className="text-base py-2" onClick={handleSearch}>조회</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* 분기처리: 하수맨홀 */}
|
|
{basicType === "tb_ms_swage_mhl" && (
|
|
<div className="mb-3">
|
|
<div className="mb-2 flex items-center">
|
|
{/* 설치년도 */}
|
|
<YearRangeSelectBox
|
|
start={yearFilter.start}
|
|
end={yearFilter.end}
|
|
onChange={(range) =>
|
|
setYearFilter({
|
|
...yearFilter,
|
|
start: range.start,
|
|
end: range.end,
|
|
})
|
|
}
|
|
startLabel="설치년도"
|
|
endLabel=""
|
|
/>
|
|
{/* 용도 */}
|
|
<SelectBox
|
|
className="ml-8 w-60 mr-8 z-[102]"
|
|
selectClass="rounded-lg bg-white text-xl"
|
|
label="용도"
|
|
selectArray={MS_SWAGE_MHL_USE_CODES}
|
|
value={var1}
|
|
onSelectValue={(val) => {
|
|
setVar1(String(val));
|
|
}}
|
|
selectContentClass="z-[101]"
|
|
/>
|
|
{/* 하수맨홀 구경 */}
|
|
<Label className="mr-2 w-auto text-xl text-gray-600">구경(mm)</Label>
|
|
<Input
|
|
className="w-[100px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={start1}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setStart1(val);
|
|
}}
|
|
/>
|
|
<span className="mx-2 text-xl font-semibold">~</span>
|
|
<Input
|
|
className="mr-8 w-[100px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={end1}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setEnd1(val);
|
|
}}
|
|
/>
|
|
{/* 조회 버튼 */}
|
|
<div className="flex-1 flex justify-end">
|
|
<Button className="text-base py-2" onClick={handleSearch}>조회</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* 분기처리: 하수펌프장 */}
|
|
{basicType === "tb_ms_swage_pmstn" && (
|
|
<div className="mb-3">
|
|
{/* 설치년도 */}
|
|
<div className="flex items-center mb-2">
|
|
<YearRangeSelectBox
|
|
start={yearFilter.start}
|
|
end={yearFilter.end}
|
|
onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
|
|
startLabel="설치년도"
|
|
endLabel=""
|
|
/>
|
|
{/* 일일처리용량 - 오수맨홀 */}
|
|
<Label className="ml-8 mr-2 w-auto text-xl text-gray-600">일일처리용량(㎥)</Label>
|
|
<Input
|
|
className="w-[100px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={start1}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setStart1(val);
|
|
}}
|
|
/>
|
|
<span className="mx-2 text-xl font-semibold">~</span>
|
|
<Input
|
|
className="mr-8 w-[100px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={end1}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setEnd1(val);
|
|
}}
|
|
/>
|
|
{/* 양수능력 - 우수맨홀 */}
|
|
<Label className="mr-2 w-auto text-xl text-gray-600">
|
|
양수능력(m²/d)
|
|
</Label>
|
|
<Input
|
|
className="w-[100px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={start2}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setStart2(val);
|
|
}}
|
|
/>
|
|
<span className="mx-2 text-xl font-semibold">~</span>
|
|
<Input
|
|
className="mr-8 w-[100px] !text-xl placeholder:text-center"
|
|
placeholder="입력"
|
|
value={end2}
|
|
onChange={(e) => {
|
|
// 숫자만 입력 허용
|
|
const val = e.target.value.replace(/[^0-9]/g, "");
|
|
setEnd2(val);
|
|
}}
|
|
/>
|
|
{/* 조회 버튼 */}
|
|
<div className="flex-1 flex justify-end">
|
|
<Button className="text-base py-2" onClick={handleSearch}>조회</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* 분기처리: 우수토실? 토구? */}
|
|
{basicType === "tb_ms_stofcbr" && (
|
|
<div className="mb-3">
|
|
{/* 설치년도 */}
|
|
<div className="flex items-center mb-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>
|
|
);
|
|
};
|
|
|
|
export default React.memo(BasicTab); |