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-06-12 20:15:36 +09:00
parent aea80936e4
commit c80c9203d8
3 changed files with 132 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/business_components/src/ui/sdmInsertForm/form.tsx
+106 -13
View File
@@ -2,10 +2,43 @@
import { SelectBox } from "../select";
import { Input } from "@common/components";
import { FormUi } from "../form_ui";
import { useCallback, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import type { ControllerRenderProps, UseFormReturn } from "react-hook-form";
import { SdmSearchForm } from "./sdmNameBox";
import type { DemandCompType } from "../../../../../../apps/dm/app/store/sdmMng";
import { set } from "date-fns";
// 수요처 정보
export type DemandCompType = {
index : number | '';
dmdInfoPk : string | '';
dmdInfoFk : string | '';
bzmnNo : string | '';
dmdCoNm : string | '';
daddr : string | '';
telno : string | '';
rgtr : string | '';
useUsgCd : string | '';
ctpvCd : string | '';
sggCd : string | '';
dmdAplyPswd : string | '';
wntUntprc : number | '';
dmndTmng : Date | '';
dmndQty : number | '';
grssClfg : number | '';
tn : number | '';
combResdch : number | '';
tph : number | '';
trbt : number | '';
ph : number | '';
blgcOxygDmndQnt : number | '';
clIonQnt : number | '';
smll : number | '';
cdtnv : number | '';
crmty : number | '';
rmrk : string | '';
reqDt : string | '';
}
type SelectDataType = {
text: string;
@@ -32,16 +65,19 @@ interface SdmRegFormProps {
dataList: DemandCompType[];
rtnValue: (searchText: string, pageCnt: number) => void;
setIsDuplicate: (value: boolean) => void;
updateList?:DemandCompType
}
type FieldComponent = (field: ControllerRenderProps<FormSchema, keyof FormSchema>) => JSX.Element;
export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigunData, dataList, rtnValue, setIsDuplicate }: SdmRegFormProps) {
export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigunData, dataList, rtnValue, setIsDuplicate ,updateList}: SdmRegFormProps) {
const [sidoValue, setSidoValue] = useState<string>('');
const [sigunValue, setSigunValue] = useState<string>('');
const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(true);
const [orgBznmNo, setOrgBznmNo] = useState<string>('');
const [updateCoNm, setUpdateNm] = useState<string >('')
const initializeSigunData = useCallback((sidoCd: string) => {
if (sidoCd === '0') {
@@ -62,6 +98,7 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
type: string,
field: ControllerRenderProps<FormSchema, keyof FormSchema> | undefined
) => {
if(!updateList?.dmdInfoPk)
switch (type) {
case "ctpvCd":
initializeSigunData(val);
@@ -77,7 +114,7 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
form.setValue('bznmTotNo', '');
break;
}
}, [initializeSigunData, form]);
}, [initializeSigunData, form,updateList]);
const handleCheckboxChange = useCallback((checked: boolean) => {
setIsBznmTotNoDisabled(checked);
@@ -90,6 +127,7 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
const setRtnData = useCallback((item: DemandCompType) => {
const rtnCompData = item;
form.setValue('dmdCoNm', rtnCompData?.dmdCoNm || '');
form.setValue('dmdInfoPk', rtnCompData?.dmdInfoPk.substring(0,10) || '');
form.setValue('bznmTotNo', rtnCompData?.dmdInfoPk.substring(10,14)==='0000' ? '' : rtnCompData?.dmdInfoPk.substring(10,14));
@@ -126,7 +164,7 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
const bznNoChange = useCallback((e: React.ChangeEvent<HTMLInputElement>, noType: string, field?: ControllerRenderProps<FormSchema, keyof FormSchema>) => {
const value = e.target.value;
if(noType === 'dmdInfoPk') {
if(orgBznmNo.substring(0,10) === value) {
setIsDuplicate(true);
@@ -144,6 +182,27 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
}
}, [orgBznmNo, setIsDuplicate]);
useEffect(() => {
if(updateList?.dmdInfoPk){
form.reset(updateList)
if(updateList?.dmdInfoPk.slice(10,14) !== '0000') {
handleCheckboxChange( false);
form.setValue('bznmTotNo', updateList?.dmdInfoPk.slice(10,14));
} else {
handleCheckboxChange( true);
}
form.setValue('dmdInfoPk', updateList?.dmdInfoPk.slice(0,10));
setUpdateNm(updateList?.dmdCoNm)
// setSigunValue(updateList?.sggCd)
}else{
handleCheckboxChange( true);
}
}, [updateList,form]);
useEffect(() => {
},[form.formState.errors])
const formFields: Array<{
name: keyof FormSchema;
label: string;
@@ -153,28 +212,51 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
name: "ctpvCd",
label: "시도",
component: (field) => (
<SelectBox
updateList?.dmdInfoPk ? (
<Input
placeholder="시도"
type="text"
className="!text-xl text-gray-600"
onChange={(e) =>{field.onChange(e.target.value)} }
value={ selectSidoData.find(item => item.val === field.value?.trim() )?.text??''}
readOnly={!!updateList?.dmdInfoPk}
/>
) : (
<SelectBox
selectClass={undefined}
label=""
selectArray={selectSidoData}
onSelectValue={(val) => onSelectValue(val.toString(), 'ctpvCd', field)}
onSelectValue={(val) => onSelectValue(val.toString(), 'ctpvCd', field??'')}
className=""
value={sidoValue}
/>
)
)
},
{
name: "sggCd",
label: "시군구",
component: (field) => (
updateList?.dmdInfoPk ? (
<Input
placeholder="시도"
type="text"
className="!text-xl text-gray-600"
onChange={(e) =>{field.onChange(e.target.value)} }
value={selectSigunData.find(item => item.val === field.value?.trim() )?.text??''}
readOnly={!!updateList?.dmdInfoPk}
/>
) : (
<SelectBox
selectClass={undefined}
selectClass={"!text-xl text-gray-600"}
label=""
selectArray={filteredSigunData}
onSelectValue={(val) => onSelectValue(val.toString(), 'sggCd', field)}
className=""
value={sigunValue}
/>
)
)
},
{
@@ -184,7 +266,7 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
<SdmSearchForm
rtnData={setRtnData}
label="수요처명"
initValue={''}
initValue={updateCoNm}
dataList={dataList}
rtnValue={setRtnValue}
rtnText={setRtnText}
@@ -200,8 +282,9 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
placeholder="사업자등록번호를 입력하세요"
type="text"
className="!text-xl text-gray-600"
{...field}
onChange={(e) => bznNoChange(e, 'dmdInfoPk', field)}
value={field.value}
readOnly={!!updateList?.dmdInfoPk}
/>
)
},
@@ -219,8 +302,10 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
type="text"
className="!mt-5 !text-xl text-gray-600"
disabled={isBznmTotNoDisabled}
{...field}
onChange={(e) => bznNoChange(e, 'bznmTotNo', field)}
// {...field}
value={ field.value}
readOnly={!!updateList?.dmdInfoPk}
/>
</FormUi>
)
@@ -249,6 +334,7 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
/>
)
},
{
name: "dmdAplyPswd",
label: "패스워드",
@@ -261,11 +347,18 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
/>
)
}
];
]
return (
<>
{formFields.map(({ name, label, component }) => (
{formFields.filter((item)=>
{if(updateList?.dmdInfoPk){
return item.name !== 'dmdAplyPswd'
}else{
return item
}
})
.map(({ name, label, component }) => (
<FormField
key={String(name)}
control={form.control}
packages/common/business_components/src/ui/sdmInsertForm/index.tsx
+19 -15
View File
@@ -1,17 +1,13 @@
"use client";
/* import { useDmStore } from "@/app/store"; */
import { SdmRegForm } from "./form";
import { SdmRegForm, type DemandCompType } from "./form";
import { Button } from "@common/components/ui";
import { zodResolver } from "@hookform/resolvers/zod";
/* import { useRouter } from "next/navigation"; */
import { useCallback, useEffect, useState } from "react";
import { FormProvider, useForm, type SubmitHandler } from "react-hook-form";
import { toast, Toaster } from "sonner";
/* import { Toaster, toast } from "react-hot-toast"; */
import * as z from "zod";
import type { SelectDataType } from "../search_input_select";
import type { DemandCompType } from "../../../../../../apps/dm/app/store/sdmMng";
type thisProps = {
selectSidoData: SelectDataType[];
@@ -20,9 +16,10 @@ type thisProps = {
rtnValue: (searchText: string, pageCnt: number) => void;
rtnInputData: (data: DemandCompType) => void;
bodyClassNm?: string;
updateList?:DemandCompType
}
const createFormSchema = (isBznmTotNoDisabled: boolean, isDuplicate: boolean) => z.object({
const createFormSchema = (isBznmTotNoDisabled: boolean, isDuplicate: boolean ,updateList?:DemandCompType) => z.object({
ctpvCd: z.string().min(1, "시/도를 선택해주세요"),
sggCd: z.string().min(1, "시/군/구를 선택해주세요"),
dmdCoNm: z.string()
@@ -43,11 +40,14 @@ const createFormSchema = (isBznmTotNoDisabled: boolean, isDuplicate: boolean) =>
.max(40, "주소는 40자 이내로 입력해주세요"),
telno: z.string()
.min(8, "전화번호는 8자 이상 입력해주세요")
.max(12, "전화번호는 12자 이내로 입력해주세요")
.max(11, "전화번호는 11자 이내로 입력해주세요")
.regex(/^[0-9-]+$/, "전화번호는 숫자와 하이픈(-)만 입력 가능합니다"),
rgtr: z.string().optional(),
dmdAplyPswd: z.string().optional()
dmdAplyPswd : updateList?.dmdInfoPk // 업데이트일경우
? z.string().optional() // 패스워드는 선택 사항이며 길이 제한 없음
: z.string().optional()
.refine((val) => !val || (val.length >= 8 && val.length <= 16), "패스워드는 8자 이상 16자 이내로 입력해주세요"),
});
type FormSchema = z.infer<ReturnType<typeof createFormSchema>>;
@@ -100,13 +100,13 @@ const defaultValues: FormSchema = {
}, [insertSdmData]);
*/
export default function SdmInsertForm({selectSidoData, selectSigunData, dataList, rtnValue, rtnInputData,bodyClassNm}: thisProps) {
export default function SdmInsertForm({selectSidoData, selectSigunData, dataList, rtnValue, rtnInputData,bodyClassNm, updateList}: thisProps) {
/* const { insertSdmData } = useDmStore((state) => state);
const router = useRouter(); */
const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(true);
const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(false);
const [isDuplicate, setIsDuplicate] = useState(false);
const formSchema = createFormSchema(isBznmTotNoDisabled, isDuplicate);
const formSchema = createFormSchema(isBznmTotNoDisabled, isDuplicate, updateList );
const form = useForm<FormSchema>({
resolver: zodResolver(formSchema),
@@ -119,7 +119,7 @@ export default function SdmInsertForm({selectSidoData, selectSigunData, dataList
// 체크박스 상태가 변경될 때마다 bznmTotNo 필드의 에러를 초기화
useEffect(() => {
if (isBznmTotNoDisabled) {
if (isBznmTotNoDisabled===true) {
form.clearErrors('bznmTotNo');
form.setValue('bznmTotNo', '');
}
@@ -145,13 +145,16 @@ export default function SdmInsertForm({selectSidoData, selectSigunData, dataList
dmdInfoPk,
bzmnNo: data.dmdInfoPk,
};
console.log(' formData ', formData)
console.log(formData);
/* await insertSdmData(formData); */
rtnInputData(formData as DemandCompType);
//router.push(`/pages/sdmMng/sdmInfoInsert?${queryParams.toString()}`);
} catch (error) {
console.error('Error submitting form:', error);
toast.error('수요처 등록에 실패했습니다.');
}
};
@@ -174,6 +177,7 @@ export default function SdmInsertForm({selectSidoData, selectSigunData, dataList
dataList={dataList}
rtnValue={setRtnValue}
setIsDuplicate={setIsDuplicate}
updateList={updateList}
/>
<div className="flex justify-center pt-4">
<Button
packages/common/business_components/src/ui/sdmInsertForm/sdmNameBox.tsx
+7 -1
View File
@@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import type { DemandCompType } from "../../../../../../apps/dm/app/store/sdmMng";
import type { DemandCompType } from './form';
export type thisProps = {
label: string | undefined;
@@ -53,6 +53,12 @@ export const SdmSearchForm = ({label=undefined, initValue=undefined, rtnValue=()
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
useEffect(() => {
if(initValue&& initValue?.length>0){
setTextValue(initValue)
}
},[initValue])
return (
<div ref={wrapperRef}>