学员批量导入

src/api/user.ts

@@ -75,7 +75,7 @@ export function destroyUser(id: number) {
 //startline是表格真是数据的起始行号-用于提示哪一行数据存在问题
 //users是一个二维字符串数组，每个数组的元素如下：[部门ids字符串,邮箱,昵称,密码,姓名,身份证]
 export function storeBatch(startLine: number, users: string[][]) {
-  return client.post("/backend/v1/user/create", {
+  return client.post("/backend/v1/user/store-batch", {
     start_line: startLine,
     users: users,
   });

src/pages/index.ts

@@ -7,6 +7,7 @@ export * from "./course/vod";
 export * from "./member/index";
 export * from "./member/create";
 export * from "./member/update";
+export * from "./member/import";
 export * from "./system/administrator/index";
 export * from "./system/administrator/create";
 export * from "./system/administrator/update";

src/pages/member/import.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from "react";
+import * as XLSX from "xlsx";
+import { Row, Col, Form, Input, Cascader, Button, Upload, message } from "antd";
+import { BackBartment } from "../../compenents";
+import { user } from "../../api/index";
+import { useNavigate } from "react-router-dom";
+
+export const MemberImportPage: React.FC = () => {
+  const navigate = useNavigate();
+  const [tableData, setWageTableData] = useState<any>([]);
+
+  const uploadProps = {
+    accept: ".xls,.xlsx,application/vnd.ms-excel",
+    beforeUpload: (file: any) => {
+      const f = file;
+      const reader = new FileReader();
+      reader.onload = (e: any) => {
+        const datas = e.target.result;
+        const workbook = XLSX.read(datas, {
+          type: "binary",
+        });
+        const first_worksheet = workbook.Sheets[workbook.SheetNames[0]];
+        const jsonArr = XLSX.utils.sheet_to_json(first_worksheet, {
+          header: 1,
+        });
+        handleImpotedJson(jsonArr, file);
+      };
+      reader.readAsBinaryString(f);
+      return false;
+    },
+    onRemove: () => {
+      setWageTableData([]);
+    },
+  };
+  const handleImpotedJson = (jsonArr: any, file: any) => {
+    //jsonArr返回的是你上传的excel表格的每一行的数据 是数组形式
+    jsonArr.splice(0, 1); // 去掉表头
+    const jsonArrData = jsonArr.map((item: any, index: number) => {
+      // console.log(item, index);
+      let arr = [];
+      //在这写你需要的处理逻辑
+      // jsonObj.id = data.length + index + 1;
+      // jsonObj.key = data.length + index + 1 + '';
+      // jsonObj.name = item[0];
+
+      // jsonObj.profession = item[1];
+      // jsonObj.pay = item[2];
+      // jsonObj.work = item[3];
+      arr.push(item);
+      return arr;
+    });
+
+    // setData([...data, ...jsonArrData]);
+    setWageTableData(jsonArrData);
+    storeBatchTableData(jsonArrData);
+  };
+
+  const storeBatchTableData = (data: any) => {
+    user
+      .storeBatch(2, data)
+      .then((res: any) => {
+        message.success("导入成功！");
+        navigate(-1);
+      })
+      .catch(() => {
+        setWageTableData([]);
+      });
+  };
+
+  return (
+    <>
+      <Row className="playedu-main-body">
+        <Col>
+          <div className="float-left mb-24">
+            <BackBartment title="学员批量导入" />
+          </div>
+          <div className="float-left">
+            <Upload {...uploadProps}>
+              <Button type="primary">导入Excel</Button>
+            </Upload>
+          </div>
+        </Col>
+      </Row>
+    </>
+  );
+};

src/pages/member/index.tsx

@@ -245,6 +245,11 @@ export const MemberPage: React.FC = () => {
                     新建
                   </Button>
                 </Link>
+                <Link style={{ textDecoration: "none" }} to={`/member/import`}>
+                  <Button className="mr-16" type="primary">
+                    学员批量导入
+                  </Button>
+                </Link>
               </div>
               <div className="d-flex">
                 <Button

src/router/routes.tsx

@@ -9,6 +9,7 @@ import {
   MemberPage,
   MemberCreatePage,
   MemberUpdatePage,
+  MemberImportPage,
   SystemAdministratorPage,
   AdministratorCreatePage,
   AdministratorUpdatePage,
@@ -17,7 +18,7 @@ import {
   AdminrolesUpdatePage,
   DepartmentPage,
   DepartmentCreatePage,
-  DepartmentUpdatePage
+  DepartmentUpdatePage,
 } from "../pages";
 
 const routes: RouteObject[] = [
@@ -45,6 +46,10 @@ const routes: RouteObject[] = [
         path: "/member/update/:memberId",
         element: <MemberUpdatePage />,
       },
+      {
+        path: "/member/import",
+        element: <MemberImportPage />,
+      },
       {
         path: "/system/administrator",
         element: <SystemAdministratorPage />,
@@ -81,7 +86,6 @@ const routes: RouteObject[] = [
         path: "/department/update/:depId",
         element: <DepartmentUpdatePage />,
       },
-      
     ],
   },
   {