feats

config/routes.js

                     menuCode: 'medical.test',
                     hideInMenu: true,
                     component: './Medical/Test/Edit',
-                  },              
+                  },
+                  {
+                    path: '/medical/test/batch',
+                    name: '批量处理',
+                    menuCode: 'medical.batch',
+                    hideInMenu: true,
+                    component: './Medical/Test/Batch',
+                  },
                   {
                     path: '/medical/hospital',
                     name: '诊室管理',

package.json

     "react-sortable-hoc": "^2.0.0",
     "umi": "^3.4.1",
     "umi-request": "^1.0.8",
-    "wangeditor": "^4.6.15"
+    "wangeditor": "^4.6.15",
+    "xlsx": "^0.17.1"
   },
   "devDependencies": {
     "@ant-design/pro-cli": "^1.0.28",

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>
+  )
+}

src/pages/Medical/Test/Batch/excel.js

+import XLSX from 'xlsx'
+import { o2s, s2o } from './number26'
+
+export function read(file) {
+  return new Promise((resolve, reject) => {
+
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      const data = new Uint8Array(e.target.result)
+  
+      const workbook = XLSX.read(data, {type: 'array'})
+      resolve(workbook)
+    }
+    reader.readAsArrayBuffer(file);
+  })
+}
+
+export function getRangeOfSheet(sheet) {
+  const [from, to] = sheet['!ref'].split(':')
+
+  const startCol = (/[a-zA-Z]+/.exec(from) || [])[0]
+  const endCol = (/[a-zA-Z]+/.exec(to) || [])[0]
+  const startRow = (/\d+/.exec(from) || [])[0]
+  const endRow = (/\d+/.exec(to) || [])[0]
+
+  return {
+    startCol,
+    endCol,
+    startRow,
+    endRow,
+  }
+}
+
+export function getAllCols(start, end) {
+  const i = s2o(start);
+  const j = s2o(end);
+  const len = j - i + 1;
+
+  return (new Array(len)).fill('*').map((_, inx) => o2s(inx + i))
+}

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

+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 School from '@/components/School';
+import Step from './Step'
+import { read } from './excel'
+
+export default (props) => {
+  
+  const [visible, setVisible] = useState(false)
+  const [schoolId, setSchoolId] = useState()
+  const [reading, setReading] = useState(false)
+
+  const workbookRef = useRef()
+
+  const handleFile = () => {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    input.onchange = (e) => {
+      const file = e.target.files[0]
+      if (!file) {
+        message.warning('请选择文件')
+      }
+
+      setReading(true)
+      read(file).then((res) => {
+        workbookRef.current = res
+        setReading(false)
+        setVisible(true)
+      }).catch((err) => {
+        console.error(err)
+        setReading(false)
+      })
+    }
+    input.click()
+  }
+
+  return (
+    <PageContainer>
+      <Space direction="vertical" size="large" style={{width: '100%'}}>
+        <Alert message="友情提示" description="导入文件数据不要超过 200 列, 6000 行" type="info" closable />
+        <Card>
+          <Space direction="horizontal" size="large">
+            <School
+              autoDefault={false}
+              value={schoolId}
+              onChange={setSchoolId}
+              allowClear
+              style={{width: '300px'}}
+              placeholder="请选择学校"
+            ></School>
+
+            <Button
+              ghost
+              type="primary"
+              loading={reading}
+              disabled={!schoolId}
+              icon={<UploadOutlined />}
+              onClick={handleFile}
+            >导入</Button>
+          </Space>
+        </Card>
+      </Space>
+      <Modal
+        title="设置数据内容"
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        footer={null}
+        maskClosable={false}
+      >
+        <Step workbook={workbookRef.current} />
+      </Modal>
+    </PageContainer>
+  )
+}

src/pages/Medical/Test/Batch/number26.js

+/**
+ * 26 进制与 10 进制的转换
+ */
+
+/**
+ * 十进制转26进制
+ * @param {*} n 
+ */
+export function o2s(num) {
+  let n = num;
+  let str = '';
+  while (n > 0) {
+    let m = n % 26;
+    if (m === 0) {
+      m = 26;
+    }
+    str = String.fromCharCode(m + 64) + str;
+    n = (n - m) / 26;
+  }
+
+  return str;
+}
+
+/**
+ * 26进制转10进制
+ * @param {*} str 
+ * @returns 
+ */
+export function s2o(str) {
+  let n = 0;
+
+  for (let i = str.length - 1, j = 1; i >= 0; i -= 1, j *= 26) {
+    const c = str.charCodeAt(i)
+    
+    n += (c - 64) * j;
+  }
+
+  return n;
+}

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

+
+.step-box {
+  width: 800px;
+  min-height: 600px;
+}

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

 import { connect, history } from 'umi';
 import { PageContainer } from '@ant-design/pro-layout';
 import ProTable from '@ant-design/pro-table';
-import { PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined, GroupOutlined } from '@ant-design/icons';
 import { Button,  Space,Image } from 'antd';
 import  { queryTable } from '@/utils/request';
 import School from '@/components/School';
   const [abc, setA] = useState();
   
   const ref = useRef();
+
   const handleMedicalClick = useCallback((id) => {
     history.push(id ? `/medical/Test/edit?id=${id}&schoolId=${school?.schoolId}` : `/medical/Test/edit?schoolId=${school?.schoolId}`);
   }, []);
 
-  const actions = [   
-    <Button key="button" icon={<PlusOutlined />} type="primary" onClick={() => handleMedicalClick()}>
+  const handleBatch = () => {
+    history.push('/medical/Test/batch')
+  }
+
+  const actions = [
+    <Button key="batch" icon={<GroupOutlined />} type="primary" ghost onClick={handleBatch}>
+      批量处理
+    </Button>,
+    <Button key="new" icon={<PlusOutlined />} type="primary" onClick={() => handleMedicalClick()}>
       新建
     </Button>,
   ];
         }}
         toolBarRender={() => actions}
       />
-     
-   
     </PageContainer>
   );
 };