Skip to content

X
xiaomai-cloud-class-web
Commit a9043c95 by zhangleyuan
Options

Merge branch 'feature/zahngleyuan/20210607/cloud-cass-remodel' into 'master' 

Feature/zahngleyuan/20210607/cloud cass remodel

See merge request !43
parents 2021ecd0 ca9abf13
Showing with 323 additions and 82 deletions
src/bu-components/ChooseMembersModal.jsx
...@@ -155,7 +155,7 @@ class ChooseMembersModal extends React.Component { ...@@ -155,7 +155,7 @@ class ChooseMembersModal extends React.Component {
let rightsList = []; // 保存新加进去的成员 let rightsList = []; // 保存新加进去的成员
selectUserList.map((item) => { selectUserList.map((item) => {
rightsList.push({ rightsList.push({
rights: "LOOK_DOWNLOAD", rights: "LOOK",
userId: item.userId userId: item.userId
}) })
return rightsList return rightsList
...@@ -203,10 +203,9 @@ class ChooseMembersModal extends React.Component { ...@@ -203,10 +203,9 @@ class ChooseMembersModal extends React.Component {
title: '全选', // 实际为头像，但在表格上这行要求显示为全选 title: '全选', // 实际为头像，但在表格上这行要求显示为全选
key: 'avatar', key: 'avatar',
dataIndex: 'avatar', dataIndex: 'avatar',
width: '40%', width: '30%',
render: (value, record) => { render: (value, record) => {
const { adminName } = record; const { adminName } = record;
return ( return (
<div className='avatar'> <div className='avatar'>
{ {
...@@ -232,7 +231,7 @@ class ChooseMembersModal extends React.Component { ...@@ -232,7 +231,7 @@ class ChooseMembersModal extends React.Component {
title: '学员名', title: '学员名',
key: 'adminNameRight', key: 'adminNameRight',
dataIndex: 'adminName', dataIndex: 'adminName',
width: '70%', width: '65%',
render: (value, record) => { render: (value, record) => {
const { adminName = '', avatar } = record; const { adminName = '', avatar } = record;
return ( return (
......
src/bu-components/ChooseMembersModal.less
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
>tr >td { >tr >td {
border-bottom: none; border-bottom: none;
background-color: #fff !important; background-color: #fff !important;
padding:8px 8px !important;
} }
} }
} }
......
src/bu-components/ManagingMembersModal.jsx
...@@ -19,7 +19,7 @@ class ManagingMembersModal extends React.Component { ...@@ -19,7 +19,7 @@ class ManagingMembersModal extends React.Component {
addManagingMember: false, // 是否点击了添加成员 addManagingMember: false, // 是否点击了添加成员
storeId :User.getStoreId() , // 学院Id storeId :User.getStoreId() , // 学院Id
iconRotateList: [], iconRotateList: [],
userAuthority : ['可编辑', '可查看/下载', '仅可查看', '', '创建者', '学院管理员'] , // 空 代表删除 userAuthority : ['可编辑', '可下载', '可查看', '', '创建者', '学院管理员'] , // 空 代表删除
} }
} }
componentDidMount() { componentDidMount() {
...@@ -64,7 +64,7 @@ class ManagingMembersModal extends React.Component { ...@@ -64,7 +64,7 @@ class ManagingMembersModal extends React.Component {
// 修改成员权限 // 修改成员权限
updateFileUserAuthority = (params, newRights = 1) => { updateFileUserAuthority = (params, newRights = 1) => {
const rightList = ['EDIT', 'LOOK_DOWNLOAD', '']; const rightList = ['EDIT', 'LOOK_DOWNLOAD', 'LOOK'];
let { iconRotateList } = this.state; let { iconRotateList } = this.state;
let _params = params; let _params = params;
_params.rights = rightList[newRights]; _params.rights = rightList[newRights];
...@@ -173,10 +173,10 @@ class ManagingMembersModal extends React.Component { ...@@ -173,10 +173,10 @@ class ManagingMembersModal extends React.Component {
<span className='menu-bottom'>下载、复制</span> <span className='menu-bottom'>下载、复制</span>
</div> </div>
</Menu.Item> </Menu.Item>
{/* <Menu.Item key="LOOK" > <Menu.Item key="LOOK" >
<div onClick={() => this.updateFileUserAuthority(params, 2)}>仅可查看</div> <div onClick={() => this.updateFileUserAuthority(params, 2)}>{userAuthority[2]}</div>
<span className='menu-bottom'>{userAuthority[2]}</span> <span className='menu-bottom'>查看</span>
</Menu.Item> */} </Menu.Item>
<Menu.Divider key='LINE'/> <Menu.Divider key='LINE'/>
<Menu.Item key="REMOVE" > <Menu.Item key="REMOVE" >
<div className='remove' onClick={() => this.removeUser(params, userAuthority[3])}>移除</div> <div className='remove' onClick={() => this.removeUser(params, userAuthority[3])}>移除</div>
...@@ -247,6 +247,8 @@ class ManagingMembersModal extends React.Component { ...@@ -247,6 +247,8 @@ class ManagingMembersModal extends React.Component {
num = 1; num = 1;
} else if (record.rights === "EDIT") { } else if (record.rights === "EDIT") {
num = 0; num = 0;
}else if(record.rights=="LOOK"){
num = 2;
} }
} }
return ( return (
......
src/bu-components/ManagingMembersModal.less
...@@ -35,6 +35,9 @@ ...@@ -35,6 +35,9 @@
.ant-table-row{ .ant-table-row{
background-color: #fff !important; background-color: #fff !important;
} }
tr:first-child{
display: none;
}
.ant-table-row:hover{ .ant-table-row:hover{
background-color: #E9E9E9; background-color: #E9E9E9;
} }
......
src/modules/resource-disk/components/FolderList.jsx
...@@ -22,13 +22,15 @@ import UploadProgressModal from '@/bu-components/UploadProgressModal'; ...@@ -22,13 +22,15 @@ import UploadProgressModal from '@/bu-components/UploadProgressModal';
import SelectPrepareFileModal from '@/bu-components/SelectPrepareFileModal'; import SelectPrepareFileModal from '@/bu-components/SelectPrepareFileModal';
import CopyFileModal from '@/bu-components/CopyFileModal'; import CopyFileModal from '@/bu-components/CopyFileModal';
import ManagingMembersModal from '@/bu-components/ManagingMembersModal'; import ManagingMembersModal from '@/bu-components/ManagingMembersModal';
import PreviewFileModal from '../modal/PreviewFileModal'
import ScanFileModal from '../modal/ScanFileModal'; import ScanFileModal from '../modal/ScanFileModal';
import CreateFolderModal from '../modal/CreateFolderModal'; import CreateFolderModal from '../modal/CreateFolderModal';
import User from '@/common/js/user'; import User from '@/common/js/user';
import axios from 'axios';
const appId = "yozoqvpO2Hvz8346";
const DEL_FOLDER_URL_MAP = { const DEL_FOLDER_URL_MAP = {
'MYSELF': 'public/hadesStore/delFolder', 'MYSELF': 'public/hadesStore/delFolder',
'COMMON': 'public/hadesStore/delFolder' 'COMMON': 'public/hadesStore/delFolder'
...@@ -53,7 +55,10 @@ class FolderList extends React.Component { ...@@ -53,7 +55,10 @@ class FolderList extends React.Component {
showCopyFileModal: false, // 复制文件弹窗 showCopyFileModal: false, // 复制文件弹窗
showManagingModal: false, // 管理文件查看编辑权限 showManagingModal: false, // 管理文件查看编辑权限
nonCompliantFileList: [], // 不符合上限的文件列表 nonCompliantFileList: [], // 不符合上限的文件列表
parentRights: '' // 继承父级文件夹权限 parentRights: '', // 继承父级文件夹权限
showPreviewModal:false, //是否显示loading
previewing:false, //是否正在预览
previewStatus:'UPLOAD' //预览文件的生成状态
} }
} }
...@@ -75,7 +80,7 @@ class FolderList extends React.Component { ...@@ -75,7 +80,7 @@ class FolderList extends React.Component {
} }
// 埋点 // 埋点
handleDataDot = (folderFormat) => { handleDataDot = (folderFormat) => {
switch (folderFormat) { switch (folderFormat) {
case 'PDF': case 'PDF':
window.WEBTRACING('resource_disk_file_preview_pdf', '资料云盘_点击预览_pdf'); window.WEBTRACING('resource_disk_file_preview_pdf', '资料云盘_点击预览_pdf');
...@@ -92,75 +97,194 @@ class FolderList extends React.Component { ...@@ -92,75 +97,194 @@ class FolderList extends React.Component {
case 'PPTX': case 'PPTX':
window.WEBTRACING('resource_disk_file_preview_ppt', '资料云盘_点击预览_ppt'); window.WEBTRACING('resource_disk_file_preview_ppt', '资料云盘_点击预览_ppt');
break; break;
default: default:
break; break;
} }
} }
handleYZPreviewDataDot =(folderFormat) => {
// 预览文件 switch (folderFormat) {
handleScanFile = (folder) => { case 'PDF':
const { folderFormat, folderSize, ossUrl } = folder; window.WEBTRACING('resource_disk_yz_file_preview_pdf', '资料云盘_点击永中预览_pdf');
switch (folderFormat) {
case 'PDF':
window.open(ossUrl, "_blank");
break;
case "WORD":
case "DOCX":
case "DOC":
case "EXCEL":
case "PPT":
case "PPTX":
case "PDF":
if ((folderFormat === 'PPT' || folderFormat === 'PPTX' ||
folderFormat === 'DOCX' || folderFormat === 'WORD' ||
folderFormat === 'DOC') && folderSize > 10 * DEFAULT_SIZE_UNIT) {
Modal.confirm({
title: '抱歉，不能在线预览',
content: '由于文件较大，不支持在线预览，请下载后再查看',
// icon: <Icon type="question-circle" theme="filled" style={{ color: '#FF8534' }}></Icon>,
okText: "下载",
onOk: () => {
const a = document.createElement('a');
a.href = ossUrl;
a.click();
}
});
break; break;
} case 'WORD':
if (folderFormat === 'EXCEL') { case 'DOCX':
Modal.confirm({ case 'DOC':
title: '抱歉，不能在线预览', window.WEBTRACING('resource_disk_yz_file_preview_word', '资料云盘_点击永中预览_word');
content: ' 该文件类型不支持在线预览，请下载后再查看',
// icon: <Icon type="question-circle" theme="filled" style={{ color: '#FF8534' }}></Icon>,
okText: "下载",
onOk: () => {
const a = document.createElement('a');
a.href = ossUrl;
a.click();
}
});
break; break;
case 'EXCEL':
window.WEBTRACING('resource_disk_yz_file_preview_excel', '资料云盘_点击永中预览_excel');
break;
case 'PPT':
case 'PPTX':
window.WEBTRACING('resource_disk_yz_file_preview_ppt', '资料云盘_点击永中预览_ppt');
break;
default:
break;
}
}
getYoZoSign = (data,type,folderName)=>{
return new Promise((resolve) => {
let uploadParams;
if(type==="UPLOAD"){
uploadParams ={
fileUrl:data,
instId:window.currentUserInstInfo.instId,
yoZoTypeEnum:'UPLOAD'
}
}else{
uploadParams ={
fileVersionId:data,
instId:window.currentUserInstInfo.instId,
yoZoTypeEnum:'VIEW',
htmlTitle:folderName
} }
const prefixUrl = "https://view.officeapps.live.com/op/view.aspx?src="; }
const scanUrl = `${prefixUrl}${encodeURIComponent(ossUrl)}` Service.Apollo('public/apollo/getYoZoSign', uploadParams).then(res => {
window.open(scanUrl, "_blank"); const { result = [] } = res;
resolve(result)
});
})
}
saveYoZoFileVersionId = (fileVersionId,folderId)=>{
const params ={
fileVersionId,
folderId,
instId: window.currentUserInstInfo.instId,
}
Service.Apollo('public/apollo/saveYoZoFileVersionId', params).then(res => {
});
}
// 预览文件
handleScanFile = async (folder) => {
const { folderFormat, folderSize, ossUrl,rights,fileVersionId,id,folderName} = folder;
const {currentRootDisk } = this.props;
//如果是公共文件且只有查看的权限的用户的预览对接的三方是永中
const that = this;
if(currentRootDisk.disk==="COMMON" && rights==="LOOK"){
switch (folderFormat) {
case 'PDF':
case 'WORD':
case 'DOCX':
case 'DOC':
case 'EXCEL':
case 'PPT':
case 'PPTX':
that.handleYZPreviewDataDot(folderFormat);
if(!fileVersionId){
this.setState({
previewing:true,
showPreviewModal:true,
previewStatus:'UPLOAD'
},async ()=>{
const uploadSign = await that.getYoZoSign(ossUrl,"UPLOAD");
axios.post(`https://dmc.yozocloud.cn/api/file/http?fileUrl=${ossUrl}&appId=${appId}&sign=${uploadSign}`)
.then(async function (response){
that.saveYoZoFileVersionId(response.data.data.fileVersionId,id);
const { previewing } = that.state;
if(previewing){
const previewSign = await that.getYoZoSign(response.data.data.fileVersionId,"VIEW",folderName);
const url = `https://eic.yozocloud.cn/api/view/file?fileVersionId=${response.data.data.fileVersionId}&appId=${appId}&sign=${previewSign}&htmlTitle=${folderName}`
that.setState({
previewStatus:'UPLOAD_SUCCESS',
url
})
}
})
})
}else{
const previewSign = await that.getYoZoSign(fileVersionId,"VIEW",folderName);
const url = `http://eic.yozocloud.cn/api/view/file?fileVersionId=${fileVersionId}&appId=${appId}&sign=${previewSign}&htmlTitle=${folderName}`
const a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('href', url);
a.setAttribute('target', '_blank');
a.click();
document.body.removeChild(a)
}
break; break;
default: default:
const scanFileModal = <ScanFileModal const scanFileModal = (
fileType={folderFormat} <ScanFileModal
item={folder} fileType={folderFormat}
close={() => { item={folder}
this.setState({ scanFileModal: null }) close={() => {
}} this.setState({ scanFileModal: null });
/> }}
this.setState({ scanFileModal }); />
);
this.setState({ scanFileModal });
break; break;
}
}else{
switch (folderFormat) {
case 'PDF':
window.open(ossUrl, "_blank");
break;
case "WORD":
case "DOCX":
case "DOC":
case "EXCEL":
case "PPT":
case "PPTX":
case "PDF":
if ((folderFormat === 'PPT' || folderFormat === 'PPTX' ||
folderFormat === 'DOCX' || folderFormat === 'WORD' ||
folderFormat === 'DOC') && folderSize > 10 * DEFAULT_SIZE_UNIT) {
Modal.confirm({
title: '抱歉，不能在线预览',
content: '由于文件较大，不支持在线预览，请下载后再查看',
// icon: <Icon type="question-circle" theme="filled" style={{ color: '#FF8534' }}></Icon>,
okText: "下载",
onOk: () => {
const a = document.createElement('a');
a.href = ossUrl;
a.click();
}
});
break;
}
// if (folderFormat === 'EXCEL') {
// Modal.confirm({
// title: '抱歉，不能在线预览',
// content: ' 该文件类型不支持在线预览，请下载后再查看',
// // icon: <Icon type="question-circle" theme="filled" style={{ color: '#FF8534' }}></Icon>,
// okText: "下载",
// onOk: () => {
// const a = document.createElement('a');
// a.href = ossUrl;
// a.click();
// }
// });
// break;
// }
const prefixUrl = "https://view.officeapps.live.com/op/view.aspx?src=";
const scanUrl = `${prefixUrl}${encodeURIComponent(ossUrl)}`
window.open(scanUrl, "_blank");
break;
default:
const scanFileModal = <ScanFileModal
fileType={folderFormat}
item={folder}
close={() => {
this.setState({ scanFileModal: null })
}}
/>
this.setState({ scanFileModal });
break;
}
} }
// 预览文件埋点
// 预览文件埋点 this.handleDataDot(folderFormat);
this.handleDataDot(folderFormat); }
cancelPreview = ()=>{
this.setState({
previewing:false,
showPreviewModal:false,
previewStatus:'UPLOAD'
})
} }
// 选择文件夹 // 选择文件夹
handleSelectFolder = (folder) => { handleSelectFolder = (folder) => {
const { folderPathList, showResultPage, currentRootDisk } = this.props; const { folderPathList, showResultPage, currentRootDisk } = this.props;
...@@ -277,8 +401,8 @@ class FolderList extends React.Component { ...@@ -277,8 +401,8 @@ class FolderList extends React.Component {
title: '操作', title: '操作',
key: 'operate', key: 'operate',
render: (value, record) => { render: (value, record) => {
if (!(currentRootDisk.disk === 'COMMON' && (folderPathList.length === 1 || record.folderType === 'FOLDER')) || if ((!(currentRootDisk.disk === 'COMMON' && (folderPathList.length === 1 || record.folderType === 'FOLDER')) ||
hasManagementAuthority) { hasManagementAuthority) && !(record.rights==="LOOK") ){
return ( return (
<Dropdown overlay={this.renderMenu(record)} trigger={['hover']}> <Dropdown overlay={this.renderMenu(record)} trigger={['hover']}>
<span className="icon iconfont">&#xe62c;</span> <span className="icon iconfont">&#xe62c;</span>
...@@ -609,14 +733,13 @@ class FolderList extends React.Component { ...@@ -609,14 +733,13 @@ class FolderList extends React.Component {
<Menu.Divider key="administration-bottom"/> <Menu.Divider key="administration-bottom"/>
] ]
} }
{ {(folderType === 'FILE' && (rights === "LOOK_DOWNLOAD" || rights === 'EDIT') ) &&
folderType === 'FILE' &&
<Menu.Item key="download"> <Menu.Item key="download">
<span onClick={() => { this.handleDownload(record) }}>下载</span> <span onClick={() => { this.handleDownload(record) }}>下载</span>
</Menu.Item> </Menu.Item>
} }
{ {(rights === "LOOK_DOWNLOAD" || rights === 'EDIT') &&
currentRootDisk.disk === 'COMMON' &&
<Menu.Item key="copy"> <Menu.Item key="copy">
<span onClick={() => this.handleShowCopyFileModal(record)}>复制到</span> <span onClick={() => this.handleShowCopyFileModal(record)}>复制到</span>
</Menu.Item> </Menu.Item>
...@@ -647,7 +770,8 @@ class FolderList extends React.Component { ...@@ -647,7 +770,8 @@ class FolderList extends React.Component {
const { const {
currentFolder, currentFile, renameModalData, showSelectFileModal, currentFolder, currentFile, renameModalData, showSelectFileModal,
showUploadModal, localFileList, showCopyFileModal, showManagingModal showUploadModal, localFileList, showCopyFileModal, showManagingModal,
showPreviewModal, previewStatus,url
} = this.state; } = this.state;
const { const {
selectedFileIds, folderList, showResultPage, selectedFileIds, folderList, showResultPage,
...@@ -790,7 +914,9 @@ class FolderList extends React.Component { ...@@ -790,7 +914,9 @@ class FolderList extends React.Component {
}} }}
/> />
} }
{ showPreviewModal &&
<PreviewFileModal onCancel={()=>this.cancelPreview()} previewStatus={previewStatus} url={url}/>
}
{ this.state.scanFileModal } { this.state.scanFileModal }
{ this.state.chargeModal } { this.state.chargeModal }
</div> </div>
......
src/modules/resource-disk/modal/PreviewFileModal.jsx 0 → 100644
import React from 'react';
import "./PreviewFileModal.less";
import { Spin } from 'antd'
class PreviewFileModal extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
cancelPreView = ()=>{
this.props.onCancel();
}
toPreView = (url)=>{
const a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('href', url);
a.setAttribute('target', '_blank');
a.click();
document.body.removeChild(a);
this.props.onCancel();
}
render() {
const { previewStatus,url} = this.props
return (
<div className="preview-modal">
<div className="preview-modal-content">
<div className="load-img-box">
{previewStatus === "UPLOAD" &&
<Spin size="large"/>
}
{previewStatus === "UPLOAD_SUCCESS" &&
<img className="load-img" src="https://image.xiaomaiketang.com/xm/jJRK3bTEdc.png"></img>
}
</div>
<div className="load-text-box">
{previewStatus === "UPLOAD" &&
<div className="load-text-box-title">预览生成中</div>
}
{previewStatus === "UPLOAD_SUCCESS" &&
<div className="load-text-box-title">预览生成成功</div>
}
</div>
<div className="operate">
<span className="btn cancel-preview-btn" onClick={()=>this.cancelPreView()}>取消预览</span>
{previewStatus === "UPLOAD" &&
<span className="btn to-preview-btn__disabled to-preview-btn">去查看</span>
}
{previewStatus === "UPLOAD_SUCCESS" &&
<span className="btn to-preview-btn" onClick={()=>this.toPreView(url)}>去查看</span>
}
</div>
</div>
</div>
);
}
}
export default PreviewFileModal;
src/modules/resource-disk/modal/PreviewFileModal.less 0 → 100644
.preview-modal{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 102;
height: 100%;
background: rgba(0, 0, 0, 0.7);
.preview-modal-content{
position:absolute;
left:calc(50% - 133px);
top:calc(50% - 87px);
color:#FFF;
text-align:center;
width:266px;
height:174px;
.ant-spin-dot-item{
background-color: #FFF;
}
.load-img-box{
.load-img{
width:44px;
height:44px;
}
}
.load-text-box{
margin-top:23px;
font-size:16px;
color:#FFF;
.load-text-box-title{
margin-bottom:8px;
}
}
.operate{
margin-top:24px;
.btn {
padding:5px 12px;
border:1px solid #E8E8E8;
border-radius:2px;
}
.cancel-preview-btn{
margin-right:8px;
}
.to-preview-btn__disabled{
border:1px solid #E8E8E8;
opacity: 0.4;
}
}
}
}
\ No newline at end of file
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