하수재이용 등록 하수 운영 탭 가능추가

2025-03-20 15:23:54 +09:00
parent 96828c175e
commit 8d904d6714
4 changed files with 112 additions and 106 deletions
@@ -10,14 +10,18 @@ import { useWrStore } from "../../../store";
 import { PbnstBuseForm } from "@/components/ui/form/fcltReg/pbnstReg/buseReg/component";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@common/components";
 import {   PbnstMngForm} from "@/components/ui/form/fcltReg/pbnstReg/mngReg/component";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import type { ruseFcltType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg";


 export default function PublicReuseFaciltyInsert() {
-  const { pubFac } = useWrStore((state) => state);
+  const { pubFac ,  pubMng,mngMainValue} = useWrStore((state) => state);
  const { pubFacHeadList, publicReuseFacilityData } = pubFac;
+  const { ruseFclt } = pubMng;
+
+  const [currentTab, setCurrentTab] = useState<string>('mng');
+  const [fcltMng, setFcltMng] = useState<ruseFcltType[]>();

-  const [swtrmtFcltFk, setSwtrmtFcltFk] = useState<string>()
  const searchDiv = "하수재이용시설 ";
  const selectBox = [
    { text: "서울하수처리시설", val: "1_hasu" },
@@ -31,10 +35,20 @@ export default function PublicReuseFaciltyInsert() {
    console.log(val);
  };
  const cellClick=(val:number)=>{
+    let data 
+    if(publicReuseFacilityData[val]) {
+       data =ruseFclt.filter((item)=>  item.swtrmtFcltFk===publicReuseFacilityData[val]?.swtrmtFcltFk)
+       setFcltMng(data);

-    if(publicReuseFacilityData[val])setSwtrmtFcltFk(publicReuseFacilityData[val]?.swtrmtFcltFk)
-        
+    } 
  }
+const resetContents = () => {
+    setFcltMng([]); // 빈 배열로 설정하여 신규 모드로 전환
+  };
+
+  const handleTabChange = (value: string) => {
+    setCurrentTab(value);
+  };

  return (
    <>
@@ -71,15 +85,22 @@ export default function PublicReuseFaciltyInsert() {
        <div className="col-span-1 pr-6 max-h-full overflow-y-scroll">


-          
-        <Tabs defaultValue="mng">
-        <TabsList>
-          <TabsTrigger value="mng">운영정보</TabsTrigger>
-          <TabsTrigger value="buse">시설현황</TabsTrigger>
-        </TabsList>
-        <TabsContent className="max-h-full" value="mng">
+       
+        <Tabs defaultValue="mng" onValueChange={handleTabChange}>
+          <div className="flex justify-between items-center">
+            <TabsList>
+              <TabsTrigger value="mng">운영정보</TabsTrigger>
+              <TabsTrigger value="buse">시설현황</TabsTrigger>
+            </TabsList>
+            <Button className="rounded-lg" onClick={resetContents}>
+              신규등록
+            </Button>
+          </div>
+          <TabsContent className="max-h-full" value="mng">
            <ScrollArea>
-                <PbnstMngForm swtrmtFcltFk={swtrmtFcltFk?swtrmtFcltFk :''}/>
+                <PbnstMngForm 
+                  data={fcltMng || []} 
+                />
              </ScrollArea>
        </TabsContent>
        <TabsContent value="buse">
@@ -24,7 +24,7 @@ export type publicReuseFacilityType = {
  register?: string;
  swtrmtFcltFk: string;
 };
-type fcltOperInfoType = {
+export type fcltOperInfoType = {
  mng: string;
  subCo: string;
  startDay: string;
@@ -32,12 +32,14 @@ type fcltOperInfoType = {
  pbnstRuseFcltPk: string;
 };

-type ruseFcltType = {
+export type ruseFcltType = {
  swtrmtFcltFk: string;
  pbnstRuseFcltPk:string;
  fcltNm:string;
  fcltCpct: number;
  swtrmtCpct: number;
+  ruseCpct:number;
+  splyExtraCpct:number;
 };
 const selectLabel: selectLabel[] = [{ text: "test", val: "1" }];

@@ -53,11 +55,11 @@ const pubFacHeadList: TableProps[] = [
 ];

 const ruseFclt: ruseFcltType[] = [
-  { swtrmtFcltFk: "a", fcltCpct: 1000000, swtrmtCpct: 1000000 ,pbnstRuseFcltPk:'aa',fcltNm:'하수1'},
-  { swtrmtFcltFk: "a", fcltCpct: 1300000, swtrmtCpct: 1300000 ,pbnstRuseFcltPk:'ab',fcltNm:'하수2'},
+  { swtrmtFcltFk: "a", fcltCpct: 1000000, swtrmtCpct: 1000000 ,pbnstRuseFcltPk:'aa',fcltNm:'하수1',ruseCpct: 1, splyExtraCpct: 2 },
+  { swtrmtFcltFk: "a", fcltCpct: 1300000, swtrmtCpct: 1300000 ,pbnstRuseFcltPk:'ab',fcltNm:'하수2',ruseCpct: 3, splyExtraCpct: 4 },

-  { swtrmtFcltFk: "b", fcltCpct: 2000000, swtrmtCpct: 2000000 ,pbnstRuseFcltPk:'bb',fcltNm:'재이용1'},
-  { swtrmtFcltFk: "b", fcltCpct: 2300000, swtrmtCpct: 2300000 ,pbnstRuseFcltPk:'ba',fcltNm:'재이용2'},
+  { swtrmtFcltFk: "b", fcltCpct: 2000000, swtrmtCpct: 2000000 ,pbnstRuseFcltPk:'bb',fcltNm:'재이용1',ruseCpct: 1, splyExtraCpct: 2 },
+  { swtrmtFcltFk: "b", fcltCpct: 2300000, swtrmtCpct: 2300000 ,pbnstRuseFcltPk:'ba',fcltNm:'재이용2' ,ruseCpct: 3, splyExtraCpct: 4 },
 ];
 const pubMngUpHeadList: TableUpperProps[] = [
  { id: "mng", title: "운영방식" },
@@ -173,6 +175,8 @@ export type pubFacState = {
    rprcsCd: selectLabel[];
    buseMet: selectLabel[];
    rprcLoCd: selectLabel[];
+
+    ruseFclt:ruseFcltType[];
  };
  pubMng:{
    //isInit:boolean;
@@ -202,6 +206,7 @@ export const pubFacStateExport: pubFacState = {
    rprcsCd: rprcsCd,
    buseMet: buseMet,
    rprcLoCd: rprcLoCd,
+    ruseFclt:ruseFclt,
  },
  pubMng:{
   // isInit: false,
@@ -229,7 +234,11 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
          
          pubMng:{
            ...state.pubMng,
-            ruseFclt:state.pubMng.ruseFclt.filter((item)=>item.swtrmtFcltFk===swtrmtFcltFk)
+            ruseFclt:state.pubMng.ruseFclt.filter((item)=>
+              
+                  item.swtrmtFcltFk===swtrmtFcltFk
+                
+             )
          }
        } 
    }),
@@ -32,7 +32,7 @@ const formSchema = z.object({
 }
 export function PbnstBuseForm() {
  const { pubFac } = useWrStore((state) => state);
-  const { pubMngUpHeadList, pubMngFacData,erctUswtrCd,cyclCd,seCd,buseCd,rprcsCd,buseMet,rprcLoCd} = pubFac;
+  const { pubMngUpHeadList, erctUswtrCd,cyclCd,seCd,buseCd,rprcsCd,buseMet,rprcLoCd} = pubFac;
 const nodeList = headMakeColSpan(pubMngUpHeadList);


@@ -2,7 +2,6 @@

 import { SelectBox } from "@common/business_components";
 import {
-  DatePicker,
  FileUpload,
  FormUi,
  UiTable,
@@ -18,74 +17,67 @@ import {
  selectClass,
  type TableUpperProps,
 } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
+import type { fcltOperInfoType, ruseFcltType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg";

-interface mainData {
-  swtrmtFcltFk: string;
-}
+const formSchema = z.object({
+  fcltNm: z.string().min(2).max(50),
+  psysScdg: z.string(),
+  designScdg: z.string(),
+  fcltCpct: z.number(),
+  swtrmtCpct: z.number(),
+  ruseCpct: z.number(),
+  splyExtraCpct: z.number(),
+});

-export function PbnstMngForm(swtrmtFcltFk: mainData) {
-  const { pubFac, pubMng, mngMainValue, mngTableValue } = useWrStore((state) => state);
+
+
+export function PbnstMngForm({ data }: { data: ruseFcltType[] })  {
+  const { pubFac, pubMng } = useWrStore((state) => state);
  const { pubMngUpHeadList, isInit } = pubFac;
-  const { fcltOperInfo, ruseFclt } = pubMng;
-  const [fcltSwtrm, setFcltSwtrm] = useState({
-    text: "",
-    val: "",
-    fcltCpct: 0,
-    swtrmtCpct: 0,
-  });
-
-  const fcltNmArr = ruseFclt.map((item) => ({
-    text: item.fcltNm,
-    val: item.pbnstRuseFcltPk,
-  }));
-
-  useEffect(() => {
-    const cell = swtrmtFcltFk;
-    const ruseFcltData = ruseFclt.find(
-      (el) => el.swtrmtFcltFk === cell?.swtrmtFcltFk
-    );
-    if (ruseFcltData !== undefined)
-      setFcltSwtrm({
-        text: ruseFcltData.fcltNm,
-        val: ruseFcltData.pbnstRuseFcltPk,
-        fcltCpct: ruseFcltData.fcltCpct,
-        swtrmtCpct: ruseFcltData.swtrmtCpct,
-      });
-    else setFcltSwtrm({ text: "", val: "", fcltCpct: 0, swtrmtCpct: 0 });
-  }, [swtrmtFcltFk]);
-
-  const formSchema = z.object({
-    fcltNm: z.string().min(2).max(50),
-    psysScdg: z.string(),
-    designScdg: z.string(),
-    fcltCpct: z.number(),
-    swtrmtCpct: z.number(),
-    ruseCpct: z.number(),
-    splyExtraCpct: z.number(),
-  });
+  const { fcltOperInfo } = pubMng;
+  const [ruseOperData, setRuseOperData] = useState<fcltOperInfoType[]>();
+  const [files, setFiles] = useState(null);

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      fcltNm: "",
-      psysScdg: "",
-      designScdg: "",
+      fcltNm: '',
+      psysScdg: '',
+      designScdg: '',
      fcltCpct: 0,
      swtrmtCpct: 0,
      ruseCpct: 0,
      splyExtraCpct: 0,
    },
  });
+  
+  const selectOptions = data?.map((item) => ({text: item.fcltNm, val: item.pbnstRuseFcltPk})) || [{text:'없음', val:'1'}];

+  const onSelectValue = (val: string) => {
+    const selectedData = data?.find((item) => item.pbnstRuseFcltPk === val);
+    if (selectedData) {
+      form.reset(selectedData);
+      setRuseOperData(fcltOperInfo.filter((item) => item.pbnstRuseFcltPk === val));
+    }
+  };
+
+  const newReuseFclt = () => {
+    form.reset();
+    setRuseOperData([{}] as fcltOperInfoType[]);
+  };
+
+  useEffect(() => {
+    if (isInit) {
+      form.reset();
+      setRuseOperData([{}] as fcltOperInfoType[]);
+    }
+  }, [isInit]);
+
+  // 2. Define a submit handler.
  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values);
  }

-  const onSelectValue = (val: string) => {
-    console.log(val);
-    mngTableValue(val);
-  };
-
  const headMakeColSpan = (upHeadList: TableUpperProps[]) => {
    return (
      <>
@@ -112,10 +104,7 @@ export function PbnstMngForm(swtrmtFcltFk: mainData) {
      </>
    );
  };
-
  const nodeList = headMakeColSpan(pubMngUpHeadList);
-  const newReuseFclt = () => {};
-  const [files, setFiles] = useState(null);

  return (
    <div className="pl-3 pb-[10.3vh]">
@@ -130,23 +119,23 @@ export function PbnstMngForm(swtrmtFcltFk: mainData) {
                  name="fcltNm"
                  render={({ field }) => (
                    <FormUi label="">
-                      <SelectBox
-                        label=""
-                        selectArray={fcltNmArr}
-                        className={"w-[300px]"}
-                        selectClass={selectClass}
-                        onSelectValue={onSelectValue}
-                        {...field}
-                      />
+                      {data.length === 0 ? (
+                        <Input placeholder="시설명을 입력하세요" {...field} />
+                      ) : (
+                        <SelectBox
+                          label=""
+                          selectArray={selectOptions}
+                          className={""}
+                          selectClass={selectClass}
+                          onSelectValue={onSelectValue}
+                          {...field}
+                        />
+                      )}
                    </FormUi>
                  )}
                />
              </div>
-              <Button className="rounded-lg" onClick={newReuseFclt}>
-                신규등록
-              </Button>
            </div>
-
            <div className="grid grid-cols-12 gap-4 my-4">
              <div className="col-span-6">
                <FormField
@@ -158,7 +147,7 @@ export function PbnstMngForm(swtrmtFcltFk: mainData) {
                        files={files}
                        setFiles={setFiles}
                        fileTypes="PDF"
-                      />
+                      ></FileUpload>
                    </FormUi>
                  )}
                />
@@ -173,7 +162,7 @@ export function PbnstMngForm(swtrmtFcltFk: mainData) {
                        files={files}
                        setFiles={setFiles}
                        fileTypes="PDF"
-                      />
+                      ></FileUpload>
                    </FormUi>
                  )}
                />
@@ -182,11 +171,11 @@ export function PbnstMngForm(swtrmtFcltFk: mainData) {

            <div className="flex justify-between items-center mx-3 mb-3">
              <h1 className="pl-3 text-xl">○ 재이용시설 운영정보</h1>
-              <Button className="rounded-lg">추가등록</Button>
+              <Button type="button" className="rounded-lg" onClick={newReuseFclt}>추가등록</Button>
            </div>
            <div>
              <UiTable
-                tableData={fcltOperInfo}
+                tableData={ruseOperData?ruseOperData:[]}
                headlist={pubMngUpHeadList}
                pageSize={100}
                total={-1}
@@ -196,7 +185,6 @@ export function PbnstMngForm(swtrmtFcltFk: mainData) {
                {nodeList}
              </UiTable>
            </div>
-
            <div>
              <h1 className="pl-3 text-xl mb-3">○ 재이용수 공급 가능량</h1>
              <div className="grid grid-cols-12 gap-4">
@@ -206,34 +194,22 @@ export function PbnstMngForm(swtrmtFcltFk: mainData) {
                    name="fcltCpct"
                    render={({ field }) => (
                      <FormUi label="시설용량(m³/일)">
-                        <Input
-                          placeholder=""
-                          type="number"
-                          {...field}
-                          value={fcltSwtrm.fcltCpct !== 0 ? fcltSwtrm.fcltCpct : 0}
-                        />
+                        <Input placeholder="" type="number" {...field} />
                      </FormUi>
                    )}
                  />
                </div>
-
                <div className="col-span-3">
                  <FormField
                    control={form.control}
                    name="swtrmtCpct"
                    render={({ field }) => (
                      <FormUi label="하수처리량(m³/일)">
-                        <Input
-                          placeholder=""
-                          type="number"
-                          {...field}
-                          value={fcltSwtrm.swtrmtCpct !== 0 ? fcltSwtrm.swtrmtCpct : 0}
-                        />
+                        <Input placeholder="" type="number" {...field} />
                      </FormUi>
                    )}
                  />
                </div>
-
                <div className="col-span-3">
                  <FormField
                    control={form.control}