시설현황 상세모달 입력폼 readonly로 변경

This commit is contained in:
jyha00
2025-06-24 14:21:10 +09:00
parent 0eb2b5bc6c
commit 41201f0af7
5 changed files with 640 additions and 561 deletions
+25 -12
View File
@@ -31,18 +31,18 @@ const bdstUsgCd: SelectDataType[] = [
{ val: '16', text: "기타" },
];
//빗물 집수면 종류 용도
const rainFcltCd = [
{ val: "1", text: "지붕" },
{ val: "2", text: "건물옥상" },
{ val: "3", text: "골프장 연못" },
{ val: "4", text: "운동장 바닥" },
{ val: "5", text: "운동장 지붕" },
{ val: "6", text: "주차장" },
{ val: "7", text: "태양광패널" },
{ val: "8", text: "연못" },
{ val: "9", text: "기타" },
{ val: "10", text: "확인불가" },
];
// const rainFcltCd = [
// { val: "1", text: "지붕" },
// { val: "2", text: "건물옥상" },
// { val: "3", text: "골프장 연못" },
// { val: "4", text: "운동장 바닥" },
// { val: "5", text: "운동장 지붕" },
// { val: "6", text: "주차장" },
// { val: "7", text: "태양광패널" },
// { val: "8", text: "연못" },
// { val: "9", text: "기타" },
// { val: "10", text: "확인불가" },
// ];
// 중수도 필수 원수종류
const rswtBdstType: SelectDataType[] = [
{ text: "숙박업", val: "17" },
@@ -138,6 +138,19 @@ export const buildingType = {
HTB:"HTB"
}
const rainFcltCd = [
{ val: "지붕", text: "지붕" },
{ val: "건물옥상", text: "건물옥상" },
{ val: "골프장 연못", text: "골프장 연못" },
{ val: "운동장 바닥", text: "운동장 바닥" },
{ val: "운동장 지붕", text: "운동장 지붕" },
{ val: "주차장", text: "주차장" },
{ val: "태양광패널", text: "태양광패널" },
{ val: "연못", text: "연못" },
{ val: "기타", text: "기타" },
{ val: "확인불가", text: "확인불가" },
];
export type comCodeState = {
code: {
isInit: boolean;
File diff suppressed because it is too large Load Diff
@@ -4,36 +4,36 @@ import { useWrStore } from "@/app/store";
import {
rainZod,
selectClass,
TEST_UUID,
type customRainBdst,
type customRainBdst
} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { DatePicker, FormUi } from "@common/business_components";
import { Form, FormField, SelectBox } from "@common/business_components/ui";
import { Button, Input } from "@common/components/ui";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } from "react";
import { useForm, useWatch, type UseFormReturn } from "react-hook-form";
import { z } from "zod";
import BdstReg from "../bdstReg/bdstReg";
import { formH1Class, formH2Class } from "@/components/lib/class/comClass";
import {
formatCommaNumber,
handleCommaNumberChange,
} from "@/components/lib/func/commom";
import { formH1Class, formH2Class } from "@/components/lib/class/comClass";
import { DatePicker, FormUi } from "@common/business_components";
import { Form, FormField, SelectBox } from "@common/business_components/ui";
import { Button, Input } from "@common/components/ui";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import BdstReg from "../bdstReg/bdstReg";
export default function RainRegForm({
rainForm,
isModal,
readonly = false
}: {
rainForm: customRainBdst;
isModal: boolean;
readonly?: boolean;
}) {
const { code, rainBdstReg, rainBdstUpdate, rain } = useWrStore(
(state) => state
);
const { rainFcltCd } = code;
const defaultValues: z.infer<typeof rainZod> = rainZod.parse({});
const form = useForm<z.infer<typeof rainZod>>({
resolver: zodResolver(rainZod),
defaultValues: defaultValues,
@@ -60,8 +60,8 @@ export default function RainRegForm({
typeof item?.grntchBdstCertYr === "string"
? item?.grntchBdstCertYr
: "", // null → ""
rainObj: {
...item?.rainObj,
rainyObj: {
...item?.rainyObj,
},
})),
};
@@ -84,8 +84,7 @@ export default function RainRegForm({
useEffect(() => {
const subscription = form.watch((value) => {
});
console.log("subscription:", subscription)
return () => subscription.unsubscribe();
}, [form]);
@@ -105,7 +104,6 @@ export default function RainRegForm({
if (rainZod) form.reset(cleanRainData(rainForm));
}, [rainForm]);
return (
<div className="!mx-[1.6rem] !p-0r">
<Form {...form}>
@@ -115,9 +113,11 @@ export default function RainRegForm({
<h1 className="text-2xl font-medium text-label col-span-10">
{isModal ? "건축물 운영정보" : "빗물이용시설 정보"}
</h1>
<Button type="submit" className="col-start-12 col-span-1" size={"sm"}>
저장
</Button>
{!readonly && (
<Button type="submit" className="col-start-12 col-span-1" size={"sm"}>
저장
</Button>
)}
</div>
</div>
{isModal && rainForm != undefined ? <BdstReg form={form} /> : <></>}
@@ -149,6 +149,7 @@ export default function RainRegForm({
onChange: (date) => field.onChange(date),
}}
selectClass={"w-full"}
readOnly={readonly}
/>
</FormUi>
)}
@@ -166,9 +167,10 @@ export default function RainRegForm({
placeholder="1,000,000"
type="text"
onChange={(e) => {
handleCommaNumberChange(e, field.onChange);
if (!readonly) handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
/>
</FormUi>
)}
@@ -195,8 +197,9 @@ export default function RainRegForm({
selectClass={selectClass}
label={""}
selectArray={rainFcltCd}
onSelectValue={field.onChange}
onSelectValue={readonly ? () => { } : field.onChange}
value={field.value ?? rainFcltCd[0]?.val}
readOnly={readonly}
/>
</FormUi>
)}
@@ -213,9 +216,10 @@ export default function RainRegForm({
placeholder="1,000,000"
type="text"
onChange={(e) => {
handleCommaNumberChange(e, field.onChange);
if (!readonly) handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
/>
</FormUi>
)}
@@ -238,8 +242,9 @@ export default function RainRegForm({
selectClass={selectClass}
label={""}
selectArray={code.yn}
onSelectValue={field.onChange}
onSelectValue={readonly ? () => { } : field.onChange}
value={field.value ?? code.yn[0]?.val}
readOnly={readonly}
/>
</FormUi>
)}
@@ -256,7 +261,7 @@ export default function RainRegForm({
placeholder="1,000,000"
type="text"
onChange={(e) => {
handleCommaNumberChange(e, field.onChange);
if (!readonly) handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={filtrTrtmfctYn !== "Y"}
@@ -276,7 +281,9 @@ export default function RainRegForm({
placeholder="1,000,000"
type=""
value={field.value ?? ""}
onChange={field.onChange}
onChange={(e) => {
if (!readonly) handleCommaNumberChange(e, field.onChange);
}}
readOnly={filtrTrtmfctYn !== "Y"}
/>
</FormUi>
@@ -304,8 +311,9 @@ export default function RainRegForm({
selectClass={selectClass}
label={""}
selectArray={code.yn}
onSelectValue={field.onChange}
onSelectValue={readonly ? () => { } : field.onChange}
value={field.value ?? code.yn[0]?.val}
readOnly={readonly}
/>
</FormUi>
)}
@@ -322,7 +330,7 @@ export default function RainRegForm({
placeholder="1,000,000"
type="text"
onChange={(e) => {
handleCommaNumberChange(e, field.onChange);
if (!readonly) handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={instlCstSprtYn !== "Y"}
@@ -348,7 +356,7 @@ export default function RainRegForm({
selectClass={selectClass}
label={""}
selectArray={code.yn}
onSelectValue={field.onChange}
onSelectValue={readonly ? () => { } : field.onChange}
value={field.value ?? code.yn[0]?.val}
/>
</FormUi>
@@ -366,7 +374,9 @@ export default function RainRegForm({
placeholder="2024"
type=""
value={field.value ?? ""}
onChange={field.onChange}
onChange={(e) => {
if (!readonly) field.onChange(e);
}}
readOnly={grntchBdstCertYn !== "Y"}
/>
</FormUi>
@@ -384,7 +394,9 @@ export default function RainRegForm({
placeholder="ab1234678"
type=""
value={field.value ?? ""}
onChange={field.onChange}
onChange={(e) => {
if (!readonly) field.onChange(e);
}}
readOnly={grntchBdstCertYn !== "Y"}
/>
</FormUi>
@@ -402,7 +414,9 @@ export default function RainRegForm({
placeholder="A"
type=""
value={field.value ?? ""}
onChange={field.onChange}
onChange={(e) => {
if (!readonly) field.onChange(e);
}}
readOnly={grntchBdstCertYn !== "Y"}
/>
</FormUi>
@@ -28,9 +28,11 @@ import BdstReg from "../bdstReg/bdstReg";
export default function RswtrRegForm({
rswtForm,
isModal,
readonly = false
}: {
rswtForm: customRswtBdst;
isModal: boolean;
readonly?: boolean;
}) {
const { rswt, code, rswtBdstUpdate, rswtBdstReg } = useWrStore(
(state) => state
@@ -78,6 +80,10 @@ export default function RswtrRegForm({
};
};
useEffect(()=>{
console.log("rswtForm:", rswtForm)
}, [rswtForm])
useEffect(() => {
console.log("form errors:", form.formState.errors);
}, [form.formState.errors]);
@@ -105,13 +111,11 @@ export default function RswtrRegForm({
<h1 className="text-2xl font-medium text-label col-span-10">
건축물 운영정보
</h1>
<Button
size={"sm"}
type="submit"
className="col-start-12 col-span-1"
>
저장
</Button>
{!readonly && (
<Button type="submit" className="col-start-12 col-span-1" size={"sm"}>
저장
</Button>
)}
</div>
</div>
@@ -141,6 +145,7 @@ export default function RswtrRegForm({
onChange: (date) => field.onChange(date),
}}
selectClass={"w-full"}
readOnly={readonly}
/>
</FormUi>
)}
@@ -158,9 +163,10 @@ export default function RswtrRegForm({
placeholder="1,000,000"
type="text"
onChange={(e) => {
handleCommaNumberChange(e, field.onChange);
if (!readonly) handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
/>
</FormUi>
)}
@@ -179,9 +185,10 @@ export default function RswtrRegForm({
placeholder="1,000,000"
type="text"
onChange={(e) => {
handleCommaNumberChange(e, field.onChange);
if (!readonly) handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
/>
</FormUi>
)}
@@ -199,9 +206,10 @@ export default function RswtrRegForm({
placeholder="1,000,000"
type="text"
onChange={(e) => {
handleCommaNumberChange(e, field.onChange);
if (!readonly) handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
/>
</FormUi>
)}
@@ -225,8 +233,9 @@ export default function RswtrRegForm({
type="number"
value={field.value ?? 0}
onChange={(e) => {
field.onChange(Number(e.target.value));
if (!readonly) field.onChange(Number(e.target.value));
}}
readOnly={readonly}
/>
</FormUi>
)}
@@ -243,8 +252,9 @@ export default function RswtrRegForm({
label={""}
selectClass={selectClass}
selectArray={code.orgwtKndCd}
onSelectValue={field.onChange}
onSelectValue={readonly ? () => { } : field.onChange}
value={field.value ?? code.orgwtKndCd[0]?.val}
readOnly={readonly}
/>
</FormUi>
)}
@@ -261,7 +271,10 @@ export default function RswtrRegForm({
placeholder=""
type=""
value={field.value ?? ""}
onChange={field.onChange}
onChange={(e) => {
if (!readonly) field.onChange
}}
readOnly={readonly}
/>
</FormUi>
)}
@@ -287,8 +300,9 @@ export default function RswtrRegForm({
selectClass={selectClass}
label={""}
selectArray={code.yn}
onSelectValue={field.onChange}
onSelectValue={readonly ? () => { } : field.onChange}
value={field.value ?? code.yn[0]?.val}
readOnly={readonly}
/>
</FormUi>
)}
@@ -305,7 +319,7 @@ export default function RswtrRegForm({
placeholder="1,000,000"
type="text"
onChange={(e) => {
handleCommaNumberChange(e, field.onChange);
if (!readonly) handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={instlCstSprtYn !== "Y"}
@@ -331,8 +345,9 @@ export default function RswtrRegForm({
selectClass={selectClass}
label={""}
selectArray={code.yn}
onSelectValue={field.onChange}
onSelectValue={readonly ? () => { } : field.onChange}
value={field.value ?? code.yn[0]?.val}
readOnly={readonly}
/>
</FormUi>
)}
@@ -350,7 +365,9 @@ export default function RswtrRegForm({
type="text"
{...field}
value={field.value ?? ""}
onChange={field.onChange}
onChange={(e) => {
if (!readonly) field.onChange(e)
}}
readOnly={grntchBdstCertYn !== "Y"}
/>
</FormUi>
@@ -368,7 +385,9 @@ export default function RswtrRegForm({
placeholder="ab1234678"
type=""
value={field.value ?? ""}
onChange={field.onChange}
onChange={(e) => {
if (!readonly) field.onChange(e)
}}
readOnly={grntchBdstCertYn !== "Y"}
/>
</FormUi>
@@ -386,7 +405,9 @@ export default function RswtrRegForm({
placeholder="A"
type=""
value={field.value ?? ""}
onChange={field.onChange}
onChange={(e) => {
if (!readonly) field.onChange(e)
}}
readOnly={grntchBdstCertYn !== "Y"}
/>
</FormUi>
@@ -90,10 +90,10 @@ export default function SttnDetailModal({
: "온배수시설 상세정보"}></Title>
<ScrollArea className={detailData.data.length>0?"h-[80vh]":"h-[70vh]"} >
{type === "RNB" ? (
<RainRegForm rainForm={formObj as customRainBdst} isModal={false} />
<RainRegForm rainForm={formObj as customRainBdst} isModal={false} readonly={true}/>
) : type === "RST" ? (
<RswtrRegForm rswtForm={formObj as customRswtBdst} isModal={false} />
) : (<HtdflRegForm htdflForm={formObj as customHtdflBdst} isModal={false} />)}
<RswtrRegForm rswtForm={formObj as customRswtBdst} isModal={false} readonly={true}/>
) : (<HtdflRegForm htdflForm={formObj as customHtdflBdst} isModal={false} readonly={true}/>)}
{detailData.data.length>0?
<UiTable