下载模板,导入数据

src/common/api.js

@@ -47,6 +47,7 @@ export default {
   fileConvertQuery: `${dakaapi}member/file_convert/query`,
   editorUpload: `${dakaapi}common/editor_upload`,
   getfeatures: `${dakaapi}member/features`,
+  upexportExcel: `${dakaapi}common/csv/join_school_buy_course`,
   bindWx: {
     getPreAuthorizationUrl: `${dakaapi}member/wechat/open/get_pre_authorization_url`,
     getOfficialAccount: `${dakaapi}member/wechat/open/get_official_account`,

src/pages/student/index.js

 import { connect } from 'dva';
 import React from 'react';
-import { Icon, Button, Row, Tag, Col, Input, Select, Checkbox, Form, InputNumber, Table, Modal, Tabs, message, Pagination, Radio, Tooltip } from 'antd';
+import { Icon, Button, Row, Tag, Col, Input, Select, Checkbox, Form, InputNumber, Table, Modal, Tabs, message, Pagination, Radio, Tooltip, Upload, Alert } from 'antd';
 import pageStyle from './index.less';
 import {
   pageIn, hasBtnPower, imagify, btnPermission,
+  LocalStorage,
 } from '../../utils/index';
 import RenewEdit from './RenewEdit';
 import NewRenewEdit from './newRenewEdit';
@@ -16,6 +17,7 @@ import QrcodeShow from '../../components/qrcodeShow';
 import InviteCodeDialog from '../../components/InviteCodeDialog';
 import BtnPermission from '../../components/BtnPermission';
 import RepeatStudent from './RepeatStudent';
+import api from '../../common/api';
 const { Option } = Select;
 const { TextArea } = Input;
 const { TabPane } = Tabs;
@@ -52,6 +54,29 @@ class StudentMgt extends React.Component {
         },
       },
       isExpendMore: false,
+      isUpExportExcel: false,
+      excelProps: {
+        name: 'file',
+        action: api.upexportExcel,
+        data: {
+          sign: 'UF]|y!9Kh?klY$=+42/njp1)s:rXGc3#',
+          school_id: LocalStorage.getItem('sid') || 0,
+        },
+        headers: {
+          authorization: 'authorization-text',
+        },
+        onChange(info) {
+          if (info.file.status !== 'uploading') {
+            console.log(info.file, info.fileList);
+          }
+          if (info.file.status === 'done') {
+            console.log(info.file);
+            message.success(`${info.file.name} 上传成功!`);
+          } else if (info.file.status === 'error') {
+            message.error(`${info.file.name} 上传失败！仅支持window系统`);
+          }
+        },
+      },
     };
   }
   componentDidMount() { // 挂载
@@ -308,6 +333,25 @@ class StudentMgt extends React.Component {
       },
     });
   }
+  upExportExcel = () => {
+    this.setState({
+      isUpExportExcel: true,
+    });
+  }
+  handleColseUpExportExcel = () => {
+    this.setState({
+      isUpExportExcel: false,
+    });
+  }
+  handleUpExportExcel = () => {
+    this.setState({
+      isUpExportExcel: false,
+    });
+  }
+  // 下载模板
+  loadExcel = () => {
+    window.open('https://cdn.s.shangjiadao.cn/qingxiao/assets/%E8%BD%BB%E6%A0%A1%E5%AD%A6%E7%94%9F%E5%AF%BC%E5%85%A5.csv');
+  }
   toChangeOperator = (visible) => {
     const { dispatch } = this.props;
     dispatch({
@@ -818,6 +862,7 @@ class StudentMgt extends React.Component {
     const {
       qrCodeTitle, isExpendMore, isChecked, isShowQuestion,
       verifyValue,
+      isUpExportExcel, excelProps,
     } = this.state;
     const columns = [
       {
@@ -1184,6 +1229,8 @@ class StudentMgt extends React.Component {
           {hasBtnPower('sjd/student', 'bundlingCode') && <Button size="small" id="student_bindQrcode" className={pageStyle.headerbtn} onClick={this.bindQrcodeShow}>自助绑定二维码</Button>}
           {hasBtnPower('sjd/student', 'bundlingCode') && <BtnPermission btnId="20006"><Button size="small" id="student_inviteQrcode" loading={Inviteloading} className={pageStyle.headerbtn} onClick={() => this.inviteCodeDialogVisible(true)}>快捷邀请学员</Button></BtnPermission>}
           <BtnPermission btnId="20005"><Button size="small" icon="download" className={pageStyle.downloadbtn} onClick={() => this.exportExcel(columns)} >导出</Button></BtnPermission>
+          <BtnPermission btnId="20005"><Button size="small" icon="to-top" className={pageStyle.downloadbtn} onClick={() => this.upExportExcel()} >导入</Button></BtnPermission>
+          <BtnPermission btnId="20005"><Button size="small" icon="cloud-download" className={pageStyle.downloadbtn} onClick={() => this.loadExcel()} >下载模板</Button></BtnPermission>
         </div>
         <div className={pageStyle.table}>
           <div className={pageStyle.tablebox}>
@@ -1328,6 +1375,22 @@ class StudentMgt extends React.Component {
             </div>
           </div>
         </Modal>
+        <Modal
+          title="导入Excel"
+          visible={isUpExportExcel}
+          onOk={this.handleUpExportExcel}
+          onCancel={this.handleColseUpExportExcel}
+        >
+          {
+            isUpExportExcel ?
+              <Upload {...excelProps}>
+                <Button>
+                  <Icon type="upload" /> 点击上传
+                </Button>
+              </Upload> : null
+          }
+
+        </Modal>
         <RenewEdit
           operator={operator}
           editClassInfo={editClassInfo}

src/pages/student/index.less

@@ -183,10 +183,9 @@
 }
 .resetbtn {
     margin-right: 15px;
-
 }
 .downloadbtn{
-    //margin-left: 15px;
+    margin-right: 15px;
 }
 @media (max-width: 988px) {
   .searchbtnbox {