diff --git a/apps/wr/app/matMng/matDmd/coSttn/page.tsx b/apps/wr/app/matMng/matDmd/coSttn/page.tsx index 146046bda..b7e6c6c8e 100644 --- a/apps/wr/app/matMng/matDmd/coSttn/page.tsx +++ b/apps/wr/app/matMng/matDmd/coSttn/page.tsx @@ -3,35 +3,54 @@ import { useWrStore } from "@/app/store"; import { btnClass } from "@/app/store/common/code"; import type { customCoSttnBdst } from "@/app/store/matDmd/coSttn"; -import { getCityOrSgg, tableData } from "@/components/lib/func/commom"; +import { excelDownload, getCity, getCityOrSgg, tableData } from "@/components/lib/func/commom"; import { ContentsDiv, SearchBaseForm, + SearchDiv, + SearchFormLeft, + SearchFormRight, + SearchInput, + SelectBox, Title, UiModal, UiTable, - type ReturnType + type ReturnType, + type SelectDataType } from "@common/business_components/ui"; import ListDiv from "@common/business_components/ui/list_div"; -import { Button } from "@common/components/ui"; +import { Button, DatePicker, Label } from "@common/components/ui"; import { useCallback, useEffect, useRef, useState } from "react"; import SdmInsertForm, { type DemandCompType } from "@common/business_components/ui/sdmInsertForm"; +import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal"; -export default function coSttn() { +export default function CoSttn() { const [bdstTable, setBdstTable] = useState(); - - - const [pageNation, setPageNation] = useState(1); - const { code, coSttn, coSttnInit, getDemandCompList,regDemandCompany,demandCompList} = useWrStore((state) => state); - const { coSttnRes } = coSttn; - const [isDmdModal, setIsDmdModal] = useState<{isMoal: boolean, data: DemandCompType}>({isMoal: false, data: {} as DemandCompType}) + + const [pageNation, setPageNation] = useState(1); + const { code, coSttn, coSttnInit, coSttnSearch, getDemandCompList, regDemandCompany, demandCompList } = useWrStore((state) => state); + const { coSttnRes } = coSttn; + const [isDmdModal, setIsDmdModal] = useState<{ isMoal: boolean, data: DemandCompType }>({ isMoal: false, data: {} as DemandCompType }) + const [fromDate, setFromDate] = useState(new Date()); + const [toDate, setToDate] = useState(new Date()); + const [selectSgg, setSelectSgg] = useState() + const [objSearch, setObjSearch] = useState({ sgg: "", city: "" }); const ref = useRef({} as ReturnType); const codeData = getCityOrSgg(ref); - - const excelClick = useCallback(() => { - }, []); + + const getSelCity = (val: string | number) => { + const cityValue = String(val); // Ensure val is treated as a string + const data = getCity(cityValue, code.sggCd); + setSelectSgg(data); + setObjSearch({ city: cityValue, sgg: '' }); + }; + + const getSgg = (val: string | number) => { + console.log(val); + setObjSearch({ ...objSearch, sgg: String(val) }) + }; useEffect(() => { if (!coSttn.isInit) { @@ -41,65 +60,117 @@ export default function coSttn() { useEffect(() => { if (coSttnRes.length > 0 && code.cityCd.length > 0) { - const data = tableData(coSttnRes, { code }); - const chData = data - .map((item: any) => ({ - ...item - })) - // .filter((item: any) => item !== undefined); - setBdstTable(chData); - } - }, [coSttnRes]) + const data = tableData(coSttnRes, { code }); + const chData = data + .map((item: any) => ({ + ...item + })) + // .filter((item: any) => item !== undefined); + setBdstTable(chData); + } + }, [coSttnRes]); - return( + useEffect(() => { + if (coSttn.excelList.length > 0) { + if (coSttn.excelList.length === 0) return; + excelDownload( + coSttn.excelList, + "수요처 관리", + "sample_coSttn.xlsx", + "A1:F1", + 2 + ); + } + }, [coSttn.excelList]); + + const excelClick = useCallback(() => { + console.log("??") + coSttnSearch("마인드원", 1); + }, [coSttnSearch]); + + return ( <>
- <SearchBaseForm - selectSidoData={code.cityCd} - selectSigunData={code.sggCd} - selectRegionData={code.rvbsnCd} - selectUnitWaterShedData={code.lgbsnCd} - selectMiddleRegionData={code.mdmbsnCd} - selectEnvPartData={code.lclgvrnmntCd} - rightChildren={ - <div> + <SearchDiv> + <SearchFormLeft> + <div className="col-span-10 flex flex-row"> + <SelectBox + className="col-span-2 w-1/6 h-full text-2xl" + label="시도" + selectClass={""} + selectArray={code.cityCd || []} + onSelectValue={getSelCity} + /> + <SelectBox + className="col-span-2 w-1/6 h-full text-2xl" + label="시군구" + selectClass={""} + selectArray={selectSgg || []} + onSelectValue={getSgg} + /> + <div className="col-span-5 w-auto"> + <div className="flex flex-row items-center"> + <Label className="text-xl text-gray-600">수요신청년도</Label> + <div className="flex flex-row w-1/4"> + <DatePicker mode={'single'} + selected={fromDate} + onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }} /> + <span>~</span> + <DatePicker mode={'single'} + selected={toDate} + onSelect={(date: Date | undefined) => { if (date) setToDate(date) }} /> + </div> + </div> + </div> + <SearchInput + className={"text-2xl"} + label="회사명" + textValue={""} + setText={(e) => { + }} + /> + </div> + </SearchFormLeft> + <SearchFormRight + className="w-2/12 mx-5 flex flex-col items-center justify-center space-x-2 "> + <div className="flex flex-row space-x-2"> <Button - className={btnClass} - onClick={() => { - setIsDmdModal({ ...isDmdModal, isMoal:true }); - }} + size={"sm"} + onClick={(e) => { }} + > + 조회 + </Button> + <Button + size={"sm"} + className={btnClass} + onClick={() => { + setIsDmdModal({ ...isDmdModal, isMoal: true }); + }} > 등록 </Button> <Button - className={btnClass} - onClick={() => { - /* 저장 로직 */ - }} + size={"sm"} + className={btnClass} + onClick={() => { + /* 저장 로직 */ + }} > 저장 </Button> + <Button + size={"sm"} + className={`${btnClass} green`} + onClick={excelClick} + > + 다운로드 + </Button> </div> - } - leftChildren={undefined} - queryClick={function (returnType: ReturnType): void { - // '{partValue: 'A', sidoValue: '0', sigunValue: '0', regionValue: '0', unitWaterShedValue: '0', …}' - let con; - if (returnType.sigunValue != "0") { - con = returnType.sigunValue; - } else { - con = returnType.sidoValue; - } - // coSttnSearch(1, "20", con); - }} - excelClick={excelClick} - initClick={function (): void {}} - btnClass={btnClass} - ref={ref} - /> + </SearchFormRight> + </SearchDiv> </div> </div> <div className="grid grid-cols-6 gap-4 "> @@ -111,35 +182,35 @@ export default function coSttn() { headlist={coSttn.coSttHeadList} pageSize={20} total={10000} - cellClick={(index: number | undefined,headId:string)=>{} } + cellClick={(index: number | undefined, headId: string) => { }} onPageChange={setPageNation} ></UiTable> </ListDiv> </div> </div> - <UiModal - bodyClass={"w-[40vw] max-w-none h-[90vh]"} - open={isDmdModal.isMoal} - onOpenChange={() => { - setIsDmdModal({ isMoal: false, data: {} as DemandCompType }); - }} - body={ - <SdmInsertForm - selectSidoData={code.cityCd} - selectSigunData={code.sggCd} - dataList={demandCompList} - rtnValue={(searchText: string, pageCnt: number) => { - getDemandCompList(searchText, pageCnt); - }} - rtnInputData={(data) => { - console.log(" rtn data ", data); - regDemandCompany(data as DemandCompType); - setIsDmdModal({ isMoal: false, data: data as DemandCompType }); - }} - bodyClassNm={"w-full mx-auto bg-white rounded-lg shadow-md p-6"} - ></SdmInsertForm> - } - ></UiModal> + <UiModal + bodyClass={"w-[40vw] max-w-none h-[90vh]"} + open={isDmdModal.isMoal} + onOpenChange={() => { + setIsDmdModal({ isMoal: false, data: {} as DemandCompType }); + }} + body={ + <SdmInsertForm + selectSidoData={code.cityCd} + selectSigunData={code.sggCd} + dataList={demandCompList} + rtnValue={(searchText: string, pageCnt: number) => { + getDemandCompList(searchText, pageCnt); + }} + rtnInputData={(data) => { + console.log(" rtn data ", data); + regDemandCompany(data as DemandCompType); + setIsDmdModal({ isMoal: false, data: data as DemandCompType }); + }} + bodyClassNm={"w-full mx-auto bg-white rounded-lg shadow-md p-6"} + ></SdmInsertForm> + } + ></UiModal> </ContentsDiv> </> diff --git a/apps/wr/app/matMng/matDmd/ldrmntCoSttn/page.tsx b/apps/wr/app/matMng/matDmd/ldrmntCoSttn/page.tsx index b6e5ccb7e..2a730f8d5 100644 --- a/apps/wr/app/matMng/matDmd/ldrmntCoSttn/page.tsx +++ b/apps/wr/app/matMng/matDmd/ldrmntCoSttn/page.tsx @@ -1,109 +1,158 @@ "use client"; import { useWrStore } from "@/app/store"; -import { Button } from "@common/components/ui"; import { btnClass } from "@/app/store/common/code"; -import ListDiv from "@common/business_components/ui/list_div"; +import type { customCoBdst } from "@/app/store/matDmd/coReg"; import { + excelDownload, + getCity, tableData, } from "@/components/lib/func/commom"; -import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan"; -import type { customCoBdst } from "@/app/store/matDmd/coReg"; +import CoRegExcel from "@/components/ui/modal/coReg/coRegExcel/coRegExcel"; +import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal"; +import CoDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/coDatailModal"; import { ContentsDiv, SearchBaseForm, + SearchDiv, + SearchFormLeft, + SearchFormRight, + SearchInput, + SelectBox, Title, UiModal, UiTable, type ReturnType, + type SelectDataType, } from "@common/business_components/ui"; -import CoDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/coDatailModal"; -import CoRegExcel from "@/components/ui/modal/coReg/coRegExcel/coRegExcel"; +import ListDiv from "@common/business_components/ui/list_div"; +import { Button, DatePicker, Label } from "@common/components/ui"; import { useCallback, useEffect, useRef, useState } from "react"; -export default function ldrmntCoSttn() { +export default function LdrmntCoSttn() { const { code, ldrmntCoSttn } = useWrStore( - (state) => state + (state) => state ); const { ldrmntCoSttnRes } = ldrmntCoSttn; const [bdstTable, setBdstTable] = useState<customCoBdst[]>(); - const [detailModal, setDetailModal] = useState<{isOpen:boolean,data:customCoBdst|undefined}>({data:undefined,isOpen:false }) + const [detailModal, setDetailModal] = useState<{ isOpen: boolean, data: customCoBdst | undefined }>({ data: undefined, isOpen: false }) const [pageNation, setPageNation] = useState(1); const [isRegExcel, setIsRegExcel] = useState(false); - + const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>() + const [objSearch, setObjSearch] = useState<objSearchType>({ sgg: "", city: "" }); + const ref = useRef<ReturnType>({} as ReturnType); const excelClick = useCallback(() => { + excelDownload( + [[]], + "잠재수요처 관리", + "sample_ldrmntCoSttn.xlsx", + "A1:AL1", + 2 + ); }, []); - const cellClick=(index:number|undefined, headId: string)=>{ - if(index!==undefined && bdstTable!==undefined){ - setDetailModal({isOpen:true ,data:bdstTable[index] }) + const cellClick = (index: number | undefined, headId: string) => { + if (index !== undefined && bdstTable !== undefined) { + setDetailModal({ isOpen: true, data: bdstTable[index] }) } } - useEffect(() => { - if (ldrmntCoSttnRes.length > 0 && code.cityCd.length > 0) { - const data = tableData(ldrmntCoSttnRes, { code }); - console.log("data", data); - const chData = data - .map((item: any) => ({ - ...item - - })) - .filter((item: any) => item !== undefined); - - setBdstTable(chData); - } - }, [code, ldrmntCoSttnRes, ldrmntCoSttn.ldrmntCoSttHeadList]); + const getSelCity = (val: string | number) => { + const cityValue = String(val); // Ensure val is treated as a string + const data = getCity(cityValue, code.sggCd); + setSelectSgg(data); + setObjSearch({ city: cityValue, sgg: '' }); + }; - return( + const getSgg = (val: string | number) => { + console.log(val); + setObjSearch({ ...objSearch, sgg: String(val) }) + }; + + useEffect(() => { + if (ldrmntCoSttnRes.length > 0 && code.cityCd.length > 0) { + const data = tableData(ldrmntCoSttnRes, { code }); + console.log("data", data); + const chData = data + .map((item: any) => ({ + ...item + + })) + .filter((item: any) => item !== undefined); + + setBdstTable(chData); + } + }, [code, ldrmntCoSttnRes, ldrmntCoSttn.ldrmntCoSttHeadList]); + + return ( <> <ContentsDiv> <div className="grid grid-cols-4 gap-4 "> <div className="col-span-4"> <Title title={"잠재수요처 관리"} /> - <SearchBaseForm - selectSidoData={code.cityCd} - selectSigunData={code.sggCd} - selectRegionData={code.rvbsnCd} - selectUnitWaterShedData={code.lgbsnCd} - selectMiddleRegionData={code.mdmbsnCd} - selectEnvPartData={code.lclgvrnmntCd} - rightChildren={ - <div> + <SearchDiv> + <SearchFormLeft> + <div className="col-span-10 flex flex-row"> + <SelectBox + className="col-span-2 w-1/6 h-full text-2xl" + label="시도" + selectClass={""} + selectArray={code.cityCd || []} + onSelectValue={getSelCity} + /> + <SelectBox + className="col-span-2 w-1/6 h-full text-2xl ml-4" + label="시군구" + selectClass={""} + selectArray={selectSgg || []} + onSelectValue={getSgg} + /> + <SearchInput + className={"text-2xl ml-4"} + label="회사명" + textValue={""} + setText={(e) => { + }} + /> + </div> + </SearchFormLeft> + <SearchFormRight + className="w-2/12 mx-5 flex flex-col items-center justify-center space-x-2 "> + <div className="flex flex-row space-x-2"> <Button - className={btnClass} - onClick={() => setIsRegExcel(!isRegExcel)} + size={"sm"} + onClick={(e) => { }} + > + 조회 + </Button> + <Button + size={"sm"} + className={btnClass} + onClick={() => { }} > 엑셀등록 </Button> <Button - className={btnClass} - onClick={() => { - // 저장 로직 - }} + size={"sm"} + className={btnClass} + onClick={() => { + /* 저장 로직 */ + }} + > + 다운로드 + </Button> + <Button + size={"sm"} + className={`${btnClass} green`} + onClick={excelClick} > 양식받기 </Button> </div> - } - leftChildren={undefined} - queryClick={function (returnType: ReturnType): void { - // '{partValue: 'A', sidoValue: '0', sigunValue: '0', regionValue: '0', unitWaterShedValue: '0', …}' - let con; - if (returnType.sigunValue != "0") { - con = returnType.sigunValue; - } else { - con = returnType.sidoValue; - } - // ldrmntCoSttnSearch(1, "20", con); - }} - excelClick={excelClick} - initClick={function (): void {}} - btnClass={btnClass} - ref={ref} - /> + </SearchFormRight> + </SearchDiv> </div> </div> <div className="grid grid-cols-6 gap-4 "> @@ -112,33 +161,30 @@ export default function ldrmntCoSttn() { <UiTable headName={[]} tableData={bdstTable || []} - children={ - <HeadMakeColSpan upHeadList={ldrmntCoSttn.ldrmntCoSttNodeList} /> - } headlist={ldrmntCoSttn.ldrmntCoSttHeadList} pageSize={20} total={10000} - cellClick={(index: number | undefined,headId:string)=>{cellClick(index ?? undefined,headId)} } + cellClick={(index: number | undefined, headId: string) => { cellClick(index ?? undefined, headId) }} onPageChange={setPageNation} ></UiTable> </ListDiv> </div> - <UiModal + <UiModal open={detailModal.isOpen} - onOpenChange={()=>{ - setDetailModal({...detailModal, isOpen:!detailModal.isOpen}) + onOpenChange={() => { + setDetailModal({ ...detailModal, isOpen: !detailModal.isOpen }) }} - bodyClass={"w-[40vw] max-w-none max-h-[calc(100%-70px)]"} - body={<CoDetailModal formObj={detailModal.data}/>}/> + bodyClass={"w-[40vw] max-w-none max-h-[calc(100%-70px)]"} + body={<CoDetailModal formObj={detailModal.data} />} /> - <UiModal - bodyClass={"w-[40vw] max-w-none"} - open={isRegExcel} - body={<CoRegExcel></CoRegExcel>} - onOpenChange={setIsRegExcel} - /> + <UiModal + bodyClass={"w-[40vw] max-w-none"} + open={isRegExcel} + body={<CoRegExcel></CoRegExcel>} + onOpenChange={setIsRegExcel} + /> </div> - + </ContentsDiv> </> diff --git a/apps/wr/app/page.tsx b/apps/wr/app/page.tsx index 4798d2856..090791a69 100644 --- a/apps/wr/app/page.tsx +++ b/apps/wr/app/page.tsx @@ -136,7 +136,7 @@ export default function Home() { </div> <div className="col-span-2"> <Button className="w-full"> - <Link href="matMng/matDmd/ruseCaseMng">물재이용사례관리</Link> + <Link href="matMng/matDmd/ruseCaseMng">물재이용사례 관리</Link> </Button> </div> </div> diff --git a/apps/wr/app/store/matDmd/coSttn/excel.tsx b/apps/wr/app/store/matDmd/coSttn/excel.tsx new file mode 100644 index 000000000..39d669664 --- /dev/null +++ b/apps/wr/app/store/matDmd/coSttn/excel.tsx @@ -0,0 +1,17 @@ +import type { customCoSttnBdst } from "."; + +export const excelCoSttnParsing = (data: customCoSttnBdst[]): string[][] => { + const excelExportData: string[][] = []; + + data.forEach((item) => { + excelExportData.push([ + String(item.ctpvCd), + String(item.sggCd), + item.dmdCoNm ?? "", + item.daddr ?? "", + String(item.dmdInfoPk ?? ""), + item.telno ?? "" + ]); + }); + return excelExportData; +}; diff --git a/apps/wr/app/store/matDmd/coSttn/index.tsx b/apps/wr/app/store/matDmd/coSttn/index.tsx index 702808740..edacd7044 100644 --- a/apps/wr/app/store/matDmd/coSttn/index.tsx +++ b/apps/wr/app/store/matDmd/coSttn/index.tsx @@ -2,6 +2,7 @@ import type { CommonTableProps } from "@/app/store/common/type/headder"; import { fetchType, getFetch } from "@/components/lib/api"; import { z } from "zod"; import { coSttHeadListExport, coSttNodeListExport } from "./headList"; +import { excelCoSttnParsing } from "./excel"; // 테이블 헤드 리스트 const coSttNodeList = coSttNodeListExport; @@ -31,7 +32,8 @@ export type coSttnState = { }; type coSttnActions = { - coSttnInit:(con:string) => void + coSttnInit:(con:string) => void; + coSttnSearch: (txt: string, cnt: number) => void; }; export type coSttnType = coSttnState & coSttnActions; @@ -57,7 +59,6 @@ export const coSttnActionsExport: (set: any) => coSttnActions = ( fetchType.WR, `/reuseFc/request/마인드원/3` ); - console.log(coSttnRes, "ㅠㅠ") set((state: coSttnState) => { return { ...state, @@ -72,5 +73,37 @@ export const coSttnActionsExport: (set: any) => coSttnActions = ( console.log(e) } }, + coSttnSearch: async (txt: string, cnt: number) => { + try { + const coSttnRes = await getFetch( + fetchType.WR, + `/reuseFc/request/${txt}/${cnt}` + ); + if (Number(cnt) > 0) { + const coExcel = excelCoSttnParsing(coSttnRes); + set((state: coSttnState) => { + return { + ...state, + coSttn: { + ...state.coSttn, + excelList: coExcel, + }, + }; + }); + } else + set((state: coSttnState) => { + return { + ...state, + coSttn: { + ...state.coSttn, + coSttnRes: coSttnRes, + isInit: false, + }, + }; + }); + } catch (erTxt) { + console.log("error", erTxt); + } + }, } } \ No newline at end of file diff --git a/apps/wr/app/store/matDmd/ldrmntCoSttn/index.tsx b/apps/wr/app/store/matDmd/ldrmntCoSttn/index.tsx index 35d127904..83a8a4ed0 100644 --- a/apps/wr/app/store/matDmd/ldrmntCoSttn/index.tsx +++ b/apps/wr/app/store/matDmd/ldrmntCoSttn/index.tsx @@ -1,24 +1,25 @@ -import type { z } from "zod"; import type { CommonTableProps } from "@/app/store/common/type/headder"; -import { coSttNodeListExport, coSttHeadListExport } from "../coSttn/headList"; -import type { customCoBdst } from "../../matDmd/coReg"; -import type { sttnHeadListType } from "../coSttn/headList"; +import { coSttHeadListExport, coSttNodeListExport } from "../coSttn/headList"; +import type { customCoSttnBdst } from "../coSttn"; // 테이블 헤드 리스트 const coSttNodeList = coSttNodeListExport; const coSttHeadList = coSttHeadListExport; -const ldrmntCoSttnRes: customCoBdst[] = []; +const ldrmntCoSttnRes: customCoSttnBdst[] = []; -const ldrmntCoList = {ctpv: "이거머임", - sgg: "01", - coNm: "회사요", +const ldrmntCoList = [{ + ctpvCd: "이거머임", + sggCd: "01", + dmdCoNm: "회사요", bznmNo: "abc123", - addr: "서울 강남구", - telNo: "010-1234-5678"} + dmdInfoPk: "1111", + daddr: "서울 강남구", + telno: "010-1234-5678" +}] export type ldrmntCoSttnState = { ldrmntCoSttn: { - ldrmntCoSttnRes: customCoBdst[]; + ldrmntCoSttnRes: customCoSttnBdst[]; ldrmntCoSttHeadList: CommonTableProps[]; ldrmntCoSttNodeList: CommonTableProps[]; excelList: []; @@ -35,7 +36,7 @@ export const ldrmntCoSttnStateExport: ldrmntCoSttnState = { ldrmntCoSttn: { ldrmntCoSttHeadList: coSttHeadList, ldrmntCoSttNodeList: coSttNodeList, - ldrmntCoSttnRes: [ldrmntCoList], + ldrmntCoSttnRes: ldrmntCoList, excelList: [], isInit: false, }, diff --git a/apps/wr/public/sample_coSttn.xlsx b/apps/wr/public/sample_coSttn.xlsx new file mode 100644 index 000000000..836ee002e Binary files /dev/null and b/apps/wr/public/sample_coSttn.xlsx differ diff --git a/apps/wr/public/sample_ldrmntCoSttn.xlsx b/apps/wr/public/sample_ldrmntCoSttn.xlsx new file mode 100644 index 000000000..646e8e4b8 Binary files /dev/null and b/apps/wr/public/sample_ldrmntCoSttn.xlsx differ