Skip to content

X
xiaomai-cloud-class-web
Commit 91e69252 by zhangleyuan
Options

feat:联调云盘文件系统相关接口

parent 2947cee2
Showing with 1336 additions and 78 deletions
src/bu-components/CopyFileModal.jsx
......@@ -307,24 +307,25 @@ class CopyFileModal extends React.Component {
let imgSrc = !isFolder ? // 文件/文件夹图标
FILE_TYPE_ICON_MAP[folderFormat] :
'https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1594871430788.png';
return (
<div
className={`information ${isFolder ? 'enable' : 'disable'}`}
key={item.id}
onClick={lodash.debounce(() => this.handleSelect(item), 500)}
>
<img src={imgSrc} alt="file-item__img" height="24"/>
<span className='folderName'>{getEllipsText(item.folderName, 20)}</span>
{
isFolder &&
<div className="file-item__expend-icon">
<span className="icon iconfont">&#xe71b;</span>
</div>
}
{ !isFolder && <div className="file-item__size">{_size}</div> }
</div>
)
if(isFolder){
return (
<div
className={`information ${isFolder ? 'enable' : 'disable'}`}
key={item.id}
onClick={lodash.debounce(() => this.handleSelect(item), 500)}
>
<img src={imgSrc} alt="file-item__img" height="24"/>
<span className='folderName'>{getEllipsText(item.folderName, 20)}</span>
{
isFolder &&
<div className="file-item__expend-icon">
<span className="icon iconfont">&#xe71b;</span>
</div>
}
{ !isFolder && <div className="file-item__size">{_size}</div> }
</div>
)
}
})
}
</div>
......
src/bu-components/SelectPrepareFileModal.jsx
......@@ -628,40 +628,42 @@ class SelectPrepareFileModal extends React.Component {
// 文件禁止点击的情况（移动、直播场景下文件为Excel、文件已经被关联了、文件不合法)
const disabled = (!isFolder && operateType === 'move') || (scene === 'liveCourse' && folder.folderFormat === 'EXCEL') || !!hasRelation || (!isFolder && !FILE_SUFFIX_LIST.includes(suffix));
return (
<div
className={`file-item ${!disabled ? 'enable' : 'disable'}`}
key={`file-item${index}`}
onClick={
lodash.debounce(() => this.handleSelect(folder), 500)
}
>
<div className="file-item__cover">
<img src={imgSrc} alt="file-item__img" width="24" />
<span>{getEllipsText(folderName, 20)}</span>
</div>
{/* 文件夹不显示大小 */}
{ !isFolder && <div className="file-item__size">{_size}</div> }
{/* 当选择文件的时候，显示复选框 */}
{
!isFolder && operateType === 'select' &&
<Checkbox
checked={!!hasSelect}
disabled={!!hasRelation}
/>
}
{/* 文件不显示展开的图标 */}
{
isFolder &&
<div className="file-item__expend-icon">
<span className="icon iconfont">&#xe71b;</span>
if(isFolder){
return (
<div
className={`file-item ${!disabled ? 'enable' : 'disable'}`}
key={`file-item${index}`}
onClick={
lodash.debounce(() => this.handleSelect(folder), 500)
}
>
<div className="file-item__cover">
<img src={imgSrc} alt="file-item__img" width="24" />
<span>{getEllipsText(folderName, 20)}</span>
</div>
}
</div>
)
{/* 文件夹不显示大小 */}
{ !isFolder && <div className="file-item__size">{_size}</div> }
{/* 当选择文件的时候，显示复选框 */}
{
!isFolder && operateType === 'select' &&
<Checkbox
checked={!!hasSelect}
disabled={!!hasRelation}
/>
}
{/* 文件不显示展开的图标 */}
{
isFolder &&
<div className="file-item__expend-icon">
<span className="icon iconfont">&#xe71b;</span>
</div>
}
</div>
)
}
})
}
</div>
......
src/common/constants/academic/liveEnum.js
/*
* @Author: 吴文洁
* @Date: 2020-07-23 17:11:49
* @LastEditors: 吴文洁
* @LastEditTime: 2020-07-23 17:14:32
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-18 17:54:36
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -39,9 +39,9 @@ const suffixType = {
mp3: 'audio/mp3',
mp4: 'audio/mp4',
}
export default {
DEFAULT_SIZE_UNIT,
SupportFileType,
suffixType,
};
export {DEFAULT_SIZE_UNIT,SupportFileType,suffixType}
// export default {
// DEFAULT_SIZE_UNIT,
// SupportFileType,
// suffixType,
// };
src/core/util.js 0 → 100644
/*
* @Author: zhujian
* @Date: 2017-08-31 11:05:12
* @Last Modified by: 吴文洁
* @Last Modified time: 2020-07-16 11:33:21
*公共方法
*/
window.utils = {
isValidURL(url) {
if (!url) {
return false;
}
if (url.indexOf('http') !== -1) {
return true;
}
return false;
},
// 只截取两位数，多余的去掉，不足的补0
_fillTwo(str) {
const temArr = str.split("");
const newArr = [];
for (let i = 0; i < 2; i++) {
if (temArr[i]) {
newArr.push(temArr[i]);
} else {
newArr.push(0);
}
}
return newArr.join("");
},
limitFloatTwo(val, digit = 99) {
if (val === "") {
return "";
} else {
const regExp = new RegExp("(\\d+)\\.(\\d+)?$");
const result = regExp.exec(val);
let inter = ""; // 整数部分
let decimal = ""; // 小数部分
if (result) {
inter = result[1];
decimal = this._fillTwo(result[2] || '');
return `${inter.substr(0, digit)}.${decimal}`;
}
return val
}
},
filterNumber(value) {
let _value;
if (value != '' && value.substr(0, 1) === '.') {
return "";
}
_value = value.replace(/^0*(0\.|[1-9])/, '$1'); //解决 粘贴不生效
_value = _value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
_value = _value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
return _value;
},
// 限制7位整数和两位小数
limitNum(value) {
let _value = this.filterNumber(value);
_value = _value.replace(/(\d+)(\.\d*)?/, function ($1, $2, $3) {
if ($3) {
return $2.substr(0, 7) + $3.substr(0, 3);
}
return $2.substr(0, 7);
});
return _value;
},
/**
* 限制位数可配置, 比如限制n位整数和m位小数
* @param {*} 需要限制的数值
* @param {*} 需要限制的整数位数
* @param {*} 需要限制的小数位数
*/
setLimitNum(value, digit, decimal) {
let _value = this.filterNumber(value);
_value = _value.replace(/(\d+)(\.\d*)?/, function ($1, $2, $3) {
if ($3) {
return `${$2.substr(0, digit)}${$3.substr(0, decimal + 1)}`;
}
return $2.substr(0, digit);
});
return _value;
},
getNumRange(value, min, max) {
let _value = this.setLimitNum(value, 8, 2);
if (_value < min) {
return min;
} else if (_value > max) {
return max;
}
return getNumberFormat(_value);
},
// 数组去重
unique(arr, u_key) {
let map = new Map();
arr.forEach((item) => {
if (!map.has(item[u_key])) {
map.set(item[u_key], item)
}
});
return [...map.values()];
},
formatString(str, n) {
const string = str || '';
const numberList = string.replace(/./g, (item) => {
if (item.match(/[^\x00 -\xff]/)) {
return '2';
} else {
return '1';
}
});
let number = 0;
for (let i = 0; i < string.length; i++) {
number += parseInt(numberList[i], 10);
if (number >= n * 2) {
return string.substring(0, i + 1).trim() + '…'
}
}
return str;
},
removeSpecialCharacter(str) {
return (str || '').replace(/[^\u4e00-\u9fa5a-zA-Z0-9_\-—~\(\)\[\]\{\}+（）【】「」《》，。,\.\*%#@\&:：""''“”‘’\/ ]/g, '');
}
};
const isUndefined = (value) => {
return value === void 0 || value === null;
}
const randomString = (len = 32) => {
const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
const maxPos = chars.length;
let pwd = '';
for (let i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
// 限制字数
const getEllipsText = (text, limitNum) => {
const limitText = text.replace(/\n/g, ' ');
if (limitText.length > limitNum) {
return `${limitText.substr(0, limitNum)}...`;
}
return limitText;
}
const shareTemplate = (str, place) => {
return str.replace(/\{\$(.*?)\}/g, (full, key) => {
return place[key] || full
})
}
const transformPhoneNumer = (phoneNum, hasPermission) => {
if (!phoneNum) return phoneNum;
if (hasPermission) return phoneNum;
const newPhoneArr = String(phoneNum).split('');
newPhoneArr.splice(3, 4, '****');
return newPhoneArr.join('');
}
export {
randomString,
isUndefined,
getEllipsText,
shareTemplate,
transformPhoneNumer
}
\ No newline at end of file
src/modules/common/DefaultIcon.jsx 0 → 100644
/*
* @Author: zhujian
* @Date: 2018-10-10 20:49:11
* @Last Modified by: zhujiapeng
* @Last Modified time: 2020-11-16 17:02:11
*/
// import './s.less'
import React from 'react';
import Lottie from 'react-lottie';
import * as activity from '../lottie/activity/data.json';
import content from '../lottie/content/data.json';
import * as course from '../lottie/course/data.json';
import * as data from '../lottie/data/data.json';
import * as money from '../lottie/money/data.json';
import * as news from '../lottie/news/data.json';
import * as studentData from '../lottie/student/data.json';
import './DefaultIcon.less';
class DefaultIcon extends BaseComponent {
constructor(props) {
super(props);
this.state = {
data: {
student: studentData,
activity,
data,
money,
news,
content,
course
}
}
}
render() {
const defaultOptions = {
loop: true,
autoplay: true,
animationData: this.state.data[this.props.type],
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice'
}
}
return (
<div style={this.props.style} className="DefaultIcon" key="icon">
<Lottie
options={defaultOptions}
height={this.props.size||90}
width={this.props.size ||90}
isStopped={this.props.isStopped}
isPaused={this.props.isPaused}
/>
<div>{this.props.title }</div>
</div>
);
}
}
export default DefaultIcon;
\ No newline at end of file
src/modules/common/DefaultIcon.less 0 → 100644
.DefaultIcon{
text-align: center;
margin-top: 200px;
margin-bottom: 50px;
p{
font-size:14px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(51,51,51,1);
line-height:20px;
margin-top: 20px;
}
}
\ No newline at end of file
src/modules/course-manage/components/LiveCourseList.jsx
......@@ -70,18 +70,6 @@ class LiveCourseList extends React.Component {
componentDidMount() {
}
// 获取直播间类型
handleCheckLiveVersion = () => {
}
// 获取当前登录帐号的teacherId
getTeacherId = () => {
}
getDownloadVersion() {
}
// 显示分享弹窗
handleShowShareModal = (item, needStr = false) => {
const _appId = appId;
......@@ -209,7 +197,13 @@ class LiveCourseList extends React.Component {
dataIndex: "courseware",
render: (val, item) => {
return (
<span className="courseware">{item.courseDocumentCount}</span>
<span className="courseware"
onClick={() => {
this.setState({
editData: item,
openCoursewareModal: true,
});
}}>{item.courseDocumentCount}</span>
);
},
},
......@@ -401,6 +395,8 @@ class LiveCourseList extends React.Component {
const { current, size } = query;
const { openDownloadModal,
downloadUrl, url, columns,
openCoursewareModal,
editData
} = this.state;
const { match } = this.props;
......@@ -428,6 +424,16 @@ class LiveCourseList extends React.Component {
/>
</div>
{ this.state.shareLiveModal }
{/* {openCoursewareModal && (
<ManageCoursewareModal
data={editData}
type={type}
onCancel={() => {
this.props.onChange();
this.setState({ openCoursewareModal: false });
}}
/>
)} */}
{openDownloadModal && (
<DownloadLiveModal
url={downloadUrl}
......
src/modules/course-manage/modal/ManageCoursewareModal.jsx
......@@ -9,12 +9,12 @@ import { Modal, Button, Table, Progress, message, Tooltip, Spin, Popconfirm } fr
import { QuestionCircleOutlined,LoadingOutlined} from "@ant-design/icons";
import _ from 'underscore';
import moment from 'moment';
import User from '@/core/user';
// import User from '@/core/user';
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 ScanFileModal from '@/modules/cloudClass/prepare-lesson/modal/ScanFileModal'
import SelectPrepareFileModal from '@/modules/cloudClass/prepare-lesson/modal/SelectPrepareFileModal';
import ScanFileModal from '@/modules/prepare-lesson/modal/ScanFileModal'
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import './ManageCoursewareModal.less';
......
src/modules/course-manage/modal/SelectPrepareFileModal.jsx
......@@ -10,7 +10,7 @@ import React from 'react';
import { Modal, Button, Radio, Checkbox, Spin, Upload, message, Tooltip } from 'antd';
import InfiniteScroll from 'react-infinite-scroller';
import User from '@/core/user';
import User from '@/common/js/user';
import { getEllipsText } from "@/core/util";
import DefaultIcon from '@/modules/common/DefaultIcon';
import UploadProgressModal from './UploadProgressModal';
......
src/modules/lottie/activity/demo.html 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/modules/lottie/content/demo.html 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/modules/lottie/course/demo.html 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/modules/lottie/data/demo.html 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/modules/lottie/money/demo.html 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/modules/lottie/news/demo.html 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/modules/lottie/teacher/demo.html 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/modules/prepare-lesson/components/DiskList.jsx 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-06-09 09:47:21
* @Last Modified by: 吴文洁
* @Last Modified time: 2020-06-23 14:54:14
* @Description: 网络磁盘（我的文件、公共文件、员工文件）
*/
import React from 'react';
import { DISK_MAP } from "@/common/constants/academic/lessonEnum";
function DiskList(props) {
const { diskList, currentRootDisk } = props;
return (
<div className="disk-list__wrap">
<div className="disk-list">
{
diskList.map((item) => {
const isActive = item.disk === currentRootDisk.disk;
return (
<div
key={item.disk}
className={`item ${isActive ? 'active' : ''}`}
onClick={() => { props.onChange(item)}}
>
{
item.disk === 'MYSELF' &&
<span className="icon iconfont">&#xe7a5;</span>
}
{
item.disk === 'COMMON' &&
<span className="icon iconfont">&#xe79d;</span>
}
{
item.disk === 'EMPLOYEE' &&
<span className="icon iconfont">&#xe7a3;</span>
}
<span className="disk-name">{ item.folderName }</span>
</div>
)
})
}
</div>
<a
className="guide-href"
href={window.NewVersion ? 'https://mp.weixin.qq.com/s/s0XN0Gk4Xul192SmTd6znw' : 'https://mp.weixin.qq.com/s/2EMWaaa3LQwkJd59bmy8pA'}
target="_blank"
>
进一步了解资料云盘
</a>
</div>
)
};
export default DiskList;
\ No newline at end of file
src/modules/prepare-lesson/index.jsx 0 → 100644
import React from 'react';
import { withRouter } from 'react-router-dom';
import { Modal, Button } from 'antd';
import User from '@/common/js/user';
import FolderManage from './components/FolderManage';
import DiskList from './components/DiskList';
import { DISK_MAP } from "@/common/constants/academic/lessonEnum";
import './index.less';
const { teacherId, gmtCreate } = window.currentUserInstInfo;
// 判断是否是5.0或4.0T端
const isTeacher = !!teacherId;
// 判断是新用户还是老用户（gmtCreate小于上线日期的话就是老用户）
const onlineDate = +new Date('2020-07-17 00:00:00');
const isOldUser = gmtCreate <= onlineDate;
const defaultRootDisk = {
folderName: '我的文件',
disk: 'MYSELF',
uploadPower: false
}
class PrepareLessonPage extends React.Component {
constructor(props) {
super(props);
const prepareLessonTips = localStorage.getItem('prepare_lesson_tips');
this.state = {
prepareLessonTips,
diskList: [], // 可见磁盘目录
currentRootDisk: defaultRootDisk
}
}
componentWillMount() {
this.handleFetchDiskList();
}
handleFetchDiskList = async () => {
const res = await axios.Apollo('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
});
}
render() {
const { currentRootDisk, prepareLessonTips, diskList } = this.state;
return (
<div className="prepare-lesson-page page">
<div className="content-header">资料云盘</div>
<div className="box content-body">
<DiskList
diskList={diskList}
currentRootDisk={currentRootDisk}
onChange={this.handleChangeDisk}
/>
<FolderManage
currentRootDisk={currentRootDisk}
/>
</div>
{/* 老用户显示弹窗提示 */}
<Modal
title="备课本改版"
visible={!prepareLessonTips && isOldUser}
footer={null}
width={680}
maskClosable={false}
className="prepare-lesson-upgrade-modal"
onCancel={() => {
this.setState({
prepareLessonTips: true
})
}}
>
<div className="title">“备课本” 升级为 “资料云盘” 了！</div>
<div className="upgrade-list">
<div className="upgrade-list__item">
<img src="https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1594780611301.png" alt=""/>
<div className="item-title">存储更便捷</div>
<div className="item-sub-title">讲次关联模式升级文件夹模式，存储不再受讲次限制</div>
</div>
<div className="upgrade-list__item">
<img src="https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1594780629259.png" alt=""/>
<div className="item-title">结构更清晰</div>
<div className="item-sub-title">新增“我的文件”“公共文件”“员工文件”，满足机构存储需求</div>
</div>
<div className="upgrade-list__item">
<img src="https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1594780641665.png" alt=""/>
<div className="item-title">同步更方便</div>
<div className="item-sub-title">支持主管直接查看员工文件，优质资料一目了然</div>
</div>
</div>
<div
className="footer"
onClick={() => {
this.setState({ prepareLessonTips: true });
localStorage.setItem('prepare_lesson_tips', true);
}}
>我知道了</div>
</Modal>
</div>
)
}
}
export default PrepareLessonPage;
\ No newline at end of file
src/modules/prepare-lesson/index.less 0 → 100644
.prepare-lesson-page {
.ant-upload-list {
display: none;
}
.ant-spin-nested-loading {
width: 100%;
}
table tr, table tr th {
background-color: #FFF !important;
}
table tr th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
background-color: #FFF !important;
}
.content-body {
display: flex;
.micro-app-btn {
display: none;
}
}
.disk-list__wrap {
min-width: 200px;
border-right: 1px solid #EEE;
position: relative;
.item {
display: flex;
align-items: center;
height: 50px;
line-height: 50px;
margin-bottom: 8px;
padding-left: 32px;
text-align: center;
position: relative;
cursor: pointer;
&.hidden {
display: none;
}
&:hover {
background: rgba(255,133,52,0.06);
}
&.active {
background: rgba(255,133,52,0.06);
.iconfont, .disk-name {
font-weight: 500;
}
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
background-color: #FF8534;
}
}
.iconfont, .disk-name {
color: #333;
}
.iconfont {
font-size: 20px;
margin-right: 8px;
}
.disk-name {
font-size: 16px;
}
}
.guide-href {
position: absolute;
left: 33px;
bottom: 24px;
color: #FF7519;
}
}
.folder-manage {
padding: 0 16px;
width: 100%;
.ant-upload-list {
display: none;
}
.tips {
border-radius: 4px;
margin-bottom: 16px;
height: 32px;
line-height: 32px;
padding: 0 16px;
background-color: #FFF0E7;
display: flex;
align-items: center;
justify-content: space-between;
.iconfont {
cursor: pointer;
font-size: 12px;
opacity: 0.45;
}
}
.operate-area {
position: relative;
&__opt {
width: fit-content;
&.visible {
display: block;
}
&.hidden {
display: none;
}
.ant-btn {
margin-right: 8px;
.iconfont {
margin-right: 4px;
}
}
}
&__search {
position: absolute;
top: 0;
right: 0;
}
&__bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin: 16px 0;
.file-path {
display: inline-block;
color: #333;
position: relative;
margin-right: 12px;
&:last-child {
color: #999;
}
&:not(:last-child) {
cursor: pointer;
&:hover {
color: #FF8534;
}
&::before {
content: '/';
position: absolute;
color: #CCC;
right: -8px;
}
}
}
.load-count__inner {
color: #999;
}
}
}
.file-list {
height: ~'calc(100vh - 240px)';
overflow: scroll;
.file-name {
display: flex;
align-items: center;
cursor: pointer;
&__icon {
width: 24px;
margin-right: 4px;
color: #FBD140;
}
&__text:hover {
color: #FF7519;
}
}
.file-path {
cursor: pointer;
text-decoration: underline;
&:hover {
color: #FF7519;
}
}
.ant-dropdown-trigger {
cursor: pointer;
}
.DefaultIcon .desc {
color: #999;
.upload-btn {
color: #FF7519;
margin: 0 4px;
cursor: pointer;
}
}
}
}
}
.prepare-lesson-upgrade-modal {
.ant-modal-header, .ant-modal-close-x {
display: none;
}
.title {
color: #333;
font-size: 24px;
font-weight: 500;
text-align: center;
margin-top: 16px;
}
.upgrade-list {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 40px;
padding: 0 26px;
&__item {
text-align: center;
max-width: 170px;
img {
width: 157px;
}
.item-title {
color: #333;
margin-top: 5px;
}
.item-sub-title {
color: #999;
font-size: 12px;
margin-top: 8px;
}
}
}
.footer {
width: 136px;
height: 40px;
line-height: 40px;
border-radius: 20px;
margin: auto;
margin-top: 46px;
margin-bottom: 8px;
text-align: center;
font-size: 16px;
color: #FFF;
background-color: #FC9C6B;
cursor: pointer;
}
}
.create-folder-modal .ant-modal-body {
min-height: 101px !important;
}
src/modules/prepare-lesson/modal/CreateFolderModal.jsx 0 → 100644
import React from 'react';
import { Modal, Input, Form, message } from 'antd';
class CreateFolderModal extends React.Component {
constructor(props) {
super(props);
this.state = {
validate: true,
warnText: null,
folderName: props.folderName
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.isOpen) {
this.setState({
folderName: nextProps.folderName
});
}
}
componentDidUpdate(prevProps) {
// 输入框自动聚焦
this.refs.folderNameInput && this.refs.folderNameInput.focus();
}
handleChangeFolderName = (event) => {
const { value } = event.target;
// 是否超出了限制
const hasExceededLimit = value.length > 50;
this.setState({
folderName: value,
validate: !hasExceededLimit,
warnText: hasExceededLimit && '名称不能超过50个字'
});
}
handleOk = () => {
this.props.form.validateFields((err) => {
const { folderName, validate } = this.state;
if (!folderName) {
this.setState({
validate: false,
warnText: '名称不能为空'
});
return;
};
if (!validate) return;
this.props.onOk(folderName).then((res) => {
// 防止新建和重命名的时候重复提示
if (!this.props.title) {
message.success('创建文件夹成功');
}
});
});
}
handleCancel = () => {
this.setState({
validate: true
});
this.props.onClose();
}
render() {
const { folderName, warnText, validate } = this.state;
const { isOpen, form, title = '新建文件夹' } = this.props;
const { getFieldDecorator } = form;
return (
<Modal
title={title}
visible={isOpen}
onCancel={this.handleCancel}
onOk={this.handleOk}
width={448}
className="create-folder-modal"
>
<Form>
<Form.Item
required
help={ !validate && warnText}
validateStatus={!validate ? 'error' : null}
>
<Input
value={folderName}
placeholder="请输入文件夹名称"
style={{width: '348px'}}
onChange={this.handleChangeFolderName}
ref="folderNameInput"
/>
</Form.Item>
</Form>
</Modal>
)
}
}
export default Form.create()(CreateFolderModal);
\ No newline at end of file
src/modules/prepare-lesson/modal/NonCompliantFileModal.jsx 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-06-16 11:41:43
* @Last Modified by: 吴文洁
* @Last Modified time: 2020-07-06 17:33:47
* @Description: 文件超出大小的限制
*/
import React from 'react';
import { Modal } from 'antd';
import { DEFAULT_SIZE_UNIT } from "@/common/constants/academic/lessonEnum";
import './NonCompliantFileModal.less';
class NonCompliantFileModal extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
const { isOpen, fileList } = this.props;
return (
<Modal
title="文件超出可上传的大小限制"
visible={isOpen}
okText="继续上传"
cancelText="放弃上传"
onCancel={this.props.onClose}
onOk={this.props.onOk}
className="prepare-lesson__non-compliant-file-modal"
>
<div className="file-list">
<div className="file-list__title">以下文件已超出上传限制，无法上传。</div>
<div className="file-list__content">
{
fileList.map((file, index) => {
let _size = `${(file.size / DEFAULT_SIZE_UNIT).toFixed(1)}M`;
if (file.size < 0.1 * DEFAULT_SIZE_UNIT) {
_size = `${(file.size / 1000).toFixed(1)}kb`;
}
return (
<div className="file-list__item" key={`file-list__item${index}`}>
<span className="file-name">{file.name}</span>
<span className="file-size">（{_size}）</span>
</div>
)
})
}
</div>
</div>
<div className="tips">
<span className="icon iconfont">&#xe6f2;</span>
<span className="tips__text">
支持上传 Word(100M以内)、Excel(10M以内)、PPT(100M以内)、PDF(100M以内)、图片(50M以内)、音频(50M以内)、视频(500M以内)。
</span>
</div>
</Modal>
)
}
}
export default NonCompliantFileModal;
src/modules/prepare-lesson/modal/NonCompliantFileModal.less 0 → 100644
.prepare-lesson__non-compliant-file-modal {
.tips {
margin-top: 16px;
display: flex;
.iconfont {
margin-right: 4px;
font-size: 13px;
color: #FFB74C;
}
&__text {
color: #999;
}
}
.file-list {
&__title {
color: #666;
}
&__content {
max-height: 120px;
margin-top: 12px;
padding: 17px;
border: 1px solid #E8E8E8;
border-radius: 4px;
overflow: scroll;
.file-list__item span {
color: #333;
}
}
}
}
\ No newline at end of file
src/modules/prepare-lesson/modal/ScanFileModal.jsx 0 → 100644
import React from 'react';
import { Modal } from "antd";
import { XMVideoNew } from "@/components";
import "./ScanFileModal.less";
import { FileTypeIcon } from "@/common/constants/academic/lessonEnum";
import { Player, BigPlayButton } from "video-react";
class ScanFileModal extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
handleCancel = () => {
this.props.close();
};
render() {
const { fileType, item, modalTitle = "查看文件" } = this.props;
return (
<Modal
visible={true}
onCancel={this.handleCancel}
title={modalTitle}
footer={null}
width={680}
className="scan-file-modal"
>
<div className="scan-file-modal" style={{ width: 632 }}>
{(fileType === "JPG" || fileType === 'PNG') && (
<img
src={item.ossAddress || item.ossUrl}
style={{ width: 632, objectFit: "cover" }}
></img>
)}
{fileType === "MP4" && (
<div>
<Player
src={item.ossAddress || item.ossUrl}
fluid={false}
height={306}
width={"100%"}
>
<BigPlayButton position="center" />
</Player>
<video
style={{ display: "none" }}
ref="video"
src={item.ossAddress || item.ossUrl}
constrols="constrols"
id="video"
></video>
</div>
)}
{fileType === "MP3" && (
<div className="scan-file-modal__mp3">
<Player
src={item.ossAddress || item.ossUrl}
fluid={false}
height={306}
width={"100%"}
autoPlay={true}
>
<BigPlayButton position="center" />
</Player>
</div>
)}
</div>
</Modal>
);
}
}
export default ScanFileModal;
src/modules/prepare-lesson/modal/ScanFileModal.less 0 → 100644
.scan-file-modal {
z-index: 10;
&__mp3 {
.video-react-video {
background: #F1F3F6 url("https://image.xiaomaiketang.com/xm/3y8cRkJA5K.png") no-repeat center;
background-size: 60px 60px;
}
.mp3-img {
width: 60px;
height: 60px;
}
}
}
src/modules/prepare-lesson/modal/SelectPrepareFileModal.less 0 → 100644
.select-prepare-file-modal {
.ant-upload-list {
display: none;
}
.DefaultIcon {
margin: 12px 0 0 0;
border: 1px solid #E8E8E8;
border-radius: 4px;
padding: 100px 0;
.desc {
color: #999;
.upload-btn {
color: #FF7519;
margin: 0 4px;
cursor: pointer;
}
}
}
.radio-buttons {
text-align: center;
margin-bottom: 16px;
}
.file-path {
display: inline-block;
color: #333;
position: relative;
margin-bottom: 12px;
margin-right: 12px;
&:last-child {
color: #999;
}
&:not(:last-child) {
cursor: pointer;
&:hover {
color: #FF8534;
}
&::before {
content: '/';
position: absolute;
color: #CCC;
right: -8px;
}
}
}
.file-list {
border: 1px solid #E8E8E8;
border-radius: 4px;
.file-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
padding: 12px 25px;
&:not(:last-child) {
border-bottom: 1px solid #E8E8E8;
}
&.enable {
cursor: pointer;
}
&.disable {
cursor: not-allowed;
opacity: 0.5;
}
&__cover {
min-width: 320px;
img {
margin-right: 8px;
}
}
&__size {
margin-left: 40px;
}
.iconfont {
color: #BFBFBF;
&.correct {
color: #FC9C6B;
}
}
}
}
.ant-modal-footer {
display: flex;
align-items: center;
justify-content: space-between;
.prepare-lesson-upload.hidden {
visibility: hidden;
}
.prepare-lesson-upload.visible {
visibility: visible;
}
.footer__left {
color: #FF7519;
cursor: pointer;
}
}
}
\ No newline at end of file
src/modules/prepare-lesson/modal/UploadProgressModal.less 0 → 100644
.prepare-lesson-upload-progress-modal {
width: 448px;
position: fixed;
bottom: 5%;
right: 0;
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);
right: 48px;
background-color: #FFF;
z-index: 10;
border-radius: 2px 2px 0 0;
&:visible {
display: block;
}
&.hidden {
display: none;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
line-height: 50px;
background-color: #9A9DA7;
border-radius: 2px;
padding: 0 24px;
color: #FFF;
&.no-radius {
border-radius: 2px 2px 0 0;
}
.over-all-progress span {
font-size: 16px;
}
.iconfont {
cursor: pointer;
font-size: 12px;
margin-left: 24px;
}
}
.modal-body {
max-height: 290px;
overflow: scroll;
.file-item {
display: flex;
align-items: center;
height: 50px;
line-height: 50px;
padding: 0 24px;
position: relative;
&:not(:last-child) {
margin-bottom: 4px;
}
&__cover {
display: flex;
align-items: center;
img {
width: 24px;
height: 24px;
margin-right: 8px;
}
.file-name {
min-width: 154px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
}
&__size {
margin: 0 24px;
min-width: 54px !important;
color:#999999;
}
&__status {
.iconfont {
color: #BFBFBF;
font-size: 12px;
&.succ {
color: #5DD333;
}
&.close, &.reupload {
position: absolute;
right: 24px;
cursor: pointer;
}
&.fail {
color: #EC4B35;
}
}
}
&__progress {
height: 100%;
position: absolute;
height: 50px;
margin-left: -24px;
background-color: rgba(32,161,255,0.06);
}
}
}
}
\ No newline at end of file
src/modules/resource-disk/components/FolderList.jsx
......@@ -7,7 +7,7 @@
*/
import React from 'react';
import { Table, Menu, Dropdown, Modal, message, Icon, Tooltip } from 'antd';
import { Table, Menu, Dropdown, Modal, message,Tooltip } from 'antd';
import _ from 'underscore';
// import * as lodash from 'lodash';
import { PageControl, LottieIcon } from 'xiaomai-b-components';
......
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