feat/테이블 Input 포커스 아웃 저장 처리

src/components/flight/OperationApprovalsTable.js

@@ -81,6 +81,49 @@ export default function OperationApprovalsTable(props) {
     setCheckList([]);
   }, [laancAprvList]);
 
+  // input 수정 컴포넌트
+  const EditableCell = ({
+    editable,
+    children,
+    dataIndex,
+    record,
+    handleSave,
+    ...restProps
+  }) => {
+    // 저장 이벤트
+    const save = async () => {
+      try {
+        const values = await form.validateFields();
+        const currentValue = form.getFieldValue(
+          `${record.planAreaSno}_${dataIndex}`
+        );
+
+        console.log('>>', record);
+        console.log('>>', currentValue);
+
+        handleSave({ ...record, ...values });
+      } catch (errInfo) {}
+    };
+
+    let childNode = children;
+
+    if (editable) {
+      childNode = (
+        <Form.Item
+          className='editable-input'
+          name={`${record.planAreaSno}_${dataIndex}`} // 고유한 이름 설정
+          initialValue={record[dataIndex]}
+          onClick={e => e.stopPropagation()} // 클릭 이벤트 전파 중지
+        >
+          <Input onPressEnter={save} onBlur={save} />
+        </Form.Item>
+      );
+    }
+
+    return <td {...restProps}>{childNode}</td>;
+  };
+
+  // 검토 상태 변경
   const handlerReviewed = (value, type) => {
     let text = '';
     if (type === 'operation') {
@@ -129,6 +172,7 @@ export default function OperationApprovalsTable(props) {
       return text;
     }
   };
+
   // 데이터
   const columns = [
     {
@@ -476,63 +520,28 @@ export default function OperationApprovalsTable(props) {
     if (!col.editable) {
       return col;
     }
+
     return {
       ...col,
       onCell: record => ({
         record,
         editable: col.editable,
         dataIndex: col.dataIndex,
-        title: col.title
+        title: col.title,
-        // handleSave
+        handleSave
       })
     };
   });
 
-  // 단순 메시지 표출 모달
+  const handleSave = async row => {
-  const handlerErrorModal = (header, body, isRefresh) => {
-    dispatch(
-      openModal({
-        header: header,
-        body: body,
-        isHistoryBack: false,
-        isRefresh: isRefresh
-      })
-    );
-  };
-
-  // 수정 이벤트
-  const edit = record => {
-    form.setFieldsValue({
-      planAreaSno: record.planAreaSno,
-      reqRadius: record.reqRadius,
-      fltElev: record.fltElev,
-      dtl: record.dtl,
-      era: record.era,
-      rm: record.rm,
-      reqRadius: record.reqRadius,
-      reqElev: record.reqElev,
-      ...record
-    });
-    setEditingKey(record.key);
-  };
-
-  // 저장 이벤트
-  const save = async (key, type) => {
     try {
-      const row = await form.validateFields();
-      const index = { ...row, planAreaSno: selectedRowKey };
-
       const updateRes = await dispatch(
         updateLaancAprv([
           {
-            planAreaSno: selectedRowKey,
+            planAreaSno: row.key,
-            reqRadius: row.reqRadius || '',
+            reqRadius: row[`${row.key}_reqRadius`] || '',
-            fltElev: row.fltElev || '',
+            fltElev: row[`${row.key}_fltElev`] || '',
-            dtl: row.dtl || '',
+            reqElev: row[`${row.key}_reqElev`] || ''
-            era: row.era || '',
-            rm: row.rm || '',
-            reqRadius: row.reqRadius || '',
-            reqElev: row.reqElev || ''
           }
         ])
       );
@@ -551,6 +560,27 @@ export default function OperationApprovalsTable(props) {
     } catch (errInfo) {
       handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true);
     }
+
+    // const newData = [...tempDataSource];
+    // newData.map(item => {
+    //   if (row.hasOwnProperty(item.planAreaSno)) {
+    //     item.reviewedReason = row[item.planAreaSno];
+    //   }
+    // });
+
+    // setTempDataSource(newData);
+  };
+
+  // 단순 메시지 표출 모달
+  const handlerErrorModal = (header, body, isRefresh) => {
+    dispatch(
+      openModal({
+        header: header,
+        body: body,
+        isHistoryBack: false,
+        isRefresh: isRefresh
+      })
+    );
   };
 
   // 모달 오픈 핸들러
@@ -632,7 +662,11 @@ export default function OperationApprovalsTable(props) {
   // 체크박스 분기 처리
   const handleCheckbox = async type => {
     if (checkList.length === 0) {
-      return handlerErrorModal('검토 실패', '검토 항목을 선택해주세요.', false);
+      return handlerErrorModal(
+        '필수값 실패',
+        '검토 항목을 선택해주세요.',
+        false
+      );
     }
 
     const res = laancAprvList.flatMap(item =>
@@ -640,12 +674,12 @@ export default function OperationApprovalsTable(props) {
         checkList.includes(area.planAreaSno.toString())
       )
     );
-    console.log('>>', checkList);
 
     // 검토 요청, 재 요청 조건
     const checkCondition = {
       A: item => item.reviewedType !== 'R' && item.reviewedType !== 'C',
-      Q: item => item.reviewedType !== 'W'
+      Q: item => item.reviewedType !== 'W',
+      R: item => item.reviewedType !== 'U' && item.reviewedType !== 'W'
     };
 
     // 요청 실패 시 에러 메시지
@@ -654,7 +688,11 @@ export default function OperationApprovalsTable(props) {
         '재 요청 요청 실패',
         '검토결과 완료, 검토취소인 신청건만 재 요청이 가능합니다.'
       ],
-      Q: ['검토 요청 실패', '검토결과 대기인 신청건만 요청이 가능합니다.']
+      Q: ['검토 요청 실패', '검토결과 대기인 신청건만 요청이 가능합니다.'],
+      R: [
+        '검토 완료 실패',
+        '검토불필요, 검토대기인 신청건만 재 요청이 가능합니다.'
+      ]
     };
 
     // 요청 성공 시 액션 핸들러
@@ -666,7 +704,32 @@ export default function OperationApprovalsTable(props) {
       Q: async () => {
         try {
           await dispatch(
-            updateLaancAprvReview({ checkList, reviewedType: 'Q' })
+            updateLaancAprvReview({
+              planAreaSnoList: checkList,
+              reviewedType: 'Q'
+            })
+          );
+          props.handlerSearch(
+            props.filterId,
+            { startDate: props.startDate, endDate: props.endDate },
+            props.filterArea
+          );
+          setCheckList([]);
+        } catch (error) {
+          return handlerErrorModal(
+            '검토 실패',
+            '검토를 요청을 실패하였습니다. 다시 시도해주세요.',
+            false
+          );
+        }
+      },
+      R: async () => {
+        try {
+          await dispatch(
+            updateLaancAprvReview({
+              planAreaSnoList: checkList,
+              reviewedType: 'R'
+            })
           );
           props.handlerSearch(
             props.filterId,
@@ -737,6 +800,9 @@ export default function OperationApprovalsTable(props) {
           </span>
         </div>
         <div className='download'>
+          <Button color='primary' size='sm' onClick={() => handleCheckbox('R')}>
+            검토 완료
+          </Button>
           <Button color='primary' size='sm' onClick={() => handleCheckbox('Q')}>
             검토 요청
           </Button>
@@ -848,42 +914,3 @@ export default function OperationApprovalsTable(props) {
     </div>
   );
 }
-
-const EditableCell = ({
-  editable,
-  children,
-  dataIndex,
-  record,
-  handleSave,
-  ...restProps
-}) => {
-  const toggleEdit = () => {
-    form.setFieldsValue({
-      [dataIndex]: record[dataIndex]
-    });
-  };
-
-  const save = async () => {
-    try {
-      const values = await form.validateFields();
-      handleSave({ ...record, ...values });
-    } catch (errInfo) {}
-  };
-
-  let childNode = children;
-
-  if (editable) {
-    childNode = (
-      <Form.Item
-        className='editable-input'
-        name={`${record.planAreaSno}_${dataIndex}`} // 고유한 이름 설정
-        initialValue={record[dataIndex]}
-        onClick={e => e.stopPropagation()} // 클릭 이벤트 전파 중지
-      >
-        <Input onPressEnter={save} onBlur={save} placeholder='' />
-      </Form.Item>
-    );
-  }
-
-  return <td {...restProps}>{childNode}</td>;
-};

src/containers/flight/OperationApprovalsContainer.js

@@ -120,10 +120,8 @@ export default function OperationApprovalsContainer({ mode }) {
   }, []);
 
   useEffect(() => {
-    if (areaCoordList.length > 0) {
+    if (areaCoordList.length !== 0) {
-      if (areaCoordList[0].planSno !== 0) handlerAreaDraw();
+      handlerAreaDraw();
-    } else {
-      handlerRemoveArea();
     }
   }, [areaCoordList]);
 
@@ -318,27 +316,14 @@ export default function OperationApprovalsContainer({ mode }) {
 
   //현재 선택한 sno 및 areacoordList 저장
   const handlerDetail = async area => {
-    if (area.length > 0) {
+    console.log('>>', area);
-      if (area.length > 1) {
+    setSelected(area[0].planAreaSno);
-        const planAreaSno = [];
-        area.map(data => {
-          planAreaSno.push(data.planAreaSno);
-        });
-        setSelected(planAreaSno);
-      } else {
-        setSelected([area[0].planAreaSno]);
-      }
-      setSelectedPlanSno(area[0].planSno);
-      setMetersRadius('0m');
-      handlerDistanceClose();
-    } else {
-      setSelected([]);
-      setSelectedPlanSno([]);
-    }
 
     dispatch(clientSaveAreaCoordinateList(area));
 
     handlerMapInit();
+    setMetersRadius('0m');
+    handlerDistanceClose();
   };
 
   // 지도 레이어 초기화
@@ -975,7 +960,7 @@ export default function OperationApprovalsContainer({ mode }) {
                 handlerApprovalCd={handlerApprovalCd}
                 pageName='operation'
               />
-              <OldOperationApprovalsTable
+              <OperationApprovalsTable
                 filter={filter}
                 filterArea={filterArea}
                 filterId={filterId}