신규등록 ui 완성 이벤트 추가 필요
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
import { BaseLayout } from "@common/components";
|
||||
import "./globals.css";
|
||||
import { StoreProvider } from "./store";
|
||||
import { MainDiv } from "@common/business_components";
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
@@ -13,7 +14,9 @@ export default function RootLayout({
|
||||
<body>
|
||||
<StoreProvider>
|
||||
<BaseLayout>
|
||||
<MainDiv>
|
||||
{children}
|
||||
</MainDiv>
|
||||
</BaseLayout>
|
||||
</StoreProvider>
|
||||
</body>
|
||||
|
||||
@@ -3,7 +3,8 @@ import { useWrStore } from "@/app/store";
|
||||
import type { bdstType, rainRuseBd, TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg"
|
||||
import { RainRegForm } from "@/components/ui/form/fcltReg/rainReg/component";
|
||||
import { BdstReg } from "@/components/ui/modal/bdstReg/component";
|
||||
import { ScrollArea, SearchDiv, SearchInput, Title, UiModal, UiTable } from "@common/business_components";
|
||||
import { ContentsDiv, ScrollArea, SearchDiv, SearchFormLeft, SearchFormRight, SearchInput, Title, UiModal, UiTable } from "@common/business_components";
|
||||
import ListDiv from "@common/business_components/ui/list_div";
|
||||
import { Button, TableHead, TableRow } from "@common/components";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
@@ -28,11 +29,7 @@ export default function Home() {
|
||||
const [rinBdstForm, setRinBdstForm] = useState <rainRuseBd[]> ();
|
||||
const [bdstTable, setbdstTable] = useState <bdstType[]> ();
|
||||
const nodeList = headMakeColSpan(rain.upHeadList);
|
||||
const headName = () => {
|
||||
return (
|
||||
<h1 className="pl-3 text-xl">○건축물 목록</h1>
|
||||
)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (!rain.isInit) {
|
||||
@@ -67,37 +64,63 @@ export default function Home() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-4 ">
|
||||
<div className='col-span-2'>
|
||||
<Title title={"빗물이용시설 등록"}/>
|
||||
<div className="m-8">
|
||||
<SearchDiv >
|
||||
<div className='w-4/5 grid grid-cols-12 gap-1 mx-4'>
|
||||
<SearchInput className='col-span-3 my-7' label="건물명" textValue={""} setText={function (val: string): void {
|
||||
throw new Error("Function not implemented.");
|
||||
} } />
|
||||
<ContentsDiv>
|
||||
<div className="grid grid-cols-2 gap-4 ">
|
||||
<div className="col-span-2">
|
||||
<Title title={"빗물이용시설 등록"} />
|
||||
<SearchDiv>
|
||||
<SearchFormLeft>
|
||||
<SearchInput
|
||||
className="col-span-3 my-7"
|
||||
label="건물명"
|
||||
textValue={""}
|
||||
setText={function (val: string): void {
|
||||
throw new Error("Function not implemented.");
|
||||
}}
|
||||
/>
|
||||
{/* <div className='w-4/5 grid grid-cols-12 gap-1 mx-4'>
|
||||
</div> */}
|
||||
</SearchFormLeft>
|
||||
<SearchFormRight>
|
||||
<Button className="mr-4 rounded-lg">조회</Button>
|
||||
<UiModal
|
||||
butNm="신규등록"
|
||||
title="건축물 시설 등록(빗물이용시설)"
|
||||
body={<BdstReg></BdstReg>}
|
||||
bodyClass="sm:max-w-7xl"
|
||||
/>
|
||||
{/* <Button className='mr-4 rounded-lg' onClick={()=>bdstRegModal('ㅁ',divTest())}>신규등록</Button> */}
|
||||
</SearchFormRight>
|
||||
{/* <div className='w-1/5 flex items-center justify-end'>
|
||||
</div> */}
|
||||
</SearchDiv>
|
||||
</div>
|
||||
<div className='w-1/5 flex items-center justify-end'>
|
||||
<Button className='mr-4 rounded-lg'>조회</Button>
|
||||
<UiModal butNm="신규등록" title='건축물 시설 등록(빗물이용시설)' body={<BdstReg></BdstReg>} bodyClass="sm:max-w-7xl" />
|
||||
{/* <Button className='mr-4 rounded-lg' onClick={()=>bdstRegModal('ㅁ',divTest())}>신규등록</Button> */}
|
||||
<div className="colsapn-1">
|
||||
<ListDiv>
|
||||
<UiTable
|
||||
tableData={bdstTable || []}
|
||||
headlist={rain.upHeadList}
|
||||
pageSize={100}
|
||||
total={10}
|
||||
headName={"○건축물 목록"}
|
||||
cellClick={cellClick}
|
||||
>
|
||||
{nodeList}
|
||||
</UiTable>
|
||||
</ListDiv>
|
||||
</div>
|
||||
<div className="colsapn-1 max-h-full ovreflow-y-scroll">
|
||||
<ListDiv>
|
||||
<ScrollArea>
|
||||
<RainRegForm
|
||||
data={rinBdstForm || []}
|
||||
isModal={false}
|
||||
></RainRegForm>
|
||||
</ScrollArea>
|
||||
</ListDiv>
|
||||
</div>
|
||||
</SearchDiv>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="colsapn-1 pl-11">
|
||||
<UiTable tableData={bdstTable || []} headlist={rain.upHeadList} pageSize={100} total={10} headName={headName()} cellClick={cellClick}>
|
||||
{nodeList}
|
||||
</UiTable>
|
||||
</div>
|
||||
<div className="colsapn-1 pr-11 max-h-full ovreflow-y-scroll">
|
||||
<ScrollArea>
|
||||
<RainRegForm data={rinBdstForm || []} isModal={false} ></RainRegForm>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ContentsDiv>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useWrStore } from "@/app/store";
|
||||
import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import { FormField, FormUi, SelectBox } from "@common/business_components";
|
||||
import { Input } from "@common/components";
|
||||
import { Button, Input } from "@common/components";
|
||||
|
||||
export default function BdstReg(form: any) {
|
||||
const { code } = useWrStore((state) => {
|
||||
@@ -10,157 +10,165 @@ export default function BdstReg(form: any) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-6 gap-2 mt-4 pl-6">
|
||||
<div className="col-span-3">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="ctpvCd"
|
||||
render={({ field }) => (
|
||||
<FormUi label="시도">
|
||||
<SelectBox
|
||||
className={""}
|
||||
selectClass={selectClass}
|
||||
label={""}
|
||||
selectArray={code.cityCd}
|
||||
onSelectValue={(val) => {
|
||||
field.onChange(val);
|
||||
}}
|
||||
value={field.value}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
|
||||
<h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 pl-6">
|
||||
건축물 시설 정보
|
||||
</h1>
|
||||
<div className="grid grid-cols-6 gap-2 mt-4 pl-6">
|
||||
<div className="col-span-3">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="ctpvCd"
|
||||
render={({ field }) => (
|
||||
<FormUi label="시도">
|
||||
<SelectBox
|
||||
className={""}
|
||||
selectClass={selectClass}
|
||||
label={""}
|
||||
selectArray={code.cityCd}
|
||||
onSelectValue={(val) => {
|
||||
field.onChange(val);
|
||||
}}
|
||||
value={field.value}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="sggCd"
|
||||
render={({ field }) => (
|
||||
<FormUi label="시군구">
|
||||
<SelectBox
|
||||
className={""}
|
||||
selectClass={selectClass}
|
||||
label={""}
|
||||
selectArray={code.cityCd}
|
||||
onSelectValue={(val) => {
|
||||
field.onChange(val);
|
||||
}}
|
||||
value={field.value}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="sggCd"
|
||||
render={({ field }) => (
|
||||
<FormUi label="시군구">
|
||||
<SelectBox
|
||||
className={""}
|
||||
selectClass={selectClass}
|
||||
label={""}
|
||||
selectArray={code.cityCd}
|
||||
onSelectValue={(val) => {
|
||||
field.onChange(val);
|
||||
}}
|
||||
value={field.value}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="bdstNm"
|
||||
render={({ field }) => (
|
||||
<FormUi label="건축물명">
|
||||
<Input
|
||||
className=""
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
{...field}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="daddr"
|
||||
render={({ field }) => (
|
||||
<FormUi label="위치">
|
||||
<Input
|
||||
className=""
|
||||
placeholder="1,000,000"
|
||||
type="search"
|
||||
{...field}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
|
||||
|
||||
<div className="grid grid-cols-6 gap-2 mt-4 ">
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="bdstUsgCd"
|
||||
render={({ field }) => (
|
||||
<FormUi label="건축물용도">
|
||||
<SelectBox
|
||||
className={""}
|
||||
selectClass={selectClass}
|
||||
label={""}
|
||||
selectArray={code.cityCd}
|
||||
onSelectValue={(val) => {
|
||||
field.onChange(val);
|
||||
}}
|
||||
value={field.value}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="frstArchPrmsnDt"
|
||||
render={({ field }) => (
|
||||
<FormUi label="최초건축허가일">
|
||||
<Input
|
||||
className=""
|
||||
placeholder="1,000,000"
|
||||
type="date"
|
||||
{...field}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="bdstNm"
|
||||
render={({ field }) => (
|
||||
<FormUi label="건축물명">
|
||||
<Input
|
||||
className=""
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
{...field}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="archArea"
|
||||
render={({ field }) => (
|
||||
<FormUi label="건축면적(m³)">
|
||||
<Input
|
||||
className=""
|
||||
placeholder="1,000,000"
|
||||
type="number"
|
||||
{...field}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="daddr"
|
||||
render={({ field }) => (
|
||||
<FormUi label="위치">
|
||||
<Input
|
||||
className=""
|
||||
placeholder="1,000,000"
|
||||
type="search"
|
||||
{...field}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name=""
|
||||
render={({ field }) => (
|
||||
<FormUi label="법정의무대상여부">
|
||||
<SelectBox
|
||||
className={""}
|
||||
selectClass={selectClass}
|
||||
label={""}
|
||||
selectArray={code.cityCd}
|
||||
onSelectValue={(val) => {
|
||||
field.onChange(val);
|
||||
}}
|
||||
value={field.value}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="bdstUsgCd"
|
||||
render={({ field }) => (
|
||||
<FormUi label="건축물용도">
|
||||
<SelectBox
|
||||
className={""}
|
||||
selectClass={selectClass}
|
||||
label={""}
|
||||
selectArray={code.cityCd}
|
||||
onSelectValue={(val) => {
|
||||
field.onChange(val);
|
||||
}}
|
||||
value={field.value}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="frstArchPrmsnDt"
|
||||
render={({ field }) => (
|
||||
<FormUi label="최초건축허가일">
|
||||
<Input
|
||||
className=""
|
||||
placeholder="1,000,000"
|
||||
type="date"
|
||||
{...field}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="archArea"
|
||||
render={({ field }) => (
|
||||
<FormUi label="건축면적(m³)">
|
||||
<Input
|
||||
className=""
|
||||
placeholder="1,000,000"
|
||||
type="number"
|
||||
{...field}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name=""
|
||||
render={({ field }) => (
|
||||
<FormUi label="법정의무대상여부">
|
||||
<SelectBox
|
||||
className={""}
|
||||
selectClass={selectClass}
|
||||
label={""}
|
||||
selectArray={code.cityCd}
|
||||
onSelectValue={(val) => {
|
||||
field.onChange(val);
|
||||
}}
|
||||
value={field.value}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4">
|
||||
중축, 개축, 증축
|
||||
</h1>
|
||||
<div className="flex justify-end">
|
||||
<Button className="mr-4 rounded-lg ">이력추가</Button>
|
||||
</div>
|
||||
<div className="border-b border-gray-300 my-4"> </div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,37 +7,55 @@ import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { FormUi } from "@common/business_components";
|
||||
import { useWrStore } from "@/app/store";
|
||||
import { selectClass, type rainRuseBd, } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import {
|
||||
selectClass,
|
||||
type rainRuseBd,
|
||||
} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import { useEffect } from "react";
|
||||
import { bdstDefZod, bdstZod, rainDefZod, rainZod } from "@/components/lib/type/zod/fcltReg/controlZod";
|
||||
import {
|
||||
bdstDefZod,
|
||||
bdstZod,
|
||||
rainDefZod,
|
||||
rainZod,
|
||||
} from "@/components/lib/type/zod/fcltReg/controlZod";
|
||||
import BdstReg from "../bdstReg/component";
|
||||
|
||||
export function RainRegForm({data,isModal}:{data:rainRuseBd[], isModal:boolean} ) {
|
||||
|
||||
console.log(isModal)
|
||||
export function RainRegForm({
|
||||
data,
|
||||
isModal,
|
||||
}: {
|
||||
data: rainRuseBd[];
|
||||
isModal: boolean;
|
||||
}) {
|
||||
console.log(isModal);
|
||||
const formSchema = isModal
|
||||
? z.object({ ...rainZod, ...bdstZod })
|
||||
: z.object(rainZod)
|
||||
? z.object({ ...rainZod, ...bdstZod })
|
||||
: z.object(rainZod);
|
||||
|
||||
const { rain ,code} = useWrStore((state) => state);
|
||||
const {rainFcltCd } = code
|
||||
const { rain, code } = useWrStore((state) => state);
|
||||
const { rainFcltCd } = code;
|
||||
useEffect(() => {
|
||||
if (data && data.length > 0) {
|
||||
console.log(data)
|
||||
const selectedOption = rainFcltCd.find(item => item.val === String(data[0]?.pntfColKnd ?? ""));
|
||||
const formData = {
|
||||
...data[0],
|
||||
pntfColKnd: selectedOption ? selectedOption.val : "",
|
||||
instlCmptnDt: data[0]?.instlCmptnDt ? new Date(data[0].instlCmptnDt) : undefined
|
||||
};
|
||||
form.reset(formData);
|
||||
}
|
||||
}, [data, rainFcltCd]);
|
||||
if (data && data.length > 0) {
|
||||
console.log(data);
|
||||
const selectedOption = rainFcltCd.find(
|
||||
(item) => item.val === String(data[0]?.pntfColKnd ?? "")
|
||||
);
|
||||
const formData = {
|
||||
...data[0],
|
||||
pntfColKnd: selectedOption ? selectedOption.val : "",
|
||||
instlCmptnDt: data[0]?.instlCmptnDt
|
||||
? new Date(data[0].instlCmptnDt)
|
||||
: undefined,
|
||||
};
|
||||
form.reset(formData);
|
||||
}
|
||||
}, [data, rainFcltCd]);
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: isModal ? {...rainDefZod, ...bdstDefZod} : {...rainDefZod}
|
||||
|
||||
defaultValues: isModal
|
||||
? { ...rainDefZod, ...bdstDefZod }
|
||||
: { ...rainDefZod },
|
||||
});
|
||||
|
||||
// form 값이 변경될 때마다 로그 출력
|
||||
@@ -65,13 +83,18 @@ export function RainRegForm({data,isModal}:{data:rainRuseBd[], isModal:boolean}
|
||||
{/* <div className="flex justify-between items-center mx-3"> */}
|
||||
<div>
|
||||
<div className="grid grid-cols-12">
|
||||
<h1 className="pl-3 text-xl col-span-10">○ 빗물이용시설 운영정보</h1>
|
||||
<Button className='mr-4 rounded-lg col-span-2'>저장</Button>
|
||||
<h1 className="pl-3 text-xl col-span-10">
|
||||
{isModal ? "○건축물 운영정보" : "○ 빗물이용시설 운영정보"}
|
||||
</h1>
|
||||
<Button className="mr-4 rounded-lg col-span-2">저장</Button>
|
||||
</div>
|
||||
</div>
|
||||
{isModal ? <BdstReg form={form}></BdstReg> : <></>}
|
||||
{isModal ? <h1 className="pl-3 text-xl col-span-10 mt-4 ">○ 빗물이용시설 운영정보 </h1> : <></>}
|
||||
<h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 ">
|
||||
기본정보
|
||||
</h1>
|
||||
|
||||
<div className="grid grid-cols-4 gap-2 mt-4 pl-6">
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
@@ -82,8 +105,14 @@ export function RainRegForm({data,isModal}:{data:rainRuseBd[], isModal:boolean}
|
||||
<Input
|
||||
className=""
|
||||
type="date"
|
||||
onChange={(e) => field.onChange(e.target.value ? new Date(e.target.value) : undefined)}
|
||||
value={field.value ? field?.value.toString().split('T')[0] : ""}
|
||||
onChange={(e) =>
|
||||
field.onChange(
|
||||
e.target.value ? new Date(e.target.value) : undefined
|
||||
)
|
||||
}
|
||||
value={
|
||||
field.value ? field?.value.toString().split("T")[0] : ""
|
||||
}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
@@ -106,9 +135,7 @@ export function RainRegForm({data,isModal}:{data:rainRuseBd[], isModal:boolean}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isModal?<BdstReg></BdstReg> :<></>}
|
||||
</div>
|
||||
<div className=" my-4">
|
||||
<h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 pl-6">
|
||||
빗물이용시설 정보
|
||||
|
||||
@@ -1,70 +1,100 @@
|
||||
'use client'
|
||||
"use client";
|
||||
import { headMakeColSpan } from "@/app/ruseFcltMng/fcltReg/rainReg/page";
|
||||
import { useWrStore } from "@/app/store";
|
||||
import { selectClass, type bdstType } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import { ScrollArea, SelectBox, UiTable } from "@common/business_components";
|
||||
import {
|
||||
selectClass,
|
||||
type bdstType,
|
||||
} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import { ScrollArea, SearchInput, SelectBox, UiTable } from "@common/business_components";
|
||||
import { Button, Input } from "@common/components";
|
||||
import { useEffect, useState } from "react";
|
||||
import { RainRegForm } from "../../form/fcltReg/rainReg/component";
|
||||
|
||||
export function BdstReg(){
|
||||
export function BdstReg() {
|
||||
const { rain, code, init } = useWrStore((state) => {
|
||||
return state;
|
||||
});
|
||||
|
||||
const { rain, code,init } = useWrStore((state) => {
|
||||
return state
|
||||
});
|
||||
const [bdstTable, setbdstTable] = useState<bdstType[]>();
|
||||
const [rainBdstForm, setRainBdstForm] = useState<[]>();
|
||||
const { bdstObj, rainRuseObj } = rain;
|
||||
const getCity = (val: string | number) => {
|
||||
console.log(val);
|
||||
};
|
||||
|
||||
const[bdstTable, setbdstTable] = useState <bdstType[]> ();
|
||||
const [rainBdstForm, setRainBdstForm] = useState<[]>()
|
||||
const {bdstObj, rainRuseObj } =rain
|
||||
const getCity =(val:string|number)=>{
|
||||
const getSgg = (val: string | number) => {
|
||||
console.log(val);
|
||||
};
|
||||
|
||||
console.log(val)
|
||||
}
|
||||
useEffect(() => {
|
||||
if (code.sggCd.length > 0) {
|
||||
const table = bdstObj.map((item) => {
|
||||
const sggText = code.sggCd.find(
|
||||
(cd) => cd.val.toString() === item.sggCd
|
||||
)?.text;
|
||||
const cityText = code.cityCd.find(
|
||||
(cd) => cd.val.toString() === item.ctpvCd
|
||||
)?.text;
|
||||
return { ...item, sggText: sggText, cityText: cityText };
|
||||
});
|
||||
setbdstTable(table);
|
||||
}
|
||||
}, [code, bdstObj]);
|
||||
|
||||
const getSgg =(val:string|number)=>{
|
||||
const cellClick = () => {};
|
||||
const nodeList = headMakeColSpan(rain.upHeadList);
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-12 gap-4 pb-4">
|
||||
<SelectBox
|
||||
className="col-span-3 col-start-4"
|
||||
label={"시도"}
|
||||
selectClass={selectClass}
|
||||
selectArray={code.cityCd}
|
||||
onSelectValue={getCity}
|
||||
>
|
||||
{" "}
|
||||
</SelectBox>
|
||||
<SelectBox
|
||||
className="col-span-3"
|
||||
label={"시군구"}
|
||||
selectClass={selectClass}
|
||||
selectArray={code.sggCd}
|
||||
onSelectValue={getSgg}
|
||||
>
|
||||
{" "}
|
||||
</SelectBox>
|
||||
<SearchInput
|
||||
className="col-span-3 col-start-10"
|
||||
label="건물명"
|
||||
textValue={""}
|
||||
setText={function (val: string): void {
|
||||
throw new Error("Function not implemented.");
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="h-auto">
|
||||
<div>
|
||||
<UiTable
|
||||
tableData={bdstTable || []}
|
||||
headlist={rain.upHeadList}
|
||||
pageSize={-10}
|
||||
total={-1}
|
||||
headName={undefined}
|
||||
cellClick={cellClick}
|
||||
>
|
||||
{nodeList}
|
||||
</UiTable>
|
||||
</div>
|
||||
<div >
|
||||
|
||||
console.log(val)
|
||||
}
|
||||
|
||||
useEffect ( () => {
|
||||
if(code.sggCd.length>0){
|
||||
const table= bdstObj.map((item) => {
|
||||
const sggText= code.sggCd.find((cd)=>cd.val.toString() === item.sggCd )?.text;
|
||||
const cityText= code.cityCd.find((cd)=>cd.val.toString() === item.ctpvCd )?.text;
|
||||
return(
|
||||
{...item,
|
||||
sggText:sggText,
|
||||
cityText:cityText
|
||||
})
|
||||
})
|
||||
setbdstTable(table)
|
||||
}
|
||||
}, [code,bdstObj]);
|
||||
|
||||
const cellClick = ()=>{
|
||||
|
||||
}
|
||||
const nodeList = headMakeColSpan(rain.upHeadList)
|
||||
return(
|
||||
<>
|
||||
<h2>건축물조회</h2> < h2/>
|
||||
<div className="grid grid-cols-12 gap-2">
|
||||
|
||||
<SelectBox className='col-span-3' label={''} selectClass={selectClass} selectArray={code.cityCd} onSelectValue={getCity } > </SelectBox>
|
||||
<SelectBox className='col-span-3' label={""} selectClass={selectClass} selectArray={code.sggCd} onSelectValue={getSgg }> </SelectBox>
|
||||
<Input className='col-span-3'></Input>
|
||||
<Button className='col-span-1'> 조회</Button>
|
||||
<ScrollArea className="h-[60vh]">
|
||||
<div>
|
||||
<RainRegForm data={rainBdstForm || []} isModal={true}></RainRegForm>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
<div>
|
||||
<UiTable tableData={bdstTable || []} headlist={rain.upHeadList} pageSize={-10} total={-1} headName={undefined} cellClick={cellClick}>
|
||||
{nodeList}
|
||||
</UiTable>
|
||||
</div>
|
||||
<div>
|
||||
<ScrollArea>
|
||||
<RainRegForm data={rainBdstForm || []} isModal={true} ></RainRegForm>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user