|
|
|
@ -3,8 +3,8 @@ import { useDispatch, useSelector } from '@src/redux/store';
|
|
|
|
|
import { Button, Card } from '@component/ui'; |
|
|
|
|
import dayjs from 'dayjs'; |
|
|
|
|
import { openModal } from '@src/redux/features/comn/message/messageSlice'; |
|
|
|
|
import { Table } from 'antd'; |
|
|
|
|
import { FaAngleDown, FaAngleUp } from 'react-icons/fa'; |
|
|
|
|
import { Form, Input, InputNumber, Popconfirm, Table, Typography } from 'antd'; |
|
|
|
|
|
|
|
|
|
export default function NewFlightApprovalsTable(props) { |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
@ -22,11 +22,57 @@ export default function NewFlightApprovalsTable(props) {
|
|
|
|
|
// 확장된 행 키
|
|
|
|
|
const [expandedRowKeys, setExpandedRowKeys] = useState([]); |
|
|
|
|
|
|
|
|
|
// 수정 키
|
|
|
|
|
const [editingKey, setEditingKey] = useState(''); |
|
|
|
|
|
|
|
|
|
const [form] = Form.useForm(); |
|
|
|
|
|
|
|
|
|
// 수정 키 확인
|
|
|
|
|
const isEditing = record => record.key === editingKey; |
|
|
|
|
|
|
|
|
|
// 승인, 미승인, 비대상 건수 계산
|
|
|
|
|
useEffect(() => { |
|
|
|
|
resApprovalCd(); |
|
|
|
|
}, [laancAprvList]); |
|
|
|
|
|
|
|
|
|
// 수정 이벤트
|
|
|
|
|
const edit = record => { |
|
|
|
|
form.setFieldsValue({ |
|
|
|
|
bufferZone: '', |
|
|
|
|
fltElev: '', |
|
|
|
|
...record |
|
|
|
|
}); |
|
|
|
|
setEditingKey(record.key); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 취소 이벤트
|
|
|
|
|
const cancel = () => { |
|
|
|
|
setEditingKey(''); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 저장 이벤트
|
|
|
|
|
const save = async key => { |
|
|
|
|
try { |
|
|
|
|
const row = await form.validateFields(); |
|
|
|
|
const newData = [...laancAprvList]; |
|
|
|
|
const index = newData.findIndex(item => key === item.key); |
|
|
|
|
|
|
|
|
|
if (index > -1) { |
|
|
|
|
const item = newData[index]; |
|
|
|
|
newData.splice(index, 1, { ...item, ...row }); |
|
|
|
|
setData(newData); |
|
|
|
|
setEditingKey(''); |
|
|
|
|
} else { |
|
|
|
|
newData.push(row); |
|
|
|
|
setData(newData); |
|
|
|
|
setEditingKey(''); |
|
|
|
|
} |
|
|
|
|
} catch (errInfo) { |
|
|
|
|
console.log('Validate Failed:', errInfo); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 데이터
|
|
|
|
|
const columns = [ |
|
|
|
|
{ |
|
|
|
|
title: ( |
|
|
|
@ -38,23 +84,29 @@ export default function NewFlightApprovalsTable(props) {
|
|
|
|
|
), |
|
|
|
|
dataIndex: 'applyNo', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '40px', |
|
|
|
|
key: 'applyNo', |
|
|
|
|
editable: true |
|
|
|
|
width: '40px' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: ( |
|
|
|
|
<> |
|
|
|
|
신청 <br /> |
|
|
|
|
일자 |
|
|
|
|
신청 <br />월 |
|
|
|
|
</> |
|
|
|
|
), |
|
|
|
|
dataIndex: 'applyDt', |
|
|
|
|
width: '60px', |
|
|
|
|
width: '80px', |
|
|
|
|
align: 'center', |
|
|
|
|
key: 'applyDt', |
|
|
|
|
editable: true, |
|
|
|
|
render: text => dayjs(text).format('YYYY-MM-DD') |
|
|
|
|
render: text => dayjs(text).format(' M월') |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: ( |
|
|
|
|
<> |
|
|
|
|
신청 <br />일 |
|
|
|
|
</> |
|
|
|
|
), |
|
|
|
|
dataIndex: 'applyDt', |
|
|
|
|
width: '80px', |
|
|
|
|
align: 'center', |
|
|
|
|
render: text => dayjs(text).format('DD일') |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: ( |
|
|
|
@ -66,32 +118,58 @@ export default function NewFlightApprovalsTable(props) {
|
|
|
|
|
dataIndex: 'areaList', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '85px', |
|
|
|
|
key: 'areaList', |
|
|
|
|
editable: true, |
|
|
|
|
render: areaList => <>총{areaList.length}건</> |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: <>신청자</>, |
|
|
|
|
dataIndex: 'applyDt', |
|
|
|
|
width: '78px', |
|
|
|
|
width: '90px', |
|
|
|
|
align: 'center', |
|
|
|
|
key: 'applyDt', |
|
|
|
|
editable: true, |
|
|
|
|
|
|
|
|
|
render: text => '홍*동' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: ( |
|
|
|
|
<> |
|
|
|
|
비행 <br /> |
|
|
|
|
행정 <br /> |
|
|
|
|
구역 |
|
|
|
|
</> |
|
|
|
|
), |
|
|
|
|
dataIndex: 'applyDt', |
|
|
|
|
width: '75px', |
|
|
|
|
dataIndex: 'areaList', |
|
|
|
|
width: '90px', |
|
|
|
|
align: 'center', |
|
|
|
|
key: 'applyDt', |
|
|
|
|
editable: true, |
|
|
|
|
render: text => '서울시 마포구상암동 1674 (원추)' |
|
|
|
|
render: areaList => { |
|
|
|
|
return areaList.length <= 1 ? '서울시특별시' : '-'; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: ( |
|
|
|
|
<> |
|
|
|
|
행정 <br /> |
|
|
|
|
구역 |
|
|
|
|
<br />2 |
|
|
|
|
</> |
|
|
|
|
), |
|
|
|
|
dataIndex: 'areaList', |
|
|
|
|
width: '90px', |
|
|
|
|
align: 'center', |
|
|
|
|
render: areaList => { |
|
|
|
|
return areaList.length <= 1 ? '강서구' : '-'; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: ( |
|
|
|
|
<> |
|
|
|
|
상세 <br /> |
|
|
|
|
주소 |
|
|
|
|
</> |
|
|
|
|
), |
|
|
|
|
dataIndex: 'areaList', |
|
|
|
|
width: '100px', |
|
|
|
|
align: 'center', |
|
|
|
|
render: areaList => { |
|
|
|
|
return areaList.length <= 1 ? '가양동439-1(원추)' : '-'; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: ( |
|
|
|
@ -103,73 +181,155 @@ export default function NewFlightApprovalsTable(props) {
|
|
|
|
|
dataIndex: 'areaList', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '85px', |
|
|
|
|
key: 'latLon', |
|
|
|
|
editable: true, |
|
|
|
|
render: areaList => ( |
|
|
|
|
render: areaList => { |
|
|
|
|
return areaList.length <= 1 ? ( |
|
|
|
|
<> |
|
|
|
|
{areaList[0].lat.toFixed(5)}, |
|
|
|
|
<br /> |
|
|
|
|
{areaList[0].lon.toFixed(5)} |
|
|
|
|
</> |
|
|
|
|
) : ( |
|
|
|
|
'-' |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: ( |
|
|
|
|
<> |
|
|
|
|
{areaList[0].lat.toFixed(5)}, |
|
|
|
|
<br /> |
|
|
|
|
{areaList[0].lon.toFixed(5)} |
|
|
|
|
비행 <br /> |
|
|
|
|
반경 |
|
|
|
|
</> |
|
|
|
|
) |
|
|
|
|
), |
|
|
|
|
dataIndex: 'bufferZone', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '70px', |
|
|
|
|
editable: true, |
|
|
|
|
render: (text, record) => { |
|
|
|
|
return text ? text : '-'; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: ( |
|
|
|
|
<> |
|
|
|
|
반경 <br /> |
|
|
|
|
(M) |
|
|
|
|
해발 <br /> |
|
|
|
|
고도 |
|
|
|
|
</> |
|
|
|
|
), |
|
|
|
|
dataIndex: 'areaList', |
|
|
|
|
dataIndex: 'fltElev', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '70px', |
|
|
|
|
key: 'bufferZone', |
|
|
|
|
editable: true, |
|
|
|
|
render: areaList => <>{areaList[0].bufferZone}</> |
|
|
|
|
render: (text, record) => { |
|
|
|
|
return text ? text : '-'; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: ( |
|
|
|
|
<> |
|
|
|
|
고도 <br /> |
|
|
|
|
(M) |
|
|
|
|
세부 <br /> |
|
|
|
|
사항 |
|
|
|
|
</> |
|
|
|
|
), |
|
|
|
|
dataIndex: 'areaList', |
|
|
|
|
key: 'fltElev', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '70px', |
|
|
|
|
editable: true, |
|
|
|
|
render: areaList => <>{areaList[0].fltElev}</> |
|
|
|
|
width: '110px', |
|
|
|
|
render: areaList => { |
|
|
|
|
return areaList.length <= 1 ? <>-</> : '-'; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: ( |
|
|
|
|
<> |
|
|
|
|
검토 <br /> |
|
|
|
|
결과 |
|
|
|
|
비행 <br /> |
|
|
|
|
목적 |
|
|
|
|
</> |
|
|
|
|
), |
|
|
|
|
dataIndex: 'areaList', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '85px', |
|
|
|
|
key: 'approvalCd', |
|
|
|
|
width: '110px', |
|
|
|
|
render: areaList => { |
|
|
|
|
return areaList.length <= 1 ? <>기타</> : '-'; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: ( |
|
|
|
|
<> |
|
|
|
|
긴급 <br /> |
|
|
|
|
구조 <br /> |
|
|
|
|
기관 |
|
|
|
|
</> |
|
|
|
|
), |
|
|
|
|
dataIndex: 'areaList', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '110px', |
|
|
|
|
editable: true, |
|
|
|
|
render: areaList => { |
|
|
|
|
return areaList.length <= 1 ? <></> : '-'; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: <>비고</>, |
|
|
|
|
dataIndex: 'areaList', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '110px', |
|
|
|
|
editable: true, |
|
|
|
|
render: areaList => ( |
|
|
|
|
render: areaList => { |
|
|
|
|
return areaList.length <= 1 ? <>비행 고도 특별 주의 건 입니다.</> : '-'; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: ( |
|
|
|
|
<> |
|
|
|
|
{areaList[0].approvalCd === 'U' |
|
|
|
|
? '비대상' |
|
|
|
|
: areaList[0].approvalCd === 'S' |
|
|
|
|
? '승인' |
|
|
|
|
: '미승인'} |
|
|
|
|
검토 <br /> |
|
|
|
|
결과 |
|
|
|
|
</> |
|
|
|
|
) |
|
|
|
|
), |
|
|
|
|
dataIndex: 'areaList', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '110px', |
|
|
|
|
render: areaList => { |
|
|
|
|
const approvalCounts = areaList.reduce( |
|
|
|
|
(counts, item) => { |
|
|
|
|
if (item.approvalCd === 'U') { |
|
|
|
|
counts.unapproved += 1; |
|
|
|
|
} else if (item.approvalCd === 'S') { |
|
|
|
|
counts.approved += 1; |
|
|
|
|
} else { |
|
|
|
|
counts.pending += 1; |
|
|
|
|
} |
|
|
|
|
return counts; |
|
|
|
|
}, |
|
|
|
|
{ unapproved: 0, approved: 0, pending: 0 } |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
{areaList.length > 1 ? ( |
|
|
|
|
<> |
|
|
|
|
승인: {approvalCounts.approved}건 <br /> |
|
|
|
|
미승인: |
|
|
|
|
{approvalCounts.pending}건<br /> 비대상: |
|
|
|
|
{approvalCounts.unapproved}건 |
|
|
|
|
</> |
|
|
|
|
) : ( |
|
|
|
|
<> |
|
|
|
|
{areaList[0].approvalCd === 'U' |
|
|
|
|
? '비대상' |
|
|
|
|
: areaList[0].approvalCd === 'S' |
|
|
|
|
? '승인' |
|
|
|
|
: '미승인'} |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
</> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: <>더보기</>, |
|
|
|
|
dataIndex: 'areaList', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '80px', |
|
|
|
|
key: 'more', |
|
|
|
|
editable: true, |
|
|
|
|
width: '130px', |
|
|
|
|
render: (areaList, record) => |
|
|
|
|
areaList.length > 2 ? ( |
|
|
|
|
<Button color='flat-dark' onClick={() => handleExpand(record.key)}> |
|
|
|
@ -188,34 +348,107 @@ export default function NewFlightApprovalsTable(props) {
|
|
|
|
|
) : ( |
|
|
|
|
<>-</> |
|
|
|
|
) |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: '편집', |
|
|
|
|
dataIndex: 'operation', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '110px', |
|
|
|
|
render: (_, record) => { |
|
|
|
|
const editable = isEditing(record); |
|
|
|
|
return record.areaList.length <= 1 ? ( |
|
|
|
|
editable ? ( |
|
|
|
|
<span> |
|
|
|
|
<Typography.Link |
|
|
|
|
onClick={() => save(record.key)} |
|
|
|
|
style={{ |
|
|
|
|
marginRight: 8 |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
저장 |
|
|
|
|
</Typography.Link> |
|
|
|
|
<Typography.Link onClick={() => cancel()}>취소</Typography.Link> |
|
|
|
|
</span> |
|
|
|
|
) : ( |
|
|
|
|
<Button color='flat-dark'> |
|
|
|
|
<Typography.Link |
|
|
|
|
disabled={editingKey !== ''} |
|
|
|
|
onClick={() => edit(record)} |
|
|
|
|
> |
|
|
|
|
Edit |
|
|
|
|
</Typography.Link> |
|
|
|
|
</Button> |
|
|
|
|
) |
|
|
|
|
) : ( |
|
|
|
|
<>-</> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
// 확장된 테이블 데이터
|
|
|
|
|
const expandedRowRender = record => { |
|
|
|
|
const childColumns = [ |
|
|
|
|
{ |
|
|
|
|
dataIndex: 'applyNo', |
|
|
|
|
width: '30px', |
|
|
|
|
width: '40px', |
|
|
|
|
align: 'center' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
dataIndex: '6월', |
|
|
|
|
width: '80px', |
|
|
|
|
align: 'center', |
|
|
|
|
key: 'applyNo' |
|
|
|
|
render: text => dayjs(text).format('M월') |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
dataIndex: 'applyDt', |
|
|
|
|
width: '85px', |
|
|
|
|
dataIndex: '21일', |
|
|
|
|
width: '80px', |
|
|
|
|
align: 'center', |
|
|
|
|
key: 'applyDt' |
|
|
|
|
render: text => dayjs(text).format('DD일') |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
dataIndex: 'zoneNo', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '85px', |
|
|
|
|
key: 'zoneNo', |
|
|
|
|
editable: true |
|
|
|
|
render: text => { |
|
|
|
|
return <>총{text}건</>; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
dataIndex: '홍길동', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '90px', |
|
|
|
|
render: text => { |
|
|
|
|
return <>홍*동</>; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
dataIndex: '서울시특별시', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '90px', |
|
|
|
|
render: text => { |
|
|
|
|
return <>서울시특별시</>; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
dataIndex: '강남구', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '90px', |
|
|
|
|
render: text => { |
|
|
|
|
return <>강서구</>; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
dataIndex: '가양동439-1(원추)', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '100px', |
|
|
|
|
render: text => { |
|
|
|
|
return <>가양동439-1(원추)</>; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
align: 'center', |
|
|
|
|
width: '85px', |
|
|
|
|
key: 'latLon', |
|
|
|
|
dataIndex: ['lat', 'lon'], |
|
|
|
|
render: (text, record) => { |
|
|
|
|
const lat = record.lat; |
|
|
|
@ -231,28 +464,101 @@ export default function NewFlightApprovalsTable(props) {
|
|
|
|
|
{ |
|
|
|
|
dataIndex: 'bufferZone', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '85px', |
|
|
|
|
key: 'bufferZone' |
|
|
|
|
editable: true, |
|
|
|
|
width: '70px' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
dataIndex: 'fltElev', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '85px', |
|
|
|
|
key: 'fltElev' |
|
|
|
|
editable: true, |
|
|
|
|
width: '70px' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
dataIndex: '세부사항', |
|
|
|
|
align: 'center', |
|
|
|
|
editable: true, |
|
|
|
|
width: '110px', |
|
|
|
|
render: text => { |
|
|
|
|
return <>기타</>; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
dataIndex: '비행목적', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '110px', |
|
|
|
|
render: text => { |
|
|
|
|
return <>레저비행</>; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
dataIndex: '긴급구조기관', |
|
|
|
|
align: 'center', |
|
|
|
|
editable: true, |
|
|
|
|
width: '110px', |
|
|
|
|
render: text => { |
|
|
|
|
return <>-</>; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
dataIndex: '비고', |
|
|
|
|
align: 'center', |
|
|
|
|
editable: true, |
|
|
|
|
width: '110px', |
|
|
|
|
render: text => { |
|
|
|
|
return <>-</>; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
dataIndex: 'approvalCd', |
|
|
|
|
align: 'center', |
|
|
|
|
key: 'approvalCd', |
|
|
|
|
width: '110px', |
|
|
|
|
render: text => ( |
|
|
|
|
<>{text === 'U' ? '비대상' : text === 'S' ? '승인' : '미승인'}</> |
|
|
|
|
) |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
dataIndex: '더보기', |
|
|
|
|
align: 'center', |
|
|
|
|
editable: true, |
|
|
|
|
width: '130px', |
|
|
|
|
render: text => { |
|
|
|
|
return <>-</>; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
dataIndex: 'operation', |
|
|
|
|
align: 'center', |
|
|
|
|
width: '110px', |
|
|
|
|
render: (_, record) => { |
|
|
|
|
const editable = isEditing(record); |
|
|
|
|
return editable ? ( |
|
|
|
|
<span> |
|
|
|
|
<Typography.Link |
|
|
|
|
onClick={() => save(record.key)} |
|
|
|
|
style={{ |
|
|
|
|
marginRight: 8 |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
저장 |
|
|
|
|
</Typography.Link> |
|
|
|
|
<Typography.Link onClick={() => cancel()}>취소</Typography.Link> |
|
|
|
|
</span> |
|
|
|
|
) : ( |
|
|
|
|
<Button color='flat-dark'> |
|
|
|
|
<Typography.Link |
|
|
|
|
disabled={editingKey !== ''} |
|
|
|
|
onClick={() => edit(record)} |
|
|
|
|
> |
|
|
|
|
Edit |
|
|
|
|
</Typography.Link> |
|
|
|
|
</Button> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const data = []; |
|
|
|
|
record.areaList.map((item, index) => { |
|
|
|
|
if (index < 1) return; |
|
|
|
|
data.push({ |
|
|
|
|
key: `${record.applyNo}-${index}`, |
|
|
|
|
applyNo: item.applyNo, |
|
|
|
@ -267,27 +573,90 @@ export default function NewFlightApprovalsTable(props) {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<Table |
|
|
|
|
rowClassName={record => { |
|
|
|
|
let className = ''; |
|
|
|
|
if (record.approvalCd === 'S') { |
|
|
|
|
className += 'flight-approval-row'; |
|
|
|
|
} else if (record.approvalCd === 'F') { |
|
|
|
|
className += 'flight-not-approval-row'; |
|
|
|
|
} else className; |
|
|
|
|
<Form form={form} component={false}> |
|
|
|
|
<Table |
|
|
|
|
rowClassName={record => { |
|
|
|
|
let className = ''; |
|
|
|
|
if (record.approvalCd === 'S') { |
|
|
|
|
className += 'flight-approval-row'; |
|
|
|
|
} else if (record.approvalCd === 'F') { |
|
|
|
|
className += 'flight-not-approval-row'; |
|
|
|
|
} else className; |
|
|
|
|
|
|
|
|
|
return className; |
|
|
|
|
}} |
|
|
|
|
size='small' |
|
|
|
|
bordered |
|
|
|
|
columns={childColumns} |
|
|
|
|
dataSource={data} |
|
|
|
|
pagination={false} |
|
|
|
|
showHeader={false} |
|
|
|
|
/> |
|
|
|
|
if (record.planAreaSno === props.selected) { |
|
|
|
|
className += ' flight-approval-row-click'; |
|
|
|
|
} |
|
|
|
|
return className; |
|
|
|
|
}} |
|
|
|
|
size='small' |
|
|
|
|
columns={childColumns.map(col => { |
|
|
|
|
if (!col.editable) { |
|
|
|
|
return col; |
|
|
|
|
} |
|
|
|
|
return { |
|
|
|
|
...col, |
|
|
|
|
onCell: record => ({ |
|
|
|
|
record, |
|
|
|
|
inputType: |
|
|
|
|
col.dataIndex === 'bufferZone' || col.dataIndex === 'fltElev' |
|
|
|
|
? 'number' |
|
|
|
|
: 'text', |
|
|
|
|
dataIndex: col.dataIndex, |
|
|
|
|
title: col.title, |
|
|
|
|
editing: isEditing(record) |
|
|
|
|
}) |
|
|
|
|
}; |
|
|
|
|
})} |
|
|
|
|
dataSource={data} |
|
|
|
|
pagination={false} |
|
|
|
|
components={{ |
|
|
|
|
body: { |
|
|
|
|
cell: EditableCell |
|
|
|
|
} |
|
|
|
|
}} |
|
|
|
|
onRow={record => ({ |
|
|
|
|
onClick: event => { |
|
|
|
|
if (editingKey !== '') { |
|
|
|
|
return; // edit 상태면 이벤트 실행 안 함
|
|
|
|
|
} |
|
|
|
|
// 이벤트 버블링을 막기 위해 클릭된 요소가 'Edit' 버튼인지 확인
|
|
|
|
|
if ( |
|
|
|
|
event.target.tagName !== 'BUTTON' && |
|
|
|
|
event.target.tagName !== 'A' && |
|
|
|
|
!event.target.closest('.ant-input') && // input 요소를 감지
|
|
|
|
|
!event.target.closest('.ant-input-number') // inputNumber 요소를 감지
|
|
|
|
|
) { |
|
|
|
|
handleInRowClick(record); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
})} |
|
|
|
|
showHeader={false} |
|
|
|
|
rowHoverable={false} |
|
|
|
|
/> |
|
|
|
|
</Form> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 테이블 데이터
|
|
|
|
|
const mergedColumns = columns.map(col => { |
|
|
|
|
if (!col.editable) { |
|
|
|
|
return col; |
|
|
|
|
} |
|
|
|
|
return { |
|
|
|
|
...col, |
|
|
|
|
onCell: record => ({ |
|
|
|
|
record, |
|
|
|
|
inputType: |
|
|
|
|
col.dataIndex === 'bufferZone' || col.dataIndex === 'fltElev' |
|
|
|
|
? 'number' |
|
|
|
|
: 'text', |
|
|
|
|
dataIndex: col.dataIndex, |
|
|
|
|
title: col.title, |
|
|
|
|
editing: isEditing(record) |
|
|
|
|
}) |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 모달 오픈 핸들러
|
|
|
|
|
const handlerOpenModal = (approval, fltElev, fltElevMax) => { |
|
|
|
|
if (approval === 'F') { |
|
|
|
@ -319,14 +688,6 @@ export default function NewFlightApprovalsTable(props) {
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 테이블 내부 행 클릭 이벤트
|
|
|
|
|
const handleInRowClick = row => { |
|
|
|
|
console.log('>>', row); |
|
|
|
|
|
|
|
|
|
handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax); |
|
|
|
|
props.handlerDetail(row); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 날짜 포맷 변경
|
|
|
|
|
const formatDate = dateString => { |
|
|
|
|
const date = new Date(dateString); |
|
|
|
@ -359,6 +720,7 @@ export default function NewFlightApprovalsTable(props) {
|
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
//
|
|
|
|
|
const handleExpand = key => { |
|
|
|
|
const expanded = expandedRowKeys.includes(key); |
|
|
|
|
const keys = expanded |
|
|
|
@ -367,13 +729,30 @@ export default function NewFlightApprovalsTable(props) {
|
|
|
|
|
setExpandedRowKeys(keys); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 테이블 행 클릭 이벤트
|
|
|
|
|
const handleRowClick = row => { |
|
|
|
|
if (row.areaList.length > 1) return; |
|
|
|
|
handlerOpenModal( |
|
|
|
|
row.areaList[0].approvalCd, |
|
|
|
|
row.areaList[0].fltElev, |
|
|
|
|
row.areaList[0].fltElevMax |
|
|
|
|
); |
|
|
|
|
props.handlerDetail(row.areaList[0]); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 확장된 테이블 행 클릭 이벤트
|
|
|
|
|
const handleInRowClick = row => { |
|
|
|
|
handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax); |
|
|
|
|
props.handlerDetail(row); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className='layer-content'> |
|
|
|
|
<div className='layer-ti d-flex justify-content-between align-items-center'> |
|
|
|
|
<h4>비행승인 신청 검토결과 목록</h4> |
|
|
|
|
<span className='search-case'> |
|
|
|
|
{formatDate(props.startDate)} |
|
|
|
|
{props.endDate && props.startDate != props.endDate |
|
|
|
|
{props.endDate && props.startDate !== props.endDate |
|
|
|
|
? '~' + formatDate(props.endDate) + ' ' |
|
|
|
|
: null} |
|
|
|
|
총 {approvalCdValue.S + approvalCdValue.F + approvalCdValue.U} 건 |
|
|
|
@ -401,33 +780,63 @@ export default function NewFlightApprovalsTable(props) {
|
|
|
|
|
style={{ width: '100%' }} |
|
|
|
|
> |
|
|
|
|
{laancAprvList?.length > 0 ? ( |
|
|
|
|
<Table |
|
|
|
|
dataSource={laancAprvList.map((item, index) => ({ |
|
|
|
|
...item, |
|
|
|
|
key: index |
|
|
|
|
}))} |
|
|
|
|
columns={columns} |
|
|
|
|
size='small' |
|
|
|
|
rowClassName={record => { |
|
|
|
|
let className = ''; |
|
|
|
|
if (record.areaList[0].approvalCd === 'S') { |
|
|
|
|
className += 'flight-approval-row editable-row'; |
|
|
|
|
} else if (record.areaList[0].approvalCd === 'F') { |
|
|
|
|
className += 'flight-not-approval-row editable-row'; |
|
|
|
|
} else className += 'editable-row'; |
|
|
|
|
<Form form={form} component={false}> |
|
|
|
|
<Table |
|
|
|
|
components={{ |
|
|
|
|
body: { |
|
|
|
|
cell: EditableCell |
|
|
|
|
} |
|
|
|
|
}} |
|
|
|
|
dataSource={laancAprvList.map((item, index) => ({ |
|
|
|
|
...item, |
|
|
|
|
key: index |
|
|
|
|
}))} |
|
|
|
|
columns={mergedColumns} |
|
|
|
|
rowClassName={record => { |
|
|
|
|
let className = ''; |
|
|
|
|
if (record?.areaList[0]?.approvalCd === 'S') { |
|
|
|
|
className += 'flight-approval-row editable-row'; |
|
|
|
|
} else if (record.areaList[0].approvalCd === 'F') { |
|
|
|
|
className += 'flight-not-approval-row editable-row'; |
|
|
|
|
} else className += 'editable-row'; |
|
|
|
|
if (record.areaList[0].planAreaSno === props.selected) { |
|
|
|
|
className += ' flight-approval-row-click'; |
|
|
|
|
} |
|
|
|
|
if (expandedRowKeys.includes(record.key)) { |
|
|
|
|
className += ' expanded-row'; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return className; |
|
|
|
|
}} |
|
|
|
|
expandable={{ |
|
|
|
|
expandedRowRender, |
|
|
|
|
expandedRowKeys: expandedRowKeys, |
|
|
|
|
onExpand: handleExpand, |
|
|
|
|
rowExpandable: record => record.areaList.length > 1 // areaList가 1개 이상인 경우에만 확장 가능
|
|
|
|
|
}} |
|
|
|
|
tableLayout='auto' |
|
|
|
|
rowHoverable={false} |
|
|
|
|
expandIconColumnIndex={-1} // 기본 확장 아이콘을 숨김
|
|
|
|
|
/> |
|
|
|
|
return className; |
|
|
|
|
}} |
|
|
|
|
onRow={record => ({ |
|
|
|
|
onClick: event => { |
|
|
|
|
if (editingKey !== '') { |
|
|
|
|
return; // edit 상태면 이벤트 실행 안 함
|
|
|
|
|
} |
|
|
|
|
// 이벤트 버블링을 막기 위해 클릭된 요소가 'Edit' 버튼인지 확인
|
|
|
|
|
if ( |
|
|
|
|
event.target.tagName !== 'BUTTON' && |
|
|
|
|
event.target.tagName !== 'A' && |
|
|
|
|
!event.target.closest('.ant-input') && // input 요소를 감지
|
|
|
|
|
!event.target.closest('.ant-input-number') // inputNumber 요소를 감지
|
|
|
|
|
) { |
|
|
|
|
handleRowClick(record); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
})} |
|
|
|
|
expandable={{ |
|
|
|
|
expandedRowRender, |
|
|
|
|
expandedRowKeys: expandedRowKeys, |
|
|
|
|
onExpand: (expanded, record) => handleExpand(record.key), |
|
|
|
|
rowExpandable: record => record?.areaList?.length > 1 |
|
|
|
|
}} |
|
|
|
|
scroll={{ |
|
|
|
|
x: 1500 |
|
|
|
|
}} |
|
|
|
|
rowHoverable={false} |
|
|
|
|
expandIconColumnIndex={-1} |
|
|
|
|
/> |
|
|
|
|
</Form> |
|
|
|
|
) : ( |
|
|
|
|
<div |
|
|
|
|
className='d-flex justify-content-center align-items-center ' |
|
|
|
@ -442,3 +851,50 @@ export default function NewFlightApprovalsTable(props) {
|
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const EditableCell = ({ |
|
|
|
|
editing, |
|
|
|
|
dataIndex, |
|
|
|
|
title, |
|
|
|
|
inputType, |
|
|
|
|
record, |
|
|
|
|
index, |
|
|
|
|
children, |
|
|
|
|
...restProps |
|
|
|
|
}) => { |
|
|
|
|
const inputNode = |
|
|
|
|
inputType === 'number' ? ( |
|
|
|
|
<Input |
|
|
|
|
min={0} |
|
|
|
|
onKeyPress={e => { |
|
|
|
|
if (!/[0-9]/.test(e.key)) { |
|
|
|
|
e.preventDefault(); // 숫자 외의 입력을 막음
|
|
|
|
|
} |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
) : ( |
|
|
|
|
<Input /> |
|
|
|
|
); |
|
|
|
|
return ( |
|
|
|
|
<td {...restProps}> |
|
|
|
|
{editing ? ( |
|
|
|
|
<Form.Item |
|
|
|
|
name={dataIndex} |
|
|
|
|
style={{ |
|
|
|
|
margin: 0 |
|
|
|
|
}} |
|
|
|
|
rules={[ |
|
|
|
|
{ |
|
|
|
|
required: true, |
|
|
|
|
message: `값을 입력 해 주세요.` |
|
|
|
|
} |
|
|
|
|
]} |
|
|
|
|
> |
|
|
|
|
{inputNode} |
|
|
|
|
</Form.Item> |
|
|
|
|
) : ( |
|
|
|
|
children |
|
|
|
|
)} |
|
|
|
|
</td> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|