pc-admin/src/pages/Medical/Test/Batch/Step.jsx

import React, { useState, useRef } from 'react'
import { Button, Checkbox, Select, Space, Carousel, Typography } from 'antd'
import { getRangeOfSheet, getAllCols } from './excel'
import styles from './style.less'

const { Title } = Typography;
const { Option } = Select;

export default (props) => {
  const { workbook } = props

  const sliderRef = useRef()
  const [sheetName, setSheetName] = useState()
  const sheetRef = useRef()
  const [allCols, setAllCols] = useState([])
  const [columns, setColumns] = useState()

  const handleSheetSelect = (nm) => {
    setSheetName(nm)
    sheetRef.current = workbook.Sheets[nm]

    const sheetRange = getRangeOfSheet(sheetRef.current)
    const cols = getAllCols(sheetRange.startCol, sheetRange.endCol)
    setAllCols(cols)
  }

  const handleColChange = (cols) => {
    setColumns(cols)
  }

  const next = () => {
    sliderRef.current.next()
  }

  return (
    <div>
      <Carousel ref={sliderRef}>
        <div className={styles['step-box']}>
          <Space direction="vertical" size="large" style={{width: '100%'}}>
            <Title level={4}>请选择 sheet</Title>
            <Select value={sheetName} onChange={handleSheetSelect}  style={{minWidth: '200px'}}>
              {
                (workbook.SheetNames || []).map((nm) => (<Option key={nm} value={nm}>{nm}</Option>))
              }
            </Select>
            <Button disabled={!sheetName} type="primary" onClick={next}>下一步</Button>
          </Space>
        </div>
        
        <div className={styles['step-box']}>
          <Space direction="vertical" size="large" style={{width: '100%'}}>
            <Title level={4}>请选择 数据列</Title>
            <Checkbox.Group style={{ width: '100%' }} value={columns} onChange={handleColChange}>
              {
                allCols.map((col) => (<div key={col}><Checkbox value={col}>{col}</Checkbox></div>))
              }
            </Checkbox.Group>
            <Button type="primary" disabled={!columns || !columns.length} onClick={next}>下一步</Button>
          </Space>
        </div>
      </Carousel>
    </div>
  )
}