Merge branch 'iipbs/wr/form_fuction' of https://www.onasys.co.kr:3000/ONAANDALL/frontend into iipbs/wr/form_fuction

This commit is contained in:
jyha00
2025-06-04 09:37:28 +09:00
12 changed files with 633 additions and 183 deletions
@@ -35,7 +35,7 @@ export default function PublicReuseFaciltyInsert() {
pbnst,
searchFclts,
pubHasuInit,
pbnstRegInit,
pbnstRegClick,
getSwtrmtFcltNm,
pbnstMngData,
} = useWrStore((state) => state);
@@ -72,7 +72,7 @@ export default function PublicReuseFaciltyInsert() {
const selectRow = pbnstHasuRes?.[val];
if (selectRow) {
setIsRuseReg({ ...isRuseReg, data: selectRow });
pbnstRegInit(selectRow);
pbnstRegClick(selectRow);
}
};
@@ -1,21 +1,41 @@
"use client";
import { useWrStore } from "@/app/store";
import type { pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
import { excelDownload, yearOptions } from "@/components/lib/func/commom";
import { ContentsDiv, Title, SearchDiv, SearchFormLeft, SelectBox, SearchInput, SearchFormRight, ScrollArea, UiTable } from "@common/business_components/ui";
import PbnPrfExcelModal from "@/components/ui/modal/chkgd/pbnPrfExcelModal/pbnPrfExcelModal";
import {
ContentsDiv,
Title,
SearchDiv,
SearchFormLeft,
SelectBox,
SearchInput,
SearchFormRight,
ScrollArea,
UiTable,
UiModal,
} from "@common/business_components/ui";
import ListDiv from "@common/business_components/ui/list_div";
import { Button, Label } from "@common/components/ui";
import { useState, useEffect, useCallback } from "react";
import { set } from "react-hook-form";
import { Toaster } from "react-hot-toast";
export default function prfmncPrfmncReg() {
const { code, prfmnc, prfmncHasuInit, searchFclts, } = useWrStore((state) => state);
const { pbnstPrfmncHeadList, monthHeadList, prfmncRes } = prfmnc;
const [bdstTable, setbdstTable] = useState<pubHasuType[]>();
const [searchTxt, setSearchTxt] = useState<string>();
const { code, prfmnc, prfmncHasuInit, searchFclts } = useWrStore(
(state) => state
);
const { pbnstPrfmncHeadList, monthHeadList, prfmncRes } = prfmnc;
const [bdstTable, setbdstTable] = useState<pubHasuType[]>();
const [searchTxt, setSearchTxt] = useState<string>();
const [isExcelOpen, setIsExcelOPen] = useState<boolean>(false);
const [searchYear, setSearchYear] = useState<string>(String(new Date().getFullYear()));
const excelClick = useCallback(() => {
const [searchYear, setSearchYear] = useState<string>(
String(new Date().getFullYear())
);
const excelClick = useCallback(() => {
console.log("dd")
excelDownload(
prfmnc.excelList,
@@ -35,104 +55,101 @@ export default function prfmncPrfmncReg() {
console.log("prfmnc.prfmncRes", prfmncRes)
}, [prfmncRes]);
return (
<>
<ContentsDiv>
<div className="grid grid-cols-4 gap-4">
<div className="col-span-4">
<Title title={"하수재이용실적 등록"} />
<SearchDiv>
<SearchFormLeft>
<div className="col-span-2 flex flex-row space-x-2">
<Label className="w-48 mt-2 text-xl text-gray-600">{'실적등록년도'}</Label>
<SelectBox
className="w-full h-full text-2xl"
label=""
selectClass={""}
selectArray={yearOptions}
value={searchYear}
onSelectValue={(val: string | number) =>
setSearchYear(String(val))
}
/>
</div>
<div className="col-span-2 flex flex-row space-x-2">
<Label className="w-28 mt-2 text-xl text-gray-600">{'시설명'}</Label>
<SearchInput
className={"w-full text-2xl"}
label=""
textValue={searchTxt || ""}
setText={(e) => {
setSearchTxt(e);
}}
/>
</div>
</SearchFormLeft>
<SearchFormRight
className="w-2/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
<div className="space-y">
<div className="flex flex-row space-x-2">
<Button
size={"sm"}
onClick={(e) => { }}
>
조회
</Button>
<Button
size={"sm"}
onClick={() => { }}
>
저장
</Button>
<Button
size={"sm"}
onClick={() => { }}
>
파일등록
</Button>
<Button color="green" size={"sm"} onClick={excelClick}>
양식받기
</Button>
</div>
</div>
</SearchFormRight>
</SearchDiv>
</div>
return (
<>
<ContentsDiv>
<div className="grid grid-cols-4 gap-4">
<div className="col-span-4">
<Title title={"하수재이용 시설 등록"} />
<SearchDiv>
<SearchFormLeft>
<div className="col-span-2 flex flex-row space-x-2">
<Label className="w-48 mt-2 text-xl text-gray-600">
{"실적등록년도"}
</Label>
<SelectBox
className="w-full h-full text-2xl"
label=""
selectClass={""}
selectArray={yearOptions}
value={searchYear}
onSelectValue={(val: string | number) =>
setSearchYear(String(val))
}
/>
</div>
<div className="col-span-2 flex flex-row space-x-2">
<Label className="w-28 mt-2 text-xl text-gray-600">
{"시설명"}
</Label>
<SearchInput
className={"w-full text-2xl"}
label=""
textValue={searchTxt || ""}
setText={(e) => {
setSearchTxt(e);
}}
/>
</div>
</SearchFormLeft>
<SearchFormRight className="w-2/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
<div className="space-y">
<div className="flex flex-row space-x-2">
<Button size={"sm"} onClick={(e) => {}}>
조회
</Button>
<Button size={"sm"} onClick={() => {}}>
저장
</Button>
<Button size={"sm"} onClick={() => {setIsExcelOPen(true)}}>
파일등록
</Button>
<Button color="green" size={"sm"} onClick={() => {}}>
양식받기
</Button>
</div>
</div>
</SearchFormRight>
</SearchDiv>
</div>
</div>
<div className="grid grid-cols-12 gap-4 h-full">
<div className="col-span-4 h-full min-h-0">
<ListDiv className="min-h-0">
<ScrollArea className="h-[60vh]">
<UiTable
tableData={bdstTable || []}
headlist={pbnstPrfmncHeadList}
pageSize={100}
total={10}
headName={"하수재이용시설 목록"}
cellClick={() => { }}
onPageChange={(page: number) => { }}
children={undefined}
/>
</ScrollArea>
</ListDiv>
</div>
<ListDiv className="col-span-8 pr-6 ">
<ScrollArea className="h-[60vh]">
<UiTable
tableData={[]}
headlist={monthHeadList}
pageSize={100}
total={10}
headName={"하수처리수재이용 실적(m3) 등록결과"}
cellClick={() => { }}
onPageChange={() => { }}
children={undefined}
/>
</ScrollArea>
</ListDiv>
</div>
</ContentsDiv>
</>
);
}
<div className="grid grid-cols-12 gap-4 h-full">
<div className="col-span-4 h-full min-h-0">
<ListDiv className="min-h-0">
<ScrollArea className="h-[60vh]">
<UiTable
tableData={bdstTable || []}
headlist={pbnstPrfmncHeadList}
pageSize={100}
total={10}
headName={"하수재이용시설 목록"}
cellClick={() => {}}
onPageChange={(page: number) => {}}
children={undefined}
/>
</ScrollArea>
</ListDiv>
</div>
<ListDiv className="col-span-8 pr-6 ">
<ScrollArea className="h-[60vh]">
<UiTable
tableData={[]}
headlist={monthHeadList}
pageSize={100}
total={10}
headName={"하수처리수재이용 실적(m3) 등록결과"}
cellClick={() => {}}
onPageChange={() => {}}
children={undefined}
/>
</ScrollArea>
</ListDiv>
</div>
</ContentsDiv>
<UiModal bodyClass={""} body={<PbnPrfExcelModal></PbnPrfExcelModal>} open={isExcelOpen} onOpenChange={() => {setIsExcelOPen(!isExcelOpen)}}></UiModal>
<Toaster position="top-center" />
</>
);
}
@@ -0,0 +1,43 @@
import { TEST_UUID } from "../../ruseFcltMng/fcltReg/rainReg";
const nameMap = {
"세척수": "wshwtr",
"냉각수": "coolUswtr",
"청소수": "cleanUswtr",
"식수대": "drwtUswtr",
"희석용수": "dltnUswtr",
"중수도": "ithlRswtr",
"기타": "ithlEtcUswtr",
"청소화장실용수": "cleanToilUswtr",
"세척살수용수": "resn",
"조경용수": "lndwtr",
"친수용수": "hydUswtr",
"지하수충전": "ugwtChr",
"농업용수": "farmUswtr",
"하천등유지용수": "rvrKeepUswtr",
"공업용수": "indstUswtr"
};
export const excelToPbnPrfData = (excelData: any[], year: string) => {
// 월별 데이터 하나로 병합
const merged = {} as any;
excelData.forEach((item: any) => {
const key = nameMap[item["용수명"]];
if (!key) return;
for (let i = 1; i <= 12; i++) {
const month = i.toString().padStart(2, "0");
const ym = year + month;
if (!merged[ym]) merged[ym] = { ym };
merged[ym][key] = Number(item[`${i}월`] ?? 0);
}
});
const pbnPrfData = Object.values(merged);
console.log(pbnPrfData);
return pbnPrfData;
};
@@ -1,5 +1,13 @@
import { z } from "zod";
import type { TableUpperProps } from "../../ruseFcltMng/fcltReg/rainReg";
export const pbnPrfRegExcelZod = z.object({
ym: z.string().default(""),
bscFctNm: z.string().default(""),
pbnstRuseFcltNm: z.string().default(""),
file: z.instanceof(File).optional(),
});
export const pbnstPrfmncHeadListExport: TableUpperProps[] = [
{ id: "sido", title: "시도" },
{ id: "gugun", title: "시군구" },
@@ -64,15 +64,6 @@ export const fcOrgwtsHeadListExport: TableUpperProps[] = [
{ id: "addr", title: "위치" },
];
export const dmdCoList: formDetailType[] = [
{ id: "dmdCoNm", lable: "수요처명" },
{ id: "daddr", lable: "위치(주소)" },
{ id: "useUsgCd", lable: "사용용도" },
{ id: "splyBgngDay", lable: "공급시작일", type: "date" },
{ id: "splyEndDay", lable: "공급종료일", type: "date" },
{ id: "splyCpct", lable: "(계약)공급량(m3/일)" },
{ id: "splyFmYn", lable: "공급 유량계 유무", type: "selectYn" },
];
export const pbnstMngNmExport: chHeadType[] = [
{ headNm: "upChangeRe", text: "운영대행기간", length: 2 },
@@ -57,7 +57,7 @@ export type pubFacState = {
};
type pubFacActions = {
pubHasuInit: (page: string, sggOrCity: string) => void;
pbnstRegInit: (pubHasuRes: pubHasuType) => void;
pbnstRegClick: (pubHasuRes: pubHasuType) => void;
pbnstReg: (txt: string | undefined) => void;
pbnstInsert(pbnstRes: customPbnst): Promise<void>;
appendRuseFclt(array: customPbnst[]): void;
@@ -68,6 +68,7 @@ type pubFacActions = {
getBizCycle: (pbnstObj: customPbnst) => void;
getDmdCompany: (txt: string) => void;
getpbnstInsertIndex: (data: pbnstInsertIndex) => void;
searchDmdColist:(txt:string) =>void
};
export type pubFacType = pubFacState & pubFacActions;
@@ -117,8 +118,8 @@ const hasuListFetch = async (page: string, sggOrCity: string) => {
return hasuList;
};
const initFetch = async (code: string | undefined) => {
const pbnstRes = await getFetch("wr", `${code}`);
const initFetch = async (ruseFcltPk: string | undefined) => {
const pbnstRes = await getFetch("wr", `/reuseFc/pubFc/${ruseFcltPk}`);
return pbnstRes;
};
@@ -169,11 +170,9 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
}
},
pbnstRegInit: async (pubHasuRes: pubHasuType) => {
pbnstRegClick: async (pubHasuRes: pubHasuType) => {
try {
//const pbnstRes = await initFetch(txt);
const pbnstRes = exampleData;
const pbnstRes = await initFetch(pubHasuRes.bscFctCd);
return set((state: pubFacState) => ({
...state,
pbnst: {
@@ -340,6 +339,24 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
} catch (e) {
console.log(e);
}
},
},searchDmdColist:async (txt:string)=>{
try{
console.log(' txt ', txt)
const coList = await getFetch(fetchType.WR, `reuseFc/request/${txt}/{3}`);
return set((state: pubFacState) => ({
...state,
pbnst: {
...state.pbnst,
dmdCoList: coList,
isInit: false,
},
}));
}catch(e){
console.log(e)
}
}
};
};
@@ -99,6 +99,42 @@ const fcOrgwtSchema = z.object({
});
const pubHasuZod = z.object({
choose: z.boolean().default(false),
bscFctCd: z.string(),
sido: z.string().default(""),
gugun: z.string().default(""),
bscFctNm: z.string().default(""),
efflWqltStndrdNm: z.string().default(""),
fctCpc: z.number().default(0),
addr:z.string().nullish()
});
const demandInfoList = z.object({
})
export type pubHasuType = z.infer<typeof pubHasuZod>;
const dmdColist = z.object({
dmdCoNm: z.string().default(''),
daddr: z.string(),
useUsgCd: z.string().default(""),
splyBgngDay: z.date().default(new Date()),
splyEndDay: z.date().default(new Date()),
splyCpct: z.string().default(""),
splyFmYn: z.number().default(0),
//telno:z.string().default('')
});
export const fcBizSchema = z.object({
pbnstRuseFcltBizPk: z.number().default(1),
pbnstRuseFcltFk: z.string().nullish(),
@@ -164,40 +200,13 @@ export const fcBizSchema = z.object({
ruseFcltCstClcln: z.number().nullish(),
fcOrgwts: z.array(fcOrgwtSchema).nullish(),
pplInstls: z.array(pplInstlSchema).nullish(),
fcDemands: z.array(dmdColist).default([]).nullish(),
flg: z.string().nullish(),
regDt: z.string().nullish(),
rgtr: z.string().nullish(),
mdfcnDt: z.string().nullish(),
mdfr: z.string().nullish(),
});
const pubHasuZod = z.object({
choose: z.boolean().default(false),
bscFctCd: z.string(),
sido: z.string().default(""),
gugun: z.string().default(""),
bscFctNm: z.string().default(""),
efflWqltStndrdNm: z.string().default(""),
fctCpc: z.number().default(0),
addr:z.string().nullish()
});
export type pubHasuType = z.infer<typeof pubHasuZod>;
const dmdColist = z.object({
dmdCoNm: z.boolean().default(false),
daddr: z.string(),
useUsgCd: z.string().default(""),
splyBgngDay: z.string().default(""),
splyEndDay: z.string().default(""),
splyCpct: z.string().default(""),
splyFmYn: z.number().default(0),
});
export const pbnstRegZod = z.object({
pbnstRuseFcltPk: z.string().default(''),
swtrmtFcltFk: z.string().default(""),
@@ -212,7 +221,6 @@ export const pbnstRegZod = z.object({
fcFiles: z.array(fcFileSchema).default([]),
fcBizs: z.array(fcBizSchema).default([]),
fcOpers: z.array(fcOperSchema).default([]),
fcDemands: z.array(dmdColist).default([]).nullish(),
hasuhasu: z.number().default(0),
});
@@ -5,7 +5,6 @@ import {
businessMoneyInfo,
businessSttnInfo,
concentratedWaterInfo,
dmdCoList,
ruseFcltinfo,
ruseWaterQulityList,
wasteWaterFcltINfo,
@@ -25,13 +24,23 @@ import {
import FcOrgwtsRegModal from "@/components/ui/modal/fcltReg/fcOrgwtsRegModal/fcOrgwtsRegModal";
import RuseMngTable from "@/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable";
import { SelectBox } from "@common/business_components";
import { UiModal, type SelectDataType } from "@common/business_components/ui";
import { Form } from "@common/business_components/ui/form";
import { Button, Input, Label } from "@common/components";
import {
FormUi,
SearchInputSelect,
UiModal,
type SelectDataType,
} from "@common/business_components/ui";
import { Form, FormField } from "@common/business_components/ui/form";
import { Button, DatePicker, Input, Label } from "@common/components";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useRef, useState } from "react";
import { useFieldArray, useForm } from "react-hook-form";
import MngRegFormDetail from "../mngReg/mngRegFormDetail/mngRegFormDetail";
import {
handleCommaNumberChange,
formatCommaNumber,
safeDate,
} from "@/components/lib/func/commom";
export function PbnstBuseForm({
formType,
@@ -48,6 +57,7 @@ export function PbnstBuseForm({
getpbnstInsertIndex,
appendRuseFclt,
getBizCycle,
searchDmdColist,
} = useWrStore((state) => state);
const { pbnstBizCycle, pbnstRes } = pbnst;
const [bizCycle, setBizCycle] = useState("1");
@@ -56,6 +66,7 @@ export function PbnstBuseForm({
const [ppiYn, setPpiYn] = useState("Y");
const [isFcOrgwts, setIsFcOrgwts] = useState<boolean>(false);
const [sumCpct, setSumCpct] = useState<number>(0);
const [searchDmdCo, setSeachDmdCo] = useState<String>();
const form = useForm<fcBizType>({
resolver: zodResolver(fcBizSchema),
@@ -88,7 +99,7 @@ export function PbnstBuseForm({
if (
pbnst.pbnstRes &&
pbnst.pbnstRes[pbnst.pbnsUpdateIndex.mng] &&
pbnst.pbnstRes[pbnst.pbnsUpdateIndex.mng]?.fcBizs
pbnst.pbnstRes[pbnst.pbnsUpdateIndex.mng]?.fcBizs
) {
regData = {
pbnstRuseFcltFk:
@@ -100,12 +111,22 @@ export function PbnstBuseForm({
} as fcBizType;
const newPbnstRes = [...(pbnst.pbnstRes as customPbnst[])];
newPbnstRes[index]?.fcBizs?.length && newPbnstRes[index]?.fcBizs?.push(regData);
newPbnstRes[index]?.fcBizs?.length &&
newPbnstRes[index]?.fcBizs?.push(regData);
getBizCycle(newPbnstRes[index] as customPbnst);
appendRuseFclt(newPbnstRes);
}
}
const {
fields: fcDemands,
append: appendDemand,
remove: removeDemand,
} = useFieldArray({
control: form.control,
name: "fcDemands",
});
const { fields: fcOrgwtFiled } = useFieldArray({
control: form.control,
name: "fcOrgwts",
@@ -141,6 +162,10 @@ export function PbnstBuseForm({
}
}, [firstBizData, form.formState, formType]);
useEffect(() => {
console.log("searchDmdCo ", searchDmdCo);
}, [searchDmdCo]);
useEffect(() => {
if (ppiYn === "N") {
form.setValue("pplInstls", []);
@@ -169,7 +194,21 @@ export function PbnstBuseForm({
ref.current = [...latestOpers];
};
const plusArray = () => {};
const plusArray = () => {
console
.log('qweqwe ')
appendDemand({
dmdCoNm: "",
daddr: "",
useUsgCd: "",
splyBgngDay: new Date(),
splyEndDay: new Date(),
splyCpct: "",
splyFmYn: 0,
//telno: "",
});
};
const removeSelected = () => {
if (!ref.current) return;
@@ -364,25 +403,153 @@ export function PbnstBuseForm({
moClass="grid grid-cols-12 gap-4"
sonClass="col-span-4"
/>
<div>
<h1 className={formH1Class}>{'하수처리수 재이용수 수요처'}</h1>
<div className="text-right mb-3">
<Button
type="button"
onClick={() => {}}
onClick={plusArray}
size={commonButonSize}
className=""
className="mt-6"
>
수요처 추가
</Button>
</div>
<MngRegFormDetail
formList={dmdCoList}
h1Title={"하수처리수 재이용수 수요처"}
form={form}
moClass="grid grid-cols-12 gap-4 mt-3"
sonClass="col-span-4"
/>
{fcDemands.map((field, index) => (
<div className="grid grid-cols-12 gap-4 mt-3">
<div className="col-span-4">
<FormField
control={form.control}
name={`fcDemands.${index}.dmdCoNm`}
render={({ field: f }) => (
<FormUi label="수요처명">
<SearchInputSelect
className={""}
label={""}
selectData={[]}
onSelectValue={(val) => {
searchDmdColist(val);
}}
textValue={f.value}
setText={(val) => {
setSeachDmdCo(val);
}}
selectValue={searchDmdCo}
></SearchInputSelect>
</FormUi>
)}
/>
</div>
<div className="col-span-4">
<FormField
control={form.control}
name={`fcDemands.${index}.daddr`}
render={({ field: f }) => (
<FormUi label="위치(주소)">
<Input
placeholder="-"
type="text"
onChange={(e) => f.onChange(e.target.value)}
value={f.value}
className={selectClass}
/>
</FormUi>
)}
/>
</div>
<div className="col-span-4">
<FormField
control={form.control}
name={`fcDemands.${index}.useUsgCd`}
render={({ field: f }) => (
<FormUi label="사용용도">
<Input
placeholder="-"
type="text"
onChange={(e) => f.onChange(e.target.value)}
value={f.value}
className={selectClass}
/>
</FormUi>
)}
/>
</div>
<div className="col-span-3">
<FormField
control={form.control}
name={`fcDemands.${index}.splyBgngDay`}
render={({ field: f }) => (
<FormUi label="공급시작일">
<DatePicker
mode={"single"}
selected={safeDate(f.value) || new Date()}
onSelect={(date: Date | undefined) =>
f.onChange(date)
}
className={"rounded-lg !w-full"}
/>
</FormUi>
)}
/>
</div>
<div className="col-span-3">
<FormField
control={form.control}
name={`fcDemands.${index}.splyEndDay`}
render={({ field: f }) => (
<FormUi label="공급종료일">
<DatePicker
mode={"single"}
selected={safeDate(f.value) || new Date()}
onSelect={(date: Date | undefined) =>
f.onChange(date)
}
className={"rounded-lg !w-full"}
/>
</FormUi>
)}
/>
</div>
<div className="col-span-3">
<FormField
control={form.control}
name={`fcDemands.${index}.splyCpct`}
render={({ field: f }) => (
<FormUi label="(계약)공급량(m3/일)">
<Input
placeholder=""
type="number"
value={f.value ?? 0}
onChange={(e) => {
f.onChange(Number(e.target.value));
}}
/>
</FormUi>
)}
/>
</div>
<div className="col-span-3">
<FormField
control={form.control}
name={`fcDemands.${index}.splyFmYn`}
render={({ field: f }) => (
<FormUi label="공급 유량계 유무">
<SelectBox
label={""}
selectClass={""}
className="w-full"
selectArray={code.yn}
onSelectValue={(val: string | number) =>
f.onChange(val)
}
value={f.value}
/>
</FormUi>
)}
/>
</div>
</div>
))}
</div>
</form>
</Form>
@@ -260,12 +260,14 @@ export function PbnstMngForm({
}, [pbnst.pbnstMngRegData]);
useEffect(() => {
if (!pbnst.pbnstRes) return;
const fcltNmList = pbnst.pbnstRes.map((item, index) => ({
if ( pbnst.pbnstRes && pbnst.pbnstRes?.length> 0) return;
const fcltNmList = pbnst.pbnstRes?.map((item, index) => ({
text: item.ruseUtztnFcltNm,
val: String(index),
}));
if(fcltNmList)
setFcltNm(fcltNmList);
}, [pbnst.pbnstRes]);
@@ -1,9 +1,17 @@
'use client'
import { useWrStore } from "@/app/store";
import type { formDetailType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/headList";
import { formH1Class } from "@/components/lib/class/comClass";
import { safeDate } from "@/components/lib/func/commom";
import { FormField, FormUi, SelectBox } from "@common/business_components/ui";
import {
FormField,
FormUi,
SearchInputSelect,
SelectBox,
type SelectDataType,
} from "@common/business_components/ui";
import { DatePicker, Input } from "@common/components/ui";
import { useState } from "react";
export default function MngRegFormDetail({
formList,
@@ -12,22 +20,28 @@ export default function MngRegFormDetail({
moClass,
sonClass,
cycle,
onIputData,
searchSelectData
}: {
formList: formDetailType[];
h1Title?: string;
form: any;
moClass?: string;
cycle?:string
cycle?: string;
sonClass?: string;
onIputData?: (data: any) => void;
searchSelectData?: SelectDataType[];
}) {
const { code, } = useWrStore((state) => state);
const { code } = useWrStore((state) => state);
const [searchData, setSearchData]= useState<string>('')
return (
<>
{ h1Title ? <h1 className={formH1Class}>{h1Title}</h1> : <></>}
{h1Title ? <h1 className={formH1Class}>{h1Title}</h1> : <></>}
<div className={moClass}>
{formList?.map((item, index) => {
const fieldId = cycle? `${cycle}.${item.id}`: item.id;
const fieldId = cycle ? `${cycle}.${item.id}` : item.id;
return (
<div className={sonClass} key={index + `${item.id}`}>
<FormField
@@ -47,18 +61,32 @@ export default function MngRegFormDetail({
className={"rounded-lg !w-full"}
/>
) : item.type === "number" ? (
<Input placeholder="" type="number" value={field.value??0} onChange={(e) =>{field.onChange(Number(e.target.value))}} />
<Input
placeholder=""
type="number"
value={field.value ?? 0}
onChange={(e) => {
field.onChange(Number(e.target.value));
}}
/>
) : item.type === "selectYn" ? (
<SelectBox
label={""}
selectClass={""}
className="w-full"
selectArray={code.yn}
onSelectValue={(val: string | number) => field.onChange(val)}
onSelectValue={(val: string | number) =>
field.onChange(val)
}
value={field.value}
/>
) : (
<Input placeholder="" type="text" value={field.value??''} onChange={field.onChange} />
<Input
placeholder=""
type="text"
value={field.value ?? ""}
onChange={field.onChange}
/>
)}
</FormUi>
)}
@@ -70,3 +98,4 @@ export default function MngRegFormDetail({
</>
);
}
@@ -0,0 +1,168 @@
import { useWrStore } from "@/app/store";
import { excelToPbnPrfData } from "@/app/store/prfmncReg/pbnstPrfmncReg/excel";
import { pbnPrfRegExcelZod } from "@/app/store/prfmncReg/pbnstPrfmncReg/headList";
import { yearOptions } from "@/components/lib/func/commom";
import { ToastFormUi } from "@/components/ui/toast/toastFromUi";
import {
FileUpload,
FormField,
FormUi,
SelectBox,
Form,
Title,
type SelectDataType,
filePicked,
} from "@common/business_components/ui";
import { Button } from "@common/components/ui";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import type { z } from "zod";
export default function PbnPrfExcelModal() {
const { code, prfmnc, searchFclts } = useWrStore((state) => state);
const [bscFctNmList, setBscFctNmList] = useState<SelectDataType[] | null>(null);
const [files, setFiles] = useState<File[] | null>(null);
const [excelData, setExcelData] = useState<any[]>();
const form = useForm<z.infer<typeof pbnPrfRegExcelZod>>({
resolver: zodResolver(pbnPrfRegExcelZod),
defaultValues: {
ym: String(new Date().getFullYear()),
},
});
const onSubmit = (values: z.infer<typeof pbnPrfRegExcelZod>) => {
console.log(values);
};
useEffect(() => {
if(prfmnc.prfmncRes.length > 0){
const basFctNmList = prfmnc.prfmncRes.map((item)=>(
{
val:item.bscFctCd,
text:item.bscFctNm
}
))
setBscFctNmList(basFctNmList)
}
}, [prfmnc.prfmncRes]);
useEffect(()=>{
if(files){
const file = files[0];
if (form.getValues("ym").length < 1) {
ToastFormUi({
body: "파일업로드 이전에 등록년도를 작성해주세요 ",
title: "지도점검 등록",
});
setFiles(null);
return;
}
if(file)
filePicked(file, 0).then((res) => {
if (res !== undefined)
console.log(excelToPbnPrfData(res, form.getValues("ym")))
});
}
},[files])
return (
<>
<div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<div>
<Title title={"하수재이용 실적등록"}></Title>
</div>
<div className="flex justify-between">
<h3 className="text-2xl font-bold text-gray-900 mt-1 ml-7">
{"점검정보 입력"}
</h3>
<Button className="" type="submit">
저장
</Button>
</div>
<div>
<FormField
control={form.control}
name="ym"
render={({ field }) => (
<FormUi label="등록년도">
<SelectBox
className="w-1/4 text-3xl"
selectClass={""}
label=""
selectArray={yearOptions}
value={field.value}
onSelectValue={(val) => field.onChange(val)}
/>
</FormUi>
)}
/>
<FormField
control={form.control}
name="bscFctNm"
render={({ field }) => (
<FormUi label="시설명">
<SelectBox
className="w-1/4 text-3xl"
selectClass={""}
label=""
selectArray={bscFctNmList || [] }
value={field.value}
onSelectValue={(val) => field.onChange(String(val))}
/>
</FormUi>
)}
/>
<FormField
control={form.control}
name="pbnstRuseFcltNm"
render={({ field }) => (
<FormUi label="재이용시설명">
<SelectBox
className="w-1/4 text-3xl"
selectClass={""}
label=""
selectArray={yearOptions}
value={field.value}
onSelectValue={(val) => field.onChange(String(val))}
/>
</FormUi>
)}
/>
<FormField
control={form.control}
name="file"
render={({ field }) => (
<FormUi label="점검결과 파일">
<FileUpload
files={files || []}
setFiles={(files: File[] | null) => {
if (files) setFiles(files);
}}
fileTypes="xlsx"
></FileUpload>
</FormUi>
)}
/>
</div>
</form>
</Form>
</div>
</>
);
}