신규등록 ui 완성 이벤트 추가 필요
This commit is contained in:
leedj312
@@ -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">
|
||||
빗물이용시설 정보
|
||||
|
||||
Reference in New Issue
Block a user