junh_eee
2 years ago
7 changed files with 731 additions and 490 deletions
@ -0,0 +1,174 @@ |
|||||||
|
import React, { useEffect, useState } from 'react'; |
||||||
|
import { |
||||||
|
Row, |
||||||
|
Col, |
||||||
|
Table, |
||||||
|
Badge, |
||||||
|
UncontrolledDropdown, |
||||||
|
DropdownMenu, |
||||||
|
DropdownItem, |
||||||
|
DropdownToggle, |
||||||
|
Card, |
||||||
|
CardHeader, |
||||||
|
CardBody, |
||||||
|
CardTitle, |
||||||
|
CardSubtitle, |
||||||
|
ButtonGroup, |
||||||
|
Button, |
||||||
|
Input, |
||||||
|
CustomInput, |
||||||
|
FormGroup |
||||||
|
} from 'reactstrap'; |
||||||
|
import { Calendar, Search } from 'react-feather'; |
||||||
|
import Flatpickr from 'react-flatpickr'; |
||||||
|
|
||||||
|
|
||||||
|
const FlightPlanSearch = (props) => { |
||||||
|
|
||||||
|
const [isCheck, setIsCheck] = useState({ |
||||||
|
all: true, |
||||||
|
yes: false, |
||||||
|
no: false |
||||||
|
}); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
let aprvYn = ''; |
||||||
|
|
||||||
|
if (!isCheck.all) { |
||||||
|
if (isCheck.yes) { |
||||||
|
aprvYn = 'Y'; |
||||||
|
} else if (isCheck.no) { |
||||||
|
aprvYn = 'N'; |
||||||
|
} else { |
||||||
|
aprvYn = '-'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// props.setParams({
|
||||||
|
// ...props.params,
|
||||||
|
// aprvYn: aprvYn
|
||||||
|
// });
|
||||||
|
}, [isCheck]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='pal-card-box'> |
||||||
|
<Row> |
||||||
|
<Col> |
||||||
|
<div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> |
||||||
|
<div> |
||||||
|
<h4>검색조건</h4> |
||||||
|
</div> |
||||||
|
<div className='d-flex align-items-center'> |
||||||
|
<Button.Ripple |
||||||
|
color='primary' |
||||||
|
size='sm' |
||||||
|
onClick={e => props.handlerSearch()} |
||||||
|
> |
||||||
|
<Search size={16} /> |
||||||
|
검색 |
||||||
|
</Button.Ripple> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<Card> |
||||||
|
<CardBody className='pal-card-body'> |
||||||
|
<div className='search-cont'> |
||||||
|
<dl> |
||||||
|
<dt> |
||||||
|
<div className='search-box'> |
||||||
|
<div className='search-list-ti'>신청일</div> |
||||||
|
<div className='search-list'> |
||||||
|
<div className='search-list-cont'> |
||||||
|
<Row> |
||||||
|
<Col className='list-input' xl='4' md='6' sm='12'> |
||||||
|
<div className='d-flex align-items-center calendar-flat'> |
||||||
|
<Flatpickr |
||||||
|
id='searchDate' |
||||||
|
value={[ |
||||||
|
props.params.stDate, |
||||||
|
props.params.endDate |
||||||
|
]} |
||||||
|
options={{ |
||||||
|
mode: 'range', |
||||||
|
defaultDate: [ |
||||||
|
props.params.stDate, |
||||||
|
props.params.endDate |
||||||
|
] |
||||||
|
}} |
||||||
|
onChange={val => |
||||||
|
props.handlerInput('searchDate', val) |
||||||
|
} |
||||||
|
onKeyPress={props.onKeyPress} |
||||||
|
className='form-control flat-picker bg-transparent border-0 shadow-none' |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</dt> |
||||||
|
|
||||||
|
<dt> |
||||||
|
<div className='search-box'> |
||||||
|
<div className='search-list-ti'>승인여부</div> |
||||||
|
<div className='search-list'> |
||||||
|
{/* <div className="search-list-cont"> |
||||||
|
<Input size='sm'/> |
||||||
|
</div> */} |
||||||
|
<div className='search-list-cont'> |
||||||
|
<CustomInput |
||||||
|
inline |
||||||
|
type='checkbox' |
||||||
|
id='exampleCustomCheckbox' |
||||||
|
label='전체' |
||||||
|
checked={isCheck.all} |
||||||
|
onClick={() => |
||||||
|
setIsCheckBox({ |
||||||
|
all: !isCheck.all, |
||||||
|
yes: !isCheck.all, |
||||||
|
no: !isCheck.all |
||||||
|
}) |
||||||
|
} |
||||||
|
/> |
||||||
|
<CustomInput |
||||||
|
inline |
||||||
|
type='checkbox' |
||||||
|
id='exampleCustomCheckbox2' |
||||||
|
label='승인' |
||||||
|
checked={isCheck.yes || isCheck.all} |
||||||
|
onClick={() => |
||||||
|
setIsCheckBox({ |
||||||
|
all: false, |
||||||
|
yes: !isCheck.yes |
||||||
|
}) |
||||||
|
} |
||||||
|
/> |
||||||
|
<CustomInput |
||||||
|
inline |
||||||
|
type='checkbox' |
||||||
|
id='exampleCustomCheckbox3' |
||||||
|
label='미승인' |
||||||
|
checked={isCheck.no || isCheck.all} |
||||||
|
onClick={() => |
||||||
|
setIsCheckBox({ |
||||||
|
all: false, |
||||||
|
no: !isCheck.no |
||||||
|
}) |
||||||
|
} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</dt> |
||||||
|
</dl> |
||||||
|
</div> |
||||||
|
</CardBody> |
||||||
|
</Card> |
||||||
|
|
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default FlightPlanSearch; |
||||||
Loading…
Reference in new issue