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>

98
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,13 +1319,9 @@ export default {
// 清除上次进入的容器的状态 // 清除上次进入的容器的状态
const last = target.children[dragIndex]; const last = target.children[dragIndex];
clearClass(last) clearClass(last)
if (_this.grid) {
dragged.style.cursor = 'pointer'
} else {
dragged.style.cursor = 'default' 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;

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

@ -1,5 +1,5 @@
<template> <template>
<div class="container"> <div class="container" v-resize="containerResize">
<!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> --> <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
<!--左侧菜单--> <!--左侧菜单-->
<van-popup v-model="leftMenuShow" get-container="body" position="left" :style="{ height: '100%', width: '35%'}"> <van-popup v-model="leftMenuShow" get-container="body" position="left" :style="{ height: '100%', width: '35%'}">
@ -57,7 +57,8 @@
width="25" width="25"
height="25" height="25"
> >
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" /> <path
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"/>
</svg> </svg>
</div> </div>
</van-nav-bar> </van-nav-bar>
@ -108,24 +109,33 @@
<van-icon name="more-o"/> <van-icon name="more-o"/>
</van-col> </van-col>
<van-col class="operating-header-col" span="16" align="center" @click="showSortSheet"> <van-col class="operating-header-col" span="16" align="center" @click="showSortSheet">
已按{{actionsSortName}}排序 <van-icon class="sortable" :name="'arrow-'+sortOrder" /> 已按{{ actionsSortName }}排序
<van-icon class="sortable" :name="'arrow-'+sortOrder"/>
</van-col> </van-col>
<van-col class="operating-header-col" span="4" align="center" @click="changeVmode"> <van-col class="operating-header-col" span="4" align="center" @click="changeVmode">
<van-icon name="bars" :style="!grid?{background:'#1989fa',color:'#ffffff',padding:'0 5px',borderRadius: '5px'}:{}"/> <van-icon name="bars"
:style="!grid?{background:'#1989fa',color:'#ffffff',padding:'0 5px',borderRadius: '5px'}:{}"/>
</van-col> </van-col>
</van-row> </van-row>
</div> </div>
</van-cell> </van-cell>
<!--搜索结果--> <!--搜索结果-->
<van-cell v-if="searchStatus && searchValue.length > 0 && fileList.length > 0" style="background-color:#f7f8fa;"> <van-cell v-if="searchStatus && searchValue.length > 0 && fileList.length > 0"
style="background-color:#f7f8fa;">
<div class="search-result">{{ resultCount }}个结果</div> <div class="search-result">{{ resultCount }}个结果</div>
</van-cell> </van-cell>
<van-cell v-if="searchStatus && searchValue.length > 0 && fileList.length === 0"> <van-cell v-if="searchStatus && searchValue.length > 0 && fileList.length === 0">
<div class="search-result-no">无结果</div> <div class="search-result-no">无结果</div>
</van-cell> </van-cell>
<van-cell v-show="!grid" class="list-item" :style="{'background': selectIndexList.includes(index) ? '#90c2fcb5' : ''}" center v-for="(item,index) in fileList" :key="item.id" @click="fileClick(item,index)" :is-link="item.isFolder"> <!--空状态-->
<van-empty v-if="!loading && fileList.length === 0" description="空空如也"/>
<van-cell v-if="!grid" class="list-item"
:style="{'background': selectIndexList.includes(index) ? '#90c2fcb5' : ''}" center
v-for="(item,index) in fileList" :key="item.id" @click="fileClick(item,index)"
:is-link="item.isFolder">
<div class="list-item-div" @touchstart="touchStart(item)" @touchend="touchEnd" @touchmove="touchMove"> <div class="list-item-div" @touchstart="touchStart(item)" @touchend="touchEnd" @touchmove="touchMove">
<van-row class="row-file"> <van-row class="row-file">
<van-col span="4" align="center" class="list-cell-icon"> <van-col span="4" align="center" class="list-cell-icon">
@ -146,14 +156,21 @@
</van-col> </van-col>
</van-row> </van-row>
</div> </div>
<van-checkbox v-if="selectStatus" slot="right-icon" :name="item" ref="checkboxes"></van-checkbox> <van-checkbox class="file-item-checkbox" v-if="!grid && selectStatus" slot="right-icon" :name="item" ref="checkboxes"></van-checkbox>
</van-cell> </van-cell>
<van-grid v-show="grid" square :center="true" :column-num="4" :gutter="10" :border="false" :style="{'width':'100%','overflow':'auto'}"> <van-grid v-if="grid" square :center="true" :column-num="gridColumnNum" :gutter="10" :border="false"
<van-grid-item v-for="(item,index) in fileList" ref="gridItem" :key="item.id"> :style="{'width':'100%','overflow':'auto'}">
<div> <van-grid-item class="parent-grid-item" v-for="(item,index) in fileList" ref="gridItem" :key="item.id"
@click="fileClick(item,index)">
<div
class="grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
:style="{'background': selectIndexList.includes(index) ? '#90c2fcb5' : '', 'border-radius': '15px'}"
@touchstart="touchStart(item)" @touchend="touchEnd" @touchmove="touchMove">
<van-checkbox class="file-item-checkbox" v-if="grid && selectStatus" slot="right-icon" :name="item" ref="checkboxes"></van-checkbox>
<div class="grid-item-icon"> <div class="grid-item-icon">
<icon-file :item="item" :image-url="imageUrl" :audio-cover-url="audioCoverUrl" :grid="true"></icon-file> <icon-file :item="item" :image-url="imageUrl" :audio-cover-url="audioCoverUrl"
:grid="true"></icon-file>
</div> </div>
<span :title="item.name" class="grid-item-text">{{ item.name }}</span> <span :title="item.name" class="grid-item-text">{{ item.name }}</span>
</div> </div>
@ -186,20 +203,24 @@
</van-action-sheet> </van-action-sheet>
<van-dialog v-model="showNewFolder" show-cancel-button @confirm="newFolderNameClick"> <van-dialog v-model="showNewFolder" show-cancel-button @confirm="newFolderNameClick">
<van-field class="new-folder-input" v-model="newFolderName" placeholder="请输入文件夹名称" :border="true" :clearable="true" ref="newFolderInput" :autofocus="true"> <van-field class="new-folder-input" v-model="newFolderName" placeholder="请输入文件夹名称" :border="true"
:clearable="true" ref="newFolderInput" :autofocus="true">
</van-field> </van-field>
</van-dialog> </van-dialog>
<van-dialog v-model="showRename" show-cancel-button @confirm="rowRename()"> <van-dialog v-model="showRename" show-cancel-button @confirm="rowRename()">
<van-field class="rename-input" v-model="renameFileName" placeholder="请输入文件名称" :border="true" :clearable="true" ref="renameInput" :autofocus="true"> <van-field class="rename-input" v-model="renameFileName" placeholder="请输入文件名称" :border="true" :clearable="true"
ref="renameInput" :autofocus="true">
</van-field> </van-field>
</van-dialog> </van-dialog>
<e-vue-contextmenu ref="contextShow" class="newFileMenu" @ctx-show="show" @ctx-hide="hide"> <e-vue-contextmenu ref="contextShow" class="newFileMenu" @ctx-show="show" @ctx-hide="hide">
<ul v-for="(item,index) in menus" :key="item.label" :class="{'menu-list-first':index===0,'menu-list-last':index===menus.length-1,'menu-list':index<menus.length-1&&index>0}"> <ul v-for="(item,index) in menus" :key="item.label"
:class="{'menu-list-first':index===0,'menu-list-last':index===menus.length-1,'menu-list':index<menus.length-1&&index>0}">
<div v-if="index !== 0" style="border-bottom:1px solid #cccccc85"></div> <div v-if="index !== 0" style="border-bottom:1px solid #cccccc85"></div>
<li :class="{'remove':item.operation==='remove'}" @click="menusOperations(item.operation)"> <li :class="{'remove':item.operation==='remove'}" @click="menusOperations(item.operation)">
<div class="menuitem"><svg-icon :icon-class="item.iconClass" /> <div class="menuitem">
<svg-icon :icon-class="item.iconClass"/>
<span class="menuitem text">{{ item.label }}</span> <span class="menuitem text">{{ item.label }}</span>
</div> </div>
</li> </li>
@ -207,8 +228,8 @@
</e-vue-contextmenu> </e-vue-contextmenu>
<van-overlay ref="overlayShow" :show="overlayShow" duration="0.3" @click="overlayClick"> <van-overlay ref="overlayShow" :show="overlayShow" duration="0.3" @click="overlayClick">
<van-cell v-if="rowContextData.name!=null" :style="overlayContentClass" class="list-item overlay-content-class" center @click="fileClick(rowContextData,rowContextData.index)" :is-link="rowContextData.isFolder"> <van-cell v-if="rowContextData.name!=null && !grid" :style="overlayContentClass"
<!--<div :style="overlayContentClass">--> class="list-item overlay-content-class" center :is-link="rowContextData.isFolder">
<div> <div>
<van-row class="row-file"> <van-row class="row-file">
<van-col span="4" align="center" class="list-cell-icon"> <van-col span="4" align="center" class="list-cell-icon">
@ -227,8 +248,21 @@
<van-col span="4"></van-col> <van-col span="4"></van-col>
</van-row> </van-row>
</div> </div>
<van-checkbox v-if="selectStatus" v-model="isShowCheckContext" slot="right-icon" :name="rowContextData"></van-checkbox> <van-checkbox class="file-item-checkbox" v-if="selectStatus" v-model="isShowCheckContext" slot="right-icon"
:name="rowContextData"></van-checkbox>
</van-cell> </van-cell>
<div v-if="rowContextData.name!=null && grid" :style="overlayContentClass"
class="grid-time overlay-content-class van-grid-item__content van-grid-item__content--center van-grid-item__content--square">
<van-checkbox class="file-item-checkbox" v-if="selectStatus" v-model="isShowCheckContext" slot="right-icon"
:name="rowContextData"></van-checkbox>
<div class="grid-item-icon">
<icon-file :item="rowContextData" :image-url="imageUrl" :audio-cover-url="audioCoverUrl"
:grid="true"></icon-file>
</div>
<span :title="rowContextData.name" class="grid-item-text">{{ rowContextData.name }}</span>
</div>
</van-overlay> </van-overlay>
<!--为了不受右键区域的影响, 把弹窗之类的提取出来--> <!--为了不受右键区域的影响, 把弹窗之类的提取出来-->
<sim-text-preview :file.sync="textPreviewRow" :status.sync="textPreviewVisible"></sim-text-preview> <sim-text-preview :file.sync="textPreviewRow" :status.sync="textPreviewVisible"></sim-text-preview>
@ -239,16 +273,16 @@
<script> <script>
import {mapGetters} from 'vuex' import {mapGetters} from 'vuex'
import {formatSize, formatTime, strlen, substring10} from '@/utils/number' import {formatSize, formatTime} from '@/utils/number'
import api from '@/api/file-api' import api from '@/api/file-api'
import IconFile from "../../../components/Icon/IconFile"; import IconFile from "../../../components/Icon/IconFile";
import Bus from '@/assets/js/bus' import Bus from '@/assets/js/bus'
import {getPath, getPathList, removePath, setPath} from '@/utils/path'
import fileConfig from "@/utils/file-config"; import fileConfig from "@/utils/file-config";
import ImageViewer from "@/components/preview/ImageViewer"; import ImageViewer from "@/components/preview/ImageViewer";
import VideoPreview from "@/components/preview/VideoPreview"; import VideoPreview from "@/components/preview/VideoPreview";
import SimTextPreview from "@/components/preview/SimTextPreview"; import SimTextPreview from "@/components/preview/SimTextPreview";
import {suffix} from "@/utils/file-type"; import {suffix} from "@/utils/file-type";
let pinyin = require("pinyin"); let pinyin = require("pinyin");
export default { export default {
@ -335,6 +369,7 @@
order: null, order: null,
grid: false, grid: false,
vmode: 'list', vmode: 'list',
gridColumnNum: -1,
imagePreviewRow: {}, imagePreviewRow: {},
imagePreviewVisible: false, imagePreviewVisible: false,
videoPreviewRow: {}, videoPreviewRow: {},
@ -343,7 +378,37 @@
textPreviewRow: {}, textPreviewRow: {},
}; };
}, },
directives: {
resize: { // 指令的名称
bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
let width = '', height = '';
function isReize() {
const style = document.defaultView.getComputedStyle(el);
if (width !== style.width || height !== style.height) {
binding.value(); // 关键
}
width = style.width;
height = style.height;
}
el.__vueSetInterval__ = setInterval(isReize, 300);
},
unbind(el) {
clearInterval(el.__vueSetInterval__);
}
}
},
mounted() { mounted() {
// 加载布局
if (this.$route.query.vmode) {
this.vmode = this.$route.query.vmode
if (this.vmode === 'list') {
this.grid = false
} else {
this.grid = true
}
}
// 加载url上的path // 加载url上的path
if (this.$route.query.path !== '/') { if (this.$route.query.path !== '/') {
const path = decodeURI(this.$route.query.path) const path = decodeURI(this.$route.query.path)
@ -419,14 +484,14 @@
this.preliminaryRowData(row) this.preliminaryRowData(row)
// 长按选择的数据 // 长按选择的数据
const offsetTop = target.offsetTop - row.scrollY const offsetTop = this.getElementToPageTop(target) - row.scrollY
const e = {} const e = {}
if ((offsetTop + (target.offsetHeight / 2)) > document.body.offsetHeight / 2) { if ((offsetTop + (target.offsetHeight / 2)) > document.body.offsetHeight / 2) {
e.pageX = touchClientX e.pageX = touchClientX
e.pageY = target.offsetTop - this.menus.length*47 + 5 e.pageY = this.getElementToPageTop(target) - this.menus.length * 47 + 5
} else { } else {
e.pageX = touchClientX e.pageX = touchClientX
e.pageY = target.offsetTop + target.offsetHeight + 5 e.pageY = this.getElementToPageTop(target) + target.offsetHeight + 5
} }
this.$refs.contextShow.showMenu(e) this.$refs.contextShow.showMenu(e)
}, },
@ -528,7 +593,6 @@
this.editingIndex = -1 this.editingIndex = -1
} }
}, },
// 下载
downloadFile() { downloadFile() {
let totalSize = 0 let totalSize = 0
if (this.selectRowData.length > 0) { if (this.selectRowData.length > 0) {
@ -613,14 +677,13 @@
// Toast.setDefaultOptions({ duration: 500 }); // Toast.setDefaultOptions({ duration: 500 });
//手指触摸 //手指触摸
clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器 clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
const that = this
const e = window.event const e = window.event
this.Loop = setTimeout(function() { this.Loop = setTimeout(() => {
item.scrollY = e.targetTouches[0].pageY - e.targetTouches[0].clientY item.scrollY = e.targetTouches[0].pageY - e.targetTouches[0].clientY
const touchClientX = e.targetTouches[0].clientX; if (this.findListItem(item, e.targetTouches[0].target, e.targetTouches[0].clientX)) {
that.findListItem(item,e.targetTouches[0].target,touchClientX) this.overlayShow = true
that.overlayShow = true
document.documentElement.style.overflow = 'hidden'; document.documentElement.style.overflow = 'hidden';
}
}, 500); }, 500);
}, },
touchEnd() { touchEnd() {
@ -633,49 +696,76 @@
document.documentElement.style.overflow = null; document.documentElement.style.overflow = null;
}, },
findListItem(item, target, touchClientX) { findListItem(item, target, touchClientX) {
let background = this.selectIndexList.includes(this.rowContextData.index) ? '#90c2fcb5' : '' if (target === null) {
return false
}
const offsetParent = target.offsetParent const offsetParent = target.offsetParent
const parentElement = target.parentElement const parentElement = target.parentElement
if(!offsetParent && parentElement){ if (!offsetParent && parentElement || offsetParent === null) {
this.findListItem(item,target.parentElement,touchClientX) return this.findListItem(item, target.parentElement, touchClientX)
} else { } else {
if (offsetParent.className.indexOf('list-item') > -1) { if (offsetParent.className.indexOf('list-item') > -1) {
// list
this.longPressDisplayLayer(item, offsetParent, touchClientX)
} else if (offsetParent.className.indexOf('grid-time') > -1) {
// grid
this.longPressDisplayLayer(item, offsetParent, touchClientX)
} else {
return this.findListItem(item, target.offsetParent, touchClientX)
}
}
return true
},
// 长按显示层
longPressDisplayLayer(item, offsetParent, touchClientX) {
const background = this.selectIndexList.includes(this.rowContextData.index) ? '#90c2fcb5' : ''
this.overlayContentClass = { this.overlayContentClass = {
'top': (offsetParent.offsetTop-item.scrollY)+'px', 'top': (this.getElementToPageTop(offsetParent) - item.scrollY) + 'px',
'height': offsetParent.offsetHeight + 'px', 'height': offsetParent.offsetHeight + 'px',
'width': offsetParent.offsetWidth + 'px', 'width': offsetParent.offsetWidth + 'px',
'left': offsetParent.offsetLeft+'px', 'left': this.getElementToPageLeft(offsetParent) + 'px',
'border-radius': '0px', 'border-radius': '0px',
'background': background 'background': background
} }
const that = this setTimeout(() => {
setTimeout(function () { this.overlayContentClass = {
that.overlayContentClass = { 'top': (this.getElementToPageTop(offsetParent) - item.scrollY) + 'px',
'top': (offsetParent.offsetTop-item.scrollY)+'px',
'height': offsetParent.offsetHeight + 'px', 'height': offsetParent.offsetHeight + 'px',
'width': (offsetParent.offsetWidth-20)+'px', 'width': (offsetParent.offsetWidth - (this.grid ? 0 : 10)) + 'px',
'left': (offsetParent.offsetLeft+10)+'px', 'left': (this.getElementToPageLeft(offsetParent) + (this.grid ? 0 : 5)) + 'px',
'border-radius': (offsetParent.offsetHeight/4)+'px', 'border-radius': '20px',
'background': background 'background': background
} }
}, 0) }, 0)
document.addEventListener('touchstart', function() {}, false);
this.rowContextmenu(item, offsetParent, touchClientX) this.rowContextmenu(item, offsetParent, touchClientX)
return offsetParent },
} else { // 获取DOM元素到页面顶部的距离
this.findListItem(item,target.offsetParent,touchClientX) getElementToPageTop(el) {
if (el.className.indexOf('parent-grid-item') > -1) {
return el.offsetTop
} }
if (el.parentElement) {
return this.getElementToPageTop(el.parentElement) + el.offsetTop
} }
return el.offsetTop
},
// 获取DOM元素到页面左边的距离
getElementToPageLeft(el) {
if (el.className.indexOf('parent-grid-item') > -1) {
return el.offsetLeft
}
if (el.offsetParent) {
return this.getElementToPageLeft(el.offsetParent) + el.offsetLeft
}
return el.offsetLeft
}, },
// 浏览器的返回事件 // 浏览器的返回事件
goBack() { goBack() {
if (this.pathList.length === 2) { if (this.pathList.length <= 1) {
this.$router.push(`/_m?vmode=${this.vmode}&path=${encodeURIComponent(this.path)}`) this.$router.push(`/_m?vmode=${this.vmode}&path=${encodeURIComponent(this.path)}`)
return return
} }
this.clickBack()
const linkIndex = this.pathList.length - 3
this.handleLink(this.pathList[linkIndex],linkIndex)
}, },
// 点击返回按钮(标题), 返回上一级 // 点击返回按钮(标题), 返回上一级
clickBack() { clickBack() {
@ -821,7 +911,8 @@
pageSize: this.pagination.pageSize, pageSize: this.pagination.pageSize,
}).then(res => { }).then(res => {
this.loadData(res, onLoad) this.loadData(res, onLoad)
}).catch(e => {}) }).catch(e => {
})
}, },
searchFile(key, onLoad) { searchFile(key, onLoad) {
if (key) { if (key) {
@ -850,6 +941,7 @@
this.pagination.pageIndex = 1 this.pagination.pageIndex = 1
} }
this.finished = false; this.finished = false;
this.fileList = []
}, },
// 填充数据 // 填充数据
loadData(res, onLoad) { loadData(res, onLoad) {
@ -864,8 +956,6 @@
file['index'] = index file['index'] = index
}) })
} }
// 加载状态结束
this.loading = false
this.refreshing = false this.refreshing = false
this.resultCount = res.count this.resultCount = res.count
// 数据全部加载完成 // 数据全部加载完成
@ -874,6 +964,26 @@
} }
// 排序 // 排序
this.fileList.sort(this.compare(this.sortableProp)) this.fileList.sort(this.compare(this.sortableProp))
this.$nextTick(() => {
this.containerResize()
// 加载状态结束
this.loading = false
})
},
containerResize() {
const container = document.querySelector(".container")
let clientWidth = container.clientWidth
if (clientWidth > 1024) {
this.gridColumnNum = Math.round(clientWidth / 100 - 4)
} else {
this.gridColumnNum = Math.round(clientWidth / 100 - 2)
if (clientWidth <= 550) {
this.gridColumnNum = 4
}
if (clientWidth <= 375) {
this.gridColumnNum = 3
}
}
}, },
clickFileType(queryFileType, queryCondition) { clickFileType(queryFileType, queryCondition) {
this.queryCondition = queryCondition this.queryCondition = queryCondition
@ -973,10 +1083,11 @@
item['folder'] = row.name item['folder'] = row.name
item['index'] = this.pathList.length - 1 item['index'] = this.pathList.length - 1
this.pathList.push(item) this.pathList.push(item)
this.$router.push(`/_m?path=${encodeURIComponent(this.path)}`) this.$router.push(`/_m?vmode=${this.vmode}&path=${encodeURIComponent(this.path)}`)
this.getFileList() this.getFileList()
} else { } else {
if (row.contentType.startsWith('image')) { if (row.contentType.startsWith('image')) {
// 图片
this.imagePreviewVisible = true this.imagePreviewVisible = true
this.imagePreviewRow = row this.imagePreviewRow = row
return return
@ -998,8 +1109,23 @@
Bus.$emit('onAddAudio', row, this.audioCoverUrl) Bus.$emit('onAddAudio', row, this.audioCoverUrl)
return return
} }
// 通用打开文件的方法 if (row.suffix === 'pdf') {
// pdf文件
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
}
vant.Dialog.confirm({
title: '标题',
message: '此文件不支持预览，是否下载',
confirmButtonText: '下载'
}).then(() => {
// 通用下载文件的方法
setTimeout(() => {
fileConfig.download(this.$store.state.user.name, row, this.$store.state.user.token)
}, 0)
}).catch(() => {
// on cancel
});
} }
} }
}, },
@ -1154,6 +1280,7 @@
.tab-bottom { .tab-bottom {
padding: 0 0 25px 0; padding: 0 0 25px 0;
.van-tabbar-item { .van-tabbar-item {
margin-top: 25px; margin-top: 25px;
animation: ordinary .4s forwards; animation: ordinary .4s forwards;
@ -1163,20 +1290,27 @@
} }
} }
@keyframes iphoneX @keyframes iphoneX {
{ from {
from {margin-top:25px;} margin-top: 25px;
to {margin-top:-5px;} }
to {
margin-top: -5px;
}
} }
@keyframes ordinary @keyframes ordinary {
{ from {
from {margin-top:-5px;} margin-top: -5px;
to {margin-top:25px;} }
to {
margin-top: 25px;
}
} }
.tab-bottom-iphoneX { .tab-bottom-iphoneX {
padding: 0 0 25px 0; padding: 0 0 25px 0;
.van-tabbar-item { .van-tabbar-item {
animation: iphoneX .4s forwards; animation: iphoneX .4s forwards;
-moz-animation: iphoneX .4s forwards; /* Firefox */ -moz-animation: iphoneX .4s forwards; /* Firefox */
@ -1187,6 +1321,7 @@
.tab-bottom-iphoneXS { .tab-bottom-iphoneXS {
padding: 0 0 25px 0; padding: 0 0 25px 0;
.van-tabbar-item { .van-tabbar-item {
animation: iphoneX .4s forwards; animation: iphoneX .4s forwards;
-moz-animation: iphoneX .4s forwards; /* Firefox */ -moz-animation: iphoneX .4s forwards; /* Firefox */
@ -1200,6 +1335,7 @@
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
font-size: 10px; font-size: 10px;
.tab-text { .tab-text {
margin-top: 2px; margin-top: 2px;
} }
@ -1214,12 +1350,14 @@
} }
} }
/deep/ .block { /deep/ .block {
.audio-player-close { .audio-player-close {
width: 1em; width: 1em;
height: 1em; height: 1em;
} }
} }
/*.van-divider {*/ /*.van-divider {*/
/*margin: 5px 15px 0px 15px;*/ /*margin: 5px 15px 0px 15px;*/
/*}*/ /*}*/
@ -1227,6 +1365,7 @@
color: #646566; color: #646566;
font-size: 12px; font-size: 12px;
} }
.van-col { .van-col {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -1249,6 +1388,7 @@
height: 2.5em; height: 2.5em;
} }
} }
.overlay-content-class { .overlay-content-class {
-webkit-transition: all .1s ease-in-out 0s; -webkit-transition: all .1s ease-in-out 0s;
transition: all .1s ease-in-out 0s; transition: all .1s ease-in-out 0s;
@ -1285,6 +1425,7 @@
/*position: relative;*/ /*position: relative;*/
/*box-shadow: 4px 0 2px rgba(0,0,0,0.5);*/ /*box-shadow: 4px 0 2px rgba(0,0,0,0.5);*/
} }
.van-nav-bar::after { .van-nav-bar::after {
/*background: inherit;*/ /*background: inherit;*/
/*!*-webkit-filter: blur(15px);*!*/ /*!*-webkit-filter: blur(15px);*!*/
@ -1310,10 +1451,12 @@
.van-nav-bar__left { .van-nav-bar__left {
// max-width: 30%; // max-width: 30%;
z-index: 11; z-index: 11;
.van-icon-arrow-left { .van-icon-arrow-left {
font-size: 24px; font-size: 24px;
} }
} }
/*.van-nav-bar__left:active {*/ /*.van-nav-bar__left:active {*/
/*background-color: #f8f8f8;*/ /*background-color: #f8f8f8;*/
/*!*background-color: hsl(0, 94%, 47%);*!*/ /*!*background-color: hsl(0, 94%, 47%);*!*/
@ -1321,6 +1464,7 @@
.van-nav-bar__right { .van-nav-bar__right {
z-index: 11; z-index: 11;
} }
.van-nav-bar__arrow + .van-nav-bar__text { .van-nav-bar__arrow + .van-nav-bar__text {
max-width: 7.5rem; max-width: 7.5rem;
min-width: 5.5rem; min-width: 5.5rem;
@ -1340,17 +1484,20 @@
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.newFileMenu { .newFileMenu {
color: #000000db; color: #000000db;
background-color: #efefef; background-color: #efefef;
padding: 1px 0; padding: 1px 0;
} }
/deep/ .menu-background::after { /deep/ .menu-background::after {
background: inherit; background: inherit;
-webkit-backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
background-color: rgba(255, 255, 255, 0.72); background-color: rgba(255, 255, 255, 0.72);
} }
.newFileMenu li { .newFileMenu li {
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
@ -1369,9 +1516,11 @@
border-top-right-radius: 1rem; border-top-right-radius: 1rem;
background-color: #E1E1E1; background-color: #E1E1E1;
} }
.newFileMenu .menu-list li:active { .newFileMenu .menu-list li:active {
background-color: #E1E1E1; background-color: #E1E1E1;
} }
.newFileMenu .menu-list-last li:active { .newFileMenu .menu-list-last li:active {
border-bottom-right-radius: 1rem; border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem; border-bottom-left-radius: 1rem;
@ -1389,15 +1538,18 @@
line-height: 3em;; line-height: 3em;;
margin-left: 10%; margin-left: 10%;
} }
.newFileMenu li .menuitem .text { .newFileMenu li .menuitem .text {
cursor: pointer; cursor: pointer;
margin-left: 10%; margin-left: 10%;
font-weight: normal; font-weight: normal;
} }
.newFileMenu li .menuitem .svg-icon { .newFileMenu li .menuitem .svg-icon {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
} }
/deep/ .ctx-menu-container { /deep/ .ctx-menu-container {
top: unset; top: unset;
border: 1px solid rgba(0, 0, 0, .15); border: 1px solid rgba(0, 0, 0, .15);
@ -1405,33 +1557,41 @@
-webkit-box-shadow: 0 0 0 #ccc; -webkit-box-shadow: 0 0 0 #ccc;
box-shadow: 0 0 0 #ccc; box-shadow: 0 0 0 #ccc;
} }
.header-button { .header-button {
margin: 0 -16px; margin: 0 -16px;
padding: 0 16px; padding: 0 16px;
} }
.header-button-icon { .header-button-icon {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
vertical-align: middle; vertical-align: middle;
} }
.header-button:active { .header-button:active {
background-color: #f2f3f5; background-color: #f2f3f5;
} }
.left-menu { .left-menu {
padding: 1rem 0 0 0; padding: 1rem 0 0 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.logout { .logout {
padding: 1rem 0 0 0; padding: 1rem 0 0 0;
} }
.classification { .classification {
padding: 1rem 0 0 0; padding: 1rem 0 0 0;
/deep/ .van-cell:active { /deep/ .van-cell:active {
background-color: #f8f8f8; background-color: #f8f8f8;
} }
} }
.searchbar { .searchbar {
height: 48px; height: 48px;
background-color: unset; background-color: unset;
@ -1443,6 +1603,7 @@
/*backdrop-filter: saturate(180%) blur(20px);*/ /*backdrop-filter: saturate(180%) blur(20px);*/
/*background-color: rgba(255,255,255,0.72);*/ /*background-color: rgba(255,255,255,0.72);*/
} }
/*.searchbar::after{*/ /*.searchbar::after{*/
/*background: inherit;*/ /*background: inherit;*/
/*background-color: #fff;*/ /*background-color: #fff;*/
@ -1453,16 +1614,19 @@
.van-search { .van-search {
padding: 0 12px; padding: 0 12px;
} }
.van-search__action { .van-search__action {
-webkit-transition: all .3s ease-in-out 0s; -webkit-transition: all .3s ease-in-out 0s;
transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s;
margin-right: -44px; margin-right: -44px;
visibility: hidden; visibility: hidden;
} }
.search-result { .search-result {
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
} }
.search-result-no { .search-result-no {
height: 80px; height: 80px;
line-height: 80px; line-height: 80px;
@ -1470,21 +1634,26 @@
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
} }
.operating-header { .operating-header {
.operating-header-col { .operating-header-col {
height: 28px; height: 28px;
color: #1989fa; color: #1989fa;
.sortable { .sortable {
font-size: 14px !important; font-size: 14px !important;
} }
.van-icon { .van-icon {
line-height: 28px; line-height: 28px;
font-size: 20px; font-size: 20px;
color: #1989fa; color: #1989fa;
} }
} }
.operating-header-col:active { .operating-header-col:active {
color: #C2CCD1; color: #C2CCD1;
.van-icon { .van-icon {
color: #C2CCD1; color: #C2CCD1;
} }
@ -1501,4 +1670,32 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
/deep/ .van-grid-item__content {
padding: 0px;
.grid-item-icon {
svg {
width: 4rem;
height: 4rem;
}
.favorite.svg-icon {
width: 1.5rem !important;
height: 1.5rem !important;
margin: 15px 10px;
}
.el-image {
width: 4rem !important;
height: 4rem !important;
}
}
}
.file-item-checkbox {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 1;
}
</style> </style>