Merge branch 'refactor/wufan/20210615/refactor-UI-resourceDisk' into 'master'

Refactor/wufan/20210615/refactor ui resource disk

See merge request !45

src/bu-components/ChooseMembersModal.jsx

@@ -10,6 +10,8 @@ import Service from '@/common/js/service';
 // import _ from 'underscore';
 import './ChooseMembersModal.less';
 import User from '@/common/js/user'
+import { XMTable } from '@/components';
+import college from '@/common/lottie/college';
 
 const { Search } = Input;
 
@@ -203,7 +205,6 @@ class ChooseMembersModal extends React.Component {
         title: '全选',             // 实际为头像，但在表格上这行要求显示为全选
         key: 'avatar',
         dataIndex: 'avatar',
-        width: '30%',
         render: (value, record) => {
           const { adminName } = record;
           return (
@@ -292,16 +293,19 @@ class ChooseMembersModal extends React.Component {
                   enterButton={<span className="icon iconfont">&#xe832;</span>}
                 />
                 <div className='container-left-body-table'>
-                  <Table 
+                  <XMTable 
+                    renderEmpty={{
+                      image: college,
+                      description: '暂无数据'
+                    }}
                     rowKey={(record) => record.userId}
                     dataSource={allUserList}
                     columns={this.selectedColumnsLeft()}               
                     pagination={false}
                     scroll={{ y: 290}}
-                    // bordered={true}
                     size={'small'}
                     rowSelection={{
-                      columnWidth : 24,
+                      columnWidth : 63,
                       selectedRowKeys,
                       onChange : this.onChangeRow,
                       getCheckboxProps : this.getCheckboxProps,
@@ -325,7 +329,11 @@ class ChooseMembersModal extends React.Component {
                 <span className={ (selectUserList.length > 0) ? 'span-right-l' : null }>清空</span>
               </div>
               <div className='container-right-body'>
-                <Table 
+                <XMTable 
+                  renderEmpty={{
+                    image: college,
+                    description: '暂无数据'
+                  }}
                   rowKey={(record) => record.userId}
                   dataSource={selectUserList}
                   columns={this.selectedColumnsRight()}

src/bu-components/ChooseMembersModal.less

@@ -45,6 +45,14 @@
         .ant-empty-normal {
           margin: 100px 0 !important;
         }
+
+        .ant-empty {
+          margin-top: 60px; 
+        }
+        .ant-empty-description {
+          color: #999;
+        }
+
         .avatar{
           display: flex;
           align-items: center;
@@ -119,6 +127,13 @@
         margin: 144px 0 !important;
       }
 
+      .ant-empty {
+        margin-top: 60px; 
+      }
+      .ant-empty-description {
+        color: #999;
+      }
+
       .avatar{
         display: flex;
         align-items: center;

src/bu-components/CopyFileModal.jsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { Modal, Button, Breadcrumb, Radio, message  } from 'antd';
 import Service from '@/common/js/service';
 import { FILE_TYPE_ICON_MAP, DEFAULT_SIZE_UNIT } from "@/domains/resource-disk/constants";
-import { LottieIcon } from 'xiaomai-b-components';
+import LottieIcon from '@/components/LottieIcon';
 import _ from 'underscore';
 import { getEllipsText } from "@/domains/basic-domain/utils";
 import * as lodash from 'lodash';
@@ -334,6 +334,8 @@ class CopyFileModal extends React.Component {
           <div className="lottie-box">
             <LottieIcon
               title={<span className="desc">这个文件夹是空的</span>}
+              type="college"
+              size={150}
             />
           </div>
         }

src/bu-components/CopyFileModal.less

@@ -57,12 +57,17 @@
   }
   
 }
-.lottie-box {
+.copy-body {
+  .lottie-box {
     border:1px solid #E8E8E8;
     border-radius:4px;
     height: 320px;
-}
+  }
   
-.lottie-icon{
-  margin: 100px 0;
+  .lottie-icon{
+    margin: 70px 0 !important;
+    .lottie-icon__title {
+      color: #999;
+    }
+  }
 }

src/bu-components/SelectPrepareFileModal.jsx

@@ -10,7 +10,7 @@ import React from 'react';
 import { Modal, Button, Radio, Checkbox, message, Tooltip } from 'antd';
 import _ from 'underscore';
 import * as lodash from 'lodash';
-import { LottieIcon } from 'xiaomai-b-components';
+import LottieIcon from '@/components/LottieIcon';
 
 import Service from '@/common/js/service';
 import { getEllipsText } from "@/domains/basic-domain/utils";
@@ -647,6 +647,8 @@ class SelectPrepareFileModal extends React.Component {
           <Otherwise>
             <LottieIcon
               title={<span className="desc">这个文件夹是空的</span>}
+              type="college"
+              size={150}
             />
           </Otherwise>
         </Choose>

src/bu-components/SelectPrepareFileModal.less

@@ -4,10 +4,10 @@
   }
   
   .lottie-icon {
-    margin: 12px 0 0 0;
+    margin: 0;
     border: 1px solid #E8E8E8;
     border-radius: 4px;
-    padding: 100px 0;
+    padding: 69px 0 59px 0;
     
     .desc {
       color: #999;

src/components/LottieIcon.less

+
+.lottie-icon{
+  text-align: center;
+  margin-top: 200px;
+  margin-bottom: 50px;
+  
+  &__title{
+    font-size:14px;
+    font-family:PingFangSC-Regular;
+    font-weight:400;
+    color:#999;
+    line-height:20px;
+    margin-top: 20px;
+  }
+}
\ No newline at end of file

src/components/LottieIcon.tsx

+/*
+ * @Author: wufan
+ * @Date: 2021-06-15 13:48:35
+ * @LastEditors: wufan
+ * @LastEditTime: 2021-06-15 14:24:57
+ * @Description: Description
+ */
+import React from 'react';
+import Lottie from 'react-lottie';
+
+import student from '@/common/lottie/student.json';
+import activity from '@/common/lottie/activity.json';
+import teacher from '@/common/lottie/teacher.json';
+import college from '@/common/lottie/college.json';
+
+import './LottieIcon.less';
+
+interface LottieIconInterface {
+  size: number,
+  type: string,
+  title: string,
+  isStopped: boolean,
+  isPaused: boolean,
+}
+
+const ANIMATION_DATA_MAP: {
+  [key: string]: any,
+} = {
+  student,
+  activity,
+  teacher,
+  college
+}
+
+function LottieIcon(props: LottieIconInterface) {
+  const {
+    title,
+    size = 90,
+    type = 'student',
+    isPaused = true,
+    isStopped = true,
+    
+  } = props;
+
+  const options = {
+    loop: true,
+    autoplay: true,
+    animationData: ANIMATION_DATA_MAP[type],
+    rendererSettings: {
+      preserveAspectRatio: 'xMidYMid slice'
+    }
+  }
+
+  return (
+    <div className="lottie-icon">
+      <Lottie
+        options={options}
+        width={size}
+        height={size}
+        isPaused={isPaused}
+        isStopped={isStopped}
+      />
+
+      <div className="lottie-icon__title">{title}</div>
+    </div>
+  )
+}
+
+export default LottieIcon;
\ No newline at end of file

src/components/WatchDataHeader.tsx

+/*
+ * @Author: wufan
+ * @Date: 2021-05-26 10:29:56
+ * @LastEditors: wufan
+ * @LastEditTime: 2021-06-17 14:15:00
+ * @Description: Description
+ */
 import React from "react";
-import { Tag } from 'antd'
 import "./WatchDataHeader.less";
 
 interface WatchDataHeaderProps {

src/modules/college-manage/modal/ChooseMembersModal.jsx

@@ -210,7 +210,6 @@ class ChooseMembersModal extends React.Component {
         title: '全选',             // 实际为头像，但在表格上这行要求显示为全选
         key: 'avatar',
         dataIndex: 'avatar',
-        width: '40%',
         render: (value, record) => {
           const { name } = record;
 
@@ -328,7 +327,7 @@ class ChooseMembersModal extends React.Component {
                     }}
                     size={'small'}
                     rowSelection={{
-                      columnWidth : 24,
+                      columnWidth : 63,
                       selectedRowKeys,
                       onChange : this.onChangeRow,
                       getCheckboxProps : this.getCheckboxProps,

src/modules/course-manage/modal/ManageCoursewareModal.jsx

@@ -4,15 +4,15 @@
  * @Last Modified by: chenshu
  * @Last Modified time: 2021-06-08 18:18:46
  */
-import React, { useEffect, useState } from 'react';
-import { Modal, Button, Table, Progress, message, Tooltip, Spin, Popconfirm } from 'antd';
+import React from 'react';
+import { Modal, Button, Table, message, Tooltip, Spin, Popconfirm } from 'antd';
 import { QuestionCircleOutlined,LoadingOutlined} from "@ant-design/icons";
 import _ from 'underscore';
 import moment from 'moment';
 import Lottie from "lottie-web";
 import User from '@/common/js/user';
-import { suffixType, DEFAULT_SIZE_UNIT, SupportFileType } from '@/common/constants/academic/liveEnum';
-import { FileVerifyMap, FileTypeIcon, DISK_MAP } from '@/common/constants/academic/lessonEnum';
+import { suffixType, DEFAULT_SIZE_UNIT } from '@/common/constants/academic/liveEnum';
+import { FileVerifyMap, FileTypeIcon } from '@/common/constants/academic/lessonEnum';
 import ScanFileModal from '@/modules/prepare-lesson/modal/ScanFileModal'
 import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
 import Service from '@/common/js/service';
@@ -229,14 +229,18 @@ class ManageCoursewareModal extends React.Component {
           const antIcon = <LoadingOutlined/>;
           const type = FileVerifyMap[fileType].type;
           return <div className="courseware-name" onClick={() => this.handleScanFile(item)}>
-            {(type === 'JPG' || type === 'PNG') && item.progress ?
+              <Choose>
+                <When condition={(type === 'JPG' || type === 'PNG') && item.progress}>
                   <Spin indicator={antIcon} />
-              :<img  
+                </When>
+                <Otherwise>
+                  <img  
                   src={FileTypeIcon[FileVerifyMap[fileType].type] || (item.docUrls[0] || {}).conversionFileUrl}
                   alt=""
                   className="item-img"
                 />
-            }
+                </Otherwise>
+              </Choose>
             <Tooltip title={item.fileName}><span className="name">{item.fileName}</span></Tooltip>
           </div>
         },
@@ -270,7 +274,7 @@ class ManageCoursewareModal extends React.Component {
         width: "16%",
         dataIndex: "control",
         render: (_value, item) => {
-          const { uploadObject, failObject, cancelObject } = this.state;
+          const { failObject } = this.state;
           const uploadFail = failObject[item.id];
 
           // 上课前45分钟/上课中/已结束的情况下都不可操作
@@ -295,7 +299,7 @@ class ManageCoursewareModal extends React.Component {
     const {
       list, scanFileModal, editData, cancelObject,
       showSelectFileModal, selectedFileList,
-      diskList, currentRootDisk, isLessonPermission
+      diskList
     } = this.state;
     const _list = _.reject(list, (item) => cancelObject[item.id]);
     return (

src/modules/plan-manage/components/ExpiredCourseList.jsx

 import React from 'react';
-import { Button } from 'antd';
 import { withRouter } from 'react-router-dom';
-import User from '@/common/js/user';
 import './ExpiredCourseList.less';
 
 function ExpiredCourseList(props) {

src/modules/prepare-lesson/modal/SelectPrepareFileModal.jsx

@@ -7,23 +7,20 @@
  */
 
 import React from 'react';
-import { Modal, Button, Radio, Checkbox, Spin, Upload, message, Tooltip } from 'antd';
-import InfiniteScroll from 'react-infinite-scroller';
-
+import { Modal, Button, Radio, Checkbox, message, Tooltip } from 'antd';
 import User from '@/common/js/user';
 import { getEllipsText } from "@/core/util";
-import DefaultIcon from '@/modules/common/DefaultIcon';
 import UploadProgressModal from './UploadProgressModal';
 import NonCompliantFileModal from './NonCompliantFileModal';
 import Service from '@/common/js/service';
 import _ from 'underscore';
 import {
-  DEFAULT_SIZE_UNIT, FileTypeIcon, NonCompliantFileMap,
-  DISK_LIST, SupportFileType, LocalFileType,FileVerifyMap
+  DEFAULT_SIZE_UNIT, FileTypeIcon,
+   SupportFileType, FileVerifyMap
 } from "@/common/constants/academic/lessonEnum";
 
 import { getFileTypeByName } from '../components/FolderManage';
-
+import LottieIcon from '@/components/LottieIcon';
 import './SelectPrepareFileModal.less';
 
 const defaultQuery = {
@@ -660,9 +657,10 @@ class SelectPrepareFileModal extends React.Component {
               }
             </div>
           </div> :
-          <DefaultIcon
-            type='student'
+            <LottieIcon
             title={<span className="desc">这个文件夹是空的</span>}
+            type="college"
+            size={150}
           />
         }
 

src/modules/resource-disk/components/FolderList.jsx

@@ -9,8 +9,7 @@
 import React from 'react';
 import { Table, Menu, Dropdown, Modal, message,Tooltip } from 'antd';
 import _ from 'underscore';
-// import * as lodash from 'lodash';
-import { PageControl, LottieIcon } from 'xiaomai-b-components';
+import { PageControl } from 'xiaomai-b-components';
 import { XMTable } from '@/components';
 import Service from '@/common/js/service';
 import { formatDate } from '@/domains/basic-domain/utils';

src/modules/resource-disk/components/OperateArea.jsx

@@ -13,7 +13,7 @@ import _ from 'underscore';
 import Service from '@/common/js/service';
 import { getEllipsText } from '@/domains/basic-domain/utils';
 
-import { DEFAULT_SIZE_UNIT, LOCAL_FILE_TYPE_MAP,FILR_VERIFY_MAP,SUPPORT_FILE_TYPE_MAP} from '@/domains/resource-disk/constants';
+import { DEFAULT_SIZE_UNIT,FILR_VERIFY_MAP,SUPPORT_FILE_TYPE_MAP} from '@/domains/resource-disk/constants';
 import { getFileTypeByName } from '@/domains/resource-disk/utils';
 
 import UploadProgressModal from '@/bu-components/UploadProgressModal';

src/modules/resource-disk/index.jsx

@@ -29,25 +29,6 @@ class PrepareLessonPage extends React.Component {
     }
   }
 
-  componentWillMount() {
-    // this.handleFetchDiskList();
-  }
-
-  handleFetchDiskList = async () => {
-    const res = await Service.Hades('public/apollo/getUserDisk', {});
-    const { result = [] } = res;
-    const diskList = result.map((item) => {
-      return {
-        ...item,
-        folderName: DISK_MAP[item.disk]
-      }
-    });
-    this.setState({
-      diskList,
-      currentRootDisk: diskList[0] || defaultRootDisk
-    });
-  }
-
   handleChangeDisk = (disk) => {
     this.setState({
       currentRootDisk: disk

src/modules/resource-disk/modal/CreateFolderModal.jsx

 import React from 'react';
-import { Modal, Input, Form, message } from 'antd';
-import ShowTips from '@/bu-components/ShowTip';
+import { Modal, Input, Form } from 'antd';
 import './CreateFolderModal.less';
 
 class CreateFolderModal extends React.Component {
@@ -107,5 +106,4 @@ class CreateFolderModal extends React.Component {
   }
 }
 
-// export default Form.create()(CreateFolderModal);
 export default CreateFolderModal;
\ No newline at end of file

src/modules/teach-tool/examination-manager/ExamShareModal.jsx

 import React from 'react';
-import { Modal, Button, message } from 'antd';
+import { Modal, message } from 'antd';
 import html2canvas from 'html2canvas';
 import User from "../../../common/js/user";
 import QRCode from '../../../libs/qrcode/qrcode';
@@ -27,7 +27,6 @@ class ExamShareModal extends React.Component {
 
     handleConvertShortUrl = () => {
         const longUrl = `${LIVE_SHARE}test_detail/${this.props.data.examId}?id=${User.getStoreId()}`
-        console.log(longUrl)
         // 发请求
         Service.Sales('public/businessShow/convertShortUrls', {
             urls: [longUrl]