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

import React, { useEffect, useState, useRef, useMemo } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Checkbox, Row, Col, message, Tabs } from 'antd';
import { connect } from 'dva';

const { TabPane } = Tabs;

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

  const [checkValue, setCheckValue] = useState([]);

  const onChange = check => {
    if (check.length <= 2) {
      setCheckValue(check);
    } else {
      message.error('只能比对两个文件');
    }
  };

  const handleOk = () => {
    if (checkValue.length != 2) {
      message.error('请选择要比对的两个文件');
    } else {
      let checkSheet = [];

      versionList.forEach(item => {
        if (checkValue.indexOf(item.id) != -1) {
          checkSheet.push(item);
        }
      });
      onOk(checkSheet);
      onClose();
      setCheckValue([]);
    }
  };

  const tabList = useMemo(() => {
    let list = {};
    versionList.forEach(version => {
      let nodeId = version.template_node_id;
      if (!nodeId || nodeId === '0') return;
      if (!list[nodeId]) {
        list[nodeId] = [];
      }
      list[nodeId].push(version);
    });
    return Object.keys(list).map(nodeId => ({
      name: flowDetail.nodes.find(node => node.Id == nodeId)?.label,
      id: nodeId,
      list: list[nodeId],
    }));
  }, [versionList, flowDetail]);

  return (
    <Modal
      title="选择比对文件"
      visible={visible}
      onCancel={onClose}
      onOk={handleOk}
      width={600}
      bodyStyle={{ paddingTop: 0 }}
    >
      <Checkbox.Group value={checkValue} style={{ width: '100%' }} onChange={onChange}>
        {/* <Row gutter={16}>
          {versionList.map(version => (
            <Col span={8} key={version.id}>
              <Checkbox value={version.id}>{version.version_name}</Checkbox>
            </Col>
          ))}
        </Row> */}
        <Tabs>
          {tabList.map(tab => (
            <TabPane tab={tab.name} key={tab.id}>
              {/* <Row gutter={24}>
                {tab.list.map(version => (
                  <Col span={24} key={version.id}>
                  </Col>
                ))}
              </Row> */}
              {tab.list.map(version => (
                <div style={{ marginBottom: 16 }} key={version.id}>
                  <Checkbox value={version.id}>{version.version_name}</Checkbox>
                </div>
              ))}
            </TabPane>
          ))}
        </Tabs>
      </Checkbox.Group>
    </Modal>
  );
}

export default connect(({ detail, xflow }) => ({
  versionList: detail.versionList,
  flowDetail: xflow.flowDetail,
}))(CompareModal);