WorkloadWeb/src/pages/PurchaseAdmin/PurchaseList/Detail/ExportModal.js

import React, { useEffect, useState, useRef } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Steps,
  Button,
  Drawer,
  Comment,
  Tooltip,
  Avatar,
  List,
  Card,
  Modal,
  Checkbox,
  Row,
  Col,
  message,
  Input,
  Table,
  Alert,
  Spin,
  Tabs,
} from 'antd';
import list from '../List/models/list';

const { Step } = Steps;
const { TextArea } = Input;
const { TabPane } = Tabs;

// 选择比对清单
function CompareModal(props) {
  const { visible, onClose, onOk, sheet } = props;

  const [checkValue, setCheckValue] = useState([]);
  const [tabList, setTabList] = useState([]);
  const [active, setActive] = useState();

  useEffect(() => {
    const list = [];
    if (sheet && sheet.length > 0) {
      const sheetData = JSON.parse(JSON.stringify(sheet));
      sheetData.forEach(item => {
        let obj = {};
        obj.name = item.name;
        if (item.data && item.data[0]) {
          obj.list = item.data[0]?.filter(cur => cur);
        }
        obj.id = item.index;
        list.push(obj);
      });

      setCheckValue([]);
      setTabList(list);
      setActive(list[0]?.id);
    }
  }, [sheet]);

  const onChange = check => {
    setCheckValue(check);
    console.log(check);
  };

  const handleOk = () => {
    onOk(checkValue);
  };

  return (
    <Modal
      title="选择导出列"
      visible={visible}
      onCancel={onClose}
      onOk={handleOk}
      bodyStyle={{ paddingTop: 0 }}
    >
      <Checkbox.Group value={checkValue} style={{ width: '100%' }} onChange={onChange}>
        <Tabs activeKey={active} onChange={setActive}>
          {tabList.map(tab => (
            <TabPane tab={tab.name} key={tab.id}>
              <Row>
                {tab.list.map(item => (
                  <Col span={8} key={item.m}>
                    <Checkbox value={item.v}>{item.v}</Checkbox>
                  </Col>
                ))}
              </Row>
            </TabPane>
          ))}
        </Tabs>
      </Checkbox.Group>
    </Modal>
  );
}
export default CompareModal;