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

perf: 优化ctrl/shift选中文件的操作

Browse Source
This commit is contained in:
jmal 2024-07-16 15:48:57 +08:00
parent 5a354dd18a
commit 496ceb1027
2 changed files with 151 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/SearchDialog/index.vue
View File

@ -1,7 +1,78 @@
<template> <template>
<div> <div>
<el-dialog style="{'font-weight': 600}" :visible.sync="searchDialogVisible" @close="searchDialogClose"> <el-dialog style="{'font-weight': 600}" :show-close="false" :visible.sync="searchDialogVisible" @close="searchDialogClose">
<div> <div class="search-container">
<div class="header column">
header
</div>
<div class="operation column">
operation
</div>
<div class="content column">
<div>
content1
</div>
<div>
content1
</div>
<div>
content1
</div>
<div>
content1
</div>
<div>
content1
</div>
<div>
content1
</div>
<div>
content1
</div>
<div>
content1
</div>
<div>
content1
</div>
<div>
content1
</div>
<div>
content1
</div>
<div>
content1
</div>
<div>
content1
</div>
<div>
content1
</div>
<div>
content1
</div>
<div>
content1
</div>
<div>
content1
</div><div>
content1
</div><div>
content1
</div>
<div>
content1
</div>
</div>
<div class="footer column">
footer
</div>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
@ -52,10 +123,24 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
>>> .el-dialog { >>> .el-dialog {
.el-dialog__body {
padding: 0;
}
.el-dialog__header {
display: none;
}
max-width: 460px; max-width: 460px;
.el-dialog__title { .el-dialog__title {
font-weight: 600; font-weight: 600;
} }
} }
.search-container {
display: flex;
flex-direction: column;
.column {
padding: 20px;
}
}
</style> </style>

139
src/components/ShowFile/ShowFile.vue
View File

@ -277,7 +277,7 @@
item.operation === 'unFavorite' || item.operation === 'favorite' item.operation === 'unFavorite' || item.operation === 'favorite'
" "
class="menu-option" class="menu-option"
@click="menusOperations(item.operation)" @click="menusOperations(item.operation, $event)"
@mouseover.prevent.stop=" @mouseover.prevent.stop="
menuFavoriteOver(index, rowContextData.isFavorite) menuFavoriteOver(index, rowContextData.isFavorite)
" "
@ -290,7 +290,7 @@
<span class="menuitem text">{{ item.label }}</span> <span class="menuitem text">{{ item.label }}</span>
</label> </label>
</li> </li>
<li v-else @click="menusOperations(item.operation)"> <li v-else @click="menusOperations(item.operation, $event)">
<label class="menuitem"> <label class="menuitem">
<svg-icon :icon-class="item.iconClass" /> <svg-icon :icon-class="item.iconClass" />
<span class="menuitem text">{{ item.label }}</span> <span class="menuitem text">{{ item.label }}</span>
@ -334,7 +334,6 @@
@row-dblclick="dblclick" @row-dblclick="dblclick"
@sort-change="sortChange" @sort-change="sortChange"
@table-body-scroll="tableBodyScroll" @table-body-scroll="tableBodyScroll"
@select="pinSelect"
> >
<template v-for="(item, index) in tableHead"> <template v-for="(item, index) in tableHead">
<pl-table-column <pl-table-column
@ -511,8 +510,8 @@
? 'solid 1px #409eff' ? 'solid 1px #409eff'
: '', : '',
}" }"
@click="gridItemClick(item)" @click="gridItemClick(item, $event)"
@dblclick="fileClick(item)" @dblclick="fileClick(item, $event)"
@contextmenu.prevent="rowContextmenu(item)" @contextmenu.prevent="rowContextmenu(item)"
> >
<div <div
@ -1068,11 +1067,9 @@ export default {
drawerShowTime: 0, // drawer显示的时间 drawerShowTime: 0, // drawer显示的时间
rowStyleExecuting: false, rowStyleExecuting: false,
selectRowData: [], selectRowData: [],
selectOrgin: -1, // 选择起点(主要用于按住shift键多选) selectOrigin: -1, // 选择起点(主要用于按住shift键多选)
selectEnd: -1, // 选择终点 selectEnd: -1, // 选择终点
selectPin: false, // 默认false,不按住
inputting: false, // 是否正在输入 inputting: false, // 是否正在输入
isCmd: false, // 是否按住了command(control)键
dragElementList: [], dragElementList: [],
drawFlag: false, drawFlag: false,
fileListScrollTop: 0, fileListScrollTop: 0,
@ -1344,14 +1341,15 @@ export default {
return suffix ? chineseLength + suffix.length + 1 : chineseLength return suffix ? chineseLength + suffix.length + 1 : chineseLength
}, },
keydown(event) { checkCmdKey(event) {
const isMac = navigator.platform.startsWith('Mac') const isMac = navigator.platform.startsWith('Mac')
const { keyCode, ctrlKey, metaKey } = event const { ctrlKey, metaKey } = event
this.isCmd = (isMac && metaKey) || (!isMac && ctrlKey) return (isMac && metaKey) || (!isMac && ctrlKey)
// shift },
if (event.keyCode === 16 && event.shiftKey) { keydown(event) {
this.selectPin = true const { keyCode } = event
} const isCmd = this.checkCmdKey(event)
console.log('keydown', 'keyCode', keyCode, 'isCmd', isCmd)
// space // space
if (keyCode === 32) { if (keyCode === 32) {
if (!this.inputting && this.selectRowData.length > 0 && !this.drawer) { if (!this.inputting && this.selectRowData.length > 0 && !this.drawer) {
@ -1370,8 +1368,16 @@ export default {
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
} }
// Del
if (keyCode === 8) {
if (!this.inputting && this.selectRowData.length > 0) {
this.removeOperation()
event.preventDefault()
event.stopPropagation()
}
}
// ctrl + A / cmd + A // ctrl + A / cmd + A
if (this.isCmd && keyCode === 65) { if (isCmd && keyCode === 65) {
if (this.inputting || this.editingIndex !== -1) { if (this.inputting || this.editingIndex !== -1) {
event.target.select() event.target.select()
} else { } else {
@ -1385,22 +1391,16 @@ export default {
} }
} }
// ctrl + P / cmd + P // ctrl + P / cmd + P
if (this.isCmd && keyCode === 80) { // if (isCmd && keyCode === 80) {
if (!this.inputting && this.editingIndex === -1) { // if (!this.inputting && this.editingIndex === -1) {
this.searchDialogVisible = true // this.searchDialogVisible = true
event.preventDefault() // event.preventDefault()
event.stopPropagation() // event.stopPropagation()
} // }
} // }
}, },
keyup(event) { keyup(event) {
const isMac = navigator.platform.startsWith('Mac') const { keyCode } = event
const { keyCode, ctrlKey, metaKey } = event
this.isCmd = (isMac && metaKey) || (!isMac && ctrlKey)
// 松开shift键
if (keyCode === 16) {
this.selectPin = false
}
// space // space
if (keyCode === 32) { if (keyCode === 32) {
if (this.drawer && Date.now() - this.drawerShowTime >= 500) { if (this.drawer && Date.now() - this.drawerShowTime >= 500) {
@ -1459,16 +1459,16 @@ export default {
this.onCreateFilename = '' this.onCreateFilename = ''
}, 2000) }, 2000)
}, },
gridItemClick(row) { gridItemClick(row, event) {
if (this.selectFile) { if (this.selectFile) {
this.fileClick(row) this.fileClick(row, event)
} }
if (this.isCmd) { if (this.checkCmdKey(event)) {
this.pinSelect(null, row) this.pinSelect(row, event)
this.$refs.fileListTable.toggleRowSelection([{ row: row }]) this.$refs.fileListTable.toggleRowSelection([{ row: row }])
return return
} }
this.pinSelect(null, row) this.pinSelect(row, event)
}, },
containerResize() { containerResize() {
const container = document.querySelector('.dashboard-container') const container = document.querySelector('.dashboard-container')
@ -1564,7 +1564,7 @@ export default {
!_this.selectRowData.includes(_this.fileList[throughRow.rowIndex]) !_this.selectRowData.includes(_this.fileList[throughRow.rowIndex])
) { ) {
_this.editingIndex = -1 _this.editingIndex = -1
if (!_this.isCmd && !_this.selectPin) { if (!_this.checkCmdKey(e) && !e.shiftKey) {
_this.$refs.fileListTable.clearSelection() _this.$refs.fileListTable.clearSelection()
_this.$refs.fileListTable.toggleRowSelection([ _this.$refs.fileListTable.toggleRowSelection([
{ row: _this.fileList[throughRow.rowIndex], selected: true }, { row: _this.fileList[throughRow.rowIndex], selected: true },
@ -1578,7 +1578,7 @@ export default {
if (evt.button !== 0) { if (evt.button !== 0) {
return return
} }
if (!_this.isCmd && !_this.selectPin) { if (!_this.checkCmdKey(e) && !e.shiftKey) {
const index = elPath.findIndex( const index = elPath.findIndex(
el => el =>
el.className === itemClassName || el.className === itemClassName ||
@ -1918,7 +1918,7 @@ export default {
return false return false
} }
// 正在选区获取按住关键键时禁止拖拽 // 正在选区获取按住关键键时禁止拖拽
if (_this.drawFlag || _this.isCmd || _this.selectPin) { if (_this.drawFlag || _this.checkCmdKey(e) || e.shiftKey) {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
return return
@ -2913,18 +2913,18 @@ export default {
// // 画矩形选取 // // 画矩形选取
// this.darwRectangle() // this.darwRectangle()
}, },
pinSelect(rows, row) { pinSelect(row, event) {
if (this.selectPin && this.selectOrgin > -1) { if (event.shiftKey && this.selectOrigin > -1) {
const orgin = this.selectOrgin const origin = this.selectOrigin
this.selectEnd = row.index this.selectEnd = row.index
let diff = this.selectEnd - orgin let diff = this.selectEnd - origin
// 先清除选中 // 先清除选中
this.$refs.fileListTable.clearSelection() this.$refs.fileListTable.clearSelection()
if (diff === 0) { if (diff === 0) {
this.selectOrgin = -1 this.selectOrigin = -1
} }
if (diff > 0) { if (diff > 0) {
for (let i = orgin; i <= this.selectEnd; i++) { for (let i = origin; i <= this.selectEnd; i++) {
this.$refs.fileListTable.toggleRowSelection([ this.$refs.fileListTable.toggleRowSelection([
{ row: this.fileList[i], selected: true }, { row: this.fileList[i], selected: true },
]) ])
@ -2932,7 +2932,7 @@ export default {
} }
} }
if (diff < 0) { if (diff < 0) {
for (let i = this.selectEnd; i <= orgin; i++) { for (let i = this.selectEnd; i <= origin; i++) {
this.$refs.fileListTable.toggleRowSelection([ this.$refs.fileListTable.toggleRowSelection([
{ row: this.fileList[i], selected: true }, { row: this.fileList[i], selected: true },
]) ])
@ -3019,26 +3019,11 @@ export default {
} }
return sizeSum return sizeSum
}, },
selectAll(checked) {
this.isSelectAll = checked
if (checked) {
this.fileList.forEach(row => {
this.selectRowData.push(row)
})
} else {
this.isIndeterminate = false
}
},
// 收集选中的index值作为数组 传递给rowRed判断变换样式 // 收集选中的index值作为数组 传递给rowRed判断变换样式
handleSelectionChange(rows) { handleSelectionChange(rows) {
// 起点 // 起点
if (rows.length > 0) { if (rows.length > 0) {
if (!this.selectPin) { this.selectOrigin = rows[0].index
this.selectOrgin = rows[0].index
}
if (this.selectPin) {
return
}
this.rowContextData = rows[0] this.rowContextData = rows[0]
} }
this.$refs.fileListTable.tableSelectData = rows this.$refs.fileListTable.tableSelectData = rows
@ -3121,13 +3106,14 @@ export default {
this.highlightFavorite(isFavorite, false) this.highlightFavorite(isFavorite, false)
}, },
//双击 //双击
dblclick(row) { dblclick(row, column, cell, event) {
this.fileClick(row) this.fileClick(row, event)
}, },
// 单元格点击事件 // 单元格点击事件
cellClick(row, column) { cellClick(row, column, cell, event) {
console.log('cellClick', row, column, cell, event)
if (this.selectFile) { if (this.selectFile) {
this.fileClick(row) this.fileClick(row, event)
return return
} }
clearTimeout(this.Loop) clearTimeout(this.Loop)
@ -3140,12 +3126,12 @@ export default {
} }
} }
} }
if (this.isCmd) { if (this.checkCmdKey(event)) {
this.pinSelect(null, row) this.pinSelect(row, event)
this.$refs.fileListTable.toggleRowSelection([{ row: row }]) this.$refs.fileListTable.toggleRowSelection([{ row: row }])
return return
} }
this.pinSelect(null, row) this.pinSelect(row, event)
} }
}, },
// 选取输入框部分内容 // 选取输入框部分内容
@ -3500,7 +3486,7 @@ export default {
}) })
}, },
// 列表右键菜单操作 // 列表右键菜单操作
menusOperations(operation) { menusOperations(operation, event) {
switch (operation) { switch (operation) {
case 'share': case 'share':
// 分配标签 // 分配标签
@ -3525,7 +3511,7 @@ export default {
break break
case 'open': case 'open':
// 打开 // 打开
this.fileClick(this.rowContextData) this.fileClick(this.rowContextData, event)
break break
case 'deselect': case 'deselect':
// 取消选定 // 取消选定
@ -3561,9 +3547,7 @@ export default {
break break
case 'remove': case 'remove':
// 删除 // 删除
this.permanentDelete = false this.removeOperation()
this.selectDeleteFile = this.getSelectDeleteList()
this.deleteConfirmVisible = true
break break
case 'sweep': case 'sweep':
// 清空回收站 // 清空回收站
@ -3579,6 +3563,11 @@ export default {
clearTreeNode() { clearTreeNode() {
// 清空文件树 // 清空文件树
}, },
removeOperation() {
this.permanentDelete = false
this.selectDeleteFile = this.getSelectDeleteList()
this.deleteConfirmVisible = true
},
// 加载下一级文件树 // 加载下一级文件树
directoryTreeLoadNode(node, resolve) { directoryTreeLoadNode(node, resolve) {
let fileId = null let fileId = null
@ -4122,7 +4111,7 @@ export default {
}) })
}, },
// 点击文件或文件夹 // 点击文件或文件夹
fileClick(row) { fileClick(row, event) {
if (this.queryFileType === 'trash') { if (this.queryFileType === 'trash') {
return return
} }
@ -4190,7 +4179,7 @@ export default {
if (selectData.length < 1 || selectData[0].id !== row.id) { if (selectData.length < 1 || selectData[0].id !== row.id) {
this.$refs.fileListTable.clearSelection() this.$refs.fileListTable.clearSelection()
this.$refs.fileListTable.toggleRowSelection([{ row: row }]) this.$refs.fileListTable.toggleRowSelection([{ row: row }])
this.pinSelect(null, row) this.pinSelect(row, event)
} else { } else {
this.$refs.fileListTable.clearSelection() this.$refs.fileListTable.clearSelection()
selectFile = {} selectFile = {}