88 lines
4.3 KiB
JavaScript
88 lines
4.3 KiB
JavaScript
import React, {useEffect, useState} from "react";
|
|
import {Button, Modal, Nav} from "react-bootstrap";
|
|
import Col from "react-bootstrap/Col";
|
|
import Row from "react-bootstrap/Row";
|
|
import * as EgovNet from "api/egovFetch";
|
|
|
|
|
|
function DownloadModal({closeFn}){
|
|
const [tab, setTab] = useState(10);
|
|
const [subTabsVisible, setSubTabsVisible] = useState(false);
|
|
const [listData, setListData] = useState([]);
|
|
|
|
useEffect(() => {
|
|
EgovNet.requestFetch('/standardCode/standard-code-download-list?listCode='+tab,
|
|
{
|
|
method: "GET",
|
|
headers: {
|
|
'Content-type': 'application/json',
|
|
}
|
|
},
|
|
(resp) => {
|
|
setListData(resp.result.resultList);
|
|
},
|
|
function (resp) {
|
|
console.log("err response : ", resp);
|
|
}
|
|
);
|
|
}, [tab]);
|
|
|
|
return(
|
|
<>
|
|
<Modal.Header closeButton>
|
|
<Modal.Title id="example-modal-sizes-title-lg">통합다운로드</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
<Row className={"justify-content-start py-1 mx-1"}>
|
|
<Col xs={"auto px-1"}>
|
|
<div className={`tab ${tab === 10 ? 'active' : ''}`}
|
|
onClick={() => {setTab(10); setSubTabsVisible(false)}}>설계기준</div>
|
|
</Col>
|
|
<Col xs={"auto px-1"}>
|
|
<div className={`tab ${tab === 20 ? 'active' : ''}`}
|
|
onClick={() => {setTab(20); setSubTabsVisible(false)}}>표준시방서</div>
|
|
</Col>
|
|
<Col xs={"auto px-1"}>
|
|
<div className={`tab ${[40, 50, 60, 70, 80, 90].includes(tab) ? 'active' : ''}`}
|
|
onClick={() => {setTab(40); setSubTabsVisible(true)}}>전문시방서</div>
|
|
</Col>
|
|
</Row>
|
|
{subTabsVisible && (
|
|
<Nav className={"tabs"} variant={"tabs"} >
|
|
<Nav.Item><Nav.Link className={`${tab === 40 ? 'active' : ''}`} onClick={() => {setTab(40)}}>서울특별시</Nav.Link></Nav.Item>
|
|
<Nav.Item><Nav.Link className={`${tab === 50 ? 'active' : ''}`} onClick={() => {setTab(50)}}>고속도로공사</Nav.Link></Nav.Item>
|
|
<Nav.Item><Nav.Link className={`${tab === 60 ? 'active' : ''}`} onClick={() => {setTab(60)}}>한국농어촌공사</Nav.Link></Nav.Item>
|
|
<Nav.Item><Nav.Link className={`${tab === 70 ? 'active' : ''}`} onClick={() => {setTab(70)}}>철도건설공사</Nav.Link></Nav.Item>
|
|
<Nav.Item><Nav.Link className={`${tab === 80 ? 'active' : ''}`} onClick={() => {setTab(80)}}>LH한국토지주택공사</Nav.Link></Nav.Item>
|
|
<Nav.Item><Nav.Link className={`${tab === 90 ? 'active' : ''}`} onClick={() => {setTab(90)}}>K-Water</Nav.Link></Nav.Item>
|
|
</Nav>
|
|
)}
|
|
<div className="board_list standard_code_modal download_list">
|
|
<div className="head">
|
|
<span>구분</span>
|
|
<span>코드</span>
|
|
<span>다운로드</span>
|
|
</div>
|
|
<div className={"result"}>
|
|
{listData.filter(item => {
|
|
return item;
|
|
}).map(item => {
|
|
return (
|
|
<div className="list_item">
|
|
<div className="mainCategory">{item.groupNm}</div>
|
|
<div className="middleCategory">{item.groupCurCd}</div>
|
|
<div className="kcscCd">
|
|
<Button size={"sm"} variant={"outline-secondary"}>다운로드</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</Modal.Body>
|
|
<Modal.Footer><Button onClick={closeFn}>닫기</Button></Modal.Footer>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default DownloadModal; |