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

fix(file management): 修复输入框无法ctrl+A全选的问题

Browse Source
This commit is contained in:
jmal 2021-06-03 17:55:37 +08:00
parent 7f29ea6dd3
commit 577bdd1fbd
2 changed files with 208 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -45,7 +45,7 @@
"stompjs": "^2.3.3", "stompjs": "^2.3.3",
"v-contextmenu": "^2.9.0", "v-contextmenu": "^2.9.0",
"v-viewer": "^1.5.1", "v-viewer": "^1.5.1",
"vditor": "^3.6.1", "vditor": "^3.8.3",
"vue-aplayer": "^1.6.1", "vue-aplayer": "^1.6.1",
"vue-runtime-helpers": "^1.1.2", "vue-runtime-helpers": "^1.1.2",
"vue-simple-uploader": "^0.7.4", "vue-simple-uploader": "^0.7.4",

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

@ -80,7 +80,7 @@
</li> </li>
<div v-show="showNewFolder" class="folder-name-form"> <div v-show="showNewFolder" class="folder-name-form">
<el-input ref="newFolderName" v-model="newFolderName" placeholder="请输入文件夹名称" :clearable="true" <el-input ref="newFolderName" v-model="newFolderName" placeholder="请输入文件夹名称" :clearable="true"
@keyup.enter.native="newFolderNameClickEnter"> @keyup.enter.native="newFolderNameClickEnter" @focus="setInputFocus" @blur="setInputBlur()">
<el-button <el-button
slot="append" slot="append"
v-loading="newFolderLoading" v-loading="newFolderLoading"
@ -99,31 +99,34 @@
</el-popover> </el-popover>
<el-input v-show="showSearchButton" placeholder="搜索" v-model="searchFileName" :clearable="true" <el-input v-show="showSearchButton" placeholder="搜索" v-model="searchFileName" :clearable="true"
@keyup.enter.native="searchFile(searchFileName)"> @keyup.enter.native="searchFile(searchFileName)" @focus="setInputFocus" @blur="setInputBlur()">
<el-button slot="prepend" @click="searchFile(searchFileName)"> <el-button slot="prepend" @click="searchFile(searchFileName)">
<svg-icon icon-class="search" style="font-size: 22px"/> <svg-icon icon-class="search" style="font-size: 22px"/>
</el-button> </el-button>
</el-input> </el-input>
<el-dropdown size="medium" style="height: 40px;" @command="contextmenuClick"> <el-dropdown size="medium" style="height: 40px;" @command="contextmenuClick">
<el-button type="text" class="sort"> <el-button type="text" class="sort">
<svg-icon icon-class="sort"/> <svg-icon icon-class="sort"/>
</el-button> </el-button>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="orderName"> <el-dropdown-item command="orderName">
<span :class="{'al-file-sort-item': true, 'active': sortable.prop === 'name'}"> <span :class="{'al-file-sort-item': true, 'active': sortable.prop === 'name'}">
<i :class="{'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending'}"></i> <i
:class="{'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending'}"></i>
<span>名称</span> <span>名称</span>
</span> </span>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item command="orderSize"> <el-dropdown-item command="orderSize">
<span :class="{'al-file-sort-item': true, 'active': sortable.prop === 'size'}"> <span :class="{'al-file-sort-item': true, 'active': sortable.prop === 'size'}">
<i :class="{'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending'}"></i> <i
:class="{'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending'}"></i>
<span>大小</span> <span>大小</span>
</span> </span>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item command="orderUpdateDate"> <el-dropdown-item command="orderUpdateDate">
<span :class="{'al-file-sort-item': true, 'active': sortable.prop === 'updateDate'}"> <span :class="{'al-file-sort-item': true, 'active': sortable.prop === 'updateDate'}">
<i :class="{'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending'}"></i> <i
:class="{'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending'}"></i>
<span>日期</span> <span>日期</span>
</span> </span>
</el-dropdown-item> </el-dropdown-item>
@ -228,12 +231,13 @@
:sortable="item.sortable ? (orderCustom ?'custom':true) : false" :sortable="item.sortable ? (orderCustom ?'custom':true) : false"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-if="scope.row.index === editingIndex" :span="10" <el-input v-if="scope.row.index === editingIndex" :span="10"
v-focus v-model="renameFileName" placeholder="" size="small" v-focus v-model="renameFileName" placeholder="" size="small"
@focus="renameInputFocus($event,scope.row.suffix)" @focus="renameInputFocus($event,scope.row.suffix)"
@keyup.enter.native="rowRename(renameFileName, scope.row)"> @blur="setInputBlur()"
</el-input> @keyup.enter.native="rowRename(renameFileName, scope.row)">
<span v-else class="table-file-name">{{scope.row.name}}</span> </el-input>
<span v-else class="table-file-name">{{ scope.row.name }}</span>
</template> </template>
</pl-table-column> </pl-table-column>
<!--分享--> <!--分享-->
@ -247,7 +251,8 @@
</template> </template>
</pl-table-column> </pl-table-column>
<!--更多--> <!--更多-->
<pl-table-column v-if="index === 4 && showMoreItem" :key="index" width="50" :prop="item.name" :label="item.label" <pl-table-column v-if="index === 4 && showMoreItem" :key="index" width="50" :prop="item.name"
:label="item.label"
:index="index" class="el-icon-more" align="center" header-align="center"> :index="index" class="el-icon-more" align="center" header-align="center">
<!-- 使用组件, 并传值到组件中 --> <!-- 使用组件, 并传值到组件中 -->
<template slot="header"> <template slot="header">
@ -327,7 +332,8 @@
@contextmenu.prevent="rowContextmenu(item)" @contextmenu.prevent="rowContextmenu(item)"
> >
<div class="grid-item-icon"> <div class="grid-item-icon">
<icon-file :item="item" :image-url="imageUrl" :audio-cover-url="audioCoverUrl" :grid="true" :grid-width="gridColumnWidth"></icon-file> <icon-file :item="item" :image-url="imageUrl" :audio-cover-url="audioCoverUrl" :grid="true"
:grid-width="gridColumnWidth"></icon-file>
</div> </div>
<el-input v-if="item.index === editingIndex" <el-input v-if="item.index === editingIndex"
v-focus v-focus
@ -338,6 +344,7 @@
autosize autosize
size="small" size="small"
@focus="renameInputFocus($event, item.suffix)" @focus="renameInputFocus($event, item.suffix)"
@blur="setInputBlur()"
@keyup.enter.native="rowRename(renameFileName, item)"> @keyup.enter.native="rowRename(renameFileName, item)">
</el-input> </el-input>
<div v-else class="grid-item-text">{{ item.name }}</div> <div v-else class="grid-item-text">{{ item.name }}</div>
@ -391,17 +398,19 @@
<span>{{ rowContextData.music.singer }}</span> <span>{{ rowContextData.music.singer }}</span>
</el-form-item> </el-form-item>
<el-form-item label="🎵 专辑:"> <el-form-item label="🎵 专辑:">
<span>{{ '《'+rowContextData.music.album+'》' }}</span> <span>{{ '《' + rowContextData.music.album + '》' }}</span>
</el-form-item> </el-form-item>
<el-form-item label="🎵 歌名:"> <el-form-item label="🎵 歌名:">
<span>{{ '《'+rowContextData.music.songName+'》' }}</span> <span>{{ '《' + rowContextData.music.songName + '》' }}</span>
</el-form-item> </el-form-item>
</div> </div>
<el-form-item v-show="rowContextData.w && rowContextData.h" label="分辨率:" class="details-resolution"> <el-form-item v-show="rowContextData.w && rowContextData.h" label="分辨率:" class="details-resolution">
<span>{{ rowContextData.w + ' x ' + rowContextData.h }}</span> <span>{{ rowContextData.w + ' x ' + rowContextData.h }}</span>
</el-form-item> </el-form-item>
<el-form-item label="大小:"> <el-form-item label="大小:">
<span> {{ rowContextData.size }}字节 {{ rowContextData.size > 0 ? '(' + formatSize(rowContextData.size) + ')' : '' }}</span> <span> {{
rowContextData.size
}}字节 {{ rowContextData.size > 0 ? '(' + formatSize(rowContextData.size) + ')' : '' }}</span>
</el-form-item> </el-form-item>
<el-form-item label="位置:" class="details-position"> <el-form-item label="位置:" class="details-position">
<a :href="'/?path='+rowContextData.path">{{ rowContextData.path }}</a> <a :href="'/?path='+rowContextData.path">{{ rowContextData.path }}</a>
@ -479,7 +488,7 @@
<!--分享--> <!--分享-->
<el-dialog :title="'分享:'+shareFileName" :visible.sync="shareDialog" center> <el-dialog :title="'分享:'+shareFileName" :visible.sync="shareDialog" center>
<div v-loading="generateShareLinkLoading"> <div v-loading="generateShareLinkLoading">
<el-input readonly="readonly" v-model="shareLink"></el-input> <el-input readonly="readonly" v-model="shareLink" @focus="setInputFocus" @blur="setInputBlur()"></el-input>
<div slot="footer" class="dialog-footer share-dialog-footer"> <div slot="footer" class="dialog-footer share-dialog-footer">
<el-button type="primary" class="tag-share-link" @click="copyShareLink" :data-clipboard-text="shareLink"> <el-button type="primary" class="tag-share-link" @click="copyShareLink" :data-clipboard-text="shareLink">
复制链接 复制链接
@ -498,6 +507,7 @@
v-model="newTextFileName" v-model="newTextFileName"
class="dialog-msg" class="dialog-msg"
@focus="renameInputFocus($event,'')" :clearable="true" @focus="renameInputFocus($event,'')" :clearable="true"
@blur="setInputBlur()"
@keyup.enter.native="createTextFile(newTextFileName)" @keyup.enter.native="createTextFile(newTextFileName)"
></el-input> ></el-input>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
@ -513,7 +523,7 @@
<script> <script>
import {mapGetters} from 'vuex' import {mapGetters} from 'vuex'
import {formatSize, formatTime} from '@/utils/number' import {formatSize, formatTime} from '@/utils/number'
import {getElementToPageLeft, getElementToPageTop} from '@/utils/dom' import {getElementToPageLeft} from '@/utils/dom'
import {suffix} from '@/utils/file-type' import {suffix} from '@/utils/file-type'
import Bus from '@/assets/js/bus' import Bus from '@/assets/js/bus'
import api from '@/api/file-api' import api from '@/api/file-api'
@ -534,7 +544,6 @@ import '@/utils/directives.js'
import fileConfig from '@/utils/file-config' import fileConfig from '@/utils/file-config'
import EditElement from "@/views/markdown/EditElement"; import EditElement from "@/views/markdown/EditElement";
import SelectFile from "@/components/ShowFile/SelectFile";
var rowStyleExecuting = false var rowStyleExecuting = false
export default { export default {
@ -747,7 +756,7 @@ export default {
positionX: 0, positionX: 0,
positionY: 0, positionY: 0,
grid: this.defaultGrid, grid: this.defaultGrid,
vmode: this.defaultGrid ? 'grid' : 'list', vmode: this.defaultGrid ? 'grid' : 'list',
gridColumnNum: -1, gridColumnNum: -1,
gridColumnWidth: 120, gridColumnWidth: 120,
allChecked: false, allChecked: false,
@ -773,8 +782,8 @@ export default {
selectOrgin: -1,// 选择起点(主要用于按住shift键多选) selectOrgin: -1,// 选择起点(主要用于按住shift键多选)
selectEnd: -1,// 选择终点 selectEnd: -1,// 选择终点
selectPin: false,// 默认false,不按住 selectPin: false,// 默认false,不按住
inputting: false, // 是否正在输入
isCmd: false,// 是否按住了command(control)键 isCmd: false,// 是否按住了command(control)键
isCmdA: false, // 是否按住了command(control) + A 键
dragElementList: [], dragElementList: [],
drawFlag: false, drawFlag: false,
fileListScrollTop: 0, fileListScrollTop: 0,
@ -860,7 +869,7 @@ export default {
}) })
} }
let that = this let that = this
window.onresize = function (){ window.onresize = function () {
that.clientHeight = document.documentElement.clientHeight - that.lessClientHeight that.clientHeight = document.documentElement.clientHeight - that.lessClientHeight
} }
// 画矩形选区 // 画矩形选区
@ -883,7 +892,7 @@ export default {
inserted: function (el) { inserted: function (el) {
// 聚焦元素 // 聚焦元素
let input = el.querySelector('input') let input = el.querySelector('input')
if (!input){ if (!input) {
input = el.querySelector('textarea') input = el.querySelector('textarea')
} }
input.focus() input.focus()
@ -911,21 +920,27 @@ export default {
}, },
methods: { methods: {
keydown(event) { keydown(event) {
console.log('keydown', event)
const isMac = navigator.platform.startsWith('Mac'); const isMac = navigator.platform.startsWith('Mac');
const {key, c, keyCode, ctrlKey, metaKey} = event; const {key, c, keyCode, ctrlKey, metaKey} = event;
this.isCmd = isMac && metaKey || !isMac && ctrlKey; this.isCmd = isMac && metaKey || !isMac && ctrlKey;
// 按住shift建 // shift
if (event.keyCode === 16 && event.shiftKey) { if (event.keyCode === 16 && event.shiftKey) {
this.selectPin = true this.selectPin = true
} }
if(this.isCmd && keyCode == 65) { // ctrl + A / cmd + A
this.$nextTick(() => { if (this.isCmd && keyCode == 65) {
if(this.$refs.fileListTable) { if (this.inputting) {
this.$refs.fileListTable.toggleAllSelection() event.target.select()
} } else {
}) this.$nextTick(() => {
event.preventDefault() if (this.$refs.fileListTable) {
event.stopPropagation() this.$refs.fileListTable.toggleAllSelection()
}
})
event.preventDefault()
event.stopPropagation()
}
} }
}, },
keyup(event) { keyup(event) {
@ -980,17 +995,17 @@ export default {
let clientWidth = container.clientWidth let clientWidth = container.clientWidth
this.clientHeight = document.documentElement.clientHeight - this.lessClientHeight this.clientHeight = document.documentElement.clientHeight - this.lessClientHeight
if (this.queryFileType === 'image') { if (this.queryFileType === 'image') {
this.gridColumnNum = Math.round((clientWidth-10)/165) this.gridColumnNum = Math.round((clientWidth - 10) / 165)
} else { } else {
this.gridColumnNum = Math.round((clientWidth-10)/135) this.gridColumnNum = Math.round((clientWidth - 10) / 135)
} }
this.gridColumnWidth = (clientWidth - 11 * this.gridColumnNum) / this.gridColumnNum - 4.5 this.gridColumnWidth = (clientWidth - 11 * this.gridColumnNum) / this.gridColumnNum - 4.5
if(clientWidth < 900){ if (clientWidth < 900) {
this.showUpdateDateItem = false this.showUpdateDateItem = false
} else { } else {
this.showUpdateDateItem = true this.showUpdateDateItem = true
} }
if(clientWidth < 500){ if (clientWidth < 500) {
this.showSizeItem = false this.showSizeItem = false
} else { } else {
this.showSizeItem = true this.showSizeItem = true
@ -1010,7 +1025,7 @@ export default {
scrollDiv = document.querySelector('.van-grid') scrollDiv = document.querySelector('.van-grid')
} }
if(this.selectFile){ if (this.selectFile) {
return return
} }
const _this = this const _this = this
@ -1040,7 +1055,7 @@ export default {
return path return path
} }
}) })
if (findIndex > -1){ if (findIndex > -1) {
_this.stopSortChange = true _this.stopSortChange = true
} }
} }
@ -1052,7 +1067,7 @@ export default {
}) })
if (throughRow) { if (throughRow) {
// 鼠标按下时就选中文件 // 鼠标按下时就选中文件
if (!_this.selectRowData.includes(_this.fileList[throughRow.rowIndex])){ if (!_this.selectRowData.includes(_this.fileList[throughRow.rowIndex])) {
_this.editingIndex = -1 _this.editingIndex = -1
if (!_this.isCmd && !_this.selectPin) { if (!_this.isCmd && !_this.selectPin) {
_this.$refs.fileListTable.clearSelection() _this.$refs.fileListTable.clearSelection()
@ -1068,7 +1083,7 @@ export default {
} }
if (!_this.isCmd && !_this.selectPin) { if (!_this.isCmd && !_this.selectPin) {
const index = elPath.findIndex(el => el.className === itemClassName || el.className === 'el-table__row el-table__row--striped') const index = elPath.findIndex(el => el.className === itemClassName || el.className === 'el-table__row el-table__row--striped')
if(index < 0){ if (index < 0) {
_this.$refs.fileListTable.clearSelection() _this.$refs.fileListTable.clearSelection()
} }
} }
@ -1122,9 +1137,9 @@ export default {
document.onmouseup = null; document.onmouseup = null;
if (_this.stopSortChange) { if (_this.stopSortChange) {
_this.stopSortChange = false _this.stopSortChange = false
setTimeout(()=>{ setTimeout(() => {
_this.changeSelectedStyle(_this.selectRowData) _this.changeSelectedStyle(_this.selectRowData)
},200) }, 200)
} }
setTimeout(function () { setTimeout(function () {
restoreScroll() restoreScroll()
@ -1134,7 +1149,7 @@ export default {
if (rectangle) { if (rectangle) {
draw.removeChild(rectangle) draw.removeChild(rectangle)
} }
if(!_this.grid) { if (!_this.grid) {
draw = document.getElementById('drag-table') draw = document.getElementById('drag-table')
} }
const dragingDivs = Array.prototype.slice.call(draw.getElementsByClassName('dragingDiv')) const dragingDivs = Array.prototype.slice.call(draw.getElementsByClassName('dragingDiv'))
@ -1192,7 +1207,7 @@ export default {
}, },
// 行拖拽 // 行拖拽
rowDrop() { rowDrop() {
if(this.selectFile){ if (this.selectFile) {
return return
} }
if (this.fileListScrollTop > 0 && this.$route.path !== '/') { if (this.fileListScrollTop > 0 && this.$route.path !== '/') {
@ -1243,7 +1258,7 @@ export default {
let child = target.children[i] let child = target.children[i]
// 设置索引,表格自带rowIndex,这里我们设置grid的 // 设置索引,表格自带rowIndex,这里我们设置grid的
if (_this.grid) { if (_this.grid) {
if(child.rowIndex !== i) { if (child.rowIndex !== i) {
child.rowIndex = i child.rowIndex = i
} }
child.children[0].children[0].rowIndex = i child.children[0].children[0].rowIndex = i
@ -1282,7 +1297,7 @@ export default {
// 这里进入其他容器后 清除上次进入的容器的状态 // 这里进入其他容器后 清除上次进入的容器的状态
let node = null let node = null
const className = e.toElement.className const className = e.toElement.className
if (_this.grid){ if (_this.grid) {
if (e.toElement.className === itemClassName) { if (e.toElement.className === itemClassName) {
node = e.toElement node = e.toElement
} }
@ -1355,7 +1370,7 @@ export default {
dragingDiv.style.top = dragingDiv.original.top dragingDiv.style.top = dragingDiv.original.top
dragingDiv.style.left = dragingDiv.original.left dragingDiv.style.left = dragingDiv.original.left
}) })
setTimeout(()=> { setTimeout(() => {
_this.selectRowData.forEach(row => { _this.selectRowData.forEach(row => {
draw.removeChild(document.getElementById('dragingDiv' + row.index)) draw.removeChild(document.getElementById('dragingDiv' + row.index))
}) })
@ -1379,86 +1394,86 @@ export default {
} }
// 开始拖拽 // 开始拖拽
container.ondragstart = (e) => { container.ondragstart = (e) => {
// 正在选区获取按住关键键时禁止拖拽 // 正在选区获取按住关键键时禁止拖拽
if (_this.drawFlag || _this.isCmd || _this.selectPin) { if (_this.drawFlag || _this.isCmd || _this.selectPin) {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
return return
} }
// 判断被拖拽dom是否有slot属性并且等于'jmal' // 判断被拖拽dom是否有slot属性并且等于'jmal'
if (!e.target.slot || e.target.slot !== 'jmal'){ if (!e.target.slot || e.target.slot !== 'jmal') {
return true return true
} }
// 该文件正在重命名 // 该文件正在重命名
if (e.target.rowIndex === _this.editingIndex){ if (e.target.rowIndex === _this.editingIndex) {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
return return
} }
e.target.style.cursor = 'no-drop' e.target.style.cursor = 'no-drop'
// 当滚动条滚动后禁止拖拽 // 当滚动条滚动后禁止拖拽
if (_this.fileListScrollTop === 0) { if (_this.fileListScrollTop === 0) {
// 复制被拖拽dom的title, 拖拽过程中移除, 拖拽完后还原 // 复制被拖拽dom的title, 拖拽过程中移除, 拖拽完后还原
moveTitle = e.target.parentNode.parentNode.title moveTitle = e.target.parentNode.parentNode.title
e.target.parentNode.parentNode.title = '' e.target.parentNode.parentNode.title = ''
// 创建拖拽时的dom, 克隆自被拖拽dom // 创建拖拽时的dom, 克隆自被拖拽dom
_this.selectRowData.forEach((row,index) => { _this.selectRowData.forEach((row, index) => {
const element = _this.dragElementList[row.index] const element = _this.dragElementList[row.index]
const rowIndex = element.rowIndex const rowIndex = element.rowIndex
dragingDiv = element.cloneNode(true) dragingDiv = element.cloneNode(true)
dragingDiv.id = 'dragingDiv'+rowIndex dragingDiv.id = 'dragingDiv' + rowIndex
dragingDiv.classList.add('dragingDiv') dragingDiv.classList.add('dragingDiv')
dragingDiv.classList.remove('el-table_row') dragingDiv.classList.remove('el-table_row')
dragingDiv.style.transition = 'all 0.3s' dragingDiv.style.transition = 'all 0.3s'
dragingDiv.style.zIndex = -1 dragingDiv.style.zIndex = -1
dragingDiv.style.position = 'absolute' dragingDiv.style.position = 'absolute'
const pos = _this.dragElementList[rowIndex] const pos = _this.dragElementList[rowIndex]
dragingDiv.style.width = pos.w + 'px' dragingDiv.style.width = pos.w + 'px'
dragingDiv.style.height = pos.h + 'px' dragingDiv.style.height = pos.h + 'px'
dragingDiv.style.left = pos.x - drawOffsetLeft + 'px' dragingDiv.style.left = pos.x - drawOffsetLeft + 'px'
if (!_this.grid) { if (!_this.grid) {
dragingDiv.firstChild.style.textAlign = 'center' dragingDiv.firstChild.style.textAlign = 'center'
let tds = Array.prototype.slice.call(dragingDiv.childNodes) let tds = Array.prototype.slice.call(dragingDiv.childNodes)
tds.forEach((node,index) => { tds.forEach((node, index) => {
if (index === 4) { if (index === 4) {
node.style.borderRadius = '0 3px 3px 0' node.style.borderRadius = '0 3px 3px 0'
node.style.borderRight = '1px solid #409eff' node.style.borderRight = '1px solid #409eff'
node.firstChild.style.width = '80px' node.firstChild.style.width = '80px'
return true return true
} }
if (index !== 0 && index !== 1) { if (index !== 0 && index !== 1) {
dragingDiv.removeChild(node) dragingDiv.removeChild(node)
} }
}) })
dragingDiv.style.top = pos.y - 51.5 + 'px' dragingDiv.style.top = pos.y - 51.5 + 'px'
} else { } else {
dragingDiv.style.top = pos.y - pos.h/2 + 10 + 'px' dragingDiv.style.top = pos.y - pos.h / 2 + 10 + 'px'
}
if (index === 0){
let numberFilesCopy = document.getElementById("numberFiles").cloneNode(true)
numberFilesCopy.id = 'numberFilesCopy'
numberFilesCopy.querySelector('.number').innerHTML = _this.selectRowData.length + '个文件'
dragingDiv.appendChild(numberFilesCopy)
}
dragingDiv.original = {top: dragingDiv.style.top, left: dragingDiv.style.left}
draw.appendChild(dragingDiv)
})
firstOver = 0
let dragImage = document.getElementById('dragImage');
e.dataTransfer.setDragImage(dragImage, 10, 10)
Bus.$emit('onDragStart', true)
// 避免和画矩形选区冲突
_this.drawFlag = false
let rectangle = document.getElementById('rectangle1')
if (rectangle) {
document.getElementById('v-draw-rectangle').removeChild(rectangle)
} }
dragged = e.target if (index === 0) {
draggedIndex = dragged.rowIndex let numberFilesCopy = document.getElementById("numberFiles").cloneNode(true)
// 只有选中的才能拖拽 numberFilesCopy.id = 'numberFilesCopy'
_this.cellMouseIndex = -1 numberFilesCopy.querySelector('.number').innerHTML = _this.selectRowData.length + '个文件'
dragBackCorlor = dragged.style.backgroundColor dragingDiv.appendChild(numberFilesCopy)
}
dragingDiv.original = {top: dragingDiv.style.top, left: dragingDiv.style.left}
draw.appendChild(dragingDiv)
})
firstOver = 0
let dragImage = document.getElementById('dragImage');
e.dataTransfer.setDragImage(dragImage, 10, 10)
Bus.$emit('onDragStart', true)
// 避免和画矩形选区冲突
_this.drawFlag = false
let rectangle = document.getElementById('rectangle1')
if (rectangle) {
document.getElementById('v-draw-rectangle').removeChild(rectangle)
} }
dragged = e.target
draggedIndex = dragged.rowIndex
// 只有选中的才能拖拽
_this.cellMouseIndex = -1
dragBackCorlor = dragged.style.backgroundColor
}
} }
container.ondragenter = function (e) { container.ondragenter = function (e) {
// console.log('ondragenter', e.target) // console.log('ondragenter', e.target)
@ -1490,7 +1505,7 @@ export default {
dragEnterBackCorlor = throughRow.style.backgroundColor dragEnterBackCorlor = throughRow.style.backgroundColor
// 当拖拽文件夹上时，文件夹当背景色 // 当拖拽文件夹上时，文件夹当背景色
const color = '#9fcdfc99' const color = '#9fcdfc99'
if (_this.grid){ if (_this.grid) {
throughRow.style.backgroundColor = color throughRow.style.backgroundColor = color
} else { } else {
throughRow.childNodes.forEach(node => node.style.backgroundColor = color) throughRow.childNodes.forEach(node => node.style.backgroundColor = color)
@ -1503,16 +1518,16 @@ export default {
} }
container.ondragover = function (e) { container.ondragover = function (e) {
_this.selectRowData.forEach((row,index) => { _this.selectRowData.forEach((row, index) => {
const drawRectangle = document.getElementById('dragingDiv'+row.index) const drawRectangle = document.getElementById('dragingDiv' + row.index)
if (drawRectangle) { if (drawRectangle) {
drawRectangle.style.left = e.clientX - drawOffsetLeft + index*3 + 10 + 'px' drawRectangle.style.left = e.clientX - drawOffsetLeft + index * 3 + 10 + 'px'
drawRectangle.style.top = e.clientY - 50 + index*3 + 10 + 'px' drawRectangle.style.top = e.clientY - 50 + index * 3 + 10 + 'px'
if (firstOver === 0){ if (firstOver === 0) {
drawRectangle.style.zIndex = 999 drawRectangle.style.zIndex = 999
setTimeout(()=>{ setTimeout(() => {
drawRectangle.style.transition = '' drawRectangle.style.transition = ''
},300) }, 300)
} }
} }
}) })
@ -1569,7 +1584,7 @@ export default {
} }
// 清除之前的样式 // 清除之前的样式
let clearClass = function (node) { let clearClass = function (node) {
if(!dragged) { if (!dragged) {
return return
} }
if (node) { if (node) {
@ -1718,6 +1733,12 @@ export default {
showNewFolderClick() { showNewFolderClick() {
this.isShowNewFolder = true this.isShowNewFolder = true
}, },
setInputFocus() {
this.inputting = true
},
setInputBlur() {
this.inputting = false
},
newFolderNameClickEnter() { newFolderNameClickEnter() {
this.newFolderNameClick() this.newFolderNameClick()
}, },
@ -2092,7 +2113,7 @@ export default {
} }
}, },
addClass(el, className) { addClass(el, className) {
if(el){ if (el) {
const str = el.className const str = el.className
el.className = el.className + " " + className el.className = el.className + " " + className
} }
@ -2159,7 +2180,7 @@ export default {
this.changeSelectedStyle(rows) this.changeSelectedStyle(rows)
}, },
changeSelectedStyle(rows) { changeSelectedStyle(rows) {
if (this.stopSortChange){ if (this.stopSortChange) {
return return
} }
let selectTotalSize = 0 let selectTotalSize = 0
@ -2198,13 +2219,29 @@ export default {
// cell-style 通过返回值可以实现样式变换利用传递过来的数组index循环改变样式 // cell-style 通过返回值可以实现样式变换利用传递过来的数组index循环改变样式
rowStyle({row, column, rowIndex, columnIndex}) { rowStyle({row, column, rowIndex, columnIndex}) {
if (this.$refs.fileListTable.tableSelectData.findIndex(item => item.index === rowIndex) > -1) { if (this.$refs.fileListTable.tableSelectData.findIndex(item => item.index === rowIndex) > -1) {
if (columnIndex === 0){ if (columnIndex === 0) {
return {backgroundColor: '#e0f3fc !important', borderRadius:'3px 0 0 3px', borderLeft: '1px solid #409eff', borderTop: '1px solid #409eff', borderBottom: '1px solid #409eff'} return {
backgroundColor: '#e0f3fc !important',
borderRadius: '3px 0 0 3px',
borderLeft: '1px solid #409eff',
borderTop: '1px solid #409eff',
borderBottom: '1px solid #409eff'
}
} }
if (columnIndex === 5){ if (columnIndex === 5) {
return {backgroundColor: '#e0f3fc !important', borderRadius:'0 3px 3px 0', borderRight: '1px solid #409eff', borderTop: '1px solid #409eff', borderBottom: '1px solid #409eff'} return {
backgroundColor: '#e0f3fc !important',
borderRadius: '0 3px 3px 0',
borderRight: '1px solid #409eff',
borderTop: '1px solid #409eff',
borderBottom: '1px solid #409eff'
}
}
return {
backgroundColor: '#e0f3fc !important',
borderTop: '1px solid #409eff',
borderBottom: '1px solid #409eff'
} }
return {backgroundColor: '#e0f3fc !important', borderTop: '1px solid #409eff', borderBottom: '1px solid #409eff'}
} }
}, },
// 动态添加index到row里面去 // 动态添加index到row里面去
@ -2249,7 +2286,7 @@ export default {
}, },
// 单元格点击事件 // 单元格点击事件
cellClick(row, column) { cellClick(row, column) {
if(this.selectFile){ if (this.selectFile) {
this.fileClick(row) this.fileClick(row)
return return
} }
@ -2273,16 +2310,17 @@ export default {
}, },
// 选取输入框部分内容 // 选取输入框部分内容
renameInputFocus(event, suffix) { renameInputFocus(event, suffix) {
this.setInputFocus()
event.currentTarget.selectionStart = 0 event.currentTarget.selectionStart = 0
event.currentTarget.selectionEnd = event.currentTarget.value.length event.currentTarget.selectionEnd = event.currentTarget.value.length
if (suffix){ if (suffix) {
event.currentTarget.selectionEnd -= suffix.length + 1 event.currentTarget.selectionEnd -= suffix.length + 1
} }
}, },
// 重命名 // 重命名
rowRename(newFileName, row) { rowRename(newFileName, row) {
//去掉回车换行 //去掉回车换行
newFileName = newFileName.replace(/[\r\n]/g,""); newFileName = newFileName.replace(/[\r\n]/g, "");
console.log('newFileName', newFileName) console.log('newFileName', newFileName)
if (newFileName) { if (newFileName) {
if (/[\/\\"<>\?\*]/gi.test(newFileName)) { if (/[\/\\"<>\?\*]/gi.test(newFileName)) {
@ -2380,7 +2418,7 @@ export default {
}, },
// 鼠标右击 // 鼠标右击
rowContextmenu(row) { rowContextmenu(row) {
if(this.selectFile){ if (this.selectFile) {
return return
} }
if (this.$refs.fileListTable.tableSelectData.length > 1 && this.$refs.fileListTable.tableSelectData.findIndex(item => item.index === row.index) > -1) { if (this.$refs.fileListTable.tableSelectData.length > 1 && this.$refs.fileListTable.tableSelectData.findIndex(item => item.index === row.index) > -1) {
@ -2846,7 +2884,7 @@ export default {
} else { } else {
fileIds.push(this.rowContextData.id) fileIds.push(this.rowContextData.id)
} }
if (fileIds.length > 1 || this.rowContextData.isFolder){ if (fileIds.length > 1 || this.rowContextData.isFolder) {
fileConfig.packageDownload(fileIds, this.$store.state.user.token) fileConfig.packageDownload(fileIds, this.$store.state.user.token)
return return
} }
@ -2872,7 +2910,7 @@ export default {
// 移除列表 // 移除列表
this.removeSelectItme() this.removeSelectItme()
} }
}).catch(()=>{ }).catch(() => {
this.rowContextData.isFavorite = !isFavorite this.rowContextData.isFavorite = !isFavorite
}) })
}, },
@ -3004,7 +3042,7 @@ export default {
}, },
// 点击文件或文件夹 // 点击文件或文件夹
fileClick(row) { fileClick(row) {
if (this.editingIndex === row.index){ if (this.editingIndex === row.index) {
return return
} }
this.openingFile = row this.openingFile = row
@ -3034,10 +3072,10 @@ export default {
this.openDir(row) this.openDir(row)
} }
} else { } else {
if (this.selectFile){ if (this.selectFile) {
let selectFile = row let selectFile = row
const selectData = this.$refs.fileListTable.tableSelectData const selectData = this.$refs.fileListTable.tableSelectData
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(null, row)
@ -3274,16 +3312,19 @@ export default {
} }
} }
} }
>>> .van-grid-item__content {
> > > .van-grid-item__content {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
padding: 0; padding: 0;
border-radius: 5px!important; border-radius: 5px !important;
} }
.vmode{
.vmode {
padding: 5px 10px; padding: 5px 10px;
margin-left: -5px; margin-left: -5px;
} }
.number-files { .number-files {
position: absolute; position: absolute;
top: -42px; top: -42px;
@ -3295,16 +3336,20 @@ export default {
background: #d2eefa66; background: #d2eefa66;
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
.icon { .icon {
padding: 5px; padding: 5px;
width: 40px; width: 40px;
} }
span { span {
font-weight: 500; font-weight: 500;
} }
.number { .number {
padding: 0 15px 0 15px; padding: 0 15px 0 15px;
} }
.target { .target {
.folder { .folder {
background-color: #1d8cff; background-color: #1d8cff;
@ -3317,8 +3362,8 @@ export default {
} }
} }
/deep/.el-table--enable-row-hover { /deep/ .el-table--enable-row-hover {
.el-table__body tr:hover>td{ .el-table__body tr:hover > td {
background-color: #e0f3fc !important; background-color: #e0f3fc !important;
} }
} }
@ -3327,9 +3372,9 @@ export default {
height: 0; height: 0;
} }
/deep/.el-table { /deep/ .el-table {
th.gutter{ th.gutter {
display: table-cell!important; display: table-cell !important;
} }
} }
</style> </style>