하수재이용 운영정보 데이터 출력 수정

2025-05-27 10:43:50 +09:00
parent e336099932
commit 6dba031d8d
3 changed files with 122 additions and 100 deletions
@@ -28,13 +28,6 @@ export type publicReuseFacilityType = {
  register?: string;
  swtrmtFcltFk: string;
 };
-export type fcltOperInfoType = {
-  mng: string;
-  subCo: string;
-  startDay: string;
-  endDay: string;
-  pbnstRuseFcltPk: string;
-};

 export type ruseFcltType = {
  swtrmtFcltFk: string;
@@ -74,8 +67,8 @@ const fcOperSchema = z.object({
  pbnstRuseFcltFk: z.number().default(0),
  operMthd: z.string(),
  rprtvBzenty: z.string(),
-  bgngDt: z.string(),
-  endDt: z.string(),
+  bgngDt: z.date().default(new Date()),
+  endDt: z.date().default(new Date()),
  regDt: z.date().nullish(),
  rgtr: z.string(),
  mdfcnDt: z.date(),
@@ -204,6 +197,7 @@ export const pbnstRegZod = z.object({
  fcFiles: z.array(fcFileSchema).default([]),
  fcBizs: z.array(fcBizSchema).default([]),
  fcOpers: z.array(fcOperSchema).default([]),
+  hasuhasu: z.number().default(0),
 });

 const pubHasuZod = z.object({
@@ -222,6 +216,7 @@ export const exampleData = {
  pbnstRuseFcltPk: 1,
  swtrmtFcltFk: "11000SW001R",
  ruseUtztnFcltNm: "재이용시설 A",
+  hasuhasu: 0,
  fcltCpct: "100",
  ruseCpct: "90",
  splyExtraCpct: "10",
@@ -444,8 +439,8 @@ export const exampleData = {
      pbnstRuseFcltFk: 1,
      operMthd: "위탁",
      rprtvBzenty: "기관명",
-      bgngDt: "20230930",
-      mdfcnDt:"20231230",
+      bgngDt: new Date("2023-09-30"),
+      endDt: new Date("2023-12-31"),
      rgtr: TEST_UUID,
      mdfr: TEST_UUID,
    },
@@ -454,7 +449,8 @@ export const exampleData = {
      pbnstRuseFcltFk: 1,
      operMthd: "직영",
      rprtvBzenty: "기관명",
-      bgngDt: "20241130",
+      bgngDt: new Date("2024-11-30"),
+      endDt: new Date("2024-12-31"),
      rgtr:TEST_UUID ,
      mdfr: TEST_UUID,
    },
@@ -5,7 +5,7 @@ import { FileUpload, FormUi, UiTable } from "@common/business_components/ui";
 import { Form, FormField } from "@common/business_components/ui/form";
 import { Button, Input, TableHead, TableRow } from "@common/components";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect, useState } from "react";
+import { use, useEffect, useRef, useState } from "react";
 import { set, useFieldArray, useForm } from "react-hook-form";
 import { nullable, z } from "zod";
 import { useWrStore } from "@/app/store";
@@ -51,7 +51,10 @@ export function PbnstMngForm({ data }: { data: customPbnst }) {

    setProgress(Number(percentage));
  };
+   

+
+  const ref = useRef<operType[] | null>(data.fcOpers ?? null);
  const form = useForm<z.infer<typeof pbnstRegZod>>({
    resolver: zodResolver(pbnstRegZod),
    defaultValues: {...data},
@@ -66,12 +69,12 @@ export function PbnstMngForm({ data }: { data: customPbnst }) {

  useEffect(() => {
      form.reset(data);
-      // setRuseOperData(data.fcOpers);
+      setRuseOperData(data.fcOpers);
  }, [data]);

  // 2. Define a submit handler.
  function onSubmit(values: z.infer<typeof pbnstRegZod>) {
-    console.log(values);
+    console.log("submit",values);

    pbnstUpdate(values);
  }
@@ -141,6 +144,7 @@ export function PbnstMngForm({ data }: { data: customPbnst }) {
                  tableData={fcOpersField}
                  headList={pbnst.pbnstMngUpHeadList}
                  upHeadList={pbnst.pbnstMngNm}
+                  ref={ref}
                ></RuseMngTable>
              </div>
            </div>
@@ -161,7 +165,7 @@ export function PbnstMngForm({ data }: { data: customPbnst }) {
                <div className="col-span-3">
                  <FormField
                    control={form.control}
-                    name="swtrmtCpct"
+                    name="hasuhasu"
                    render={({ field }) => (
                      <FormUi label="하수처리량(m³/일)">
                        <Input placeholder="" type="number"  onChange={field.onChange} value={field.value} />
@@ -1,5 +1,6 @@
 import { headMakeprfmnc } from "@/app/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
 import type { chHeadType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList";
+import type { customPbnst, fcltOperInfoType, fcOrgwtType, operType, ppInstlType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
 import { selectClass, type TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import { DatePicker, SelectBox, type SelectDataType } from "@common/business_components/ui";
 import {
@@ -12,93 +13,114 @@ import {
  TableRow,
 } from "@common/components/ui";
 import moment from "moment";
-import { useState } from "react";
+import React, { useEffect, useState } from "react";

-export default function RuseMngTable({
-  tableData,
-  headList,
-  upHeadList,
-  code = [],
-}: {
+type RuseMngTableProps = {
  tableData: any[];
  headList: TableUpperProps[];
-  upHeadList?: chHeadType[];
-  code?:{name:string, val:SelectDataType[] }[]
-}) {
-const [tableState, setTableState] = useState([...tableData]);
+  upHeadList: chHeadType[];
+  code?: { name: string, val: SelectDataType[] }[];
+};

-  return (
-    <>
-      <Table variant="secondary">
-        <TableHeader className="font-bold">
-          {upHeadList ? (
-            headMakeprfmnc(headList, upHeadList)
-          ) : (
-            <TableRow key={"table-row-test"}>
-              {headList.map((head) => (
-                <TableHead  key={"table-head-row " + head.id}  className={`border border-gray-600 px-2 py-1 `}>
-                  {head.title}
-                </TableHead>
-              ))}
-            </TableRow>
-          )}
-        </TableHeader>
+const RuseMngTable = React.forwardRef<any[], RuseMngTableProps>(
+  ({
+    tableData,
+    headList,
+    upHeadList,
+    code = []
+  }, ref) => {
+    const [tableState, setTableState] = useState([...tableData]);
+    useEffect(() => {
+      if (ref && typeof ref === "object" && "current" in ref) {
+        ref.current = tableState;
+      }
+    }, [tableState]);

-        <TableBody>
-          {tableState.map((item, i) => (
-            <TableRow key={i}>
-              {headList.map((head, j) => (
-                <TableCell
-                  key={`${head.id}-${j}`}
-                  className="text-center whitespace-nowrap"
-                  onClick={() => {}}
-                >
-                  {head.edit === true ? (
-                    <Input
-                      className={`${head.type === "number" ? "text-right" : "text-center"} !text-xl`}
-                      type={head.type}
-                      onChange={(e) => {}}
-                      value={item[head.id] || ""}
-                    />
-                  ) : head.type === "select" ? (
-                    <SelectBox
-                    label=""
-                    selectArray={code.find(item => item.name === head.selectData)?.val ?? []}
-                    value={
-                      item[head.id]
-                    }
-                    className={""}
-                    selectClass={selectClass}
-                    onSelectValue={(val) => {
-                      setTableState((prev)=>{
-                        prev[i][head.id] = val
-                        return [...prev]
-                      })
-                    }}
-                  ></SelectBox>
-                  ) : head.type === "date" ? (
-                    <DatePicker
-                      mode="single"
-                      field={{
-                        value:
-                          item.value && !isNaN(new Date(item.value).getTime())
-                            ? new Date(item.value)
-                            : new Date(), // Provide a default Date value
-                        onChange: (date) => {
-                          item[head.id] = moment(date).format('yyyyMMdd');
+    useEffect(() => {
+      setTableState(tableData);
+    }, [tableData]);
+    return (
+      <>
+        <Table variant="secondary">
+          <TableHeader className="font-bold">
+            {upHeadList ? (
+              headMakeprfmnc(headList, upHeadList)
+            ) : (
+              <TableRow key={"table-row-test"}>
+                {headList.map((head) => (
+                  <TableHead key={"table-head-row " + head.id} className={`border border-gray-600 px-2 py-1 `}>
+                    {head.title}
+                  </TableHead>
+                ))}
+              </TableRow>
+            )}
+          </TableHeader>
+
+          <TableBody>
+            {tableState.map((item, i) => (
+              <TableRow key={i}>
+                {headList.map((head, j) => (
+                  <TableCell
+                    key={`${head.id}-${j}`}
+                    className="text-center whitespace-nowrap"
+                    onClick={() => { }}
+                  >
+                    {head.edit === true ? (
+                      <Input
+                        className={`${head.type === "number" ? "text-right" : "text-center"} !text-xl`}
+                        type={head.type}
+                        onChange={(txt) => {
+                          setTableState(prev => {
+                              const next = [...prev];
+                              next[i] = { ...next[i], [head.id]: txt.target.value };
+                              return next;
+                            })
+                         }}
+                        value={tableState[i][head.id] || ""}
+                      />
+                    ) : head.type === "select" ? (
+                      <SelectBox
+                        label=""
+                        selectArray={code.find(item => item.name === head.selectData)?.val ?? []}
+                        value={
+                          item[head.id]
                        }
-                      }}
-                      selectClass={"w-full"}
-                    />
-                  ) : (
-                    `${item[head.id] || ""}`
-                  )}
-                </TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </>
-  );
-}
+                        className={""}
+                        selectClass={selectClass}
+                        onSelectValue={(val) => {
+                          setTableState((prev) => {
+                            prev[i][head.id] = val
+                            return [...prev]
+                          })
+                        }}
+                      ></SelectBox>
+                    ) : head.type === "date" ? (
+                      <DatePicker
+                        mode="single"
+                        field={{
+                          value:
+                             tableState[i][head.id], // Provide a default Date value
+                          onChange: (date) => {
+                            setTableState(prev => {
+                              const next = [...prev];
+                              next[i] = { ...next[i], [head.id]: date };
+                              return next;
+                            })
+                            }
+                        }
+                        }
+                        selectClass={"w-full"}
+                      />
+                    ) : (
+                      `${item[head.id] || ""}`
+                    )}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </>
+    );
+  })
+export default RuseMngTable;