From 505f19def11a8c8489e0dba9a0633d919a0f9f34 Mon Sep 17 00:00:00 2001 From: jmal Date: Thu, 9 Jul 2020 22:56:21 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=87=8D=E5=91=BD=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FancyTree/index.vue | 67 ++++++++++++++--- src/components/ShowFile/ShowFile.vue | 92 ++++++++++++++--------- src/components/preview/SimTextPreview.vue | 1 - 3 files changed, 113 insertions(+), 47 deletions(-) diff --git a/src/components/FancyTree/index.vue b/src/components/FancyTree/index.vue index 3c8eb98..ddb1c57 100644 --- a/src/components/FancyTree/index.vue +++ b/src/components/FancyTree/index.vue @@ -1,5 +1,11 @@ @@ -57,8 +57,13 @@ { iconClass: 'menu-remove', label: '删除', operation: 'remove' } ], fileMenus: [ + { iconClass: 'menu-rename', label: '重命名', operation: 'rename' }, { iconClass: 'menu-remove', label: '删除', operation: 'remove' } - ] + ], + newFileMenus: [ + { iconClass: 'add-file', label: '新建文件', operation: 'addFile' }, + { iconClass: 'folder-add', label: '新建目录', operation: 'addFolder' } + ], } }, watch: { @@ -84,7 +89,6 @@ let evObj = document.createEvent('MouseEvents'); evObj.initMouseEvent('click',true,true,window,1,12,345,7,220,false,false,true,false,0,null); vnode.dispatchEvent(evObj); - if(this.contextData.isFolder){ this.menus = this.folderMenus }else{ @@ -102,6 +106,10 @@ console.log('remove',this.contextData) this.delFile(this.contextData) break + case 'rename': + console.log('rename',this.contextData) + this.tree.getActiveNode().editStart() + break default: console.log('default',this.contextData) break @@ -109,7 +117,8 @@ }, // 删除文件/文件夹 delFile(data){ - this.$confirm('此操作将永久删除' + data.name + ', 是否继续?', '提示', { + this.$confirm('此操作将永久删除' + data.name + '，' + + '\n 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' @@ -197,6 +206,7 @@ }) }, initTree(treeData){ + const that = this this.tree = fancytree.createTree('#dir-tree', { extensions: ["edit"], icon: (event,data)=> this.icon(event,data), @@ -230,7 +240,8 @@ } }, save: function(event, data){ - console.log(event.type, data); + console.log(event.type, data , data.input.val()); + that.nodeRename(data.input.val(), data.node.data, data.node) // Save data.input.val() or return false to keep editor open // Simulate to start a slow ajax request... // setTimeout(function(){ @@ -256,6 +267,42 @@ }); console.log(this.tree.getActiveNode(),fancytree._extensions) }, + // 重命名 + nodeRename(newFileName, row, node) { + if (newFileName) { + if(/[\/\\"<>\?\*]/gi.test(newFileName)){ + this.$message({ + message: '文件名不能包含以下字字符:<,>,|,*,?,,/', + type: 'warning' + }); + return; + } + let strFileName = newFileName.replace(/(.*\/)*([^.]+).*/ig,"$2"); + let newExt = newFileName.replace(/.+\./,""); + if (!row.isFolder) { + if (row.suffix !== newExt) { + this.$confirm(`您确定要将扩展名“.${row.suffix}”更改为“.${newExt}”吗？`,'提示',{ + type: 'warning', + confirmButtonText: `保持.${row.suffix}`, + cancelButtonText: `使用.${newExt}`, + }).then(()=>{ + newFileName = strFileName + '.' + row.suffix + }).catch(()=>{ + }).then(()=>{ + this.rename(row,newFileName,node) + }) + }else{ + this.rename(row,newFileName,node) + } + }else{ + this.rename(row,newFileName,node) + } + } + }, + rename(row,newFileName,node){ + // 重命名 + node.setTitle(newFileName); + }, icon(event,data) { return { html: this.loadSvg(this.findIconClass(data.node.data)) } }, diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue index 5770cd1..e4a424c 100644 --- a/src/components/ShowFile/ShowFile.vue +++ b/src/components/ShowFile/ShowFile.vue @@ -1852,49 +1852,69 @@ }); return; } + let strFileName = newFileName.replace(/(.*\/)*([^.]+).*/ig,"$2"); + let newExt = newFileName.replace(/.+\./,""); if (!row.isFolder) { - const ext = '.' + row.suffix - if (!newFileName.endsWith(ext)) { - newFileName += ext + if (row.suffix !== newExt) { + this.$confirm(`您确定要将扩展名“.${row.suffix}”更改为“.${newExt}”吗？`,'提示',{ + type: 'warning', + confirmButtonText: `保持.${row.suffix}`, + cancelButtonText: `使用.${newExt}`, + }).then(()=>{ + newFileName = strFileName + '.' + row.suffix + }).catch(()=>{ + }).then(()=>{ + this.rename(row,newFileName) + }) + }else{ + this.rename(row,newFileName) } + }else{ + this.rename(row,newFileName) } - this.renameLoading = true - const findIndex = this.fileList.findIndex(item => { - if(newFileName === item.name){ - return item; - } - }) - if(findIndex > -1){ - let msg = '该文件已存在' - if(row.isFolder){ - msg = '该文件夹已存在' - } - this.$message({ - message: msg, - type: 'warning' - }); - this.renameLoading = false - return - } - - api.rename({ - newFileName: newFileName, - username: this.$store.state.user.name, - id: row.id - }).then(res => { - if (res.data) { - this.renameLoading = false - row.name = newFileName - this.fileList[row.index] = row - this.editingIndex = -1 - } - }).then(()=>{ - this.$refs.fileListTable.clearSelection() - }) } else { this.editingIndex = -1 } }, + rename(row,newFileName){ + if(row.name === newFileName){ + this.editingIndex = -1 + return + } + this.renameLoading = true + const findIndex = this.fileList.findIndex(item => { + if(newFileName === item.name){ + return item + } + }) + if(findIndex > -1){ + let msg = '该文件已存在' + if(row.isFolder){ + msg = '该文件夹已存在' + } + this.$message({ + message: msg, + type: 'warning' + }); + this.renameLoading = false + return + } + api.rename({ + newFileName: newFileName, + username: this.$store.state.user.name, + id: row.id + }).then(res => { + if (res.data) { + this.renameLoading = false + row.name = newFileName + row.suffix = newFileName.replace(/.+\./,"") + this.fileList[row.index] = row + this.editingIndex = -1 + } + }).then(()=>{ + this.$refs.fileListTable.clearSelection() + }) + }, // 更多操作(多选) moreOperation(event) { this.menusIsMultiple = true diff --git a/src/components/preview/SimTextPreview.vue b/src/components/preview/SimTextPreview.vue index aaed6c3..dc93c14 100644 --- a/src/components/preview/SimTextPreview.vue +++ b/src/components/preview/SimTextPreview.vue @@ -743,7 +743,6 @@ .dir-tools { background: #ececec; - border-right: 5px solid #fff; .el-button--small { padding: 9px 10px; }