Skip to content

X
xiaomai-cloud-class-web
Commit 77f02561 by wufan
Options

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

Refactor/wufan/20210615/refactor ui resource disk

See merge request !45
parents 3ceb4c87 0d46d6db
Showing with 172 additions and 74 deletions
src/bu-components/ChooseMembersModal.jsx
...@@ -10,6 +10,8 @@ import Service from '@/common/js/service'; ...@@ -10,6 +10,8 @@ import Service from '@/common/js/service';
// import _ from 'underscore'; // import _ from 'underscore';
import './ChooseMembersModal.less'; import './ChooseMembersModal.less';
import User from '@/common/js/user' import User from '@/common/js/user'
import { XMTable } from '@/components';
import college from '@/common/lottie/college';
const { Search } = Input; const { Search } = Input;
...@@ -203,7 +205,6 @@ class ChooseMembersModal extends React.Component { ...@@ -203,7 +205,6 @@ class ChooseMembersModal extends React.Component {
title: '全选', // 实际为头像，但在表格上这行要求显示为全选 title: '全选', // 实际为头像，但在表格上这行要求显示为全选
key: 'avatar', key: 'avatar',
dataIndex: 'avatar', dataIndex: 'avatar',
width: '30%',
render: (value, record) => { render: (value, record) => {
const { adminName } = record; const { adminName } = record;
return ( return (
...@@ -292,16 +293,19 @@ class ChooseMembersModal extends React.Component { ...@@ -292,16 +293,19 @@ class ChooseMembersModal extends React.Component {
enterButton={<span className="icon iconfont">&#xe832;</span>} enterButton={<span className="icon iconfont">&#xe832;</span>}
/> />
<div className='container-left-body-table'> <div className='container-left-body-table'>
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据'
}}
rowKey={(record) => record.userId} rowKey={(record) => record.userId}
dataSource={allUserList} dataSource={allUserList}
columns={this.selectedColumnsLeft()} columns={this.selectedColumnsLeft()}
pagination={false} pagination={false}
scroll={{ y: 290}} scroll={{ y: 290}}
// bordered={true}
size={'small'} size={'small'}
rowSelection={{ rowSelection={{
columnWidth : 24, columnWidth : 63,
selectedRowKeys, selectedRowKeys,
onChange : this.onChangeRow, onChange : this.onChangeRow,
getCheckboxProps : this.getCheckboxProps, getCheckboxProps : this.getCheckboxProps,
...@@ -325,7 +329,11 @@ class ChooseMembersModal extends React.Component { ...@@ -325,7 +329,11 @@ class ChooseMembersModal extends React.Component {
<span className={ (selectUserList.length > 0) ? 'span-right-l' : null }>清空</span> <span className={ (selectUserList.length > 0) ? 'span-right-l' : null }>清空</span>
</div> </div>
<div className='container-right-body'> <div className='container-right-body'>
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据'
}}
rowKey={(record) => record.userId} rowKey={(record) => record.userId}
dataSource={selectUserList} dataSource={selectUserList}
columns={this.selectedColumnsRight()} columns={this.selectedColumnsRight()}
......
src/bu-components/ChooseMembersModal.less
...@@ -45,6 +45,14 @@ ...@@ -45,6 +45,14 @@
.ant-empty-normal { .ant-empty-normal {
margin: 100px 0 !important; margin: 100px 0 !important;
} }
.ant-empty {
margin-top: 60px;
}
.ant-empty-description {
color: #999;
}
.avatar{ .avatar{
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -119,6 +127,13 @@ ...@@ -119,6 +127,13 @@
margin: 144px 0 !important; margin: 144px 0 !important;
} }
.ant-empty {
margin-top: 60px;
}
.ant-empty-description {
color: #999;
}
.avatar{ .avatar{
display: flex; display: flex;
align-items: center; align-items: center;
......
src/bu-components/CopyFileModal.jsx
...@@ -8,7 +8,7 @@ import React from 'react'; ...@@ -8,7 +8,7 @@ import React from 'react';
import { Modal, Button, Breadcrumb, Radio, message } from 'antd'; import { Modal, Button, Breadcrumb, Radio, message } from 'antd';
import Service from '@/common/js/service'; import Service from '@/common/js/service';
import { FILE_TYPE_ICON_MAP, DEFAULT_SIZE_UNIT } from "@/domains/resource-disk/constants"; 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 _ from 'underscore';
import { getEllipsText } from "@/domains/basic-domain/utils"; import { getEllipsText } from "@/domains/basic-domain/utils";
import * as lodash from 'lodash'; import * as lodash from 'lodash';
...@@ -334,6 +334,8 @@ class CopyFileModal extends React.Component { ...@@ -334,6 +334,8 @@ class CopyFileModal extends React.Component {
<div className="lottie-box"> <div className="lottie-box">
<LottieIcon <LottieIcon
title={<span className="desc">这个文件夹是空的</span>} title={<span className="desc">这个文件夹是空的</span>}
type="college"
size={150}
/> />
</div> </div>
} }
......
src/bu-components/CopyFileModal.less
...@@ -57,12 +57,17 @@ ...@@ -57,12 +57,17 @@
} }
} }
.lottie-box { .copy-body {
border:1px solid #E8E8E8; .lottie-box {
border-radius:4px; border:1px solid #E8E8E8;
height: 320px; border-radius:4px;
height: 320px;
}
.lottie-icon{
margin: 70px 0 !important;
.lottie-icon__title {
color: #999;
}
}
} }
.lottie-icon{
margin: 100px 0;
}
\ No newline at end of file
src/bu-components/SelectPrepareFileModal.jsx
...@@ -10,7 +10,7 @@ import React from 'react'; ...@@ -10,7 +10,7 @@ import React from 'react';
import { Modal, Button, Radio, Checkbox, message, Tooltip } from 'antd'; import { Modal, Button, Radio, Checkbox, message, Tooltip } from 'antd';
import _ from 'underscore'; import _ from 'underscore';
import * as lodash from 'lodash'; import * as lodash from 'lodash';
import { LottieIcon } from 'xiaomai-b-components'; import LottieIcon from '@/components/LottieIcon';
import Service from '@/common/js/service'; import Service from '@/common/js/service';
import { getEllipsText } from "@/domains/basic-domain/utils"; import { getEllipsText } from "@/domains/basic-domain/utils";
...@@ -647,6 +647,8 @@ class SelectPrepareFileModal extends React.Component { ...@@ -647,6 +647,8 @@ class SelectPrepareFileModal extends React.Component {
<Otherwise> <Otherwise>
<LottieIcon <LottieIcon
title={<span className="desc">这个文件夹是空的</span>} title={<span className="desc">这个文件夹是空的</span>}
type="college"
size={150}
/> />
</Otherwise> </Otherwise>
</Choose> </Choose>
......
src/bu-components/SelectPrepareFileModal.less
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
} }
.lottie-icon { .lottie-icon {
margin: 12px 0 0 0; margin: 0;
border: 1px solid #E8E8E8; border: 1px solid #E8E8E8;
border-radius: 4px; border-radius: 4px;
padding: 100px 0; padding: 69px 0 59px 0;
.desc { .desc {
color: #999; color: #999;
......
src/components/LottieIcon.less 0 → 100644
.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 0 → 100644
/*
* @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 React from "react";
import { Tag } from 'antd'
import "./WatchDataHeader.less"; import "./WatchDataHeader.less";
interface WatchDataHeaderProps { interface WatchDataHeaderProps {
......
src/modules/college-manage/modal/ChooseMembersModal.jsx
...@@ -210,7 +210,6 @@ class ChooseMembersModal extends React.Component { ...@@ -210,7 +210,6 @@ class ChooseMembersModal extends React.Component {
title: '全选', // 实际为头像，但在表格上这行要求显示为全选 title: '全选', // 实际为头像，但在表格上这行要求显示为全选
key: 'avatar', key: 'avatar',
dataIndex: 'avatar', dataIndex: 'avatar',
width: '40%',
render: (value, record) => { render: (value, record) => {
const { name } = record; const { name } = record;
...@@ -328,7 +327,7 @@ class ChooseMembersModal extends React.Component { ...@@ -328,7 +327,7 @@ class ChooseMembersModal extends React.Component {
}} }}
size={'small'} size={'small'}
rowSelection={{ rowSelection={{
columnWidth : 24, columnWidth : 63,
selectedRowKeys, selectedRowKeys,
onChange : this.onChangeRow, onChange : this.onChangeRow,
getCheckboxProps : this.getCheckboxProps, getCheckboxProps : this.getCheckboxProps,
......
src/modules/course-manage/modal/ManageCoursewareModal.jsx
...@@ -4,15 +4,15 @@ ...@@ -4,15 +4,15 @@
* @Last Modified by: chenshu * @Last Modified by: chenshu
* @Last Modified time: 2021-06-08 18:18:46 * @Last Modified time: 2021-06-08 18:18:46
*/ */
import React, { useEffect, useState } from 'react'; import React from 'react';
import { Modal, Button, Table, Progress, message, Tooltip, Spin, Popconfirm } from 'antd'; import { Modal, Button, Table, message, Tooltip, Spin, Popconfirm } from 'antd';
import { QuestionCircleOutlined,LoadingOutlined} from "@ant-design/icons"; import { QuestionCircleOutlined,LoadingOutlined} from "@ant-design/icons";
import _ from 'underscore'; import _ from 'underscore';
import moment from 'moment'; import moment from 'moment';
import Lottie from "lottie-web"; import Lottie from "lottie-web";
import User from '@/common/js/user'; import User from '@/common/js/user';
import { suffixType, DEFAULT_SIZE_UNIT, SupportFileType } from '@/common/constants/academic/liveEnum'; import { suffixType, DEFAULT_SIZE_UNIT } from '@/common/constants/academic/liveEnum';
import { FileVerifyMap, FileTypeIcon, DISK_MAP } from '@/common/constants/academic/lessonEnum'; import { FileVerifyMap, FileTypeIcon } from '@/common/constants/academic/lessonEnum';
import ScanFileModal from '@/modules/prepare-lesson/modal/ScanFileModal' import ScanFileModal from '@/modules/prepare-lesson/modal/ScanFileModal'
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'; import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Service from '@/common/js/service'; import Service from '@/common/js/service';
...@@ -229,14 +229,18 @@ class ManageCoursewareModal extends React.Component { ...@@ -229,14 +229,18 @@ class ManageCoursewareModal extends React.Component {
const antIcon = <LoadingOutlined/>; const antIcon = <LoadingOutlined/>;
const type = FileVerifyMap[fileType].type; const type = FileVerifyMap[fileType].type;
return <div className="courseware-name" onClick={() => this.handleScanFile(item)}> return <div className="courseware-name" onClick={() => this.handleScanFile(item)}>
{(type === 'JPG' || type === 'PNG') && item.progress ? <Choose>
<Spin indicator={antIcon} /> <When condition={(type === 'JPG' || type === 'PNG') && item.progress}>
:<img <Spin indicator={antIcon} />
src={FileTypeIcon[FileVerifyMap[fileType].type] || (item.docUrls[0] || {}).conversionFileUrl} </When>
alt="" <Otherwise>
className="item-img" <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> <Tooltip title={item.fileName}><span className="name">{item.fileName}</span></Tooltip>
</div> </div>
}, },
...@@ -270,7 +274,7 @@ class ManageCoursewareModal extends React.Component { ...@@ -270,7 +274,7 @@ class ManageCoursewareModal extends React.Component {
width: "16%", width: "16%",
dataIndex: "control", dataIndex: "control",
render: (_value, item) => { render: (_value, item) => {
const { uploadObject, failObject, cancelObject } = this.state; const { failObject } = this.state;
const uploadFail = failObject[item.id]; const uploadFail = failObject[item.id];
// 上课前45分钟/上课中/已结束的情况下都不可操作 // 上课前45分钟/上课中/已结束的情况下都不可操作
...@@ -295,7 +299,7 @@ class ManageCoursewareModal extends React.Component { ...@@ -295,7 +299,7 @@ class ManageCoursewareModal extends React.Component {
const { const {
list, scanFileModal, editData, cancelObject, list, scanFileModal, editData, cancelObject,
showSelectFileModal, selectedFileList, showSelectFileModal, selectedFileList,
diskList, currentRootDisk, isLessonPermission diskList
} = this.state; } = this.state;
const _list = _.reject(list, (item) => cancelObject[item.id]); const _list = _.reject(list, (item) => cancelObject[item.id]);
return ( return (
......
src/modules/plan-manage/components/ExpiredCourseList.jsx
import React from 'react'; import React from 'react';
import { Button } from 'antd';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import User from '@/common/js/user';
import './ExpiredCourseList.less'; import './ExpiredCourseList.less';
function ExpiredCourseList(props) { function ExpiredCourseList(props) {
......
src/modules/prepare-lesson/modal/SelectPrepareFileModal.jsx
...@@ -7,23 +7,20 @@ ...@@ -7,23 +7,20 @@
*/ */
import React from 'react'; import React from 'react';
import { Modal, Button, Radio, Checkbox, Spin, Upload, message, Tooltip } from 'antd'; import { Modal, Button, Radio, Checkbox, message, Tooltip } from 'antd';
import InfiniteScroll from 'react-infinite-scroller';
import User from '@/common/js/user'; import User from '@/common/js/user';
import { getEllipsText } from "@/core/util"; import { getEllipsText } from "@/core/util";
import DefaultIcon from '@/modules/common/DefaultIcon';
import UploadProgressModal from './UploadProgressModal'; import UploadProgressModal from './UploadProgressModal';
import NonCompliantFileModal from './NonCompliantFileModal'; import NonCompliantFileModal from './NonCompliantFileModal';
import Service from '@/common/js/service'; import Service from '@/common/js/service';
import _ from 'underscore'; import _ from 'underscore';
import { import {
DEFAULT_SIZE_UNIT, FileTypeIcon, NonCompliantFileMap, DEFAULT_SIZE_UNIT, FileTypeIcon,
DISK_LIST, SupportFileType, LocalFileType,FileVerifyMap SupportFileType, FileVerifyMap
} from "@/common/constants/academic/lessonEnum"; } from "@/common/constants/academic/lessonEnum";
import { getFileTypeByName } from '../components/FolderManage'; import { getFileTypeByName } from '../components/FolderManage';
import LottieIcon from '@/components/LottieIcon';
import './SelectPrepareFileModal.less'; import './SelectPrepareFileModal.less';
const defaultQuery = { const defaultQuery = {
...@@ -660,9 +657,10 @@ class SelectPrepareFileModal extends React.Component { ...@@ -660,9 +657,10 @@ class SelectPrepareFileModal extends React.Component {
} }
</div> </div>
</div> : </div> :
<DefaultIcon <LottieIcon
type='student'
title={<span className="desc">这个文件夹是空的</span>} title={<span className="desc">这个文件夹是空的</span>}
type="college"
size={150}
/> />
} }
......
src/modules/resource-disk/components/FolderList.jsx
...@@ -9,8 +9,7 @@ ...@@ -9,8 +9,7 @@
import React from 'react'; import React from 'react';
import { Table, Menu, Dropdown, Modal, message,Tooltip } from 'antd'; import { Table, Menu, Dropdown, Modal, message,Tooltip } from 'antd';
import _ from 'underscore'; import _ from 'underscore';
// import * as lodash from 'lodash'; import { PageControl } from 'xiaomai-b-components';
import { PageControl, LottieIcon } from 'xiaomai-b-components';
import { XMTable } from '@/components'; import { XMTable } from '@/components';
import Service from '@/common/js/service'; import Service from '@/common/js/service';
import { formatDate } from '@/domains/basic-domain/utils'; import { formatDate } from '@/domains/basic-domain/utils';
......
src/modules/resource-disk/components/OperateArea.jsx
...@@ -13,7 +13,7 @@ import _ from 'underscore'; ...@@ -13,7 +13,7 @@ import _ from 'underscore';
import Service from '@/common/js/service'; import Service from '@/common/js/service';
import { getEllipsText } from '@/domains/basic-domain/utils'; 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 { getFileTypeByName } from '@/domains/resource-disk/utils';
import UploadProgressModal from '@/bu-components/UploadProgressModal'; import UploadProgressModal from '@/bu-components/UploadProgressModal';
......
src/modules/resource-disk/index.jsx
...@@ -29,25 +29,6 @@ class PrepareLessonPage extends React.Component { ...@@ -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) => { handleChangeDisk = (disk) => {
this.setState({ this.setState({
currentRootDisk: disk currentRootDisk: disk
......
src/modules/resource-disk/modal/CreateFolderModal.jsx
import React from 'react'; import React from 'react';
import { Modal, Input, Form, message } from 'antd'; import { Modal, Input, Form } from 'antd';
import ShowTips from '@/bu-components/ShowTip';
import './CreateFolderModal.less'; import './CreateFolderModal.less';
class CreateFolderModal extends React.Component { class CreateFolderModal extends React.Component {
...@@ -107,5 +106,4 @@ class CreateFolderModal extends React.Component { ...@@ -107,5 +106,4 @@ class CreateFolderModal extends React.Component {
} }
} }
// export default Form.create()(CreateFolderModal);
export default CreateFolderModal; export default CreateFolderModal;
\ No newline at end of file
src/modules/teach-tool/examination-manager/ExamShareModal.jsx
import React from 'react'; import React from 'react';
import { Modal, Button, message } from 'antd'; import { Modal, message } from 'antd';
import html2canvas from 'html2canvas'; import html2canvas from 'html2canvas';
import User from "../../../common/js/user"; import User from "../../../common/js/user";
import QRCode from '../../../libs/qrcode/qrcode'; import QRCode from '../../../libs/qrcode/qrcode';
...@@ -27,7 +27,6 @@ class ExamShareModal extends React.Component { ...@@ -27,7 +27,6 @@ class ExamShareModal extends React.Component {
handleConvertShortUrl = () => { handleConvertShortUrl = () => {
const longUrl = `${LIVE_SHARE}test_detail/${this.props.data.examId}?id=${User.getStoreId()}` const longUrl = `${LIVE_SHARE}test_detail/${this.props.data.examId}?id=${User.getStoreId()}`
console.log(longUrl)
// 发请求 // 发请求
Service.Sales('public/businessShow/convertShortUrls', { Service.Sales('public/businessShow/convertShortUrls', {
urls: [longUrl] urls: [longUrl]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment