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