신규등록 ui 완성 이벤트 추가 필요

This commit is contained in:
leedj312
2025-03-28 09:40:44 +09:00
parent 4c2d069b59
commit a4350c9788
5 changed files with 357 additions and 266 deletions
+3
View File
@@ -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>
</>
);
}