diff --git a/src/components/flight/NewFlightApprovalsTable.js b/src/components/flight/NewFlightApprovalsTable.js index d3587c02..a59652b1 100644 --- a/src/components/flight/NewFlightApprovalsTable.js +++ b/src/components/flight/NewFlightApprovalsTable.js @@ -3,9 +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 { area } from '@turf/turf'; +import { Form, Input, InputNumber, Popconfirm, Table, Typography } from 'antd'; export default function NewFlightApprovalsTable(props) { const dispatch = useDispatch(); @@ -22,12 +21,52 @@ 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: ( @@ -40,22 +79,34 @@ export default function NewFlightApprovalsTable(props) { dataIndex: 'applyNo', align: 'center', width: '40px', - key: 'applyNo', + editable: true }, { title: ( <> - 신청
- 일자 + 신청
월 + + ), + dataIndex: 'applyDt', + width: '80px', + align: 'center', + + editable: true, + render: text => dayjs(text).format(' M월') + }, + { + title: ( + <> + 신청
일 ), 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('DD일') }, { title: ( @@ -67,33 +118,67 @@ 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: ( <> - 비행
+ 행정
구역 +
1 ), dataIndex: 'areaList', - width: '75px', + width: '90px', align: 'center', - key: 'adress', + editable: true, render: areaList => { - return areaList.length <= 1 ? '서울시 마포구상암동1674(원추)' : '-'; + return areaList.length <= 1 ? '서울시특별시' : '-'; + } + }, + { + title: ( + <> + 행정
+ 구역 +
2 + + ), + dataIndex: 'areaList', + width: '90px', + align: 'center', + + editable: true, + render: areaList => { + return areaList.length <= 1 ? '강서구' : '-'; + } + }, + { + title: ( + <> + 상세
+ 주소 + + ), + dataIndex: 'areaList', + width: '100px', + align: 'center', + + editable: true, + render: areaList => { + return areaList.length <= 1 ? '가양동439-1(원추)' : '-'; } }, { @@ -106,7 +191,7 @@ export default function NewFlightApprovalsTable(props) { dataIndex: 'areaList', align: 'center', width: '85px', - key: 'latLon', + editable: true, render: areaList => { return areaList.length <= 1 ? ( @@ -123,14 +208,13 @@ export default function NewFlightApprovalsTable(props) { { title: ( <> - 반경
- (M) + 비행
+ 반경 ), dataIndex: 'areaList', align: 'center', width: '70px', - key: 'bufferZone', editable: true, render: areaList => { return areaList.length <= 1 ? <>{areaList[0].bufferZone} : '-'; @@ -139,12 +223,11 @@ export default function NewFlightApprovalsTable(props) { { title: ( <> - 고도
- (M) + 해발
+ 고도 ), dataIndex: 'areaList', - key: 'fltElev', align: 'center', width: '70px', editable: true, @@ -152,6 +235,47 @@ export default function NewFlightApprovalsTable(props) { return areaList.length <= 1 ? <>{areaList[0].fltElev} : '-'; } }, + { + title: ( + <> + 비행
+ 목적 + + ), + 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 => { + return areaList.length <= 1 ? <> : '-'; + } + }, + { + title: <>비고, + dataIndex: 'areaList', + align: 'center', + width: '110px', + editable: true, + render: areaList => { + return areaList.length <= 1 ? <>비행 고도 특별 주의 건 입니다. : '-'; + } + }, { title: ( <> @@ -161,8 +285,8 @@ export default function NewFlightApprovalsTable(props) { ), dataIndex: 'areaList', align: 'center', - width: '100px', - key: 'approvalCd', + width: '110px', + editable: true, render: areaList => { @@ -206,8 +330,7 @@ export default function NewFlightApprovalsTable(props) { title: <>더보기, dataIndex: 'areaList', align: 'center', - width: '95px', - key: 'more', + width: '130px', editable: true, render: (areaList, record) => areaList.length > 2 ? ( @@ -227,6 +350,39 @@ export default function NewFlightApprovalsTable(props) { ) : ( <>- ) + }, + { + title: '편집', + dataIndex: 'operation', + align: 'center', + width: '110px', + render: (_, record) => { + const editable = isEditing(record); + return editable ? ( + + save(record.key)} + style={{ + marginRight: 8 + }} + > + 저장 + + + 취소 + + + ) : ( + + ); + } } ]; @@ -235,33 +391,28 @@ export default function NewFlightApprovalsTable(props) { { dataIndex: 'applyNo', width: '30px', - align: 'center', - key: 'applyNo' + align: 'center' }, { dataIndex: 'applyDt', width: '85px', - align: 'center', - key: 'applyDt' + align: 'center' }, { dataIndex: 'zoneNo', align: 'center', width: '85px', - key: 'zoneNo', editable: true }, { dataIndex: '홍길동', align: 'center', width: '85px', - key: '홍길동', editable: true }, { align: 'center', width: '85px', - key: 'latLon', dataIndex: ['lat', 'lon'], render: (text, record) => { const lat = record.lat; @@ -277,19 +428,16 @@ export default function NewFlightApprovalsTable(props) { { dataIndex: 'bufferZone', align: 'center', - width: '85px', - key: 'bufferZone' + width: '85px' }, { dataIndex: 'fltElev', align: 'center', - width: '85px', - key: 'fltElev' + width: '85px' }, { dataIndex: 'approvalCd', align: 'center', - key: 'approvalCd', render: text => ( <>{text === 'U' ? '비대상' : text === 'S' ? '승인' : '미승인'} ) @@ -327,12 +475,31 @@ export default function NewFlightApprovalsTable(props) { columns={childColumns} dataSource={data} pagination={false} - rowHoverable={false} showHeader={false} + bordered /> ); }; + 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') { @@ -418,7 +585,7 @@ export default function NewFlightApprovalsTable(props) {

비행승인 신청 검토결과 목록

{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} 건 @@ -446,32 +613,43 @@ export default function NewFlightApprovalsTable(props) { style={{ width: '100%' }} > {laancAprvList?.length > 0 ? ( - ({ - ...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'; - - return className; - }} - expandable={{ - expandedRowRender, - expandedRowKeys: expandedRowKeys, - onExpand: handleExpand, - rowExpandable: record => record.areaList.length > 1 // areaList가 1개 이상인 경우에만 확장 가능 - }} - rowHoverable={false} - expandIconColumnIndex={-1} // 기본 확장 아이콘을 숨김 - /> + +
({ + ...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'; + + return className; + }} + pagination={false} + expandable={{ + expandedRowRender, + expandedRowKeys: expandedRowKeys, + onExpand: handleExpand, + rowExpandable: record => record.areaList.length > 1 + }} + scroll={{ + x: 1500 + }} + rowHoverable={false} + expandIconColumnIndex={-1} + /> + ) : (
); } + +const EditableCell = ({ + editing, + dataIndex, + title, + inputType, + record, + index, + children, + ...restProps +}) => { + const inputNode = inputType === 'number' ? : ; + return ( +
+ ); +};
+ {editing ? ( + + {inputNode} + + ) : ( + children + )} +