pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

비행계획서 승인 - 체크박스

pull/2/head
junh_eee(이준희) 2 years ago
parent
418558e3e8
commit
1339446648
3 changed files with 239 additions and 177 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 57
      src/components/basis/flight/aprv/FlightPlanAprvGrid.js
  2. 333
      src/components/basis/flight/aprv/FlightPlanAprvSearch.js
  3. 26
      src/containers/basis/flight/aprv/FlightPlanAprvContainer.js

57
src/components/basis/flight/aprv/FlightPlanAprvGrid.js
Unescape View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Button, Card, Col, Row } from 'reactstrap'; import { Button, Card, Col, Row, CustomInput } from 'reactstrap';
import { GridDatabase } from '../../../crud/grid/GridDatatable'; import { GridDatabase } from '../../../crud/grid/GridDatatable';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@ -10,17 +10,17 @@ const FlightPlanAprvGrid = ({
handleClickAprv, handleClickAprv,
joinList, joinList,
selectGroup, selectGroup,
selPlanSnoList,
setSelPlanSnoList,
handleChangeCheckbox
}) => { }) => {
const [aprvAuth, setAprvAuth] = useState(''); const [aprvAuth, setAprvAuth] = useState('');
useEffect(() => { useEffect(() => {
joinList.forEach(c => { joinList.forEach(c => {
if (c.groupId === selectGroup.groupId) { if (c.groupId === selectGroup.groupId) {
// if (c.groupAuthCd === 'USER') {
if (c.groupAuthCd === 'NORMAL') { if (c.groupAuthCd === 'NORMAL') {
setAprvAuth(false); setAprvAuth(false);
// } else if (c.groupAuthCd === 'CREATER' || c.groupAuthCd === 'ADMIN') {
} else if (c.groupAuthCd === 'MASTER' || c.groupAuthCd === 'LEADER') { } else if (c.groupAuthCd === 'MASTER' || c.groupAuthCd === 'LEADER') {
setAprvAuth(true); setAprvAuth(true);
} }
@ -28,16 +28,53 @@ const FlightPlanAprvGrid = ({
}); });
}, [selectGroup]); }, [selectGroup]);
useEffect(() => {
console.log(selPlanSnoList, '>>>');
}, [selPlanSnoList]);
const columns = [ const columns = [
{ id: 'planSno', name: '번호', cell: (row, i) => <div>{i + 1}</div> }, // {
// id: '',
// name: '',
// minWidth: '50px',
// cell: (row, i) => (
// <>
// <CustomInput
// type='checkbox'
// id={`check${i + 1}`}
// name={`check${i + 1}`}
// // checked={checkState}
// onChange={e => handleChangeCheckbox(e, row)}
// />
// </>
// )
// },
{
id: 'planSno',
name: '번호',
cell: (row, i) => (
<>
{/* <CustomInput
type='checkbox'
id={`check${i + 1}`}
name={`check${i + 1}`}
// checked={checkState}
onChange={e => handleChangeCheckbox(e, row)}
/> */}
<div>{i + 1}</div>
</>
)
},
{ {
id: 'fltPurpose', id: 'fltPurpose',
name: '비행목적', name: '비행목적',
minWidth: '150px',
cell: row => <div>{row.fltPurpose}</div> cell: row => <div>{row.fltPurpose}</div>
}, },
{ {
id: 'fltMethod', id: 'fltMethod',
name: '비행방식', name: '비행방식',
minWidth: '200px',
cell: row => { cell: row => {
const displayName = const displayName =
(row.areaList && (row.areaList &&
@ -50,6 +87,7 @@ const FlightPlanAprvGrid = ({
{ {
id: 'schFltStDt', id: 'schFltStDt',
name: '출발일', name: '출발일',
minWidth: '200px',
cell: row => <div>{row.schFltStDt}</div> cell: row => <div>{row.schFltStDt}</div>
}, },
{ id: 'aprvlYn', name: '승인여부', cell: row => <div>{row.aprvlYn}</div> }, { id: 'aprvlYn', name: '승인여부', cell: row => <div>{row.aprvlYn}</div> },
@ -58,12 +96,15 @@ const FlightPlanAprvGrid = ({
name: '상세보기', name: '상세보기',
cell: row => { cell: row => {
return ( return (
<Link to={`/basis/flight/plan/detail/${row.planSno}`} <Button.Ripple
color='primary'
size='sm' size='sm'
onClick={() => {
handleMoveDetail(row.planSno);
}}
> >
상세 상세
</Link> </Button.Ripple>
); );
} }
} }

333
src/components/basis/flight/aprv/FlightPlanAprvSearch.js
Unescape View File

@ -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;

26
src/containers/basis/flight/aprv/FlightPlanAprvContainer.js
Unescape View File

@ -143,8 +143,6 @@ const FlightPlanAprvContainer = () => {
); );
}; };
// 최초 비행계획서 목록 조회 // 최초 비행계획서 목록 조회
useEffect(() => { useEffect(() => {
handlerGroupCancel(); handlerGroupCancel();
@ -177,6 +175,27 @@ const FlightPlanAprvContainer = () => {
const handleChangeSelected = ({ selectedRows }) => { const handleChangeSelected = ({ selectedRows }) => {
setSelPlanSnoList(selectedRows.map(item => item.planSno)); setSelPlanSnoList(selectedRows.map(item => item.planSno));
}; };
const handleChangeCheckbox = (e, row) => {
const { checked } = e.target;
const dupli = selPlanSnoList?.find(prev => {
if (prev.planSno === row.planSno) {
return true;
}
});
if (checked) {
if (!dupli) {
setSelPlanSnoList([...selPlanSnoList, row.planSno]);
}
} else {
const list = selPlanSnoList.filter(prev => {
if (prev !== row.planSno) {
return prev;
}
});
setSelPlanSnoList(list);
}
};
const handleClickAprv = type => e => { const handleClickAprv = type => e => {
// notAprov, aprv // notAprov, aprv
@ -244,6 +263,9 @@ const FlightPlanAprvContainer = () => {
joinList={joinList} joinList={joinList}
selectGroup={selectGroup} selectGroup={selectGroup}
handleChangeSelected={handleChangeSelected} handleChangeSelected={handleChangeSelected}
selPlanSnoList={selPlanSnoList}
setSelPlanSnoList={setSelPlanSnoList}
handleChangeCheckbox={handleChangeCheckbox}
/> />
</> </>
) : ( ) : (

Write Preview
Loading…
Cancel
Save