ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

temp

Browse Source
This commit is contained in:
leedj312
2025-04-01 11:25:58 +09:00
parent fb338598ef
commit b8d93f1b8b
8 changed files with 386 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx
+13 -14
View File
@@ -1,6 +1,6 @@
'use client'
import { useWrStore } from "@/app/store";
import type { bdstType, rainRuseBd, TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg"
import type { RainyInfoResponse, 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 { ContentsDiv, ScrollArea, SearchDiv, SearchFormLeft, SearchFormRight, SearchInput, Title, UiModal, UiTable } from "@common/business_components";
@@ -22,25 +22,26 @@ export const headMakeColSpan = (upHeadList: TableUpperProps[]) => {
</>)
}
export default function Home() {
const { rain, code,init } = useWrStore((state) => {
const { rain, code,init } = useWrStore((state) => {
return state
});
const {bdstObj, rainRuseObj } =rain
const [rinBdstForm, setRinBdstForm] = useState <rainRuseBd[]> ();
const [bdstTable, setbdstTable] = useState <bdstType[]> ();
const {bdstObj, rainRes } =rain
const [rainForm, setRainForm] = useState <RainyInfoResponse> ();
const [bdstTable, setbdstTable] = useState <RainyInfoResponse[]> ();
const nodeList = headMakeColSpan(rain.upHeadList);
useEffect(() => {
if (!rain.isInit) {
init();
}
}, [rain.isInit,init]);
useEffect ( () => {
if(code.sggCd.length>0){
const table= bdstObj.map((item) => {
const table = rainRes.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(
@@ -49,15 +50,13 @@ export default function Home() {
cityText:cityText
})
})
setbdstTable(table)
}
}, [code,bdstObj]);
const cellClick: (val: number | undefined) => void = (val) => {
let data
}, [code,rainRes]);
const cellClick: (val: number ) => void = (val) => {
if((bdstTable ?? []).length > 0) {
data =rainRuseObj.filter((item)=> item.bdstInfoFk===bdstTable?.[val]?.bdstInfoPk)
setRinBdstForm(data)
setRainForm(rainRes[val])
}
}
@@ -113,7 +112,7 @@ export default function Home() {
<ListDiv>
<ScrollArea>
<RainRegForm
data={rinBdstForm || []}
rainForm={rainForm || null}
isModal={false}
></RainRegForm>
</ScrollArea>
apps/wr/app/store/common/code/index.ts
+8
View File
@@ -6,6 +6,12 @@ type selectArray = {
val: string | number;
};
export const yn :selectArray[]=[
{val:'Y', text:'Y'},
{val:'N', text:'N'},
]
export const bdstUsgCd: selectArray[] = [
{ val: 1, text: "운동장" },
{ val: 2, text: "체육관" },
@@ -45,6 +51,7 @@ export type comCodeState = {
bdstUsgCd: selectArray[];
cityCd: selectArray[];
sggCd: selectArray[];
yn:selectArray[];
};
};
@@ -84,6 +91,7 @@ export const comCodeStateExport: comCodeState = {
bdstUsgCd: bdstUsgCd,
cityCd: [],
sggCd: [],
yn:yn
},
};
apps/wr/app/store/ruseFcltMng/fcltReg/bdstReg/index.tsx
-17
View File
@@ -1,16 +1,5 @@
import { getFectch } from "@/components/lib/api";
type bdstType={
bdstInfoPk: number,
ctpvCd: number,
sggCd: number,
daddr: string,
bdstNm: string,
frstArchPrmsnDt: string,
archArea : number
}
type TableUpperProps = {
id: string;
title: string;
@@ -54,12 +43,6 @@ export const bdstStateExport: bdstState = {
},
};
export const bdstActionsExport: (set: any) => bdstActions = (
set: any
) => {
apps/wr/app/store/ruseFcltMng/fcltReg/rainReg/index.tsx
+82 -137
View File
@@ -1,46 +1,47 @@
import { bdstUsgCd, comCodeStateExport } from "@/app/store/common/code";
import { getFectch } from "@/components/lib/api";
import { getFectch, postFectch, putFectch } from "@/components/lib/api";
type RainyInfoResponse = {
export type RainyInfoResponse = {
ctpvCd: string;
sggCd: string;
bdstNm: string;
daddr: string;
bdstUsgCd: string;
frstArchPrmsnDt: string;
archArea: string;
lawTrgtYn: string;
archChgArea: string;
bdstInfoPk: number;
reuseBuilding: Array<{
bdstUsgCd: any;
bdstRuseFcltPk: number;
bdstInfoFk: number;
operMngCd: number | null;
anlOperCst: number | null;
instlCmptnDt: string | null;
instlCst: number | null;
archChgPrmsnDt: string | null;
instlCstSprtYn: string | null;
instlCstSprtAmt: number | null;
grntchBdstCertYn: string | null;
grntchBdstCertNo: string | null;
grntchBdstCertGrd: string | null;
grntchBdstCertYr: string | null;
rainyObj: {
bdstReuseFcltFk:number|null;
pntfColKnd: string | null;
pntfColArea: number | null;
dtfcltCpct:number|null;
filtrTrtmfctCpct: number | null;
filtrTrtmfctYn: string | null;
filtrTrtmfctPrs: number | null;
annRnwtQty:number|null;
oilqMeasMthd:string|null
} | null;
}>;
reuseBuilding:reuseBuilding
};
export type reuseBuilding= Array<{
lawTrgtYn: string;
bdstUsgCd: string;
bdstRuseFcltPk: number;
bdstInfoFk: number;
operMngCd: number ;
anlOperCst: number ;
instlCmptnDt: Date ;
instlCst: number ;
archChgPrmsnDt: string ;
instlCstSprtYn: string ;
instlCstSprtAmt: number
grntchBdstCertYn: string
grntchBdstCertNo: string
grntchBdstCertGrd: string
grntchBdstCertYr: string
rainyObj:rainyObj| null
}>;
export type rainyObj= {
bdstReuseFcltFk:number
pntfColKnd: string | undefined
pntfColArea: number | undefined
dtfcltCpct:number
filtrTrtmfctCpct: number | undefined
filtrTrtmfctYn: string| undefined
filtrTrtmfctPrs: string | undefined
annRnwtQty:number
oilqMeasMthd:string| undefined
};
export type TableUpperProps = {
id: string;
@@ -50,74 +51,19 @@ export type TableUpperProps = {
};
export type rainRuseBd={
bdstRuseFcltPk: number, // 건축물 재이용시설 기본키
bdstInfoFk: number, // 건축물 정보 외부키
operMngCd:number|null, // 운영관리 코드 tb_wr_bdst_ruse_fclt 삭제 요망
anlOperCst: number|null, // 연간운영비용 tb_wr_bdst_ruse_fclt 삭제 요망
instlCmptnDt: Date|null, // 설치완료 일시 tb_wr_bdst_ruse_fclt 1
instlCst: number|null, // 설치 비용 tb_wr_bdst_ruse_fclt 2
instlCstSprtAmt: number|null, // 설치비용지원금액 tb_wr_bdst_ruse_fclt 8
grntchBdstCertYn: string|null, // 녹색 기술 건축물 인증여부 tb_wr_bdst_ruse_fclt 9
grntchBdstCertNo: string|null, // 녹색 기술 건축물 인증번호 tb_wr_bdst_ruse_fclt 10
grntchBdstCertGrd: string|null, // 녹색 기술 건축물 인증등급 tb_wr_bdst_ruse_fclt 11
grntchBdstCertYr: string|null, // 녹색 기술 건축물 인증년도 tb_wr_bdst_ruse_fclt 12
bdstReuseFcltFk:number|null;
dtfcltCpct:number|null, // 저류오 용량 tb_wr_rnwtr_utztn_fclt 3-1
pntfColKnd: string|null, // 접수지점 종류 tb_wr_rnwtr_utztn_fclt 3
pntfColArea: number|null, // 접수지점 지역 tb_wr_rnwtr_utztn_fclt 4
filtrTrtmfctCpct: number|null, // 여과 처리시설 용량 tb_wr_rnwtr_utztn_fclt 5
filtrTrtmfctYn: string|null, // 여과 처리시설 유무 tb_wr_rnwtr_utztn_fclt 6
filtrTrtmfctPrs: number|null, // 여과 처리시설 공정 tb_wr_rnwtr_utztn_fclt 7
annRnwtQty:number|null; //연간 빗물량
oilqMeasMthd:string|null // 유량측정 방법
}
export type reuseBuilding = {
bdstRuseFcltPk: number, // 건축물 재이용시설 기본키
bdstInfoFk: number, // 건축물 정보 외부키
operMngCd:number|null, // 운영관리 코드 tb_wr_bdst_ruse_fclt 삭제 요망
anlOperCst: number|null, // 연간운영비용 tb_wr_bdst_ruse_fclt 삭제 요망
instlCmptnDt: Date|null, // 설치완료 일시 tb_wr_bdst_ruse_fclt 1
instlCst: number|null, // 설치 비용 tb_wr_bdst_ruse_fclt 2
instlCstSprtAmt: number|null, // 설치비용지원금액 tb_wr_bdst_ruse_fclt 8
grntchBdstCertYn: string|null, // 녹색 기술 건축물 인증여부 tb_wr_bdst_ruse_fclt 9
grntchBdstCertNo: string|null, // 녹색 기술 건축물 인증번호 tb_wr_bdst_ruse_fclt 10
grntchBdstCertGrd: string|null, // 녹색 기술 건축물 인증등급 tb_wr_bdst_ruse_fclt 11
grntchBdstCertYr: string|null, // 녹색 기술 건축물 인증년도 tb_wr_bdst_ruse_fclt 12
rainyObj:rainyObj
}
export type rainyObj ={
bdstReuseFcltFk:number|null;
dtfcltCpct:number|null, // 저류오 용량 tb_wr_rnwtr_utztn_fclt 3-1
pntfColKnd: string|null, // 접수지점 종류 tb_wr_rnwtr_utztn_fclt 3
pntfColArea: number|null, // 접수지점 지역 tb_wr_rnwtr_utztn_fclt 4
filtrTrtmfctCpct: number|null, // 여과 처리시설 용량 tb_wr_rnwtr_utztn_fclt 5
filtrTrtmfctYn: string|null, // 여과 처리시설 유무 tb_wr_rnwtr_utztn_fclt 6
filtrTrtmfctPrs: number|null, // 여과 처리시설 공정 tb_wr_rnwtr_utztn_fclt 7
annRnwtQty:number|null; //연간 빗물량
oilqMeasMthd:string|null // 유량측정 방법
}
export type bdstType = {
ctpvCd: string; // 시도
sggCd: string; // 시군구
daddr: string; // 위치
bdstUsgCd: string; // 건축물용도
frstArchPrmsnDt: string; // 최초건축허가일
archArea: string; // 건축면적
lawTrgtYn: string; // 법적의무대상여부
archChgPrmsnDt: string; // 건축변경 허가일시
archChgArea: string; // 변경 면적
bdstInfoPk: number;
bdstNm: string;
};
// export type bdstType = {
// ctpvCd: string; // 시도
// sggCd: string; // 시군구
// daddr: string; // 위치
// bdstUsgCd: string; // 건축물용도
// frstArchPrmsnDt: string; // 최초건축허가일
// archArea: string; // 건축면적
// lawTrgtYn: string; // 법적의무대상여부
// archChgPrmsnDt: string; // 건축변경 허가일시
// archChgArea: string; // 변경 면적
// bdstInfoPk: number;
// bdstNm: string;
// };
export const upHeadList: TableUpperProps[] = [
{ id: "cityText", title: "시도" },
@@ -133,6 +79,8 @@ export const upHeadList: TableUpperProps[] = [
{ id: "archChgArea", title: "면적", upName: "upChangeRe", upSequnce: 3 },
];
const rainRes: RainyInfoResponse[] = []
const bdstObj: bdstType[] =[]
const rainRuseObj: rainRuseBd[] = []
@@ -153,11 +101,14 @@ export type rainFacState = {
rainRuseObj: rainRuseBd[];
bdstObj: bdstType[];
selectYN: selectArray[];
rainRes:RainyInfoResponse[];
};
};
type rainFacSActions = {
init: () => void;
dataInit:( )=>void;
dataInit: () => void;
rainReg: (data: RainyInfoResponse) => void;
rainUpdate: (data: RainyInfoResponse) => void;
};
@@ -166,27 +117,13 @@ export type rainFacType = rainFacState & rainFacSActions;
export const rainFacStateExport: rainFacState = {
rain: {
isInit: false,
rainRes:rainRes,
upHeadList: upHeadList,
rainRuseObj: rainRuseObj,
bdstObj: bdstObj,
selectYN: selectYN,
},
};
console.log(comCodeStateExport.code.sggCd)
const chBdstUsgCd =(value:string|number)=>{
const data = bdstUsgCd.find((item)=>item.val===value)?.text
return data;
}
const chCityCd =(value:string|number)=>{
const data = bdstUsgCd.find((item)=>item.val===value)?.text
return data;
}
export const rainFacActionsExport: (set: any) => rainFacSActions = (
set: any
@@ -195,32 +132,13 @@ export const rainFacActionsExport: (set: any) => rainFacSActions = (
init: async() =>{
try {
// 파라이터 수정 통합관리자 =0, 시관리자=시코드, 시군구 관리자= 시군구 코드 를 세번째 파라미터로 지정 / 건축물 서치가 있을경우 4번째 파라미터로 던지기 즉 1/20/42(서울시)/영현빌딩 이런식으로)
const res = await getFectch('wr', "/reuseFc/rainyInfoList/1/20/42");
const result = res.flatMap(({ reuseBuilding = [] as RainyInfoResponse["reuseBuilding"], ...item }) =>
reuseBuilding.map(rb => {
const { bdstUsgCd, archChgPrmsnDt, rainyObj, ...restRb } = rb;
const bdstObj = {
...item,
bdstUsgCd: bdstUsgCd ? chBdstUsgCd(bdstUsgCd) ?? '' : '',
archChgPrmsnDt: archChgPrmsnDt ?? ''
} as bdstType;
const rainRuseObj = {
...restRb,
...rainyObj
} as rainRuseBd;
return { bdstObj, rainRuseObj };
})
);
const rainRes = await getFectch('wr', "/reuseFc/rainyInfoList/1/20/42");
// 여기서 상태 업데이트
return set((state: rainFacState) => ({
...state,
rain: {
...state.rain,
bdstObj: result.map((item: { bdstObj: any; }) => item.bdstObj),
rainRuseObj: result.map((item: { rainRuseObj: any; }) => item.rainRuseObj),
rainRes:rainRes,
isInit: false
}
}));
@@ -238,8 +156,35 @@ export const rainFacActionsExport: (set: any) => rainFacSActions = (
...state.rain,
isInit: false,
},
},
})
}),
rainReg:(data:RainyInfoResponse)=>
set(async(state:rainFacState) =>{
try{
const res= postFectch('/reuseFc/rainyInfo' , data)
}catch (e){
alert('등록이 오류입니다.')
}finally{
alert('등록이 완료되었습니다.')
}
}
),
rainUpdate:(data:RainyInfoResponse)=>
set(async(state:rainFacState) =>{
try{
const res= putFectch('/reuseFc/rainyInfo' , data)
}catch (e){
alert('업데이트 오류입니다.')
}finally{
alert('업데이트가 완료되었습니다.')
}
}
),
};
};
apps/wr/components/lib/type/zod/fcltReg/controlZod.ts
+72 -38
View File
@@ -1,67 +1,101 @@
import { z } from "zod";
export const rainZod = {
instlCmptnDt: z.date(),
instlCst: z.number(),
pntfColKnd: z.string(),
pntfColArea: z.number(),
filtrTrtmfctPrs: z.string(),
filtrTrtmfctYn: z.string(),
filtrTrtmfctCpct: z.string(),
instlCstSprtYn: z.string(),
instlCstSprtAmt: z.string(),
grntchCstSprtYn: z.string(),
grntchCstSprtCst: z.string(),
grntchBdstCertYn: z.string(),
grntchBdstCertYr: z.string(),
grntchBdstCertNo: z.string(),
grntchBdstCertGrd: z.string(),
export const rainZod =
{ ctpvCd: z.string(),
sggCd: z.string(),
bdstNm: z.string(),
daddr: z.string(),
frstArchPrmsnDt: z.date(),
archArea: z.number(),
archChgArea: z.string(),
bdstInfoPk: z.number(),
lawTrgtYn: z.string(),
bdstUsgCd: z.string(),
bdstRuseFcltPk: z.number(),
bdstInfoFk: z.number(),
operMngCd: z.number(),
anlOperCst: z.number(),
instlCmptnDt: z.date(),
instlCst: z.number(),
archChgPrmsnDt: z.string(),
instlCstSprtYn: z.string(),
instlCstSprtAmt: z.number(),
grntchBdstCertYn: z.string(),
grntchBdstCertNo: z.string(),
grntchBdstCertGrd: z.string(),
grntchBdstCertYr: z.string(),
bdstReuseFcltFk:z.number(),
pntfColKnd: z.string(),
pntfColArea: z.number(),
dtfcltCpct:z.number(),
filtrTrtmfctCpct: z.number(),
filtrTrtmfctYn: z.string(),
filtrTrtmfctPrs: z.string(),
annRnwtQty:z.number(),
oilqMeasMthd:z.string(),
}
// = {
// instlCmptnDt: z.date(),
// instlCst: z.number(),
// pntfColKnd: z.string(),
// pntfColArea: z.number(),
// filtrTrtmfctPrs: z.string(),
// filtrTrtmfctYn: z.string(),
// filtrTrtmfctCpct: z.number(),
// instlCstSprtYn: z.string(),
// instlCstSprtAmt: z.number(),
// grntchCstSprtYn: z.string(),
// // grntchCstSprtCst: z.string(),
// grntchBdstCertYn: z.string(),
// grntchBdstCertYr: z.string(),
// grntchBdstCertNo: z.string(),
// grntchBdstCertGrd: z.string(),
// }
export const rainDefZod= {
instlCmptnDt: new Date(),
instlCst: 0,
pntfColKnd: "",
pntfColArea: 0,
filtrTrtmfctYn: "N",
filtrTrtmfctCpct: "",
filtrTrtmfctYn: "Y",
filtrTrtmfctCpct: 0,
filtrTrtmfctPrs: "",
instlCstSprtYn: "",
instlCstSprtAmt: "",
instlCstSprtAmt: 0,
grntchCstSprtYn: "",
grntchCstSprtCst: "",
// grntchCstSprtCst: "",
grntchBdstCertYn: "",
grntchBdstCertYr: "",
grntchBdstCertNo: "",
grntchBdstCertGrd: "",
}
export const bdstZod ={
ctpvCd: z.string(), // 시도
sggCd: z.string(), // 시군구
daddr: z.string(), // 위치
bdstUsgCd: z.string(), // 건축물용도
frstArchPrmsnDt: z.string(), // 최초건축허가일
archArea: z.string(), // 건축면적
lawTrgtYn: z.string(), // 법적의무대상여부
archChgPrmsnDt: z.string(), // 건축변경 허가일시
archChgArea: z.string(), // 변경 면적
//bdstInfoPk: number;
bdstNm: z.string(),
}
// export const bdstZod ={
// ctpvCd: z.string(), // 시도
// sggCd: z.string(), // 시군구
// daddr: z.string(), // 위치
// bdstUsgCd: z.string(), // 건축물용도
// frstArchPrmsnDt: z.date(), // 최초건축허가일
// archArea: z.number(), // 건축면적
// lawTrgtYn: z.string(), // 법적의무대상여부
// // archChgPrmsnDt: z.string(), // 건축변경 허가일시
// // archChgArea: z.number(), // 변경 면적
// bdstNm: z.string(),
// }
export const bdstDefZod={
ctpvCd: '', // 시도
sggCd: '', // 시군구
daddr: '', // 위치
bdstUsgCd: '', // 건축물용도
frstArchPrmsnDt: '', // 최초건축허가일
archArea: '', // 건축면적
frstArchPrmsnDt: new Date(), // 최초건축허가일
archArea: 0, // 건축면적
lawTrgtYn: '', // 법적의무대상여부
archChgPrmsnDt: '', // 건축변경 허가일시
archChgArea: '', // 변경 면적
//bdstInfoPk: number;
// archChgPrmsnDt: '', // 건축변경 허가일시
// archChgArea: 0, // 변경 면적
bdstNm: '',
}
apps/wr/components/ui/form/fcltReg/bdstReg/component.tsx
+20 -10
View File
@@ -4,7 +4,7 @@ import { FormField, FormUi, SelectBox } from "@common/business_components";
import { Button, Input } from "@common/components";
import { useFieldArray } from "react-hook-form";
export default function BdstReg(form: any) {
export default function BdstReg(form: any ) {
const { code } = useWrStore((state) => {
return state;
});
@@ -34,7 +34,7 @@ export default function BdstReg(form: any) {
<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="grid grid-cols-6 gap-2 mt-4">
<div className="col-span-3">
<FormField
control={form.control}
@@ -65,7 +65,7 @@ export default function BdstReg(form: any) {
className={""}
selectClass={selectClass}
label={""}
selectArray={code.cityCd}
selectArray={code.sggCd }
onSelectValue={(val) => {
field.onChange(val);
}}
@@ -119,7 +119,7 @@ export default function BdstReg(form: any) {
className={""}
selectClass={selectClass}
label={""}
selectArray={code.cityCd}
selectArray={code.bdstUsgCd}
onSelectValue={(val) => {
field.onChange(val);
}}
@@ -136,10 +136,16 @@ export default function BdstReg(form: any) {
render={({ field }) => (
<FormUi label="최초건축허가일">
<Input
className=""
placeholder="1,000,000"
type="date"
{...field}
className=""
type="date"
onChange={(e) =>
field.onChange(
e.target.value ? new Date(e.target.value) : undefined
)
}
value={
field.value ? field?.value.toISOString().split("T")[0] : ""
}
/>
</FormUi>
)}
@@ -155,7 +161,11 @@ export default function BdstReg(form: any) {
className=""
placeholder="1,000,000"
type="number"
{...field}
{... field}
onChange={(e) => {
const value = e.target.value;
field.onChange(value === '' ? '' : Number(value));
}}
/>
</FormUi>
)}
@@ -171,7 +181,7 @@ export default function BdstReg(form: any) {
className={""}
selectClass={selectClass}
label={""}
selectArray={code.cityCd}
selectArray={code.yn}
onSelectValue={(val) => {
field.onChange(val);
}}
apps/wr/components/ui/form/fcltReg/rainReg/component.tsx
+155 -51
View File
@@ -9,73 +9,143 @@ import { FormUi } from "@common/business_components";
import { useWrStore } from "@/app/store";
import {
selectClass,
type rainRuseBd,
type RainyInfoResponse,
} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { useEffect } from "react";
import {
bdstDefZod,
bdstZod,
rainDefZod,
rainZod,
} from "@/components/lib/type/zod/fcltReg/controlZod";
import BdstReg from "../bdstReg/component";
import { DatePicker } from "@common/business_components";
export function RainRegForm({
data,
rainForm,
isModal,
}: {
data: rainRuseBd[];
rainForm: RainyInfoResponse | undefined;
isModal: boolean;
}) {
const formSchema = isModal
? z.object({ ...rainZod, ...bdstZod })
: z.object(rainZod);
const { rain, code } = useWrStore((state) => state);
const { rainFcltCd } = code;
useEffect(() => {
// console.log( " data ", data)
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 formSchema = z.object(rainZod);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: isModal
? { ...rainDefZod, ...bdstDefZod }
: { ...rainDefZod },
? {
...rainDefZod,
...bdstDefZod,
}
: {
...rainDefZod,
},
});
const { rain, code, rainReg, rainUpdate, init } = useWrStore(
(state) => state
);
const { rainFcltCd } = code;
useEffect(() => {
// console.log( " data ", data)
if (rainForm != null) {
const data = rainForm;
const selectedOption = rainFcltCd.find(
(item) =>
item.val ===
String(data?.reuseBuilding?.at(0)?.rainyObj?.pntfColKnd ?? "")
);
let formData;
if (data?.reuseBuilding?.at(0)) {
const rb = data.reuseBuilding?.at(0);
formData = {
...rb?.rainyObj,
...data.reuseBuilding?.at(0),
pntfColKnd: selectedOption ? String(selectedOption.val) : undefined,
};
form.reset(formData);
} else {
formData = {
ctpvCd: data.ctpvCd,
sggCd: data.sggCd,
bdstNm: data.bdstNm,
daddr: data.daddr,
frstArchPrmsnDt: new Date(data.frstArchPrmsnDt),
};
form.reset(formData);
}
}
}, [rainForm, rainFcltCd]);
// form 값이 변경될 때마다 로그 출력
useEffect(() => {
const subscription = form.watch((value) => {
console.log("form values changed:", value);
});
const subscription = form.watch((value) => {});
return () => subscription.unsubscribe();
}, [form]);
// 2. Define a submit handler.
function onSubmit(values: z.infer<typeof formSchema>) {
// Do something with the form values.
// ✅ This will be type-safe and validated.
console.log("valuesd");
console.log(values);
let regRainForm = { ...rainForm };
const raw = values;
const rawVal = {
ctpvCd: raw?.ctpvCd,
sggCd: raw?.sggCd,
daddr: raw?.daddr,
bdstNm: raw?.bdstNm,
frstArchPrmsnDt: raw?.frstArchPrmsnDt.toISOString(),
archArea: raw?.archArea + "",
};
// 1. 기본 정보 정리
if (isModal)
regRainForm = {...rawVal};
if(regRainForm?.reuseBuilding?.at(0)?.rainyObj){
const rainObj = regRainForm?.reuseBuilding?.at(0)?.rainyObj;
regRainForm.reuseBuilding[0].rainyObj = {
...rainObj,
pntfColKnd: raw.pntfColKnd || rainObj?.pntfColKnd,
pntfColArea: raw.pntfColArea || rainObj?.pntfColArea,
filtrTrtmfctCpct: raw.filtrTrtmfctCpct || rainObj?.filtrTrtmfctCpct,
filtrTrtmfctYn: raw.filtrTrtmfctYn || rainObj?.filtrTrtmfctYn,
filtrTrtmfctPrs: raw.filtrTrtmfctPrs || rainObj?.filtrTrtmfctPrs,
oilqMeasMthd: rainObj?.oilqMeasMthd,
};
regRainForm.reuseBuilding[0] = {
...rainForm.reuseBuilding[0],
instlCmptnDt: raw.instlCmptnDt,
instlCst: raw.instlCst || rainForm.reuseBuilding[0]?.instlCst,
instlCstSprtYn:
raw.instlCstSprtYn || rainForm.reuseBuilding[0]?.instlCstSprtYn,
instlCstSprtAmt:
raw.instlCstSprtAmt || rainForm.reuseBuilding[0]?.instlCstSprtAmt,
grntchBdstCertYn:
raw.grntchBdstCertYn || rainForm.reuseBuilding[0]?.grntchBdstCertYn,
grntchBdstCertYr:
raw.grntchBdstCertYr || rainForm.reuseBuilding[0]?.grntchBdstCertYr,
grntchBdstCertNo:
raw.grntchBdstCertNo || rainForm.reuseBuilding[0]?.grntchBdstCertNo,
grntchBdstCertGrd:
raw.grntchBdstCertGrd || rainForm.reuseBuilding[0]?.grntchBdstCertGrd,
bdstUsgCd: raw.bdstUsgCd || rainForm.reuseBuilding[0]?.bdstUsgCdd,
lawTrgtYn: raw.lawTrgtYn || rainForm.lawTrgtYn,
};
}
if (isModal) {
rainReg(regRainForm);
} else {
rainUpdate(regRainForm);
}
init();
}
const onSelectValue = (val: string) => {
console.log(val);
};
useEffect(() => {
console.log("form errors:", form.formState.errors);
}, [form.formState.errors]);
return (
<div className="">
<Form {...form}>
@@ -86,11 +156,19 @@ export function RainRegForm({
<h1 className="pl-3 text-xl col-span-10">
{isModal ? "○건축물 운영정보" : "○ 빗물이용시설 운영정보"}
</h1>
<Button className="mr-4 rounded-lg col-span-2">저장</Button>
<Button type="submit" 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> : <></>}
{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>
@@ -102,7 +180,7 @@ export function RainRegForm({
name="instlCmptnDt"
render={({ field }) => (
<FormUi label="설치완료일">
<Input
{/* <Input
className=""
type="date"
onChange={(e) =>
@@ -111,9 +189,20 @@ export function RainRegForm({
)
}
value={
field.value ? field?.value.toString().split("T")[0] : ""
field.value
? field?.value.toISOString().split("T")[0]
: ""
}
/>
/> */}
<DatePicker
mode={"single"}
field={{
value: new Date(field.value),
onChange: (date: Date | undefined) =>
field.onChange(date),
}}
selectClass={selectClass}
></DatePicker>
</FormUi>
)}
/>
@@ -130,6 +219,10 @@ export function RainRegForm({
placeholder="1,000,000"
type=""
{...field}
onChange={(e) => {
const value = e.target.value;
field.onChange(value === "" ? "" : Number(value));
}}
/>
</FormUi>
)}
@@ -158,7 +251,6 @@ export function RainRegForm({
selectArray={rainFcltCd}
onSelectValue={(val) => {
field.onChange(val);
onSelectValue(val);
}}
value={field.value}
/>
@@ -177,6 +269,10 @@ export function RainRegForm({
placeholder="1,000,000"
type=""
{...field}
onChange={(e) => {
const value = e.target.value;
field.onChange(value === "" ? "" : Number(value));
}}
/>
</FormUi>
)}
@@ -198,8 +294,8 @@ export function RainRegForm({
className={""}
selectClass={selectClass}
label={""}
selectArray={rain.selectYN}
onSelectValue={onSelectValue}
selectArray={code.yn}
onSelectValue={field.onChange}
{...field}
/>
</FormUi>
@@ -217,6 +313,10 @@ export function RainRegForm({
placeholder="1,000,000"
type=""
{...field}
onChange={(e) => {
const value = e.target.value;
field.onChange(value === "" ? "" : Number(value));
}}
/>
</FormUi>
)}
@@ -258,8 +358,8 @@ export function RainRegForm({
className={""}
selectClass={selectClass}
label={""}
selectArray={rain.selectYN}
onSelectValue={onSelectValue}
selectArray={code.yn}
onSelectValue={field.onChange}
value={field.value}
/>
</FormUi>
@@ -277,6 +377,10 @@ export function RainRegForm({
placeholder="1,000,000"
type=""
{...field}
onChange={(e) => {
const value = e.target.value;
field.onChange(value === "" ? "" : Number(value));
}}
/>
</FormUi>
)}
@@ -298,8 +402,8 @@ export function RainRegForm({
className={""}
selectClass={selectClass}
label={""}
selectArray={rain.selectYN}
onSelectValue={onSelectValue}
selectArray={code.yn}
onSelectValue={field.onChange}
value={field.value}
/>
</FormUi>
apps/wr/components/ui/modal/bdstReg/component.tsx
+36 -19
View File
@@ -4,10 +4,11 @@ import { useWrStore } from "@/app/store";
import {
selectClass,
type bdstType,
type RainyInfoResponse,
type selectArray,
} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { ScrollArea, SearchInput, SelectBox, UiTable } from "@common/business_components";
import { Button, Input } from "@common/components";
import { Button, Input, Label } from "@common/components";
import { useEffect, useState } from "react";
import { RainRegForm } from "../../form/fcltReg/rainReg/component";
@@ -16,33 +17,49 @@ export function BdstReg() {
return state;
});
const [bdstTable, setbdstTable] = useState<bdstType[]>();
const [rainBdstForm, setRainBdstForm] = useState<bdstType[] | undefined>();
type objSearchType = {
sgg: string;
city: string;
};
const [bdstTable, setbdstTable] = useState<RainyInfoResponse[]>();
const [rainBdstForm, setRainBdstForm] = useState<RainyInfoResponse | undefined>();
const { bdstObj, rainRuseObj } = rain;
const [selectSgg, setSelectSgg] = useState<selectArray[] | undefined>()
const [searchTxt, setSearchTxt] = useState<string>()
const [objSearch, setObjSearch] = useState<objSearchType>({sgg:"",city:""});
const getCity = (val: string ) => {
const data = code.sggCd
const getCity = (val: string) => {
const data = code.sggCd
.filter((item) => String(item.val).substring(0, 2) === val)
.map((item) => ({ ...item, val: String(item.val) })); // Ensure 'val' is a string
.map((item) => ({
val: String(item.val),
text: item.text // 한국어 텍스트
}));
setSelectSgg(data);
setObjSearch({ city:val , sgg:''})
};
const getSgg = (val: string | number) => {
console.log(val);
setObjSearch({...objSearch,sgg: String(val)})
};
const searchBdst=()=>{
if(objSearch.sgg===""){
alert('시도조건은 필수 입니다.')
}
}
useEffect(()=>{
// console.log("searchTxt ", searchTxt)
findBdst(searchTxt)
findBdst(searchTxt || "")
},[searchTxt])
useEffect(() => {
if (code.sggCd.length > 0) {
const table = bdst?.bdstBase?.map((item) => {
@@ -62,11 +79,8 @@ export function BdstReg() {
const tableClick: (val: number | undefined) => void = (val) => {
console.log("val , " ,val)
console.log("bdst , " ,bdst?.bdstBase[val])
if(val!==undefined && bdst?.bdstBase.length>0){
const data =bdst?.bdstBase[val]
console.log("data ", [data])
setRainBdstForm([data]);
}
}
@@ -74,9 +88,9 @@ export function BdstReg() {
const nodeList = headMakeColSpan(bdst.moUpHeadList);
return (
<>
<div className="grid grid-cols-12 gap-4">
<div className="grid grid-cols-12 gap-4 mt-4">
<SelectBox
className="col-span-3 col-start-4"
className="col-span-3 "
label={"시도"}
selectClass={selectClass}
selectArray={code.cityCd}
@@ -93,13 +107,16 @@ export function BdstReg() {
>
{" "}
</SelectBox>
<SearchInput
className="col-span-3 col-start-10"
<Label className="w-20 text-base text-gray-600 mt-4 text-right">건축물명</Label>
<Input className="w-full h-full text-2xl col-span-2 col-start-8" type="text" value={searchTxt} onChange={(e) => setSearchTxt(e.target.value)}/>
{/* <SearchInput
className="col-span-3 col-start-8"
label="건물명"
textValue={searchTxt}
setText={ setSearchTxt}
/>
/> */}
<Button className="rounded-lg" onClick={()=>{searchBdst()}}>조회</Button>
</div>
<div className="border-t border-gray-300 my-4"></div>
<div className="h-auto">
@@ -118,7 +135,7 @@ export function BdstReg() {
<div className="border-t border-gray-300 my-4"></div>
<ScrollArea className="h-[60vh]">
<div>
<RainRegForm data={rainBdstForm || []} isModal={true}></RainRegForm>
<RainRegForm rainForm={rainBdstForm ||undefined} isModal={true}></RainRegForm>
</div>
</ScrollArea>
</div>