파일 다운로드 모듈 생성 및 다운 기능 구현
This commit is contained in:
JIeunhuh
@@ -0,0 +1,5 @@
|
||||
export const formatDate = (date: Date): string => {
|
||||
if (!date) return '';
|
||||
const isoString = date.toISOString();
|
||||
return isoString ? isoString.split('T')[0] || '' : '';
|
||||
};
|
||||
+1
-2
@@ -1,9 +1,8 @@
|
||||
const handleDownload = async (api:string, fileNm:string) => {
|
||||
export const handleDownload = async (api:string, fileNm:string) => {
|
||||
try {
|
||||
const response = await fetch(api, {
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('파일 다운로드 실패');
|
||||
}
|
||||
@@ -1,2 +1,3 @@
|
||||
export { getCookie, setCookie, removeCookie } from "./cookie";
|
||||
export { handleUpload } from "./fileUploadUtil";
|
||||
export * from "./fileDownload";
|
||||
|
||||
@@ -4,17 +4,16 @@ import { FileUpload, SelectBox } from '@common/business_components/ui';
|
||||
import { Button, Input } from '@common/components/ui';
|
||||
import React, { useState } from 'react'
|
||||
|
||||
const FileUploadForm = ({ title }: { title: string }) => {
|
||||
const [files, setFiles] = useState<File[] | null>(null);
|
||||
const [selectedYear, setSelectedYear] = useState<string>('');
|
||||
const [selectedQuarter, setSelectedQuarter] = useState<string>('');
|
||||
|
||||
// 현재 년도부터 10년 전까지의 년도 옵션 생성
|
||||
const FileUploadForm = ({ title, onSubmit }: { title: string, onSubmit:(files:FileList, year:string, quarter:string) => void }) => {
|
||||
// 현재 년도부터 10년 전까지의 년도 옵션 생성
|
||||
const yearOptions = Array.from({ length: 10 }, (_, i) => {
|
||||
const year = new Date().getFullYear() - i;
|
||||
return { text: `${year}년`, val: year.toString() };
|
||||
});
|
||||
const quater = [{text: '1분기', val: '1'}, {text: '2분기', val: '2'}, {text: '3분기', val: '3'}, {text: '4분기', val: '4'}]
|
||||
const [files, setFiles] = useState<FileList | null>(null);
|
||||
const [selectedYear, setSelectedYear] = useState<string>(yearOptions[0]?.val || '');
|
||||
const [selectedQuarter, setSelectedQuarter] = useState<string>(quater[0]?.val || '');
|
||||
return (
|
||||
<div>
|
||||
<div className='card-header'>
|
||||
@@ -39,18 +38,18 @@ const FileUploadForm = ({ title }: { title: string }) => {
|
||||
</div>
|
||||
<div className='flex mt-5 items-center'>
|
||||
<div className="w-[200px] mr-4">
|
||||
<Input id="file" type="file" />
|
||||
<Input id="file" type="file" onChange={(e)=>{if(e.target.files)setFiles(e.target.files)}}/>
|
||||
</div>
|
||||
<Button
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
if (!files?.[0] || !selectedYear || !selectedQuarter) {
|
||||
console.log(files, selectedYear, selectedQuarter);
|
||||
if (!files || !selectedYear || !selectedQuarter) {
|
||||
alert('파일과 등록년도를 선택해주세요.');
|
||||
return;
|
||||
}
|
||||
// TODO: 파일 업로드 처리
|
||||
console.log('Upload file:', files[0], 'Year:', selectedYear);
|
||||
onSubmit(files, selectedYear, selectedQuarter); // 부모 컴포넌트로 데이터 전달
|
||||
}}
|
||||
>
|
||||
등록
|
||||
|
||||
@@ -8,11 +8,10 @@ import ContentLayout from '@/components/ui/contentLayout'
|
||||
import { tableData } from '../oldPp/page'
|
||||
import { searchData } from '@/components/lib/common/apiHelpers'
|
||||
import { tableHeadlist } from '..'
|
||||
const formatDate = (date: Date): string => {
|
||||
if(!date) return '';
|
||||
const isoString = date.toISOString();
|
||||
return isoString ? isoString.split('T')[0] || '' : '';
|
||||
};
|
||||
import { handleDownload } from '@/components/lib/utils/fileDownload'
|
||||
import { handleUpload } from '@/components/lib/utils/fileUploadUtil'
|
||||
import { formatDate } from '@/components/lib/common/date'
|
||||
|
||||
const Page = () => {
|
||||
const [fromDate, setFromDate] = useState(new Date())
|
||||
const [toDate, setToDate] = useState(new Date())
|
||||
@@ -20,76 +19,84 @@ const Page = () => {
|
||||
const [mngQu, setMngQu] = useState('')
|
||||
const [usr, setUsr] = useState('')
|
||||
const [pjNm, setpjNm] = useState('')
|
||||
const [fileNm, setFileNm] = useState('')
|
||||
// TODO: 초기값 세팅필요
|
||||
|
||||
return (
|
||||
<ContentLayout title='도시침수 예방사업'>
|
||||
<SearchDiv>
|
||||
<SearchFormLeft>
|
||||
<div className='flex items-center gap-4'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Label className="w-20 text-xl text-gray-600">등록기간</Label>
|
||||
<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 className='flex items-center'>
|
||||
<Label className="w-20 text-xl text-gray-600">관리년도</Label>
|
||||
<Input
|
||||
className='w-[100px]'
|
||||
value={manageYear}
|
||||
onChange={(e) => setManageYear(e.target.value)}
|
||||
/>
|
||||
<span>~</span>
|
||||
<Input
|
||||
className='w-[100px]'
|
||||
value={mngQu}
|
||||
onChange={(e) => setMngQu(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<Label className="w-20 text-xl text-gray-600">등록자</Label>
|
||||
<Input
|
||||
className='w-[100px]'
|
||||
value={usr}
|
||||
onChange={(e) => setUsr(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<Label className="w-20 text-xl text-gray-600">파일명</Label>
|
||||
<Input
|
||||
className='w-[100px]'
|
||||
value={pjNm}
|
||||
onChange={(e) => setpjNm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
const isChckFile = () => {
|
||||
if (fileNm === '' || fileNm === undefined) {
|
||||
alert('파일을 선택해주세요')
|
||||
}
|
||||
// TODO: 추후 파일코드 동적으로 세팅
|
||||
handleDownload('/sn/attach-service/api/v1/download/6066b08c-2a55-438c-b8ff-2aed9739a0c6', fileNm)
|
||||
}
|
||||
//TODO: 파일 업로드 처리
|
||||
return (
|
||||
<ContentLayout title='도시침수 예방사업'>
|
||||
<SearchDiv>
|
||||
<SearchFormLeft>
|
||||
<div className='flex items-center gap-4'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Label className="w-20 text-xl text-gray-600">등록기간</Label>
|
||||
<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>
|
||||
</SearchFormLeft>
|
||||
<SearchFormRight>
|
||||
<Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={()=>{searchData('v1/sbmrgPrevnt', {fromRegDt:formatDate(fromDate),fromMngYr:manageYear,toMngYr:mngQu,toRegDt:formatDate(toDate),atflNm:pjNm,rgtrNm:usr,page: '0',size: '10'})}} >조회</Button>
|
||||
</SearchFormRight>
|
||||
</SearchDiv>
|
||||
<ListDiv className="mt-4">
|
||||
<div className="card-header flex items-center justify-between">
|
||||
<h3 className="text-2xl font-medium">사업정보 등록현황</h3>
|
||||
<div>
|
||||
<Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" >파일 다운로드</Button>
|
||||
<Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={()=>{}} >삭제</Button>
|
||||
<div className='flex items-center'>
|
||||
<Label className="w-20 text-xl text-gray-600">관리년도</Label>
|
||||
<Input
|
||||
className='w-[100px]'
|
||||
value={manageYear}
|
||||
onChange={(e) => setManageYear(e.target.value)}
|
||||
/>
|
||||
<span>~</span>
|
||||
<Input
|
||||
className='w-[100px]'
|
||||
value={mngQu}
|
||||
onChange={(e) => setMngQu(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<Label className="w-20 text-xl text-gray-600">등록자</Label>
|
||||
<Input
|
||||
className='w-[100px]'
|
||||
value={usr}
|
||||
onChange={(e) => setUsr(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<Label className="w-20 text-xl text-gray-600">파일명</Label>
|
||||
<Input
|
||||
className='w-[100px]'
|
||||
value={pjNm}
|
||||
onChange={(e) => setpjNm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={10} children={undefined} cellClick={(index,headId) => {console.log(index, headId) }} onPageChange={function (page: number): void {
|
||||
throw new Error('Function not implemented.')
|
||||
}}></UiTable>
|
||||
</ListDiv>
|
||||
<ListDiv className="mt-4">
|
||||
<FileUploadForm title='도시침수 예방사업 사업추진현황 등록' />
|
||||
</ListDiv>
|
||||
</ContentLayout>
|
||||
)
|
||||
</SearchFormLeft>
|
||||
<SearchFormRight>
|
||||
<Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={() => { searchData('v1/sbmrgPrevnt', { fromRegDt: formatDate(fromDate), fromMngYr: manageYear, toMngYr: mngQu, toRegDt: formatDate(toDate), atflNm: pjNm, rgtrNm: usr, page: '0', size: '10' }) }} >조회</Button>
|
||||
</SearchFormRight>
|
||||
</SearchDiv>
|
||||
<ListDiv className="mt-4">
|
||||
<div className="card-header flex items-center justify-between">
|
||||
<h3 className="text-2xl font-medium">사업정보 등록현황</h3>
|
||||
<div>
|
||||
<Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={isChckFile} >파일 다운로드</Button>
|
||||
<Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={() => { }} >삭제</Button>
|
||||
</div>
|
||||
</div>
|
||||
<UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={10} cellClick={(index) => { if (index != null) { const fileName = tableData[index]?.fileNm ?? ""; setFileNm(fileName) } }} onPageChange={function (page: number): void {
|
||||
throw new Error('Function not implemented.')
|
||||
}}></UiTable>
|
||||
</ListDiv>
|
||||
<ListDiv className="mt-4">
|
||||
<FileUploadForm title='도시침수 예방사업 사업추진현황 등록' onSubmit={()=>{}}/>
|
||||
</ListDiv>
|
||||
</ContentLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page
|
||||
@@ -6,17 +6,29 @@ import FileUploadForm from '../../components/ui/fileUploadForm'
|
||||
import ListDiv from '@common/business_components/ui/list_div'
|
||||
import ContentLayout from '@/components/ui/contentLayout'
|
||||
import { tableHeadlist } from '..'
|
||||
import { handleDownload } from '@/components/lib/utils/fileDownload'
|
||||
import { searchData } from '@/components/lib/common/apiHelpers'
|
||||
import { formatDate } from '@/components/lib/common/date'
|
||||
// TODO: 임시 id
|
||||
|
||||
export const tableData = [{'no':'1', 'fileNm':'2023년 노후하수관로 정비사업', 'mngYr':'2023', 'mngQu':'1', 'registDt':'2023-10-01', 'registUsr':'홍길동'},]
|
||||
export const tableData = [{ 'no': '1', 'fileNm': '2023년 노후하수관로 정비사업', 'mngYr': '2023', 'mngQu': '1', 'registDt': '2023-10-01', 'registUsr': '홍길동' },]
|
||||
const Page = () => {
|
||||
const [fromDate, setFromDate] = useState<Date>(new Date());
|
||||
const [toDate, setToDate] = useState<Date>(new Date());
|
||||
const [company, setCompany] = useState('')
|
||||
const [manageYear, setManageYear] = useState('')
|
||||
const [mngQu, setMngQu] = useState('')
|
||||
const [usr, setUsr] = useState('')
|
||||
const [pjNm, setpjNm] = useState('')
|
||||
const searchData = ()=> {
|
||||
|
||||
}
|
||||
const [fileNm, setFileNm] = useState('')
|
||||
const isChckFile = () => {
|
||||
if (fileNm === '' || fileNm === undefined) {
|
||||
alert('파일을 선택해주세요')
|
||||
return false
|
||||
}
|
||||
// TODO: 추후 파일코드 동적으로 세팅
|
||||
handleDownload('/sn/attach-service/api/v1/download/6066b08c-2a55-438c-b8ff-2aed9739a0c6', fileNm)
|
||||
return true
|
||||
}
|
||||
return (
|
||||
<ContentLayout title='노후 하수관로 정비사업'>
|
||||
<SearchDiv>
|
||||
@@ -31,12 +43,26 @@ const Page = () => {
|
||||
<DatePicker mode={'single'}
|
||||
selected={toDate}
|
||||
onSelect={(date: Date | undefined) => { if (date) setToDate(date) }} />
|
||||
<div className='flex items-center'>
|
||||
<Label className="w-20 text-xl text-gray-600">관리년도</Label>
|
||||
<Input
|
||||
className='w-[100px]'
|
||||
value={manageYear}
|
||||
onChange={(e) => setManageYear(e.target.value)}
|
||||
/>
|
||||
<span>~</span>
|
||||
<Input
|
||||
className='w-[100px]'
|
||||
value={mngQu}
|
||||
onChange={(e) => setMngQu(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<Label className="w-20 text-xl text-gray-600">등록자</Label>
|
||||
<Input
|
||||
className='w-[100px]'
|
||||
value={company}
|
||||
onChange={(e) => setCompany(e.target.value)}
|
||||
value={usr}
|
||||
onChange={(e) => setUsr(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
@@ -51,23 +77,23 @@ const Page = () => {
|
||||
</div>
|
||||
</SearchFormLeft>
|
||||
<SearchFormRight>
|
||||
<Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 mr-2" size="sm" >조회</Button>
|
||||
<Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 mr-2" size="sm" onClick={() => { searchData('v1/dcrpPpl', { fromRegDt: formatDate(fromDate), fromMngYr: manageYear, toMngYr: mngQu, toRegDt: formatDate(toDate), atflNm: pjNm, rgtrNm: usr, page: '0', size: '10' }) }}>조회</Button>
|
||||
</SearchFormRight>
|
||||
</SearchDiv>
|
||||
<ListDiv className="mt-4">
|
||||
<div className="card-header flex items-center justify-between">
|
||||
<h3 className="text-2xl font-medium">사업정보 등록현황</h3>
|
||||
<div>
|
||||
<Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" >파일 다운로드</Button>
|
||||
<Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={isChckFile}>파일 다운로드</Button>
|
||||
<Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" >삭제</Button>
|
||||
</div>
|
||||
</div>
|
||||
<UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={20} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void {
|
||||
<UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={20} children={undefined} cellClick={(index) => { if (index != null) { const fileName = tableData[index]?.fileNm ?? ""; setFileNm(fileName) } }} onPageChange={function (page: number): void {
|
||||
throw new Error('Function not implemented.')
|
||||
}}></UiTable>
|
||||
</ListDiv>
|
||||
<ListDiv className="mt-4">
|
||||
<FileUploadForm title='노후 하수관로 정비사업 주진현황 등록' />
|
||||
<FileUploadForm title='노후 하수관로 정비사업 주진현황 등록' onSubmit={() => { }} />
|
||||
</ListDiv>
|
||||
</ContentLayout>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user