관제과 페이지 체크박스 작업중

src/components/flight/ControlApprovalsTable.js

@@ -12,6 +12,7 @@ import {
   getLaancAprvList
 } from '@src/redux/features/laanc/laancThunk';
 import { ERROR_MESSAGE, ERROR_TITLE } from '@src/configs/msgConst';
+import { CgKey } from 'react-icons/cg';
 
 export default function ControlApprovalsTable(props) {
   const dispatch = useDispatch();
@@ -40,6 +41,8 @@ export default function ControlApprovalsTable(props) {
 
   const [form] = Form.useForm();
 
+  const [checkList, setCheckList] = useState([]);
+
   // 수정 키 확인
   const isEditing = record => record.key === editingKey;
 
@@ -703,7 +706,7 @@ export default function ControlApprovalsTable(props) {
     const data = [];
     record.areaList.map((item, index) => {
       data.push({
-        key: `${item.planAreaSno}-${index}`,
+        key: `${item.planSno}`,
         applyNo: item.applyNo,
         applyDt: item.applyDt,
         zoneNo: item.zoneNo,
@@ -765,7 +768,10 @@ export default function ControlApprovalsTable(props) {
               })
             };
           })}
-          dataSource={data}
+          dataSource={record.areaList.map((item, index) => ({
+            ...item,
+            key: `child_${record.planSno}_${item.planAreaSno}`
+          }))}
           pagination={false}
           components={{
             body: {
@@ -791,7 +797,10 @@ export default function ControlApprovalsTable(props) {
             }
           })}
           rowSelection={{
-            ...rowSelection
+            ...childRowSelection,
+            selectedRowKeys: checkList.filter(key =>
+              key.startsWith(`child_${record.planSno}_`)
+            )
           }}
           showHeader={false}
           rowHoverable={false}
@@ -971,19 +980,97 @@ export default function ControlApprovalsTable(props) {
     }
   };
 
-  const rowSelection = {
-    onChange: (selectedRowKeys, selectedRows) => {
-      console.log(
-        `selectedRowKeys: ${selectedRowKeys}`,
-        'selectedRows: ',
-        selectedRows
-      );
+  // 자식 테이블 체크박스
+  const childRowSelection = {
+    selectedRowKeys: checkList.filter(key => key.startsWith('child_')),
+    onChange: (selectedRowKeys, selectedRows, info) => {
+      const newCheckList = checkList.filter(key => !key.startsWith('child_'));
+      // console.log('>>>>', selectedRowKeys);
     },
     onSelect: (record, selected, selectedRows) => {
-      console.log(record, selected, selectedRows);
+      const key = record.key;
+      const newCheckList = [];
+
+      if (selected) {
+        newCheckList.push(...checkList, key);
+      } else {
+        newCheckList.push(...checkList.filter(k => k !== key));
+      }
+      updateCheckList(newCheckList);
+    }
+  };
+
+  // 체크박스 업데이트
+  const updateCheckList = list => {
+    const newList = [...list];
+
+    // 부모 키 업데이트
+    laancAprvList.forEach(parent => {
+      const parentKey = `parent_${parent.planSno}`;
+      const childKeys = parent.areaList.map(
+        child => `child_${parent.planSno}_${child.planAreaSno}`
+      );
+      const allChildrenChecked = childKeys.every(key => newList.includes(key));
+      const someChildrenChecked = childKeys.some(key => newList.includes(key));
+
+      if (allChildrenChecked) {
+        if (!newList.includes(parentKey)) {
+          newList.push(parentKey);
+        }
+      } else if (!someChildrenChecked) {
+        const index = newList.indexOf(parentKey);
+        if (index > -1) {
+          newList.splice(index, 1);
+        }
+      }
+    });
+
+    setCheckList(newList);
+  };
+
+  // 부모 체크박스
+  const rowSelection = {
+    selectedRowKeys: checkList,
+    onSelect: (record, selected, selectedRows, nativeEvent) => {
+      const newCheckList = [...checkList];
+      const key = record.key;
+
+      if (key.startsWith('parent_')) {
+        const childKeys = record.areaList.map(child => {
+          // console.log('>>', checkList);
+
+          return `child_${record.planSno}_${child.planAreaSno}`;
+        });
+
+        if (selected) {
+          newCheckList.push(key, ...childKeys);
+        } else {
+          const index = newCheckList.indexOf(key);
+          if (index > -1) {
+            newCheckList.splice(index, 1);
+          }
+          childKeys.forEach(childKey => {
+            const childIndex = newCheckList.indexOf(childKey);
+            if (childIndex > -1) {
+              newCheckList.splice(childIndex, 1);
+            }
+          });
+        }
+      }
+
+      updateCheckList(newCheckList);
     },
     onSelectAll: (selected, selectedRows, changeRows) => {
-      console.log(selected, selectedRows, changeRows);
+      const newCheckList = selected
+        ? laancAprvList.flatMap(parent => [
+            `parent_${parent.planSno}`,
+            ...parent.areaList.map(
+              child => `child_${parent.planSno}_${child.planAreaSno}`
+            )
+          ])
+        : [];
+
+      updateCheckList(newCheckList);
     }
   };
 
@@ -1057,10 +1144,7 @@ export default function ControlApprovalsTable(props) {
                   }}
                   dataSource={laancAprvList.map((item, index) => ({
                     ...item,
-                    key:
-                      item.areaList.length >= 1
-                        ? `${item.planAreaSno}-${index}`
-                        : `${item.planAreaSno}`
+                    key: `parent_${item.planSno}`
                   }))}
                   columns={mergedColumns}
                   rowClassName={record => {

src/redux/features/laanc/laancState.ts

@@ -656,6 +656,7 @@ export interface ILaancAprvListRs {
     planSno: number;
     zoneNo: string;
     bufferZone: number;
+    purpose: string;
     fltElev: number;
     lat: number;
     fltElevMax: number;