수요처 등록 수요처 추가 기능 추가

This commit is contained in:
leedj312
2025-06-03 19:24:33 +09:00
parent 618d2cb00c
commit c28dd728c5
5 changed files with 240 additions and 67 deletions
@@ -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 },
@@ -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;
@@ -338,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)
}
}
};
};
@@ -121,14 +121,14 @@ export type pubHasuType = z.infer<typeof pubHasuZod>;
const dmdColist = z.object({
dmdCoNm: z.boolean().default(false),
dmdCoNm: z.string().default(''),
daddr: z.string(),
useUsgCd: z.string().default(""),
splyBgngDay: z.string().default(""),
splyEndDay: 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('')
//telno:z.string().default('')
});
@@ -200,7 +200,7 @@ export const fcBizSchema = z.object({
ruseFcltCstClcln: z.number().nullish(),
fcOrgwts: z.array(fcOrgwtSchema).nullish(),
pplInstls: z.array(pplInstlSchema).nullish(),
demandInfo: z.array(dmdColist).default([]).nullish(),
fcDemands: z.array(dmdColist).default([]).nullish(),
flg: z.string().nullish(),
regDt: z.string().nullish(),
rgtr: z.string().nullish(),
@@ -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");
@@ -58,7 +68,6 @@ export function PbnstBuseForm({
const [sumCpct, setSumCpct] = useState<number>(0);
const [searchDmdCo, setSeachDmdCo] = useState<String>();
const form = useForm<fcBizType>({
resolver: zodResolver(fcBizSchema),
defaultValues:
@@ -90,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:
@@ -102,20 +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: demandInfo,
append:appendDemand,
remove:removeDemand } = useFieldArray({
const {
fields: fcDemands,
append: appendDemand,
remove: removeDemand,
} = useFieldArray({
control: form.control,
name: "demandInfo",
name: "fcDemands",
});
const { fields: fcOrgwtFiled } = useFieldArray({
control: form.control,
name: "fcOrgwts",
@@ -151,6 +162,10 @@ export function PbnstBuseForm({
}
}, [firstBizData, form.formState, formType]);
useEffect(() => {
console.log("searchDmdCo ", searchDmdCo);
}, [searchDmdCo]);
useEffect(() => {
if (ppiYn === "N") {
form.setValue("pplInstls", []);
@@ -180,19 +195,19 @@ export function PbnstBuseForm({
};
const plusArray = () => {
<>
<MngRegFormDetail
formList={dmdCoList}
h1Title={"하수처리수 재이용수 수요처"}
form={form}
moClass="grid grid-cols-12 gap-4 mt-3"
sonClass="col-span-4"
onIputData={(val) => {
setSeachDmdCo(val);
}}
/>
</>
console
.log('qweqwe ')
appendDemand({
dmdCoNm: "",
daddr: "",
useUsgCd: "",
splyBgngDay: new Date(),
splyEndDay: new Date(),
splyCpct: "",
splyFmYn: 0,
//telno: "",
});
};
const removeSelected = () => {
@@ -388,33 +403,154 @@ 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={() => {appendDemand}}
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"
onIputData={(val) => {
setSeachDmdCo(val);
}}
/>
{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>
</div>
@@ -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,24 +20,28 @@ export default function MngRegFormDetail({
moClass,
sonClass,
cycle,
onIputData
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
@@ -49,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>
)}
@@ -72,3 +98,4 @@ export default function MngRegFormDetail({
</>
);
}