From fa8b0fc548f38bbe69b6f054a21184b6e84789ce Mon Sep 17 00:00:00 2001 From: jmal Date: Thu, 8 Apr 2021 18:00:41 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E6=8B=96=E6=8B=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ShowFile/ShowFile.vue | 151 +++++++++++++++++---------- src/styles/home-index.scss | 2 +- 2 files changed, 98 insertions(+), 55 deletions(-) diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue index ae2fa63..2e60462 100644 --- a/src/components/ShowFile/ShowFile.vue +++ b/src/components/ShowFile/ShowFile.vue @@ -170,7 +170,7 @@ -
+
+
{ - if (path.className === itemClassName) { + if (path.className === itemClassName || path.className === 'el-table__row el-table__row--striped') { return path } }) @@ -1100,6 +1101,9 @@ export default { if (rectangle) { draw.removeChild(rectangle) } + if(!_this.grid) { + draw = document.getElementById('drag-table') + } const dragingDivs = Array.prototype.slice.call(draw.getElementsByClassName('dragingDiv')) dragingDivs.forEach(el => draw.removeChild(el)) } @@ -1195,6 +1199,9 @@ export default { target = document.querySelector('.van-checkbox-group .van-grid') } let draw = document.getElementById('v-draw-rectangle') + if (!this.grid) { + draw = document.getElementById('drag-table') + } let rows = 0//行数 let drawOffsetLeft = getElementToPageLeft(draw) @@ -1208,7 +1215,9 @@ export default { let child = target.children[i] // 设置索引,表格自带rowIndex,这里我们设置grid的 if (_this.grid) { - child.rowIndex = i + if(child.rowIndex !== i) { + child.rowIndex = i + } child.children[0].children[0].rowIndex = i child = child.children[0].children[0] } @@ -1275,13 +1284,12 @@ export default { dragIndex = -1 } } - console.log(throughRow) return throughRow } else { if (elPath[0].tagName === 'TD') { // throughRow 表示被拖动的元素正在哪一行上 throughRow = elPath.find(path => { - if (path.className === 'el-table__row') { + if (path.className === 'el-table__row el-table__row--striped' || path.className === 'el-table__row') { return path } }) @@ -1310,36 +1318,63 @@ export default { // }) // }, 300) } + // 开始拖拽 container.ondragstart = (e) => { - if (_this.drawFlag) { - e.preventDefault() - e.stopPropagation() - return + // 正在选区时禁止拖拽 + // if (_this.drawFlag) { + // e.preventDefault() + // e.stopPropagation() + // return + // } + // 判断被拖拽dom是否有slot属性并且等于'jmal' + if (e.target.slot && e.target.slot !== 'jmal'){ + return true } + // 当滚动条滚动后禁止拖拽 if (_this.fileListScrollTop === 0) { + // 复制被拖拽dom的title, 拖拽过程中移除, 拖拽完后还原 moveTitle = e.target.parentNode.parentNode.title e.target.parentNode.parentNode.title = '' + // 创建拖拽时的dom, 克隆自被拖拽dom _this.selectRowData.forEach((row,index) => { const element = _this.dragElementList[row.index] const rowIndex = element.rowIndex dragingDiv = element.cloneNode(true) dragingDiv.id = 'dragingDiv'+rowIndex dragingDiv.classList.add('dragingDiv') + dragingDiv.classList.remove('el-table_row') dragingDiv.style.transition = 'all 0.3s' dragingDiv.style.zIndex = -1 dragingDiv.style.position = 'absolute' const pos = _this.dragElementList[rowIndex] dragingDiv.style.width = pos.w + 'px' dragingDiv.style.height = pos.h + 'px' - dragingDiv.style.top = pos.y - pos.h/2 + 10 + 'px' dragingDiv.style.left = pos.x - drawOffsetLeft + 'px' - dragingDiv.original = {top: dragingDiv.style.top, left: dragingDiv.style.left} + if (!_this.grid) { + dragingDiv.firstChild.style.textAlign = 'center' + let tds = Array.prototype.slice.call(dragingDiv.childNodes) + tds.forEach((node,index) => { + if (index === 4) { + node.style.borderRadius = '0 3px 3px 0' + node.style.borderRight = '1px solid #409eff' + node.firstChild.style.width = '80px' + return true + } + if (index !== 0 && index !== 1) { + dragingDiv.removeChild(node) + } + }) + dragingDiv.style.top = pos.y - 51.5 + 'px' + } else { + 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 @@ -1373,7 +1408,7 @@ export default { clearClass(last) } // console.log('拖动进入目标元素'+throughRow.rowIndex,'dragIndex:',dragIndex); - // 不是自己或未文件夹时才改变状态 + // 不是自己或为文件夹时才改变状态 if (draggedIndex !== throughRow.rowIndex && _this.fileList[throughRow.rowIndex].isFolder && _this.selectRowData.findIndex(item => item.index === throughRow.rowIndex) === -1) { // 改变本次进入的容器的状态 dragged.style.cursor = 'copy' @@ -1388,7 +1423,13 @@ export default { targetFolder.innerHTML = _this.fileList[throughRow.rowIndex].name dragEnterBackCorlor = throughRow.style.backgroundColor - throughRow.style.backgroundColor = '#9fcdfc99' + // 当拖拽文件夹上时，文件夹当背景色 + const color = '#9fcdfc99' + if (_this.grid){ + throughRow.style.backgroundColor = color + } else { + throughRow.childNodes.forEach(node => node.style.backgroundColor = color) + } } dragIndex = throughRow.rowIndex } @@ -1400,9 +1441,8 @@ export default { _this.selectRowData.forEach((row,index) => { const drawRectangle = document.getElementById('dragingDiv'+row.index) if (drawRectangle) { - drawRectangle.style.left = e.clientX - drawOffsetLeft + index*3 + 'px' - drawRectangle.style.top = e.clientY - 50 + index*3 + 'px' - console.log(drawRectangle.style.top) + drawRectangle.style.left = e.clientX - drawOffsetLeft + index*3 + 10 + 'px' + drawRectangle.style.top = e.clientY - 50 + index*3 + 10 + 'px' if (firstOver === 0){ drawRectangle.style.zIndex = 999 setTimeout(()=>{ @@ -1458,6 +1498,7 @@ export default { }).catch() } } + // 清除之前的样式 let clearClass = function (node) { if(!dragged) { return @@ -1465,14 +1506,16 @@ export default { if (node) { if (_this.grid) { node = node.children[0].children[0] - if (node.style.backgroundColor !== 'rgba(202, 234, 249, 0.57)') { + // #9fcdfc99 + if (node.style.backgroundColor === 'rgba(159, 205, 252, 0.6)') { node.style.backgroundColor = null } } else { - node.style.height = 'unset' - //#F5F7FA - if (node.style.backgroundColor !== 'rgb(245, 247, 250)') { - node.style.backgroundColor = null + // #9fcdfc99 + if (node.firstChild.style.backgroundColor === 'rgba(159, 205, 252, 0.6)') { + node.childNodes.forEach(node => { + node.style.backgroundColor = null + }) } } dragged.style.cursor = 'default' @@ -1984,29 +2027,6 @@ export default { el.className = el.className + " " + className } }, - getSummaries(param) { - // 合计 - const {columns, data} = param - const sums = [] - columns.forEach((column, index) => { - const values = data.map(item => Number(item[column.property])) - if (index === 5) { - sums[2] = values.reduce((prev, curr) => { - const value = Number(curr) - if (!isNaN(value)) { - return prev + curr - } else { - return prev - } - }, 0) - } - }) - const sumFileAndFolder = this.getShowSumFileAndFolder(this.fileList) - const sizeSum = this.getShowSumSize(sums[2]) - sums[2] = sumFileAndFolder + sizeSum - this.summaries = sums[2] - return sums - }, // 统计文件和文件夹 getShowSumFileAndFolder(fileList) { let folderSize = 0 @@ -2103,16 +2123,22 @@ export default { } }, // cell-style 通过返回值可以实现样式变换利用传递过来的数组index循环改变样式 - rowStyle({row, rowIndex}) { - if (this.$refs.fileListTable.tableSelectData.findIndex(item => item.index === row.index) > -1) { - return {backgroundColor: '#F5F7FA'} + rowStyle({row, column, rowIndex, columnIndex}) { + if (this.$refs.fileListTable.tableSelectData.findIndex(item => item.index === rowIndex) > -1) { + if (columnIndex === 0){ + return {backgroundColor: '#e0f3fc !important', borderRadius:'3px 0 0 3px', borderLeft: '1px solid #409eff', borderTop: '1px solid #409eff', borderBottom: '1px solid #409eff'} + } + 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', borderTop: '1px solid #409eff', borderBottom: '1px solid #409eff'} } }, // 动态添加index到row里面去 tableRowClassName({row, rowIndex}) { // row.index = rowIndex }, - // 选择某行预备数据 + // 选择某行预备数据#e0f3fc !important; preliminaryRowData(row) { if (row) { // this.$refs.fileListTable.tableSelectData[0] = row @@ -3086,13 +3112,19 @@ export default { } .is-sortable:hover { - background-color: #f5f7fa; + background-color: #e0f3fc; } } +/deep/ table { + border-collapse: separate; + border-spacing: 0 1px; +} + /deep/ .el-table td { padding: 0; height: 50px !important; + border: 0; } .home-link:hover { @@ -3202,12 +3234,23 @@ export default { .target { .folder { background-color: #1d8cff; - color: #f0f0f0; + color: #ffffff; padding: 8px; border-radius: 2px; margin-right: 5px; + font-weight: 600; } } } + +/deep/.el-table--enable-row-hover { + .el-table__body tr:hover>td{ + background-color: #e0f3fc !important; + } +} + +/deep/ .el-table::before { + height: 0; +} diff --git a/src/styles/home-index.scss b/src/styles/home-index.scss index 803ce44..aeb617f 100644 --- a/src/styles/home-index.scss +++ b/src/styles/home-index.scss @@ -339,7 +339,7 @@ } } /deep/ .grid-time:hover { - border: solid 1px #c8c9cc; + background-color: #e0f3fc; } .checkbox-group-header { margin: 10px 0 0;