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

테이블 컬럼 수정중

master
sanguu516 3 months ago
parent
182aa2a0f7
commit
196f65a8ab
1 changed files with 279 additions and 66 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 301
      src/components/flight/NewFlightApprovalsTable.js

301
src/components/flight/NewFlightApprovalsTable.js
Unescape View File

@ -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: (
<>
신청 <br />
일자
신청 <br />월
</>
),
dataIndex: 'applyDt',
width: '60px',
width: '80px',
align: 'center',
key: 'applyDt',
editable: true,
render: text => dayjs(text).format(' M월')
},
{
title: (
<>
신청 <br />일
</>
),
dataIndex: 'applyDt',
width: '80px',
align: 'center',
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: (
<>
비행 <br />
행정 <br />
구역
<br />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: (
<>
행정 <br />
구역
<br />2
</>
),
dataIndex: 'areaList',
width: '90px',
align: 'center',
editable: true,
render: areaList => {
return areaList.length <= 1 ? '강서구' : '-';
}
},
{
title: (
<>
상세 <br />
주소
</>
),
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: (
<>
반경 <br />
(M)
비행 <br />
반경
</>
),
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: (
<>
고도 <br />
(M)
해발 <br />
고도
</>
),
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: (
<>
비행 <br />
목적
</>
),
dataIndex: 'areaList',
align: 'center',
width: '110px',
editable: true,
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 => {
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 ? (
<span>
<Typography.Link
onClick={() => save(record.key)}
style={{
marginRight: 8
}}
>
저장
</Typography.Link>
<Popconfirm title='취소하시겠습니까?' onConfirm={cancel}>
<a>취소</a>
</Popconfirm>
</span>
) : (
<Button color='flat-dark'>
<Typography.Link
disabled={editingKey !== ''}
onClick={() => edit(record)}
>
Edit
</Typography.Link>
</Button>
);
}
}
];
@ -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) {
<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} 건
@ -446,13 +613,19 @@ export default function NewFlightApprovalsTable(props) {
style={{ width: '100%' }}
>
{laancAprvList?.length > 0 ? (
<Form form={form} component={false}>
<Table
components={{
body: {
cell: EditableCell
}
}}
bordered
dataSource={laancAprvList.map((item, index) => ({
...item,
key: index
}))}
columns={columns}
size='small'
columns={mergedColumns}
rowClassName={record => {
let className = '';
if (record.areaList[0].approvalCd === 'S') {
@ -463,15 +636,20 @@ export default function NewFlightApprovalsTable(props) {
return className;
}}
pagination={false}
expandable={{
expandedRowRender,
expandedRowKeys: expandedRowKeys,
onExpand: handleExpand,
rowExpandable: record => record.areaList.length > 1 // areaList가 1개 이상인 경우에만 확장 가능
rowExpandable: record => record.areaList.length > 1
}}
scroll={{
x: 1500
}}
rowHoverable={false}
expandIconColumnIndex={-1} // 기본 확장 아이콘을 숨김
expandIconColumnIndex={-1}
/>
</Form>
) : (
<div
className='d-flex justify-content-center align-items-center '
@ -486,3 +664,38 @@ export default function NewFlightApprovalsTable(props) {
</div>
);
}
const EditableCell = ({
editing,
dataIndex,
title,
inputType,
record,
index,
children,
...restProps
}) => {
const inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
return (
<td {...restProps}>
{editing ? (
<Form.Item
name={dataIndex}
style={{
margin: 0
}}
rules={[
{
required: true,
message: `Please Input ${title}!`
}
]}
>
{inputNode}
</Form.Item>
) : (
children
)}
</td>
);
};

Write Preview
Loading…
Cancel
Save