Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
X
xiaomai-cloud-class-web
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
xiaomai-cloud-class
xiaomai-cloud-class-web
Commits
afb1f37d
Commit
afb1f37d
authored
Dec 20, 2020
by
zhangleyuan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat:上传图片相关修改
parent
75eb6c76
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
46 additions
and
873 deletions
+46
-873
src/bu-components/UploadProgressModal.jsx
+2
-0
src/modules/course-manage/components/AddLiveIntro.jsx
+5
-3
src/modules/course-manage/modal/ManageCoursewareModal.jsx
+1
-0
src/modules/course-manage/modal/SelectPrepareFileModal.jsx
+0
-731
src/modules/course-manage/modal/SelectPrepareFileModal.less
+0
-111
src/modules/prepare-lesson/modal/SelectPrepareFileModal.jsx
+33
-23
src/modules/prepare-lesson/modal/UploadProgressModal.jsx
+3
-3
src/modules/resource-disk/components/FolderManage.jsx
+2
-2
No files found.
src/bu-components/UploadProgressModal.jsx
View file @
afb1f37d
...
...
@@ -111,10 +111,12 @@ class UploadProgressModal extends React.Component {
},
mime
:
type
}).
then
(
url
=>
{
console
.
log
(
'1111'
);
file
.
status
=
'success'
;
this
.
setState
({
fileList
});
this
.
props
.
onUpload
(
fileContent
,
resourceId
);
}).
catch
(
err
=>
{
file
.
status
=
'fail'
;
this
.
setState
({
fileList
});
});
...
...
src/modules/course-manage/components/AddLiveIntro.jsx
View file @
afb1f37d
...
...
@@ -13,7 +13,7 @@ import EditorBox from '../components/EditorBox';
import
User
from
'@/common/js/user'
;
import
UploadOss
from
'@/core/upload'
;
import
'./AddLiveIntro.less'
;
// import SelectPrepareFileModal from '..
/modal/SelectPrepareFileModal';
import
SelectPrepareFileModal
from
'@/modules/prepare-lesson
/modal/SelectPrepareFileModal'
;
import
{
DISK_MAP
}
from
'@/common/constants/academic/lessonEnum'
;
import
{
ImgCutModalNew
}
from
'@/components'
;
...
...
@@ -53,6 +53,7 @@ class AddLiveIntro extends React.Component {
mediaName
:
folderName
,
size
:
folderSize
}
console
.
log
(
'liveCourseWarmMedia'
,
liveCourseWarmMedia
);
this
.
props
.
onChange
(
'liveCourseWarmMedia'
,
liveCourseWarmMedia
);
}
// 获取机构可见的磁盘
...
...
@@ -367,7 +368,8 @@ class AddLiveIntro extends React.Component {
</
div
>
</
div
>
{
/* 选择暖场图文件弹窗 */
}
{
/* <SelectPrepareFileModal
<
SelectPrepareFileModal
multiple=
{
true
}
operateType=
"select"
accept=
"video/mp4,image/jpeg,image/png,image/jpg"
selectTypeList=
{
[
'MP4'
,
'JPG'
,
'JPEG'
,
'PNG'
]
}
...
...
@@ -378,7 +380,7 @@ class AddLiveIntro extends React.Component {
this
.
setState
({
showSelectFileModal
:
false
})
}
}
onSelect=
{
this
.
handleSelectVideo
}
/>
*/
}
/>
</
div
>
)
}
...
...
src/modules/course-manage/modal/ManageCoursewareModal.jsx
View file @
afb1f37d
...
...
@@ -343,6 +343,7 @@ class ManageCoursewareModal extends React.Component {
onCancel=
{
()
=>
{
this
.
props
.
onCancel
()
}
}
maskClosable=
{
false
}
>
{
_
.
isEmpty
(
_list
)
?
<
div
className=
"empty-body"
>
...
...
src/modules/course-manage/modal/SelectPrepareFileModal.jsx
deleted
100644 → 0
View file @
75eb6c76
/*
* @Author: 吴文洁
* @Date: 2020-06-10 13:54:01
* @Last Modified by: 吴文洁
* @Last Modified time: 2020-07-23 09:33:21
* @Description:选择备课文件弹窗
*/
import
React
from
'react'
;
import
{
Modal
,
Button
,
Radio
,
Checkbox
,
Spin
,
Upload
,
message
,
Tooltip
}
from
'antd'
;
import
InfiniteScroll
from
'react-infinite-scroller'
;
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
{
DEFAULT_SIZE_UNIT
,
FileTypeIcon
,
NonCompliantFileMap
,
DISK_LIST
,
SupportFileType
,
LocalFileType
}
from
"@/common/constants/academic/lessonEnum"
;
import
{
getFileTypeByName
}
from
'../components/FolderManage'
;
import
'./SelectPrepareFileModal.less'
;
const
defaultQuery
=
{
size
:
10
,
current
:
1
,
folderIdType
:
'FOLDER'
}
const
defaultRootDisk
=
{
folderName
:
'我的文件'
,
disk
:
'MYSELF'
,
uploadPower
:
false
}
const
FOLDERLIST_URL_MAP
=
{
'MYSELF'
:
'public/hadesStore/folderList'
,
'COMMON'
:
'public/hadesStore/folderList'
,
'EMPLOYEE'
:
'public/apollo/employeeFolderList'
};
// 支持本地上传的文件类型
const
supportFileType
=
SupportFileType
.
join
(
','
);
const
localFileType
=
LocalFileType
.
join
(
','
);
// 合法的文件名后缀
const
FILE_SUFFIX_LIST
=
[
'docx'
,
'doc'
,
'ppt'
,
'pptx'
,
'pdf'
,
'xlsx'
,
'xls'
,
'jpg'
,
'jpeg'
,
'png'
,
'mp3'
,
'mp4'
];
// 禁止选择的文件类型
const
DISABLE_FILE_FORMAT
=
[
'text/csv'
,
'application/vnd.ms-excel'
,
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
];
// 最多可以选择20个文件
const
MAX_SELECT_LENGTH
=
20
;
let
count
=
0
;
class
SelectPrepareFileModal
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
);
this
.
state
=
{
targetFolder
:
{},
// 当前选中的目录
currentRootDisk
:
{},
// 当前所在根目录
uploadFolderPath
:
{},
// 上传文件的目录,防止中途切换文件夹
currentFile
:
null
,
// 单选模式下, 当前选择的文件
currentFileIndex
:
0
,
// 单选模式下, 当前选择的文件的索引
folderList
:
[],
// 文件列表
folderPathList
:
[],
// 文件路径列表
selectedFileList
:
[],
// 已勾选的文件
nonCompliantFileList
:
[],
// 超出限制的文件列表
query
:
defaultQuery
,
// 初始请求参数
showUploadModal
:
false
,
// 上传进度弹窗
showNonCompliantFileModal
:
false
,
}
}
componentWillReceiveProps
(
nextProps
)
{
const
{
diskList
=
[],
currentRootDisk
}
=
nextProps
;
if
(
nextProps
.
isOpen
)
{
const
_currentRootDisk
=
diskList
[
0
]
||
currentRootDisk
||
defaultRootDisk
;
this
.
setState
({
query
:
defaultQuery
,
currentRootDisk
:
_currentRootDisk
,
folderPathList
:
[
_currentRootDisk
],
},
()
=>
{
this
.
handleFetchFolderList
();
});
}
}
// 获取文件列表
handleFetchFolderList
=
(
params
=
{},
loadMore
=
false
)
=>
{
// 根据当前根节点获取文件列表
const
{
selectTypeList
}
=
this
.
props
;
const
{
query
,
folderList
,
currentRootDisk
}
=
this
.
state
;
const
{
instId
}
=
window
.
currentUserInstInfo
;
const
_params
=
{
...
query
,
...
params
,
instId
:
instId
||
LS
.
get
(
'instId'
),
disk
:
params
.
disk
||
currentRootDisk
.
disk
,
sort
:
'NAME_ASC'
}
if
(
selectTypeList
)
{
_params
.
folderFileType
=
selectTypeList
}
Service
.
Hades
(
FOLDERLIST_URL_MAP
[
currentRootDisk
.
disk
],
_params
).
then
((
res
)
=>
{
const
{
result
=
{}
}
=
res
;
const
{
records
=
[],
total
=
0
}
=
result
;
this
.
setState
({
folderList
:
loadMore
?
[...
folderList
,
...
records
]
:
records
,
totalCount
:
Number
(
total
)
});
});
}
// 修改目录
handleChangeFolder
=
(
folder
)
=>
{
this
.
setState
({
query
:
defaultQuery
,
folderPathList
:
[
folder
],
currentRootDisk
:
folder
,
selectedFileList
:
[],
// 切换目录不保存之前已勾选的记录
},
()
=>
{
this
.
handleFetchFolderList
({
disk
:
folder
.
disk
});
});
}
// 选择文件/文件夹
handleSelect
=
(
folder
,
index
)
=>
{
// 如果是文件,直接return, 否则进入下一级
const
{
operateType
=
'select'
,
scene
,
selectedFileList
=
[]
}
=
this
.
props
;
const
{
folderType
,
folderName
,
folderFormat
}
=
folder
;
if
(
folderType
===
'FOLDER'
)
{
this
.
handleSelectFolder
(
folder
);
}
const
suffix
=
_
.
last
(
folderName
.
split
(
'.'
)).
toLowerCase
();
{
/* TODO:麦麦打卡类目申请下来后解开视频入口 */
}
const
hiddenVideo
=
this
.
props
.
hiddenVideo
&&
[
'mp4'
,
'MP4'
].
includes
(
suffix
);
// 文件是否已经被关联了
const
hasRelation
=
_
.
find
(
selectedFileList
,
(
item
)
=>
item
.
resourceId
===
folder
.
resourceId
);
// 文件禁止点击的情况(移动、直播场景下文件为Excel、文件已经被关联了、文件后缀不合法)
const
disabled
=
hiddenVideo
||
operateType
===
'move'
||
(
scene
===
'liveCourse'
&&
folderFormat
===
'EXCEL'
)
||
!!
hasRelation
||
!
FILE_SUFFIX_LIST
.
includes
(
suffix
);
if
(
folderType
===
'FILE'
&&
!
disabled
)
{
this
.
handleSelectFile
(
folder
,
index
);
}
}
// 选择文件夹
handleSelectFolder
=
(
folder
)
=>
{
const
{
folderList
,
folderPathList
,
currentRootDisk
}
=
this
.
state
;
// 更新文件路径
folderPathList
.
push
({
id
:
folder
.
id
,
folderName
:
folder
.
folderName
});
this
.
setState
({
query
:
{
...
this
.
state
.
query
,
current
:
1
},
folderPathList
,
targetFolder
:
folder
},
()
=>
{
// 判断是否是员工文件的根目录
const
employeeDisk
=
currentRootDisk
.
disk
===
'EMPLOYEE'
&&
folderPathList
.
length
===
2
;
// 根据父级目录id获取文件夹列表
this
.
handleFetchFolderList
({
parentId
:
folder
.
id
,
folderIdType
:
employeeDisk
?
'USER'
:
'FOLDER'
});
});
}
// 选择文件
handleSelectFile
=
(
file
,
index
)
=>
{
const
{
multiple
}
=
this
.
props
;
if
(
multiple
)
{
const
{
selectedFileList
}
=
this
.
state
;
const
index
=
_
.
findIndex
(
selectedFileList
,
(
item
)
=>
item
.
resourceId
===
file
.
resourceId
);
// 如果文件没有被勾选,则勾选
if
(
index
<
0
)
{
selectedFileList
.
push
(
file
);
}
else
{
// 如果文件已经被勾选了,则取消勾选
selectedFileList
.
splice
(
index
,
1
);
}
this
.
setState
({
selectedFileList
});
}
else
{
this
.
setState
({
currentFile
:
file
,
currentFileIndex
:
index
});
}
}
handleSelectFileDone
=
()
=>
{
const
{
selectedFileList
,
currentFile
}
=
this
.
state
;
const
{
multiple
,
selectedFileList
:
prevSelectedFileList
=
[],
maxSelectLength
}
=
this
.
props
;
if
(
multiple
)
{
const
currSelectedFileList
=
[...(
prevSelectedFileList
||
[]),
...
selectedFileList
];
// 最多选择20个文件,判断是否超出了20个
if
(
currSelectedFileList
.
length
>
(
maxSelectLength
?
maxSelectLength
:
MAX_SELECT_LENGTH
))
{
// 最多还可选择的个数 = 总量(20) - 已经选择的个数(prevSelectedFileList)
message
.
warning
(
`最多可选择
${
maxSelectLength
?(
maxSelectLength
-
prevSelectedFileList
.
length
):(
MAX_SELECT_LENGTH
-
prevSelectedFileList
.
length
)}
个文件`
);
return
;
}
const
addFolderIds
=
_
.
pluck
(
selectedFileList
,
'id'
);
this
.
props
.
onSelect
(
addFolderIds
,
selectedFileList
);
// 上传完成之后将selectedFileList置为空,上传进度弹窗也一起消失
this
.
setState
({
selectedFileList
:
[],
showUploadModal
:
false
,
})
}
else
{
this
.
props
.
onSelect
(
currentFile
);
this
.
setState
({
currentFile
:
null
,
showUploadModal
:
false
,
});
}
}
// 前往特定的文件夹
handleChangeCurrentFolder
=
(
folder
,
index
)
=>
{
// 请求接口,获取当前folder下所有的文件
const
{
folderPathList
,
currentRootDisk
}
=
this
.
state
;
if
(
folderPathList
.
length
===
1
)
return
;
folderPathList
.
splice
(
index
+
1
,
folderPathList
.
length
);
const
targetFolder
=
folderPathList
[
folderPathList
.
length
-
1
];
const
{
id
=
null
}
=
targetFolder
;
// 判断是否是员工文件的根目录
const
employeeDisk
=
currentRootDisk
.
disk
===
'EMPLOYEE'
&&
folderPathList
.
length
===
2
;
this
.
setState
({
targetFolder
,
folderPathList
},
()
=>
{
this
.
handleFetchFolderList
({
parentId
:
id
,
disk
:
currentRootDisk
.
disk
,
folderIdType
:
employeeDisk
?
'USER'
:
'FOLDER'
})
});
}
// 移动到此目录
handleMoveToTargetFolder
=
()
=>
{
const
{
targetFolder
}
=
this
.
state
;
// 请求接口,完成之后刷新文件列表
this
.
props
.
onMove
(
targetFolder
);
}
// 滑动加载更多
handleScrollEvent
=
()
=>
{
const
{
folderList
,
totalCount
,
currentRootDisk
,
folderPathList
}
=
this
.
state
;
const
hasMore
=
folderList
.
length
<
totalCount
;
const
{
fileListRef
}
=
this
.
refs
;
const
hasReachBottom
=
fileListRef
.
scrollTop
+
fileListRef
.
clientHeight
===
fileListRef
.
scrollHeight
;
if
(
!
hasReachBottom
||
!
hasMore
)
return
;
const
currentFolder
=
folderPathList
[
folderPathList
.
length
-
1
];
// 判断是否是员工文件的根目录
const
employeeDisk
=
currentRootDisk
.
disk
===
'EMPLOYEE'
&&
folderPathList
.
length
===
2
;
const
query
=
_
.
clone
(
this
.
state
.
query
);
query
.
current
=
query
.
current
+
1
;
this
.
setState
({
query
},
()
=>
{
this
.
handleFetchFolderList
({
disk
:
currentRootDisk
.
disk
,
folderIdType
:
employeeDisk
?
'USER'
:
'FOLDER'
,
parentId
:
currentFolder
.
id
},
true
);
})
}
// 取消选择
handleClose
=
()
=>
{
this
.
setState
({
query
:
defaultQuery
,
selectedFileList
:
[]
},
()
=>
{
this
.
props
.
onClose
();
})
}
handleChooseFile
=
async
()
=>
{
// 校验是否已经欠费
const
{
instId
}
=
window
.
currentUserInstInfo
;
const
balanceRes
=
await
axios
.
Business
(
"public/liveAssets/query"
,
{
instId
});
// balance小于等于0表示已经欠费,旗舰版用户不需要校验余额
const
ultimateRes
=
await
axios
.
Business
(
'public/inst/checkInstProduct'
,
{
instId
,
productCodeList
:
[
'ULTIMATESELL'
,
'PIP_TO_ULTIMATE'
,
'HIGH_TO_ULTIMATE'
]
});
const
{
result
}
=
balanceRes
;
if
((
!
result
||
result
.
balance
<=
0
)
&&
!
ultimateRes
.
result
)
{
this
.
handleShowNoticeModal
(
balance
);
return
;
}
const
dom
=
document
.
querySelector
(
'#detailFileInput'
);
dom
.
click
();
}
// 上传文件
handleUpload
=
(
event
)
=>
{
const
{
selectType
}
=
this
.
props
;
const
fileList
=
event
.
target
.
files
;
// 判断文件的大小是否超出了限制
const
nonCompliantFileList
=
[];
const
_fileList
=
[...
fileList
];
_fileList
.
map
((
file
,
index
)
=>
{
let
{
size
,
type
,
name
}
=
file
;
if
(
!
type
)
{
type
=
getFileTypeByName
(
name
);
}
if
(
type
.
indexOf
(
'image'
)
>
-
1
&&
size
>
50
*
DEFAULT_SIZE_UNIT
)
{
nonCompliantFileList
.
push
(
file
);
_fileList
.
splice
(
index
,
1
);
}
if
(
type
.
indexOf
(
'audio'
)
>
-
1
&&
size
>
50
*
DEFAULT_SIZE_UNIT
)
{
nonCompliantFileList
.
push
(
file
);
_fileList
.
splice
(
index
,
1
);
}
if
(
type
.
indexOf
(
'video'
)
>
-
1
&&
size
>
500
*
DEFAULT_SIZE_UNIT
)
{
nonCompliantFileList
.
push
(
file
);
_fileList
.
splice
(
index
,
1
);
}
if
(
localFileType
.
indexOf
(
type
)
>
-
1
&&
size
>
100
*
DEFAULT_SIZE_UNIT
)
{
nonCompliantFileList
.
push
(
file
);
_fileList
.
splice
(
index
,
1
);
}
file
.
key
=
count
++
;
});
// 不符合规则的文件列表
if
(
nonCompliantFileList
.
length
>
0
)
{
const
{
confirm
}
=
this
.
props
;
if
(
confirm
)
{
Modal
.
info
({
...
confirm
,
icon
:
<
span
className=
"icon iconfont default-confirm-icon"
>

</
span
>
});
return
;
}
this
.
setState
({
fileList
:
_fileList
,
nonCompliantFileList
,
showNonCompliantFileModal
:
true
,
})
}
else
{
this
.
handleShowUploadModal
(
_fileList
);
}
// 清空文件,防止第二次无法上传同一个文件
const
dom
=
document
.
querySelector
(
'#detailFileInput'
);
dom
.
value
=
''
;
}
// 显示上传进度弹窗
handleShowUploadModal
=
async
(
fileList
)
=>
{
if
(
fileList
.
length
)
{
const
{
folderPathList
}
=
this
.
state
;
this
.
setState
({
showUploadModal
:
true
,
localFileList
:
fileList
,
uploadFolderPath
:
folderPathList
[
folderPathList
.
length
-
1
]
});
}
}
handleUploadDone
=
(
file
,
resourceId
)
=>
{
const
{
folderList
,
folderPathList
,
currentRootDisk
,
uploadFolderPath
}
=
this
.
state
;
const
{
scene
}
=
this
.
props
;
const
{
teacherId
,
instId
}
=
window
.
currentUserInstInfo
;
const
currentFolder
=
folderPathList
[
folderPathList
.
length
-
1
];
const
{
id
=
null
}
=
uploadFolderPath
||
currentFolder
;
let
{
size
,
type
,
name
}
=
file
;
if
(
!
type
)
{
type
=
getFileTypeByName
(
name
)
}
// const params = {
// name,
// resourceId,
// folderSize: size,
// folderFormat: type,
// folderTypeEnum: resourceId ? 'FILE' : 'FOLDER',
// disk: currentRootDisk.disk,
// instId: instId || LS.get('instId'),
// createUser: teacherId ? "TEACHER" : "ADMIN",
// parentId: id
// }
const
params
=
{
name
,
resourceId
,
folderSize
:
size
,
folderFormat
:
type
,
folderTypeEnum
:
resourceId
?
'FILE'
:
'FOLDER'
,
disk
:
currentRootDisk
.
disk
,
createUser
:
"STORE_USER"
,
parentId
:
id
,
storeId
:
User
.
getStoreId
(),
createId
:
User
.
getUserId
()
}
Service
.
Hades
(
'public/hadesStore/saveFolder'
,
params
).
then
((
res
)
=>
{
const
{
query
,
selectedFileList
,
currentRootDisk
}
=
this
.
state
;
const
_query
=
_
.
clone
(
query
);
{
/* TODO:麦麦打卡类目申请下来后解开视频入口 */
}
const
suffix
=
_
.
last
(
name
.
split
(
'.'
)).
toLowerCase
();
const
hiddenVideo
=
this
.
props
.
hiddenVideo
&&
[
'mp4'
,
'MP4'
].
includes
(
suffix
);
const
_selectedFileList
=
hiddenVideo
?
[...
selectedFileList
]
:
[...
selectedFileList
,
res
.
result
];
_query
.
current
=
1
;
this
.
setState
({
query
:
_query
,
selectedFileList
:
scene
===
'liveCourse'
?
_selectedFileList
.
filter
(
item
=>
{
return
!
DISABLE_FILE_FORMAT
.
includes
(
item
.
folderFormat
)})
:
_selectedFileList
,
},
()
=>
{
if
(
resourceId
&&
!
_
.
isEqual
(
uploadFolderPath
,
currentFolder
))
return
;
// 上传之后根目录不变
this
.
handleFetchFolderList
({
parentId
:
id
,
disk
:
currentRootDisk
.
disk
});
});
});
}
// 取消上传
handleHiddenUploadModal
=
()
=>
{
this
.
setState
({
showUploadModal
:
false
,
localFileList
:
[]
});
}
// 余额欠费提示弹窗
handleShowNoticeModal
=
(
balance
)
=>
{
Modal
.
info
({
title
:
'无法继续操作'
,
content
:
'直播服务已升级,请联系运营老师。'
,
icon
:
<
span
className=
"icon iconfont default-confirm-icon"
>

</
span
>
})
}
renderFooter
=
()
=>
{
const
{
selectedFileList
,
currentRootDisk
}
=
this
.
state
;
const
{
operateType
,
selectType
,
multiple
,
accept
=
".ppt,.pptx,.doc,.docx,.pdf,.jpg,.jpeg,.png,.mp3,.mp4,.xlsx,.xls"
,
tooltip
=
'支持文件类型:ppt、word、excel、pdf、jpg、jpeg、png、mp3、mp4'
}
=
this
.
props
;
const
selectedFileLength
=
selectedFileList
.
length
;
const
hasSelect
=
!!
selectedFileLength
;
// 是否有上传权限
const
hasManagementAuthority
=
currentRootDisk
.
uploadPower
;
return
[
<
input
multiple
type=
"file"
style=
{
{
display
:
'none'
}
}
id=
"detailFileInput"
accept=
{
accept
}
onChange=
{
(
e
)
=>
this
.
handleUpload
(
e
)
}
/>,
<
div
key=
"footerLeft"
className=
"footer__left"
className=
{
`prepare-lesson-upload ${operateType === 'select' && hasManagementAuthority ? 'visible' : 'hidden'}`
}
>
<
Tooltip
title=
{
tooltip
}
>
<
span
className=
"footer__left"
onClick=
{
this
.
handleChooseFile
}
>
上传文件
</
span
>
</
Tooltip
>
</
div
>,
<
div
className=
"footer__right"
key=
"footerRight"
>
<
Button
onClick=
{
()
=>
{
this
.
setState
({
showUploadModal
:
false
,
selectedFileList
:
[]
});
this
.
props
.
onClose
();
}
}
>
取消
</
Button
>
{
operateType
===
'select'
?
<
Button
key=
"cancel"
type=
"primary"
disabled=
{
!
hasSelect
&&
multiple
}
onClick=
{
this
.
handleSelectFileDone
}
>
{
`确定${hasSelect ? `
(
$
{
selectedFileLength
})
` : ''}`
}
</
Button
>
:
<
Button
type=
"primary"
onClick=
{
this
.
handleMoveToTargetFolder
}
>
移动到此目录
</
Button
>
}
</
div
>
]
}
render
()
{
const
{
folderPathList
,
folderList
,
selectedFileList
,
currentRootDisk
,
showUploadModal
,
localFileList
,
showNonCompliantFileModal
,
nonCompliantFileList
,
currentFile
,
currentFileIndex
}
=
this
.
state
;
const
{
scene
,
isOpen
,
multiple
=
false
,
diskList
=
[],
operateType
=
'move'
,
footer
=
this
.
renderFooter
(),
selectedFileList
:
prevSelectedFileList
=
[],
}
=
this
.
props
;
const
currentFolder
=
folderPathList
[
folderPathList
.
length
-
1
];
const
title
=
operateType
===
'move'
?
'移动到'
:
'选择文件'
;
const
currSelectedFileList
=
[...(
prevSelectedFileList
||
[]),
...
selectedFileList
];
// 判断是否是员工文件的根目录
const
employeeDisk
=
currentRootDisk
.
disk
===
'EMPLOYEE'
&&
folderPathList
.
length
===
1
;
return
(
<
Modal
visible=
{
isOpen
}
title=
{
title
}
footer=
{
footer
}
width=
{
560
}
onCancel=
{
this
.
handleClose
}
className=
"select-prepare-file-modal"
>
{
// 机构可见磁盘大于1且在选择文件的情况下才显示tabs
operateType
===
'select'
&&
diskList
.
length
>
1
&&
<
div
className=
"radio-buttons"
>
<
Radio
.
Group
defaultValue=
{
currentRootDisk
.
disk
}
value=
{
currentRootDisk
.
disk
}
>
{
diskList
.
map
((
item
,
index
)
=>
{
return
(
<
Radio
.
Button
value=
{
item
.
disk
}
key=
{
`folder-item${index}`
}
onClick=
{
()
=>
this
.
handleChangeFolder
(
item
)
}
>
{
item
.
folderName
}
</
Radio
.
Button
>
)
})
}
</
Radio
.
Group
>
</
div
>
}
<
div
className=
"bread-crumbs"
>
{
folderPathList
.
map
((
folderPath
,
index
)
=>
{
return
(
<
div
className=
"file-path"
key=
{
`file-path${index}`
}
onClick=
{
()
=>
this
.
handleChangeCurrentFolder
(
folderPath
,
index
)
}
>
{
folderPath
.
folderName
}
</
div
>
)
})
}
</
div
>
{
!
_
.
isEmpty
(
folderList
)
?
<
div
onScrollCapture=
{
()
=>
this
.
handleScrollEvent
()
}
style=
{
{
height
:
'320px'
,
overflowY
:
'scroll'
}
}
ref=
"fileListRef"
>
<
div
className=
"file-list"
>
{
folderList
.
map
((
folder
,
index
)
=>
{
const
{
folderType
,
folderSize
,
folderFormat
,
folderName
}
=
folder
;
const
isFolder
=
folderType
===
'FOLDER'
;
let
_size
=
`${(folderSize / DEFAULT_SIZE_UNIT).toFixed(1)}M`
;
if
(
folderSize
<
0.1
*
DEFAULT_SIZE_UNIT
)
{
_size
=
`${(folderSize / 1000).toFixed(1)}kb`
;
}
let
imgSrc
=
!
isFolder
?
FileTypeIcon
[
folderFormat
]
:
'https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1594871430788.png'
;
if
(
employeeDisk
)
{
imgSrc
=
'https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1594871440736.png'
}
const
suffix
=
_
.
last
(
folderName
.
split
(
'.'
)).
toLowerCase
();
{
/* TODO:麦麦打卡类目申请下来后解开视频入口 */
}
const
hiddenVideo
=
this
.
props
.
hiddenVideo
&&
[
'mp4'
,
'MP4'
].
includes
(
suffix
);
// 判断文件是否被选中了
const
hasSelect
=
_
.
find
(
currSelectedFileList
,
(
item
)
=>
item
.
resourceId
===
folder
.
resourceId
);
// 判断文件是否已经被关联了
const
hasRelation
=
_
.
find
((
prevSelectedFileList
||
[]),
(
item
)
=>
item
.
resourceId
===
folder
.
resourceId
);
// 文件禁止点击的情况(移动、直播场景下文件为Excel、文件已经被关联了、文件不合法)
const
disabled
=
hiddenVideo
||
(
!
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=
{
()
=>
{
this
.
handleSelect
(
folder
,
index
)
}
}
>
<
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'
&&
(
multiple
?
<
Checkbox
checked=
{
!!
hasSelect
}
disabled=
{
!!
hasRelation
}
/>
:
(
_
.
isEqual
(
currentFile
,
folder
)
?
<
span
className=
"icon iconfont correct"
>

</
span
>
:
<
span
className=
"icon iconfont error"
>

</
span
>
)
)
}
{
/* 文件不显示展开的图标 */
}
{
isFolder
&&
<
div
className=
"file-item__expend-icon"
>
<
span
className=
"icon iconfont"
>

</
span
>
</
div
>
}
</
div
>
)
})
}
</
div
>
</
div
>
:
<
DefaultIcon
type=
'student'
title=
{
<
span
className=
"desc"
>
这个文件夹是空的
</
span
>
}
/>
}
<
UploadProgressModal
isOpen=
{
showUploadModal
}
fileList=
{
localFileList
}
currentFolder=
{
currentFolder
}
onUpload=
{
this
.
handleUploadDone
}
onCancel=
{
this
.
handleHiddenUploadModal
}
/>
<
NonCompliantFileModal
isOpen=
{
showNonCompliantFileModal
}
fileList=
{
nonCompliantFileList
}
onClose=
{
()
=>
{
this
.
setState
({
showNonCompliantFileModal
:
false
});
}
}
onOk=
{
()
=>
{
this
.
setState
({
showNonCompliantFileModal
:
false
});
this
.
handleShowUploadModal
(
this
.
state
.
fileList
)
}
}
/>
{
this
.
state
.
chargeModal
}
</
Modal
>
)
}
}
export
default
SelectPrepareFileModal
;
\ No newline at end of file
src/modules/course-manage/modal/SelectPrepareFileModal.less
deleted
100644 → 0
View file @
75eb6c76
.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/SelectPrepareFileModal.jsx
View file @
afb1f37d
...
...
@@ -312,21 +312,21 @@ class SelectPrepareFileModal extends React.Component {
}
handleChooseFile
=
async
()
=>
{
// 校验是否已经欠费
const
{
instId
}
=
window
.
currentUserInstInfo
;
const
balanceRes
=
await
axios
.
Business
(
"public/liveAssets/query"
,
{
instId
});
// balance小于等于0表示已经欠费,旗舰版用户不需要校验余额
const
ultimateRes
=
await
axios
.
Business
(
'public/inst/checkInstProduct'
,
{
instId
,
productCodeList
:
[
'ULTIMATESELL'
,
'PIP_TO_ULTIMATE'
,
'HIGH_TO_ULTIMATE'
]
});
//
//
校验是否已经欠费
//
const { instId } = window.currentUserInstInfo;
//
const balanceRes = await axios.Business("public/liveAssets/query", { instId });
//
//
balance小于等于0表示已经欠费,旗舰版用户不需要校验余额
//
const ultimateRes = await axios.Business('public/inst/checkInstProduct', {
//
instId,
//
productCodeList: ['ULTIMATESELL', 'PIP_TO_ULTIMATE', 'HIGH_TO_ULTIMATE']
//
});
const
{
result
}
=
balanceRes
;
//
const { result } = balanceRes;
if
((
!
result
||
result
.
balance
<=
0
)
&&
!
ultimateRes
.
result
)
{
this
.
handleShowNoticeModal
(
balance
);
return
;
}
//
if ((!result || result.balance <= 0) && !ultimateRes.result) {
//
this.handleShowNoticeModal(balance);
//
return;
//
}
const
dom
=
document
.
querySelector
(
'#detailFileInput'
);
dom
.
click
();
}
...
...
@@ -401,10 +401,11 @@ class SelectPrepareFileModal extends React.Component {
}
handleUploadDone
=
(
file
,
resourceId
)
=>
{
console
.
log
(
'9999'
);
const
{
folderList
,
folderPathList
,
currentRootDisk
,
uploadFolderPath
}
=
this
.
state
;
const
{
scene
}
=
this
.
props
;
const
{
teacherId
,
instId
}
=
window
.
currentUserInstInfo
;
//
const { teacherId, instId } = window.currentUserInstInfo;
const
currentFolder
=
folderPathList
[
folderPathList
.
length
-
1
];
const
{
id
=
null
}
=
uploadFolderPath
||
currentFolder
;
let
{
size
,
type
,
name
}
=
file
;
...
...
@@ -413,6 +414,17 @@ class SelectPrepareFileModal extends React.Component {
type
=
getFileTypeByName
(
name
)
}
// const params = {
// name,
// resourceId,
// folderSize: size,
// folderFormat: type,
// folderTypeEnum: resourceId ? 'FILE' : 'FOLDER',
// disk: currentRootDisk.disk,
// instId: instId || LS.get('instId'),
// createUser: teacherId ? "TEACHER" : "ADMIN",
// parentId: id
// }
const
params
=
{
name
,
resourceId
,
...
...
@@ -420,12 +432,12 @@ class SelectPrepareFileModal extends React.Component {
folderFormat
:
type
,
folderTypeEnum
:
resourceId
?
'FILE'
:
'FOLDER'
,
disk
:
currentRootDisk
.
disk
,
instId
:
instId
||
LS
.
get
(
'instId'
),
createUser
:
teacherId
?
"TEACHER"
:
"ADMIN"
,
parentId
:
id
createUser
:
"STORE_USER"
,
parentId
:
id
,
storeId
:
User
.
getStoreId
(),
createId
:
User
.
getUserId
()
}
axios
.
Apollo
(
'public/apollo/saveFolder'
,
params
).
then
((
res
)
=>
{
Service
.
Hades
(
'public/hadesStore/saveFolder'
,
params
).
then
((
res
)
=>
{
const
{
query
,
selectedFileList
,
currentRootDisk
}
=
this
.
state
;
const
_query
=
_
.
clone
(
query
);
{
/* TODO:麦麦打卡类目申请下来后解开视频入口 */
}
...
...
@@ -478,9 +490,6 @@ class SelectPrepareFileModal extends React.Component {
const
hasSelect
=
!!
selectedFileLength
;
// 是否有上传权限
const
hasManagementAuthority
=
currentRootDisk
.
uploadPower
;
return
[
<
input
multiple
...
...
@@ -489,11 +498,12 @@ class SelectPrepareFileModal extends React.Component {
id=
"detailFileInput"
accept=
{
accept
}
onChange=
{
(
e
)
=>
this
.
handleUpload
(
e
)
}
maskClosable=
{
false
}
/>,
<
div
key=
"footerLeft"
className=
"footer__left"
className=
{
`prepare-lesson-upload ${operateType === 'select'
&& hasManagementAuthority
? 'visible' : 'hidden'}`
}
className=
{
`prepare-lesson-upload ${operateType === 'select'? 'visible' : 'hidden'}`
}
>
<
Tooltip
title=
{
tooltip
}
>
<
span
...
...
src/modules/prepare-lesson/modal/UploadProgressModal.jsx
View file @
afb1f37d
import
React
from
'react'
;
import
{
Modal
}
from
'antd'
;
import
OSS
from
'ali-oss'
;
import
Service
from
'@/common/js/service'
;
import
{
getEllipsText
}
from
"@/core/util"
;
import
{
DEFAULT_SIZE_UNIT
,
FileTypeIcon
,
FileVerifyMap
}
from
"@/common/constants/academic/lessonEnum"
;
...
...
@@ -61,7 +61,7 @@ class UploadProgressModal extends React.Component {
const
{
instId
}
=
window
.
currentUserInstInfo
;
return
new
Promise
(
resolve
=>
{
axios
.
postJSON
(
'mfs/anon/mfs/multiPartUpload'
,
{
Service
.
postJSON
(
'mfs/anon/mfs/multiPartUpload'
,
{
instId
,
resourceName
,
data
:
{
folderId
:
id
},
...
...
@@ -94,7 +94,6 @@ class UploadProgressModal extends React.Component {
callbackBody
,
ossUri
});
resolve
({
ossClient
,
resourceId
,
callBack
,
callbackBody
,
ossUri
});
})
})
...
...
@@ -129,6 +128,7 @@ class UploadProgressModal extends React.Component {
}).
then
(
url
=>
{
file
.
status
=
'success'
;
this
.
setState
({
fileList
});
console
.
log
(
'fileList'
,
fileList
);
this
.
props
.
onUpload
(
fileContent
,
resourceId
);
}).
catch
(
err
=>
{
file
.
status
=
'fail'
;
...
...
src/modules/resource-disk/components/FolderManage.jsx
View file @
afb1f37d
...
...
@@ -13,11 +13,11 @@ import _ from 'underscore';
import
Service
from
'@/common/js/service'
;
import
{
SUFFIX_MAP
}
from
'@/domains/resource-disk/constants'
;
import
User
from
'@/common/js/user'
;
import
OperateArea
from
'./OperateArea'
;
import
FolderList
from
'./FolderList'
;
import
User
from
'@/common/js/user'
;
const
FOLDERLIST_URL_MAP
=
{
'MYSELF'
:
'public/hadesStore/folderList'
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment