|
|
@ -23,6 +23,7 @@ export default function FlightApprovalsTable(props) { |
|
|
|
// 행 토글
|
|
|
|
// 행 토글
|
|
|
|
const [expandedRows, setExpandedRows] = useState({}); |
|
|
|
const [expandedRows, setExpandedRows] = useState({}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log('>>', expandedRows); |
|
|
|
// 승인, 미승인, 비대상 건수 계산
|
|
|
|
// 승인, 미승인, 비대상 건수 계산
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
resApprovalCd(); |
|
|
|
resApprovalCd(); |
|
|
@ -83,7 +84,7 @@ export default function FlightApprovalsTable(props) { |
|
|
|
{ |
|
|
|
{ |
|
|
|
name: ( |
|
|
|
name: ( |
|
|
|
<div className='custom-header-cell'> |
|
|
|
<div className='custom-header-cell'> |
|
|
|
비행 |
|
|
|
신청 |
|
|
|
<br /> |
|
|
|
<br /> |
|
|
|
구역 |
|
|
|
구역 |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -93,7 +94,7 @@ export default function FlightApprovalsTable(props) { |
|
|
|
// sortable: true,
|
|
|
|
// sortable: true,
|
|
|
|
width: '68px', |
|
|
|
width: '68px', |
|
|
|
cell: row => { |
|
|
|
cell: row => { |
|
|
|
return row.areaList[0].zoneNo + '번'; |
|
|
|
return row.areaList[0].zoneNo; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
@ -174,11 +175,11 @@ export default function FlightApprovalsTable(props) { |
|
|
|
name: '더보기', |
|
|
|
name: '더보기', |
|
|
|
selector: row => row.areaList, |
|
|
|
selector: row => row.areaList, |
|
|
|
center: true, |
|
|
|
center: true, |
|
|
|
width: '86px', |
|
|
|
width: '83px', |
|
|
|
cell: row => |
|
|
|
cell: row => |
|
|
|
row.areaList.length > 1 ? ( |
|
|
|
row.areaList.length > 1 ? ( |
|
|
|
<Button color='flat-dark' onClick={() => toggleRow(row.planSno)}> |
|
|
|
<Button color='flat-dark' onClick={() => toggleRow(row.planSno)}> |
|
|
|
{row.areaList.length - 1}건<br /> 더 보기 |
|
|
|
{row.areaList.length}건<br /> 더보기 |
|
|
|
{expandedRows[row.planSno] ? <FaAngleDown /> : <FaAngleUp />} |
|
|
|
{expandedRows[row.planSno] ? <FaAngleDown /> : <FaAngleUp />} |
|
|
|
</Button> |
|
|
|
</Button> |
|
|
|
) : ( |
|
|
|
) : ( |
|
|
@ -223,7 +224,7 @@ export default function FlightApprovalsTable(props) { |
|
|
|
sortable: true, |
|
|
|
sortable: true, |
|
|
|
width: '68px', |
|
|
|
width: '68px', |
|
|
|
cell: row => { |
|
|
|
cell: row => { |
|
|
|
return row.zoneNo + '번'; |
|
|
|
return row.zoneNo; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
@ -275,7 +276,7 @@ export default function FlightApprovalsTable(props) { |
|
|
|
{ |
|
|
|
{ |
|
|
|
selector: row => row.approvalCd, |
|
|
|
selector: row => row.approvalCd, |
|
|
|
center: true, |
|
|
|
center: true, |
|
|
|
width: '86px', |
|
|
|
width: '83px', |
|
|
|
cell: row => { |
|
|
|
cell: row => { |
|
|
|
return '-'; |
|
|
|
return '-'; |
|
|
|
} |
|
|
|
} |
|
|
@ -294,10 +295,21 @@ export default function FlightApprovalsTable(props) { |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
when: row => |
|
|
|
when: row => |
|
|
|
row.areaList[0].planAreaSno === props.selected && !row.isExpandableRow, |
|
|
|
row.areaList[0].planAreaSno === props.selected && expandedRows, |
|
|
|
style: row => ({ border: '2px solid #000', cursor: 'pointer' }) |
|
|
|
style: row => ({ border: '2px solid #000 ', cursor: 'pointer' }) |
|
|
|
// classNames: ['flight-approval-row-click']
|
|
|
|
// classNames: ['flight-approval-row-click']
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// {
|
|
|
|
|
|
|
|
// when: row => expandedRows[row.planSno],
|
|
|
|
|
|
|
|
// style: row => ({
|
|
|
|
|
|
|
|
// borderBottom: 'none',
|
|
|
|
|
|
|
|
// borderLeft: '2px dashed #0000FF',
|
|
|
|
|
|
|
|
// borderRight: '2px dashed #0000FF',
|
|
|
|
|
|
|
|
// borderTop: '2px dashed #0000FF',
|
|
|
|
|
|
|
|
// cursor: 'pointer'
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
// // classNames: ['flight-approval-row-click']
|
|
|
|
|
|
|
|
// }
|
|
|
|
]; |
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
// 테이블 내부 행 조건부 스타일
|
|
|
|
// 테이블 내부 행 조건부 스타일
|
|
|
@ -349,12 +361,16 @@ export default function FlightApprovalsTable(props) { |
|
|
|
|
|
|
|
|
|
|
|
// 테이블 내부 행 클릭 이벤트
|
|
|
|
// 테이블 내부 행 클릭 이벤트
|
|
|
|
const handleInRowClick = row => { |
|
|
|
const handleInRowClick = row => { |
|
|
|
|
|
|
|
console.log('>>', row); |
|
|
|
|
|
|
|
|
|
|
|
handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax); |
|
|
|
handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax); |
|
|
|
props.handlerDetail(row); |
|
|
|
props.handlerDetail(row); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 테이블 행 클릭 이벤트
|
|
|
|
// 테이블 행 클릭 이벤트
|
|
|
|
const handleRowClick = row => { |
|
|
|
const handleRowClick = row => { |
|
|
|
|
|
|
|
console.log('>>', row); |
|
|
|
|
|
|
|
|
|
|
|
handlerOpenModal( |
|
|
|
handlerOpenModal( |
|
|
|
row.areaList[0].approvalCd, |
|
|
|
row.areaList[0].approvalCd, |
|
|
|
row.areaList[0].fltElev, |
|
|
|
row.areaList[0].fltElev, |
|
|
@ -367,7 +383,14 @@ export default function FlightApprovalsTable(props) { |
|
|
|
const FlightInfoComponent = ({ data }) => { |
|
|
|
const FlightInfoComponent = ({ data }) => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<div> |
|
|
|
<div |
|
|
|
|
|
|
|
// style={{
|
|
|
|
|
|
|
|
// borderBottom: '2px dashed #0000FF',
|
|
|
|
|
|
|
|
// borderLeft: '2px dashed #0000FF',
|
|
|
|
|
|
|
|
// borderRight: '2px dashed #0000FF',
|
|
|
|
|
|
|
|
// cursor: 'pointer'
|
|
|
|
|
|
|
|
// }}
|
|
|
|
|
|
|
|
> |
|
|
|
<DataTable |
|
|
|
<DataTable |
|
|
|
className='flight-approval-in-table' |
|
|
|
className='flight-approval-in-table' |
|
|
|
noTableHead={true} |
|
|
|
noTableHead={true} |
|
|
@ -459,6 +482,7 @@ export default function FlightApprovalsTable(props) { |
|
|
|
expandedRows[row.planSno] || false |
|
|
|
expandedRows[row.planSno] || false |
|
|
|
} |
|
|
|
} |
|
|
|
paginationPerPage={20} |
|
|
|
paginationPerPage={20} |
|
|
|
|
|
|
|
expandableRows |
|
|
|
/> |
|
|
|
/> |
|
|
|
) : ( |
|
|
|
) : ( |
|
|
|
<div |
|
|
|
<div |
|
|
|