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-03-28 18:00:56 +09:00
parent a4350c9788
commit ca30fc9a33
5 changed files with 225 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/store/ruseFcltMng/fcltReg/bdstReg/index.tsx
+88
View File
@@ -0,0 +1,88 @@
import { getFectch } from "@/components/lib/api";
type bdstType={
bdstInfoPk: number,
ctpvCd: number,
sggCd: number,
daddr: string,
bdstNm: string,
frstArchPrmsnDt: string,
archArea : number
}
type TableUpperProps = {
id: string;
title: string;
upName?: string;
upSequnce?: number;
};
const moUpHeadList: TableUpperProps[] = [
{ id: "cityText", title: "시도" },
{ id: "sggText", title: "시군구" },
{ id: "bdstNm", title: "시설명" },
{ id: "daddr", title: "위치" },
{ id: "frstArchPrmsnDt", title: "최초건축허가일" },
{ id: "archArea", title: "건축면적", },
{ id: "archChgYn", title: "여부", upName: "upChangeRe", upSequnce: 1 },
{ id: "archChgPrmsnDt", title: "허가일", upName: "upChangeRe", upSequnce: 2 },
{ id: "archChgArea", title: "면적", upName: "upChangeRe", upSequnce: 3 },
];
const bdstBase: bdstType[] = [];
export type bdstFulType = bdstState & bdstActions;
export type bdstState = {
bdst: {
bdstBase: bdstType[];
moUpHeadList:TableUpperProps[]
};
};
type bdstActions = {
findBdst: (val: string) => Promise<void>;
};
export const bdstStateExport: bdstState = {
bdst: {
bdstBase: bdstBase, // Updated to match the array type
moUpHeadList:moUpHeadList,
},
};
export const bdstActionsExport: (set: any) => bdstActions = (
set: any
) => {
return {
findBdst: async(val:string) =>{
try {
console.log(" val ", val);
// (val!=='' ?"/"+val:'')
const res = await getFectch('wr', "/reuseFc/building/42" +(val!=='' ?"/"+val:''));
console.log("res ", res)
// 여기서 상태 업데이트
return set((state: bdstState) => ({
bdst: {
...state.bdst,
bdstBase:res,
}
}));
} catch (error) {
console.log('error', error);
} finally {
console.log('finally');
}
},
};
};
apps/wr/app/store/store.tsx
+7 -2
View File
@@ -30,26 +30,30 @@ import {
type htdflFacType,
} from "./ruseFcltMng/fcltReg/htdflReg";
import { codeActionExport, comCodeStateExport, getCityCd, getSggCd, type comCodeState, type comCodeType } from "./common/code";
import { bdstActionsExport, bdstStateExport, type bdstFulType, type bdstState } from "./ruseFcltMng/fcltReg/bdstReg";
export type WrStore = comCodeType&
pubFacType &
rainFacType &
rswtFacType &
matDmdType &
htdflFacType;
htdflFacType&
bdstFulType;
export const StoreZus = (
initState: comCodeState&
rainFacState &
pubFacState &
rswtFacState &
matDmdState &
htdflFacState = {
htdflFacState &
bdstState= {
...comCodeStateExport,
...pubFacStateExport,
...rainFacStateExport,
...rswtFacStateExport,
...matDmdStateExport,
...htdflFacStateExport,
...bdstStateExport,
}
) => {
return createStore<WrStore>()((set) => {
@@ -63,6 +67,7 @@ export const StoreZus = (
...matDmdActionsExport(set),
...htdflFacActionsExport(set),
...codeActionExport(set),
...bdstActionsExport(set)
};
});
};
apps/wr/components/ui/form/fcltReg/bdstReg/component.tsx
+81 -3
View File
@@ -2,12 +2,32 @@ import { useWrStore } from "@/app/store";
import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { FormField, FormUi, SelectBox } from "@common/business_components";
import { Button, Input } from "@common/components";
import { useFieldArray } from "react-hook-form";
export default function BdstReg(form: any) {
const { code } = useWrStore((state) => {
return state;
});
const { fields, append, remove } = useFieldArray({
control: form.control,
name: "history"
});
const plusHist = () => {
append({
bdstNm: '',
daddr: '',
bdstUsgCd: ''
});
};
const removeLastItem = () => {
if (fields.length > 0) {
remove(fields.length - 1);
}
};
return (
<>
@@ -165,10 +185,68 @@ export default function BdstReg(form: any) {
<h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4">
중축, 개축, 증축
</h1>
<div className="flex justify-end">
<Button className="mr-4 rounded-lg ">이력추가</Button>
<div className="flex justify-end gap-2">
<Button className="rounded-lg" onClick={plusHist}>이력추가</Button>
<Button className="rounded-lg bg-red-500 text-white" onClick={removeLastItem}>삭제</Button>
</div>
<div className="border-b border-gray-300 my-4"> </div>
{fields.map((field, index) => (
<div key={field.id} className="grid grid-cols-6 gap-2 mt-4">
<div className="col-span-2">
<FormField
control={form.control}
name={`history.${index}.bdstNm`}
render={({ field }) => (
<FormUi label="구분">
<SelectBox
className={""}
selectClass={selectClass}
label={""}
selectArray={code.cityCd}
onSelectValue={(val) => {
field.onChange(val);
}}
value={field.value}
/>
</FormUi>
)}
/>
</div>
<div className="col-span-2">
<FormField
control={form.control}
name={`history.${index}.daddr`}
render={({ field }) => (
<FormUi label="허가일">
<Input
className=""
placeholder="1,000,000"
type="search"
{...field}
/>
</FormUi>
)}
/>
</div>
<div className="col-span-2">
<FormField
control={form.control}
name={`history.${index}.bdstUsgCd`}
render={({ field }) => (
<FormUi label="면적">
<Input
className=""
placeholder="1,000,000"
type="text"
{...field}
/>
</FormUi>
)}
/>
</div>
</div>
))}
<div className="border-b border-gray-300 my-4"> </div>
</>
);
}
apps/wr/components/ui/form/fcltReg/rainReg/component.tsx
+1 -1
View File
@@ -27,7 +27,6 @@ export function RainRegForm({
data: rainRuseBd[];
isModal: boolean;
}) {
console.log(isModal);
const formSchema = isModal
? z.object({ ...rainZod, ...bdstZod })
: z.object(rainZod);
@@ -35,6 +34,7 @@ export function RainRegForm({
const { rain, code } = useWrStore((state) => state);
const { rainFcltCd } = code;
useEffect(() => {
// console.log( " data ", data)
if (data && data.length > 0) {
console.log(data);
const selectedOption = rainFcltCd.find(
apps/wr/components/ui/modal/bdstReg/component.tsx
+48 -21
View File
@@ -4,6 +4,7 @@ import { useWrStore } from "@/app/store";
import {
selectClass,
type bdstType,
type selectArray,
} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { ScrollArea, SearchInput, SelectBox, UiTable } from "@common/business_components";
import { Button, Input } from "@common/components";
@@ -11,41 +12,69 @@ import { useEffect, useState } from "react";
import { RainRegForm } from "../../form/fcltReg/rainReg/component";
export function BdstReg() {
const { rain, code, init } = useWrStore((state) => {
const { rain, code, bdst, findBdst } = useWrStore((state) => {
return state;
});
const [bdstTable, setbdstTable] = useState<bdstType[]>();
const [rainBdstForm, setRainBdstForm] = useState<[]>();
const [rainBdstForm, setRainBdstForm] = useState<bdstType[] | undefined>();
const { bdstObj, rainRuseObj } = rain;
const getCity = (val: string | number) => {
console.log(val);
const [selectSgg, setSelectSgg] = useState<selectArray[] | undefined>()
const [searchTxt, setSearchTxt] = useState<string>()
const getCity = (val: string ) => {
const data = code.sggCd
.filter((item) => String(item.val).substring(0, 2) === val)
.map((item) => ({ ...item, val: String(item.val) })); // Ensure 'val' is a string
setSelectSgg(data);
};
const getSgg = (val: string | number) => {
console.log(val);
};
useEffect(()=>{
// console.log("searchTxt ", searchTxt)
findBdst(searchTxt)
},[searchTxt])
useEffect(() => {
if (code.sggCd.length > 0) {
const table = bdstObj.map((item) => {
const table = bdst?.bdstBase?.map((item) => {
const sggText = code.sggCd.find(
(cd) => cd.val.toString() === item.sggCd
(cd) => cd.val === Number(item.sggCd)
)?.text;
const cityText = code.cityCd.find(
(cd) => cd.val.toString() === item.ctpvCd
(cd) => cd.val === Number(item.ctpvCd)
)?.text;
return { ...item, sggText: sggText, cityText: cityText };
});
setbdstTable(table);
}
}, [code, bdstObj]);
}, [code, bdst]);
const cellClick = () => {};
const nodeList = headMakeColSpan(rain.upHeadList);
const tableClick: (val: number | undefined) => void = (val) => {
console.log("val , " ,val)
console.log("bdst , " ,bdst?.bdstBase[val])
if(val!==undefined && bdst?.bdstBase.length>0){
const data =bdst?.bdstBase[val]
console.log("data ", [data])
setRainBdstForm([data]);
}
}
const nodeList = headMakeColSpan(bdst.moUpHeadList);
return (
<>
<div className="grid grid-cols-12 gap-4 pb-4">
<div className="grid grid-cols-12 gap-4">
<SelectBox
className="col-span-3 col-start-4"
label={"시도"}
@@ -59,7 +88,7 @@ export function BdstReg() {
className="col-span-3"
label={"시군구"}
selectClass={selectClass}
selectArray={code.sggCd}
selectArray={selectSgg || []}
onSelectValue={getSgg}
>
{" "}
@@ -67,33 +96,31 @@ export function BdstReg() {
<SearchInput
className="col-span-3 col-start-10"
label="건물명"
textValue={""}
setText={function (val: string): void {
throw new Error("Function not implemented.");
}}
textValue={searchTxt}
setText={ setSearchTxt}
/>
</div>
<div className="border-t border-gray-300 my-4"></div>
<div className="h-auto">
<div>
<UiTable
tableData={bdstTable || []}
headlist={rain.upHeadList}
headlist={bdst.moUpHeadList}
pageSize={-10}
total={-1}
headName={undefined}
cellClick={cellClick}
cellClick={tableClick}
>
{nodeList}
</UiTable>
</div>
<div >
<div className="border-t border-gray-300 my-4"></div>
<ScrollArea className="h-[60vh]">
<div>
<RainRegForm data={rainBdstForm || []} isModal={true}></RainRegForm>
</div>
</ScrollArea>
</div>
</div>
</>
);