feats

config/routes.js

                     menuCode: 'report.student',
                     component: './Statistic/StudentData',
                   },
-                  {
-                    path: '/report/student/saveNum',
-                    name: '收藏记录',
-                    menuCode: 'report.student',
-                    component: './Statistic/SaveNum',
-                    hideInMenu: true,
-                  },
-                  {
-                    path: '/report/student/readedNum',
-                    name: '阅读记录',
-                    menuCode: 'report.student',
-                    component: './Statistic/ReadedNum',
-                    hideInMenu: true,
-                  },
-                  {
-                    path: '/report/student/pointNum',
-                    name: '积分记录',
-                    menuCode: 'report.student',
-                    component: './Statistic/PointNum',
-                    hideInMenu: true,
-                  },
+                  // {
+                  //   path: '/report/student/saveNum',
+                  //   name: '收藏记录',
+                  //   menuCode: 'report.student',
+                  //   component: './Statistic/SaveNum',
+                  //   hideInMenu: true,
+                  // },
+                  // {
+                  //   path: '/report/student/readedNum',
+                  //   name: '阅读记录',
+                  //   menuCode: 'report.student',
+                  //   component: './Statistic/ReadedNum',
+                  //   hideInMenu: true,
+                  // },
+                  // {
+                  //   path: '/report/student/pointNum',
+                  //   name: '积分记录',
+                  //   menuCode: 'report.student',
+                  //   component: './Statistic/PointNum',
+                  //   hideInMenu: true,
+                  // },
                 ],
               },
               {

src/components/WangEditor/initEditor.js

   editor.config.menus = [
     'head', // 标题
     'bold', // 粗体
-    'fontSize', // 字号
-    'fontName', // 字体
+    // 'fontSize', // 字号
+    // 'fontName', // 字体
     'italic', // 斜体
     'underline', // 下划线
-    'strikeThrough', // 删除线
-    'foreColor', // 文字颜色
+    // 'strikeThrough', // 删除线
+    // 'foreColor', // 文字颜色
     'backColor', // 背景颜色
     'list', // 列表
     'justify', // 对齐方式

src/pages/Statistic/PointNum.jsx

-import React from 'react';
-import { connect, history } from 'umi';
-import { Button } from 'antd';
-import { PageContainer } from '@ant-design/pro-layout';
-import ProTable from '@ant-design/pro-table';
-import { queryTable } from '@/utils/request';
-
-const SaveNum = () => {
-
-  const columns = [
-    {
-      title: '科普名称',
-      key: 'name',
-      dataIndex: 'name',
-    },
-    {
-      title: '积分',
-      key: 'point',
-      dataIndex: 'point',
-    },
-    {
-      title: '获取时间',
-      key: 'date',
-      dataIndex: 'date',
-      valueType: 'dateTime',
-    },
-  ];
-
-  return (
-    <PageContainer
-      header={{
-        extra: [
-          <Button key="1" onClick={() => history.go('-1')}>
-            返回
-          </Button>,
-        ],
-      }}
-    >
-      <ProTable
-        toolbar={{
-          title:<div><span>{'姓名'}</span><span style={{marginLeft: '30vw'}}>总积分：{}</span></div>,
-        }}
-        columns={columns}
-        search={false}
-        // request={queryTable('/statis/student-data')}
-        rowKey="personId"
-        options={false}
-      />
-    </PageContainer>
-  );
-};
-
-export default SaveNum

src/pages/Statistic/ReadedNum.jsx

-import React  from 'react';
-import { connect, history } from 'umi';
-import { Button } from 'antd';
-import { PageContainer } from '@ant-design/pro-layout';
-import ProTable from '@ant-design/pro-table';
-import request, { queryTable } from '@/utils/request';
-
-const ReadedNum = () => {
-
-  const columns = [
-    {
-      title: '科普名称',
-      key: 'name',
-      dataIndex: 'name',
-    },
-    {
-      title: '阅读时长',
-      key: 'name1',
-      dataIndex: 'name1',
-    },
-    {
-      title: '阅读进度',
-      key: 'name2',
-      dataIndex: 'name2',
-    },
-    {
-      title: '最后时间',
-      key: 'date',
-      dataIndex: 'date',
-      valueType: 'dateTime',
-    },
-  ];
-
-  return (
-    <PageContainer
-      header={{
-        extra: [
-          <Button key="1" onClick={() => history.go('-1')}>
-            返回
-          </Button>,
-        ],
-      }}
-    >
-      <ProTable
-        toolbar={{
-          title:<div><span>姓名</span><span style={{marginLeft: '30vw'}}>阅读量</span></div>
-        }}
-        columns={columns}
-        search={false}
-        // request={queryTable('/statis/student-data')}
-        rowKey="personId"
-        options={false}
-      />
-    </PageContainer>
-  );
-};
-
-export default ReadedNum

src/pages/Statistic/SaveNum.jsx

-import React from 'react';
-import { connect, history } from 'umi';
-import { Button } from 'antd';
-import { PageContainer } from '@ant-design/pro-layout';
-import ProTable from '@ant-design/pro-table';
-import request, { queryTable } from '@/utils/request';
-
-const SaveNum = () => {
-
-
-  const columns = [
-    {
-      title: '科普名称',
-      key: 'name',
-      dataIndex: 'name',
-    },
-    {
-      title: '收藏时间',
-      key: 'date',
-      dataIndex: 'date',
-      valueType: 'dateTime',
-    },
-  ];
-
-
-  return (
-    <PageContainer
-      header={{
-        extra: [
-          <Button key="1" onClick={() => history.go('-1')}>
-            返回
-          </Button>,
-        ],
-      }}
-    >
-      <ProTable
-        toolbar={{
-          title:<div><span>{'姓名'}</span><span style={{marginLeft: '30vw'}}>收藏数：{}</span></div>,
-          
-        }}
-        columns={columns}
-        search={false}
-        // request={queryTable('/statis/student-data')}
-        rowKey="personId"
-        options={false}
-      />
-    </PageContainer>
-  );
-};
-
-export default SaveNum

src/pages/Statistic/StudentData.jsx

-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { connect, history } from 'umi';
-import {Space, Button} from 'antd'
+import {Space, Button, notification} from 'antd'
 import { PageContainer } from '@ant-design/pro-layout';
 import ProTable from '@ant-design/pro-table';
 import request, { queryTable } from '@/utils/request';
+import DetailDrawer from './components/DetailDrawer'
 
 const StudentData = (props) => {
-  const { postId } = props.location.query;
+  // const { postId } = props.location.query;
+  const paramRef = useRef();
+  const [exporting, setExporting] = useState(false)
+  const [student, setStudent] = useState();
+  const [modalVisible, setModalVisible] = useState({
+    points: false,
+    saved: false,
+    readed: false,
+  })
+
+  const toggleModal = (modal, visible) => {
+    setModalVisible({
+      ...modalVisible,
+      [modal]: visible,
+    })
+  }
 
   const tableRef = useRef()
   const [schoolDict, setSchoolDict] = useState({})
-  
-
-  const toSave =(row)=>{
 
+  const toSave = (row) =>{
+    setStudent(row);
     if(row.savedNum>0){
-      history.push(`/report/student/savenum?schoolId=${row?.schoolId}&personId=${row.personId}`);
-     
-      
+      toggleModal('saved', true);
     }
-
   }
 
-  const toReade =(row)=>{
-
+  const toReade = (row) =>{
+    setStudent(row);
     if(row.readedNum>0){
-      history.push(`/report/student/readednum?schoolId=${row?.schoolId}&personId=${row.personId}`);
+      toggleModal('readed', true);
     }
-
   }
-  const toPoint =(row)=>{
-
+  const toPoint = (row) =>{
+    setStudent(row);
     if(row.pointNum>0){
-      history.push(`/report/student/pointnum?schoolId=${row?.schoolId}&personId=${row.personId}`);
+      toggleModal('points', true);
     }
-
   }
-  
-  const columns = useMemo(() => [
+
+  const columns = [
     {
       title: '排名',
       key: 'topN',
       hideInSearch: true,
       sorter: true,
     },
-  ], [schoolDict])
+  ]
+
+  const handleBeforeSearch = (params) => {
+    const paramData = {
+      name: params.name,
+      schoolId: params.schoolId,
+      specialtyId: params.specialtyId,
+    }
+
+    // copy 一份
+    paramRef.current = paramData
+    return params
+  }
+
+  const handleExport = () => {
+    setExporting(true)
+    request('/export/statis/student-data', { params: paramRef.current || {} }).then(() => {
+      setExporting(false)
+    }).catch((err) => {
+      setExporting(false)
+      notification.error({ message: err.message })
+    })
+  }
 
   useEffect(() => {
     request('/school', { params: { pageSize: 500 } }).then(res => {
     <PageContainer
     header={{
       extra: [
-        postId&&<Button key="1" onClick={() => history.go('-1')}>
+        <Button key="1" onClick={() => history.go('-1')}>
           返回
         </Button>,
       ],
       <ProTable
         actionRef={tableRef}
         columns={columns}
-        params={{postId}}
+        beforeSearchSubmit={handleBeforeSearch}
         request={queryTable('/statis/student-data')}
         rowKey="personId"
-        search={{
-          labelWidth: '4em',
-          defaultCollapsed: false,
-          optionRender: (searchConfig, formProps, dom) => [
-            ...dom.reverse(),
-            <Button key="out"  type="primary">导出</Button>,
-          ],
-        }}
-       
-        options={false}
+        search={{ labelWidth: '4em' }}
+        toolBarRender={() => [
+          <Button key="export" type="primary" loading={exporting} onClick={handleExport}>导出</Button>
+        ]}
       />
+
+      <DetailDrawer student={student} visible={modalVisible} onClose={setModalVisible} />
     </PageContainer>
   );
 };

src/pages/Statistic/components/DetailDrawer.jsx

+import React from 'react'
+import { Drawer } from 'antd'
+import PointNum from './PointNum'
+import ReadedNum from './ReadedNum'
+import SaveNum from './SaveNum'
+
+export default (props) => {
+  const toggleVisible = (target, visible) => {
+    props.onClose({
+      ...props.visible,
+      [target]: visible,
+    })
+  }
+
+  const custDrawerProp = {
+    placement: 'right',
+    width: '60vw',
+  }
+
+  return (
+    <>
+      <Drawer
+        title="积分记录"
+        visible={props.visible.points}
+        onClose={() => toggleVisible('points', false)}
+        {...custDrawerProp}
+      >
+        <PointNum personId={props.student?.personId} />
+      </Drawer>
+      <Drawer
+        title="阅读"
+        visible={props.visible.readed}
+        onClose={() => toggleVisible('readed', false)}
+        {...custDrawerProp}
+      >
+        <ReadedNum personId={props.student?.personId} />
+      </Drawer>
+      <Drawer
+        title="收藏"
+        visible={props.visible.saved}
+        onClose={() => toggleVisible('saved', false)}
+        {...custDrawerProp}
+      >
+        <SaveNum personId={props.student?.personId} />
+      </Drawer>
+    </>
+  )
+}

src/pages/Statistic/components/PointNum.jsx

+import React, { useEffect, useState } from 'react';
+import { connect, history } from 'umi';
+import { Row, Col, Card, Space, notification, Statistic } from 'antd';
+// import { PageContainer } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+// import ProCard from '@ant-design/pro-card';
+import request, { queryTable } from '@/utils/request';
+
+const SaveNum = (props) => {
+  const [person, setPerson] = useState()
+
+  const columns = [
+    {
+      title: '科普名称',
+      key: 'targetName',
+      dataIndex: 'targetName',
+    },
+    {
+      title: '积分',
+      key: 'pointsNum',
+      dataIndex: 'pointsNum',
+    },
+    {
+      title: '获取时间',
+      key: 'createDate',
+      dataIndex: 'createDate',
+      valueType: 'dateTime',
+    },
+  ];
+
+  useEffect(() => {
+    request(`/person/${props.personId}`).then(res => {
+      setPerson(res)
+    }).catch((err) => {
+      notification.error({ message: err.message })
+    })
+  }, [props.personId])
+
+  return (
+    // <PageContainer
+    //   header={{
+    //     extra: [
+    //       <Button key="1" onClick={() => history.go('-1')}>
+    //         返回
+    //       </Button>,
+    //     ],
+    //   }}
+    // >
+      <div>
+        <Card style={{marginBottom: '2em'}} bordered={false}>
+          <Row gutter={24}>
+            <Col span={12}>
+              <Statistic title="姓名" value={person?.nickName} />
+            </Col>
+            <Col span={12}>
+              <Statistic title="积分" value={person?.personData?.pointNum} />
+            </Col>
+          </Row>
+        </Card>
+
+        <ProTable
+          columns={columns}
+          search={false}
+          params={{ personId: props.personId }}
+          request={queryTable('/points-log')}
+          rowKey="serialNo"
+          options={false}
+        />
+      </div>
+    // </PageContainer>
+  );
+};
+
+export default SaveNum

src/pages/Statistic/components/ReadedNum.jsx

+import React, { useEffect, useState } from 'react';
+// import { connect, history } from 'umi';
+import { notification, Row, Col, Card, Statistic } from 'antd';
+// import { PageContainer } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import request, { queryTable } from '@/utils/request';
+
+const ReadedNum = (props) => {
+  const [person, setPerson] = useState()
+
+  const columns = [
+    {
+      title: '科普名称',
+      key: 'postName',
+      dataIndex: 'postName',
+    },
+    {
+      title: '阅读时间',
+      key: 'createDate',
+      dataIndex: 'createDate',
+      valueType: 'dateTime',
+    },
+  ];
+
+  useEffect(() => {
+    request(`/person/${props.personId}`).then(res => {
+      setPerson(res)
+    }).catch((err) => {
+      notification.error({ message: err.message })
+    })
+  }, [props.personId])
+
+  return (
+    // <PageContainer
+    //   header={{
+    //     extra: [
+    //       <Button key="1" onClick={() => history.go('-1')}>
+    //         返回
+    //       </Button>,
+    //     ],
+    //   }}
+    // >
+    <div>
+      <Card style={{marginBottom: '2em'}} bordered={false}>
+        <Row gutter={24}>
+          <Col span={12}>
+            <Statistic title="姓名" value={person?.nickName} />
+          </Col>
+          <Col span={12}>
+            <Statistic title="阅读数" value={person?.personData?.readedNum} />
+          </Col>
+        </Row>
+      </Card>
+
+      <ProTable
+        columns={columns}
+        search={false}
+        params={{ personId: props.personId }}
+        request={queryTable('/read-log')}
+        rowKey="serialNo"
+        options={false}
+      />
+    </div>
+    // </PageContainer>
+  );
+};
+
+export default ReadedNum

src/pages/Statistic/components/SaveNum.jsx

+import React, {useEffect, useState} from 'react';
+// import { connect, history } from 'umi';
+import { notification, Row, Col, Card, Statistic } from 'antd';
+// import { PageContainer } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import request, { queryTable } from '@/utils/request';
+
+const SaveNum = (props) => {
+  const [person, setPerson] = useState()
+
+  const columns = [
+    {
+      title: '科普名称',
+      key: 'name',
+      dataIndex: 'name',
+    },
+    {
+      title: '收藏时间',
+      key: 'savedDate',
+      dataIndex: 'savedDate',
+      valueType: 'dateTime',
+    },
+  ];
+
+  useEffect(() => {
+    request(`/person/${props.personId}`).then(res => {
+      setPerson(res)
+    }).catch((err) => {
+      notification.error({ message: err.message })
+    })
+  }, [props.personId])
+
+
+  return (
+    // <PageContainer
+    //   header={{
+    //     extra: [
+    //       <Button key="1" onClick={() => history.go('-1')}>
+    //         返回
+    //       </Button>,
+    //     ],
+    //   }}
+    // >
+    <div>
+      <Card style={{marginBottom: '2em'}} bordered={false}>
+        <Row gutter={24}>
+          <Col span={12}>
+            <Statistic title="姓名" value={person?.nickName} />
+          </Col>
+          <Col span={12}>
+            <Statistic title="收藏数" value={person?.personData?.savedNum} />
+          </Col>
+        </Row>
+      </Card>
+
+      <ProTable
+        columns={columns}
+        search={false}
+        params={{ personId: props.personId }}
+        request={queryTable('/post-save')}
+        rowKey="personId"
+        options={false}
+      />
+    </div>
+    // </PageContainer>
+  );
+};
+
+export default SaveNum

src/utils/request.js

 /** Request 网络请求工具 更详细的 api 文档: https://github.com/umijs/umi-request */
 import { extend } from 'umi-request';
 import { notification } from 'antd';
+import { downloadFile } from './utils'
 
 const codeMessage = {
   200: '服务器成功返回请求的数据。',
     }
     return Promise.reject(result);
   }
+  
+  if (contextType.indexOf('application/vnd.ms-excel') > -1) {
+    const data = await response.clone().blob();
+    const content = response.headers.get('content-disposition');
+    const fileName = content.replace('attachment;filename=', '')
+    downloadFile(data, decodeURIComponent(fileName))
+  }
 
   return response;
 });

src/utils/utils.js

 }
 
 export const defaultAvatar = 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'
+
+export function downloadFile(data, fileName) {
+  const url = window.URL.createObjectURL(new Blob([data]))
+  const link = document.createElement('a')
+  link.style.display = 'none'
+  link.href = url
+  link.setAttribute('download', fileName)
+  document.body.append(link)
+  link.click()
+}