|
|
@ -6,25 +6,41 @@ import { |
|
|
|
ModalFooter |
|
|
|
ModalFooter |
|
|
|
} from '@component/ui'; |
|
|
|
} from '@component/ui'; |
|
|
|
import React, { useEffect, useState, useRef } from 'react'; |
|
|
|
import React, { useEffect, useState, useRef } from 'react'; |
|
|
|
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
|
|
|
|
|
|
|
import { Table, Form, Input } from 'antd'; |
|
|
|
import { Table, Form, Input } from 'antd'; |
|
|
|
import ScrollContainer from 'react-indiana-drag-scroll'; |
|
|
|
import ScrollContainer from 'react-indiana-drag-scroll'; |
|
|
|
|
|
|
|
import { |
|
|
|
|
|
|
|
updateLaancAprv, |
|
|
|
|
|
|
|
updateLaancAprvReview |
|
|
|
|
|
|
|
} from '@src/redux/features/laanc/laancThunk'; |
|
|
|
export default function OperationCheckBoxModal(props) { |
|
|
|
export default function OperationCheckBoxModal(props) { |
|
|
|
console.log('>>', props.checkData); |
|
|
|
|
|
|
|
const scrollContainerRef = useRef(null); |
|
|
|
const scrollContainerRef = useRef(null); |
|
|
|
const [dataSource, setDataSource] = useState(props.checkData); |
|
|
|
const [dataSource, setDataSource] = useState( |
|
|
|
|
|
|
|
props.checkData.map((item, index) => ({ |
|
|
|
const EditableRow = ({ index, ...props }) => { |
|
|
|
...item, |
|
|
|
const [form] = Form.useForm(); |
|
|
|
key: `parent_${item.planSno}_${index}`, |
|
|
|
return ( |
|
|
|
reviewedReason: item.reviewedReason || '' |
|
|
|
<Form form={form} component={false}> |
|
|
|
})) |
|
|
|
<tr {...props} /> |
|
|
|
|
|
|
|
</Form> |
|
|
|
|
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
const [tempDataSource, setTempDataSource] = useState( |
|
|
|
|
|
|
|
dataSource.map(item => { |
|
|
|
|
|
|
|
return { |
|
|
|
|
|
|
|
planAreaSno: item.planAreaSno, |
|
|
|
|
|
|
|
reviewedReason: item.reviewedReason || '', |
|
|
|
|
|
|
|
reqRadius: item.reqRadius || '', |
|
|
|
|
|
|
|
fltElev: item.fltElev || '', |
|
|
|
|
|
|
|
dtl: item.dtl || '', |
|
|
|
|
|
|
|
era: item.era || '', |
|
|
|
|
|
|
|
rm: item.rm || '' |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
); // 임시 데이터 소스 추가
|
|
|
|
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [form] = Form.useForm(); |
|
|
|
|
|
|
|
|
|
|
|
const EditableCell = ({ |
|
|
|
const EditableCell = ({ |
|
|
|
title, |
|
|
|
|
|
|
|
editable, |
|
|
|
editable, |
|
|
|
children, |
|
|
|
children, |
|
|
|
dataIndex, |
|
|
|
dataIndex, |
|
|
@ -32,50 +48,34 @@ export default function OperationCheckBoxModal(props) { |
|
|
|
handleSave, |
|
|
|
handleSave, |
|
|
|
...restProps |
|
|
|
...restProps |
|
|
|
}) => { |
|
|
|
}) => { |
|
|
|
const [editing, setEditing] = useState(false); |
|
|
|
|
|
|
|
const inputRef = useRef(null); |
|
|
|
|
|
|
|
const [form] = Form.useForm(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (editing) { |
|
|
|
|
|
|
|
inputRef.current?.focus(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, [editing]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const toggleEdit = () => { |
|
|
|
const toggleEdit = () => { |
|
|
|
setEditing(!editing); |
|
|
|
form.setFieldsValue({ |
|
|
|
form.setFieldsValue({ [dataIndex]: record[dataIndex] }); |
|
|
|
[dataIndex]: record[dataIndex] |
|
|
|
|
|
|
|
}); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const save = async () => { |
|
|
|
const save = async () => { |
|
|
|
try { |
|
|
|
try { |
|
|
|
const values = await form.validateFields(); |
|
|
|
const values = await form.validateFields(); |
|
|
|
setEditing(false); |
|
|
|
|
|
|
|
handleSave({ ...record, ...values }); |
|
|
|
handleSave({ ...record, ...values }); |
|
|
|
} catch (errInfo) { |
|
|
|
} catch (errInfo) {} |
|
|
|
console.log('Save failed:', errInfo); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
let childNode = children; |
|
|
|
let childNode = children; |
|
|
|
|
|
|
|
|
|
|
|
if (editable) { |
|
|
|
if (editable) { |
|
|
|
childNode = editing ? ( |
|
|
|
childNode = ( |
|
|
|
<Form.Item |
|
|
|
<Form.Item |
|
|
|
style={{ margin: 0 }} |
|
|
|
className='editable-input' |
|
|
|
name={dataIndex} |
|
|
|
name={`${record.planAreaSno}`} // 고유한 이름 설정
|
|
|
|
rules={[{ required: true, message: `${title} is required.` }]} |
|
|
|
initialValue={record[dataIndex]} |
|
|
|
> |
|
|
|
> |
|
|
|
<Input ref={inputRef} onPressEnter={save} onBlur={save} /> |
|
|
|
<Input |
|
|
|
|
|
|
|
onPressEnter={save} |
|
|
|
|
|
|
|
onBlur={save} |
|
|
|
|
|
|
|
placeholder='재검토 사유를 작성해주세요' |
|
|
|
|
|
|
|
/> |
|
|
|
</Form.Item> |
|
|
|
</Form.Item> |
|
|
|
) : ( |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
className='editable-cell-value-wrap' |
|
|
|
|
|
|
|
style={{ paddingRight: 24 }} |
|
|
|
|
|
|
|
onClick={toggleEdit} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{children} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -83,13 +83,62 @@ export default function OperationCheckBoxModal(props) { |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handleSave = row => { |
|
|
|
const handleSave = row => { |
|
|
|
const newData = [...dataSource]; |
|
|
|
const newData = [...tempDataSource]; |
|
|
|
const index = newData.findIndex(item => row.key === item.key); |
|
|
|
newData.map(item => { |
|
|
|
const item = newData[index]; |
|
|
|
if (row.hasOwnProperty(item.planAreaSno)) { |
|
|
|
newData.splice(index, 1, { ...item, ...row }); |
|
|
|
item.reviewedReason = row[item.planAreaSno]; |
|
|
|
setDataSource(newData); |
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setTempDataSource(newData); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const components = { |
|
|
|
|
|
|
|
body: { |
|
|
|
|
|
|
|
cell: EditableCell |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleConfirm = async () => { |
|
|
|
|
|
|
|
if (tempDataSource.filter(item => !item.reviewedReason).length > 0) { |
|
|
|
|
|
|
|
return props.handlerErrorModal( |
|
|
|
|
|
|
|
'필수값 입력 오류', |
|
|
|
|
|
|
|
'재검토 항목을 입력 해 주세요.', |
|
|
|
|
|
|
|
false |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const planAreaSnoList = tempDataSource.map(item => item.planAreaSno); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
dispatch(updateLaancAprv(tempDataSource)) |
|
|
|
|
|
|
|
.then(updateRes => { |
|
|
|
|
|
|
|
if (updateRes.meta.requestStatus === 'fulfilled') { |
|
|
|
|
|
|
|
return dispatch( |
|
|
|
|
|
|
|
updateLaancAprvReview({ planAreaSnoList, reviewedType: 'A' }) |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
throw new Error('요청 처리에 실패했습니다.'); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
.then(() => { |
|
|
|
|
|
|
|
props.handlerSearch( |
|
|
|
|
|
|
|
props.filterId, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
startDate: props.startDate, |
|
|
|
|
|
|
|
endDate: props.endDate |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
props.filterArea |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
props.handlerErrorModal('성공', '재검토 요청이 완료되었습니다.', false); |
|
|
|
|
|
|
|
props.setIsCheckBoxModal(false); |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
.catch(err => { |
|
|
|
|
|
|
|
props.handlerErrorModal( |
|
|
|
|
|
|
|
'실패', |
|
|
|
|
|
|
|
'재검토 요청을 실패하였습니다. 다시 시도해주세요.', |
|
|
|
|
|
|
|
true |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}; |
|
|
|
const defaultColumns = [ |
|
|
|
const defaultColumns = [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: ( |
|
|
|
title: ( |
|
|
@ -101,7 +150,7 @@ export default function OperationCheckBoxModal(props) { |
|
|
|
), |
|
|
|
), |
|
|
|
dataIndex: 'applyNo', |
|
|
|
dataIndex: 'applyNo', |
|
|
|
align: 'center', |
|
|
|
align: 'center', |
|
|
|
width: '20px' |
|
|
|
width: '40px' |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: ( |
|
|
|
title: ( |
|
|
@ -231,7 +280,7 @@ export default function OperationCheckBoxModal(props) { |
|
|
|
), |
|
|
|
), |
|
|
|
dataIndex: 'approvalCd', |
|
|
|
dataIndex: 'approvalCd', |
|
|
|
align: 'center', |
|
|
|
align: 'center', |
|
|
|
width: '10px', |
|
|
|
width: '50px', |
|
|
|
render: approvalCd => { |
|
|
|
render: approvalCd => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<> |
|
|
@ -256,7 +305,7 @@ export default function OperationCheckBoxModal(props) { |
|
|
|
), |
|
|
|
), |
|
|
|
dataIndex: 'reviewedType', |
|
|
|
dataIndex: 'reviewedType', |
|
|
|
align: 'center', |
|
|
|
align: 'center', |
|
|
|
width: '30px', |
|
|
|
width: '20px', |
|
|
|
render: reviewedType => { |
|
|
|
render: reviewedType => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<> |
|
|
@ -283,7 +332,7 @@ export default function OperationCheckBoxModal(props) { |
|
|
|
align: 'center', |
|
|
|
align: 'center', |
|
|
|
editable: true, |
|
|
|
editable: true, |
|
|
|
render: reviewedReason => { |
|
|
|
render: reviewedReason => { |
|
|
|
return reviewedReason ?? '재검토 사유를 작성해주세요'; |
|
|
|
return reviewedReason ?? '-'; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
]; |
|
|
|
]; |
|
|
@ -304,13 +353,6 @@ export default function OperationCheckBoxModal(props) { |
|
|
|
}; |
|
|
|
}; |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const components = { |
|
|
|
|
|
|
|
body: { |
|
|
|
|
|
|
|
row: EditableRow, |
|
|
|
|
|
|
|
cell: EditableCell |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Modal |
|
|
|
<Modal |
|
|
|
isOpen={props.isCheckBoxModal} |
|
|
|
isOpen={props.isCheckBoxModal} |
|
|
@ -331,15 +373,18 @@ export default function OperationCheckBoxModal(props) { |
|
|
|
vertical={true} |
|
|
|
vertical={true} |
|
|
|
horizontal={true} |
|
|
|
horizontal={true} |
|
|
|
activationDistance={10} |
|
|
|
activationDistance={10} |
|
|
|
ignoreElements='.editable-input' // 이 클래스의 요소는 드래그 이벤트에서 제외
|
|
|
|
ignoreElements='.editable-input' |
|
|
|
> |
|
|
|
> |
|
|
|
<div style={{ width: '2000px' }}> |
|
|
|
<div style={{ width: '2000px' }}> |
|
|
|
|
|
|
|
<Form form={form}> |
|
|
|
<Table |
|
|
|
<Table |
|
|
|
dataSource={dataSource.map((item, index) => ({ |
|
|
|
dataSource={dataSource} |
|
|
|
...item, |
|
|
|
|
|
|
|
key: `parent_${item.planSno}` |
|
|
|
|
|
|
|
}))} |
|
|
|
|
|
|
|
components={components} |
|
|
|
components={components} |
|
|
|
|
|
|
|
columns={columns} |
|
|
|
|
|
|
|
scroll={{ x: 1700 }} |
|
|
|
|
|
|
|
pagination={false} |
|
|
|
|
|
|
|
rowHoverable={false} |
|
|
|
|
|
|
|
expandIconColumnIndex={-1} |
|
|
|
rowClassName={record => { |
|
|
|
rowClassName={record => { |
|
|
|
let className = ''; |
|
|
|
let className = ''; |
|
|
|
if (record.approvalCd === 'S') { |
|
|
|
if (record.approvalCd === 'S') { |
|
|
@ -352,21 +397,14 @@ export default function OperationCheckBoxModal(props) { |
|
|
|
|
|
|
|
|
|
|
|
return className; |
|
|
|
return className; |
|
|
|
}} |
|
|
|
}} |
|
|
|
columns={columns} |
|
|
|
|
|
|
|
scroll={{ x: 1700 }} |
|
|
|
|
|
|
|
pagination={false} |
|
|
|
|
|
|
|
rowHoverable={false} |
|
|
|
|
|
|
|
expandIconColumnIndex={-1} |
|
|
|
|
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
</Form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</ScrollContainer> |
|
|
|
</ScrollContainer> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</ModalBody> |
|
|
|
</ModalBody> |
|
|
|
<ModalFooter> |
|
|
|
<ModalFooter> |
|
|
|
<Button |
|
|
|
<Button color='primary' onClick={handleConfirm}> |
|
|
|
color='primary' |
|
|
|
|
|
|
|
// onClick={() => props.setIsModal(!props.setIsModal)}
|
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
확인 |
|
|
|
확인 |
|
|
|
</Button> |
|
|
|
</Button> |
|
|
|
</ModalFooter> |
|
|
|
</ModalFooter> |
|
|
|