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. 117
      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>
); );
} }
} }

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

@ -1,77 +1,80 @@
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 { schFltStDt, schFltEndDt, aprvlYn } = searchData;
const initCheckState = { const initCheckState = {
'all': aprvlYn == 'A', all: aprvlYn == 'A',
'yes': (aprvlYn == 'Y' || aprvlYn == 'A'), yes: aprvlYn == 'Y' || aprvlYn == 'A',
'no': (aprvlYn == 'N' || aprvlYn == 'A'), no: aprvlYn == 'N' || aprvlYn == 'A'
} };
const [checkState, setCheckState] = useState(initCheckState); const [checkState, setCheckState] = useState(initCheckState);
const handleClickSearch = (e) => { const handleClickSearch = e => {
handleSearch(searchData); handleSearch(searchData);
} };
const handleChangeInput = (dates, value, config) => { const handleChangeInput = (dates, value, config) => {
if (dates.length === 2) { if (dates.length === 2) {
const schFltStDt = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss'); 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'); const schFltEndDt = moment(dates[1])
handleChangeSearchData({schFltStDt, schFltEndDt}) .set({ h: 23, m: 59, s: 59 })
.format('YYYY-MM-DD HH:mm:ss');
handleChangeSearchData({ schFltStDt, schFltEndDt });
} }
} };
const handleChangeCheckbox = (e) => { const handleChangeCheckbox = e => {
const {name, value, checked} = e.target; const { name, value, checked } = e.target;
let val; let val;
switch (value) { switch (value) {
case 'A': case 'A':
val = checked ? 'A' : ''; val = checked ? 'A' : '';
handleChangeSearchData({[name]: val}) handleChangeSearchData({ [name]: val });
setCheckState({ setCheckState({
'all': checked, all: checked,
'yes': checked, yes: checked,
'no': checked no: checked
}) });
break; break;
case 'Y': case 'Y':
if (checked && checkState.no) val = 'A' if (checked && checkState.no) val = 'A';
else if (checked && !checkState.no) val = 'Y' else if (checked && !checkState.no) val = 'Y';
else if (!checked && checkState.no) val = 'N' else if (!checked && checkState.no) val = 'N';
else if (!checked && !checkState.no) val = '' else if (!checked && !checkState.no) val = '';
handleChangeSearchData({[name]: val}) handleChangeSearchData({ [name]: val });
setCheckState(prevState => ({ setCheckState(prevState => ({
'all': prevState.no && checked, all: prevState.no && checked,
'yes': checked, yes: checked,
'no': prevState.no no: prevState.no
})) }));
break; break;
case 'N': case 'N':
if (checked && checkState.yes) val = 'A' if (checked && checkState.yes) val = 'A';
else if (checked && !checkState.yes) val = 'N' else if (checked && !checkState.yes) val = 'N';
else if (!checked && checkState.yes) val = 'Y' else if (!checked && checkState.yes) val = 'Y';
else if (!checked && !checkState.yes) val = '' else if (!checked && !checkState.yes) val = '';
handleChangeSearchData({[name]: val}) handleChangeSearchData({ [name]: val });
setCheckState(prevState => ({ setCheckState(prevState => ({
'all': prevState.yes && checked, all: prevState.yes && checked,
'yes': prevState.yes, yes: prevState.yes,
'no': checked no: checked
})) }));
break; break;
default: default:
break; break;
} }
} };
return ( return (
// <div className='pal-card-box'> // <div className='pal-card-box'>
<div> <div>
<Row> <Row>
<Col> <Col>
<div <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
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>
@ -81,7 +84,7 @@ const FlightPlanAprvSearch = ({searchData, handleChangeSearchData, handleSearch}
size='sm' size='sm'
onClick={handleClickSearch} onClick={handleClickSearch}
> >
<Search size={16}/> <Search size={16} />
검색 검색
</Button.Ripple> </Button.Ripple>
</div> </div>
@ -100,12 +103,9 @@ const FlightPlanAprvSearch = ({searchData, handleChangeSearchData, handleSearch}
<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,
schFltEndDt
]}
options={{ options={{
mode: 'range', mode: 'range'
// defaultDate: [ // defaultDate: [
// props.params.stDate, // props.params.stDate,
// props.params.endDate // props.params.endDate
@ -132,8 +132,8 @@ const FlightPlanAprvSearch = ({searchData, handleChangeSearchData, handleSearch}
type='checkbox' type='checkbox'
id='exampleCustomCheckbox' id='exampleCustomCheckbox'
label='전체' label='전체'
name="aprvlYn" name='aprvlYn'
value="A" value='A'
// checked={true} // checked={true}
checked={checkState.all} checked={checkState.all}
onChange={handleChangeCheckbox} onChange={handleChangeCheckbox}
@ -143,8 +143,8 @@ const FlightPlanAprvSearch = ({searchData, handleChangeSearchData, handleSearch}
type='checkbox' type='checkbox'
id='exampleCustomCheckbox2' id='exampleCustomCheckbox2'
label='승인' label='승인'
name="aprvlYn" name='aprvlYn'
value="Y" value='Y'
checked={checkState.yes} checked={checkState.yes}
onChange={handleChangeCheckbox} onChange={handleChangeCheckbox}
/> />
@ -153,8 +153,8 @@ const FlightPlanAprvSearch = ({searchData, handleChangeSearchData, handleSearch}
type='checkbox' type='checkbox'
id='exampleCustomCheckbox3' id='exampleCustomCheckbox3'
label='미승인' label='미승인'
name="aprvlYn" name='aprvlYn'
value="N" value='N'
checked={checkState.no} checked={checkState.no}
onChange={handleChangeCheckbox} onChange={handleChangeCheckbox}
/> />
@ -166,11 +166,10 @@ const FlightPlanAprvSearch = ({searchData, handleChangeSearchData, handleSearch}
</div> </div>
{/* </CardBody> */} {/* </CardBody> */}
</Card> </Card>
</Col> </Col>
</Row> </Row>
</div> </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