@@ -30,6 +30,12 @@ | |||
</div> | |||
<div class="app-header-content-right"> | |||
<slot name="right"></slot> | |||
<span @click="toRecycle"> | |||
<i | |||
class="Cicon icon font_family icon-icon_huishouzhan" | |||
:class="{inRecycle:isInRecycle}" | |||
/> | |||
</span> | |||
<user-center v-if="showUserCenter" /> | |||
</div> | |||
</div> | |||
@@ -56,6 +62,7 @@ export default { | |||
title: String, | |||
// 右侧 | |||
showUserCenter: Boolean, | |||
isInRecycle: Boolean, | |||
}, | |||
data() { | |||
return { | |||
@@ -90,6 +97,14 @@ export default { | |||
} | |||
this.$router.go(-1); | |||
}, | |||
/** | |||
* 进入回收站 | |||
*/ | |||
toRecycle: function () { | |||
this.$router.push({ | |||
name: "recycle", | |||
}); | |||
}, | |||
/** | |||
* 检测bigbody滚动距离添加样式 | |||
*/ | |||
@@ -219,4 +234,7 @@ export default { | |||
.black-bg-color { | |||
background-color:#32323c; | |||
} | |||
.inRecycle{ | |||
color: #9c22ff; | |||
} | |||
</style> |
@@ -77,7 +77,7 @@ const router = new Router({ | |||
{ | |||
path: '/recycle', | |||
name: 'recycle', | |||
component: () => import('@/views/main_web/recycle'), | |||
component: () => import('@/views/main_web/workspace/recyclebin'), | |||
}, | |||
{ | |||
path: '/cloud', | |||
@@ -9,7 +9,7 @@ | |||
<template> | |||
<div class="proj-detail"> | |||
<top-header v-show="!isEnterEdit" | |||
backBtnTitle="完成项目编辑" theme="basis" | |||
backBtnTitle="退出项目编辑" theme="basis" | |||
:showUserCenter="false" :showBackBtn="true" :onBackBtnClick="returnToProjListPage" | |||
/> | |||
<div class="content-wrap" :class="{'set-content-wrap': isEnterEdit}"> | |||
@@ -0,0 +1,191 @@ | |||
<template> | |||
<div> | |||
<div class="yiyun_wenjian_list loding-mask-parent"> | |||
<div> | |||
<!-- 非图片文件图标 --> | |||
<div | |||
v-if="!oneOf(file.extension, imgExtensionList) && !oneOf(file.extension, VideoExtensionList)" | |||
class="defultImage-mid toumin" | |||
:class="`${file.extension}-mid ${!oneOf(file.extension,filePreviewList) ? '':''} ` " | |||
/> | |||
<!-- 图片文件图标 --> | |||
<div | |||
v-else-if="oneOf(file.extension, imgExtensionList)" | |||
class="defultImage-mid img_bg-mid toumin" | |||
> | |||
<div class="file_Im gbox-mid"> | |||
<img v-lazy="file.alias" alt class="file_Img" /> | |||
</div> | |||
</div> | |||
<!-- 视频文件图标 --> | |||
<div | |||
v-else | |||
class="defultImage-mid video-mid toumin" | |||
> | |||
</div> | |||
<!-- 右键菜单 --> | |||
<div class="contextmenu" v-show="true" | |||
> | |||
<ul class="rightMenu"> | |||
<li class="download" v-if="isClient" @click="clientDownLoad(file)">下载</li> | |||
<li class="putaway" @click="removeFile(file.id)">放回原处</li> | |||
<!-- <li class="delete">彻底删除</li> --> | |||
</ul> | |||
</div> | |||
<!-- 右上设置按钮 --> | |||
<!-- 下拉列表 --> | |||
<!-- <div class="top_optionBar" v-show="true"> | |||
<el-dropdown> | |||
<span class="el-dropdown-link"> | |||
<i | |||
class="icon iconfont icon_small-icon_small_wenjianshezhi settingIcon" | |||
/> | |||
</span> | |||
<el-dropdown-menu slot="dropdown"> | |||
<el-dropdown-item | |||
@click="fileClick(file)" | |||
> | |||
<span class="download">下载</span> | |||
</el-dropdown-item> | |||
<el-dropdown-item | |||
@click="removeFile(file.id)" | |||
> | |||
<span class="putaway">放回原处</span> | |||
</el-dropdown-item> | |||
<el-dropdown-item | |||
@click="fileClick(file)" | |||
> | |||
<span class="delete">彻底删除</span> | |||
</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</el-dropdown> | |||
</div> --> | |||
<!-- 文件名 --> | |||
<strong | |||
class="yiyunwenjian_name" | |||
:title="file.archName + '.' + file.extension" | |||
>{{ file.archName }}<span v-show="!oneOf(file.extension, RecExtensionList)">.{{file.extension}}</span></strong> | |||
<span | |||
class="yiyunwenjian_infodesc" | |||
>5天后删除</span> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { removeFromRecycleBin} from '../service'; | |||
import { getFileStoreKey} from '../helper'; | |||
import system from '@/services/system'; | |||
const imgExtensionList = ["jpg", "png", "bmp", "gif", "jpeg"]; | |||
const RecExtensionList = ["jpg", "png", "bmp", "gif", "jpeg", "txt", | |||
"zip", "ae", "ai", "idml","indd","mp3","pr", | |||
"ps","sketch","xmind","skp","rvt","rar","nwc", | |||
"max","dxf","dwg","svfzip","map","supermap","pdf", | |||
"ppt","pptx","excel","xlsx","xls","doc","docx", | |||
"word","folder","folder1","folder2" | |||
]; | |||
const VideoExtensionList = ["avi", "mov", "wav","mp4"]; | |||
const office =["doc","docx","ppt","pptx","xls","xlsx"]; | |||
const filePreviewList = ["jpg", "png", "bmp", "gif", "jpeg", | |||
"doc","docx","ppt","pptx","xls","xlsx", | |||
"avi", "mov", "wav","mp4","txt","pdf", | |||
"dwg" | |||
]; | |||
const oneOf = (target, list) => list.indexOf(target) !== -1 | |||
export default { | |||
props: { | |||
file: { | |||
type: Object, | |||
default: () => ({}), | |||
}, | |||
}, | |||
data(){ | |||
return{ | |||
imgExtensionList, | |||
RecExtensionList, | |||
VideoExtensionList, | |||
office, | |||
filePreviewList, | |||
isFileRightMenuVisible: false, | |||
isClient: system.isClient, | |||
} | |||
}, | |||
methods:{ | |||
oneOf, | |||
fileClick(){ | |||
console.log(12111) | |||
}, | |||
async removeFile(id){ | |||
console.log(1111) | |||
const res = await removeFromRecycleBin(id); | |||
if(res.Code !== -1){ | |||
this.$notify({ | |||
type:'success', | |||
message:"文件已放回原处。" | |||
}) | |||
} | |||
}, | |||
/** | |||
* 客户端下载方法 | |||
*/ | |||
clientDownLoad: function (file) { | |||
if(!this.isClient) return; | |||
// console.log('下载的文件对象', file); | |||
const { ipfsCid, archName: fileName, extension, folderId, nodeName, relativePath } = file; | |||
const folderMap = this.folderMap; | |||
// const { levelId } = folderMap[folderId] || {}; | |||
const nodeFolderName = nodeName || this.currentNodeFolder.folderName; | |||
const extensionedFileName = `${fileName}${extension ? `.${extension}`:''}`; | |||
const isCooperateFile = !!nodeName; | |||
const targetFolderName = `${nodeFolderName}${isCooperateFile ? '\\协作文件': ''}`; | |||
const dirName = `${targetFolderName}${relativePath ? `\\${relativePath}`:''}`.replace(/\//g, '\\'); | |||
// const fileStoreKey = `${targetFolderName}\\${extensionedFileName}`; | |||
const fileStoreKey = getFileStoreKey(file, this.currentNodeFolder); | |||
const errorHandler = () => { | |||
this.removeFileLoadingState(file.id); | |||
} | |||
//this.updateFileLoadState(file, DOWNLOADING, 0); | |||
system.downloadFile(ipfsCid, sessionStorage.projName, extensionedFileName, dirName, (resMessage, socketIns) => { | |||
//console.log('receive download file message:', resMessage, socketIns); | |||
// {"size":"11","currentSize":"11","unit":"B","process":100,"hash":""} | |||
try { | |||
const { process, hash } = JSON.parse(resMessage.data); | |||
//this.updateFileLoadState(file, DOWNLOADING, process); | |||
if(process !== 100) return; | |||
this.addLocalFileRecord(fileStoreKey, ipfsCid); | |||
this.removeFileLoadingState(file.id); | |||
this.$notify({ | |||
type:["success","download"], | |||
title:"文件已下载", | |||
message:`${fileName}` | |||
}) | |||
socketIns.close(); | |||
// this.$forceUpdate(); | |||
} catch (e) { | |||
console.error('socket-download-file parse data have error:', e); | |||
errorHandler(); | |||
socketIns.close(); | |||
} | |||
}, errorHandler); | |||
}, | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.download{ | |||
color:#8C00FF; | |||
} | |||
.putaway{ | |||
color:#888888; | |||
} | |||
.delete{ | |||
color: #D6243A; | |||
} | |||
</style> |
@@ -1,112 +0,0 @@ | |||
<template> | |||
<div> | |||
<div class="yiyun_wenjian_list loding-mask-parent"> | |||
<div> | |||
<!-- 非图片文件图标 --> | |||
<div | |||
v-if="!oneOf(file.extension, imgExtensionList) && !oneOf(file.extension, VideoExtensionList)" | |||
class="defultImage-mid toumin" | |||
:class="`${file.extension}-mid ${!oneOf(file.extension,filePreviewList) ? '':''} ` " | |||
/> | |||
<!-- 图片文件图标 --> | |||
<div | |||
v-else-if="oneOf(file.extension, imgExtensionList)" | |||
class="defultImage-mid img_bg-mid toumin" | |||
> | |||
<div class="file_Im gbox-mid"> | |||
<img v-lazy="file.alias" alt class="file_Img" /> | |||
</div> | |||
</div> | |||
<!-- 视频文件图标 --> | |||
<div | |||
v-else | |||
class="defultImage-mid video-mid toumin" | |||
> | |||
</div> | |||
<!-- 右键菜单 --> | |||
<div class="contextmenu" v-show="isFileRightMenuVisible" | |||
:style="{ top: fileRightMenuTop + 'px', left: fileRightMenuLeft + 'px'}" | |||
> | |||
<ul class="rightMenu fileRightMenu"> | |||
<li>下载</li> | |||
<li>放回原处</li> | |||
<li>彻底删除</li> | |||
</ul> | |||
</div> | |||
<!-- 右上设置按钮 --> | |||
<!-- 下拉列表 --> | |||
<!-- <div class="top_optionBar" v-show="false"> | |||
<el-dropdown> | |||
<span class="el-dropdown-link"> | |||
<i | |||
class="icon iconfont icon_small-icon_small_wenjianshezhi settingIcon" | |||
/> | |||
</span> | |||
<el-dropdown-menu slot="dropdown"> | |||
<el-dropdown-item | |||
@click.native="fileClick(file)" | |||
v-if=" | |||
isClient && | |||
fileInLocal | |||
" | |||
> | |||
<span>打开</span> | |||
</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</el-dropdown> | |||
</div> --> | |||
<!-- 文件名 --> | |||
<strong | |||
class="yiyunwenjian_name" | |||
:title="file.archName + '.' + file.extension" | |||
>{{ file.archName }}<span v-show="!oneOf(file.extension, RecExtensionList)">.{{file.extension}}</span></strong> | |||
<span | |||
class="yiyunwenjian_infodesc" | |||
>{{ file.createUserName }} 创建</span> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
const imgExtensionList = ["jpg", "png", "bmp", "gif", "jpeg"]; | |||
const RecExtensionList = ["jpg", "png", "bmp", "gif", "jpeg", "txt", | |||
"zip", "ae", "ai", "idml","indd","mp3","pr", | |||
"ps","sketch","xmind","skp","rvt","rar","nwc", | |||
"max","dxf","dwg","svfzip","map","supermap","pdf", | |||
"ppt","pptx","excel","xlsx","xls","doc","docx", | |||
"word","folder","folder1","folder2" | |||
]; | |||
const VideoExtensionList = ["avi", "mov", "wav","mp4"]; | |||
const office =["doc","docx","ppt","pptx","xls","xlsx"]; | |||
const filePreviewList = ["jpg", "png", "bmp", "gif", "jpeg", | |||
"doc","docx","ppt","pptx","xls","xlsx", | |||
"avi", "mov", "wav","mp4","txt","pdf", | |||
"dwg" | |||
]; | |||
const oneOf = (target, list) => list.indexOf(target) !== -1 | |||
export default { | |||
data(){ | |||
return{ | |||
imgExtensionList, | |||
RecExtensionList, | |||
VideoExtensionList, | |||
office, | |||
filePreviewList, | |||
} | |||
}, | |||
methods:{ | |||
oneOf, | |||
async getFilesList(){ | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
</style> |
@@ -0,0 +1,70 @@ | |||
<template> | |||
<div> | |||
<app-header | |||
theme="basis" | |||
showBackBtn | |||
backBtnTitle="返回上一界面" | |||
title="回收站" | |||
showUserCenter | |||
isInRecycle | |||
> | |||
</app-header> | |||
<div class="clearfile_box"> | |||
<div class="clearfile_content"> | |||
清空 | |||
</div> | |||
</div> | |||
<div class="recycle_content"> | |||
<recycle-file | |||
v-for="file in fileList" | |||
:key="file.id" | |||
:file="file" | |||
> | |||
</recycle-file> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import AppHeader from '../../../components/app-header/app-header.vue'; | |||
import recycleFile from './components/recycle-file.vue' | |||
import {queryFilesFromRecycleBin, removeFromRecycleBin} from './service' | |||
export default { | |||
components: { recycleFile, AppHeader }, | |||
created(){ | |||
this.getRecycleFiles(); | |||
}, | |||
mounted(){ | |||
}, | |||
data(){ | |||
return{ | |||
fileList:[], | |||
} | |||
}, | |||
methods:{ | |||
async getRecycleFiles(){ | |||
const res = await queryFilesFromRecycleBin(); | |||
this.fileList = res; | |||
}, | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.recycle_content{ | |||
padding: 0 64px; | |||
} | |||
.clearfile_content{ | |||
width: 64px; | |||
border: 0.5px solid rgba(209, 210, 211, 1); | |||
box-sizing: border-box; | |||
line-height: 32px; | |||
text-align: center; | |||
margin: 0 auto; | |||
margin-top: 16px; | |||
margin-bottom: 13px; | |||
cursor: pointer; | |||
} | |||
</style> |
@@ -25,6 +25,13 @@ export async function queryFilesFromRecycleBin() { | |||
}); | |||
return fileList; | |||
} | |||
/** | |||
* 文件放回原处 | |||
*/ | |||
export async function removeFromRecycleBin(id){ | |||
const res = await fetchApi('file/removeFromRecycleBin',{fileId:id}); | |||
return wrapErrorHint(res); | |||
} | |||
/** | |||
* 查询文件夹下边的文件(包含子文件夹以及协同文件) | |||
@@ -5950,6 +5950,7 @@ export default { | |||
* item:文件对象 | |||
*/ | |||
deleteFile: function (item) { | |||
console.log(111) | |||
var thisApp = this; | |||
this.$confirm("删除文件:" + item.objectName + ", 是否继续?", "提示", { | |||
confirmButtonText: "确定", | |||