lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Share interface to add a mount operation

Browse Source
This commit is contained in:
jmal 2023-08-05 18:27:26 +08:00
parent 12622418f7
commit dd93d0189f
2 changed files with 302 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

389
src/components/FileTree/index.vue
View File

@ -3,7 +3,7 @@
<el-tree
ref="fileTree"
:data="directoryTreeData"
:node-key="localFileMode?'path':'id'"
:node-key="localFileMode ? 'path' : 'id'"
:props="directoryTreeProps"
:load="localFileMode ? loadOfLocalFileMode : directoryTreeLoadNode"
:highlight-current="true"
@ -19,182 +19,257 @@
</template>
<script>
import api from '@/api/file-api'
import IconFile from "@/components/Icon/IconFile"
import SimTextPreview from "@/components/preview/SimTextPreview"
import { iconClass,suffix } from '@/utils/file-type'
export default {
name: "FileTree",
components: {IconFile,SimTextPreview},
props: {
directoryTreeData: {
type: Array,
default: () => []
},
localFileMode: { //本地文件模式, true:通过文件路径加载, false: 通用文件Id加载
type: Boolean,
default: true
},
tempDir: {
type: Boolean,
default: false
}
import api from "@/api/file-api";
import IconFile from "@/components/Icon/IconFile";
import SimTextPreview from "@/components/preview/SimTextPreview";
import { iconClass } from "@/utils/file-type";
export default {
name: "FileTree",
components: { IconFile, SimTextPreview },
props: {
directoryTreeData: {
type: Array,
default: () => []
},
data() {
return {
directoryTreeProps: {
label: 'name',
children: 'children',
isLeaf: 'isLeaf'
}
}
localFileMode: {
//本地文件模式, true:通过文件路径加载, false: 通用文件Id加载
type: Boolean,
default: true
},
computed: {
// 默认展开项
defaultExpandedKeys() {
if(!this.localFileMode){
return ['0']
}else{
let keys = []
this.directoryTreeData.forEach(file => {
if(!file.isLeaf){
if(keys.length < 1){
keys.push(file.path)
}
tempDir: {
type: Boolean,
default: false
},
showFooter: {
type: Boolean,
default: false
}
},
data() {
return {
directoryTreeProps: {
label: "name",
children: "children",
isLeaf: "isLeaf"
}
};
},
created() {
},
computed: {
// 默认展开项
defaultExpandedKeys() {
if (!this.localFileMode) {
return ["0"];
} else {
let keys = [];
this.directoryTreeData.forEach(file => {
if (!file.isLeaf) {
if (keys.length < 1) {
keys.push(file.path);
}
})
return keys
}
});
return keys;
}
}
},
methods: {
// 文件树里新建文件夹
fileTreeAndNewFolder(selectTreeNode) {
let newNodeId = "newFolderNodeKey";
let node = this.$refs.fileTree.getNode(newNodeId);
if (node !== null) {
this.$refs.fileTree.remove(node);
}
let childNodes = this.$refs.fileTree.store.currentNode.childNodes;
let newFolderName = this.getNewFileName(childNodes, "新建文件夹");
let newNode = {
id: newNodeId,
newFolder: true,
name: newFolderName,
showName: newFolderName,
isLeaf: true
};
this.$refs.fileTree.append(newNode, selectTreeNode);
setTimeout(function() {
let treeInput = document.getElementById("treeInput");
if (treeInput) {
treeInput.value = newFolderName;
treeInput.focus();
treeInput.select();
}
},
}, 100);
},
methods: {
// 加载下一级文件树 localFileMode = true
loadOfLocalFileMode(node, resolve) {
if (node.level === 0) {
return resolve(this.directoryTreeData)
getNewFileName(fileList, newFileName) {
let append = 0;
let filenameList = [];
fileList.forEach(file => {
let fileName = file.name || file.label;
filenameList.push(fileName);
});
const newName = newFileName;
while (filenameList.includes(newFileName)) {
append += 1;
if (newName.indexOf(".") > 0) {
const name = newName.substring(0, newName.lastIndexOf("."));
const suffix = newName.substring(newName.lastIndexOf("."));
newFileName = `${name}${append}${suffix}`;
} else {
newFileName = `${newName}${append}`;
}
if (node.level > 0){
api.listfiles({
}
return newFileName;
},
// 加载下一级文件树 localFileMode = true
loadOfLocalFileMode(node, resolve) {
if (node.level === 0) {
return resolve(this.directoryTreeData);
}
if (node.level > 0) {
api
.listfiles({
username: this.$store.state.user.name,
path: encodeURI(node.data.path),
tempDir: this.tempDir
}).then(res => {
const nextNodes = res.data.map(data => {
data.isLeaf = !data.isFolder
return data
})
return resolve(nextNodes)
})
}
},
// 加载下一级文件树 localFileMode = false
directoryTreeLoadNode(node, resolve) {
let fileId = null
if (node.level === 0) {
let data = [{'id':"0",'name':'全部文件'}]
const that = this
setTimeout(function () {
that.$refs.fileTree.setCurrentKey('0')
that.$emit('treeNodeClick',data[0])
},0)
return resolve(data)
}
if (node.level > 1){
fileId = node.data.id
}
api.queryFileTree({
.then(res => {
const nextNodes = res.data.map(data => {
data.isLeaf = !data.isFolder;
return data;
});
return resolve(nextNodes);
});
}
},
// 加载下一级文件树 localFileMode = false
directoryTreeLoadNode(node, resolve) {
let fileId = null;
if (node.level === 0) {
let data = [{ id: "0", name: "全部文件" }];
const that = this;
setTimeout(function() {
that.$refs.fileTree.setCurrentKey("0");
that.$emit("treeNodeClick", data[0]);
}, 0);
return resolve(data);
}
if (node.level > 1) {
fileId = node.data.id;
}
api.queryFileTree({
userId: this.$store.state.user.userId,
username: this.$store.state.user.name,
fileId: fileId,
fileId: fileId
}).then(res => {
const nextNodes = res.data
return resolve(nextNodes)
})
},
// 点击文件树
treeNodeClick(row) {
this.$emit('treeNodeClick',row)
},
// 节点被展开时触发
treeNodeExpand(row,node,event) {
},
renderContent(h, { node, data, store }) {
if(data.newFolder){
return (
<span class="custom-tree-node">
<span><svg-icon icon-class="folder" /></span>
const nextNodes = res.data;
return resolve(nextNodes);
});
},
// 点击文件树
treeNodeClick(row) {
this.$emit("treeNodeClick", row);
},
// 节点被展开时触发
treeNodeExpand(row, node, event) {},
renderContent(h, { node, data, store }) {
if (data.newFolder) {
return (
<span class="custom-tree-node">
<span>
<div class="el-input el-input--mini el-input-tree">
<input type="text" autocomplete="on" value="新建文件夹" id="treeInput" class="el-input__inner"></input>
</div>
<button type="button" on-click={() => {
let path = '/'
let parentData = node.parent.data
if(parentData.path){
path = parentData.path + parentData.name + path
}
api.newFolder({
isFolder: true,
filename: encodeURI(data.name),
currentDirectory: encodeURI(path),
username: this.$store.state.user.name,
userId: this.$store.state.user.userId
}).then((res) => {
data.newFolder = false
data.id = res.data
}).catch(() => {
window.event.preventDefault()
window.event.stopPropagation()
})
}}
class="el-button el-icon-check el-button--mini el-input-tree-button" element-loading-spinner="el-icon-loading" element-loading-background="#f6f7fa88"></button>
<button type="button" on-click={() => {
this.$refs.fileTree.remove(node)
window.event.preventDefault()
window.event.stopPropagation()
}}
class="el-button el-icon-close el-button--mini el-input-tree-button" element-loading-spinner="el-icon-loading" element-loading-background="#f6f7fa88"></button>
<svg-icon icon-class="folder" />
</span>
</span>);
}
if(node.expanded){
return (
<span class="custom-tree-node">
<span>
<div class="el-input el-input--mini el-input-tree">
<input
type="text"
autocomplete="on"
value="新建文件夹"
id="treeInput"
class="el-input__inner"
/>
</div>
<button type="button" on-click={() => {
let path = '/'
let parentData = node.parent.data
if (parentData.path) {
path = parentData.path + parentData.name + path
}
let newFolderName = document.getElementById("treeInput").value
api.newFolder({
isFolder: true,
filename: encodeURI(newFolderName),
currentDirectory: encodeURI(path),
username: this.$store.state.user.name,
userId: this.$store.state.user.userId
}).then((res) => {
data.newFolder = false
data.isFolder = true
data.name = newFolderName
data.id = res.data
}).catch(() => {
window.event.preventDefault()
window.event.stopPropagation()
})
}}
class="el-button el-icon-check el-button--mini el-input-tree-button"
element-loading-spinner="el-icon-loading"
element-loading-background="#f6f7fa88"
/>
<button
type="button"
on-click={() => {
this.$refs.fileTree.remove(node);
window.event.preventDefault();
window.event.stopPropagation();
}}
class="el-button el-icon-close el-button--mini el-input-tree-button"
element-loading-spinner="el-icon-loading"
element-loading-background="#f6f7fa88"
/>
</span>
</span>
);
}
if (node.expanded) {
return (
<span class="custom-tree-node">
<svg-icon icon-class="open-folder" />
<span style="margin-left: 5px;">{node.label}</span>
<span>
</span>
</span>);
}else{
let iconClass = this.findIconClass(node.data)
if(!this.localFileMode && node.data.id === '0'){
iconClass = 'folder'
}
return (
<span class="custom-tree-node">
<svg-icon icon-class={iconClass}/>
<span />
</span>
);
} else {
let iconClass = this.findIconClass(node.data);
if (!this.localFileMode && node.data.id === "0") {
iconClass = "folder";
}
return (
<span class="custom-tree-node">
<svg-icon icon-class={iconClass} />
<span style="margin-left: 5px;">{node.label}</span>
<span>
</span>
</span>);
}
},
findIconClass(file){
if(file.isFolder){
return 'folder'
}
let suffix = file.suffix;
if(!suffix && file.name){
suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
}
if(iconClass.has(suffix)){
return iconClass.get(suffix)
}
return 'file'
<span />
</span>
);
}
},
findIconClass(file) {
if (file.isFolder) {
return "folder";
}
let suffix = file.suffix;
if (!suffix && file.name) {
suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
}
if (iconClass.has(suffix)) {
return iconClass.get(suffix);
}
return "file";
}
}
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

76
src/views/public/share/shareList.vue
View File

@ -10,7 +10,8 @@
<span>{{ netdiskName }}</span>
</div>
<div class="share-header-content sharer" v-if="sharer">
<span><span class="user">{{ sharer.showName }}</span>的分享</span>
<el-button v-if="loginTitle.length > 0" type="primary" size="small" @click="loginOrMount"> {{ loginTitle }} </el-button>
<span class="user">{{ sharer.showName }}的分享</span>
<el-avatar :src="sharerAvatarUrl"></el-avatar>
</div>
</div>
@ -35,6 +36,15 @@
</div>
</el-breadcrumb>
</div>
<el-dialog :title="'挂载到：' + selectTreeNode.showName" :visible.sync="mountToVisible">
<file-tree v-if="mountToVisible" :localFileMode="false" ref="fileTreeMount" @treeNodeClick="onTreeNodeClick"></file-tree>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="fileTreeAndNewFolder" :disabled="fileTreeAndNewFolderDisabled"><i class="el-icon-folder-add"></i>&nbsp;&nbsp;新建文件夹</el-button>
<el-button size="small" type="primary">挂载</el-button>
</div>
</el-dialog>
<!--右键菜单-->
<e-vue-contextmenu ref="contextShow" class="newFileMenu" :class="menuTriangle" @ctx-show="show" @ctx-hide="hide">
<div class="popper-arrow"></div>
@ -284,9 +294,11 @@ import Clipboard from "clipboard";
import OfficePreview from "@/components/preview/OfficePreview";
import Logo from "@/components/Logo";
import store from "@/store";
import FileTree from "@/components/FileTree";
export default {
components: {
FileTree,
Logo,
OfficePreview, IconFile, BreadcrumbFilePath, AlLoading,
AudioPreview, VideoPreview, ImageViewer, SimTextPreview
@ -368,6 +380,7 @@ export default {
dialogMoveOrCopyVisible: false,
directoryTreeData: [],
selectTreeNode: {},
fileTreeAndNewFolderDisabled: false,
directoryTreeProps: {
label: 'name',
children: 'children',
@ -404,13 +417,16 @@ export default {
audioPreviewVisible: false,
showUpdateDateItem: this.$pc,// 列表模式下是否显示修改时间
showSizeItem: this.$pc,// 列表模式下是否显示文件大小
sharer: undefined,//分享者信息
sharer: undefined,//分享者信息,
loginTitle: '',
sharerAvatarUrl: '',
netdiskName: 'JmalCloud',
netdiskLogo: '',
showShareCode: false,
shareData: {},
extractionCode: ''
extractionCode: '',
mountToVisible: false,
mountFileData: [],
}
},
computed: {
@ -674,6 +690,7 @@ export default {
getSharer() {
api.getSharer({shareId: this.shareId}).then(res => {
this.sharer = res.data
this.setLoginTitle()
if (res.data) {
this.sharerAvatarUrl = window.location.origin + this.imageUrl + res.data.avatar
if (this.sharer.netdiskName) {
@ -689,6 +706,17 @@ export default {
}
})
},
setLoginTitle() {
if (this.$store.getters.token) {
if (this.sharer.userId === this.$store.getters.userId) {
this.loginTitle = ''
} else {
this.loginTitle = '挂载到我的云盘'
}
} else {
this.loginTitle = '登录'
}
},
currentChange(pageIndex) {
this.pagination.pageIndex = pageIndex
if (this.pagination.fileId) {
@ -934,6 +962,31 @@ export default {
}
this.$refs.contextShow.hideMenu()
},
/**
* 登录或挂载
*/
loginOrMount() {
if (this.$store.getters.token) {
// 挂载
this.mountToVisible = true
const that = this
// setTimeout(function () {
// that.selectTreeNode = that.$refs.directoryTree.getCurrentNode()
// that.selectTreeNode.showName = ' "' + that.selectTreeNode.name + '"'
// }, 100)
} else {
// 登录
this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
}
},
fileTreeAndNewFolder() {
this.$refs.fileTreeMount.fileTreeAndNewFolder(this.selectTreeNode)
},
onTreeNodeClick(row) {
this.fileTreeAndNewFolderDisabled = row.hasOwnProperty('newFolder');
this.selectTreeNode = row
this.selectTreeNode.showName = ' "' + row.name + '"'
},
downloadFile(copy) {
let totalSize = 0
if (this.indexList.length > 0) {
@ -1085,8 +1138,12 @@ export default {
text-align: center;
font-size: 18px;
font-weight: 500;
margin-top: 20px;
height: 45px;
margin-bottom: 10px;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: space-between;
.logo {
font-size: 20px;
@ -1109,7 +1166,6 @@ export default {
font-size: 14px;
float: right;
top: 10px;
margin-top: -34px;
> > > .el-avatar {
margin: 0 0 0 10px;
@ -1211,5 +1267,13 @@ export default {
margin-top: 10px;
}
>>> .el-input-tree {
width: 50% !important;
}
>>> .el-input-tree-button {
margin-left: 5px !important;
}
</style>