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

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

const { TabPane } = Tabs;

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

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

  const onChange = e => {
    setCheckValue(e.target.value);
  };

  const handleOk = () => {
    if (!checkValue) {
      message.error('请选择要合并的清单');
    } else {
      let checkSheet = versionList.find(item => item.id == checkValue);
      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 }}
    >
      <Radio.Group value={checkValue} style={{ width: '100%' }} onChange={onChange}>
        {/* <Row gutter={16}>
          {versionList.map(v => {
            if (v.id == version.id) return null;
            return (
              <Col span={8} key={v.id}>
                <Radio value={v.id}>{v.version_name}</Radio>
              </Col>
            );
          })}
        </Row> */}
        <Tabs>
          {tabList.map(tab => (
            <TabPane tab={tab.name} key={tab.id}>
              {/* <Row>
                {tab.list.map(version => (
                  <Col span={8} key={version.id}>
                    <Radio value={version.id}>{version.version_name}</Radio>
                  </Col>
                ))}
              </Row> */}
              {tab.list.map(version => (
                <div style={{ marginBottom: 16 }} key={version.id}>
                  <Radio value={version.id}>{version.version_name}</Radio>
                </div>
              ))}
            </TabPane>
          ))}
        </Tabs>
      </Radio.Group>
    </Modal>
  );
}

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