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

온배수 현황 수질 작업중

Browse Source
This commit is contained in:
leedj312
2025-07-21 17:59:55 +09:00
parent 990dffc11c
commit 069e489d03
2 changed files with 338 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/store/ruseFcltMng/fcltReg/htdflReg/index.tsx
+11 -11
View File
@@ -42,17 +42,17 @@ const hdtflObjSchema = z.object({
utztnUsg: z
.string()
.min(1, { message: validationMessages.required("이용 용도") }),
grssClfg: z.number().default(0), // Measurements, 0 is fine as default
combResdch: z.number().default(0), // Measurements, 0 is fine as default
trbt: z.number().default(0), // Measurements, 0 is fine as default
bod: z.number().default(0), // Measurements, 0 is fine as default
smll: z.number().default(0), // Measurements, 0 is fine as default
crmty: z.number().default(0), // Measurements, 0 is fine as default
tn: z.number().default(0), // Measurements, 0 is fine as default
tph: z.number().default(0), // Measurements, 0 is fine as default
ph: z.number().default(0), // Measurements, 0 is fine as default
clIonQnt: z.number().default(0), // Measurements, 0 is fine as default
cdtnv: z.number().default(0), // Measurements, 0 is fine as default
grssClfg: z.number().default(0).nullish(), // Measurements, 0 is fine as default
combResdch: z.number().default(0).nullish(), // Measurements, 0 is fine as default
trbt: z.number().default(0).nullish(), // Measurements, 0 is fine as default
bod: z.number().default(0).nullish(), // Measurements, 0 is fine as default
smll:z.string().default('').nullish(), // Measurements, 0 is fine as default
crmty: z.number().default(0).nullish(), // Measurements, 0 is fine as default
tn: z.number().default(0).nullish(), // Measurements, 0 is fine as default
tph:z.number().default(0).nullish(),// Measurements, 0 is fine as default
ph: z.string().default('').nullish(), // Measurements, 0 is fine as default
clIonQnt: z.number().default(0).nullish(), // Measurements, 0 is fine as default
cdtnv: z.number().default(0).nullish(), // Measurements, 0 is fine as default
emsnExitTp: z.number()
.max(100, { message: "온도는 100이상이 될 수 없습니다." })
.default(0), // Changed max to 100 based on message, // Measurements, 0 is fine as default
apps/wr/components/ui/form/fcltReg/htdflReg/htdflRegForm.tsx
+327 -156
View File
@@ -12,6 +12,7 @@ import {
confirmToast,
formatCommaNumber,
handleCommaNumberChange,
handleOnlyNumberChange,
} from "@/components/lib/func/commom";
import {
Form,
@@ -19,9 +20,9 @@ import {
FormUi,
SelectBox,
} from "@common/business_components/ui";
import { Button, Input, ScrollArea } from "@common/components/ui";
import { Button, Input, Label, ScrollArea } from "@common/components/ui";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";
@@ -40,6 +41,8 @@ export default function HtdflRegForm({
setIsModal?: (modal: boolean) => void;
}) {
const { code, htdflBdstUpdate, htdflBdstReg } = useWrStore((state) => state);
const [frontPHdata, setFrontPHdata] = useState("");
const [backPHdata, setBackPHdata] = useState("");
const defaultValues: z.infer<typeof hdtflZod> = hdtflZod.parse({});
@@ -51,7 +54,7 @@ export default function HtdflRegForm({
const bdstNm = form.watch("bdstNm");
const isPowerPlant = bdstNm?.includes("발전소");
const { t } = useTranslation('base');
const { t } = useTranslation("base");
const onSubmit = (values: z.infer<typeof hdtflZod>) => {
if (isModal) {
const data = regCtpvCd ? regCtpvCd : regSggcd ? regSggcd : "noCd";
@@ -63,13 +66,12 @@ export default function HtdflRegForm({
htdflBdstReg(values, data);
if (setIsModal) setIsModal(false);
};
confirmToast(t('isInsertMsg'), handleConfirm);
confirmToast(t("isInsertMsg"), handleConfirm);
} else {
const handleConfirm = async () => {
htdflBdstUpdate(values, "0");
};
confirmToast(t('isUpdateMsg'), handleConfirm);
confirmToast(t("isUpdateMsg"), handleConfirm);
}
};
@@ -97,14 +99,53 @@ export default function HtdflRegForm({
})),
};
};
const isSetFrontPh = useCallback(
(frontPHdata: string) => {
setFrontPHdata(frontPHdata);
if (!frontPHdata) {
form.setValue(`reuseBuilding.0.htdflObj.ph`, "");
return;
}
const PHdata = form.getValues(`reuseBuilding.0.htdflObj.ph`);
let backPH;
if (PHdata && String(PHdata).includes("~")) {
backPH = PHdata.split("~")[1];
} else {
backPH = String(Number(frontPHdata) + 1);
}
const MatchData = `${frontPHdata}~${backPH}`;
form.setValue(`reuseBuilding.0.htdflObj.ph`, MatchData);
},
[form]
);
const isSetBackPh = useCallback(
(backPHdata: string) => {
setBackPHdata(backPHdata);
if (!backPHdata) {
form.setValue(`reuseBuilding.0.htdflObj.ph`, "");
return;
}
const PHdata = form.getValues(`reuseBuilding.0.htdflObj.ph`);
let frontPH;
if (PHdata && String(PHdata).includes("~")) {
frontPH = PHdata.split("~")[0];
} else {
frontPH = String(Math.max(Number(backPHdata) - 1, 0));
}
const MatchData = `${frontPH}~${backPHdata}`;
form.setValue(`reuseBuilding.0.htdflObj.ph`, MatchData);
},
[form]
);
const [divStyle, setDivStyle] = useState("h-[53vh]");
useEffect(() => {
if (isModal === true) {
setDivStyle("h-[53vh] max-h-[37vh]")
setDivStyle("h-[53vh] max-h-[37vh]");
} else if (readonly === true) {
setDivStyle("h-[62vh]")
setDivStyle("h-[62vh]");
} else {
setDivStyle("h-[53vh]")
setDivStyle("h-[53vh]");
}
}, [isModal, readonly]);
@@ -116,7 +157,25 @@ export default function HtdflRegForm({
useEffect(() => {
// Case 1: 수정 또는 '복사하여 등록' 등 데이터가 주입되는 경우
if (htdflForm && Object.keys(htdflForm).length > 0) {
const htdflPH = htdflForm.reuseBuilding[0]?.htdflObj.ph
if(htdflPH && String(htdflPH).includes("~")){
const [frontPH, backPH] = htdflPH.split("~");
if (frontPH) {
setFrontPHdata(frontPH);
}
if (backPH) {
setBackPHdata(backPH);
}
} else {
setFrontPHdata("");
setBackPHdata("");
}
form.reset(cleanHtdflData(htdflForm));
}else{
form.reset();
}
// Case 2: 데이터가 없는 순수 신규 등록 모드인 경우
if (isModal) {
@@ -125,15 +184,33 @@ export default function HtdflRegForm({
const firstHtdUtztnUsgCd = code.htdUtztnUsgCd?.[0]?.val;
if (firstHtdPowerMthdCd) {
form.setValue('reuseBuilding.0.htdflObj.etgtType', firstHtdPowerMthdCd, { shouldDirty: true });
form.setValue(
"reuseBuilding.0.htdflObj.etgtType",
firstHtdPowerMthdCd,
{ shouldDirty: true }
);
}
if (firstYnValue) {
form.setValue('reuseBuilding.0.htdflObj.plwtYn', firstYnValue as "Y" | "N", { shouldDirty: true });
form.setValue('reuseBuilding.0.htdflObj.prcsProcsYn', firstYnValue as "Y" | "N", { shouldDirty: true });
form.setValue('reuseBuilding.0.htdflObj.fmYn', firstYnValue as "Y" | "N", { shouldDirty: true });
form.setValue(
"reuseBuilding.0.htdflObj.plwtYn",
firstYnValue as "Y" | "N",
{ shouldDirty: true }
);
form.setValue(
"reuseBuilding.0.htdflObj.prcsProcsYn",
firstYnValue as "Y" | "N",
{ shouldDirty: true }
);
form.setValue(
"reuseBuilding.0.htdflObj.fmYn",
firstYnValue as "Y" | "N",
{ shouldDirty: true }
);
}
if (firstHtdUtztnUsgCd) {
form.setValue('reuseBuilding.0.htdflObj.utztnUsg', firstHtdUtztnUsgCd, { shouldDirty: true });
form.setValue("reuseBuilding.0.htdflObj.utztnUsg", firstHtdUtztnUsgCd, {
shouldDirty: true,
});
}
}
}, [htdflForm, code, form]);
@@ -142,12 +219,37 @@ export default function HtdflRegForm({
if (!isPowerPlant) {
form.setValue(
"reuseBuilding.0.htdflObj.etgtType",
"해당없음", // 빈 문자열로 초기화
{ shouldDirty: true } // dirty 상태로 남길지 여부는 취사선택
"해당없음", // 빈 문자열로 초기화
{ shouldDirty: true } // dirty 상태로 남길지 여부는 취사선택
);
}
}, [isPowerPlant, form]);
// useEffect(() => {
// const watchPH = form.getValues(`items.${indexMng}.fcBizs.${indexBiz}.ph`);
// const checkPkAndCycle =
// form.getValues(`items.${indexMng}.pbnstRuseFcltId`) +
// String(form.getValues(`items.${indexMng}.fcBizs.${indexBiz}.cycl`));
// console.log("checkPkAndCycle ", checkPkAndCycle);
// if (chekcPk !== checkPkAndCycle) {
// if (watchPH && watchPH !== undefined) {
// const [frontPH, backPH] = watchPH.split("~");
// if (frontPH) {
// setFrontPHdata(frontPH);
// }
// if (backPH) {
// setBackPHdata(backPH);
// }
// } else {
// setFrontPHdata("0");
// setBackPHdata("0");
// }
// setCheakPk(checkPkAndCycle);
// }
// }, [form.getValues(`items.${indexMng}.fcBizs.${indexBiz}.ph`), chekcPk]);
return (
<div className="!mx-[1.6rem] !p-0r">
<Form {...form}>
@@ -198,9 +300,13 @@ export default function HtdflRegForm({
label={""}
selectClass={selectClass}
selectArray={code.htdPowerMthdCd}
onSelectValue={readonly ? () => { } : field.onChange}
onSelectValue={readonly ? () => {} : field.onChange}
// value={field.value ?? ""}
value={field.value || (code?.htdPowerMthdCd[0] &&code?.htdPowerMthdCd[0].val)}
value={
field.value ||
(code?.htdPowerMthdCd[0] &&
code?.htdPowerMthdCd[0].val)
}
readOnly={readonly || !isPowerPlant}
/>
</FormUi>
@@ -241,7 +347,7 @@ export default function HtdflRegForm({
label={""}
selectClass={selectClass}
selectArray={code.yn}
onSelectValue={readonly ? () => { } : field.onChange}
onSelectValue={readonly ? () => {} : field.onChange}
value={field.value ?? ""}
readOnly={readonly}
/>
@@ -265,9 +371,9 @@ export default function HtdflRegForm({
className={selectClass}
placeholder=""
type="text"
value={field.value ?? ''}
value={field.value ?? ""}
onChange={(e) => {
if (!readonly) field.onChange((e.target.value));
if (!readonly) field.onChange(e.target.value);
}}
readOnly={readonly}
maxLength={txtSize}
@@ -374,7 +480,7 @@ export default function HtdflRegForm({
label={""}
selectClass={selectClass}
selectArray={code.yn}
onSelectValue={readonly ? () => { } : field.onChange}
onSelectValue={readonly ? () => {} : field.onChange}
value={field.value ?? ""}
readOnly={readonly}
/>
@@ -415,7 +521,7 @@ export default function HtdflRegForm({
selectClass={selectClass}
label={""}
selectArray={code.yn}
onSelectValue={readonly ? () => { } : field.onChange}
onSelectValue={readonly ? () => {} : field.onChange}
value={field.value ?? ""}
readOnly={readonly}
/>
@@ -456,7 +562,7 @@ export default function HtdflRegForm({
selectClass={selectClass}
label={""}
selectArray={code.htdUtztnUsgCd}
onSelectValue={readonly ? () => { } : field.onChange}
onSelectValue={readonly ? () => {} : field.onChange}
value={field.value ?? ""}
readOnly={readonly}
/>
@@ -477,18 +583,25 @@ export default function HtdflRegForm({
name="reuseBuilding.0.htdflObj.grssClfg"
render={({ field }) => (
<FormUi label="총대장균군(개/mg)">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={numSize}
/>
<div className="flex items-center gap-2">
<div className="relative flex-1 min-w-0">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={6}
/>
<span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
이하
</span>
</div>
</div>
</FormUi>
)}
/>
@@ -500,18 +613,25 @@ export default function HtdflRegForm({
name="reuseBuilding.0.htdflObj.tn"
render={({ field }) => (
<FormUi label="총질소(T-N)(mg/L)">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={numSize}
/>
<div className="flex items-center gap-2">
<div className="relative flex-1 min-w-0">
<Input
className={selectClass}
placeholder=""
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={6}
/>{" "}
<span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
이하
</span>
</div>
</div>
</FormUi>
)}
/>
@@ -548,18 +668,25 @@ export default function HtdflRegForm({
name="reuseBuilding.0.htdflObj.tph"
render={({ field }) => (
<FormUi label="총인(T-P)(mg/L)">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={numSize}
/>
<div className="flex items-center gap-2">
<div className="relative flex-1 min-w-0">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={6}
/>
<span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
이하
</span>
</div>
</div>
</FormUi>
)}
/>
@@ -573,41 +700,57 @@ export default function HtdflRegForm({
name="reuseBuilding.0.htdflObj.trbt"
render={({ field }) => (
<FormUi label="탁도(NTU)">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={numSize}
/>
<div className="flex items-center gap-2">
<div className="relative flex-1 min-w-0">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
handleOnlyNumberChange(e, field.onChange);
}}
value={
field.value !== undefined && field.value !== 0
? `${field.value}`
: ""
}
readOnly={readonly}
maxLength={6}
/>
<span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
이상
</span>
</div>
</div>
</FormUi>
)}
/>
</div>
<div className="col-span-6">
<FormField
control={form.control}
name="reuseBuilding.0.htdflObj.ph"
name="reuseBuilding.0.htdflObj.crmty"
render={({ field }) => (
<FormUi label="수소이온농도(PH)">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={numSize}
/>
<FormUi label="색도(도)">
<div className="flex items-center gap-2">
<div className="relative flex-1 min-w-0">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={numSize}
/>
<span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
이상
</span>
</div>
</div>
</FormUi>
)}
/>
@@ -621,18 +764,25 @@ export default function HtdflRegForm({
name="reuseBuilding.0.htdflObj.bod"
render={({ field }) => (
<FormUi label="생물학적 산소요구량(mg/L)">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={numSize}
/>
<div className="flex items-center gap-2">
<div className="relative flex-1 min-w-0">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={numSize}
/>
<span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
이하
</span>
</div>
</div>
</FormUi>
)}
/>
@@ -644,18 +794,25 @@ export default function HtdflRegForm({
name="reuseBuilding.0.htdflObj.clIonQnt"
render={({ field }) => (
<FormUi label="염화물(mg/L)">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={numSize}
/>
<div className="flex items-center gap-2">
<div className="relative flex-1 min-w-0">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={7}
/>
<span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
이하
</span>
</div>
</div>
</FormUi>
)}
/>
@@ -669,69 +826,83 @@ export default function HtdflRegForm({
name="reuseBuilding.0.htdflObj.smll"
render={({ field }) => (
<FormUi label="냄새">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
<SelectBox
className={"!text-2xl"}
label={""}
selectClass={undefined}
selectArray={[
{ val: "불쾌하지않을것", text: "불쾌하지않을것" },
{ val: "없음", text: "없음" },
]}
readOnly={readonly}
maxLength={numSize}
/>
onSelectValue={(val) => {
field.onChange(val);
}}
value={field.value || undefined}
></SelectBox>
</FormUi>
)}
/>
</div>
<div className="col-span-6">
<FormField
control={form.control}
name="reuseBuilding.0.htdflObj.cdtnv"
render={({ field }) => (
<FormUi label="전기전도도(μs/cm)">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={numSize}
/>
<div className="flex items-center gap-2">
<div className="relative flex-1 min-w-0">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={numSize}
/>
<span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
이하
</span>
</div>
</div>
</FormUi>
)}
/>
</div>
</div>
<div className="grid grid-cols-12 gap-4">
<div className="col-span-6">
<FormField
control={form.control}
name="reuseBuilding.0.htdflObj.crmty"
render={({ field }) => (
<FormUi label="색도(도)">
<Input
className={selectClass}
placeholder="10"
type="text"
onChange={(e) => {
if (!readonly)
handleCommaNumberChange(e, field.onChange);
}}
value={formatCommaNumber(field.value)}
readOnly={readonly}
maxLength={numSize}
/>
</FormUi>
)}
/>
<Label className="text-xl">수소이온농도(PH)</Label>
<div className="flex flex-row items-center gap-2">
<Input
className="!text-xl w-1/2"
placeholder=""
type="text"
onChange={(e) =>
//setFrontPHdata(e.target.value)
isSetFrontPh(e.target.value)
}
value={frontPHdata ?? ""}
readOnly={readonly}
maxLength={3}
/>
<span className="text-xl">~</span>
<Input
className="!text-xl w-1/2"
placeholder=""
type="text"
onChange={(e) => {
isSetBackPh(e.target.value);
}}
value={backPHdata ?? ""}
readOnly={readonly}
maxLength={3}
/>
</div>
</div>
</div>
</ScrollArea>