导出excel增加全选列按钮

src/pages/Detail/ExportModal.js

@@ -20,6 +20,7 @@ import {
   Alert,
   Spin,
   Tabs,
+  Divider,
 } from 'antd';
 import list from '../List/models/list';
 
@@ -33,7 +34,9 @@ function CompareModal(props) {
 
   const [checkValue, setCheckValue] = useState([]);
   const [tabList, setTabList] = useState([]);
-  const [active, setActive] = useState();
+  const [active, setActive] = useState(1);
+  const [indeterminate, setIndeterminate] = useState(false);
+  const [checkAll, setCheckAll] = useState(false);
 
   useEffect(() => {
     const list = [];
@@ -45,40 +48,53 @@ function CompareModal(props) {
         if (item.data && item.data[0]) {
           obj.list = item.data[0]?.filter(cur => cur);
           obj.list.forEach(item => {
-            if(item.ct.t == "inlineStr") {
-              item.v = item.ct.s.map(s => s.v).join("")
+            if (item.ct.t == 'inlineStr') {
+              item.v = item.ct.s.map(s => s.v).join('');
             }
-          })
+          });
         }
         obj.id = item.index;
         list.push(obj);
       });
-      setCheckValue([]);
+      setCheckValue(list[0]?.list?.map(item => item.cid));
       setTabList(list);
       setActive(list[0]?.id);
+      setCheckAll(true);
     }
   }, [sheet]);
 
   const onChange = check => {
     setCheckValue(check);
-    console.log(check);
   };
 
   const handleOk = () => {
     onOk(checkValue);
   };
 
+  const onCheckAllChange = e => {
+    setCheckAll(!checkAll);
+    setCheckValue(checkAll ? [] : tabList[active - 1]?.list?.map(item => item.cid));
+  };
+
   return (
     <Modal
       title="选择导出列"
       visible={visible}
       onCancel={onClose}
       onOk={handleOk}
+      width={1000}
       bodyStyle={{ paddingTop: 0 }}
     >
       <Checkbox.Group value={checkValue} style={{ width: '100%' }} onChange={onChange}>
-        <Tabs activeKey={active} onChange={setActive}>
-          {tabList.map(tab => (
+        <Tabs
+          activeKey={active}
+          onChange={value => {
+            setCheckAll(false);
+            setCheckValue([]);
+            setActive(value);
+          }}
+        >
+          {tabList?.map(tab => (
             <TabPane tab={tab.name} key={tab.id}>
               <Row>
                 {tab.list.map(item => (
@@ -91,6 +107,10 @@ function CompareModal(props) {
           ))}
         </Tabs>
       </Checkbox.Group>
+      <Divider />
+      <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
+        全选
+      </Checkbox>
     </Modal>
   );
 }