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

优化：优化一些细节

Browse Source
This commit is contained in:
jmal 2021-03-31 18:03:18 +08:00
parent ce4235e888
commit 6fd44c7750
5 changed files with 1469 additions and 1275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Icon/IconFile.vue
View File

@ -2,15 +2,15 @@
<span> <span>
<div v-if="item.isFavorite && !public"> <div v-if="item.isFavorite && !public">
<div v-if="pc"> <div v-if="pc">
<svg-icon v-if="!grid" icon-class="menu-favorite-hover" <svg-icon v-if="!grid" class="favorite" icon-class="menu-favorite-hover"
style="font-size: 1rem;float: right;margin-left: 1rem;position: absolute;"/> style="font-size: 1rem;float: right;margin-left: 1rem;position: absolute;"/>
<svg-icon v-if="grid" icon-class="menu-favorite-hover" <svg-icon v-if="grid" class="favorite" icon-class="menu-favorite-hover"
style="font-size: 1.5rem;right: 0;top: -1rem;position: absolute;z-index: 1;"/> style="font-size: 1.5rem;right: 0;top: -1rem;position: absolute;z-index: 1;"/>
</div> </div>
<div v-else> <div v-else>
<svg-icon v-if="!grid" icon-class="menu-favorite-hover" <svg-icon v-if="!grid" class="favorite" icon-class="menu-favorite-hover"
style="font-size: 0.5rem;float: right;margin-left: 0.5rem;position: absolute;"/> style="font-size: 0.5rem;float: right;margin-left: 0.5rem;position: absolute;"/>
<svg-icon v-if="grid" icon-class="menu-favorite-hover" <svg-icon v-if="grid" class="favorite" icon-class="menu-favorite-hover"
style="font-size: 1rem;right: 0;top: -1rem;position: absolute;z-index: 1;"/> style="font-size: 1rem;right: 0;top: -1rem;position: absolute;z-index: 1;"/>
</div> </div>
</div> </div>

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

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="dashboard-container" v-resize="containerResize"> <div class="dashboard-container" v-resize="containerResize" @click="containerClick">
<v-contextmenu ref="homeContextmenu" :disabled="contextmenuDisabled"> <v-contextmenu ref="homeContextmenu" :disabled="contextmenuDisabled">
<div v-for="item of contextMenus" :key="item.operation"> <div v-for="item of contextMenus" :key="item.operation">
<!-- 一级菜单 --> <!-- 一级菜单 -->
@ -338,36 +338,38 @@
element-loading-text="文件加载中" element-loading-text="文件加载中"
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
element-loading-background="#f6f7fa88"> element-loading-background="#f6f7fa88">
<div class="checkbox-group-header" v-show="!selectFile"> <!-- <div class="checkbox-group-header" v-show="!selectFile">-->
<div class="select-operation"> <!-- <div class="select-operation">-->
<van-checkbox class="grid-all-checkbox" @click="clickGridAllCheckBox" v-model="allChecked"> <!-- <van-checkbox class="grid-all-checkbox" @click="clickGridAllCheckBox" v-model="allChecked">-->
{{ selectRowData.length > 0 ? '已选择 ' + this.tableHead[2].label : "选择" }} <!-- {{ selectRowData.length > 0 ? '已选择 ' + this.tableHead[2].label : "选择" }}-->
</van-checkbox> <!-- </van-checkbox>-->
<div> <!-- <div>-->
<el-button class="select-operation-button" icon="el-icon-download" v-if="selectRowData.length > 0" <!-- <el-button class="select-operation-button" icon="el-icon-download" v-if="selectRowData.length > 0"-->
@click="downloadFile"> <!-- @click="downloadFile">-->
下载 <!-- 下载-->
</el-button> <!-- </el-button>-->
<el-button class="select-operation-button" icon="el-icon-share" v-if="selectRowData.length === 1" <!-- <el-button class="select-operation-button" icon="el-icon-share" v-if="selectRowData.length === 1"-->
@click="share"> <!-- @click="share">-->
分享 <!-- 分享-->
</el-button> <!-- </el-button>-->
<el-button class="select-operation-button" icon="el-icon-document-copy" v-if="selectRowData.length > 0" <!-- <el-button class="select-operation-button" icon="el-icon-document-copy" v-if="selectRowData.length > 0"-->
@click="moveOrCopy"> <!-- @click="moveOrCopy">-->
移动或复制 <!-- 移动或复制-->
</el-button> <!-- </el-button>-->
<el-button class="select-operation-button" icon="el-icon-delete" v-if="selectRowData.length > 0" <!-- <el-button class="select-operation-button" icon="el-icon-delete" v-if="selectRowData.length > 0"-->
type="danger" @click="deleteFile"> <!-- type="danger" @click="deleteFile">-->
</el-button> <!-- </el-button>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<el-divider style="transform: scaleY(0.5);"></el-divider> <!-- <el-divider style="transform: scaleY(0.5);"></el-divider>-->
</div> <!-- </div>-->
<van-checkbox-group v-model="selectRowData" @change="handleSelectionChange" ref="checkboxGroup"> <van-checkbox-group v-model="selectRowData" @change="handleSelectionChange" ref="checkboxGroup">
<van-grid square :center="true" :column-num="gridColumnNum" :gutter="10" :border="false" <van-grid square :center="true" :column-num="gridColumnNum" :gutter="10" :border="false"
:style="{'width':'100%','max-height': clientHeight-45+'px','overflow':'auto'}"> :style="{'width':'100%','max-height': clientHeight-45+'px','overflow':'auto'}">
<van-grid-item v-for="(item,index) in fileList" ref="gridItem" :key="item.id" <van-grid-item v-for="(item,index) in fileList" ref="gridItem" :key="item.id"
@click="gridItemClick(item)"
@dblclick="fileClick(item)"
> >
<div <div
class="grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square" class="grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
@ -379,12 +381,11 @@
}" }"
@mouseover="gridItemHover(item,index)" @mouseover="gridItemHover(item,index)"
@mouseout="gridItemOut(item,index)" @mouseout="gridItemOut(item,index)"
@click="gridItemClick(item)"
@contextmenu.prevent="rowContextmenu(item)" @contextmenu.prevent="rowContextmenu(item)"
> >
<van-checkbox v-show="!selectFile" v-if="gridHoverItemIndex === index || selectRowData.includes(item)" <!-- <van-checkbox v-show="!selectFile" v-if="gridHoverItemIndex === index || selectRowData.includes(item)"-->
class="grid-item-checkbox" :name="item" <!-- class="grid-item-checkbox" :name="item"-->
@click.stop="clickGridItemCheckBox(item,index)"/> <!-- @click.stop.prevent="clickGridItemCheckBox(item,index)"/>-->
<div :class="{'grid-item-icon':true, 'grid-item-icon-image': queryFileType === 'image' ? gridHoverItemIndex === index || selectRowData.includes(item) : false}"> <div :class="{'grid-item-icon':true, 'grid-item-icon-image': queryFileType === 'image' ? gridHoverItemIndex === index || selectRowData.includes(item) : false}">
<icon-file v-show="queryFileType !== 'image'" :item="item" :image-url="imageUrl" :audio-cover-url="audioCoverUrl" <icon-file v-show="queryFileType !== 'image'" :item="item" :image-url="imageUrl" :audio-cover-url="audioCoverUrl"
:grid="true"></icon-file> :grid="true"></icon-file>
@ -928,7 +929,6 @@ export default {
window.onresize = function (){ window.onresize = function (){
that.clientHeight = document.documentElement.clientHeight - that.lessClientHeight that.clientHeight = document.documentElement.clientHeight - that.lessClientHeight
} }
// 画矩形选区 // 画矩形选区
this.darwRectangle() this.darwRectangle()
@ -1033,10 +1033,16 @@ export default {
return return
} }
if (!this.drawFlag) { if (!this.drawFlag) {
this.fileClick(row) // this.fileClick(row)
} }
this.$refs.fileListTable.clearSelection()
this.$refs.fileListTable.toggleRowSelection([{row: row}])
this.pinSelect(null, row)
}, },
containerResize(ddd) { containerClick() {
},
containerResize() {
const container = document.querySelector(".dashboard-container") const container = document.querySelector(".dashboard-container")
let clientWidth = container.clientWidth let clientWidth = container.clientWidth
this.clientHeight = document.documentElement.clientHeight - this.lessClientHeight this.clientHeight = document.documentElement.clientHeight - this.lessClientHeight
@ -1078,7 +1084,9 @@ export default {
let retcLeft = 0, retcTop = 0, retcHeight = 0, retcWidth = 0 let retcLeft = 0, retcTop = 0, retcHeight = 0, retcWidth = 0
_this.drawFlag = false _this.drawFlag = false
let itemClassName = 'el-table__row' let itemClassName = 'el-table__row'
draw.onmousedown = null
draw.onmousedown = function (e) { draw.onmousedown = function (e) {
console.log('draw', onmousedown)
if (_this.fileListScrollTop > 0) { if (_this.fileListScrollTop > 0) {
return return
} }
@ -1192,9 +1200,7 @@ export default {
_this.$refs.fileListTable.toggleRowSelection([{row: _this.fileList[element.rowIndex], selected: false}]) _this.$refs.fileListTable.toggleRowSelection([{row: _this.fileList[element.rowIndex], selected: false}])
} }
}) })
setTimeout(function () { setTimeout(() => drawSelecting = false, 10)
drawSelecting = false
}, 150)
} }
//检查两个DIV是否有接触 //检查两个DIV是否有接触
let checkTouch = function (item, draw) { let checkTouch = function (item, draw) {
@ -1279,6 +1285,7 @@ export default {
} }
child.ondragstart = function (e) { child.ondragstart = function (e) {
console.log('child.ondragstart')
if (_this.fileListScrollTop === 0) { if (_this.fileListScrollTop === 0) {
let count = _this.selectRowData.length let count = _this.selectRowData.length
if (_this.selectRowData.length >= 99) { if (_this.selectRowData.length >= 99) {
@ -1312,11 +1319,7 @@ export default {
// 清除上次进入的容器的状态 // 清除上次进入的容器的状态
const last = target.children[dragIndex]; const last = target.children[dragIndex];
clearClass(last) clearClass(last)
if (_this.grid) { dragged.style.cursor = 'default'
dragged.style.cursor = 'pointer'
} else {
dragged.style.cursor = 'default'
}
} }
} }
}, 0) }, 0)
@ -1514,12 +1517,11 @@ export default {
}, },
// 浏览器的返回事件 // 浏览器的返回事件
goBack() { goBack() {
if (this.pathList.length === 2) { if (this.pathList.length <= 1) {
this.$router.push(`/?vmode=${this.vmode}&path=${encodeURIComponent(this.path)}`) this.$router.push(`/?vmode=${this.vmode}&path=${encodeURIComponent(this.path)}`)
return return
} }
const linkIndex = this.pathList.length - 3 this.lastLink()
this.handleLink(this.pathList[linkIndex], linkIndex)
}, },
lastLink() { lastLink() {
this.handleLink(this.pathList[this.pathList.length - 2], this.pathList.length - 2) this.handleLink(this.pathList[this.pathList.length - 2], this.pathList.length - 2)
@ -2127,12 +2129,12 @@ export default {
}, },
//双击 //双击
dblclick(row) { dblclick(row) {
// this.fileClick(row) this.fileClick(row)
}, },
// 单元格点击事件 // 单元格点击事件
cellClick(row, column) { cellClick(row, column) {
if(this.selectFile){ if(this.selectFile){
this.fileClick(row) // this.fileClick(row)
return return
} }
clearTimeout(this.Loop); clearTimeout(this.Loop);
@ -2955,10 +2957,6 @@ export default {
} }
if (row.suffix === 'pdf') { if (row.suffix === 'pdf') {
// pdf文件 // pdf文件
let host = window.location.host
if (window.location.port.length > 0) {
host = window.location.host.substring(0, window.location.host.length - window.location.port.length - 1)
}
fileConfig.preview(this.$store.state.user.name, row, this.$store.getters.token) fileConfig.preview(this.$store.state.user.name, row, this.$store.getters.token)
return return
} }
@ -2968,7 +2966,6 @@ export default {
return return
} }
// 其他文件 // 其他文件
let fileIds = [row.id]
this.notPreviewDialogVisible = true this.notPreviewDialogVisible = true
} }
}, },
@ -3065,6 +3062,7 @@ export default {
.table-file-name:hover { .table-file-name:hover {
color: #19ACF9; color: #19ACF9;
cursor: pointer;
} }
/deep/ .plTableBox .el-table .el-table__header { /deep/ .plTableBox .el-table .el-table__header {

1
src/components/preview/ImageViewer.vue
View File

@ -190,7 +190,6 @@ export default {
this.vantImagePreview = vant.ImagePreview({ this.vantImagePreview = vant.ImagePreview({
images: imageUrls, images: imageUrls,
startPosition: viewIndex, startPosition: viewIndex,
closeable: true,
onClose() { onClose() {
Bus.$emit('updateImageViewerStatus', false) Bus.$emit('updateImageViewerStatus', false)
}, },

2
src/styles/home-index.scss
View File

@ -313,6 +313,7 @@
/deep/ .grid-time { /deep/ .grid-time {
border-radius: 10px; border-radius: 10px;
padding: 0 8px; padding: 0 8px;
border: solid 1px #ccc0;
.grid-item-checkbox { .grid-item-checkbox {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -336,7 +337,6 @@
} }
/deep/ .grid-time:hover { /deep/ .grid-time:hover {
border: solid 1px #c8c9cc; border: solid 1px #c8c9cc;
cursor: pointer;
} }
.checkbox-group-header { .checkbox-group-header {
margin: 10px 0 0; margin: 10px 0 0;

2633
src/views/home/mobile/index.vue
View File

File diff suppressed because it is too large Load Diff