junh_eee(이준희)
2 years ago
3 changed files with 239 additions and 177 deletions
@ -1,176 +1,175 @@ |
|||||||
import React, {useState} from 'react'; |
import React, { useState } from 'react'; |
||||||
import {Button, Card, CardBody, Col, CustomInput, Row} from 'reactstrap'; |
import { Button, Card, CardBody, Col, CustomInput, Row } from 'reactstrap'; |
||||||
import {Search} from 'react-feather'; |
import { Search } from 'react-feather'; |
||||||
import Flatpickr from 'react-flatpickr'; |
import Flatpickr from 'react-flatpickr'; |
||||||
import moment from 'moment'; |
import moment from 'moment'; |
||||||
|
|
||||||
|
const FlightPlanAprvSearch = ({ |
||||||
const FlightPlanAprvSearch = ({searchData, handleChangeSearchData, handleSearch}) => { |
searchData, |
||||||
|
handleChangeSearchData, |
||||||
const {schFltStDt, schFltEndDt, aprvlYn} = searchData; |
handleSearch |
||||||
const initCheckState = { |
}) => { |
||||||
'all': aprvlYn == 'A', |
const { schFltStDt, schFltEndDt, aprvlYn } = searchData; |
||||||
'yes': (aprvlYn == 'Y' || aprvlYn == 'A'), |
const initCheckState = { |
||||||
'no': (aprvlYn == 'N' || aprvlYn == 'A'), |
all: aprvlYn == 'A', |
||||||
} |
yes: aprvlYn == 'Y' || aprvlYn == 'A', |
||||||
const [checkState, setCheckState] = useState(initCheckState); |
no: aprvlYn == 'N' || aprvlYn == 'A' |
||||||
const handleClickSearch = (e) => { |
}; |
||||||
handleSearch(searchData); |
const [checkState, setCheckState] = useState(initCheckState); |
||||||
} |
const handleClickSearch = e => { |
||||||
const handleChangeInput = (dates, value, config) => { |
handleSearch(searchData); |
||||||
if (dates.length === 2) { |
}; |
||||||
const schFltStDt = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss'); |
const handleChangeInput = (dates, value, config) => { |
||||||
const schFltEndDt = moment(dates[1]).set({'h': 23, 'm': 59, 's': 59}).format('YYYY-MM-DD HH:mm:ss'); |
if (dates.length === 2) { |
||||||
handleChangeSearchData({schFltStDt, schFltEndDt}) |
const schFltStDt = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss'); |
||||||
} |
const schFltEndDt = moment(dates[1]) |
||||||
|
.set({ h: 23, m: 59, s: 59 }) |
||||||
|
.format('YYYY-MM-DD HH:mm:ss'); |
||||||
|
handleChangeSearchData({ schFltStDt, schFltEndDt }); |
||||||
} |
} |
||||||
const handleChangeCheckbox = (e) => { |
}; |
||||||
const {name, value, checked} = e.target; |
const handleChangeCheckbox = e => { |
||||||
let val; |
const { name, value, checked } = e.target; |
||||||
switch (value) { |
let val; |
||||||
case 'A': |
switch (value) { |
||||||
val = checked ? 'A' : ''; |
case 'A': |
||||||
handleChangeSearchData({[name]: val}) |
val = checked ? 'A' : ''; |
||||||
setCheckState({ |
handleChangeSearchData({ [name]: val }); |
||||||
'all': checked, |
setCheckState({ |
||||||
'yes': checked, |
all: checked, |
||||||
'no': checked |
yes: checked, |
||||||
}) |
no: checked |
||||||
break; |
}); |
||||||
case 'Y': |
break; |
||||||
if (checked && checkState.no) val = 'A' |
case 'Y': |
||||||
else if (checked && !checkState.no) val = 'Y' |
if (checked && checkState.no) val = 'A'; |
||||||
else if (!checked && checkState.no) val = 'N' |
else if (checked && !checkState.no) val = 'Y'; |
||||||
else if (!checked && !checkState.no) val = '' |
else if (!checked && checkState.no) val = 'N'; |
||||||
handleChangeSearchData({[name]: val}) |
else if (!checked && !checkState.no) val = ''; |
||||||
setCheckState(prevState => ({ |
handleChangeSearchData({ [name]: val }); |
||||||
'all': prevState.no && checked, |
setCheckState(prevState => ({ |
||||||
'yes': checked, |
all: prevState.no && checked, |
||||||
'no': prevState.no |
yes: checked, |
||||||
})) |
no: prevState.no |
||||||
break; |
})); |
||||||
case 'N': |
break; |
||||||
if (checked && checkState.yes) val = 'A' |
case 'N': |
||||||
else if (checked && !checkState.yes) val = 'N' |
if (checked && checkState.yes) val = 'A'; |
||||||
else if (!checked && checkState.yes) val = 'Y' |
else if (checked && !checkState.yes) val = 'N'; |
||||||
else if (!checked && !checkState.yes) val = '' |
else if (!checked && checkState.yes) val = 'Y'; |
||||||
handleChangeSearchData({[name]: val}) |
else if (!checked && !checkState.yes) val = ''; |
||||||
setCheckState(prevState => ({ |
handleChangeSearchData({ [name]: val }); |
||||||
'all': prevState.yes && checked, |
setCheckState(prevState => ({ |
||||||
'yes': prevState.yes, |
all: prevState.yes && checked, |
||||||
'no': checked |
yes: prevState.yes, |
||||||
})) |
no: checked |
||||||
break; |
})); |
||||||
default: |
break; |
||||||
break; |
default: |
||||||
} |
break; |
||||||
} |
} |
||||||
return ( |
}; |
||||||
// <div className='pal-card-box'>
|
return ( |
||||||
<div> |
// <div className='pal-card-box'>
|
||||||
<Row> |
<div> |
||||||
<Col> |
<Row> |
||||||
<div |
<Col> |
||||||
className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> |
<div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> |
||||||
<div> |
<div> |
||||||
<h4>검색조건</h4> |
<h4>검색조건</h4> |
||||||
</div> |
</div> |
||||||
<div className='d-flex align-items-center'> |
<div className='d-flex align-items-center'> |
||||||
<Button.Ripple |
<Button.Ripple |
||||||
color='primary' |
color='primary' |
||||||
size='sm' |
size='sm' |
||||||
onClick={handleClickSearch} |
onClick={handleClickSearch} |
||||||
> |
> |
||||||
<Search size={16}/> |
<Search size={16} /> |
||||||
검색 |
검색 |
||||||
</Button.Ripple> |
</Button.Ripple> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<Card> |
<Card> |
||||||
{/* <CardBody className='pal-card-body'> */} |
{/* <CardBody className='pal-card-body'> */} |
||||||
<div className='search-cont'> |
<div className='search-cont'> |
||||||
<dl> |
<dl> |
||||||
<dt> |
<dt> |
||||||
<div className='search-box'> |
<div className='search-box'> |
||||||
<div className='search-list-ti'>신청일</div> |
<div className='search-list-ti'>신청일</div> |
||||||
<div className='search-list'> |
<div className='search-list'> |
||||||
<div className='search-list-cont'> |
<div className='search-list-cont'> |
||||||
<Row> |
<Row> |
||||||
<Col className='list-input' xl='4' md='6' sm='12'> |
<Col className='list-input' xl='4' md='6' sm='12'> |
||||||
<div className='d-flex align-items-center calendar-flat'> |
<div className='d-flex align-items-center calendar-flat'> |
||||||
<Flatpickr |
<Flatpickr |
||||||
id='searchDate' |
id='searchDate' |
||||||
value={[ |
value={[schFltStDt, schFltEndDt]} |
||||||
schFltStDt, |
options={{ |
||||||
schFltEndDt |
mode: 'range' |
||||||
]} |
// defaultDate: [
|
||||||
options={{ |
// props.params.stDate,
|
||||||
mode: 'range', |
// props.params.endDate
|
||||||
// defaultDate: [
|
// ]
|
||||||
// props.params.stDate,
|
}} |
||||||
// props.params.endDate
|
onChange={handleChangeInput} |
||||||
// ]
|
className='form-control flat-picker bg-transparent border-0 shadow-none' |
||||||
}} |
/> |
||||||
onChange={handleChangeInput} |
|
||||||
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'> |
|
||||||
<CustomInput |
|
||||||
inline |
|
||||||
type='checkbox' |
|
||||||
id='exampleCustomCheckbox' |
|
||||||
label='전체' |
|
||||||
name="aprvlYn" |
|
||||||
value="A" |
|
||||||
// checked={true}
|
|
||||||
checked={checkState.all} |
|
||||||
onChange={handleChangeCheckbox} |
|
||||||
/> |
|
||||||
<CustomInput |
|
||||||
inline |
|
||||||
type='checkbox' |
|
||||||
id='exampleCustomCheckbox2' |
|
||||||
label='승인' |
|
||||||
name="aprvlYn" |
|
||||||
value="Y" |
|
||||||
checked={checkState.yes} |
|
||||||
onChange={handleChangeCheckbox} |
|
||||||
/> |
|
||||||
<CustomInput |
|
||||||
inline |
|
||||||
type='checkbox' |
|
||||||
id='exampleCustomCheckbox3' |
|
||||||
label='미승인' |
|
||||||
name="aprvlYn" |
|
||||||
value="N" |
|
||||||
checked={checkState.no} |
|
||||||
onChange={handleChangeCheckbox} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</dt> |
|
||||||
</dl> |
|
||||||
</div> |
</div> |
||||||
{/* </CardBody> */} |
</Col> |
||||||
</Card> |
</Row> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</dt> |
||||||
|
|
||||||
</Col> |
<dt> |
||||||
</Row> |
<div className='search-box'> |
||||||
</div> |
<div className='search-list-ti'>승인여부</div> |
||||||
) |
<div className='search-list'> |
||||||
} |
<div className='search-list-cont'> |
||||||
|
<CustomInput |
||||||
|
inline |
||||||
|
type='checkbox' |
||||||
|
id='exampleCustomCheckbox' |
||||||
|
label='전체' |
||||||
|
name='aprvlYn' |
||||||
|
value='A' |
||||||
|
// checked={true}
|
||||||
|
checked={checkState.all} |
||||||
|
onChange={handleChangeCheckbox} |
||||||
|
/> |
||||||
|
<CustomInput |
||||||
|
inline |
||||||
|
type='checkbox' |
||||||
|
id='exampleCustomCheckbox2' |
||||||
|
label='승인' |
||||||
|
name='aprvlYn' |
||||||
|
value='Y' |
||||||
|
checked={checkState.yes} |
||||||
|
onChange={handleChangeCheckbox} |
||||||
|
/> |
||||||
|
<CustomInput |
||||||
|
inline |
||||||
|
type='checkbox' |
||||||
|
id='exampleCustomCheckbox3' |
||||||
|
label='미승인' |
||||||
|
name='aprvlYn' |
||||||
|
value='N' |
||||||
|
checked={checkState.no} |
||||||
|
onChange={handleChangeCheckbox} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</dt> |
||||||
|
</dl> |
||||||
|
</div> |
||||||
|
{/* </CardBody> */} |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
export default FlightPlanAprvSearch; |
export default FlightPlanAprvSearch; |
||||||
|
Loading…
Reference in new issue