feta

src/pages/Medical/Test/Batch/Step.jsx

@@ -1,19 +1,35 @@
 import React, { useState, useRef } from 'react'
-import { Button, Checkbox, Select, Space, Carousel, Typography } from 'antd'
+import { Row, Col, Button, InputNumber, Select, Carousel, Typography } from 'antd'
 import { getRangeOfSheet, getAllCols } from './excel'
 import styles from './style.less'
 
 const { Title } = Typography;
 const { Option } = Select;
 
+const ColSelect = (props) => {
+  const { value, onChange, cols } = props
+
+  return (
+    <Select value={value} onChange={onChange} allowClear style={{minWidth: '90%'}}>
+      {
+        cols.map((col) => (<Option key={col} value={col}>{col}</Option>))
+      }
+    </Select>
+  )
+}
+
 export default (props) => {
-  const { workbook } = props
+  const { workbook, onChange } = props
 
   const sliderRef = useRef()
   const [sheetName, setSheetName] = useState()
   const sheetRef = useRef()
   const [allCols, setAllCols] = useState([])
-  const [columns, setColumns] = useState()
+  const [studentNoCol, setStudentCol] = useState()
+  const [testNoCol, setTestCol] = useState()
+  const [dataStartRow, setDataStartRow] = useState(2)
+
+  const maped = studentNoCol && testNoCol && studentNoCol !== testNoCol
 
   const handleSheetSelect = (nm) => {
     setSheetName(nm)
@@ -24,39 +40,69 @@ export default (props) => {
     setAllCols(cols)
   }
 
-  const handleColChange = (cols) => {
-    setColumns(cols)
-  }
-
   const next = () => {
     sliderRef.current.next()
   }
 
+  const handleSubmit = () => {
+    onChange({
+      sheet: sheetRef.current,
+      cols: { studentNoCol, testNoCol },
+      dataStartRow,
+    })
+    
+    const t = setTimeout(() => {
+      // 重置所有
+      sliderRef.current.goTo(0, true)
+      setSheetName()
+      sheetRef.current = null
+      setAllCols([])
+      setStudentCol()
+      setTestCol()
+      setDataStartRow(2)
+      clearTimeout(t)
+    })
+  }
+
   return (
     <div>
-      <Carousel ref={sliderRef}>
+      <Carousel ref={sliderRef} style={{width: '100%'}}>
+        {/* 第一步 */}
         <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>
+            <Title level={5}>请选择 sheet</Title>
+            <div className={styles['step-content']}>
+              <Select value={sheetName} onChange={handleSheetSelect}  style={{minWidth: '200px'}}>
+                {
+                  (workbook.SheetNames || []).map((nm) => (<Option key={nm} value={nm}>{nm}</Option>))
+                }
+              </Select>
+            </div>
             <Button disabled={!sheetName} type="primary" onClick={next}>下一步</Button>
-          </Space>
         </div>
         
+        {/* 第二步 */}
+        <div className={styles['step-box']}>
+          <Title level={5}>请设置 数据映射列</Title>
+          <div className={styles['step-content']}>
+            <Row style={{padding: '.3em 0'}}>
+              <Col span={12}>体检号:</Col>
+              <Col span={12}><ColSelect cols={allCols} value={testNoCol} onChange={setTestCol} /></Col>
+            </Row>
+            <Row style={{padding: '.3em 0'}}>
+              <Col span={12}>学号:</Col>
+              <Col span={12}><ColSelect cols={allCols} value={studentNoCol} onChange={setStudentCol} /></Col>
+            </Row>
+          </div>
+          <Button type="primary" disabled={!maped} onClick={next}>下一步</Button>
+        </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>
+          <Title level={5}>请设置 数据起始行</Title>
+          <div className={styles['step-content']}>
+            <InputNumber value={dataStartRow} onChange={setDataStartRow} step={1} min={1} max={1000} />
+          </div>
+          <Button type="primary" disabled={!dataStartRow} onClick={handleSubmit}>完成</Button>
         </div>
       </Carousel>
     </div>

src/pages/Medical/Test/Batch/index.jsx

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Alert, Button, Card, message, Space, Modal } from 'antd';
-import { UploadOutlined } from '@ant-design/icons';
+import { Alert, Button, Card, message, Space, Modal, Table } from 'antd';
+import { FileExcelOutlined, SaveOutlined, FileZipOutlined } from '@ant-design/icons';
 import School from '@/components/School';
 import Step from './Step'
 import { read } from './excel'
@@ -13,6 +13,30 @@ export default (props) => {
   const [reading, setReading] = useState(false)
 
   const workbookRef = useRef()
+  const [dataSource, setDataSource] = useState([])
+  const [zipFile, setZipFile] = useState()
+
+  const columns = [
+    {
+      key: 'index',
+      title: '序号',
+      width: 200,
+      align: 'center',
+      render: (t,r,i) => i + 1,
+    },
+    {
+      key: 'testNo',
+      dataIndex: 'testNo',
+      title: '体检号',
+      align: 'center',
+    },
+    {
+      key: 'studentNo',
+      dataIndex: 'studentNo',
+      title: '学号',
+      align: 'center',
+    },
+  ]
 
   const handleFile = () => {
     const input = document.createElement('input')
@@ -37,10 +61,46 @@ export default (props) => {
     input.click()
   }
 
+  const handleZipFile = () => {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = 'application/zip'
+    input.onchange = (e) => {
+      const file = e.target.files[0]
+      if (!file) {
+        message.warning('请选择文件')
+      }
+      setZipFile(file)
+    }
+    input.click()
+
+  }
+
+  const handleSettingChange = (e) => {
+    setVisible(false)
+
+    const { dataStartRow, sheet, cols } = e
+
+    const [, end] = sheet['!ref'].split(':')
+    const maxRow = /\d+/.exec(end)[0] - 0
+    const arr = []
+    for (let i = dataStartRow; i <= maxRow; i += 1) {
+      const testNo = sheet[`${cols.testNoCol}${i}`]?.v
+      const studentNo = sheet[`${cols.studentNoCol}${i}`]?.v
+
+      arr.push({
+        testNo,
+        studentNo, 
+      })
+    }
+
+    setDataSource(arr)
+  }
+
   return (
     <PageContainer>
       <Space direction="vertical" size="large" style={{width: '100%'}}>
-        <Alert message="友情提示" description="导入文件数据不要超过 200 列, 6000 行" type="info" closable />
+        <Alert message="友情提示" description="导入文件数据不要超过 200 列, 6000 行。如果出现未知错误, 请退出重试几次" type="info" closable />
         <Card>
           <Space direction="horizontal" size="large">
             <School
@@ -57,20 +117,39 @@ export default (props) => {
               type="primary"
               loading={reading}
               disabled={!schoolId}
-              icon={<UploadOutlined />}
+              icon={<FileExcelOutlined />}
               onClick={handleFile}
-            >导入</Button>
+            >上传 Excel 文件</Button>
+
+            <Button
+              ghost
+              type="primary"
+              disabled={!dataSource ||!dataSource.length}
+              icon={<FileZipOutlined />}
+              onClick={handleZipFile}
+            >上传 ZIP 文件</Button>
+            
+            <Button
+              type="primary"
+              loading={reading}
+              disabled={!zipFile}
+              icon={<SaveOutlined />}
+              onClick={handleFile}
+            >保存入库</Button>
           </Space>
         </Card>
+
+        <Table columns={columns} dataSource={dataSource} rowKey="testNo" pagination={false} />
       </Space>
       <Modal
         title="设置数据内容"
         visible={visible}
         onCancel={() => setVisible(false)}
         footer={null}
+        width={480}
         maskClosable={false}
       >
-        <Step workbook={workbookRef.current} />
+        <Step workbook={workbookRef.current} onChange={handleSettingChange} />
       </Modal>
     </PageContainer>
   )

src/pages/Medical/Test/Batch/style.less

@@ -1,5 +1,12 @@
 
 .step-box {
-  width: 800px;
-  min-height: 600px;
+  width: 100%;
+
+  .step-content {
+    width: 100%;
+    height: 240px;
+    margin: 2em 0;
+    box-sizing: border-box;
+    overflow-y: auto;
+  }
 }